/* ==========================================================================
   Filament Technologies — Kenya-Centric Enterprise Design v2
   
   Palette: White (#fff) · Brand Blue (#1a6cb3) · Brand Yellow (#f3b72c)
   Dark: Deep Navy (#0b1d36) · Warm Amber (#d4840a)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --blue: #1a6cb3;
  --blue-dark: #0e4f84;
  --blue-deep: #0b1d36;
  --blue-10: rgba(26, 108, 179, .1);
  --blue-6: rgba(26, 108, 179, .06);
  --yellow: #f3b72c;
  --yellow-dark: #d4940a;
  --yellow-10: rgba(243, 183, 44, .1);
  --white: #ffffff;
  --g50: #f9fafb;
  --g100: #f3f4f6;
  --g200: #e5e7eb;
  --g300: #d1d5db;
  --g400: #9ca3af;
  --g500: #6b7280;
  --g600: #4b5563;
  --g700: #374151;
  --g800: #1f2937;
  --g900: #111827;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-full: 9999px;
  --sh-sm: 0 2px 8px rgba(0, 0, 0, .05);
  --sh-md: 0 6px 20px -4px rgba(11, 29, 54, .08), 0 2px 6px rgba(0, 0, 0, .03);
  --sh-lg: 0 14px 34px -8px rgba(11, 29, 54, .12), 0 4px 12px rgba(0, 0, 0, .04);
  --sh-xl: 0 24px 50px -10px rgba(11, 29, 54, .18), 0 8px 18px rgba(0, 0, 0, .05);
}

/* ── Reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-padding-top: 80px;
}

html,
body {
  scrollbar-width: thin;
  scrollbar-color: rgba(16, 96, 158, 0.3) transparent;
}

body {
  font-family: var(--font);
  background: var(--white);
  color: var(--g700);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block
}

a {
  text-decoration: none;
  color: inherit
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit
}

ul {
  list-style: none
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px
}

/* ══════════════════════════════════════════════
   SCROLL REVEALS — multiple directions
   ══════════════════════════════════════════════ */
.sr {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1)
}

.sr.v {
  opacity: 1;
  transform: none
}

.sr-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1)
}

.sr-left.v {
  opacity: 1;
  transform: none
}

.sr-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1)
}

.sr-right.v {
  opacity: 1;
  transform: none
}

.sr-scale {
  opacity: 0;
  transform: scale(.88);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1)
}

.sr-scale.v {
  opacity: 1;
  transform: none
}

.d1 {
  transition-delay: .1s
}

.d2 {
  transition-delay: .2s
}

.d3 {
  transition-delay: .3s
}

.d4 {
  transition-delay: .4s
}

.d5 {
  transition-delay: .5s
}

.d6 {
  transition-delay: .6s
}

.d7 {
  transition-delay: .7s
}

/* ══════════════════════════════════════════════
   TOP BAR
   ══════════════════════════════════════════════ */
.top-bar {
  background: var(--blue-deep);
  color: var(--g400);
  font-size: .78rem;
  padding: 7px 0
}

.top-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px
}

.top-bar a {
  color: var(--g300);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  transition: color .2s
}

.top-bar a:hover {
  color: var(--yellow)
}

.top-contacts {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap
}

.top-contacts .sep {
  color: var(--g600)
}

.top-socials {
  display: flex;
  gap: 14px
}

.top-socials a {
  color: var(--g400);
  font-weight: 600;
  font-size: .76rem
}

/* ══════════════════════════════════════════════
   HEADER — 3x larger crisp logo
   ══════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--g200);
  transition: box-shadow .3s, padding .3s;
  padding: 8px 0;
}

.site-header.stuck {
  box-shadow: var(--sh-md);
  padding: 5px 0;
}

.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
}

.nav-logo img {
  height: 74px;
  max-height: 78px;
  width: auto;
  object-fit: contain;
  transition: height .3s ease;
}

.site-header.stuck .nav-logo img {
  height: 56px;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 22px
}

.nav-item {
  font-size: .88rem;
  font-weight: 600;
  color: var(--g600);
  padding: 6px 0;
  position: relative;
  transition: color .2s;
  display: inline-flex;
  align-items: center;
  gap: 5px
}

.nav-item::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--blue);
  border-radius: 2px;
  transition: width .25s
}

.nav-item:hover,
.nav-item.active {
  color: var(--blue)
}

.nav-item:hover::after,
.nav-item.active::after {
  width: 100%
}

/* ═══ Header Mega Menu Dropdowns ═══ */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center
}

.nav-dropdown-toggle {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--g600);
  padding: 6px 0;
  position: relative;
  transition: color .2s
}

.nav-dropdown-toggle::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--blue);
  border-radius: 2px;
  transition: width .25s
}

.nav-dropdown:hover .nav-dropdown-toggle,
.nav-dropdown.active .nav-dropdown-toggle,
.nav-dropdown-toggle.active {
  color: var(--blue)
}

.nav-dropdown:hover .nav-dropdown-toggle::after,
.nav-dropdown.active .nav-dropdown-toggle::after {
  width: 100%
}

.nav-dropdown-toggle svg {
  width: 12px;
  height: 12px;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1)
}

.nav-dropdown:hover .nav-dropdown-toggle svg {
  transform: rotate(180deg)
}

/* Hover bridge to keep menu open */
.nav-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 20px;
  display: block
}

.mega-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(15, 23, 42, 0.08);
  padding: 26px 30px;
  min-width: 630px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all .22s cubic-bezier(.16, 1, .3, 1);
  z-index: 1000;
}

.nav-dropdown:hover .mega-dropdown-menu,
.nav-dropdown:focus-within .mega-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mega-dropdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 30px;
  row-gap: 14px;
}

.mega-dropdown-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
  color: #1e293b;
  font-size: .80rem;
  font-weight: 700;
  letter-spacing: .025em;
  text-transform: uppercase;
  line-height: 1.35;
  transition: all .2s ease;
  background: transparent;
}

.mega-dropdown-link::before {
  content: '';
  display: inline-block;
  width: 3.5px;
  height: 16px;
  background-color: #0284c7;
  border-radius: 2px;
  flex-shrink: 0;
  transition: transform .2s ease, background-color .2s ease;
}

.mega-dropdown-link:hover {
  background-color: #f8fafc;
  color: #0284c7;
  transform: translateX(4px);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  font-size: .86rem;
  font-weight: 700;
  border-radius: var(--r-sm);
  transition: all .2s;
  text-decoration: none
}

.btn:hover {
  transform: translateY(-1px)
}

.btn-primary {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 3px 12px rgba(26, 108, 179, .3)
}

.btn-primary:hover {
  box-shadow: 0 6px 20px rgba(26, 108, 179, .4)
}

.btn-accent {
  background: var(--yellow);
  color: var(--g900);
  box-shadow: 0 3px 12px rgba(243, 183, 44, .3)
}

.btn-accent:hover {
  box-shadow: 0 6px 20px rgba(243, 183, 44, .4)
}

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--g200);
  color: var(--g700)
}

.btn-outline:hover {
  border-color: var(--blue);
  color: var(--blue)
}

.btn-white {
  background: #fff;
  color: var(--g900);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08)
}

.btn-white:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12)
}

.btn-outline-white {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn-outline-white:hover {
  background: #ffffff;
  color: var(--g900);
  border-color: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.btn-lg {
  padding: 14px 32px;
  font-size: .94rem;
  border-radius: var(--r-md)
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 26px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px
}

.nav-hamburger span {
  height: 2px;
  width: 100%;
  background: var(--g700);
  border-radius: 2px;
  transition: all .25s
}

/* ══════════════════════════════════════════════
   DEDICATED SERVICES, SOLUTIONS & PRODUCTS STYLES
   ══════════════════════════════════════════════ */
.service-full-card,
.solution-full-card,
.product-full-card {
  background: var(--white);
  border: 1.5px solid var(--g200);
  border-radius: var(--r-lg);
  padding: 36px 32px;
  box-shadow: var(--sh-xs);
  transition: all .3s cubic-bezier(.22, 1, .36, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.service-full-card:hover,
.solution-full-card:hover,
.product-full-card:hover {
  transform: translateY(-4px);
  border-color: rgba(26, 108, 179, 0.35);
  box-shadow: var(--sh-lg);
}

.service-full-card::before,
.solution-full-card::before,
.product-full-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: var(--blue);
  transition: height .3s ease;
}

.service-full-card:hover::before,
.solution-full-card:hover::before,
.product-full-card:hover::before {
  height: 100%;
}

.card-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  background: var(--blue-10);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: all .25s ease;
}

.service-full-card:hover .card-icon-wrap,
.solution-full-card:hover .card-icon-wrap,
.product-full-card:hover .card-icon-wrap {
  background: var(--blue);
  color: #ffffff;
  transform: scale(1.05);
}

.card-num-badge {
  position: absolute;
  top: 24px;
  right: 28px;
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--g300);
  letter-spacing: 0.05em;
}

.card-title-lg {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--g900);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  line-height: 1.3;
}

.card-desc-lead {
  font-size: 0.95rem;
  color: var(--g600);
  line-height: 1.7;
  margin-bottom: 18px;
}

.card-sub-p {
  font-size: 0.88rem;
  color: var(--g500);
  line-height: 1.65;
  background: var(--g50);
  padding: 14px 16px;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--blue);
  margin-top: auto;
}

.card-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--blue);
  background: var(--blue-10);
  padding: 4px 10px;
  border-radius: var(--r-full);
  margin-bottom: 14px;
  align-self: flex-start;
}

/* Why Choose Us Grid */
.why-choose-section {
  padding: 80px 0;
  background: var(--g50);
  border-top: 1px solid var(--g200);
  border-bottom: 1px solid var(--g200);
}

.why-choose-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.why-choose-box {
  background: #ffffff;
  border: 1.5px solid var(--g200);
  border-radius: var(--r-md);
  padding: 28px 24px;
  transition: all .25s ease;
  display: flex;
  flex-direction: column;
}

.why-choose-box:hover {
  border-color: var(--blue);
  box-shadow: var(--sh-md);
  transform: translateY(-3px);
}

.why-choose-box .why-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: rgba(243, 183, 44, 0.15);
  color: #b45309;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.why-choose-box h4 {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--g900);
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.why-choose-box p {
  font-size: 0.88rem;
  color: var(--g600);
  line-height: 1.6;
}

/* Mobile Drawer Dropdown Accents */
.drawer-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drawer-group-title {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--g400);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 10px;
  margin-bottom: 4px;
}

.drawer-sublink {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--g700);
  padding: 5px 0 5px 12px;
  border-left: 2.5px solid var(--g300);
  transition: all .2s ease;
}

.drawer-sublink:hover,
.drawer-sublink.active {
  color: var(--blue);
  border-left-color: var(--blue);
  transform: translateX(4px);
}

.hero {
  position: relative;
  background-image: url('../images/generated/new_herobanner.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  min-height: 720px;
  display: flex;
  align-items: center;
  padding: 70px 0 110px;
  overflow: hidden;
}

.hero-wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 580px;
  margin: 0;
  text-align: left;
  padding: 0;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(26, 108, 179, .2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--blue-dark);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: var(--r-full);
  margin-bottom: 22px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}

.hero-tag .dot {
  width: 7px;
  height: 7px;
  background: var(--yellow);
  border-radius: 50%;
  animation: ping 2s infinite;
}

@keyframes ping {
  0% {
    box-shadow: 0 0 0 0 rgba(243, 183, 44, .65)
  }

  70% {
    box-shadow: 0 0 0 8px rgba(243, 183, 44, 0)
  }

  100% {
    box-shadow: 0 0 0 0 rgba(243, 183, 44, 0)
  }
}

.hero h1 {
  font-size: 3.9rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.04em;
  color: var(--g900);
  margin-bottom: 22px;
}

.hero h1 .accent {
  color: var(--blue)
}

/* Typewriter word — the cycling text */
.hero h1 .tw-word {
  color: var(--yellow);
  display: inline;
  position: relative
}

.hero h1 .tw-cursor {
  display: inline-block;
  width: 3px;
  height: .82em;
  background: var(--yellow);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink .7s step-end infinite
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: 0
  }
}

.hero-lead {
  font-size: 1.1rem;
  color: var(--g600);
  line-height: 1.68;
  max-width: 540px;
  margin: 0 0 34px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.hero-actions .btn {
  border-radius: var(--r-full);
  padding: 13px 28px;
  font-size: .92rem;
  font-weight: 700;
}

.hero-actions .btn-outline {
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--blue);
  color: var(--blue-dark);
}

.hero-actions .btn-outline:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

/* ══════════════════════════════════════════════
   STATS BAND — Dark with animated gradient
   ══════════════════════════════════════════════ */
.stats-band {
  padding: 52px 0;
  background: var(--blue-deep);
  color: #fff;
  position: relative;
  overflow: hidden
}

.stats-band::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse at 30% 50%, rgba(26, 108, 179, .15) 0%, transparent 50%), radial-gradient(ellipse at 70% 50%, rgba(243, 183, 44, .08) 0%, transparent 50%);
  animation: driftBg 12s ease-in-out infinite alternate;
  pointer-events: none
}

@keyframes driftBg {
  0% {
    transform: translate(0, 0)
  }

  100% {
    transform: translate(30px, -20px)
  }
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
  position: relative;
  z-index: 2
}

.stat-cell .num {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--yellow);
  letter-spacing: -.03em
}

.stat-cell .lbl {
  font-size: .86rem;
  font-weight: 600;
  color: var(--g300);
  margin-top: 2px
}

/* ══════════════════════════════════════════════
   SECTION HEADERS
   ══════════════════════════════════════════════ */
.sh {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 52px
}

.sh-left {
  text-align: left;
  max-width: none;
  margin: 0 0 0
}

.sh-tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
  background: var(--blue-10);
  padding: 5px 14px;
  border-radius: var(--r-full);
  margin-bottom: 14px
}

.sh h2 {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--g900);
  margin-bottom: 12px;
  line-height: 1.2
}

.sh p {
  font-size: 1rem;
  color: var(--g500);
  line-height: 1.65
}

/* ══════════════════════════════════════════════
   SERVICES — Dynamic Showcase (Opens Right to Left)
   ══════════════════════════════════════════════ */
.services-section {
  padding: 96px 0 108px;
  overflow: hidden;
  position: relative
}

.services-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap
}

.services-nav-controls {
  display: flex;
  gap: 10px;
  align-items: center
}

.s-nav-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--g200);
  color: var(--g700);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s cubic-bezier(.22, 1, .36, 1);
  box-shadow: var(--sh-xs)
}

.s-nav-btn:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--sh-sm)
}

.s-nav-btn:active {
  transform: scale(.95)
}

.services-track-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: grab
}

.services-track-container:active {
  cursor: grabbing
}

/* Gradient fade mask on the sides for ultra-smooth edge appearance */
.services-track-container::before,
.services-track-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  z-index: 3;
  pointer-events: none
}

.services-track-container::before {
  left: 0;
  background: linear-gradient(to right, var(--white), transparent)
}

.services-track-container::after {
  right: 0;
  background: linear-gradient(to left, var(--white), transparent)
}

.services-track {
  display: flex;
  gap: 22px;
  padding: 16px 24px 28px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: auto
}

.services-track::-webkit-scrollbar {
  display: none
}

.track-spacer {
  flex: 0 0 calc((100vw - 1180px) / 2);
  min-width: 8px
}

/* Cards start offset to the right and slide in leftwards when section is in view */
.service-slide {
  flex: 0 0 350px;
  background: var(--white);
  border: 1.5px solid var(--g200);
  border-radius: var(--r-xl);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--sh-sm);
  opacity: 0;
  transform: translateX(60px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1), border-color .3s, box-shadow .3s;
}

/* Opening right-to-left cascade when in view */
.services-section.in-view .service-slide {
  opacity: 1;
  transform: translateX(0);
}

.services-section.in-view .service-slide[data-index="0"] {
  transition-delay: .05s
}

.services-section.in-view .service-slide[data-index="1"] {
  transition-delay: .15s
}

.services-section.in-view .service-slide[data-index="2"] {
  transition-delay: .25s
}

.services-section.in-view .service-slide[data-index="3"] {
  transition-delay: .35s
}

.services-section.in-view .service-slide[data-index="4"] {
  transition-delay: .45s
}

.services-section.in-view .service-slide[data-index="5"] {
  transition-delay: .55s
}

.service-slide:hover {
  border-color: var(--blue);
  box-shadow: var(--sh-lg);
  transform: translateY(-6px) !important
}

/* Animated top rim */
.service-slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--yellow), var(--blue));
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity .3s
}

.service-slide:hover::before {
  opacity: 1;
  animation: shimmer 2s linear infinite
}

.service-slide-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px
}

.service-slide .s-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s;
  font-size: 1.1rem
}

.service-slide:hover .s-icon {
  transform: scale(1.1) rotate(-4deg)
}

.s-icon.blue {
  background: var(--blue-10);
  color: var(--blue)
}

.s-icon.yellow {
  background: var(--yellow-10);
  color: var(--yellow-dark)
}

.s-icon.navy {
  background: rgba(255, 255, 255, .12);
  color: var(--yellow)
}

.service-badge {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: var(--g100);
  color: var(--g600)
}

.service-badge.blue {
  background: var(--blue-10);
  color: var(--blue)
}

.service-badge.yellow {
  background: var(--yellow-10);
  color: var(--yellow-dark)
}

.service-slide h3 {
  font-size: 1.24rem;
  font-weight: 800;
  color: var(--g900);
  margin-bottom: 12px;
  line-height: 1.3
}

.service-slide p {
  font-size: .9rem;
  color: var(--g500);
  line-height: 1.65;
  margin-bottom: 24px;
  flex: 1
}

.service-slide-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid var(--g100)
}

.service-metric {
  font-size: .78rem;
  font-weight: 700;
  color: var(--g400);
  letter-spacing: .02em
}

.service-slide .arrow {
  font-size: .86rem;
  font-weight: 700;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap .2s
}

.service-slide .arrow:hover {
  gap: 8px
}

/* Featured dark slide */
.service-slide.dark {
  background: var(--blue-deep);
  border-color: transparent;
  color: #fff
}

.service-slide.dark:hover {
  border-color: var(--yellow)
}

.service-slide.dark .service-badge {
  background: rgba(243, 183, 44, .15);
  color: var(--yellow)
}

.service-slide.dark h3 {
  color: #fff
}

.service-slide.dark p {
  color: rgba(255, 255, 255, .75)
}

.service-slide.dark .service-slide-foot {
  border-top-color: rgba(255, 255, 255, .08)
}

.service-slide.dark .service-metric {
  color: rgba(255, 255, 255, .45)
}

.service-slide.dark .arrow {
  color: var(--yellow)
}

/* ══════════════════════════════════════════════
   AFRICA NETWORK MAP — Split with parallax-feel
   ══════════════════════════════════════════════ */
.africa-section {
  padding: 96px 0;
  background: var(--g50);
  border-top: 1px solid var(--g200);
  position: relative;
  overflow: hidden
}

.africa-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center
}

.africa-visual {
  position: relative
}

.africa-visual img,
.africa-visual video {
  width: 100%;
  display: block;
  border-radius: var(--r-lg);
  filter: drop-shadow(0 8px 30px rgba(26, 108, 179, .12));
  transition: transform .4s ease;
}

.africa-visual:hover img,
.africa-visual:hover video {
  transform: scale(1.02);
}

.africa-countries-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 28px;
}

.country-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: var(--r-full);
  padding: 6px 12px 6px 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .03);
  transition: all .25s ease;
}

.country-card:hover {
  border-color: var(--blue);
  box-shadow: 0 4px 14px rgba(26, 108, 179, .14);
  transform: translateY(-2px);
}

.country-flag-wrap {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(0, 0, 0, .08);
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
  background: #f1f5f9;
}

.country-flag-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.country-name {
  font-size: .82rem;
  font-weight: 700;
  color: var(--g800);
  white-space: nowrap;
}

.africa-text h2 {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--g900);
  margin-bottom: 14px;
  letter-spacing: -.025em;
  line-height: 1.2
}

.africa-text>p {
  font-size: 1rem;
  color: var(--g500);
  line-height: 1.7;
  margin-bottom: 20px
}

.africa-features {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 28px
}

.africa-feature {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px;
  background: var(--white);
  border: 1.5px solid var(--g200);
  border-radius: var(--r-md);
  transition: all .25s
}

.africa-feature:hover {
  border-color: var(--blue);
  box-shadow: var(--sh-sm);
  transform: translateX(4px)
}

.africa-feature-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--blue-10);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.africa-feature h4 {
  font-size: .96rem;
  font-weight: 800;
  color: var(--g800);
  margin-bottom: 2px
}

.africa-feature p {
  font-size: .84rem;
  color: var(--g500);
  line-height: 1.5
}

/* ══════════════════════════════════════════════
   ABOUT — Overlapping offset layout (not a boring 50/50)
   Photo bleeds into text area with offset positioning
   ══════════════════════════════════════════════ */
.about-section {
  padding: 96px 0;
  border-top: 1px solid var(--g200);
  overflow: hidden
}

.about-layout {
  position: relative;
  min-height: 520px
}

.about-img-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;
  height: 100%;
  z-index: 1
}

.about-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 var(--r-lg) var(--r-lg) 0
}

/* Yellow corner triangle */
.about-img-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: var(--yellow);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: .9
}

.about-content {
  position: relative;
  z-index: 2;
  margin-left: 45%;
  background: var(--white);
  border: 1.5px solid var(--g200);
  border-radius: var(--r-lg);
  padding: 48px 40px;
  box-shadow: var(--sh-xl)
}

.about-content h2 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--g900);
  margin-bottom: 14px;
  letter-spacing: -.025em
}

.about-content>p {
  font-size: .98rem;
  color: var(--g500);
  line-height: 1.7;
  margin-bottom: 24px
}

.about-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 28px
}

.about-duo-card {
  background: var(--g50);
  border: 1.5px solid var(--g200);
  border-radius: var(--r-md);
  padding: 18px;
  transition: all .25s
}

.about-duo-card:hover {
  border-color: var(--yellow);
  box-shadow: var(--sh-sm);
  transform: translateY(-3px)
}

.about-duo-card h4 {
  font-size: .96rem;
  font-weight: 800;
  color: var(--blue);
  margin-bottom: 4px
}

.about-duo-card p {
  font-size: .84rem;
  color: var(--g500);
  line-height: 1.5
}

/* ══════════════════════════════════════════════
   PROJECTS — Horizontal timeline style
   ══════════════════════════════════════════════ */
.projects-section {
  padding: 96px 0;
  background: var(--blue-deep);
  color: #fff;
  position: relative;
  overflow: hidden
}

.projects-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 80%, rgba(26, 108, 179, .2) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(243, 183, 44, .08) 0%, transparent 50%);
  pointer-events: none
}

.projects-section .sh h2 {
  color: #fff
}

.projects-section .sh p {
  color: var(--g300)
}

.projects-section .sh-tag {
  background: rgba(255, 255, 255, .1);
  color: var(--yellow)
}

.projects-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
  z-index: 2;
}

.project-tl-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-lg);
  padding: 28px 22px;
  position: relative;
  transition: all .3s cubic-bezier(.22, 1, .36, 1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
}

.project-tl-card:hover {
  background: rgba(255, 255, 255, .12);
  border-color: var(--yellow);
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .25);
}

.project-tl-card .step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--blue-deep);
  font-size: .78rem;
  font-weight: 900;
  margin-bottom: 14px
}

.project-tl-card .tag {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 10px;
  display: block
}

.project-tl-card h4 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px
}

.project-tl-card p {
  font-size: .86rem;
  color: var(--g300);
  line-height: 1.6
}

/* ══════════════════════════════════════════════
   WHY US — Animated icon cards with glow on hover
   ══════════════════════════════════════════════ */
.why-section {
  padding: 96px 0;
  border-top: 1px solid var(--g200)
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px
}

.why-card {
  background: var(--g50);
  border: 1.5px solid var(--g200);
  border-radius: var(--r-md);
  padding: 28px 22px;
  text-align: center;
  transition: all .35s cubic-bezier(.22, 1, .36, 1);
  position: relative;
  overflow: hidden
}

