/* ===== Design tokens ===== */
:root{
  --navy-950: #00183a;
  --navy-900: #002550;
  --navy-800: #003475;
  --blue-600: #0055f5;
  --blue-500: #0b82f4;
  --teal-400: #02d1da;
  --teal-500: #01bed7;
  --ink-900: #00285a;
  --ink-700: #3a4d66;
  --ink-500: #5a6f8c;
  --ink-400: #8ea2bd;
  --bg-page: #f5f9ff;
  --bg-card: #ffffff;
  --border: #dce8f6;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-sm: 0 2px 8px rgba(0,40,90, 0.06);
  --shadow-md: 0 12px 32px rgba(0,40,90, 0.08);
  --shadow-lg: 0 24px 60px rgba(0,37,80, 0.16);
  --container: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--ink-700);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{
  font-family: "Plus Jakarta Sans", "Inter", sans-serif;
  color: var(--ink-900);
  margin: 0;
  letter-spacing: -0.02em;
}
p{ margin: 0; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; }

.wrap{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:#a5f3fc;
}
.eyebrow::before{
  content: "";
  width: 18px;
  height: 2px;
  background: #67e8f9;
  border-radius: 2px;
}
.about-body .eyebrow,
.section .eyebrow{
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:#023374;
}
.about-body .eyebrow::before,
.section .eyebrow::before{
  content: "";
  width: 18px;
  height: 2px;
  background: #023374;
  border-radius: 2px;
}

.section{ padding: 112px 0; }
.section-head{
  max-width: 640px;
  margin-bottom: 56px;
}
.section-head h2{
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  margin-top: 14px;
  line-height: 1.15;
}
.section-head p{
  margin-top: 16px;
  font-size: 17px;
  color: var(--ink-500);
  line-height: 1.7;
}
.section-head.center{ margin-left: auto; margin-right: auto; text-align: center; }
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn-primary{
  background: linear-gradient(135deg, var(--blue-500), var(--teal-500));
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,85,245, 0.28);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,85,245, 0.36); }
.btn-ghost{
  background: rgba(255,255,255,0.06);
  color: #fff;
  border-color: rgba(255,255,255,0.24);
}
.btn-ghost:hover{ background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.4); }
.btn-outline{
  background: transparent;
  color: var(--ink-900);
  border-color: var(--border);
}
.btn-outline:hover{ border-color: var(--blue-500); color: var(--blue-600); }