.why-card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, var(--blue-10) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width .4s, height .4s;
  pointer-events: none
}

.why-card:hover::before {
  width: 200px;
  height: 200px
}

.why-card:hover {
  transform: translateY(-6px);
  border-color: var(--blue);
  box-shadow: var(--sh-md);
  background: var(--white)
}

.why-card-icon {
  width: 48px;
  height: 48px;
  background: var(--blue-10);
  color: var(--blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  transition: transform .3s, background .3s;
  position: relative;
  z-index: 2
}

.why-card:hover .why-card-icon {
  transform: scale(1.1);
  background: var(--blue);
  color: #fff
}

.why-card h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--g900);
  margin-bottom: 6px;
  position: relative;
  z-index: 2
}

.why-card p {
  font-size: .86rem;
  color: var(--g500);
  line-height: 1.5;
  position: relative;
  z-index: 2
}

/* ══════════════════════════════════════════════
   TESTIMONIALS — Alternating size marquee
   ══════════════════════════════════════════════ */
.testi-section {
  padding: 96px 0;
  background: var(--g50);
  border-top: 1px solid var(--g200)
}

.testi-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 18px
}

.testi-card {
  background: var(--white);
  border: 1.5px solid var(--g200);
  border-radius: var(--r-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: all .3s
}

.testi-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md)
}

.testi-card:first-child {
  border-left: 3px solid var(--yellow)
}

.testi-stars {
  color: var(--yellow);
  font-size: .9rem;
  letter-spacing: 2px;
  margin-bottom: 12px
}

.testi-card blockquote {
  font-size: .92rem;
  color: var(--g700);
  line-height: 1.65;
  font-style: italic;
  flex: 1;
  margin-bottom: 16px
}

.testi-author strong {
  font-size: .9rem;
  color: var(--g900);
  display: block
}

.testi-author span {
  font-size: .78rem;
  color: var(--g500)
}

/* ══════════════════════════════════════════════
   FAQ — with smooth height animation
   ══════════════════════════════════════════════ */
.faq-section {
  padding: 96px 0;
  border-top: 1px solid var(--g200)
}

.faq-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 56px;
  align-items: start
}

.faq-left h2 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--g900);
  margin-bottom: 12px;
  letter-spacing: -.025em
}

.faq-left p {
  font-size: 1rem;
  color: var(--g500);
  line-height: 1.65;
  margin-bottom: 24px
}

.faq-stack {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.faq-item {
  background: var(--g50);
  border: 1.5px solid var(--g200);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: all .3s
}

.faq-item.open {
  border-color: var(--blue);
  box-shadow: 0 4px 14px rgba(26, 108, 179, .08);
  background: var(--white)
}

.faq-q {
  width: 100%;
  text-align: left;
  padding: 18px 22px;
  font-size: .98rem;
  font-weight: 700;
  color: var(--g800);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  transition: color .2s
}

.faq-q:hover {
  color: var(--blue)
}

.faq-q .icon {
  font-size: 1.3rem;
  color: var(--g400);
  transition: transform .3s, color .3s;
  font-weight: 400
}

.faq-item.open .faq-q .icon {
  transform: rotate(45deg);
  color: var(--blue)
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.22, 1, .36, 1), padding .35s;
  padding: 0 22px;
  font-size: .92rem;
  color: var(--g500);
  line-height: 1.7
}

.faq-item.open .faq-a {
  max-height: 200px;
  padding: 0 22px 18px
}

/* ══════════════════════════════════════════════
   PARTNERS — Infinite marquee scroll
   ══════════════════════════════════════════════ */
.partners-section {
  padding: 72px 0;
  border-top: 1px solid var(--g200);
  overflow: hidden
}

.partners-section .sh {
  margin-bottom: 36px
}

.marquee-wrap {
  position: relative;
  width: 100%;
  overflow: hidden
}

.marquee-wrap::before,
.marquee-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
  pointer-events: none
}

.marquee-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--white), transparent)
}

.marquee-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--white), transparent)
}

.marquee-track {
  display: flex;
  align-items: center;
  gap: 64px;
  animation: marquee 30s linear infinite;
  width: max-content
}

@keyframes marquee {
  0% {
    transform: translateX(0)
  }

  100% {
    transform: translateX(-50%)
  }
}

.marquee-track img {
  height: 36px;
  opacity: .5;
  filter: grayscale(100%);
  transition: all .3s
}

.marquee-track img[src*="securaweb"],
.marquee-track img.logo-2x {
  height: 200px
}

.marquee-track img:hover {
  opacity: 1;
  filter: grayscale(0);
  transform: scale(1.08)
}

/* ══════════════════════════════════════════════
   INSIGHTS — Seacom-inspired split layout
   Image with gradient overlay + text on right
   ══════════════════════════════════════════════ */
.insights-section {
  padding: 96px 0;
  background: var(--g50);
  border-top: 1px solid var(--g200)
}

.insights-split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: center
}

.insights-img-wrap {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-xl)
}

.insights-img-wrap img {
  width: 100%;
  display: block;
  aspect-ratio: 1/1;
  object-fit: cover
}

.insights-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26, 108, 179, .35) 0%, rgba(11, 29, 54, .25) 100%);
  pointer-events: none
}

.insights-text h2 {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--g900);
  margin-bottom: 14px;
  letter-spacing: -.025em;
  line-height: 1.2
}

.insights-text>p {
  font-size: 1rem;
  color: var(--g500);
  line-height: 1.7;
  margin-bottom: 24px
}

.insights-latest {
  margin-bottom: 28px;
  padding: 16px 20px;
  background: var(--white);
  border: 1.5px solid var(--g200);
  border-left: 3px solid var(--yellow);
  border-radius: 0 var(--r-md) var(--r-md) 0
}

.insights-latest h4 {
  font-size: .86rem;
  font-weight: 800;
  color: var(--blue);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .06em
}

.insights-latest p {
  font-size: .9rem;
  color: var(--g600);
  line-height: 1.55
}

.insights-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap
}

/* ══════════════════════════════════════════════
   INNER PAGE HERO BANNER
   ══════════════════════════════════════════════ */
.page-hero-banner {
  padding: 84px 0 64px;
  background: linear-gradient(180deg, var(--white) 0%, var(--g50) 100%);
  border-bottom: 1px solid var(--g200);
  text-align: center;
  position: relative;
}

.page-hero-banner h1 {
  font-size: 3.2rem;
  font-weight: 900;
  color: var(--g900);
  letter-spacing: -.035em;
  margin-bottom: 16px;
  line-height: 1.15;
}

.page-hero-banner p {
  font-size: 1.12rem;
  color: var(--g500);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ══════════════════════════════════════════════
   GRID & CARD UTILITIES FOR INNER PAGES
   ══════════════════════════════════════════════ */
.content-section {
  padding: 88px 0
}

.content-section.alt-bg {
  background: var(--g50);
  border-top: 1px solid var(--g200);
  border-bottom: 1px solid var(--g200)
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px
}

/* Feature & Service Detail Cards */
.feature-card {
  background: var(--white);
  border: 1.5px solid var(--g200);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  transition: all .3s cubic-bezier(.22, 1, .36, 1);
  box-shadow: var(--sh-sm);
}

.feature-card:hover {
  border-color: var(--blue);
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
}

.feature-card .f-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--blue-10);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.feature-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--g900);
  margin-bottom: 10px;
}

.feature-card p {
  font-size: .92rem;
  color: var(--g500);
  line-height: 1.65;
}

/* Contact Form & Info Cards */
.contact-layout {
  display: grid;
  grid-template-columns: 1.2fr 1.8fr;
  gap: 48px;
  align-items: start
}

.contact-info-panel {
  display: flex;
  flex-direction: column;
  gap: 20px
}

.contact-card-box {
  background: var(--white);
  border: 1.5px solid var(--g200);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--sh-sm);
}

.contact-card-box h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--g900);
  margin-bottom: 8px
}

.contact-card-box p {
  font-size: .9rem;
  color: var(--g500);
  line-height: 1.6
}

.contact-form-card {
  background: var(--white);
  border: 1.5px solid var(--g200);
  border-radius: var(--r-xl);
  padding: 40px;
  box-shadow: var(--sh-md);
}

.form-group {
  margin-bottom: 20px
}

.form-label {
  display: block;
  font-size: .84rem;
  font-weight: 700;
  color: var(--g800);
  margin-bottom: 8px
}

.form-input,
.form-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--g200);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: .92rem;
  color: var(--g800);
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26, 108, 179, 0.12);
}

.form-textarea {
  min-height: 120px;
  resize: vertical
}

/* Blog Cards */
.blog-card {
  background: var(--white);
  border: 1.5px solid var(--g200);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: all .3s cubic-bezier(.22, 1, .36, 1);
  box-shadow: var(--sh-sm);
}

.blog-card:hover {
  border-color: var(--blue);
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
}

.blog-card-body {
  padding: 24px 22px
}

.blog-card-tag {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--blue);
  background: var(--blue-10);
  padding: 4px 10px;
  border-radius: var(--r-full);
  display: inline-block;
  margin-bottom: 12px;
}

.blog-card h3 {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--g900);
  margin-bottom: 10px;
  line-height: 1.35
}

.blog-card p {
  font-size: .9rem;
  color: var(--g500);
  line-height: 1.6;
  margin-bottom: 18px
}

.blog-card .blog-date {
  font-size: .8rem;
  color: var(--g400);
  font-weight: 600
}

@media(max-width:1024px) {

  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr)
  }

  .contact-layout {
    grid-template-columns: 1fr
  }

  .page-hero-banner h1 {
    font-size: 2.6rem
  }
}

@media(max-width:640px) {

  .grid-3,
  .grid-2,
  .grid-4 {
    grid-template-columns: 1fr
  }

  .page-hero-banner h1 {
    font-size: 2rem
  }

  .contact-form-card {
    padding: 24px 20px
  }
}


/* ══════════════════════════════════════════════
   CTA — Elevated Architectural Card
   ══════════════════════════════════════════════ */
.cta-section {
  padding: 96px 0 0;
  position: relative;
  z-index: 10
}

.cta-card {
  background: linear-gradient(135deg, #0e2748 0%, #091a32 50%, #051122 100%);
  border: 1.5px solid rgba(26, 108, 179, 0.35);
  border-radius: var(--r-xl);
  padding: 64px 48px 48px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 60px -12px rgba(9, 26, 50, 0.45), 0 0 0 1px rgba(243, 183, 44, 0.1);
  color: #fff;
  text-align: center;
}

/* Background glowing mesh and corner geometric shapes */
.cta-mesh-glow {
  position: absolute;
  top: -60%;
  left: 20%;
  width: 60%;
  height: 160%;
  background: radial-gradient(ellipse at 50% 50%, rgba(26, 108, 179, 0.3) 0%, rgba(243, 183, 44, 0.12) 40%, transparent 70%);
  filter: blur(30px);
  pointer-events: none;
  animation: ctaGlow 6s ease-in-out infinite alternate;
}

@keyframes ctaGlow {
  0% {
    transform: scale(1) translate(0, 0)
  }

  100% {
    transform: scale(1.15) translate(20px, -10px)
  }
}

.cta-corner-geo {
  position: absolute;
  top: -40px;
  right: -40px;
  opacity: .6;
  pointer-events: none;
}

.cta-content {
  position: relative;
  z-index: 3;
  max-width: 760px;
  margin: 0 auto
}

.cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(243, 183, 44, 0.12);
  border: 1px solid rgba(243, 183, 44, 0.3);
  color: var(--yellow);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--r-full);
  margin-bottom: 20px;
}

.pulse-dot-small {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 8px var(--yellow);
  animation: ping 2s infinite;
}

.pulse-dot-small.gold {
  background: var(--yellow)
}

.cta-card h2 {
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: -.035em;
  color: #fff;
  margin-bottom: 16px;
  line-height: 1.15;
}

.cta-card p {
  font-size: 1.06rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto 36px;
}

.cta-actions-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.cta-phone-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: .92rem;
  font-weight: 700;
  backdrop-filter: blur(6px);
  transition: all .25s ease;
}

.cta-phone-pill:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--yellow);
  color: var(--yellow);
  transform: translateY(-2px);
}

.cta-trust-strip {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.65);
}

.trust-item svg {
  color: var(--yellow)
}

/* ══════════════════════════════════════════════
   FOOTER — Clean White Theme with 4x Logo
   ══════════════════════════════════════════════ */
.site-footer.white-theme {
  background: #ffffff;
  color: var(--g600);
  border-top: 1.5px solid var(--g200);
  padding: 80px 0 36px;
  position: relative;
  z-index: 2;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.8fr;
  gap: 48px;
  margin-bottom: 56px;
}

.footer-brand-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 4x Larger Brand Logo in natural original colors */
.footer-logo-img.big-logo {
  height: 120px;
  width: auto;
  max-width: 340px;
  object-fit: contain;
  display: block;
  margin-bottom: 4px;
}

.footer-bio {
  font-size: .92rem;
  color: var(--g500);
  line-height: 1.65;
  max-width: 340px;
}

.footer-noc-status.light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 6px 14px;
  border-radius: var(--r-full);
  font-size: .76rem;
  color: var(--g700);
  width: max-content;
}

.footer-noc-status.light strong {
  color: #059669
}

.noc-indicator-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: ping 2s infinite;
}

.footer-social-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.social-pill.light {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--g50);
  border: 1.5px solid var(--g200);
  border-radius: var(--r-full);
  font-size: .8rem;
  font-weight: 700;
  color: var(--g700);
  transition: all .25s ease;
}

.social-pill.light:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--sh-xs);
}

.footer-title {
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--g900);
  margin-bottom: 20px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.footer-links a {
  font-size: .9rem;
  color: var(--g600);
  font-weight: 500;
  transition: all .2s ease;
}

.footer-links a:hover {
  color: var(--blue);
  transform: translateX(4px);
}

.footer-reach-card.light {
  background: var(--g50);
  border: 1.5px solid var(--g200);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.reach-item {
  display: flex;
  gap: 12px;
  align-items: flex-start
}

.reach-icon.light {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--blue-10);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.reach-lbl {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--g400);
  margin-bottom: 2px;
}

.reach-val {
  font-size: .88rem;
  color: var(--g800);
  font-weight: 600;
  transition: color .2s;
}

.reach-val.highlight-blue {
  color: var(--blue);
  font-weight: 700
}

.reach-val:hover {
  color: var(--blue-dark)
}

.reach-sep {
  color: var(--g400);
  margin: 0 4px
}

.reach-addr {
  font-size: .84rem;
  color: var(--g600);
  line-height: 1.5
}

.footer-bottom-bar.light {
  border-top: 1.5px solid var(--g200);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: .84rem;
  color: var(--g500);
}

.footer-bottom-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap
}

.hub-tag.light {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--g600);
  font-size: .78rem;
  background: var(--g100);
  border: 1px solid var(--g200);
  padding: 4px 12px;
  border-radius: var(--r-full);
}

.footer-bottom-right {
  display: flex;
  align-items: center;
  gap: 12px
}

.footer-bottom-right a {
  color: var(--g600);
  font-weight: 500;
  transition: color .2s
}

.footer-bottom-right a:hover {
  color: var(--blue)
}

.dot-sep {
  color: var(--g300)
}

/* ══════════════════════════════════════════════
   MOBILE DRAWER
   ══════════════════════════════════════════════ */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(3px);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s
}

.drawer-overlay.on {
  opacity: 1;
  pointer-events: auto
}

.drawer-panel {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  height: 100%;
  background: #fff;
  z-index: 201;
  padding: 56px 22px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: right .3s ease;
  box-shadow: -4px 0 24px rgba(0, 0, 0, .15);
  overflow-y: auto
}

.drawer-panel.on {
  right: 0
}

.drawer-x {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 1.6rem;
  background: none;
  border: none;
  color: var(--g700);
  cursor: pointer;
  padding: 4px
}

.drawer-link {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--g800);
  transition: color .2s;
  text-decoration: none;
  display: block;
  padding: 3px 0
}

.drawer-link:hover,
.drawer-link.active {
  color: var(--blue)
}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */
@media(max-width:1024px) {
  .hero {
    min-height: 620px;
    padding: 60px 0 90px
  }

  .hero h1 {
    font-size: 3.2rem
  }

  .africa-grid,
  .insights-split {
    grid-template-columns: 1fr
  }

  .africa-visual,
  .insights-img-wrap {
    order: -1
  }

  .about-layout {
    min-height: auto
  }

  .about-img-wrap {
    position: relative;
    width: 100%;
    height: 300px
  }

  .about-img-wrap img {
    border-radius: var(--r-lg)
  }

  .about-content {
    margin-left: 0;
    margin-top: -40px
  }

  .projects-timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px
  }

  .stats-row,
  .why-grid,
  .why-choose-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .testi-grid {
    grid-template-columns: 1fr 1fr
  }

  .faq-layout {
    grid-template-columns: 1fr
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px
  }

  .nav-menu,
  .nav-row>.btn {
    display: none
  }

  .nav-hamburger {
    display: flex
  }

  .cta-card {
    padding: 48px 28px 36px
  }

  .cta-card h2 {
    font-size: 2.2rem
  }
}

@media(max-width:860px) {
  .hero {
    background-image: url('../images/generated/mobile_hero_newbanner.png');
    background-size: cover;
    background-position: center top;
    min-height: 820px;
    padding: 130px 16px 140px;
    align-items: flex-start;
    display: flex;
    justify-content: center;
  }

  .hero-content {
    max-width: 480px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 32px 22px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 24px;
    box-shadow: 0 16px 40px -8px rgba(11, 26, 48, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.6);
  }

  .hero-lead {
    margin: 0 auto 26px;
    max-width: 100%;
    font-size: 1rem;
    color: var(--g600);
  }

  .hero-actions {
    justify-content: center;
  }

  .hero h1 {
    font-size: 2.5rem;
    margin-bottom: 16px;
  }
}

@media(max-width:640px) {
  .hero {
    min-height: 780px;
    padding: 115px 12px 130px;
  }

  .hero-content {
    padding: 26px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .hero-tag {
    font-size: .68rem;
    padding: 6px 14px;
    letter-spacing: .05em;
    max-width: 100%;
    text-align: center;
    justify-content: center;
    margin-bottom: 18px;
  }

  .hero h1 {
    font-size: 2.1rem;
    margin-bottom: 14px
  }

  .hero-lead {
    font-size: .94rem;
    margin-bottom: 22px
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
    gap: 12px;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

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

  .africa-countries-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px
  }

  .stats-row,
  .why-grid,
  .testi-grid,
  .why-choose-grid {
    grid-template-columns: 1fr
  }

  .about-duo {
    grid-template-columns: 1fr
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px
  }

  .cta-card {
    padding: 36px 20px 28px
  }

  .cta-card h2 {
    font-size: 1.8rem
  }

  .cta-actions-row {
    flex-direction: column;
    width: 100%
  }

  .cta-actions-row .btn,
  .cta-phone-pill {
    width: 100%;
    justify-content: center
  }

  .footer-bottom-bar.light {
    flex-direction: column;
    align-items: flex-start
  }

  .footer-logo-img.big-logo {
    height: 90px
  }
}

/* ══════════════════════════════════════════════
   TEXT PARALLAX COMPONENT (Framer-Motion Style)
   ══════════════════════════════════════════════ */
.text-parallax-wrapper {
  background: var(--white);
  padding: 24px 0 60px;
  position: relative;
  overflow: visible;
}

.text-parallax-item {
  padding: 0 20px;
  position: relative;
}

.tp-sticky-stage {
  position: relative;
  height: 135vh;
  margin-bottom: 0;
}

.tp-sticky-image {
  position: sticky;
  top: 16px;
  height: calc(100vh - 32px);
  border-radius: 28px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  transform-origin: center center;
  will-change: transform;
  box-shadow: 0 20px 60px rgba(11, 29, 54, 0.16);
  transition: transform 0.05s linear;
}

.tp-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 29, 54, 0.45) 0%, rgba(11, 29, 54, 0.78) 100%);
  transition: opacity 0.1s linear;
}

.tp-overlay-copy {
  position: sticky;
  top: 16px;
  height: calc(100vh - 32px);
  margin-top: calc(-100vh + 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--white);
  z-index: 2;
  pointer-events: none;
  padding: 24px 20px;
  transform-origin: center center;
  will-change: transform, opacity;
}

.tp-subheading {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 12px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.tp-heading {
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.18;
  max-width: 920px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
  letter-spacing: -0.5px;
}

.tp-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  padding: 7px 20px;
  border-radius: var(--r-full);
  font-size: 0.88rem;
  font-weight: 600;
  margin-top: 24px;
  letter-spacing: 0.3px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.tp-content-body {
  position: relative;
  z-index: 3;
  max-width: 1200px;
  margin: 0 auto 90px;
  padding: 56px 48px;
  background: var(--white);
  border-radius: 24px;
  border: 1px solid var(--g200);
  box-shadow: 0 16px 48px rgba(11, 29, 54, 0.08);
}

.tp-content-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 48px;
  align-items: start;
}

.tp-content-left {
  display: flex;
  flex-direction: column;
}

.tp-card-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--blue);
  background: var(--b-lt);
  padding: 4px 12px;
  border-radius: var(--r-full);
  margin-bottom: 14px;
}

.tp-content-title {
  font-size: clamp(1.4rem, 2.2vw, 1.95rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 22px;
  letter-spacing: -0.3px;
}

.tp-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tp-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--g100);
  border: 1px solid var(--g200);
  padding: 5px 12px;
  border-radius: var(--r-full);
  transition: all 0.2s ease;
}

.tp-badge:hover {
  background: var(--b-lt);
  border-color: var(--b-mid);
  color: var(--blue);
}

.tp-content-right {
  display: flex;
  flex-direction: column;
}

.tp-desc-main {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--g700);
  margin-bottom: 20px;
}

.tp-desc-main strong {
  color: var(--navy);
}

.tp-desc-sub {
  background: #f8fafc;
  border-left: 4px solid var(--blue);
  padding: 16px 20px;
  border-radius: 0 12px 12px 0;
  font-size: 0.94rem;
  color: var(--g700);
  line-height: 1.65;
  margin-bottom: 28px;
}

.tp-desc-sub strong {
  color: var(--navy);
}

.tp-action-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Responsive adjustments for Text Parallax */
@media (max-width: 1024px) {
  .tp-content-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .tp-content-body {
    padding: 36px 28px;
    margin-bottom: 60px;
  }
}

@media (max-width: 768px) {
  .text-parallax-item {
    padding: 0 12px;
  }

  .tp-sticky-stage {
    height: 120vh;
  }

  .tp-sticky-image {
    top: 10px;
    height: calc(100vh - 20px);
    border-radius: 18px;
  }

  .tp-overlay-copy {
    top: 10px;
    height: calc(100vh - 20px);
    margin-top: calc(-100vh + 20px);
    padding: 16px;
  }

  .tp-content-body {
    padding: 28px 18px;
    border-radius: 18px;
    margin-bottom: 48px;
  }

  .tp-action-row {
    flex-direction: column;
    width: 100%;
  }

  .tp-action-row .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════
   PARTNERS MARQUEE & LOGO CAROUSEL
   ══════════════════════════════════════════════ */
.partners-section,
.partners-band {
  padding: 56px 0 64px;
  background: #ffffff;
  border-top: 1px solid var(--g200);
  border-bottom: 1px solid var(--g200);
  position: relative;
  overflow: hidden;
  width: 100%;
}

.partners-eyebrow {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g400);
  margin-bottom: 32px;
}

.marquee-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 12px 0;
  display: flex;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 56px;
  animation: marqueeScroll 28s linear infinite;
  will-change: transform;
  flex-shrink: 0;
}

.marquee-track:hover {
  animation-play-state: paused;
}

.marquee-content {
  display: flex;
  align-items: center;
  gap: 56px;
  flex-shrink: 0;
}

.marquee-track img,
.marquee-content img {
  height: 42px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.55);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  flex-shrink: 0;
  display: inline-block;
  user-select: none;
}

.marquee-track img:hover,
.marquee-content img:hover {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.08);
}

.marquee-track img.logo-2x,
.marquee-content img.logo-2x {
  height: 72px;
  max-width: 240px;
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ══════════════════════════════════════════════
   PAGE HERO BANNER (Global & Products)
   ══════════════════════════════════════════════ */
.page-hero-banner {
  position: relative;
  padding: 84px 0 68px;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(26, 108, 179, 0.12) 0%, rgba(26, 108, 179, 0.02) 60%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-bottom: 1px solid var(--g200);
  text-align: center;
  overflow: hidden;
}

.page-hero-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(11, 29, 54, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 35%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 35%, black 20%, transparent 80%);
  pointer-events: none;
}

.page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  background: var(--white);
  border: 1px solid rgba(26, 108, 179, 0.22);
  border-radius: var(--r-full);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  box-shadow: 0 4px 16px rgba(26, 108, 179, 0.08);
  margin-bottom: 22px;
  transition: all 0.25s ease;
}

.hero-tag .dot {
  width: 7px;
  height: 7px;
  background: var(--yellow);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--yellow);
  animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.4);
    opacity: 0.7;
  }
}

.page-hero-banner h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.6rem);
  font-weight: 850;
  color: var(--navy);
  line-height: 1.16;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}

.page-hero-banner p {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  line-height: 1.68;
  color: var(--g600);
  max-width: 820px;
  margin: 0 auto 28px;
}

/* Quick Jump Category Navigator Bar */
.hero-quick-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.quick-jump-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: var(--white);
  border: 1px solid var(--g200);
  border-radius: var(--r-full);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--g700);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  text-decoration: none;
}

.quick-jump-pill:hover {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(11, 29, 54, 0.16);
}

.quick-jump-pill svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  transition: transform 0.2s ease;
}

.quick-jump-pill:hover svg {
  transform: translateY(2px);
}

/* ══════════════════════════════════════════════
   NEW CONTACT PAGE UI (Luxury Stage & Glass Form)
   ══════════════════════════════════════════════ */
.wrap-wide {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

.contact-hero-wrap {
  padding: 24px 0 60px;
  background: #ffffff;
}

.contact-hero-stage {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr 0.98fr;
  align-items: stretch;
  background:
    linear-gradient(135deg, rgba(11, 29, 54, 0.94) 0%, rgba(15, 35, 60, 0.88) 45%, rgba(26, 108, 179, 0.42) 100%),
    url('https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=2669&auto=format&fit=crop') center center / cover no-repeat;
  box-shadow: 0 24px 64px rgba(11, 29, 54, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.12);
  min-height: 660px;
}

.contact-left-panel {
  padding: 56px 48px 56px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #ffffff;
  position: relative;
  z-index: 2;
}

.contact-hero-title {
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  font-weight: 850;
  line-height: 1.14;
  color: #ffffff;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
}

.contact-hero-subtitle {
  font-size: 1.05rem;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.82);
  max-width: 520px;
  margin-bottom: 44px;
}

.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 36px;
  margin-top: auto;
}

.contact-info-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-info-label {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 2px;
}

.contact-info-desc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
}

.contact-info-link {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
  line-height: 1.5;
}

.contact-info-link:hover {
  color: var(--yellow);
  transform: translateX(2px);
}

.contact-social-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.contact-social-links a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-social-links a:hover {
  color: var(--yellow);
}

/* Right Panel & Floating White Form Card */
.contact-right-panel {
  padding: 32px 32px 32px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.contact-form-card-new {
  background: #ffffff;
  border-radius: 24px;
  padding: 40px 36px;
  width: 100%;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
}

.contact-form-card-new .form-card-title {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--blue-deep, #0b1d36);
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}

.contact-form-card-new .form-card-sub {
  font-size: 0.9rem;
  color: var(--g500);
  line-height: 1.5;
  margin-bottom: 22px;
}

.form-pill-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.form-pill-row-1 {
  margin-bottom: 12px;
}

.form-pill-input {
  width: 100%;
  border-radius: var(--r-full);
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  padding: 12px 20px;
  font-size: 0.9rem;
  color: var(--g800);
  outline: none;
  transition: all 0.2s ease;
  font-family: inherit;
}

.form-pill-input:focus {
  border-color: var(--blue, #1a6cb3);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(26, 108, 179, 0.12);
}

.form-pill-textarea {
  width: 100%;
  border-radius: 18px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  padding: 14px 20px;
  font-size: 0.9rem;
  color: var(--g800);
  outline: none;
  min-height: 110px;
  resize: vertical;
  margin-bottom: 14px;
  transition: all 0.2s ease;
  font-family: inherit;
}

.form-pill-textarea:focus {
  border-color: var(--blue, #1a6cb3);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(26, 108, 179, 0.12);
}

.contact-consent-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--g600);
  margin-bottom: 20px;
  cursor: pointer;
  user-select: none;
}

.contact-consent-row input[type="checkbox"] {
  accent-color: var(--blue, #1a6cb3);
  width: 16px;
  height: 16px;
}

.contact-submit-btn-pill {
  width: 100%;
  border-radius: var(--r-full);
  background: #0b1d36 !important;
  color: #ffffff !important;
  border: 1.5px solid #0b1d36 !important;
  padding: 14px 28px;
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 6px 18px rgba(11, 29, 54, 0.18);
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0.02em;
}

.contact-submit-btn-pill:hover {
  background: #1a6cb3 !important;
  border-color: #1a6cb3 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(26, 108, 179, 0.32);
}


/* Floating Location Card over Map */
.contact-map-wrapper-new {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--g200);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
  height: 420px;
  margin: 20px 0 60px;
}

.map-floating-card-new {
  position: absolute;
  top: 20px;
  left: 24px;
  z-index: 5;
  background: #ffffff;
  padding: 14px 20px;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--g200);
  max-width: 400px;
}

.map-floating-pin {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Responsive adjustments for Contact Stage */
@media (max-width: 1024px) {
  .contact-hero-stage {
    grid-template-columns: 1fr;
  }

  .contact-left-panel {
    padding: 44px 32px;
  }

  .contact-right-panel {
    padding: 0 32px 44px 32px;
  }
}

@media (max-width: 640px) {
  .contact-hero-stage {
    border-radius: 20px;
  }

  .contact-left-panel {
    padding: 32px 20px;
  }

  .contact-right-panel {
    padding: 0 16px 32px 16px;
  }

  .contact-form-card-new {
    padding: 28px 20px;
    border-radius: 18px;
  }

  .form-pill-row-2 {
    grid-template-columns: 1fr;
  }

  .contact-info-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .map-floating-card-new {
    left: 12px;
    right: 12px;
    top: 12px;
    max-width: calc(100% - 24px);
  }
}

/* ══════════════════════════════════════════════
   PARTNERS SHOWCASE & VIDEO WHEEL STYLES
   ══════════════════════════════════════════════ */
.partners-wheel-section {
  padding: 64px 0 80px;
  background: var(--white);
  position: relative;
  overflow: hidden;
}

.partners-wheel-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: center;
}

.partners-video-card {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: #ffffff;
  border: 1.5px solid var(--g200);
  box-shadow: 0 20px 60px rgba(11, 29, 54, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.partners-video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 70px rgba(11, 29, 54, 0.12);
}

.partners-video-card video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 26px;
  background: #ffffff;
}

.partners-video-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(11, 29, 54, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #ffffff;
  padding: 6px 16px;
  border-radius: var(--r-full);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.partners-spotlight-text h2 {
  font-size: clamp(2rem, 3.5vw, 2.7rem);
  font-weight: 850;
  color: var(--navy);
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin: 14px 0 16px;
}

.partners-spotlight-text p.lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--g600);
  margin-bottom: 28px;
}

.partner-stats-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.partner-stat-box {
  background: var(--g50);
  border: 1px solid var(--g200);
  border-radius: 16px;
  padding: 16px 20px;
  transition: all 0.25s ease;
}

.partner-stat-box:hover {
  background: var(--b-lt);
  border-color: var(--b-mid);
}

.partner-stat-box .num {
  font-size: 1.5rem;
  font-weight: 850;
  color: var(--blue);
  line-height: 1.2;
  margin-bottom: 4px;
}

/* ══════════════════════════════════════════════
   POLARIS-INSPIRED LIGHT THEME PARTNER LAYOUT
   ══════════════════════════════════════════════ */

/* ── 1. Hero Section (Enlarged & Balanced) ── */
.partner-polaris-hero {
  padding: 80px 0 96px;
  background:
    radial-gradient(ellipse 80% 50% at 75% 30%, rgba(26, 108, 179, 0.08) 0%, transparent 60%),
    radial-gradient(circle at 10% 80%, rgba(243, 183, 44, 0.05) 0%, transparent 50%),
    #ffffff;
  border-bottom: 1px solid var(--g200);
  position: relative;
  overflow: hidden;
}

.hero-capsule-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.hero-capsule-tag {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(26, 108, 179, 0.08);
  border: 1px solid rgba(26, 108, 179, 0.22);
  padding: 7px 18px;
  border-radius: var(--r-full);
  transition: all 0.25s ease;
}

.hero-capsule-tag:hover {
  background: var(--blue);
  color: #ffffff;
  transform: translateY(-2px);
}

.hero-polaris-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 52px;
  align-items: center;
}

.hero-polaris-content {
  display: flex;
  flex-direction: column;
}

.hero-polaris-title {
  font-size: clamp(2.5rem, 5vw, 4.4rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  color: #0b1d36;
}

.hero-polaris-title .stroke-text {
  color: #0b1d36;
  display: block;
}

.hero-polaris-title .gradient-text {
  color: #1a6cb3;
  background: linear-gradient(135deg, #1a6cb3 0%, #0284c7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
}

.hero-polaris-title .highlight-orange {
  color: #d97706;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

.hero-polaris-desc {
  font-size: 1.14rem;
  line-height: 1.72;
  color: #334155;
  margin-bottom: 34px;
  max-width: 580px;
}

.hero-polaris-ctas {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Right-hand visual card */
.hero-visual-card {
  position: relative;
  border-radius: 32px;
  background: linear-gradient(145deg, #f8fafc 0%, #edf2f7 100%);
  border: 1.5px solid var(--g200);
  box-shadow: 0 24px 60px -12px rgba(11, 29, 54, 0.12);
  padding: 18px;
  overflow: hidden;
}

.hero-visual-inner {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  height: 440px;
}

.hero-visual-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-visual-card:hover .hero-visual-inner img {
  transform: scale(1.04);
}

.hero-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 29, 54, 0.1) 0%, rgba(11, 29, 54, 0.75) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
}

.hero-visual-pill-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hero-visual-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 750;
  color: #ffffff;
  background: rgba(11, 29, 54, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 6px 14px;
  border-radius: var(--r-full);
  width: fit-content;
}

.hero-visual-badge .badge-icon {
  color: var(--yellow);
}

/* ── 2. Video Showcase Section (2-Column Header + Wide Pure Video Player) ── */
.partner-video-showcase-section {
  padding: 84px 0 100px;
  background: #ffffff;
  border-bottom: 1px solid var(--g200);
}

.video-showcase-split-header {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: flex-end;
  margin-bottom: 44px;
}

.split-header-left {
  display: flex;
  flex-direction: column;
}

.video-section-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(26, 108, 179, 0.08);
  border: 1px solid rgba(26, 108, 179, 0.22);
  padding: 7px 18px;
  border-radius: var(--r-full);
  margin-bottom: 16px;
  width: fit-content;
}

.video-section-title {
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  font-weight: 900;
  color: #0b1d36;
  letter-spacing: -0.035em;
  line-height: 1.12;
  text-transform: uppercase;
}

.split-header-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.video-section-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #334155;
}

.video-header-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.v-tag {
  font-size: 0.74rem;
  font-weight: 750;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  padding: 5px 14px;
  border-radius: var(--r-full);
}

.partner-video-pure-card {
  width: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: #0b1d36;
  border: 1.5px solid var(--g200);
  box-shadow: 0 24px 64px -14px rgba(11, 29, 54, 0.16);
  position: relative;
}

.partner-video-desktop {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 30px;
}

.partner-video-mobile {
  display: none;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 30px;
}

@media (max-width: 1024px) {
  .video-showcase-split-header {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 32px;
  }
}

@media (max-width: 768px) {
  .partner-polaris-hero {
    padding: 48px 0 60px;
  }

  .hero-visual-inner {
    height: 320px;
  }

  .partner-video-showcase-section {
    padding: 48px 0 60px;
  }

  .video-showcase-split-header {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 24px;
  }

  .partner-video-pure-card {
    border-radius: 20px;
    box-shadow: 0 16px 40px -10px rgba(11, 29, 54, 0.12);
  }

  .partner-video-desktop {
    display: none !important;
  }

  .partner-video-mobile {
    display: block !important;
  }
}

/* ==========================================================================
   ABOUT US PAGE — DARK & GOLD CINEMATIC THEME (REFERENCE INSPIRED)
   ========================================================================== */

.about-dark-page {
  background-color: #070b14;
  color: #f8fafc;
  position: relative;
  font-family: inherit;
}

/* ── 1. CINEMATIC HERO SECTION ── */
.about-cine-hero {
  position: relative;
  padding: 100px 0 60px;
  background: radial-gradient(circle at 50% 20%, rgba(243, 183, 44, 0.12) 0%, rgba(7, 11, 20, 0.8) 60%, #070b14 100%);
  overflow: hidden;
}

.about-cine-hero-glow {
  position: absolute;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 500px;
  background: radial-gradient(ellipse at center, rgba(243, 183, 44, 0.22) 0%, rgba(26, 108, 179, 0.15) 50%, transparent 75%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.about-cine-hero .wrap {
  position: relative;
  z-index: 2;
  text-align: center;
}

.about-cine-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #f3b72c;
  background: rgba(243, 183, 44, 0.1);
  border: 1px solid rgba(243, 183, 44, 0.25);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 24px;
}

.about-cine-hero-title {
  font-size: 3.4rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.04em;
  line-height: 1.12;
  max-width: 860px;
  margin: 0 auto 20px;
}

.about-cine-hero-lead {
  font-size: 1.1rem;
  line-height: 1.65;
  color: #94a3b8;
  max-width: 680px;
  margin: 0 auto 50px;
}

/* Hero Metrics Ticker Bar */
.about-cine-metrics-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
  padding: 24px 32px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  backdrop-filter: blur(12px);
  max-width: 960px;
  margin: 0 auto;
}

.cine-metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.cine-metric-num {
  font-size: 1.8rem;
  font-weight: 900;
  color: #f3b72c;
  letter-spacing: -0.02em;
}

.cine-metric-lbl {
  font-size: 0.78rem;
  font-weight: 600;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── 2. NARRATIVE ORIGIN SPLIT SECTION ── */
.about-origin-split-section {
  padding: 90px 0 80px;
  position: relative;
  z-index: 2;
}

.about-origin-grid {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 56px;
  align-items: center;
}

.about-origin-img-frame {
  position: relative;
  width: 100%;
  height: 480px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px -15px rgba(0, 0, 0, 0.6);
}

.about-origin-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-origin-content {
  display: flex;
  flex-direction: column;
}

.about-origin-content .about-cine-pill-tag {
  align-self: flex-start;
}

.about-origin-title {
  font-size: 2.6rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin-bottom: 20px;
}

.about-origin-text {
  font-size: 1rem;
  line-height: 1.7;
  color: #94a3b8;
  margin-bottom: 30px;
}

.about-origin-focus-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 36px;
}

.origin-focus-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: all 0.3s ease;
}

.origin-focus-card:hover {
  border-color: #f3b72c;
  background: rgba(243, 183, 44, 0.04);
}

.origin-focus-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f3b72c;
  color: #070b14;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 900;
}

.origin-focus-body h4 {
  font-size: 1.1rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 4px;
}

.origin-focus-body p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #94a3b8;
  margin: 0;
}

.about-origin-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── 3. PANORAMIC COLLABORATION BANNER ── */
.about-panoramic-section {
  padding: 30px 0 90px;
  position: relative;
  z-index: 2;
}

.about-panoramic-frame {
  position: relative;
  width: 100%;
  height: 440px;
  border-radius: 32px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 28px 70px -15px rgba(0, 0, 0, 0.7);
}

.about-panoramic-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-panoramic-scrim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(7, 11, 20, 0.1) 0%, rgba(7, 11, 20, 0.7) 100%);
}

.about-panoramic-badge {
  position: absolute;
  bottom: 28px;
  left: 36px;
  background: rgba(7, 11, 20, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 12px 24px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 750;
  color: #f8fafc;
}

/* ── 4. "LED BY MISSION-DRIVEN PEOPLE" LEADERSHIP GRID ── */
.about-team-grid-section {
  padding: 80px 0 100px;
  position: relative;
  z-index: 2;
}

.team-grid-header {
  text-align: center;
  margin-bottom: 56px;
}

.team-grid-header h2 {
  font-size: 2.7rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.035em;
  margin-bottom: 12px;
}

.team-grid-header p {
  font-size: 1.05rem;
  color: #94a3b8;
  max-width: 600px;
  margin: 0 auto;
}

.team-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.team-card-dark {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.team-card-dark:hover {
  transform: translateY(-6px);
  border-color: #f3b72c;
  box-shadow: 0 20px 45px -10px rgba(243, 183, 44, 0.2);
}

.team-card-photo {
  width: 100%;
  height: 280px;
  overflow: hidden;
  position: relative;
}

.team-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.team-card-dark:hover .team-card-photo img {
  transform: scale(1.05);
}

.team-card-info {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.team-card-info h4 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 4px;
}

.team-card-info .role {
  font-size: 0.85rem;
  font-weight: 700;
  color: #f3b72c;
  margin-bottom: 8px;
}

.team-card-info p {
  font-size: 0.84rem;
  line-height: 1.5;
  color: #94a3b8;
  margin: 0;
}

/* ── 5. ENTERPRISE DELIVERY STANDARD (HORIZONTAL MILESTONE ROWS) ── */
.about-milestone-rows-section {
  padding: 90px 0 100px;
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.milestone-section-header {
  margin-bottom: 50px;
}

.milestone-section-header h2 {
  font-size: 2.6rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.035em;
  margin-bottom: 12px;
}

.milestone-section-header p {
  font-size: 1.02rem;
  color: #94a3b8;
  max-width: 720px;
  margin: 0;
}

.milestone-rows-stack {
  display: flex;
  flex-direction: column;
}

.milestone-row-item {
  display: grid;
  grid-template-columns: 80px 280px 1fr;
  gap: 32px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
}

.milestone-row-item:hover {
  border-bottom-color: #f3b72c;
  padding-left: 10px;
}

.milestone-row-num {
  font-size: 1.8rem;
  font-weight: 900;
  color: #f3b72c;
  letter-spacing: -0.03em;
}

.milestone-row-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
}

.milestone-row-desc {
  font-size: 0.94rem;
  line-height: 1.6;
  color: #94a3b8;
  margin: 0;
}

/* ── 6. WHY CHOOSE US & CORE MISSION/VISION BENTO GRID ── */
.about-pillars-grid-section {
  padding: 90px 0 100px;
  position: relative;
  z-index: 2;
}

.pillars-grid-header {
  text-align: center;
  margin-bottom: 56px;
}

.pillars-grid-header h2 {
  font-size: 2.6rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.035em;
  margin-bottom: 12px;
}

.pillars-grid-header p {
  font-size: 1.02rem;
  color: #94a3b8;
  max-width: 680px;
  margin: 0 auto;
}

.pillars-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.pillar-bento-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 220px;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.pillar-bento-card:hover {
  transform: translateY(-4px);
  border-color: #f3b72c;
  background: rgba(243, 183, 44, 0.04);
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.5);
}

.pillar-bento-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(243, 183, 44, 0.12);
  color: #f3b72c;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.pillar-bento-card h3 {
  font-size: 1.22rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
}

.pillar-bento-card p {
  font-size: 0.88rem;
  line-height: 1.58;
  color: #94a3b8;
  margin: 0;
}

/* ── 7. DUAL GLOWING GOLDEN ARC METRIC DISPLAY ── */
.about-golden-arc-section {
  padding: 70px 0 100px;
  position: relative;
  z-index: 2;
  text-align: center;
}

.golden-arcs-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  max-width: 900px;
  margin: 0 auto;
}

.golden-arc-item {
  position: relative;
  width: 320px;
  height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.golden-arc-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.arc-path {
  stroke: #f3b72c;
  stroke-width: 4;
  fill: none;
  filter: drop-shadow(0 0 16px rgba(243, 183, 44, 0.8));
}

.golden-arc-num {
  font-size: 3.8rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 6px;
  text-shadow: 0 0 24px rgba(243, 183, 44, 0.4);
}

.golden-arc-lbl {
  font-size: 0.88rem;
  font-weight: 700;
  color: #cbd5e1;
  max-width: 200px;
  line-height: 1.4;
}

/* ── 8. CLIENT TESTIMONIALS (DARK GLASS CARDS) ── */
.about-dark-testimonials-section {
  padding: 90px 0 100px;
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.dark-testimonials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.dark-testimonial-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  backdrop-filter: blur(10px);
  transition: all 0.35s ease;
}

.dark-testimonial-card:hover {
  border-color: #f3b72c;
  transform: translateY(-4px);
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.6);
}

.dark-testimonial-text {
  font-size: 1.05rem;
  line-height: 1.68;
  color: #cbd5e1;
  font-style: italic;
  margin-bottom: 26px;
}

.dark-testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dark-author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f3b72c;
  color: #070b14;
  font-weight: 900;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark-author-info h4 {
  font-size: 1rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 2px;
}

.dark-author-info p {
  font-size: 0.8rem;
  color: #94a3b8;
  margin: 0;
}

/* ── 9. CURVED GOLDEN ARC CALL-TO-ACTION ── */
.about-golden-cta-section {
  position: relative;
  padding: 110px 0 130px;
  text-align: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 100%, rgba(243, 183, 44, 0.18) 0%, rgba(7, 11, 20, 0.9) 60%, #070b14 100%);
}

.golden-cta-arc-bg {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 350px;
  pointer-events: none;
}

.golden-cta-box {
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin: 0 auto;
}

.golden-cta-title {
  font-size: 2.5rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.035em;
  line-height: 1.2;
  margin-bottom: 30px;
}

.golden-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #f3b72c;
  color: #070b14;
  font-size: 1rem;
  font-weight: 850;
  padding: 16px 38px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 10px 30px rgba(243, 183, 44, 0.35);
}

.golden-cta-btn:hover {
  background: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(255, 255, 255, 0.4);
}

/* ── RESPONSIVE BREAKPOINTS ── */
@media (max-width: 1024px) {
  .about-cine-hero-title {
    font-size: 2.8rem;
  }
  .about-origin-grid {
    grid-template-columns: 1fr;
  }
  .about-origin-img-frame {
    height: 380px;
  }
  .team-cards-grid,
  .pillars-bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .milestone-row-item {
    grid-template-columns: 60px 200px 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .about-cine-hero {
    padding: 70px 0 40px;
  }
  .about-cine-hero-title {
    font-size: 2.2rem;
  }
  .about-cine-metrics-bar {
    gap: 20px;
  }
  .team-cards-grid,
  .pillars-bento-grid,
  .dark-testimonials-grid {
    grid-template-columns: 1fr;
  }
  .golden-arcs-container {
    flex-direction: column;
    gap: 30px;
  }
  .milestone-row-item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 0;
  }
  .golden-cta-title {
    font-size: 1.9rem;
  }
}

/* ── 3. Who We Are / Strategic Alliances Bento Grid ── */
.partner-bento-section {
  padding: 96px 0;
  background: #f8fafc;
  border-bottom: 1px solid var(--g200);
}

.bento-header-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 40px;
  align-items: baseline;
  margin-bottom: 48px;
}

.bento-main-title {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 900;
  color: #0b1d36;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.bento-main-desc {
  font-size: 1.08rem;
  line-height: 1.7;
  color: #334155;
}