/* ===== Header ===== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 249, 252, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0,40,90, 0.06);
}
.site-header .wrap{
  width:100%;
  max-width: none;
  margin:0;
  padding-left: 40px;
  padding-right: 40px;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  height: 160px;
}
.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: var(--ink-900);
}
.brand .mark{
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--ink-900);
  display: flex; align-items: center; justify-content: center;
}
.brand img {
  border-radius: 2px;
  width: 160px;
  height: 180px;
  display: block;
}

.main-nav{ display: flex; gap: 8px; }
.main-nav a{
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink-700);
  transition: background .18s ease, color .18s ease;
}
.main-nav a:hover{ background: rgba(0,85,245, 0.08); color: var(--blue-600); }
.main-nav a.active, .mobile-nav a.active{ color: var(--blue-600); font-weight: 700; }

.header-actions{ display: flex; align-items: center; gap: 10px;transform: translate(20px) }
.nav-toggle{
  display: none;
  width: 42px; height: 42px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  align-items: center; justify-content: center;
}
.nav-toggle svg{ width: 20px; height: 20px; }

.mobile-nav{
  display: none;
  flex-direction: column;
  padding: 8px 20px 18px;
  border-top: 1px solid var(--border);
}
.mobile-nav.open{ display: flex; }
.mobile-nav a{
  padding: 13px 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-700);
  border-bottom: 1px solid var(--border);
}
.mobile-nav a:last-child{ border-bottom: none; }

/* ===== Hero ===== */
.hero{
  position: relative;
  background:
    radial-gradient(1000px 620px at 102% -4%, rgba(1,190,215,0.4), transparent 62%),
    radial-gradient(760px 560px at -4% 96%, rgba(0,85,245,0.32), transparent 64%),
    linear-gradient(180deg, #e8f2ff 0%, #f5f9ff 72%);
  overflow: hidden;
  padding: 100px 0 112px;
  border-bottom: 1px solid var(--border);
}
.hero-orbs{
  position: absolute; inset: 0;
  z-index: -1;
}
.hero-orbs::after{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(0,40,90,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 20%, black 20%, transparent 72%);
}
.hero .wrap{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.hero-copy{ position: relative; z-index: 1; }
.eyebrow-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px 9px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink-700);
}
.pulse-dot{
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--teal-500);
  flex: none;
}
.pulse-dot::after{
  content:"";
  position:absolute; inset: -4px;
  border-radius: 50%;
  background: var(--teal-500);
  opacity: .35;
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse{
  0%{ transform: scale(0.6); opacity: .5; }
  100%{ transform: scale(1.8); opacity: 0; }
}
.hero-copy h1{
  color: var(--ink-900);
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 800;
  line-height: 1.25;
  margin-top: 20px;
}
.hero-copy h1 .accent{
  display: inline-block;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  line-height: 1;
  background: linear-gradient(120deg, var(--blue-600), var(--teal-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-copy .lede{
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-500);
  max-width: 520px;
}
.hero-actions{
  display: flex;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.hero .btn-ghost{
  background: #fff;
  color: var(--ink-900);
  border-color: var(--border);
}
.hero .btn-ghost:hover{ border-color: var(--blue-500); color: var(--blue-600); background:#fff; }

.hero-trust{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 48px;
  font-size: 14px;
  color: var(--ink-500);
}
.hero-trust strong{ color: var(--ink-900); }
.avatar-stack{ display: flex; }
.avatar-stack i{
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -10px;
  background: linear-gradient(135deg, var(--blue-500), var(--teal-500));
  color: #fff;
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.avatar-stack i:first-child{ margin-left: 0; }
.avatar-stack.sm i{ width: 32px; height: 32px; font-size: 12px; }

/* Hero visual: dashboard-mockup composition */
.hero-visual{ position: relative; height: 460px; z-index: 1; }
.dash-card{
  position: absolute;
  left: 4%; right: 4%; top: 6%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 26px;
  transform: rotate(-1.2deg);
  animation: floatY 6s ease-in-out infinite;
}
.dash-head{
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.dash-title{ font-family: "Plus Jakarta Sans", "Inter", sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink-900); }
.dash-body{
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 28px 4px;
}
.dash-ring{
  flex: none;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-600), var(--teal-500));
  display: flex; align-items: center; justify-content: center;
}
.dash-ring svg{ width: 24px; height: 24px; }
.dash-steps{
  flex: 1;
  position: relative;
  display: flex;
  justify-content: space-between;
}
.dash-steps::before{
  content:"";
  position: absolute;
  left: 8px; right: 8px; top: 6px;
  height: 2px;
  background: var(--border);
}
.dash-steps .step{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 1;
}
.dash-steps .dot{
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--blue-500);
  z-index: 1;
}
/* "How we deliver" carousel: --i (0-3) is set by script.js and drives the progress line */
.dash-steps{ --i: 0; }
.dash-steps::after{
  content: "";
  position: absolute;
  left: 12.5%;
  top: 6px;
  height: 2px;
  width: calc(var(--i) * 25%);
  background: linear-gradient(90deg, var(--blue-500), var(--teal-500));
  transition: width .6s ease;
}
.dash-steps .step{ background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.dash-steps .step:focus-visible{ outline: 2px solid var(--blue-500); outline-offset: 4px; border-radius: 8px; }
.dash-steps .dot{ transition: background .3s ease, box-shadow .3s ease, transform .3s ease; }
.dash-steps .label{ transition: color .3s ease; }
.dash-steps .step.done .dot{ background: var(--blue-500); }
.dash-steps .step.active .dot{
  background: var(--blue-500);
  transform: scale(1.25);
  box-shadow: 0 0 0 5px rgba(11,130,244,0.18);
}
.dash-steps .step.active .label{ color: var(--ink-900); }
.dash-ring{ position: relative; }
.dash-ring svg{
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transform: scale(.6) rotate(-25deg);
  transition: opacity .35s ease, transform .45s ease;
}
.dash-ring svg.active{ opacity: 1; transform: none; }
.dash-slides{ display: grid; padding: 0 4px 22px; }
.dash-slide{
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateX(28px);
  transition: opacity .5s ease, transform .5s ease, visibility 0s .5s;
}
.dash-slide.active{
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .5s ease .1s, transform .5s ease .1s, visibility 0s;
}
.dash-slide.past{ transform: translateX(-28px); }
.dash-slide .kicker{ font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #0784b5; }
.dash-slide h4{ margin-top: 6px; font-size: 17px; font-weight: 700; color: var(--ink-900); }
.dash-slide p{ margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: var(--ink-500); }
@media (prefers-reduced-motion: reduce){
  .dash-steps::after, .dash-steps .dot, .dash-steps .label, .dash-ring svg, .dash-slide, .dash-slide.active{ transition: none; }
}
.dash-steps .label{ font-size: 11.5px; font-weight: 600; color: var(--ink-500); }
.dash-tags{ display: flex; gap: 8px; flex-wrap: wrap; }
.dash-tags span{
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--bg-page);
  border: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-700);
}

.float-chip{
  position: absolute;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 14px 18px;
}
.float-chip strong{ display: block; font-family: "Plus Jakarta Sans", sans-serif; font-size: 18px; color: var(--ink-900); }
.float-chip span{ font-size: 12.5px; color: var(--ink-500); }
.chip-ic{
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0,85,245,0.12), rgba(1,190,215,0.14));
  color: var(--blue-600);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.chip-ic svg{ width: 18px; height: 18px; }
.chip-metric{ right: -3%; bottom: 12%; animation: floatY 5s ease-in-out infinite .3s; }
.chip-team{ left: -2%; bottom: -3%; animation: floatY 5.5s ease-in-out infinite .6s; }
.chip-team span strong{ display: inline; font-size: inherit; color: var(--ink-900); }

@keyframes floatY{
  0%, 100%{ transform: translateY(0) rotate(var(--tilt, 0deg)); }
  50%{ transform: translateY(-10px) rotate(var(--tilt, 0deg)); }
}
.dash-card{ --tilt: -1.2deg; }

/* ===== Clients strip ===== */
.clients{
  padding: 44px 0;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
.clients .wrap{
  display: flex;
  align-items: center;
  gap: 40px;
}
.clients-label{
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-400);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}
.marquee{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.marquee-track{
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  animation: marqueeScroll 30s linear infinite;
}
.clients:hover .marquee-track{ animation-play-state: paused; }
@keyframes marqueeScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
}
.logo-card{
  flex: 0 0 150px;
  height: 88px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-card img{
  max-width: 116px;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ===== About ===== */
.about{ background: #fff; }
.about .wrap{
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
}
.about-visual{
  position: relative;
  border-radius: var(--radius-lg);
  aspect-ratio: 4/5;
  background:
    radial-gradient(360px 320px at 50% 32%, rgba(1,190,215,0.35), transparent 68%),
    linear-gradient(155deg, rgba(0,85,245,0.18), rgba(1,190,215,0.1)),
    linear-gradient(200deg, var(--navy-900), var(--navy-800));
  overflow: hidden;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.06) inset;
  transition: transform .35s ease, box-shadow .35s ease;
  transform-style: preserve-3d;
  perspective: 800px;
}
.about-visual:hover{
  transform: perspective(800px) rotateX(2deg) rotateY(-3deg) scale(1.015);
  box-shadow: var(--shadow-lg), 0 0 40px rgba(1,190,215,0.25);
}
.about-visual::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.16) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  opacity:.5;
}
.about-visual .badge{
  position:absolute; top: 24px; left: 24px;
  background: rgba(255,255,255,0.92);
  color: var(--ink-900);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--shadow-md);
  z-index: 1;
}
.presence{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 60px 28px 28px;
  z-index: 1;
}
.presence-svg{ width: 100%; max-width: 260px; overflow: visible; }
.presence-svg text{ font-family: "Plus Jakarta Sans", sans-serif; }
.presence-svg .link{
  stroke-dasharray: 3 6;
  animation: dashFlow 1.6s linear infinite;
}
.presence-svg .halo{
  transform-box: fill-box;
  transform-origin: center;
  opacity: .3;
}
.presence-svg .hub-pulse{
  transform-box: fill-box;
  transform-origin: center;
  animation: hubPulse 2.6s ease-out infinite;
}
.presence-svg .node-pulse{
  transform-box: fill-box;
  transform-origin: center;
  animation: hubPulse 2.6s ease-out infinite;
}
@keyframes dashFlow{ to{ stroke-dashoffset: -18; } }
@keyframes hubPulse{
  0%{ transform: scale(1); opacity: .55; }
  100%{ transform: scale(2.6); opacity: 0; }
}
.presence-caption{
  font-size: 13.5px;
  color: #b7d2ee;
  text-align: center;
  max-width: 220px;
  line-height: 1.6;
}
.presence-caption strong{ color: #fff; }
.about-body p{
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--ink-700);
}
.about-body p + p{ margin-top: 18px; }
.about-body p strong{ color: var(--ink-900); }

.stat-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(88px, auto);
  gap: 16px;
  margin-top: 40px;
}
.stat-row .stat{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 20px 18px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.stat-row .stat:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-row .stat strong{
  display:block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 26px;
  color: var(--ink-900);
  background: linear-gradient(120deg, var(--blue-600), var(--teal-500));
  -webkit-background-clip:text; background-clip:text; color: transparent;
}
.stat-row .stat span{ font-size: 13px; color: var(--ink-500); }

.stat-row .stat.big{
  grid-column: span 2;
  grid-row: span 2;
  background: linear-gradient(150deg, var(--blue-600), var(--teal-500));
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 26px;
}
.stat-row .stat.big strong{
  font-size: 42px;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #fff;
}
.stat-row .stat.big span{ color: rgba(255,255,255,0.85); font-size: 14px; margin-top: 4px; }
.stat-row .stat.wide{ grid-column: span 2; display: flex; align-items: center; gap: 14px; }
.stat-row .stat.wide strong{ font-size: 22px; }

/* ===== Insights ===== */
.insights{ background: linear-gradient(180deg, #e8f2ff 0%, #f5f9ff 100%); }
.insight-intro{
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--ink-700);
  max-width: 760px;
  margin-bottom: 44px;
}
.insight-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

/* ===== Card lighting =====
   One light source, top-left, shared by every card on every page.
   - surface: brightest at the lit top-left corner, falling to deep navy at the bottom-right
   - rim light: the same aqua glow (same pixel size) on the top-left of every card
   - edges: light catches the top/left edges, the bottom/right edges fall into shade
   - shadow: cast down and to the right, away from the light
   - blob: sits in the shaded corner, so it is darker, never lighter
   Nothing varies per card: change the values here and the whole site stays in sync. */
:root{
  --card-lit:
    radial-gradient(420px 260px at 0% 0%, rgba(2,209,218,0.24), transparent 60%),
    linear-gradient(135deg, #0049c9 0%, #003a9e 42%, #002550 100%);
  --card-edge: inset 1px 1px 0 rgba(255,255,255,0.18), inset -1px -1px 0 rgba(0,10,30,0.22);
  --card-shadow: var(--card-edge), 10px 16px 30px rgba(0,25,58,0.30);
  --card-shadow-hover: var(--card-edge), 14px 22px 40px rgba(0,25,58,0.40);
  --card-blob: rgba(0,15,40,0.22);
}
.home-insights{
  display:grid;
  grid-template-columns: repeat(2,  1fr);
  gap: 16px;
}
.home-insights .insight-item{
  min-height:150px;
  height:auto;
  padding:22px;
  box-sizing:border-box;
  align-items:center;
}

.insight-item{
  position: relative;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 38px 42px;
  border-radius: 26px;
  background: var(--card-lit);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: var(--card-shadow);
  transition: box-shadow .35s ease, border-color .35s ease;
}
.insight-front{
  position: absolute;
  inset: 0;
  padding: 38px 42px;
  display: flex;
  gap: 26px;
  align-items: center;
  transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    opacity .35s ease;
}
.insight-back{
  position: absolute;
  inset: 0;
  padding: 38px 42px;
  display: flex;
  align-items: center;
  background:
   linear-gradient(
      120deg,
      rgba(2, 51, 116, 0.20),
      rgba(1, 101, 241, 0.16),
      rgba(3, 148, 246, 0.14),
      rgba(3, 199, 227, 0.20)
    ),
    linear-gradient(
      135deg,
      #023374 0%,
      #0165f1 45%,
      #0394f6 75%,
      #03c7e3 100%
    );
  color: #fff;
  opacity: 0;
  transform: translateY(100%);
  transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    opacity .35s ease;
}
.insight-item:hover .insight-front{
  transform: translateY(-100%);
  opacity: 0;
}
.insight-item:hover .insight-back{
  transform: translateY(0);
  opacity: 1;
}
/* same soft corner blob as the What We Offer cards */
.insight-item::before{
  content: "";
  position: absolute;
  right: -34px;
  bottom: -46px;
  width: 48px;
  height: 48px;
  border-radius: 15px 15px 15px 6px;
  font-size: 14px;
  background: var(--card-blob);
  transition: transform .5s ease;
}

.insight-item .num, .insight-item p{ position: relative; z-index: 1; }
.insight-item .num{
  flex: none;
  width: 52px; height: 52px;
  border-radius: 16px 16px 16px 6px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display:flex; align-items:center; justify-content:center;
}
.insight-item p{ font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.82); font-weight: 500; }
.insight-item p strong{ color: #fff; font-weight: 700; font-size: 15px; }

/* ===== Why / Services (bento) ===== */
.why{ background: #fff; }
.why-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.why-card{
  grid-column: span 1;
  min-height: 220px;
  background: var(--card-lit);
  color: #fff;
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  padding: 28px 28px 46px;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* soft, organic blob tucked in the corner */
.why-card::before{
  content: "";
  position: absolute;
  right: -34px;
  bottom: -40px;
  width: 130px;
  height: 118px;
  border-radius: 58% 42% 55% 45% / 50% 55% 45% 50%;
  background: var(--card-blob);
  transition: transform .5s ease;
}
.why-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,0.16);
  box-shadow: var(--card-shadow-hover);
}
.why-card:hover::before{ transform: scale(1.25) rotate(12deg); }
.why-card::after{
  content: "";
  position: absolute;
  left: 28px;
  bottom: 20px;
  width: 34px;
  height: 3px;
  border-radius: 10px;
  background: linear-gradient(90deg, #7de3e3, #ffffff);
  transition: width .3s ease;
}
.why-card:hover::after{ width: 60px; }
.why-card .top-row{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 18px;
}
.why-card .idx{
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #8be9ef;
  background: rgba(139,233,239,0.14);
  padding: 4px 10px;
  border-radius: 999px;
}
/* icon chip: rounded "speech bubble" corner reads as friendly, not corporate */
.why-card .icon{
  width: 46px; height: 46px;
  border-radius: 16px 16px 16px 5px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  display:flex; align-items:center; justify-content:center;
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
  position:absolute;
  top:24px;
  right:24px;
}
.why-card .icon svg{ width: 22px; height: 22px; color: #fff; transition: transform .3s ease; }
.why-card:hover .icon{
  background: rgba(255,255,255,0.2);
  transform: translateY(-2px) rotate(-6deg) scale(1.06);
}
.why-card h3{ font-size: 19px; font-weight: 700; margin-bottom: 9px; color: #fff; position: relative; z-index: 1; }
.why-card p{ font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,0.82); position: relative; z-index: 1; }

/* Cards without an icon row (e.g. case-study industries): a hand-drawn-style marker stroke instead */
.why-card:not(.wide):not(:has(.top-row)){ min-height: 190px; }
.why-card:not(.wide):not(:has(.top-row)) h3::before{
  content: "";
  display: block;
  width: 30px;
  height: 5px;
  margin-bottom: 14px;
  border-radius: 6px 3px 6px 3px;
  background: #7de3e3;
  transform: rotate(-2deg);
  transition: width .3s ease;
}
.why-card:not(.wide):not(:has(.top-row)):hover h3::before{ width: 52px; }
.why-card:not(.wide):not(:has(.top-row))::after{ display: none; }

/* Closing card spans the full row */
.why-card.wide{ grid-column: span 2; display: block; }
.why-card.wide .idx{ display: inline-block; margin-bottom: 10px; }
@media (prefers-reduced-motion: reduce){
  .why-card, .why-card::before, .why-card .icon, .insight-item, .insight-item::before, .service-card{ transition: none; }
  .why-card:hover, .why-card:hover .icon, .why-card:hover::before, .insight-item:hover, .insight-item:hover::before, .service-card:hover{ transform: none; }
}
.services-tags{
  margin-top: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/*for case study bento card style*/
.case-study{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.case-study .why-card{
  min-height:220px;
  height:100%;
  box-sizing:border-box;
  border-radius:26px;
  padding:32px;
}
.case-study .why-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 20px 45px rgba(0,25,70,.28),
    0 0 0 1px rgba(255,255,255,.12);
}
.case-study .why-card:nth-child(1){
  grid-column:span 2;
  grid-row:span 2;
}
.case-study .why-card:nth-child(2){
  grid-column:span 1;
  grid-row:span 1;
}
.case-study .why-card:nth-child(3){
  grid-column:span 1;
  grid-row:span 1;
}
.case-study .why-card:nth-child(4){
  grid-column:span 2;
  grid-row:span 1;
}
.case-study .why-card:nth-child(5){
  grid-column:span 2;
  grid-row:span 1;
}
.case-study .why-card:nth-child(6){
  grid-column:span 1;
  grid-row:span 1;
}
.case-study .why-card:nth-child(7){
  grid-column:span 1;
  grid-row:span 1;
}
.case-study .why-card:nth-child(8){
  grid-column:span 4;
  grid-row:span 1;
}
@media (max-width:768px){
.case-study{
  grid-template-columns:1fr;
  gap:18px;
}
.case-study .why-card{
  grid-column:span 1 !important;
  grid-row:span 1 !important;
  min-height:220px;
}

}
.services-tags span{
  padding: 12px 20px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-700);
}

/* ===== Careers CTA ===== */
.careers{
  background: linear-gradient(135deg, var(--navy-900), var(--navy-800));
  border-radius: var(--radius-lg);
  margin: 0 32px;
  padding: 64px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
  max-width: calc(var(--container) - 0px);
  margin-left: auto; margin-right: auto;
}
.careers::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(600px 300px at 90% 0%, rgba(90,208,255,0.25), transparent 60%);
}
.careers > *{ position: relative; }
.careers h2{ color:#fff; font-size: clamp(24px, 3vw, 32px); max-width: 480px; }
.careers p{ color: #b7d2ee; margin-top: 12px; max-width: 460px; font-size: 15.5px; line-height: 1.6; }

/* ===== Contact ===== */
.contact .wrap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}
.contact-info h2{ font-size: clamp(28px,4vw,38px); }
.contact-info p{ margin-top: 16px; color: var(--ink-500); font-size: 16px; line-height: 1.7; max-width: 420px; }
.contact-list{ margin-top: 32px; display: flex; flex-direction: column; gap: 18px; }
.contact-list li{ display:flex; align-items:center; gap: 14px; font-size: 15px; color: var(--ink-700); font-weight: 500; }
.contact-list .ic{
  width: 40px; height:40px; border-radius: 10px;
  background: rgba(0,85,245,0.08);
  display:flex; align-items:center; justify-content:center;
  flex: none;
}
.contact-list .ic svg{ width:18px; height:18px; color: var(--blue-600); }
.social-row{ display:flex; gap: 10px; margin-top: 28px; }
.social-row a{
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  transition: background .2s ease, border-color .2s ease;
}
.social-row a:hover{ background: var(--ink-900); border-color: var(--ink-900); color:#fff; }
.social-row a svg{ width:18px; height:18px; }

.contact-form{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-sm);
}
.field{ margin-bottom: 18px; }
.field label{ display:block; font-size: 13px; font-weight: 600; color: var(--ink-700); margin-bottom: 8px; }
.field input, .field textarea, .field select{
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-page);
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink-900);
  resize: vertical;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field select{ cursor: pointer; }
.field input:focus, .field textarea:focus, .field select:focus{
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 4px rgba(0,85,245,0.12);
}
.contact-form .btn-primary{ width: 100%; margin-top: 4px; padding: 15px; }

/* ===== Internal page header ===== */
.page-headwhatweoffers{
  position: relative;
  overflow: hidden;
  height: 650px;
  box-sizing: border-box;
  background-image:
  linear-gradient(
      120deg,
      rgba(2, 51, 116, 0.20),
      rgba(1, 101, 241, 0.16),
      rgba(3, 148, 246, 0.14),
      rgba(3, 199, 227, 0.20)
    ),url("images/whatweoffers.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-headourleadership{
  position: relative;
  overflow: hidden;
  height: 650px;
  box-sizing: border-box;
  background-image:
  linear-gradient(
      120deg,
      rgba(2, 51, 116, 0.20),
      rgba(1, 101, 241, 0.16),
      rgba(3, 148, 246, 0.14),
      rgba(3, 199, 227, 0.20)
    ),url("images/ourledership.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-headcasestudy{
  position: relative;
  overflow: hidden;
  height: 650px;
  box-sizing: border-box;
  background-image:
  linear-gradient(
      120deg,
      rgba(2, 51, 116, 0.20),
      rgba(1, 101, 241, 0.16),
      rgba(3, 148, 246, 0.14),
      rgba(3, 199, 227, 0.20)
    ),url("images/casestudy.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-headinsights{
  position: relative;
  overflow: hidden;
  height: 650px;
  box-sizing: border-box;
  background-image:
  linear-gradient(
      120deg,
      rgba(2, 51, 116, 0.20),
      rgba(1, 101, 241, 0.16),
      rgba(3, 148, 246, 0.14),
      rgba(3, 199, 227, 0.20)
    ),url("images/insights.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-headcareers{
  position: relative;
  overflow: hidden;
  height: 650px;
  box-sizing: border-box;
  background-image:
  linear-gradient(
      120deg,
      rgba(2, 51, 116, 0.20),
      rgba(1, 101, 241, 0.16),
      rgba(3, 148, 246, 0.14),
      rgba(3, 199, 227, 0.20)
    ),url("images/careers.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-headcontact{
  position: relative;
  overflow: hidden;
  height: 650px;
  box-sizing: border-box;
  background-image:
  linear-gradient(
      120deg,
      rgba(2, 51, 116, 0.20),
      rgba(1, 101, 241, 0.16),
      rgba(3, 148, 246, 0.14),
      rgba(3, 199, 227, 0.20)
    ),url("images/contactus.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-headsap{
  position: relative;
  overflow: hidden;
  height: 650px;
  box-sizing: border-box;
  background-image:
  linear-gradient(
      120deg,
      rgba(2, 51, 116, 0.20),
      rgba(1, 101, 241, 0.16),
      rgba(3, 148, 246, 0.14),
      rgba(3, 199, 227, 0.20)
    ),url("images/sap.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-headjobapplication{
  position: relative;
  overflow: hidden;
  height: 650px;
  box-sizing: border-box;
  background-image:
  linear-gradient(
      120deg,
      rgba(2, 51, 116, 0.20),
      rgba(1, 101, 241, 0.16),
      rgba(3, 148, 246, 0.14),
      rgba(3, 199, 227, 0.20)
    ),url("images/jobapplication.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-headwhatweoffers .wrap,
.page-headourleadership .wrap,
.page-headcasestudy .wrap,
.page-headinsights .wrap,
.page-headcareers .wrap,
.page-headcontact .wrap,
.page-headsap .wrap,
.page-headjobapplication .wrap
{ display:flex; flex-direction: column; align-items: flex-start; justify-content: center;
  height: 100%; transform: translate(-50px,  -100px);}

.gl-canvas{
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
}
.gl-canvas.loaded{
  opacity: 1;
}
.page-headwhatweoffers h1,
.page-headourleadership h1,
.page-headcasestudy h1,
.page-headinsights h1,
.page-headcareers h1,
.page-headcontact h1,
.page-headsap h1,
.page-headjobapplication h1{
  font-size: clamp(38px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  margin: 10px 0 0;
   max-width: 650px;
  color: #ffffff;
  letter-spacing: -0.025em;
  text-shadow: 0 3px 12px rgba(7,11,26,0.35);
}
.page-headwhatweoffers p,
.page-headourleadership p,
.page-headcasestudy p,
.page-headinsights p,
.page-headcareers p,
.page-headcontact p,
.page-headsap p,
.page-headjobapplication p{
  max-width: 560px;
  margin: 16px 0 0;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255,255,255,0.92);
}
.breadcrumb{
  font-size: 13px;
  color: #073b66;
  margin-bottom: 6px;
  text-shadow: 0 2px 8px rgba(255,255,255,0.35);
}
.breadcrumb a{ color: #a5f3fc; font-weight: 600; }
.breadcrumb a:hover{ color: #ffffff; }

/* ===== Mobile View for Sub-Hero Pages ===== */
@media (max-width: 768px){
.page-headwhatweoffers,
.page-headourleadership,
.page-headcasestudy,
.page-headinsights,
.page-headcareers,
.page-headcontact,
.page-headsap,
.page-headjobapplication {
  position: relative;
  height: 150px ;
  min-height: 0 ;
  overflow: hidden;
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
}
.page-headwhatweoffers .wrap,
.page-headourleadership .wrap,
.page-headcasestudy .wrap,
.page-headinsights .wrap,
.page-headcareers .wrap,
.page-headcontact .wrap,
.page-headsap .wrap,
.page-headjobapplication .wrap{
  position: absolute;
  top:0;
  left:0;
  width: 80%;
  height: auto;
  box-sizing:border-box;
  padding: 12px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  transform: none;
}
.page-headwhatweoffers h1,
.page-headourleadership h1,
.page-headcasestudy h1,
.page-headinsights h1,
.page-headcareers h1,
.page-headcontact h1,
.page-headsap h1,
.page-headjobapplication h1{
font-size: clamp(15px, 4.2vw, 20px);
line-height: 1.08;
max-width: 68%;
margin: 3px 0 0 ;
}
.page-headwhatweoffers p,
.page-headourleadership p,
.page-headcasestudy p,
.page-headinsights p,
.page-headcareers p,
.page-headcontact p,
.page-headsap p,
.page-headjobapplication p{
  font-size: clamp(8px, 2.2vw, 10px);
  line-height: 1.25;
  max-width: 58%;
  margin: 4px 0 0; 
}
.breadcrumb{
  font-size: 12px;
  margin-bottom: 4px;
}
}

/* ===== Link-out / teaser CTA ===== */
.link-arrow{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 28px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--blue-600);
}
.link-arrow svg{ width: 16px; height: 16px; transition: transform .18s ease; }
.site-footer .link-arrow{ color: var(--teal-400); }
.link-arrow:hover svg{ transform: translateX(3px); }

.cta-inline{
  margin-top: 40px;
  padding: 28px 32px;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-inline p{ font-weight: 700; color: var(--ink-900); font-size: 16px; }

/* ===== Service directory (What We Offer catalog) ===== */
.service-group{ margin-top: 56px; }
.service-group h3{
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-400);
  margin-bottom: 20px;
}
.service-directory{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.service-card{
  position: relative;
  display: block;
  padding: 22px 46px 22px 22px;
  border-radius: 14px;
  grid-column: span 1;
  background: var(--card-lit);
  color: #fff;
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 3px solid #02d1da;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card::after{
  content: "→";
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 18px;
  color: #8be9ef;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .2s ease, transform .2s ease;
}
.service-card:hover{ transform: translateY(-5px);  
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.16);
  border-top-color: #02d1da;
  box-shadow: var(--card-shadow-hover); }
.service-card:hover::after{ opacity: 1; transform: translateX(0); }
.service-card h4{ font-size: 15.5px; font-weight: 700; color: #fff; }
.service-card span{ display:block; margin-top: 8px; font-size: 13.5px; color: rgba(255,255,255,0.82); line-height: 1.5; }

/* ===== Service detail page ===== */
.service-body{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  align-items: start;
}
.service-body .lede{ font-size: 17px; line-height: 1.75; color: var(--ink-700); }
.service-includes{ margin-top: 32px; }
.service-includes h3{ font-size: 15px; font-weight: 700; color: var(--ink-900); margin-bottom: 16px; }
.service-includes ul{ display:flex; flex-direction: column; gap: 14px; }
.service-includes li{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--ink-700);
  line-height: 1.6;
}
.service-includes li svg{ flex:none; width: 20px; height: 20px; color: var(--teal-500); margin-top: 2px; }

.related-box{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px;
}
.related-box h4{ font-size: 13px; text-transform: uppercase; letter-spacing:.06em; color: var(--ink-400); margin-bottom: 16px; }
.related-box ul{ display:flex; flex-direction:column; gap: 4px; }
.related-box a{
  display:block;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-700);
  transition: background .15s ease, color .15s ease;
}
.related-box a:hover{ background: var(--bg-page); color: var(--blue-600); }
.related-box a.active{ background: rgba(0,85,245,0.08); color: var(--blue-600); }

/* ===== Footer ===== */
.site-footer{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(700px 420px at 12% 0%, rgba(1,190,215,0.14), transparent 65%),
    radial-gradient(640px 420px at 92% 100%, rgba(0,85,245,0.16), transparent 65%),
    linear-gradient(180deg, var(--navy-950), #000f26);
  color: #b7d2ee;
  padding: 84px 0 28px;
  margin-top: 112px;
}
.footer-top{
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: 32px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand .brand{ color: #fff; font-size: 20px; }
.footer-brand .mark{
  background: linear-gradient(135deg, var(--blue-500), var(--teal-500));
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 20px rgba(1,190,215,0.22);
}
.footer-brand p{ margin-top: 18px; font-size: 14px; line-height: 1.75; color: #ffffff; max-width: 270px; }
.footer-social{ display: flex; gap: 10px; margin-top: 22px; }
.footer-social a{
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  color:#ffffff ;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.footer-social a svg{ width: 16px; height: 16px; }
.footer-social a:hover{
  background: linear-gradient(135deg, var(--blue-500), var(--teal-500));
  border-color: transparent;
  color: #b9c3ec;
  transform: translateY(-2px);
}
.footer-col h4{
  position: relative;
  display: inline-block;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 22px;
  padding-bottom: 12px;
}
.footer-col h4::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 22px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal-500), var(--blue-500));
}
.footer-col ul{ display:flex; flex-direction:column; gap: 13px; }
.footer-col a{
  display: inline-block;
  font-size: 14.5px;
  color: #ffffff;
  transition: color .18s ease, transform .18s ease;
}
.footer-col a:hover{ color: #b9c3ec; transform: translateX(3px); }
.footer-bottom{
  padding-top: 26px;
  display:flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: #fff;
}
.footer-bottom a{ transition: color .18s ease; }
.footer-bottom a:hover{ color: #fff; }


/* ===== Careers job board ===== */
.job-filters{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.job-search{
  position: relative;
  flex: 1 1 260px;
  max-width: 340px;
}
.job-search svg{
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px;
  color: var(--ink-400);
}
.job-search input{
  width: 100%;
  padding: 12px 16px 12px 42px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink-900);
}
.job-search input:focus{
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 4px rgba(0,85,245,0.12);
}
.job-locations{ display: flex; flex-wrap: wrap; gap: 10px; }
.filter-pill{
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-700);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.filter-pill:hover{ border-color: var(--blue-500); color: var(--blue-600); }
.filter-pill.active{
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}
.job-count{
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-400);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 16px;
}
.job-count span{ color: var(--ink-900); }
.job-list{ display: flex; flex-direction: column; gap: 12px; }
/* author display rules (.job-row{display:flex}) would otherwise beat the UA [hidden] rule */
.job-row[hidden], .job-empty[hidden]{ display: none; }
.job-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: transform .18s ease, box-shadow .18s ease;
}
.job-row:hover{ transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.job-row h3{ font-size: 16.5px; font-weight: 700; }
.job-meta{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.job-tag{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bg-page);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-500);
}
.job-tag.loc{ color: var(--blue-600); background: rgba(0,85,245,0.08); }
.job-tag svg{ width: 13px; height: 13px; }
.job-row .btn{ flex: none; }
.job-empty{
  padding: 32px;
  text-align: center;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px dashed var(--border);
  color: var(--ink-500);
  font-size: 14.5px;
}
.job-empty a{ color: var(--blue-600); font-weight: 700; }

/* ===== Reveal animation ===== */
.reveal{ opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity: 1; transform: translateY(0); }

/* ===== Responsive ===== */
@media (max-width: 980px){
  .hero .wrap{ grid-template-columns: 1fr; }
  .hero-visual{ height: 380px; }
  .about .wrap{ grid-template-columns: 1fr; }
  .about-visual{ aspect-ratio: 16/9; }
  .stat-row{ grid-template-columns: repeat(2,1fr); }
  .insight-grid{ grid-template-columns: 1fr; }
  .why-grid{ grid-template-columns: repeat(2,1fr); }
  .why-card{ grid-column: span 2; }
  .why-card.wide{ grid-column: span 2; flex-direction: column; text-align:center; }
  .contact .wrap{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: repeat(2, 1fr); }
  .service-directory{ grid-template-columns: repeat(2, 1fr); }
  .service-body{ grid-template-columns: 1fr; }
  .job-filters{ flex-direction: column; align-items: stretch; }
  .job-search{ max-width: none; }
}
@media (max-width: 860px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
}
@media (max-width: 720px){
  .wrap{ padding: 0 20px; }
  .section{ padding: 76px 0; }
  .clients .wrap{ flex-direction: column; align-items: flex-start; gap: 14px; }
  .marquee{ width: 100%; }
  .why-grid{ grid-template-columns: 1fr; }
  .why-card{ grid-column: span 1; }
  .why-card.wide{ grid-column: span 1; }
  .careers{ margin: 0 20px; padding: 40px 28px; }
  .footer-top{ grid-template-columns: 1fr; }
  .stat-row{ grid-template-columns: 1fr 1fr; }
  .service-directory{ grid-template-columns: 1fr; }
  .cta-inline{ flex-direction: column; align-items: flex-start; }
  .job-row{ flex-direction: column; align-items: flex-start; }
  .job-row .btn{ width: 100%; text-align: center; }
}
/*=====job application page=====*/
.job-application-section{
  padding: 90px 0;
  background: #f6f9fd;
}
.job-layout{
  display:grid;
  grid-template-columns:1fr 0.85fr;
  gap:45px;
  align-items:start;
}
.job-info{
  background:#ffffff;
  border-radius:24px;
  padding:40px;
  box-shadow:0 15px 40px rgba(0,40,90,0.08);
}
.job-info h2{
  font-size:34px;
  line-height:1.2;
  margin-bottom:18px;
  color:#023374;
}
.job-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:30px;
}
.job-meta span{
  padding: 8px 14px;
  border-radius: 30px;
  background: #edf5ff;
  color:#0355b8;
  font-size:13px;
  font-weight:600;
}
.job-info h3{
  margin-top: 28px;
  margin-bottom: 10px;
  font-size:20px;
  color:#172033;
}
.job-info p{
  color:#596579;
  margin-bottom:14px;
}
.job-info ul{
  padding-left: 20px;
  color:#596579;
}
.job-info li{
  margin-bottom: 9px;
}

/* ===== Job application form ===== */
.application-form{
  background: #ffffff;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 15px 40px rgba(0,40,90,0.08);
}
.application-form h2{
  font-size: 30px;
  color: #023374;
  margin-bottom: 8px;
}
.application-form > p{
  color: #6b7485;
  font-size: 14px;
  margin-bottom: 28px;
}
.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group{
  margin-bottom: 18px;
}
.form-group label{
  display:block;
  margin-bottom:7px;
  font-size:13px;
  font-weight:600;
  color:#263247;
 }
.form-group input, .form-group select, .form-group textarea {
  width:100%;
  padding:13px 14px;
  border:1px solid #dbe2ec;
  border-radius:10px;
  background:#ffffff;
  font-family:inherit;
  font-size:14px;
  outline:none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{
  border-color: #0165f1;
  box-shadow: 0 0 0 3px rgba(1,101,241,0.08);
}
.form-group textarea{
  min-height: 130px;
  resize: vertical;
}
.resume-box{
  padding: 0;
  border: 1px dashed #b9c8dc;
  border-radius: 12px;
  background: #f8fbff;
}
.resume-upload input{
  border: none;
  padding: 0;
  background: transparent;
}
.form-submit{
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(120deg, #023374, #0165f1, #0394f6, #03c7e3);
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
/* mobile application page */
@media (max-width: 900px){
  .job-layout{
    grid-template-columns:1fr;
  }
}
@media (max-width: 600px){
  .job-application-section{
    padding:55px 0;
  }
  .job-info, .application-form{
    padding:28px 22px;
    border-radius: 18px;
  }
  .job-info h2{
    font-size: 28px;
  }
  .application-form h2{
    font-size: 26px;
  }
  .form-row{
    grid-template-columns: 1fr;
  }
}
/* ===== Back to top button ===== */
.back-to-top{
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, color .2s ease;
  filter: drop-shadow(0 3px 8px rgba(0,40,90,0.18));
  z-index: 40;
}
.back-to-top.visible{ opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover{ color: var(--teal-500); transform: translateY(-4px); }
.back-to-top svg{ width: 32px; height: 32px; }
.back-to-top svg path:first-child{ opacity: .55; }
@media (max-width: 720px){
  .back-to-top{ right: 16px; bottom: 16px; }
}