.bento-2x2-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.bento-card {
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-card:nth-child(1) {
  grid-column: span 7;
}

.bento-card:nth-child(2) {
  grid-column: span 5;
}

.bento-card:nth-child(3) {
  grid-column: span 5;
}

.bento-card:nth-child(4) {
  grid-column: span 7;
}

.bento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px -10px rgba(11, 29, 54, 0.12);
}

/* Bento Image Card */
.bento-card.image-card {
  position: relative;
  min-height: 290px;
  border: 1.5px solid var(--g200);
}

.bento-card.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bento-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 29, 54, 0) 30%, rgba(11, 29, 54, 0.75) 100%);
  display: flex;
  align-items: flex-end;
  padding: 24px;
}

.bento-floating-pill {
  font-size: 0.84rem;
  font-weight: 750;
  color: #ffffff;
  background: rgba(11, 29, 54, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 8px 18px;
  border-radius: var(--r-full);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Bento Gradient Cards (Vibrant Accent) */
.bento-card.gradient-blue {
  background: linear-gradient(145deg, #1a6cb3 0%, #0d4b82 100%);
  color: #ffffff;
  padding: 38px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 16px 40px -8px rgba(26, 108, 179, 0.28);
}

.bento-card.gradient-navy {
  background: linear-gradient(145deg, #0b1d36 0%, #163660 100%);
  color: #ffffff;
  padding: 38px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 40px -8px rgba(11, 29, 54, 0.28);
}

.bento-tag {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fbbf24;
  margin-bottom: 12px;
  display: block;
}

.bento-card h3 {
  font-size: 1.6rem;
  font-weight: 850;
  line-height: 1.2;
  margin-bottom: 14px;
  color: #ffffff;
}

.bento-card p {
  font-size: 0.98rem;
  line-height: 1.68;
  color: #f1f5f9;
}

/* ── 4. Creative Synapse Stepper Row (Laser Rail & Glass Cards) ── */
.partner-why-stepper {
  padding: 104px 0 116px;
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%, rgba(26, 108, 179, 0.05) 0%, transparent 70%),
    #f8fafc;
  border-bottom: 1px solid var(--g200);
  position: relative;
  overflow: hidden;
}

/* Split Header */
.why-stepper-header-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: flex-end;
  margin-bottom: 40px;
}

.why-stepper-header-split.reversed {
  grid-template-columns: 7fr 5fr;
  gap: 24px;
}

.why-header-left {
  display: flex;
  flex-direction: column;
}

.why-pulse-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  background: rgba(26, 108, 179, 0.08);
  border: 1px solid rgba(26, 108, 179, 0.22);
  padding: 6px 16px;
  border-radius: var(--r-full);
  margin-bottom: 16px;
  width: fit-content;
}

.synapse-beacon {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0284c7;
  box-shadow: 0 0 10px #0284c7;
  animation: beaconPulse 1.8s infinite ease-in-out;
}

@keyframes beaconPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.4);
    opacity: 0.6;
  }
}

.why-stepper-title {
  font-size: clamp(2.4rem, 4.4vw, 3.6rem);
  font-weight: 900;
  line-height: 1.08;
  color: #0b1d36;
  letter-spacing: -0.035em;
}

.why-stepper-title .gradient-text {
  background: linear-gradient(135deg, #f3b72c 0%, #e68a00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #f3b72c;
}

.why-header-desc {
  font-size: 1.08rem;
  line-height: 1.7;
  color: #475569;
}

/* ── Interactive Synapse Circuit Rail with Traveling Laser Runner ── */
.synapse-circuit-rail {
  position: relative;
  margin-bottom: 32px;
  padding: 0 16px;
}

.synapse-track-line {
  position: absolute;
  top: 50%;
  left: 36px;
  right: 36px;
  height: 2px;
  background: #e2e8f0;
  transform: translateY(-50%);
  z-index: 1;
}

.synapse-laser-runner {
  position: absolute;
  top: -1.5px;
  left: 0%;
  width: 140px;
  height: 5px;
  background: linear-gradient(90deg, transparent, #0284c7 40%, #38bdf8 80%, #ffffff 100%);
  border-radius: 4px;
  box-shadow: 0 0 14px #38bdf8, 0 0 24px rgba(2, 132, 199, 0.6);
  transition: left 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
  pointer-events: none;
}

.synapse-nodes-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}

.synapse-node-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #cbd5e1;
  margin: 0 auto;
  position: relative;
  cursor: pointer;
  transition: all 0.35s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.synapse-node-dot .dot-core {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd5e1;
  transition: all 0.35s ease;
}

.synapse-node-dot .dot-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  transition: all 0.35s ease;
}

.synapse-node-dot.active {
  border-color: #0284c7;
  box-shadow: 0 0 12px rgba(2, 132, 199, 0.4);
  transform: scale(1.2);
}

.synapse-node-dot.active .dot-core {
  background: #0284c7;
}

.synapse-node-dot.active .dot-ring {
  border-color: rgba(2, 132, 199, 0.35);
  animation: nodeRingPulse 1.6s infinite ease-out;
}

@keyframes nodeRingPulse {
  0% {
    transform: scale(0.9);
    opacity: 1;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* ── 5 Glass Synapse Cards Grid (Fitted Squarish Layout) ── */
.why-steps-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  align-items: stretch;
}

.why-step-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px 20px 20px;
  min-height: 235px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow, border-color;
}

/* Top Laser Accent Beam on Active Card */
.card-beam-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #0284c7, #38bdf8, transparent);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.step-card-top {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.step-num {
  font-size: 2.3rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #94a3b8;
  transition: all 0.35s cubic-bezier(0.34, 1.4, 0.64, 1);
  display: inline-block;
  will-change: transform, color;
}

.step-heading {
  font-size: 0.96rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.32;
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.step-desc {
  font-size: 0.82rem;
  line-height: 1.52;
  color: #64748b;
  transition: color 0.3s ease;
}

/* ── ACTIVE / GLOWING STATE ── */
.why-step-col.active {
  border-color: #1a6cb3;
  transform: translateY(-6px);
  box-shadow: 0 18px 42px -10px rgba(26, 108, 179, 0.2);
}

.why-step-col.active .card-beam-glow {
  opacity: 1;
}

.why-step-col.active .step-num {
  color: #1a6cb3;
  transform: scale(1.06);
  text-shadow: 0 4px 16px rgba(26, 108, 179, 0.38);
}

.why-step-col.active .step-heading {
  color: #0b1d36;
}

.why-step-col.active .step-desc {
  color: #334155;
}

/* Hover Interaction */
.why-step-col:hover {
  transform: translateY(-3px);
  border-color: #93c5fd;
}

.why-step-col:hover .step-num {
  color: #0284c7;
}

/* ── Responsive adjustments ── */
@media (max-width: 1100px) {
  .why-steps-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .synapse-nodes-bar {
    grid-template-columns: repeat(3, 1fr);
  }

  .why-stepper-header-split,
  .why-stepper-header-split.reversed {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .partner-why-stepper {
    padding: 60px 0 70px;
  }

  .synapse-circuit-rail {
    display: none;
  }

  .why-steps-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .why-step-col {
    min-height: auto;
  }

  .hero-polaris-title {
    font-size: 2.3rem;
  }

  .hero-polaris-ctas {
    flex-direction: column;
    width: 100%;
  }

  .hero-polaris-ctas .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   ABOUT US PAGE — SHOWCASE COMPONENT (IMAGE 1 & 2 SPEC)
   ========================================================================== */

.about-hero-showcase {
  position: relative;
  padding: 60px 0 80px;
  background: #ffffff;
  overflow: hidden;
}

.about-showcase-grid {
  display: grid;
  grid-template-columns: 460px 1fr 310px;
  gap: 36px;
  align-items: center;
}

/* ── LEFT: DUAL PHOTO COMPOSITE & FLOATING STAT CARD ── */
.about-showcase-visuals {
  position: relative;
  width: 100%;
  min-height: 520px;
}

.about-img-main-wrap {
  width: 340px;
  height: 380px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 45px -12px rgba(15, 23, 42, 0.16);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.about-img-main {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-img-main-wrap:hover .about-img-main {
  transform: scale(1.04);
}

.about-img-sub-wrap {
  width: 175px;
  height: 145px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.18);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  border: 4px solid #ffffff;
}

.about-img-sub {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-img-sub-wrap:hover .about-img-sub {
  transform: scale(1.05);
}

/* ── FLOATING STAT CARD ── */
.about-stat-card {
  position: absolute;
  bottom: 12px;
  right: 0;
  width: 215px;
  background: #ffffff;
  border-radius: 22px;
  padding: 20px 18px 18px;
  box-shadow: 0 22px 50px -10px rgba(15, 23, 42, 0.18), 0 4px 16px rgba(15, 23, 42, 0.06);
  z-index: 4;
  border: 1px solid rgba(226, 232, 240, 0.8);
  animation: floatStatCard 6s ease-in-out infinite;
}

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

.about-stat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.stat-card-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.stat-pill {
  font-size: 0.72rem;
  font-weight: 700;
  color: #1a6cb3;
  background: #eff6ff;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

/* Donut Chart SVG */
.about-donut-chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6px 0 16px;
}

.donut-chart-svg-wrap {
  position: relative;
  width: 110px;
  height: 110px;
}

.donut-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.donut-ring-bg {
  stroke: #10609e;
  transition: stroke-dashoffset 1s ease;
}

.donut-ring-progress {
  stroke: #f3b72c;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.donut-center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.donut-percent {
  font-size: 1.55rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.03em;
  line-height: 1;
}

.about-donut-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid #f1f5f9;
  padding-top: 12px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
}

.legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.swatch-amber {
  background: #f3b72c;
}

.swatch-blue {
  background: #10609e;
}

/* ── MIDDLE: NARRATIVE & FOCUS SECTION ── */
.about-showcase-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #d97706;
  margin-bottom: 14px;
}

.about-badge-tag svg {
  color: #f3b72c;
}

.about-showcase-title {
  font-size: 2.65rem;
  font-weight: 900;
  color: #000000;
  letter-spacing: -0.035em;
  line-height: 1.14;
  margin-bottom: 18px;
}

.about-showcase-lead {
  font-size: 0.95rem;
  line-height: 1.68;
  color: #334155;
  margin-bottom: 28px;
  font-weight: 450;
}

.about-focus-rows {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 34px;
}

.about-focus-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.focus-icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f3b72c;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #0f172a;
  box-shadow: 0 4px 14px rgba(243, 183, 44, 0.35);
}

.focus-text {
  flex: 1;
}

.focus-heading {
  font-size: 1.18rem;
  font-weight: 800;
  color: #000000;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.focus-desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #475569;
  margin: 0;
}

/* Action Buttons Row */
.about-action-btns {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.about-btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #f3b72c;
  color: #0b1727;
  font-size: 0.92rem;
  font-weight: 800;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 18px rgba(243, 183, 44, 0.28);
}

.about-btn-gold:hover {
  background: #e5a81e;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(243, 183, 44, 0.4);
}

.about-btn-phone {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #0f548a;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 6px 24px 6px 8px;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid #0c436e;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 18px rgba(15, 84, 138, 0.22);
}

.about-btn-phone:hover {
  background: #1464a3;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 84, 138, 0.32);
}

.phone-icon-bubble {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  color: #0f548a;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.phone-num {
  letter-spacing: -0.01em;
  font-weight: 750;
}

/* ── RIGHT: BLUE PILLAR CARD ── */
.about-pillar-card {
  background: #0f548a;
  border-radius: 24px;
  padding: 44px 28px 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  box-shadow: 0 24px 55px -12px rgba(15, 84, 138, 0.38);
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.about-pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 65px -10px rgba(15, 84, 138, 0.45);
}

.pillar-badge-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #f3b72c;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
  box-shadow: 0 8px 22px rgba(243, 183, 44, 0.4);
}

.pillar-card-title {
  font-size: 1.85rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 18px;
}

.pillar-card-desc {
  font-size: 0.95rem;
  line-height: 1.64;
  color: rgba(255, 255, 255, 0.88);
  max-width: 250px;
  margin: 0 auto;
}

/* ==========================================================================
   JOURNEY & MILESTONES SECTION (IMAGE 2 SPEC)
   ========================================================================== */
.about-milestones-section {
  padding: 80px 0 90px;
  background: #f8fafc;
  position: relative;
}

.milestones-card-hero {
  background: #0b1727;
  border-radius: 28px;
  padding: 48px 40px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 60px -15px rgba(11, 23, 39, 0.4);
  margin-top: 36px;
}

.milestones-ambient-glow {
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(243, 183, 44, 0.15), transparent 70%);
  pointer-events: none;
}

.milestones-timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}

.milestone-node {
  position: relative;
  padding-top: 24px;
  border-top: 2px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}

.milestone-node:hover {
  border-top-color: #f3b72c;
  transform: translateY(-4px);
}

.milestone-dot {
  position: absolute;
  top: -6px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f3b72c;
  box-shadow: 0 0 12px #f3b72c;
}

.milestone-year {
  font-size: 1.8rem;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.milestone-title {
  font-size: 1.05rem;
  font-weight: 750;
  color: #f3b72c;
  margin-bottom: 6px;
}

.milestone-desc {
  font-size: 0.85rem;
  line-height: 1.55;
  color: #94a3b8;
}

/* ==========================================================================
   LEADERSHIP & VISIONARY TEAM SECTION (IMAGE 2 SPEC)
   ========================================================================== */
.about-leadership-section {
  padding: 85px 0 95px;
  background: #ffffff;
}

.leadership-highlight-card {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 40px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 28px;
  padding: 36px;
  align-items: center;
  margin-bottom: 48px;
}

.leadership-img-frame {
  width: 100%;
  height: 380px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 40px -10px rgba(15, 23, 42, 0.15);
}

/* ══════════════════════════════════════════════════════════════
   FILAMENT BRAND THEME — ABOUT PAGE (LAYOUT INSPIRED)
   Clean, modern enterprise tech aesthetic in Filament's brand colors
   ══════════════════════════════════════════════════════════════ */

.about-brand-page {
  background-color: #ffffff;
  color: var(--g800, #1e293b);
  position: relative;
}

/* ── 1. HERO SECTION ── */
.about-hero-theme {
  padding: 60px 0 40px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  position: relative;
}

.about-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--blue-10, #e0f2fe);
  border: 1px solid rgba(16, 96, 158, 0.2);
  color: var(--blue, #10609e);
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.about-hero-pill .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow, #f3b72c);
  box-shadow: 0 0 8px var(--yellow, #f3b72c);
}

.about-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}

.about-hero-title {
  font-size: clamp(2.3rem, 4vw, 3.4rem);
  font-weight: 900;
  line-height: 1.15;
  color: var(--g900, #0f172a);
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}

.about-hero-title .gradient-text {
  background: linear-gradient(135deg, #10609e 0%, #f3b72c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-hero-desc {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--g600, #475569);
  margin-bottom: 32px;
}

.about-hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.about-hero-visual {
  position: relative;
}

.about-hero-img-card {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
  border: 4px solid #ffffff;
}

.about-hero-img-card img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
}

.about-hero-float-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.about-hero-badge-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--blue, #10609e);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Ticker Strip */
.about-ticker-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  margin-top: 48px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.04);
  flex-wrap: wrap;
  gap: 20px;
}

.about-ticker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--g700, #334155);
}

.about-ticker-item .ticker-num {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--blue, #10609e);
}

.about-ticker-sep {
  color: #cbd5e1;
}

/* ── 2. ORIGIN NARRATIVE SECTION ── */
.about-origin-section {
  padding: 80px 0;
  background: #ffffff;
}

.about-origin-grid {
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 60px;
  align-items: center;
}

.about-origin-photo-wrap {
  position: relative;
}

.about-origin-photo-card {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
  border: 1px solid #e2e8f0;
}

.about-origin-photo-card img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
}

/* Floating Donut Chart Badge */
.about-origin-donut-card {
  position: absolute;
  bottom: -24px;
  right: -24px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 16px 20px;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.12);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 2;
}

.donut-mini-svg {
  width: 54px;
  height: 54px;
}

.about-origin-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(243, 183, 44, 0.12);
  border: 1px solid rgba(243, 183, 44, 0.3);
  color: var(--yellow-dark, #b45309);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.about-origin-title {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 900;
  line-height: 1.2;
  color: var(--g900, #0f172a);
  margin-bottom: 18px;
}

.about-origin-lead {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--g600, #475569);
  margin-bottom: 28px;
}

.about-focus-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
}

.about-focus-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px 22px;
  transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.about-focus-card:hover {
  background: #ffffff;
  border-color: var(--blue, #10609e);
  box-shadow: 0 8px 24px rgba(16, 96, 158, 0.08);
  transform: translateX(4px);
}

.about-focus-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.about-focus-icon-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue-10, #e0f2fe);
  color: var(--blue, #10609e);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-focus-icon-circle.gold {
  background: rgba(243, 183, 44, 0.15);
  color: var(--yellow-dark, #b45309);
}

.about-focus-header h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--g900, #0f172a);
  margin: 0;
}

.about-focus-card p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--g600, #475569);
  margin: 0;
}

/* ── 3. PANORAMIC TEAM WORKSPACE BANNER ── */
.about-panoramic-section {
  padding: 40px 0 80px;
  background: #ffffff;
}

.about-panoramic-card {
  position: relative;
  width: 100%;
  height: 460px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.1);
  border: 1px solid #e2e8f0;
}

.about-panoramic-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-panoramic-caption-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.3) 70%, transparent 100%);
  padding: 36px 36px 28px;
  color: #ffffff;
  display: flex;
  align-items: flex-end;
}

.about-panoramic-caption-bar h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

.about-panoramic-caption-bar h3 span {
  color: var(--yellow, #f3b72c);
}

/* ── 4. LEADERSHIP SECTION (3-COLUMN) ── */
.about-leadership-section {
  padding: 80px 0;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.about-center-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 52px;
}

.about-center-header h2 {
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 900;
  color: var(--g900, #0f172a);
  margin-bottom: 12px;
}

.about-center-header p {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--g600, #475569);
}

.about-leadership-grid {
  display: flex;
  justify-content: center;
  max-width: 440px;
  margin: 0 auto;
}

.about-leader-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.04);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.about-leader-card:hover {
  transform: translateY(-8px);
  border-color: var(--blue, #10609e);
  box-shadow: 0 20px 40px -10px rgba(16, 96, 158, 0.15);
}

.about-leader-img-wrap {
  width: 100%;
  height: 300px;
  overflow: hidden;
  background: #e2e8f0;
}

.about-leader-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.about-leader-card:hover .about-leader-img-wrap img {
  transform: scale(1.04);
}

.about-leader-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.about-leader-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.about-leader-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--g900, #0f172a);
}

.about-leader-role {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--blue, #10609e);
  margin-bottom: 12px;
}

.about-leader-desc {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--g600, #475569);
  margin: 0;
}

/* ── 5. ENTERPRISE DELIVERY STANDARD (NUMBERED ROWS) ── */
.about-milestones-section {
  padding: 80px 0;
  background: #ffffff;
}

.about-milestone-rows-wrap {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}

.about-milestone-row {
  display: grid;
  grid-template-columns: 80px 320px 1fr;
  gap: 36px;
  align-items: center;
  padding: 24px 20px;
  border-bottom: 1px solid #e2e8f0;
  transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.about-milestone-row:hover {
  background: #f8fafc;
  border-color: var(--blue, #10609e);
  transform: translateX(6px);
}

.about-milestone-num {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--blue, #10609e);
  font-family: monospace;
}

.about-milestone-identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.about-milestone-title {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--g900, #0f172a);
  margin: 0;
}

.about-milestone-tag {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--yellow-dark, #b45309);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.about-milestone-detail {
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--g600, #475569);
  margin: 0;
}

/* ── 6. 6-PILLAR BENTO GRID ── */
.about-pillars-section {
  padding: 90px 0;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.about-bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}

.bento-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 32px 28px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.04);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.bento-card:hover {
  transform: translateY(-5px);
  border-color: var(--blue, #10609e);
  box-shadow: 0 20px 45px -10px rgba(16, 96, 158, 0.12);
}

.bento-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.bento-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bento-icon-box.dark {
  background: linear-gradient(135deg, #10609e, #0b2246);
  color: #ffffff;
}

.bento-icon-box.blue {
  background: var(--blue-10, #e0f2fe);
  color: var(--blue, #10609e);
}

.bento-icon-box.cyan {
  background: #ecfeff;
  color: #0891b2;
}

.bento-icon-box.gold {
  background: rgba(243, 183, 44, 0.15);
  color: var(--yellow-dark, #b45309);
}

.bento-icon-box.purple {
  background: #f5f3ff;
  color: #7c3aed;
}

.bento-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.bento-badge-pill.gold {
  background: rgba(243, 183, 44, 0.15);
  border: 1px solid rgba(243, 183, 44, 0.35);
  color: var(--yellow-dark, #b45309);
}

.bento-stat-tag {
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #475569;
}

.bento-live-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  font-size: 0.78rem;
  font-weight: 700;
}

.live-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Featured Hero Bento Card (Spans 2 columns) */
.bento-hero-card {
  grid-column: span 2;
  background: linear-gradient(135deg, #09172a 0%, #0f2746 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.bento-hero-card h3 {
  font-size: clamp(1.3rem, 2vw, 1.55rem);
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 12px;
  line-height: 1.3;
}

.bento-hero-card p {
  font-size: 0.98rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 24px;
}

.bento-hero-card:hover {
  border-color: var(--yellow, #f3b72c);
  box-shadow: 0 24px 50px rgba(9, 23, 42, 0.3);
}

.bento-feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.bento-pill-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 600;
}

.bento-pill-item svg {
  color: var(--yellow, #f3b72c);
}

/* Normal Bento Cards */
.bento-card-content h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--g900, #0f172a);
  margin-bottom: 10px;
  line-height: 1.35;
}

.bento-card-content p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--g600, #475569);
  margin-bottom: 18px;
}

/* OEM Chips */
.bento-oem-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.oem-chip {
  padding: 5px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--blue, #10609e);
}

/* Metric Row */
.bento-metric-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 6px;
}

.bento-metric-block {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 14px;
}

.bento-m-val {
  font-size: 1.3rem;
  font-weight: 900;
  color: #0891b2;
  line-height: 1;
  margin-bottom: 4px;
}

.bento-m-lbl {
  font-size: 0.74rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Bento List Items */
.bento-list-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.bento-list-items li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--g700, #334155);
}

.bento-list-items li svg {
  color: var(--blue, #10609e);
  flex-shrink: 0;
}

/* ── 7. DUAL GLOWING ARCS METRICS (FILAMENT BRAND THEME) ── */
.about-arcs-section {
  padding: 90px 0 100px;
  background: #ffffff;
  text-align: center;
  position: relative;
}

.about-arcs-container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 50px;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  min-height: 340px;
}

.about-arc-item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 320px;
  background: #f8fafc;
  border-radius: 28px;
  border: 1px solid #e2e8f0;
  padding-bottom: 28px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.about-arc-svg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 320px;
  pointer-events: none;
}

.about-arc-content {
  position: relative;
  z-index: 2;
}

.about-arc-stat {
  font-size: clamp(3rem, 5vw, 4.2rem);
  font-weight: 900;
  line-height: 1;
  color: var(--g900, #0f172a);
  letter-spacing: -0.04em;
  margin-bottom: 8px;
}

.about-arc-stat .accent-blue {
  color: var(--blue, #10609e);
}

.about-arc-stat .accent-gold {
  color: var(--yellow-dark, #d97706);
}

.about-arc-label {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--g900, #0f172a);
  margin-bottom: 4px;
}

.about-arc-sub {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--g500, #64748b);
}

/* ── 8. RESULTS SPLIT SECTION ── */
.about-results-section {
  padding: 80px 0;
  background: #ffffff;
}

.about-results-card {
  background: linear-gradient(135deg, #0a192f 0%, #102a45 100%);
  border-radius: 28px;
  padding: 50px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  color: #ffffff;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15);
}

.about-results-content h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 16px;
}

.about-results-content p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 28px;
}

.about-results-img-frame {
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.15);
}

.about-results-img-frame img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}

/* ── 9. TESTIMONIALS (CLEAN WHITE CARDS) ── */
.about-testimonials-section {
  padding: 80px 0;
  background: #f8fafc;
}

.about-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 44px;
}

.about-testimonial-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 36px 32px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
}

.about-testimonial-item:hover {
  transform: translateY(-4px);
  border-color: var(--blue, #10609e);
  box-shadow: 0 16px 40px rgba(16, 96, 158, 0.08);
}

.about-testi-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--blue-10, #e0f2fe);
  color: var(--blue, #10609e);
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 18px;
}

.about-testi-quote {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--g700, #334155);
  margin-bottom: 24px;
  font-weight: 500;
}

.about-testi-author-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.about-testi-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blue, #10609e);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-testi-author-info h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--g900, #0f172a);
  margin: 0;
}

.about-testi-author-info p {
  font-size: 0.8rem;
  color: var(--g500, #64748b);
  margin: 0;
}

/* ── RESPONSIVE RULES (ABOUT PAGE) ── */
@media (max-width: 1024px) {
  .about-hero-grid {
    grid-template-columns: 1fr;
  }
  .about-origin-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .about-bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .bento-hero-card {
    grid-column: span 2;
  }
  .about-milestone-row {
    grid-template-columns: 60px 240px 1fr;
  }
}

@media (max-width: 768px) {
  .about-bento-grid {
    grid-template-columns: 1fr;
  }
  .bento-hero-card {
    grid-column: span 1;
  }
  .about-testimonials-grid {
    grid-template-columns: 1fr;
  }
  .about-milestone-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .about-panoramic-card {
    height: 280px;
  }
}

/* ══════════════════════════════════════════════════════════════
   SOLUTIONS PAGE — HIGH-IMPACT ENTERPRISE SECTORS
   Inspired by modern consulting & dynamic bento design
   ══════════════════════════════════════════════════════════════ */

.solutions-page-wrap {
  background: #ffffff;
  color: var(--g800, #1e293b);
  position: relative;
}

/* ── 1. SOLUTIONS IMMERSIVE HERO THEME (CENTERED REFERENCE COMPOSITION) ── */
.sol-hero-immersive {
  position: relative;
  background: radial-gradient(circle at 50% 20%, #102a4a 0%, #08111e 60%, #050b14 100%);
  color: #ffffff;
  padding: 70px 0 0;
  overflow: hidden;
  max-width: 100%;
}

.sol-hero-backdrop-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(circle, rgba(16, 96, 158, 0.25) 0%, rgba(243, 183, 44, 0.12) 40%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.sol-hero-immersive-inner {
  position: relative;
  z-index: 2;
  text-align: center;
}

.sol-immersive-header {
  max-width: 1000px;
  margin: 0 auto 36px;
}

.sol-immersive-title {
  font-size: clamp(2.2rem, 4.2vw, 3.8rem);
  font-weight: 900;
  line-height: 1.28;
  color: #ffffff;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.sol-inline-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffffff;
  vertical-align: middle;
  transform: translateY(-4px);
}

.sol-inline-pill.gold {
  background: rgba(243, 183, 44, 0.2);
  border-color: rgba(243, 183, 44, 0.5);
  color: var(--yellow, #f3b72c);
}

.pill-icon-svg {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue, #10609e);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sol-inline-pill.gold .pill-icon-svg {
  background: var(--yellow, #f3b72c);
  color: #0f172a;
}

/* Center Stage Composition */
.sol-immersive-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 520px;
  max-width: 1160px;
  margin: 0 auto;
}

.sol-stage-center-portrait {
  position: relative;
  z-index: 2;
  width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sol-portrait-glow-ring {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(243, 183, 44, 0.2) 0%, rgba(16, 96, 158, 0.3) 50%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.sol-portrait-img-box {
  position: relative;
  width: 100%;
  height: 480px;
  overflow: hidden;
  border-radius: 36px 36px 0 0;
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.sol-portrait-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Floating Tilted Card (Left) */
.sol-stage-tilted-card {
  position: absolute;
  left: 10px;
  top: 40px;
  transform: rotate(-6deg);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid #ffffff;
  border-radius: 20px;
  padding: 14px;
  width: 220px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  z-index: 3;
  text-align: left;
  transition: all 0.35s ease;
  animation: float-tilt 5s ease-in-out infinite;
}

@keyframes float-tilt {
  0%, 100% { transform: rotate(-6deg) translateY(0); }
  50% { transform: rotate(-4.5deg) translateY(-8px); }
}

.sol-stage-tilted-card:hover {
  animation-play-state: paused;
  transform: rotate(-2deg) scale(1.05);
  box-shadow: 0 24px 50px rgba(16, 96, 158, 0.4);
}

.tilted-card-img {
  width: 100%;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 10px;
}

.tilted-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tilted-card-body h4 {
  font-size: 0.88rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  margin-bottom: 6px;
}

.tilted-card-link {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--blue, #10609e);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Floating Avatar Stack (Left Bottom) */
.sol-stage-avatar-stack {
  position: absolute;
  left: 20px;
  bottom: 60px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 3;
  text-align: left;
  animation: float-stack 6s ease-in-out infinite alternate;
}

@keyframes float-stack {
  0% { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}

.sol-avatar-group {
  display: flex;
  align-items: center;
}

.sol-avatar-group img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  object-fit: cover;
  margin-left: -10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.sol-avatar-group img:first-child {
  margin-left: 0;
}

.sol-avatar-label strong {
  display: block;
  font-size: 0.85rem;
  color: #ffffff;
  font-weight: 800;
}

.sol-avatar-label span {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
}

/* Floating Right Stats */
.sol-stage-right-stats {
  position: absolute;
  right: 20px;
  top: 80px;
  display: flex;
  gap: 36px;
  z-index: 3;
  text-align: left;
  animation: float-stats 7s ease-in-out infinite alternate;
}

@keyframes float-stats {
  0% { transform: translateY(0); }
  100% { transform: translateY(-7px); }
}

.sol-stat-entry {
  display: flex;
  flex-direction: column;
}

.sol-stat-bignum {
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.03em;
}

.sol-stat-bignum.gold {
  color: var(--yellow, #f3b72c);
}

.sol-stat-sub strong {
  display: block;
  font-size: 0.85rem;
  color: #ffffff;
  font-weight: 800;
}

.sol-stat-sub span {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.3;
}

/* Center Bottom Play Capsule */
.sol-stage-play-capsule {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  padding: 6px 16px 6px 8px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
  border: 1px solid #ffffff;
  z-index: 4;
  white-space: nowrap;
  animation: capsule-pulse 3s ease-in-out infinite;
}

@keyframes capsule-pulse {
  0%, 100% { box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35); }
  50% { box-shadow: 0 20px 45px rgba(243, 183, 44, 0.35); transform: translateX(-50%) translateY(-3px); }
}

.capsule-thumb {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--blue, #10609e);
  flex-shrink: 0;
}

.capsule-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.capsule-text {
  text-align: left;
}

.capsule-text strong {
  display: block;
  font-size: 0.82rem;
  color: #0f172a;
  font-weight: 800;
}

.capsule-text span {
  font-size: 0.7rem;
  color: #0891b2;
  font-weight: 700;
}

.capsule-play-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue, #10609e);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.capsule-play-btn:hover {
  background: var(--yellow, #f3b72c);
  color: #0f172a;
  transform: scale(1.1);
}

/* ── DUAL LAYERED GOLDEN RIBBONS (REFERENCE COMPOSITION) ── */
.sol-dual-ribbons-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
  height: 110px;
  overflow: hidden;
}

.sol-ribbon-angled {
  position: absolute;
  top: 0;
  left: -2%;
  width: 104%;
  transform: rotate(-2deg);
  background: linear-gradient(135deg, #f3b72c 0%, #f59e0b 100%);
  color: #0f172a;
  padding: 14px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 3;
  overflow: hidden;
}

.sol-ribbon-base {
  position: absolute;
  top: 42px;
  left: 0;
  width: 100%;
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  color: #ffffff;
  padding: 14px 0;
  z-index: 2;
  overflow: hidden;
}

.sol-ribbon-track-fast {
  display: flex !important;
  width: max-content !important;
  flex-wrap: nowrap !important;
  animation: ribbon-scroll-left 20s linear infinite !important;
  will-change: transform;
}

.sol-ribbon-track-slow {
  display: flex !important;
  width: max-content !important;
  flex-wrap: nowrap !important;
  animation: ribbon-scroll-right 24s linear infinite !important;
  will-change: transform;
}

.sol-ribbon-track-fast:hover,
.sol-ribbon-track-slow:hover {
  animation-play-state: paused !important;
}

@keyframes ribbon-scroll-left {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes ribbon-scroll-right {
  0% {
    transform: translate3d(-50%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes ribbon-scroll-left {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
  }
}

@-webkit-keyframes ribbon-scroll-right {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
  }
}

.sol-ribbon-items {
  display: flex !important;
  align-items: center;
  gap: 32px;
  padding-right: 32px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  width: max-content !important;
}

.sol-ribbon-angled .r-plus {
  color: #0f172a;
  font-weight: 900;
  font-size: 1.1rem;
}

.sol-ribbon-base .r-star {
  color: var(--yellow, #f3b72c);
  font-size: 0.85rem;
}

/* ── 3. DETAILED SECTOR SHOWCASE CARDS ── */
.sol-showcase-section {
  padding: 80px 0;
  background: #ffffff;
}

.sol-section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
}

.sol-section-header h2 {
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 900;
  color: var(--g900, #0f172a);
  margin-bottom: 14px;
}

.sol-section-header p {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--g600, #475569);
}

.sol-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.sol-sector-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 28px;
  padding: 44px;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.03);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  position: relative;
  overflow: hidden;
}

.sol-sector-card:hover {
  border-color: var(--blue, #10609e);
  box-shadow: 0 20px 45px -10px rgba(16, 96, 158, 0.1);
  background: #ffffff;
}

.sol-sector-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}

.sol-sector-card.reverse .sol-sector-grid {
  grid-template-columns: 0.85fr 1.15fr;
}

.sol-sector-card.reverse .sol-sector-info {
  order: 2;
}

.sol-sector-card.reverse .sol-sector-visual {
  order: 1;
}

.sol-sector-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(243, 183, 44, 0.12);
  border: 1px solid rgba(243, 183, 44, 0.35);
  color: var(--yellow-dark, #b45309);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.sol-sector-badge.blue {
  background: var(--blue-10, #e0f2fe);
  border-color: rgba(16, 96, 158, 0.25);
  color: var(--blue, #10609e);
}

.sol-sector-badge.purple {
  background: #f5f3ff;
  border-color: #ddd6fe;
  color: #7c3aed;
}

.sol-sector-badge.amber {
  background: #fffbeb;
  border-color: #fde68a;
  color: #b45309;
}

.sol-sector-badge.green {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

.badge-num {
  font-family: monospace;
  font-weight: 900;
}

.sol-sector-title {
  font-size: clamp(1.6rem, 2.5vw, 2rem);
  font-weight: 900;
  color: var(--g900, #0f172a);
  margin-bottom: 14px;
  line-height: 1.25;
}

.sol-sector-lead {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--g600, #475569);
  margin-bottom: 22px;
}

.sol-impact-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid var(--yellow, #f3b72c);
  border-radius: 0 16px 16px 0;
  padding: 18px 22px;
  margin-bottom: 24px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.02);
}

.sol-sector-card.reverse .sol-impact-box {
  border-left-color: var(--blue, #10609e);
}

.sol-impact-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--blue, #10609e);
  margin-bottom: 8px;
}

.sol-impact-box p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--g700, #334155);
  margin: 0;
}

.sol-caps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 28px;
}

.sol-cap-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--g800, #1e293b);
}

.sol-cap-item svg {
  color: var(--blue, #10609e);
  flex-shrink: 0;
}

.sol-sector-card.reverse .sol-cap-item svg {
  color: var(--yellow-dark, #b45309);
}

.sol-img-wrapper {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
  border: 2px solid #ffffff;
}

.sol-img-wrapper img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.sol-sector-card:hover .sol-img-wrapper img {
  transform: scale(1.03);
}

.sol-img-overlay-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(10px);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.dot-gold {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow, #f3b72c);
}

/* ── 4. EXCELLENCE ASYMMETRIC MEDIA SHOWCASE (BIZTOP INSPIRED) ── */
.sol-excellence-section {
  padding: 90px 0;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.sol-excellence-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.sol-media-matrix {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
}

.sol-matrix-img-main {
  grid-column: span 2;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
  border: 2px solid #ffffff;
  height: 240px;
}

.sol-matrix-img-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sol-matrix-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sol-matrix-card.stat-green {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  border: none;
}

.matrix-stat-icon {
  font-size: 1.2rem;
  font-weight: 900;
  margin-bottom: 4px;
}

.matrix-stat-val {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 4px;
}

.sol-matrix-card.stat-green .matrix-stat-val {
  color: #ffffff;
}

.matrix-stat-lbl {
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
}

.sol-matrix-card.stat-green .matrix-stat-lbl {
  color: rgba(255, 255, 255, 0.9);
}

.matrix-stars {
  color: var(--yellow-dark, #d97706);
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.matrix-skills-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 10px;
}

.matrix-skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.matrix-skill-tags span {
  font-size: 0.7rem;
  font-weight: 700;
  background: #f1f5f9;
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--blue, #10609e);
}

.sol-excellence-content h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  font-weight: 900;
  color: var(--g900, #0f172a);
  margin-bottom: 16px;
  line-height: 1.2;
}

.sol-excellence-content p {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--g600, #475569);
  margin-bottom: 28px;
}

.sol-director-card {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
  margin-bottom: 32px;
}

.sol-director-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--blue, #10609e);
}

.sol-director-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sol-director-info h4 {
  font-size: 0.96rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.sol-director-info p {
  font-size: 0.78rem;
  color: var(--blue, #10609e);
  font-weight: 700;
  margin: 0;
}

.sol-excellence-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── 5. WHY CHOOSE US (3-CARD LAYOUT) ── */
.sol-why-section {
  padding: 90px 0;
  background: #ffffff;
}

.sol-why-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}

.sol-why-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.03);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.sol-why-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.12);
}

.sol-why-card.featured {
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%);
  border-color: rgba(243, 183, 44, 0.4);
}

.sol-why-card.dark {
  background: linear-gradient(135deg, #09172a 0%, #0f2746 100%);
  border-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.sol-why-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--blue-10, #e0f2fe);
  color: var(--blue, #10609e);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.sol-why-card-icon.gold {
  background: rgba(243, 183, 44, 0.2);
  color: var(--yellow-dark, #b45309);
}

.sol-why-card-icon.navy {
  background: rgba(255, 255, 255, 0.1);
  color: var(--yellow, #f3b72c);
}

.sol-why-card h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--g900, #0f172a);
  margin-bottom: 12px;
}

.sol-why-card.dark h3 {
  color: #ffffff;
}

.sol-why-card p {
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--g600, #475569);
  margin-bottom: 24px;
  flex-grow: 1;
}

.sol-why-card.dark p {
  color: rgba(255, 255, 255, 0.8);
}

.sol-why-card-footer {
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

.sol-why-card.dark .sol-why-card-footer {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.sol-why-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--blue, #10609e);
  transition: gap 0.2s ease;
}

.sol-why-link:hover {
  gap: 12px;
}

.sol-why-link.light {
  color: var(--yellow, #f3b72c);
}

/* ── SOLUTIONS RESPONSIVE RULES ── */
@media (max-width: 1024px) {
  .sol-stage-tilted-card {
    left: 0;
    top: 20px;
    width: 180px;
  }
  .sol-stage-right-stats {
    right: 0;
    top: 20px;
    gap: 20px;
  }
  .sol-sector-grid,
  .sol-sector-card.reverse .sol-sector-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .sol-sector-card.reverse .sol-sector-info {
    order: 1;
  }
  .sol-sector-card.reverse .sol-sector-visual {
    order: 2;
  }
  .sol-excellence-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .sol-why-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .sol-hero-immersive {
    padding-top: 40px;
  }
  .sol-immersive-stage {
    min-height: auto;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-bottom: 20px;
  }
  .sol-stage-center-portrait {
    width: 100%;
    max-width: 320px;
  }
  .sol-portrait-img-box {
    height: 360px;
  }
  .sol-stage-tilted-card,
  .sol-stage-avatar-stack,
  .sol-stage-right-stats {
    position: static;
    transform: none;
    margin: 0 auto;
    text-align: center;
  }
  .sol-stage-tilted-card {
    width: 90%;
    max-width: 280px;
  }
  .sol-stage-avatar-stack {
    justify-content: center;
  }
  .sol-stage-right-stats {
    flex-direction: row;
    justify-content: center;
    gap: 28px;
  }
  .sol-stage-play-capsule {
    position: static;
    transform: none;
    margin-top: 16px;
  }
  .sol-why-cards-grid {
    grid-template-columns: 1fr;
  }
  .sol-caps-grid {
    grid-template-columns: 1fr;
  }
  .sol-sector-card {
    padding: 28px 20px;
  }
  .sol-img-wrapper img {
    height: 260px;
  }
  .sol-media-matrix {
    grid-template-columns: 1fr;
  }
  .sol-matrix-img-main {
    grid-column: span 1;
  }
}

/* ══════════════════════════════════════════════════════════════
   PRODUCTS & TECHNOLOGY SOLUTIONS PAGE (CREATIX & HRNEST INSPIRED)
   ══════════════════════════════════════════════════════════════ */

.prod-page-wrap {
  background: #ffffff;
  color: var(--g800, #1e293b);
  position: relative;
}

/* ── 1. Products Hero Section ── */
.prod-hero-section {
  position: relative;
  background: radial-gradient(circle at 50% 15%, #0f2746 0%, #081527 55%, #050c17 100%);
  color: #ffffff;
  padding: 80px 0 70px;
  overflow: hidden;
}

.prod-hero-glow {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 500px;
  background: radial-gradient(circle, rgba(16, 96, 158, 0.35) 0%, rgba(243, 183, 44, 0.15) 50%, transparent 75%);
  pointer-events: none;
  z-index: 1;
}

.prod-hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
}

.prod-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--yellow, #f3b72c);
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.prod-hero-pill .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow, #f3b72c);
  box-shadow: 0 0 10px var(--yellow, #f3b72c);
}

.prod-hero-title {
  font-size: clamp(2.4rem, 4.8vw, 4.2rem);
  font-weight: 900;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
}

.prod-hero-title .gradient-text {
  background: linear-gradient(135deg, #f3b72c 0%, #f59e0b 50%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.prod-hero-lead {
  font-size: clamp(1.08rem, 1.8vw, 1.25rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  max-width: 820px;
  margin: 0 auto 16px;
}

.prod-hero-sub {
  font-size: 0.98rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.7);
  max-width: 740px;
  margin: 0 auto 36px;
}

.prod-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

/* Stats Counter Strip */
.prod-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 24px 32px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  text-align: left;
}

.prod-stat-item {
  display: flex;
  flex-direction: column;
}

.prod-stat-num {
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 4px;
}

.prod-stat-num.gold {
  color: var(--yellow, #f3b72c);
}

.prod-stat-lbl {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── 2. Our Solutions (6 Core Pillars) ── */
.prod-solutions-section {
  padding: 100px 0 80px;
  background: #ffffff;
}

.prod-section-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 60px;
}

.prod-section-header h2 {
  font-size: clamp(2.1rem, 3.8vw, 2.9rem);
  font-weight: 900;
  color: var(--g900, #0f172a);
  margin-bottom: 14px;
  letter-spacing: -0.025em;
}

.prod-section-header p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--g600, #475569);
}

.prod-solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.prod-sol-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 24px;
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  position: relative;
}

.prod-sol-card:hover {
  transform: translateY(-6px);
  border-color: var(--blue, #10609e);
  box-shadow: 0 24px 50px -10px rgba(16, 96, 158, 0.14);
}

.prod-sol-card.featured {
  background: linear-gradient(145deg, #091a33 0%, #102a4e 100%);
  border-color: rgba(243, 183, 44, 0.3);
  color: #ffffff;
}

.prod-sol-card.featured:hover {
  border-color: var(--yellow, #f3b72c);
  box-shadow: 0 24px 50px -10px rgba(9, 26, 51, 0.35);
}

.prod-sol-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.prod-sol-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--blue-10, #e0f2fe);
  color: var(--blue, #10609e);
  display: flex;
  align-items: center;
  justify-content: center;
}

.prod-sol-card.featured .prod-sol-icon {
  background: rgba(243, 183, 44, 0.15);
  color: var(--yellow, #f3b72c);
}

.prod-sol-badge {
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
}

.prod-sol-card.featured .prod-sol-badge {
  background: rgba(255, 255, 255, 0.1);
  color: var(--yellow, #f3b72c);
  border: 1px solid rgba(243, 183, 44, 0.3);
}

.prod-sol-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--g900, #0f172a);
  line-height: 1.3;
  margin-bottom: 12px;
}

.prod-sol-card.featured .prod-sol-title {
  color: #ffffff;
}

.prod-sol-desc {
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--g600, #475569);
  margin-bottom: 24px;
}

.prod-sol-card.featured .prod-sol-desc {
  color: rgba(255, 255, 255, 0.82);
}

.prod-sol-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
}

.prod-sol-chip {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: var(--g800, #1e293b);
}

.prod-sol-card.featured .prod-sol-chip {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.prod-sol-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--blue, #10609e);
  transition: all 0.2s ease;
  margin-top: auto;
}

.prod-sol-btn:hover {
  color: var(--blue-dark, #0b4573);
  transform: translateX(4px);
}

.prod-sol-card.featured .prod-sol-btn {
  color: var(--yellow, #f3b72c);
}

.prod-sol-card.featured .prod-sol-btn:hover {
  color: #ffffff;
}

/* ── 3. Solutions By Industry (6 Sector Matrix) ── */
.prod-industry-section {
  padding: 90px 0;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.prod-industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.prod-ind-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 32px 26px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
}

.prod-ind-card:hover {
  transform: translateY(-5px);
  border-color: var(--blue, #10609e);
  box-shadow: 0 16px 36px rgba(16, 96, 158, 0.08);
}

.prod-ind-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.prod-ind-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f1f5f9;
  color: var(--blue, #10609e);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.prod-ind-title {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--g900, #0f172a);
  margin: 0;
}

.prod-ind-desc {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--g600, #475569);
  margin: 0;
}

/* ── 4. How We Deliver (4-Step Process Track) ── */
.prod-delivery-section {
  padding: 90px 0;
  background: #ffffff;
}

.prod-delivery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.prod-step-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 32px 24px;
  position: relative;
  transition: all 0.25s ease;
}

.prod-step-card:hover {
  background: #ffffff;
  border-color: var(--yellow, #f3b72c);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
  transform: translateY(-4px);
}

.prod-step-num {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--blue, #10609e);
  font-family: monospace;
  margin-bottom: 16px;
  line-height: 1;
}

.prod-step-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--g900, #0f172a);
  margin-bottom: 10px;
}

.prod-step-desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--g600, #475569);
  margin: 0;
}

/* ── 5. Technology Ecosystem ── */
.prod-ecosystem-section {
  padding: 90px 0;
  background: #09172a;
  color: #ffffff;
}

.prod-ecosystem-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 56px;
}

.prod-ecosystem-header h2 {
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 16px;
}

.prod-ecosystem-header p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 12px;
}

.prod-ecosystem-header .eco-sub {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.6);
}

.prod-logos-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.prod-logo-item {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 86px;
  transition: all 0.25s ease;
}

.prod-logo-item img {
  max-height: 38px;
  max-width: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.85);
  transition: filter 0.25s ease;
}

.prod-logo-item:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: var(--yellow, #f3b72c);
  transform: translateY(-4px);
}

.prod-logo-item:hover img {
  filter: none;
}

/* ── 6. Final CTA Section with Varied Actions ── */
.prod-final-cta {
  padding: 90px 0;
  background: #ffffff;
}

.prod-cta-box {
  background: linear-gradient(135deg, #10609e 0%, #0b3d68 100%);
  border-radius: 32px;
  padding: 60px 48px;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 24px 60px rgba(16, 96, 158, 0.2);
  position: relative;
  overflow: hidden;
}

.prod-cta-box h2 {
  font-size: clamp(2.2rem, 3.8vw, 3rem);
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 14px;
}

.prod-cta-box p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  max-width: 720px;
  margin: 0 auto 36px;
}

.prod-cta-actions-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── 3D Panoramic Curved Arc Showcase (Flowblox Inspired) ── */
.prod-fan-container {
  width: 100%;
  max-width: 1200px;
  margin: 40px auto 30px;
  perspective: 1200px;
  overflow: hidden;
  padding: 20px 0 35px;
}

.prod-fan-track {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  transform-style: preserve-3d;
  transition: transform 0.4s ease;
}

.prod-fan-card {
  flex: 0 0 185px;
  height: 290px;
  border-radius: 24px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  text-decoration: none;
  position: relative;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}

.prod-fan-card.c1 { transform: rotateY(18deg) translateZ(-20px) scale(0.92); }
.prod-fan-card.c2 { transform: rotateY(10deg) translateZ(-8px) scale(0.96); }
.prod-fan-card.c3 { transform: rotateY(0deg) translateZ(15px) scale(1.04); border-color: rgba(243, 183, 44, 0.5); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); }
.prod-fan-card.c4 { transform: rotateY(-10deg) translateZ(-8px) scale(0.96); }
.prod-fan-card.c5 { transform: rotateY(-18deg) translateZ(-20px) scale(0.92); }
.prod-fan-card.c6 { transform: rotateY(-24deg) translateZ(-35px) scale(0.88); }

.prod-fan-card:hover {
  transform: translateY(-12px) scale(1.08) rotateY(0deg) translateZ(30px) !important;
  border-color: var(--yellow, #f3b72c);
  background: linear-gradient(165deg, rgba(243, 183, 44, 0.15) 0%, rgba(16, 96, 158, 0.3) 100%);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(243, 183, 44, 0.2);
  z-index: 20;
}

.prod-fan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.prod-fan-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--yellow, #f3b72c);
  display: flex;
  align-items: center;
  justify-content: center;
}

.prod-fan-badge {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
}

.prod-fan-body {
  margin-top: auto;
}

.prod-fan-title {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
  color: #ffffff;
  margin-bottom: 8px;
}

.prod-fan-sub {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.prod-fan-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--yellow, #f3b72c);
  margin-top: 10px;
}

/* ── Asymmetric Bento Grid (Flowblox & Lattice Inspired) ── */
.prod-bento-section {
  padding: 90px 0 80px;
  background: #ffffff;
}

.prod-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.bento-card {
  border-radius: 28px;
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}

.bento-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.1);
}

/* Card 1: Wide Featured Dark Bento */
.bento-collab {
  grid-column: span 8;
  background: linear-gradient(145deg, #091a33 0%, #0d2547 100%);
  border: 1.5px solid rgba(243, 183, 44, 0.25);
  color: #ffffff;
}

.bento-collab:hover {
  border-color: var(--yellow, #f3b72c);
  box-shadow: 0 24px 55px rgba(9, 26, 51, 0.3);
}

.bento-collab .bento-title {
  color: #ffffff;
  font-size: 1.65rem;
}

.bento-collab .bento-desc {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.02rem;
  max-width: 580px;
}

/* Card 2: Tall Vertical Business Comm */
.bento-comm {
  grid-column: span 4;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
}

.bento-comm:hover {
  border-color: var(--blue, #10609e);
}

/* Card 3: Network */
.bento-net {
  grid-column: span 4;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
}

.bento-net:hover {
  border-color: var(--blue, #10609e);
}

/* Card 4: Cloud */
.bento-cloud {
  grid-column: span 4;
  background: linear-gradient(160deg, #f8fafc 0%, #eef2ff 100%);
  border: 1.5px solid #e2e8f0;
}

.bento-cloud:hover {
  border-color: #6366f1;
}

/* Card 5: Software */
.bento-soft {
  grid-column: span 4;
  background: linear-gradient(160deg, #f8fafc 0%, #ecfdf5 100%);
  border: 1.5px solid #e2e8f0;
}

.bento-soft:hover {
  border-color: #10b981;
}

/* Card 6: Web & Digital (Wide Bottom) */
.bento-web {
  grid-column: span 12;
  background: linear-gradient(135deg, #0b1d36 0%, #10335e 100%);
  border: 1.5px solid rgba(16, 96, 158, 0.4);
  color: #ffffff;
  padding: 40px 38px;
}

.bento-web:hover {
  border-color: var(--yellow, #f3b72c);
  box-shadow: 0 24px 55px rgba(11, 29, 54, 0.25);
}

.bento-web .bento-title {
  color: #ffffff;
  font-size: 1.5rem;
}

.bento-web .bento-desc {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  max-width: 640px;
}

/* Bento Internals */
.bento-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.bento-icon-pill {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--blue-10, #e0f2fe);
  color: var(--blue, #10609e);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bento-collab .bento-icon-pill {
  background: rgba(243, 183, 44, 0.18);
  color: var(--yellow, #f3b72c);
}

.bento-web .bento-icon-pill {
  background: rgba(255, 255, 255, 0.12);
  color: var(--yellow, #f3b72c);
}

.bento-tag-badge {
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 14px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
}

.bento-collab .bento-tag-badge,
.bento-web .bento-tag-badge {
  background: rgba(255, 255, 255, 0.1);
  color: var(--yellow, #f3b72c);
  border: 1px solid rgba(243, 183, 44, 0.3);
}

.bento-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--g900, #0f172a);
  line-height: 1.3;
  margin-bottom: 10px;
}

.bento-desc {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--g600, #475569);
  margin-bottom: 22px;
}

/* Lattice Style Floating Feature Pill Chips */
.bento-pill-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.bento-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: var(--g800, #1e293b);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;
}

.bento-pill:hover {
  border-color: var(--blue, #10609e);
  transform: translateY(-2px);
}

.bento-collab .bento-pill,
.bento-web .bento-pill {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.bento-collab .bento-pill:hover,
.bento-web .bento-pill:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: var(--yellow, #f3b72c);
}

.bento-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue, #10609e);
}

.bento-collab .bento-pill-dot,
.bento-web .bento-pill-dot {
  background: var(--yellow, #f3b72c);
}

.bento-btn-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--blue, #10609e);
  transition: all 0.2s ease;
  margin-top: auto;
}

.bento-btn-link:hover {
  color: var(--blue-dark, #0b4573);
  transform: translateX(4px);
}

.bento-collab .bento-btn-link,
.bento-web .bento-btn-link {
  color: var(--yellow, #f3b72c);
}

.bento-collab .bento-btn-link:hover,
.bento-web .bento-btn-link:hover {
  color: #ffffff;
}

/* ══════════════════════════════════════════════════════════════
   CALENDLY & GLIDE DYNAMIC SYSTEMS-INTEGRATOR UI
   ══════════════════════════════════════════════════════════════ */

.dyn-page {
  background: #ffffff;
  color: #0f172a;
  font-family: var(--font, 'Inter', sans-serif);
}

/* ── 1. Hero with Interactive Showcase Canvas ── */
.dyn-hero {
  padding: 85px 0 65px;
  background: radial-gradient(circle at 50% 0%, #f0f7ff 0%, #ffffff 65%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.dyn-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  color: #0284c7;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.dyn-hero-title {
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  font-weight: 900;
  color: #0b1d36;
  line-height: 1.15;
  letter-spacing: -0.035em;
  max-width: 900px;
  margin: 0 auto 20px;
}

.dyn-hero-title span {
  color: #10609e;
  background: linear-gradient(135deg, #10609e 0%, #0284c7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dyn-hero-lead {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  line-height: 1.75;
  color: #475569;
  max-width: 780px;
  margin: 0 auto 34px;
}

.dyn-hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.dyn-btn-accent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: #f59e0b;
  color: #0b1d36;
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 10px 24px rgba(245, 158, 11, 0.28);
}

.dyn-btn-accent:hover {
  background: #d97706;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(217, 119, 6, 0.35);
}

.dyn-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  color: #0b1d36;
  border-radius: 999px;
  font-size: 0.94rem;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.25s ease;
}

.dyn-btn-outline:hover {
  border-color: #10609e;
  color: #10609e;
  background: #f8fafc;
  transform: translateY(-2px);
}

/* Interactive Interactive Canvas Wrapper (Calendly & Glide Inspired) */
.dyn-canvas-box {
  max-width: 1040px;
  margin: 0 auto;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 28px;
  padding: 36px 32px;
  box-shadow: 0 24px 60px rgba(16, 96, 158, 0.09);
  text-align: left;
}

.dyn-tabs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 18px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 28px;
  scrollbar-width: none;
}

.dyn-tabs-row::-webkit-scrollbar {
  display: none;
}

.dyn-tab-btn {
  padding: 10px 20px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 0.85rem;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dyn-tab-btn.active,
.dyn-tab-btn:hover {
  background: #0b1d36;
  color: #ffffff;
  border-color: #0b1d36;
}

.dyn-preview-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 30px;
  align-items: center;
}

.dyn-preview-left h3 {
  font-size: 1.6rem;
  font-weight: 900;
  color: #0b1d36;
  line-height: 1.25;
  margin-bottom: 12px;
}

.dyn-preview-left p {
  font-size: 0.98rem;
  line-height: 1.7;
  color: #64748b;
  margin-bottom: 20px;
}

.dyn-preview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dyn-chip {
  padding: 6px 14px;
  background: #f1f5f9;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #1e293b;
}

.dyn-preview-card {
  background: linear-gradient(135deg, #0b1d36 0%, #10609e 100%);
  border-radius: 20px;
  padding: 28px;
  color: #ffffff;
  box-shadow: 0 16px 36px rgba(11, 29, 54, 0.15);
}

/* ── 2. What We Solve (Prepnepal & Glide 5-Step Process) ── */
.dyn-solve-section {
  padding: 95px 0;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
}

.dyn-sec-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 56px;
}

.dyn-sec-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 16px;
  background: #e0f2fe;
  color: #0284c7;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}

.dyn-sec-title {
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 900;
  color: #0b1d36;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 16px;
}

.dyn-sec-desc {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #475569;
}

.dyn-process-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.dyn-proc-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  padding: 28px 22px;
  text-align: left;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dyn-proc-card:hover {
  border-color: #10609e;
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(16, 96, 158, 0.08);
}

.dyn-proc-num {
  font-size: 0.78rem;
  font-weight: 900;
  color: #0284c7;
  font-family: monospace;
  margin-bottom: 12px;
}

.dyn-proc-title {
  font-size: 1.12rem;
  font-weight: 800;
  color: #0b1d36;
  margin-bottom: 8px;
  line-height: 1.3;
}

.dyn-proc-desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #64748b;
  margin: 0;
}

/* ── 3. Alternating Zig-Zag Solution Canvases (Calendly & Glide Style) ── */
.dyn-zigzag-section {
  padding: 100px 0;
  background: #ffffff;
}

.dyn-zigzag-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 100px;
}

.dyn-zigzag-row.reverse {
  direction: rtl;
}

.dyn-zigzag-row.reverse > * {
  direction: ltr;
}

.dyn-zz-content h3 {
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  font-weight: 900;
  color: #0b1d36;
  line-height: 1.25;
  letter-spacing: -0.025em;
  margin-bottom: 18px;
}

.dyn-zz-content p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: #475569;
  margin-bottom: 22px;
}

.dyn-zz-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.dyn-zz-chip {
  padding: 7px 15px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1e293b;
  transition: all 0.2s ease;
}

.dyn-zz-chip:hover {
  background: #0b1d36;
  color: #ffffff;
  border-color: #0b1d36;
}

.dyn-zz-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 800;
  color: #10609e;
  text-decoration: none;
  transition: all 0.2s ease;
}

.dyn-zz-link:hover {
  color: #0b1d36;
  transform: translateX(6px);
}

.dyn-zz-card {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 28px;
  padding: 36px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.04);
  transition: all 0.3s ease;
}

.dyn-zz-card:hover {
  border-color: #10609e;
  transform: translateY(-4px);
  box-shadow: 0 24px 55px rgba(16, 96, 158, 0.09);
}

/* ── 4. Solutions by Industry (Glide Grid) ── */
.dyn-industry-section {
  padding: 95px 0;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.dyn-industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.dyn-ind-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  padding: 32px 26px;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dyn-ind-card:hover {
  border-color: #0b1d36;
  transform: translateY(-5px);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
}

.dyn-ind-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f1f5f9;
  color: #10609e;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.dyn-ind-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0b1d36;
  margin-bottom: 10px;
}

.dyn-ind-desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: #64748b;
  margin: 0;
}

/* ── 5. Technology Ecosystem Logo Bar ── */
.dyn-logo-section {
  padding: 70px 0;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  text-align: center;
}

.dyn-logo-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.dyn-logo-item {
  height: 40px;
  display: flex;
  align-items: center;
  filter: grayscale(100%) opacity(0.7);
  transition: all 0.25s ease;
}

.dyn-logo-item:hover {
  filter: none;
  opacity: 1;
  transform: scale(1.06);
}

.dyn-logo-item img {
  max-height: 34px;
  max-width: 120px;
  object-fit: contain;
}

/* ── 6. Why Filament Technologies (Value Matrix) ── */
.dyn-why-section {
  padding: 95px 0;
  background: #f8fafc;
}

.dyn-why-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.dyn-why-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 26px 20px;
  transition: all 0.25s ease;
}

.dyn-why-card:hover {
  border-color: #0b1d36;
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.dyn-why-card h4 {
  font-size: 1.08rem;
  font-weight: 800;
  color: #0b1d36;
  margin-bottom: 8px;
}

.dyn-why-card p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #64748b;
  margin: 0;
}

/* ── 7. Huge Final CTA ── */
.dyn-final-cta {
  padding: 100px 0;
  background: #0b1d36;
  color: #ffffff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.dyn-cta-inner {
  max-width: 820px;
  margin: 0 auto;
}

.dyn-cta-inner h2 {
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}

.dyn-cta-inner p {
  font-size: 1.1rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 36px;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .dyn-preview-grid { grid-template-columns: 1fr; }
  .dyn-process-row { grid-template-columns: repeat(2, 1fr); }
  .dyn-zigzag-row { grid-template-columns: 1fr; gap: 40px; margin-bottom: 60px; }
  .dyn-industry-grid { grid-template-columns: repeat(2, 1fr); }
  .dyn-why-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .dyn-hero { padding: 55px 0 35px; }
  .dyn-canvas-box { padding: 24px 18px; }
  .dyn-process-row, .dyn-industry-grid, .dyn-why-grid { grid-template-columns: 1fr; }
}

.ax-page {
  background: #ffffff;
  color: #1e293b;
  font-family: var(--font, 'Inter', sans-serif);
}

/* ── 1. Analyx Hero Section ── */
.ax-hero {
  padding: 80px 0 60px;
  background: radial-gradient(circle at 50% -10%, #f1f5f9 0%, #ffffff 70%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ax-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #4f46e5;
  margin-bottom: 24px;
}

.ax-hero-title {
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  font-weight: 900;
  color: #0f172a;
  line-height: 1.15;
  letter-spacing: -0.035em;
  margin-bottom: 18px;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.ax-highlight-purple {
  color: #6366f1;
  position: relative;
  display: inline-block;
}

.ax-highlight-purple::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 10%;
  bottom: 10%;
  width: 3px;
  background: #6366f1;
  animation: blinkCursor 1s infinite;
}

@keyframes blinkCursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.ax-hero-lead {
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  line-height: 1.7;
  color: #64748b;
  max-width: 760px;
  margin: 0 auto 32px;
}

.ax-btn-amber {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 34px;
  background: #f59e0b;
  color: #0f172a;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 10px 25px rgba(245, 158, 11, 0.28);
}

.ax-btn-amber:hover {
  background: #d97706;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(217, 119, 6, 0.35);
}

.ax-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  color: #0f172a;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
}

.ax-btn-outline:hover {
  border-color: #6366f1;
  color: #6366f1;
  background: #f8fafc;
  transform: translateY(-2px);
}

/* Analyx Hero Visual Stage with Floating UI Cards */
.ax-visual-stage {
  max-width: 960px;
  margin: 60px auto 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ax-person-img-wrap {
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 100%);
  padding: 12px;
  box-shadow: 0 24px 60px rgba(99, 102, 241, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.ax-person-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Floating Card 1: Top Left Insights */
.ax-float-card-left {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 20px 24px;
  width: 260px;
  text-align: left;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
  z-index: 3;
  animation: floatSlow 5s ease-in-out infinite alternate;
}

/* Floating Card 2: Bottom Left Deployments */
.ax-float-card-bl {
  position: absolute;
  bottom: 20px;
  left: 40px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
  z-index: 3;
  animation: floatSlow 6s ease-in-out 1s infinite alternate;
}

/* Floating Card 3: Top Right Network Channels */
.ax-float-card-right {
  position: absolute;
  top: 20px;
  right: 10px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 20px 24px;
  width: 250px;
  text-align: left;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
  z-index: 3;
  animation: floatSlow 5.5s ease-in-out 0.5s infinite alternate;
}

/* Floating Card 4: Bottom Right Alliances */
.ax-float-card-br {
  position: absolute;
  bottom: 10px;
  right: 30px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
  z-index: 3;
  animation: floatSlow 6.2s ease-in-out 1.5s infinite alternate;
}

@keyframes floatSlow {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-12px); }
}

/* ── 2. Clean Partner Logo Bar (Analyx Style) ── */
.ax-logo-section {
  padding: 50px 0 60px;
  background: #ffffff;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  text-align: center;
}

.ax-logo-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 28px;
}

.ax-logo-label span {
  color: #6366f1;
}

.ax-logo-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
}

.ax-logo-item {
  height: 38px;
  display: flex;
  align-items: center;
  filter: grayscale(100%) opacity(0.75);
  transition: all 0.25s ease;
}

.ax-logo-item:hover {
  filter: none;
  opacity: 1;
  transform: scale(1.06);
}

.ax-logo-item img {
  max-height: 32px;
  max-width: 110px;
  object-fit: contain;
}

/* ── 3. What We Solve (Prepnepal Style Cards) ── */
.ax-solve-section {
  padding: 90px 0;
  background: #fafafa;
}

.ax-solve-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 56px;
}

.ax-sec-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 16px;
  background: #e0e7ff;
  color: #4f46e5;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}

.ax-sec-title {
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 14px;
}

.ax-sec-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #64748b;
}

.ax-solve-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ax-solve-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 22px;
  padding: 32px 28px;
  text-align: left;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.03);
  transition: all 0.25s ease;
}

.ax-solve-card:hover {
  border-color: #6366f1;
  transform: translateY(-5px);
  box-shadow: 0 18px 36px rgba(99, 102, 241, 0.08);
}

.ax-solve-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.ax-solve-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

.ax-solve-card p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: #64748b;
  margin: 0;
}

/* ── 4. Our Solution Areas (6 Clean Cards) ── */
.ax-solutions-section {
  padding: 90px 0;
  background: #ffffff;
}

.ax-solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.ax-sol-card {
  background: #ffffff;
  border: 1.5px solid #f1f5f9;
  border-radius: 24px;
  padding: 36px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
  transition: all 0.3s ease;
  position: relative;
}

.ax-sol-card:hover {
  border-color: #6366f1;
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(99, 102, 241, 0.09);
}

.ax-sol-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.ax-sol-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ax-sol-num {
  font-size: 0.85rem;
  font-weight: 900;
  color: #94a3b8;
  font-family: monospace;
}

.ax-sol-title {
  font-size: 1.32rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  margin-bottom: 12px;
}

.ax-sol-desc {
  font-size: 0.94rem;
  line-height: 1.65;
  color: #64748b;
  margin-bottom: 24px;
}

.ax-sol-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.ax-sol-chip {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #334155;
  transition: all 0.2s ease;
}

.ax-sol-chip:hover {
  background: #6366f1;
  color: #ffffff;
  border-color: #6366f1;
}

.ax-sol-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  font-weight: 800;
  color: #4f46e5;
  text-decoration: none;
  transition: all 0.2s ease;
  margin-top: auto;
}

.ax-sol-link:hover {
  color: #0f172a;
  transform: translateX(4px);
}

/* ── 5. Solutions by Industry (Prepnepal Split Section) ── */
.ax-industry-section {
  padding: 90px 0;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
}

.ax-industry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ax-ind-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 28px 24px;
  transition: all 0.25s ease;
}

.ax-ind-card:hover {
  border-color: #0f172a;
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.ax-ind-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.ax-ind-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #f1f5f9;
  color: #4f46e5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ax-ind-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.ax-ind-desc {
  font-size: 0.9rem;
  line-height: 1.65;
  color: #64748b;
  margin: 0;
}

/* ── 6. How We Deliver (5 Steps) ── */
.ax-delivery-section {
  padding: 90px 0;
  background: #ffffff;
}

.ax-steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.ax-step-box {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 26px 20px;
  text-align: left;
  transition: all 0.25s ease;
}

.ax-step-box:hover {
  background: #ffffff;
  border-color: #f59e0b;
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(245, 158, 11, 0.1);
}

.ax-step-num {
  font-size: 0.78rem;
  font-weight: 900;
  color: #f59e0b;
  margin-bottom: 10px;
  font-family: monospace;
}

.ax-step-title {
  font-size: 1.12rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
}

.ax-step-desc {
  font-size: 0.86rem;
  line-height: 1.6;
  color: #64748b;
  margin: 0;
}

/* ── 7. Why Filament Technologies (Prepnepal Feature Matrix) ── */
.ax-why-section {
  padding: 90px 0;
  background: #f8fafc;
}

.ax-why-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.ax-why-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 26px 22px;
  transition: all 0.25s ease;
}

.ax-why-card:hover {
  border-color: #0f172a;
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

.ax-why-card h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

.ax-why-card p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #64748b;
  margin: 0;
}

/* ── 8. Final CTA (Prepnepal / Analyx Style) ── */
.ax-final-cta {
  padding: 90px 0 100px;
  background: #ffffff;
}

.ax-cta-box {
  background: #0f172a;
  border-radius: 32px;
  padding: 70px 48px;
  text-align: center;
  color: #ffffff;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.15);
  max-width: 980px;
  margin: 0 auto;
}

.ax-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  color: #f59e0b;
  margin-bottom: 18px;
}

.ax-cta-box h2 {
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 16px;
}

.ax-cta-box p {
  font-size: 1.08rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  max-width: 720px;
  margin: 0 auto 34px;
}

/* Responsive adjustments */
@media (max-width: 1100px) {
  .ax-solve-grid { grid-template-columns: repeat(2, 1fr); }
  .ax-solutions-grid { grid-template-columns: repeat(2, 1fr); }
  .ax-industry-grid { grid-template-columns: repeat(2, 1fr); }
  .ax-steps-grid { grid-template-columns: repeat(2, 1fr); }
  .ax-why-grid { grid-template-columns: repeat(2, 1fr); }
  .ax-float-card-left, .ax-float-card-right { display: none; }
}

@media (max-width: 768px) {
  .ax-hero { padding: 50px 0 30px; }
  .ax-solve-grid, .ax-solutions-grid, .ax-industry-grid, .ax-steps-grid, .ax-why-grid {
    grid-template-columns: 1fr;
  }
  .ax-visual-stage { margin-top: 30px; }
  .ax-person-img-wrap { width: 280px; height: 280px; }
  .ax-float-card-bl, .ax-float-card-br { display: none; }
  .ax-cta-box { padding: 40px 24px; }
}

.si-page {
  background: #f8f9fb;
  color: #0f172a;
  font-family: var(--font, 'Inter', sans-serif);
}

/* ── 1. Editorial Hero ── */
.si-hero {
  padding: 90px 0 70px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  position: relative;
}

.si-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
}

.si-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0284c7;
  margin-bottom: 18px;
}

.si-hero-tag::before {
  content: '';
  width: 14px;
  height: 2px;
  background: #0284c7;
}

.si-hero-title {
  font-size: clamp(2.4rem, 4.4vw, 3.8rem);
  font-weight: 900;
  line-height: 1.12;
  color: #0b1d36;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
}

.si-hero-title .accent-gradient {
  background: linear-gradient(135deg, #f59e0b 0%, #e11d48 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.si-hero-lead {
  font-size: 1.12rem;
  line-height: 1.75;
  color: #334155;
  margin-bottom: 18px;
}

.si-hero-sub {
  font-size: 0.96rem;
  line-height: 1.7;
  color: #64748b;
  margin-bottom: 34px;
}

.si-hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.si-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  background: #0b1d36;
  color: #ffffff;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 8px 20px rgba(11, 29, 54, 0.15);
}

.si-btn-primary:hover {
  background: #0284c7;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(2, 132, 199, 0.25);
  color: #ffffff;
}

.si-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  color: #0b1d36;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.25s ease;
}

.si-btn-secondary:hover {
  border-color: #0b1d36;
  background: #f8fafc;
  transform: translateY(-2px);
  color: #0b1d36;
}

/* Hero Network Keyword Matrix */
.si-hero-keyword-box {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 28px;
  padding: 36px 32px;
  position: relative;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.04);
}

.si-keyword-label {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  margin-bottom: 20px;
}

.si-keywords-cloud {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.si-kw-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0b1d36;
  transition: all 0.22s ease;
}

.si-kw-row:hover {
  border-color: #0284c7;
  background: #f0f9ff;
  transform: translateX(4px);
  color: #0284c7;
}

.si-kw-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0284c7;
}

/* ── 2. Horizontal Scrolling Track ── */
.si-track-section {
  padding: 40px 0;
  background: #0b1d36;
  color: #ffffff;
  overflow: hidden;
}

.si-track-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.si-track-title {
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94a3b8;
}

.si-track-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 8px;
}

.si-track-row::-webkit-scrollbar {
  display: none;
}

.si-track-pill {
  flex: 0 0 auto;
  padding: 14px 22px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.25s ease;
}

.si-track-pill:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #f59e0b;
  transform: translateY(-2px);
  color: #f59e0b;
}

/* ── 3. What We Solve ── */
.si-solve-section {
  padding: 100px 0;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
}

.si-solve-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.si-solve-left h2 {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 900;
  color: #0b1d36;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
}

.si-solve-left p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #475569;
  margin-bottom: 16px;
}

.si-approach-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.si-approach-item {
  padding: 22px 24px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  transition: all 0.25s ease;
}

.si-approach-item:hover {
  border-color: #0284c7;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
  transform: translateX(4px);
}

.si-approach-num {
  font-size: 0.76rem;
  font-weight: 800;
  color: #0284c7;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.si-approach-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0b1d36;
  margin-bottom: 6px;
}

.si-approach-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #64748b;
  margin: 0;
}

/* ── 4. Large Visual Solution Canvases (Sticky 01..06) ── */
.si-canvas-section {
  padding: 100px 0;
  background: #f8f9fb;
}

.si-canvas-item {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  margin-bottom: 80px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 32px;
  padding: 48px 44px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.03);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.si-canvas-item:hover {
  border-color: #0284c7;
  box-shadow: 0 20px 50px rgba(2, 132, 199, 0.08);
}

.si-canvas-sticky-num {
  position: sticky;
  top: 100px;
  height: max-content;
}

.si-canvas-num {
  font-size: 3.4rem;
  font-weight: 900;
  color: #0b1d36;
  line-height: 1;
  font-family: monospace;
  margin-bottom: 12px;
}

.si-canvas-category {
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #0284c7;
}

.si-canvas-body h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 900;
  color: #0b1d36;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}

.si-canvas-body p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: #475569;
  margin-bottom: 24px;
}

.si-caps-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.si-cap-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #1e293b;
  transition: all 0.2s ease;
}

.si-cap-tag:hover {
  background: #0b1d36;
  color: #ffffff;
  border-color: #0b1d36;
}

.si-canvas-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0284c7;
  text-decoration: none;
  transition: all 0.2s ease;
}

.si-canvas-btn:hover {
  color: #0b1d36;
  transform: translateX(6px);
}

/* ── 5. Solutions Map Section ── */
.si-map-section {
  padding: 100px 0;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  text-align: center;
}

.si-map-wrap {
  max-width: 900px;
  margin: 0 auto;
}

.si-map-title {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 900;
  color: #0b1d36;
  margin-bottom: 14px;
}

.si-map-desc {
  font-size: 1.08rem;
  line-height: 1.7;
  color: #475569;
  max-width: 680px;
  margin: 0 auto 50px;
}

.si-map-matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  position: relative;
}

.si-map-card {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px 20px;
  text-align: left;
  transition: all 0.25s ease;
}

.si-map-card:hover {
  background: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 14px 34px rgba(2, 132, 199, 0.08);
  transform: translateY(-4px);
}

.si-map-card-tag {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0284c7;
  margin-bottom: 8px;
}

.si-map-card-title {
  font-size: 1.12rem;
  font-weight: 800;
  color: #0b1d36;
  margin-bottom: 6px;
}

.si-map-card-desc {
  font-size: 0.86rem;
  line-height: 1.6;
  color: #64748b;
  margin: 0;
}

/* ── 6. Solutions by Industry (Expanding Rail) ── */
.si-industry-section {
  padding: 100px 0;
  background: #f8f9fb;
}

.si-industry-rail {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: 48px;
}

.si-ind-box {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 24px;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  min-height: 260px;
}

.si-ind-box:hover {
  border-color: #0b1d36;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
  transform: translateY(-6px);
}

.si-ind-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f1f5f9;
  color: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.si-ind-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0b1d36;
  margin-bottom: 10px;
}

.si-ind-desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #475569;
  margin: 0;
}

/* ── 7. Technology Approach & Implementation Journey ── */
.si-approach-section {
  padding: 100px 0;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.si-req-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 50px 0;
  overflow-x: auto;
  padding: 10px 0;
}

.si-flow-node {
  flex: 1;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 22px 18px;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 800;
  color: #0b1d36;
  min-width: 170px;
}

.si-flow-node.active {
  background: #0b1d36;
  color: #ffffff;
  border-color: #0b1d36;
}

.si-flow-arrow {
  color: #94a3b8;
  font-size: 1.3rem;
  font-weight: 900;
}

/* 5-Step Lifecycle Journey */
.si-journey-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin-top: 40px;
}

.si-journey-step {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 26px 20px;
  transition: all 0.25s ease;
}

.si-journey-step:hover {
  background: #ffffff;
  border-color: #0284c7;
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.si-step-badge {
  font-size: 0.8rem;
  font-weight: 900;
  color: #0284c7;
  margin-bottom: 12px;
  font-family: monospace;
}

.si-step-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0b1d36;
  margin-bottom: 8px;
}

.si-step-desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #64748b;
  margin: 0;
}

/* ── 8. Technology Partners Logo Marquee ── */
.si-marquee-section {
  padding: 80px 0;
  background: #f8f9fb;
  overflow: hidden;
}

.si-marquee-wrap {
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: 40px;
  margin-top: 36px;
}

.si-marquee-track {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 40px;
  min-width: 100%;
  animation: scrollMarquee 26s linear infinite;
}

@keyframes scrollMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

.si-partner-pill {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px 28px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
}

.si-partner-pill img {
  max-height: 34px;
  max-width: 130px;
  object-fit: contain;
}

/* ── 9. Why Filament Technologies (Value Matrix) ── */
.si-why-section {
  padding: 100px 0;
  background: #ffffff;
  border-top: 1px solid #e2e8f0;
}

.si-why-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.si-why-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 28px 22px;
  transition: all 0.25s ease;
}

.si-why-card:hover {
  background: #ffffff;
  border-color: #0b1d36;
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
}

.si-why-card h4 {
  font-size: 1.08rem;
  font-weight: 800;
  color: #0b1d36;
  margin-bottom: 8px;
}

.si-why-card p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #64748b;
  margin: 0;
}

/* ── 10. Huge Final CTA ── */
.si-final-cta {
  padding: 110px 0;
  background: #0b1d36;
  color: #ffffff;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.si-final-inner {
  max-width: 820px;
  margin: 0 auto;
}

.si-final-inner h2 {
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}

.si-final-inner p {
  font-size: 1.12rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 38px;
}

.si-final-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 38px;
  background: #f59e0b;
  color: #0b1d36;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 900;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 12px 30px rgba(245, 158, 11, 0.3);
}

.si-final-btn:hover {
  background: #ffffff;
  color: #0b1d36;
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(255, 255, 255, 0.2);
}

/* ── Responsive Rules ── */
@media (max-width: 1100px) {
  .si-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .si-solve-grid { grid-template-columns: 1fr; }
  .si-canvas-item { grid-template-columns: 1fr; padding: 36px 28px; }
  .si-canvas-sticky-num { position: static; margin-bottom: 20px; }
  .si-industry-rail { grid-template-columns: repeat(3, 1fr); }
  .si-journey-grid { grid-template-columns: repeat(2, 1fr); }
  .si-why-grid { grid-template-columns: repeat(2, 1fr); }
  .si-map-matrix { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .si-hero { padding: 60px 0 40px; }
  .si-industry-rail { grid-template-columns: 1fr; }
  .si-journey-grid { grid-template-columns: 1fr; }
  .si-why-grid { grid-template-columns: 1fr; }
  .si-req-flow { flex-direction: column; align-items: stretch; }
  .si-flow-arrow { text-align: center; transform: rotate(90deg); }
}

/* ── 1. Samfund Rounded Grid Hero ── */
.samfund-hero {
  background-color: #f7f9fb;
  background-image: 
    radial-gradient(#d1dbe5 1.2px, transparent 1.2px),
    linear-gradient(to right, rgba(226, 232, 240, 0.4) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(226, 232, 240, 0.4) 1px, transparent 1px);
  background-size: 36px 36px, 72px 72px, 72px 72px;
  padding: 80px 0 70px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.samfund-hero-inner {
  max-width: 960px;
  margin: 0 auto;
}

.samfund-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--blue, #10609e);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 24px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}

.samfund-title {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 900;
  line-height: 1.15;
  color: #0f172a;
  letter-spacing: -0.035em;
  margin-bottom: 20px;
}

.samfund-lead {
  font-size: clamp(1.05rem, 1.8vw, 1.22rem);
  line-height: 1.7;
  color: #475569;
  max-width: 780px;
  margin: 0 auto 34px;
}

.samfund-btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 34px;
  background: #0f172a;
  color: #ffffff;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.2);
}

.samfund-btn-dark:hover {
  background: var(--blue, #10609e);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(16, 96, 158, 0.3);
}

.samfund-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 30px;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  color: #1e293b;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.25s ease;
}

.samfund-btn-outline:hover {
  border-color: var(--blue, #10609e);
  color: var(--blue, #10609e);
  transform: translateY(-2px);
}

/* ── 2. Samfund Bento Visual Matrix ── */
.samfund-bento-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.3fr;
  gap: 20px;
  max-width: 1120px;
  margin: 50px auto 0;
  text-align: left;
}

.sam-card {
  border-radius: 26px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.sam-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.sam-card-white {
  background: #ffffff;
  border: 1px solid #e2e8f0;
}

.sam-icon-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.sam-app-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

.sam-app-icon img {
  max-width: 26px;
  max-height: 26px;
  object-fit: contain;
}

.sam-title-sm {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

.sam-desc-sm {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #64748b;
  margin: 0;
}

.sam-metric-large {
  font-size: 2.8rem;
  font-weight: 900;
  color: #0f172a;
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -0.03em;
}

/* Center Column Cyber Visual Card */
.sam-card-center-visual {
  background: #09131f;
  padding: 0;
  border-radius: 26px;
  overflow: hidden;
  height: 100%;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.sam-card-center-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.sam-card-center-visual:hover img {
  transform: scale(1.05);
}

.sam-visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(9, 19, 31, 0.9) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  color: #ffffff;
}

.sam-visual-badge {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--yellow, #f3b72c);
  margin-bottom: 4px;
}

.sam-visual-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
}

/* Right Column Bento Cards */
.sam-right-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.sam-card-green {
  background: #dcfce7;
  border: 1px solid #bbf7d0;
}

.sam-card-green .sam-metric-large {
  color: #15803d;
}

.sam-card-dark {
  background: #0f172a;
  border: 1px solid #1e293b;
  color: #ffffff;
}

.sam-card-dark .sam-title-sm {
  color: #ffffff;
}

.sam-card-dark .sam-desc-sm {
  color: #94a3b8;
}

.sam-card-cyan-wide {
  background: linear-gradient(135deg, #cffafe 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
}

.sam-avatar-orbit {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.sam-orbit-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: #0284c7;
  box-shadow: 0 4px 10px rgba(2, 132, 199, 0.15);
}

/* ── 3. Havenly Radial Arc Dome Showcase ── */
.havenly-dial-section {
  padding: 100px 0 90px;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

.havenly-dial-wrap {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  text-align: center;
}

.havenly-dome-arc {
  position: relative;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding-top: 50px;
}

/* Arc Cards Trajectory */
.havenly-cards-track {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: -30px;
  position: relative;
  z-index: 3;
}

.havenly-mini-card {
  width: 145px;
  height: 180px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  transition: all 0.3s ease;
  text-decoration: none;
}

.havenly-mini-card.h1 { transform: translateY(35px) rotate(-14deg); }
.havenly-mini-card.h2 { transform: translateY(10px) rotate(-7deg); }
.havenly-mini-card.h3 { transform: translateY(-8px) rotate(0deg); border-color: var(--blue, #10609e); box-shadow: 0 18px 36px rgba(16, 96, 158, 0.15); }
.havenly-mini-card.h4 { transform: translateY(-8px) rotate(0deg); border-color: var(--yellow, #f3b72c); }
.havenly-mini-card.h5 { transform: translateY(10px) rotate(7deg); }
.havenly-mini-card.h6 { transform: translateY(35px) rotate(14deg); }

.havenly-mini-card:hover {
  transform: translateY(-20px) scale(1.08) rotate(0deg) !important;
  z-index: 10;
  border-color: var(--blue, #10609e);
  box-shadow: 0 20px 40px rgba(16, 96, 158, 0.2);
}

.havenly-mini-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f1f5f9;
  color: var(--blue, #10609e);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.havenly-mini-title {
  font-size: 0.82rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
  margin: 8px 0 0;
}

/* SVG Radial Dial Outline with tick marks */
.havenly-dial-svg {
  width: 100%;
  max-width: 820px;
  height: auto;
  margin: 0 auto;
  display: block;
}

.havenly-center-content {
  max-width: 680px;
  margin: -160px auto 40px;
  position: relative;
  z-index: 4;
}

.havenly-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--blue, #10609e);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}

.havenly-dial-title {
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  font-weight: 900;
  color: #0f172a;
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}

.havenly-dial-desc {
  font-size: 1.02rem;
  line-height: 1.65;
  color: #64748b;
  margin-bottom: 28px;
}

/* Responsive adjustments for Samfund & Havenly */
@media (max-width: 1100px) {
  .samfund-bento-grid {
    grid-template-columns: 1fr 1fr;
  }
  .sam-card-center-visual {
    grid-column: span 2;
    min-height: 320px;
  }
}

@media (max-width: 768px) {
  .samfund-bento-grid {
    grid-template-columns: 1fr;
  }
  .sam-right-top-row {
    grid-template-columns: 1fr;
  }
  .sam-card-center-visual {
    grid-column: span 1;
    min-height: 280px;
  }
  .havenly-cards-track {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 0;
  }
  .havenly-mini-card {
    transform: none !important;
    width: calc(50% - 6px);
    height: 140px;
  }
  .havenly-center-content {
    margin-top: 30px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   EDITORIAL LIGHT THEME DESIGN SYSTEM (FULLSCREEN VIDEO HERO)
   Brand Theme: Light (#ffffff, #f8fafc), Deep Navy (#0b1d36), Royal Blue (#10609e), Amber (#f59e0b)
   ══════════════════════════════════════════════════════════════════ */

.dyn-page-light {
  background-color: #ffffff;
  color: #0b1d36;
  font-family: var(--font-main, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  overflow-x: hidden;
}

/* Fullscreen Hero Section */
.fs-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  background: #ffffff;
  color: #000000;
  font-family: 'Inter', sans-serif;
}

/* Background Video with Light Frost Overlay */
.fs-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
  opacity: 0.28;
}

.fs-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82) 0%, rgba(248, 250, 252, 0.75) 60%, rgba(255, 255, 255, 0.95) 100%);
  backdrop-filter: blur(4px);
  z-index: 2;
  pointer-events: none;
}

.fs-hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 48px 48px;
  box-sizing: border-box;
}

/* 1. Nav Row in Hero */
.fs-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  animation: fsFadeDown 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fs-logo-circle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.fs-logo-ring {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2.5px solid #10609e;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fs-logo-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10609e;
}

.fs-logo-text {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #0b1d36;
}

.fs-nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.fs-nav-link {
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #0b1d36;
  text-decoration: none;
  transition: color 0.2s ease;
  position: relative;
}

.fs-nav-link:hover {
  color: #10609e;
}

.fs-nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #10609e;
}

.fs-menu-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0b1d36;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.fs-menu-btn:hover {
  background: #10609e;
  transform: scale(1.05);
}

.fs-menu-btn span {
  width: 16px;
  height: 2px;
  background: #ffffff;
  border-radius: 1px;
}

/* 2. Stats Row (Middle section, flex-1, right-aligned) */
.fs-stats-row {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 40px 0;
}

.fs-stats-track {
  display: flex;
  align-items: flex-end;
  gap: clamp(24px, 5vw, 60px);
}

.fs-stat-item {
  text-align: right;
  animation: fsFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fs-stat-item:nth-child(1) { animation-delay: 0.2s; }
.fs-stat-item:nth-child(2) { animation-delay: 0.34s; }
.fs-stat-item:nth-child(3) { animation-delay: 0.48s; }

.fs-stat-num {
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  font-weight: 800;
  line-height: 1;
  color: #0b1d36;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}

.fs-stat-plus {
  color: #10609e;
  font-size: 0.55em;
  margin-right: 2px;
  font-weight: 900;
}

.fs-stat-label {
  font-size: clamp(0.68rem, 1.2vw, 0.82rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #475569;
  line-height: 1.35;
  margin-top: 6px;
  white-space: pre-line;
}

/* 3. Bottom Section */
.fs-bottom-sec {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Row A: Tagline + CTA */
.fs-row-a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.fs-tagline {
  font-size: clamp(0.72rem, 1.2vw, 0.88rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #0b1d36;
  line-height: 1.5;
  max-width: 320px;
  margin: 0;
  animation: fsFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

.fs-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(1rem, 2vw, 1.45rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #10609e;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.25s ease;
  animation: fsFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}

.fs-cta-link:hover {
  color: #f59e0b;
  transform: translateX(4px);
}

.fs-cta-link svg {
  transition: transform 0.25s ease;
}

.fs-cta-link:hover svg {
  transform: translate(3px, -3px);
}

/* Row B: Description + Big Heading */
.fs-row-b {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.fs-desc-block {
  width: clamp(160px, 25vw, 320px);
  flex-shrink: 0;
  font-size: clamp(0.72rem, 1.1vw, 0.85rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #64748b;
  line-height: 1.6;
  animation: fsFadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}

.fs-big-heading {
  text-align: right;
  line-height: 0.88;
  margin: 0;
}

.fs-word-wrap {
  overflow: hidden;
  display: block;
}

.fs-word {
  display: block;
  font-size: clamp(2.8rem, 9.5vw, 8.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: #0b1d36;
  line-height: 0.88;
  transform: translateY(110%);
  animation: fsSlideUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fs-word.w1 { animation-delay: 0.4s; }
.fs-word.w2 {
  animation-delay: 0.54s;
  color: #ea580c;
  background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.fs-word.w3 { animation-delay: 0.68s; }

/* Keyframe Animations */
@keyframes fsFadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fsFadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fsSlideUp {
  from { transform: translateY(110%); }
  to { transform: translateY(0); }
}

/* ── Light-Theme Content Sections Following Hero ── */
.fs-light-sec {
  padding: 100px 0;
  background: #ffffff;
}

.fs-light-sec.alt {
  background: #f8fafc;
}

.fs-sec-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 60px;
}

.fs-sec-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: #e0f2fe;
  color: #10609e;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 999px;
  margin-bottom: 16px;
}

.fs-sec-title {
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #0b1d36;
  line-height: 1.15;
  margin-bottom: 16px;
}

.fs-sec-desc {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #64748b;
}

/* 5-Step Process Grid */
.fs-proc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.fs-proc-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 28px 22px;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.fs-proc-card:hover {
  border-color: #10609e;
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(16, 96, 158, 0.12);
}

.fs-proc-num {
  font-size: 0.78rem;
  font-weight: 900;
  color: #f59e0b;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.fs-proc-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #0b1d36;
  line-height: 1.35;
  margin-bottom: 10px;
}

.fs-proc-desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #64748b;
  margin: 0;
}

/* Alternating Solution Showcases */
.fs-sol-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.fs-sol-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 24px;
  padding: 36px;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.fs-sol-card:hover {
  border-color: #10609e;
  transform: translateY(-5px);
  box-shadow: 0 20px 45px rgba(16, 96, 158, 0.08);
}

.fs-sol-card h3 {
  font-size: 1.5rem;
  font-weight: 900;
  color: #0b1d36;
  line-height: 1.25;
  margin-bottom: 12px;
}

.fs-sol-card p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #64748b;
  margin-bottom: 20px;
}

.fs-sol-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.fs-sol-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #1e293b;
}

.fs-sol-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 800;
  color: #10609e;
  text-decoration: none;
  transition: gap 0.2s ease;
}

.fs-sol-link:hover {
  gap: 12px;
  color: #f59e0b;
}

/* Industry Cards */
.fs-ind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.fs-ind-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 32px 24px;
  transition: all 0.3s ease;
}

.fs-ind-card:hover {
  border-color: #10609e;
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(16, 96, 158, 0.08);
}

.fs-ind-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #e0f2fe;
  color: #10609e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 18px;
}

.fs-ind-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0b1d36;
  margin-bottom: 10px;
}

.fs-ind-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #64748b;
  margin: 0;
}

/* Logo Grid */
.fs-logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.fs-logo-item {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 18px;
  height: 85px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.fs-logo-item img {
  max-width: 100%;
  max-height: 42px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.75;
  transition: all 0.3s ease;
}

.fs-logo-item:hover {
  border-color: #10609e;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(16, 96, 158, 0.1);
}

.fs-logo-item:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* Final Light CTA */
.fs-final-cta {
  padding: 90px 0;
  background: linear-gradient(135deg, #0b1d36 0%, #10609e 100%);
  color: #ffffff;
  text-align: center;
}

.fs-cta-inner {
  max-width: 820px;
  margin: 0 auto;
}

.fs-cta-inner h2 {
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  font-weight: 900;
  color: #ffffff;
  line-height: 1.18;
  margin-bottom: 18px;
}

.fs-cta-inner p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 34px;
}

.fs-btn-amber {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #f59e0b;
  color: #0b1d36 !important;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 16px 36px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(245, 158, 11, 0.35);
  transition: all 0.3s ease;
}

.fs-btn-amber:hover {
  background: #d97706;
  color: #ffffff !important;
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(217, 119, 6, 0.45);
}

/* ══════════════════════════════════════════════
   MODERN PROBLEM-SOLUTION & FEATURED SPOTLIGHT
   ══════════════════════════════════════════════ */
.modern-sol-section {
  padding: 96px 0;
  background: #ffffff;
}

.modern-sec-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 56px;
}

.modern-sec-tag {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #10609e;
  margin-bottom: 12px;
}

.modern-sec-tag.red {
  color: #e11d48;
}

.modern-sec-title {
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 800;
  color: #0b1d36;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-bottom: 16px;
}

.modern-sec-desc {
  font-size: 1.05rem;
  color: #64748b;
  line-height: 1.7;
}

.modern-prob-sol-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 40px;
}

.modern-card {
  background: #ffffff;
  border: 1.5px solid #f1f5f9;
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(11, 29, 54, 0.03);
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
}

.modern-card:hover {
  transform: translateY(-6px);
  border-color: #cbd5e1;
  box-shadow: 0 16px 36px rgba(16, 96, 158, 0.09);
}

.card-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 20px;
}

.card-icon-box.coral {
  background: rgba(225, 29, 72, 0.08);
  color: #e11d48;
}

.card-icon-box.amber {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

.card-icon-box.blue {
  background: rgba(16, 96, 158, 0.1);
  color: #10609e;
}

.card-title {
  font-size: 1.18rem;
  font-weight: 800;
  color: #0b1d36;
  margin-bottom: 12px;
  line-height: 1.35;
}

.card-prob-desc {
  font-size: 0.92rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 24px;
}

.card-sol-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #10609e;
  margin-bottom: 8px;
}

.card-sol-desc {
  font-size: 0.92rem;
  color: #334155;
  line-height: 1.6;
  margin-bottom: 28px;
  font-weight: 500;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #10609e;
  text-decoration: none;
  margin-top: auto;
  transition: all 0.2s ease;
}

.card-link:hover {
  color: #0b1d36;
  gap: 10px;
}

/* Featured Spotlight Banner (Matching Ref Image 1 Bottom) */
.featured-spotlight-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(11, 29, 54, 0.05);
  margin-top: 48px;
}

.feat-content {
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feat-tag {
  display: inline-block;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  color: #10609e;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
  width: max-content;
}

.feat-title {
  font-size: clamp(1.8rem, 2.5vw, 2.3rem);
  font-weight: 800;
  color: #0b1d36;
  line-height: 1.25;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.feat-desc {
  font-size: 0.98rem;
  color: #64748b;
  line-height: 1.65;
  margin-bottom: 24px;
}

.feat-checklist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.feat-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.94rem;
  font-weight: 600;
  color: #1e293b;
}

.feat-check-item svg {
  color: #10609e;
  flex-shrink: 0;
}

.feat-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-feat-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #10609e;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 13px 26px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(16, 96, 158, 0.25);
  transition: all 0.25s ease;
}

.btn-feat-primary:hover {
  background: #0b1d36;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(11, 29, 54, 0.3);
}

.btn-feat-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #0b1d36 !important;
  border: 1.5px solid #cbd5e1;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 13px 24px;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.btn-feat-outline:hover {
  border-color: #0b1d36;
  background: #f8fafc;
}

.feat-img-container {
  position: relative;
  min-height: 380px;
  overflow: hidden;
}

.feat-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ══════════════════════════════════════════════
   SECTOR SOLUTIONS BENTO SECTION (Ref Image 3)
   ══════════════════════════════════════════════ */
.sector-bento-section {
  padding: 96px 0;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.sector-split-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 56px;
  align-items: center;
}

.sector-left-col {
  display: flex;
  flex-direction: column;
}

.sector-left-title {
  font-size: clamp(2.2rem, 3.8vw, 3rem);
  font-weight: 900;
  color: #0b1d36;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}

.sector-left-desc {
  font-size: 1.06rem;
  color: #64748b;
  line-height: 1.7;
  margin-bottom: 36px;
}

.btn-dark-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0b1d36;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.96rem;
  padding: 16px 32px;
  border-radius: 999px;
  text-decoration: none;
  width: max-content;
  box-shadow: 0 10px 24px rgba(11, 29, 54, 0.25);
  transition: all 0.3s ease;
}

.btn-dark-pill:hover {
  background: #10609e;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(16, 96, 158, 0.35);
}

.sector-bento-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sector-bento-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.sector-bento-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 26px;
  box-shadow: 0 4px 16px rgba(11, 29, 54, 0.03);
  transition: all 0.3s ease;
}

.sector-bento-card:hover {
  border-color: #cbd5e1;
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(11, 29, 54, 0.08);
}

.bento-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  color: #475569;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.sector-bento-card h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0b1d36;
  margin-bottom: 8px;
}

.sector-bento-card p {
  font-size: 0.88rem;
  color: #64748b;
  line-height: 1.55;
}

.sector-bento-wide-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 20px;
  padding: 28px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  align-items: center;
  box-shadow: 0 4px 16px rgba(11, 29, 54, 0.03);
  transition: all 0.3s ease;
}

.sector-bento-wide-card:hover {
  border-color: #cbd5e1;
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(11, 29, 54, 0.08);
}

.wide-card-left h4 {
  font-size: 1.22rem;
  font-weight: 800;
  color: #0b1d36;
  margin-bottom: 8px;
}

.wide-card-left p {
  font-size: 0.9rem;
  color: #64748b;
  line-height: 1.55;
  margin-bottom: 14px;
}

.wide-card-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wide-chip {
  font-size: 0.72rem;
  font-weight: 700;
  background: #eff6ff;
  color: #10609e;
  border: 1px solid #dbeafe;
  padding: 4px 10px;
  border-radius: 6px;
}

.wide-card-right-stack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
}

.stack-card {
  position: absolute;
  width: 170px;
  height: 110px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 2px solid #ffffff;
  transition: transform 0.3s ease;
}

.stack-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stack-card.back {
  transform: translate(-18px, -10px) rotate(-6deg);
  z-index: 1;
  opacity: 0.85;
}

.stack-card.front {
  transform: translate(14px, 10px) rotate(4deg);
  z-index: 2;
}

.sector-bento-wide-card:hover .stack-card.back {
  transform: translate(-24px, -14px) rotate(-9deg);
}

.sector-bento-wide-card:hover .stack-card.front {
  transform: translate(18px, 14px) rotate(6deg);
}

/* Responsive Overrides */
.fs-hero.with-site-header {
  min-height: calc(100vh - 100px);
}

.fs-hero.with-site-header .fs-hero-content {
  min-height: calc(100vh - 100px);
  padding: 40px 48px 48px;
}

@media (max-width: 1024px) {
  .fs-hero-content {
    padding: 24px;
  }
  .fs-hero.with-site-header {
    min-height: auto;
  }
  .fs-hero.with-site-header .fs-hero-content {
    min-height: auto;
    padding: 32px 24px 40px;
    gap: 40px;
  }
  .fs-nav-links {
    display: none;
  }
  .modern-prob-sol-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .featured-spotlight-card {
    grid-template-columns: 1fr;
  }
  .feat-img-container {
    min-height: 280px;
  }
  .sector-split-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .fs-proc-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .fs-sol-grid {
    grid-template-columns: 1fr;
  }
  .fs-ind-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .fs-logo-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .fs-hero-content {
    padding: 20px 16px 32px;
  }
  .fs-hero.with-site-header .fs-hero-content {
    padding: 24px 16px 32px;
    gap: 32px;
  }
  .fs-stats-track {
    flex-direction: column;
    gap: 16px;
  }
  .fs-row-a,
  .fs-row-b {
    flex-direction: column;
    align-items: flex-start;
  }
  .fs-big-heading {
    text-align: left;
    margin-top: 12px;
  }
  .modern-prob-sol-grid {
    grid-template-columns: 1fr;
  }
  .feat-content {
    padding: 32px 20px;
  }
  .sector-bento-top-row,
  .sector-bento-wide-card {
    grid-template-columns: 1fr;
  }
  .wide-card-right-stack {
    display: none;
  }
}

/* ══════════════════════════════════════════════
   MODERN EDITORIAL BLOG PAGE (Ref Untitled UI Blog)
   ══════════════════════════════════════════════ */
.modern-blog-page {
  background: #ffffff;
}

.blog-hero-section {
  padding: 56px 0 32px;
}

.blog-intro-header {
  max-width: 820px;
  margin-bottom: 44px;
}

.blog-intro-tag {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 800;
  color: #10609e;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.blog-intro-h1 {
  font-size: clamp(2.4rem, 4.2vw, 3.4rem);
  font-weight: 900;
  color: #0b1d36;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

.blog-intro-p {
  font-size: 1.12rem;
  color: #64748b;
  line-height: 1.7;
}

/* Featured Post Hero Banner */
.blog-featured-banner {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  min-height: 500px;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 20px 50px rgba(11, 29, 54, 0.12);
  text-decoration: none;
  color: #ffffff !important;
  margin-bottom: 72px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.blog-featured-banner:hover {
  transform: translateY(-4px);
}

.featured-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.blog-featured-banner:hover .featured-bg-img {
  transform: scale(1.03);
}

.featured-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 29, 54, 0.15) 0%, rgba(11, 29, 54, 0.45) 40%, rgba(11, 29, 54, 0.94) 100%);
  pointer-events: none;
}

.featured-content-wrap {
  position: relative;
  z-index: 2;
  padding: 48px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
}

.featured-text-box {
  max-width: 820px;
}

.featured-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.featured-title {
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.featured-desc {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.6;
}

.featured-arrow-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.blog-featured-banner:hover .featured-arrow-circle {
  background: #ffffff;
  color: #0b1d36;
  transform: translate(4px, -4px);
}

/* Feed Header & Filters */
.blog-feed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 36px;
  flex-wrap: wrap;
  gap: 20px;
}

.blog-feed-title {
  font-size: 1.65rem;
  font-weight: 800;
  color: #0b1d36;
  letter-spacing: -0.02em;
}

.blog-filter-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.blog-tab-btn {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 700;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.blog-tab-btn.active,
.blog-tab-btn:hover {
  background: #0b1d36;
  color: #ffffff;
  border-color: #0b1d36;
}

/* 3-Column Editorial Grid */
.editorial-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 32px;
  margin-bottom: 56px;
}

.editorial-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease;
}

.editorial-card:hover {
  transform: translateY(-4px);
}

.editorial-thumb-wrap {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 18px;
  background: #f1f5f9;
  box-shadow: 0 4px 16px rgba(11, 29, 54, 0.04);
  position: relative;
}

.editorial-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.editorial-card:hover .editorial-thumb-img {
  transform: scale(1.04);
}

.editorial-category-tag {
  font-size: 0.74rem;
  font-weight: 800;
  color: #10609e;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
  display: block;
}

.editorial-card-title {
  font-size: 1.24rem;
  font-weight: 800;
  color: #0b1d36;
  line-height: 1.35;
  margin-bottom: 10px;
  transition: color 0.2s;
}

.editorial-card:hover .editorial-card-title {
  color: #10609e;
}

.editorial-card-excerpt {
  font-size: 0.92rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.editorial-author-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 6px;
}

.author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  background: #e2e8f0;
  border: 1.5px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.author-meta {
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 6px;
}

.meta-dot {
  color: #cbd5e1;
}

/* Load More Button */
.blog-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 80px;
}

.btn-load-more {
  background: #0b1d36;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.92rem;
  padding: 14px 36px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(11, 29, 54, 0.2);
}

.btn-load-more:hover {
  background: #10609e;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(16, 96, 158, 0.3);
}

/* Newsletter Strip */
.blog-newsletter-strip {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 24px;
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  box-shadow: 0 12px 32px rgba(11, 29, 54, 0.04);
  margin-bottom: 80px;
}

.blog-newsletter-left h3 {
  font-size: 1.8rem;
  font-weight: 800;
  color: #0b1d36;
  margin-bottom: 8px;
}

.blog-newsletter-left p {
  font-size: 0.96rem;
  color: #64748b;
  line-height: 1.6;
}

.blog-newsletter-form {
  display: flex;
  gap: 12px;
}

.blog-newsletter-input {
  flex: 1;
  padding: 14px 18px;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  font-size: 0.92rem;
  outline: none;
  font-family: inherit;
}

.blog-newsletter-input:focus {
  border-color: #10609e;
}

@media (max-width: 1024px) {
  .editorial-blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .blog-featured-banner {
    min-height: 420px;
  }
  .featured-content-wrap {
    padding: 32px;
  }
  .blog-newsletter-strip {
    grid-template-columns: 1fr;
    padding: 36px 28px;
  }
  .hero-polaris-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .video-showcase-split-header {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .why-stepper-header-split,
  .why-stepper-header-split.reversed {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .about-hero-grid,
  .about-origin-grid,
  .about-showcase-grid,
  .modern-prob-sol-grid,
  .modern-featured-spotlight,
  .sector-bento-split {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════
   MASTER GLOBAL MOBILE RESPONSIVENESS (< 768px & < 480px)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* ── 1. Global Reset Safeguards ── */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  .wrap {
    padding-left: 18px !important;
    padding-right: 18px !important;
    max-width: 100% !important;
  }

  /* ── 2. Top Bar & Header ── */
  .top-bar {
    padding: 6px 0;
    font-size: 0.72rem;
  }

  .top-bar-inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
  }

  .top-contacts {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.72rem;
  }

  .top-contacts a {
    gap: 4px;
  }

  .top-socials {
    display: flex;
    justify-content: center;
    gap: 12px;
    font-size: 0.70rem;
  }

  .site-header {
    padding: 6px 0 !important;
  }

  .site-header.stuck {
    padding: 4px 0 !important;
  }

  .nav-logo img {
    height: 60px !important;
    max-height: 64px !important;
  }

  .site-header.stuck .nav-logo img {
    height: 50px !important;
  }

  /* ── 3. Partners Page Mobile ── */
  .partner-polaris-hero {
    padding: 40px 0 50px !important;
  }

  .hero-capsule-tags {
    gap: 6px;
    margin-bottom: 20px;
  }

  .hero-capsule-tag {
    font-size: 0.70rem;
    padding: 5px 12px;
  }

  .hero-polaris-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .hero-polaris-title {
    font-size: clamp(2rem, 8vw, 2.7rem) !important;
    line-height: 1.12 !important;
    margin-bottom: 16px !important;
  }

  .hero-polaris-desc {
    font-size: 0.98rem !important;
    line-height: 1.65 !important;
    margin-bottom: 24px !important;
  }

  .hero-polaris-ctas {
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }

  .hero-polaris-ctas .btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center;
    padding: 12px 20px !important;
  }

  .hero-visual-card {
    padding: 12px !important;
    border-radius: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .hero-visual-inner {
    height: 260px !important;
    border-radius: 14px !important;
  }

  .partner-video-showcase-section {
    padding: 48px 0 60px !important;
  }

  .video-section-title {
    font-size: 1.9rem !important;
  }

  .video-section-desc {
    font-size: 0.95rem !important;
  }

  .partner-video-pure-card {
    border-radius: 18px !important;
  }

  .bento-2x2-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  .bento-card:nth-child(n) {
    grid-column: auto !important;
    width: 100% !important;
  }

  .partner-why-stepper {
    padding: 50px 0 60px !important;
  }

  .why-stepper-title {
    font-size: 2.1rem !important;
  }

  .why-stepper-header-split,
  .why-stepper-header-split.reversed {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin-bottom: 24px !important;
  }

  .synapse-circuit-rail {
    display: none !important;
  }

  .why-steps-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }

  .why-step-col {
    min-height: auto !important;
    padding: 20px 18px !important;
    border-radius: 16px !important;
  }

  /* ── 4. About Page Mobile ── */
  .about-hero-theme {
    padding: 40px 0 30px !important;
  }

  .about-hero-title {
    font-size: clamp(2rem, 7.5vw, 2.6rem) !important;
  }

  .about-hero-img-card {
    border-radius: 18px !important;
  }

  .about-hero-img-card img {
    height: 240px !important;
  }

  .about-hero-float-badge {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 12px !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
  }

  .about-ticker-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    margin-top: 30px !important;
  }

  .about-ticker-sep {
    display: none !important;
  }

  .about-origin-section {
    padding: 50px 0 !important;
  }

  .about-origin-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .about-origin-photo-card img {
    height: 240px !important;
  }

  .about-origin-donut-card {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .about-pillars-section {
    padding: 50px 0 !important;
  }

  .about-bento-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 28px !important;
  }

  .bento-hero-card {
    grid-column: span 1 !important;
  }

  .bento-card {
    padding: 24px 20px !important;
    border-radius: 18px !important;
  }

  .about-arcs-section {
    padding: 50px 0 60px !important;
  }

  .about-arcs-container {
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
  }

  .about-arc-item {
    width: 100% !important;
    max-width: 320px !important;
    height: 260px !important;
    border-radius: 20px !important;
  }

  .about-showcase-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .about-showcase-visuals {
    min-height: auto !important;
    position: static !important;
  }

  .about-img-main-wrap {
    position: relative !important;
    width: 100% !important;
    height: 240px !important;
    border-radius: 18px !important;
  }

  .about-img-sub-wrap {
    display: none !important;
  }

  .about-stat-card {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 14px !important;
    width: 100% !important;
    animation: none !important;
    border-radius: 18px !important;
  }

  .leadership-highlight-card {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 20px !important;
    border-radius: 20px !important;
  }

  .leadership-img-frame {
    height: 240px !important;
    border-radius: 16px !important;
  }

  /* ── 5. Products Fullscreen Hero & Process Mobile ── */
  .fs-hero {
    min-height: auto !important;
    position: relative !important;
  }

  .fs-hero.with-site-header .fs-hero-content {
    min-height: auto !important;
    padding: 36px 20px 42px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 32px !important;
  }

  /* Centered Background Animation for Mobile */
  .fs-video-bg {
    object-position: center center !important;
    object-fit: cover !important;
    opacity: 0.38 !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .fs-video-overlay {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.45) 0%, rgba(248, 250, 252, 0.85) 75%, rgba(255, 255, 255, 0.98) 100%) !important;
  }

  /* Stats Row in Hero — Sleek Centered Horizontal Ribbon on Mobile */
  .fs-stats-row {
    flex: none !important;
    justify-content: center !important;
    padding: 6px 0 !important;
    width: 100% !important;
    order: 2 !important;
  }

  .fs-stats-track {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1.5px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 20px !important;
    padding: 16px 8px !important;
    box-shadow: 0 12px 30px -8px rgba(11, 29, 54, 0.08) !important;
  }

  .fs-stat-item {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .fs-stat-num {
    justify-content: center !important;
    font-size: 1.6rem !important;
    font-weight: 900 !important;
    color: #0b1d36 !important;
    letter-spacing: -0.03em !important;
  }

  .fs-stat-plus {
    color: #f59e0b !important;
    font-size: 0.65em !important;
  }

  .fs-stat-label {
    font-size: 0.60rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    color: #64748b !important;
    line-height: 1.22 !important;
    margin-top: 4px !important;
    text-align: center !important;
  }

  /* Bottom Hero Block on Mobile */
  .fs-bottom-sec {
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
  }

  .fs-row-a {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    order: 3 !important;
  }

  .fs-cta-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    color: #0b1d36 !important;
    background: #f59e0b !important;
    padding: 13px 26px !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35) !important;
    width: fit-content !important;
    letter-spacing: 0.08em !important;
    transition: all 0.25s ease !important;
  }

  .fs-cta-link:hover {
    background: #ea580c !important;
    color: #ffffff !important;
  }

  .fs-row-b {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  .fs-big-heading {
    text-align: left !important;
    order: 1 !important;
    margin: 0 !important;
    line-height: 0.88 !important;
  }

  .fs-word {
    font-size: clamp(3.2rem, 13.5vw, 4.8rem) !important;
    letter-spacing: -0.035em !important;
    line-height: 0.88 !important;
  }

  .fs-word.w2 {
    color: #ea580c !important;
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block !important;
  }

  .fs-desc-block {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 0.84rem !important;
    line-height: 1.65 !important;
    color: #475569 !important;
    font-weight: 600 !important;
  }

  /* 5-Step Process (STAGE 01..05) — 1 Column on Mobile */
  .fs-proc-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .fs-proc-card {
    padding: 24px 20px !important;
    border-radius: 18px !important;
    border: 1.5px solid #e2e8f0 !important;
  }

  .fs-proc-num {
    color: #ea580c !important;
    font-weight: 900 !important;
    font-size: 0.8rem !important;
  }

  .modern-prob-sol-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .modern-featured-spotlight {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 24px 18px !important;
    border-radius: 20px !important;
  }

  .spotlight-img-frame {
    height: 220px !important;
    border-radius: 16px !important;
  }

  .spotlight-content h3 {
    font-size: 1.45rem !important;
  }

  .spotlight-ctas {
    flex-direction: column !important;
    width: 100% !important;
  }

  .spotlight-ctas .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .sector-bento-split {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .sector-bento-wide-card {
    padding: 24px 18px !important;
    border-radius: 20px !important;
  }

  .sector-bento-features-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* ── 6. Solutions Page Mobile ── */
  .si-canvas-item {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 24px 18px !important;
    border-radius: 20px !important;
  }

  .si-canvas-sticky-num {
    position: static !important;
  }

  .si-canvas-num {
    font-size: 2.2rem !important;
    margin-bottom: 4px !important;
  }

  .si-canvas-body h3 {
    font-size: 1.45rem !important;
  }

  .si-approach-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ── 7. Blog Page Mobile ── */
  .editorial-blog-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .blog-featured-banner {
    min-height: 360px !important;
    border-radius: 18px !important;
  }

  .featured-content-wrap {
    padding: 22px 18px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .featured-title {
    font-size: 1.4rem !important;
  }

  .featured-arrow-circle {
    display: none !important;
  }

  .blog-filter-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  .blog-tab-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .blog-newsletter-strip {
    grid-template-columns: 1fr !important;
    padding: 28px 20px !important;
    border-radius: 20px !important;
    gap: 20px !important;
  }

  .blog-newsletter-form {
    flex-direction: column !important;
  }

  .blog-newsletter-form .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ── 8. Home & Common Components ── */
  .hero-content h1 {
    font-size: clamp(2.2rem, 8vw, 3.2rem) !important;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }

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

  .cta-wrap {
    padding: 32px 20px !important;
    border-radius: 20px !important;
  }

  /* ── Contact Page Mobile ── */
  .contact-hero-wrap {
    padding: 16px 0 40px !important;
  }

  .wrap-wide {
    padding: 0 16px !important;
  }

  .contact-hero-stage {
    grid-template-columns: 1fr !important;
    border-radius: 22px !important;
    min-height: auto !important;
  }

  .contact-left-panel {
    padding: 36px 20px 28px !important;
  }

  .contact-hero-title {
    font-size: clamp(1.9rem, 7.5vw, 2.6rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 14px !important;
  }

  .contact-hero-subtitle {
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    margin-bottom: 28px !important;
  }

  .contact-info-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding-top: 24px !important;
    margin-top: 20px !important;
  }

  .contact-info-label {
    font-size: 1.05rem !important;
  }

  .contact-right-panel {
    padding: 0 16px 36px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .contact-form-card-new {
    padding: 28px 18px !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2) !important;
  }

  .contact-form-card-new .form-card-title {
    font-size: 1.45rem !important;
  }

  .contact-form-card-new .form-card-sub {
    font-size: 0.85rem !important;
    margin-bottom: 18px !important;
  }

  .form-pill-row-2 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
  }

  .form-pill-row-1 {
    margin-bottom: 10px !important;
  }

  .form-pill-input {
    padding: 12px 18px !important;
    font-size: 0.88rem !important;
  }

  .form-pill-textarea {
    padding: 12px 18px !important;
    font-size: 0.88rem !important;
    min-height: 100px !important;
    margin-bottom: 12px !important;
  }

  .contact-consent-row {
    font-size: 0.78rem !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
  }

  .contact-submit-btn-pill {
    padding: 13px 20px !important;
    font-size: 0.94rem !important;
  }

  .contact-map-wrapper-new {
    height: 360px !important;
    border-radius: 20px !important;
    margin: 10px 0 40px !important;
  }

  .map-floating-card-new {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin-bottom: 16px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
    padding: 14px 16px !important;
  }

  /* ── 9. Footer Mobile ── */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }
}

@media (max-width: 480px) {
  .top-contacts {
    font-size: 0.68rem;
    gap: 6px;
  }

  .top-socials {
    font-size: 0.68rem;
    gap: 8px;
  }

  .nav-logo img {
    height: 54px !important;
    max-height: 58px !important;
  }

  .site-header.stuck .nav-logo img {
    height: 46px !important;
  }

  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  .btn {
    padding: 11px 20px !important;
    font-size: 0.88rem !important;
  }
}