/* =========================================================
   Open Technologies — Option B (Enterprise Light + Navy Brand)
   ✅ Light pages with clean “Avrem-like” rhythm
   ✅ Dark navy hero bands + dark footer
   ✅ Electric blue as accent only
   ✅ Flat cards + minimal glass
   ✅ Keeps legacy class names working
   ✅ Flat mega-menu panel (mega-menu.js uses .is-open on .has-mega)
========================================================= */

/* =========================
   TOKENS (Light system)
========================= */
:root{
  /* Brand anchors */
  --navy: #0B1220;
  --navy2:#070B14;
  --accent: #3B82F6;
  --accentDark: #2563EB;
  --accentRGB: 59,130,246;

  /* Light page surfaces */
  --bg: #F6F7FA;
  --bg2:#FFFFFF;
  --bg3:#EEF1F6;
  --text: #0B1220;
  --muted: rgba(11,18,32,.72);
  --faint: rgba(11,18,32,.55);

  /* Cards / borders / shadows */
  --surface: #FFFFFF;
  --surface2:#F9FAFC;
  --border: rgba(11,18,32,.12);
  --border2: rgba(11,18,32,.18);
  --shadow: 0 18px 50px rgba(11,18,32,.08);
  --shadow2: 0 10px 26px rgba(11,18,32,.08);

  --radius: 16px;
  --radius2: 20px;

  --max: 1120px;
  --pad: 18px;

  --h1: clamp(2.15rem, 5.4vw, 3.35rem);
  --h2: clamp(1.55rem, 3.6vw, 2.35rem);
  --h3: 1.125rem;
  --p: 1.03rem;

  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  /* Spacing */
  --s1: 10px;
  --s2: 14px;
  --s3: 18px;
  --s4: 24px;
  --s5: 34px;
  --s6: 48px;
  --s7: 68px;

  /* Dark hero band */
  --heroBg:
    radial-gradient(1200px 650px at 14% 10%, rgba(var(--accentRGB), .26), transparent 55%),
    radial-gradient(900px 500px at 90% 25%, rgba(34,211,238,.12), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy2) 100%);
  --onHero: rgba(255,255,255,.94);
  --onHeroMuted: rgba(255,255,255,.80);

  /* Footer */
  --footerBg: var(--navy);
  --footerBorder: rgba(255,255,255,.12);
  --footerText: rgba(255,255,255,.90);
  --footerMuted: rgba(255,255,255,.66);
}

/* =========================
   BASE
========================= */
*{ box-sizing:border-box; }
html, body{ height:100%; }
html{ scroll-behavior:smooth; }

/* ✅ Critical: prevent horizontal overflow jitter (iOS/Chrome) */
html, body{
  max-width: 100%;
  overflow-x: clip;
}
@supports not (overflow: clip){
  html, body{ overflow-x: hidden; }
}

body{
  margin:0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{ color: inherit; text-decoration:none; }
img, video, svg{ max-width:100%; display:block; }
button{ font-family: inherit; }

.container{
  width:100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* A11y */
.skip-link{
  position:absolute;
  left:-999px;
  top: 10px;
  background:#111827;
  color:#fff;
  padding:10px 14px;
  border-radius: 12px;
  z-index:9999;
}
.skip-link:focus{ left: 14px; }

.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip: rect(0,0,0,0);
  border:0;
}

/* =========================
   TYPOGRAPHY
========================= */
h1{
  font-size: var(--h1);
  line-height: 1.06;
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}
h2{
  font-size: var(--h2);
  line-height: 1.12;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
h3{
  font-size: var(--h3);
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}
p{
  font-size: var(--p);
  color: var(--muted);
  margin: 0 0 14px;
  line-height: 1.75;
}

/* =========================
   NAV (Light header + flat feel)
========================= */
.nav{
  position: sticky;
  top:0;
  z-index: 100;
  background: rgba(246,247,250,.86);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(1.1);
  -webkit-backdrop-filter: saturate(1.1);
}
.nav-inner{
  height: 74px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 18px;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 220px;
}
.brand-icon{
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
}
.brand-text{
  display:flex;
  flex-direction: column;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: .2px;
}
.brand small{
  font-weight: 650;
  color: var(--faint);
  font-size: .8rem;
  margin-top: 3px;
}

/* Desktop nav */
.nav-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  flex: 1;
}
.nav-links > a,
.nav-links > .nav-item > a{
  color: rgba(11,18,32,.80);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 800;
  transition: 160ms ease;
}
.nav-links > a:hover,
.nav-links > .nav-item > a:hover{
  background: rgba(11,18,32,.05);
}
.nav-links > a[aria-current="page"],
.nav-links > .nav-item > a[aria-current="page"]{
  background: rgba(11,18,32,.06);
  box-shadow: inset 0 0 0 1px rgba(11,18,32,.08);
}
.nav-drop .chev{
  margin-left: 6px;
  opacity: .55;
  font-size: .9em;
}

/* Burger */
.burger{
  display:none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  cursor:pointer;
}
.burger span{
  display:block;
  width: 22px;
  height: 2px;
  background: rgba(11,18,32,.92);
  margin: 5px auto;
  border-radius: 2px;
}

/* Mobile drawer */
.mobile-drawer{
  display:none;
  padding: 10px 0 14px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
}
.mobile-drawer.is-open{ display:block; }
.mobile-drawer a{
  display:block;
  padding: 14px 16px;
  border-radius: 14px;
  color: rgba(11,18,32,.88);
  font-weight: 850;
}
.mobile-drawer a:hover{ background: rgba(11,18,32,.05); }

/* =========================
   BUTTONS
========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: rgba(11,18,32,.90);
  font-weight: 850;
  cursor:pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(11,18,32,.06);
  position: relative;
  overflow:hidden;
  will-change: transform;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(11,18,32,.10);
  border-color: rgba(11,18,32,.18);
}
.btn::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.55) 35%, transparent 70%);
  opacity: 0;
  transition: 180ms ease;
  pointer-events:none;
}
.btn:hover::after{ opacity: .45; }

.btn.primary{
  background: linear-gradient(180deg, rgba(var(--accentRGB), .98), rgba(var(--accentRGB), .86));
  border-color: rgba(var(--accentRGB), .55);
  color: #fff;
  box-shadow: 0 14px 34px rgba(37,99,235,.18);
}
.btn.primary:hover{
  background: linear-gradient(180deg, rgba(37,99,235,.98), rgba(37,99,235,.86));
  border-color: rgba(37,99,235,.65);
  box-shadow: 0 18px 44px rgba(37,99,235,.22);
}
.btn.ghost{
  background: transparent;
  border-color: rgba(11,18,32,.14);
}
.btn.ghost:hover{ background: rgba(11,18,32,.05); }

/* =========================
   HERO (Dark band)
========================= */
.hero{
  position: relative;
  padding: var(--s7) 0 var(--s6);
  background: var(--heroBg);
  color: var(--onHero);
  overflow: hidden; /* ✅ keep stable by default */
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.06) 35%, rgba(255,255,255,.0) 60%),
    linear-gradient(135deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.22) 70%);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: url("../img/hero-bg.png") center/cover no-repeat;
  opacity: .08;
  mix-blend-mode: overlay;
  pointer-events:none;
}
.hero .container,
.hero .hero-grid{ position: relative; z-index: 1; }

.hero-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}
.hero h1{ color: var(--onHero); max-width: 20ch; }
.hero p{ color: var(--onHeroMuted); max-width: 64ch; }

.hero-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.hero-note{ margin-top: 14px; color: rgba(255,255,255,.74); }

/* Legacy badge off by default (re-enabled on services only) */
.badge{ display:none !important; }

/* Hero art badge (used on homepage) */
.hero .hero-art{
  position: relative;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: .92;
  margin-top: 10px;
}
.hero .hero-badge{
  width: min(320px, 86vw);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  position: relative;
  background:
    radial-gradient(140px 140px at 28% 22%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(220px 200px at 70% 78%, rgba(0,0,0,.55), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
  animation: floatBadge 6s ease-in-out infinite;
  will-change: transform;
}
.hero .hero-badge::before{
  content:"";
  position:absolute;
  inset: 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(var(--accentRGB), .45);
  box-shadow: 0 0 0 6px rgba(var(--accentRGB), .10), 0 0 60px rgba(var(--accentRGB), .18);
  pointer-events:none;
}
.hero .hero-badge::after{
  content:"";
  position:absolute;
  inset: 38px;
  border-radius: 999px;
  background:
    radial-gradient(180px 160px at 35% 30%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(260px 240px at 70% 82%, rgba(0,0,0,.50), transparent 62%),
    rgba(11,18,32,.55);
  border: 1px solid rgba(255,255,255,.10);
  pointer-events:none;
}
.hero .hero-badge svg{
  position:absolute;
  inset: 0;
  margin:auto;
  width: 78px;
  height: 78px;
  color: rgba(255,255,255,.76);
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.45));
}

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

/* ✅ Desktop: keep badge inside viewport (no negative right, no overflow visible) */
@media (min-width: 980px){
  .hero{
    overflow: clip; /* important: prevents right-side whitespace/shake */
    padding-bottom: 120px;
    min-height: 680px;
  }
  .hero .hero-grid{ align-items: center; padding-right: 260px; }
  .hero .hero-art{
    position: absolute;
    right: 0; /* was -40px -> caused overflow */
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
    opacity: .82;
  }
  .hero .hero-badge{ width: clamp(300px, 30vw, 440px); }
}
@media (max-width: 720px){
  .hero{ padding: 48px 0 42px; overflow: hidden; }
}

/* =========================
   SECTIONS (Light rhythm)
========================= */
.section{
  padding: var(--s7) 0;
  background: transparent;
}
.section:nth-of-type(even){ background: var(--bg3); }
.section:nth-of-type(odd){ background: transparent; }

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: var(--s5);
}
.section-head p{ margin: 0; max-width: 70ch; }

/* =========================
   GRID + GLOBAL CARDS
========================= */
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.card,
.panel,
.cta,
.svc-card,
.eng-card,
.phase-card,
.risk-card,
.expect-card,
.next-card,
.about-card,
.audience,
.principle,
.testimonial-card,
.career-card,
.step-card,
.contact-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius2);
  box-shadow: var(--shadow2);
}

.card{ padding: 22px; }
.panel{ padding: 18px; background: var(--surface2); }

.cta{
  padding: 26px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  background: var(--surface);
}

/* Hover polish (won’t cause overflow) */
.card:hover,
.svc-card:hover,
.eng-card:hover,
.phase-card:hover,
.risk-card:hover,
.expect-card:hover,
.next-card:hover,
.about-card:hover,
.audience:hover,
.principle:hover,
.testimonial-card:hover,
.career-card:hover,
.step-card:hover,
.contact-card:hover{
  border-color: rgba(var(--accentRGB), .22);
  box-shadow: 0 18px 60px rgba(11,18,32,.10);
  transform: translateY(-2px);
  transition: 180ms ease;
  will-change: transform;
}

.list{
  margin: 12px 0 0;
  padding-left: 18px;
  color: var(--muted);
}
.list li{ margin: 8px 0; }

/* legacy image header */
.card-image{
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid var(--border);
  background: var(--surface2);
}
.card-image img{
  width:100%;
  height:100%;
  object-fit: cover;
}

/* =========================================================
   HOMEPAGE — CORE SERVICES
========================================================= */
.core-head{
  text-align: center;
  max-width: 860px;
  margin: 0 auto var(--s5);
}
.core-head p{ margin: 0 auto; max-width: 72ch; }

.core-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.core-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow2);
  transform: translateY(0);
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
  height: 100%;
}
.core-card:hover{
  transform: translateY(-6px);
  border-color: rgba(var(--accentRGB), .28);
  box-shadow: 0 26px 80px rgba(11,18,32,.12);
}
.core-media{
  width: 100%;
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.core-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.03) contrast(1.03);
  transform: scale(1);
  transition: transform .35s ease;
}
.core-card:hover .core-media img{ transform: scale(1.05); }

.core-body{ padding: 18px 18px 22px; }
.core-body h3{ margin: 0 0 8px; font-size: 1.20rem; color: rgba(11,18,32,.94); }
.core-body p{ margin: 0; color: var(--muted); font-size: 1.01rem; }

/* =========================
   ICON CHIPS (Why / How / Services)
========================= */
.why-icon,
.svc-icon,
.risk-icon,
.expect-icon,
.phase-num,
.how-ibox,
.icon-chip{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(var(--accentRGB), .10);
  border: 1px solid rgba(var(--accentRGB), .18);
  color: rgba(11,18,32,.92);
}
.why-icon svg,
.svc-icon svg,
.risk-icon svg,
.expect-icon svg,
.how-ibox svg,
.icon-chip svg{ width: 22px; height: 22px; }

/* =========================
   WHY (flat cards)
========================= */
.why-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.why-card{ padding: 24px; position: relative; overflow:hidden; }
.why-icon{ margin-bottom: 14px; }
.why-card h3{ margin: 0 0 8px; font-size: 1.18rem; color: rgba(11,18,32,.94); }
.why-card p{ margin: 0; color: var(--muted); font-size: 1.01rem; }

/* =========================
   SERVICES PAGE
========================= */

/* Re-enable services hero badge */
.page-services .badge{
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  font-weight: 850;
  font-size: .95rem;
}
.page-services .badge .dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(var(--accentRGB), .95);
  box-shadow: 0 0 0 6px rgba(var(--accentRGB), .18);
}

/* Services hero: 2-col on desktop */
.page-services .hero-grid{
  grid-template-columns: 1.1fr .9fr;
  gap: 26px;
  align-items: center;
}

/* Service detail: Avrem-style 2-col */
.svc-detail{
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: center;
}
.svc-detail-copy h2{ color: rgba(11,18,32,.96); }
.svc-detail-copy p{ max-width: 70ch; color: rgba(11,18,32,.70); }

.svc-media-frame{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(11,18,32,.12);
  background: #fff;
  box-shadow: 0 18px 50px rgba(11,18,32,.10);
}
.svc-media-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 11;
  filter: saturate(1.05) contrast(1.02);
}

/* ✅ SINGLE SOURCE OF TRUTH: svc-links */
.svc-links{
  margin-top: 14px;
  display: grid;
  gap: 12px;
  max-width: 560px;
}
.svc-links a{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 14px;
  border-radius: 18px;
  font-weight: 900;
  color: rgba(11,18,32,.92);
  background: #fff;
  border: 1px solid rgba(11,18,32,.12);
  box-shadow: 0 14px 34px rgba(11,18,32,.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  will-change: transform;
}
.svc-links a:hover{
  transform: translateY(-2px);
  border-color: rgba(var(--accentRGB), .28);
  box-shadow: 0 18px 46px rgba(11,18,32,.10);
  background: linear-gradient(180deg, #ffffff, rgba(var(--accentRGB), .04));
}
.svc-links a:active{ transform: translateY(0px) scale(.995); }

.svc-links a .left{ display:flex; align-items:center; gap: 12px; min-width: 0; }
.svc-links a .label{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.01em;
  font-size: 1.05rem;
}
.svc-links a .mini{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  flex: 0 0 auto;
  border: 1px solid rgba(var(--accentRGB), .18);
  background: rgba(var(--accentRGB), .12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
}
.svc-links a .mini svg{ width: 22px; height: 22px; }
.svc-links a .arrow{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  flex: 0 0 auto;
  background: rgba(var(--accentRGB), .10);
  border: 1px solid rgba(var(--accentRGB), .16);
  transition: transform .18s ease, background .18s ease;
}
.svc-links a:hover .arrow{
  transform: translateX(2px);
  background: rgba(var(--accentRGB), .16);
}
.svc-links a .arrow svg{ width: 20px; height: 20px; }

/* Category tints (optional ids on parent sections/cards) */
#svc-cyber .svc-links a .mini{ background: rgba(59,130,246,.14); border-color: rgba(59,130,246,.22); }
#svc-forensics .svc-links a .mini{ background: rgba(34,211,238,.14); border-color: rgba(34,211,238,.22); }
#svc-engineering .svc-links a .mini{ background: rgba(168,85,247,.14); border-color: rgba(168,85,247,.22); }
#svc-ai .svc-links a .mini{ background: rgba(34,197,94,.14); border-color: rgba(34,197,94,.22); }

/* Bullets block */
.svc-bullets{
  margin-top: 16px;
  display: grid;
  gap: 12px;
}
.svc-bullet{
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 10px 22px rgba(11,18,32,.06);
}
.svc-bullet strong{
  display: block;
  color: rgba(11,18,32,.92);
  font-weight: 950;
  margin-bottom: 4px;
}
.svc-bullet span{
  display: block;
  color: rgba(11,18,32,.72);
  line-height: 1.6;
  font-size: .99rem;
}





/* =========================
   HOW WE WORK — Light readability (scoped)
========================= */
.page-how .how-phases,
.page-how .how-risk,
.page-how .how-expect{
  background:
    radial-gradient(900px 420px at 18% 12%, rgba(59,130,246,.08), transparent 60%),
    radial-gradient(760px 380px at 84% 18%, rgba(34,211,238,.06), transparent 55%),
    #F6F8FC;
}
.page-how .how-phases .section-head p,
.page-how .how-risk .section-head p,
.page-how .how-expect .section-head p{
  color: rgba(11,18,32,.70);
}
.page-how .how-phases h2,
.page-how .how-risk h2,
.page-how .how-expect h2{
  color: rgba(11,18,32,.92);
}
.page-how .phase-card,
.page-how .risk-card,
.page-how .expect-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,18,32,.08);
  box-shadow: 0 20px 55px rgba(11,18,32,.12);
}
.page-how .phase-card h3,
.page-how .risk-card h3,
.page-how .expect-card h3{ color: rgba(11,18,32,.92); }
.page-how .phase-card p,
.page-how .risk-card p,
.page-how .expect-card p{ color: rgba(11,18,32,.70); }
.page-how .phase-list,
.page-how .risk-list{ color: rgba(11,18,32,.72); }
.page-how .phase-list li,
.page-how .risk-list li{ margin: 7px 0; }
.page-how .phase-list li::marker,
.page-how .risk-list li::marker{ color: rgba(59,130,246,.85); }
.page-how .phase-num{
  color: rgba(11,18,32,.85);
  border: 1px solid rgba(59,130,246,.22);
  background: rgba(59,130,246,.10);
}
.page-how .risk-icon,
.page-how .expect-icon{
  border: 1px solid rgba(11,18,32,.08);
  background:
    radial-gradient(18px 18px at 30% 25%, rgba(59,130,246,.22), transparent 60%),
    radial-gradient(20px 20px at 75% 75%, rgba(34,211,238,.18), transparent 65%),
    rgba(11,18,32,.02);
  color: rgba(11,18,32,.78);
  box-shadow: 0 14px 30px rgba(11,18,32,.10);
}
@media (prefers-reduced-motion: reduce){
  .page-how .phase-card:hover,
  .page-how .risk-card:hover,
  .page-how .expect-card:hover{ transform: none; }
}

/* =========================
   ABOUT (compat)
========================= */
.page-about .tag{ display:none !important; }
.about-hero{ padding: 72px 0 64px; }
.about-hero-grid{ display:grid; grid-template-columns: 1.25fr .95fr; gap: 28px; align-items: start; }
.page-about .eyebrow{
  margin: 0 0 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
  color: rgba(11,18,32,.78);
}
.page-about .lead{
  font-size: 1.10rem;
  line-height: 1.8;
  color: rgba(11,18,32,.78);
  max-width: 64ch;
}
.about-hero-actions{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.about-proof{ margin-top: 18px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.proof-item{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 14px;
}
.proof-item strong{ display:block; color: rgba(11,18,32,.92); font-weight: 950; margin-bottom: 4px; }
.proof-item span{ display:block; color: rgba(11,18,32,.70); font-size: .98rem; line-height: 1.45; }
.about-hero-card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 22px;
}
.about-hero-card-head{
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.mini-title{ margin: 0 0 6px; font-size: 1.05rem; font-weight: 950; color: rgba(11,18,32,.92); }
.mini-sub{ margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.55; }
.about-metrics{ display:grid; gap: 12px; }
.metric{
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 14px;
}
.metric-k{ display:block; font-weight: 950; color: rgba(11,18,32,.92); margin-bottom: 3px; }
.metric-v{ display:block; color: var(--muted); line-height: 1.55; font-size: .98rem; }
.about-hero-note{ margin-top: 14px; color: var(--muted); font-size: .98rem; line-height: 1.6; }
.about-approach-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.about-card{ padding: 24px; }
.about-bullets{ margin: 0; padding-left: 18px; color: var(--muted); }
.about-bullets li{ margin: 8px 0; }
.about-audience-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.audience{ padding: 22px; }
.audience-top{ display:flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.audience-num{ font-weight: 950; color: rgba(11,18,32,.35); letter-spacing: .06em; }
.audience p{ margin: 0; }
.about-principles{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.principle{ padding: 22px; }
.principle p{ margin: 0; }

/* =========================
   CONTACT (clean, readable)
========================= */
.page-contact{
  background: var(--bg);
  color: var(--text);
}
.page-contact main{
  background:
    radial-gradient(900px 520px at 15% 8%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(820px 520px at 88% 16%, rgba(34,211,238,.08), transparent 55%),
    var(--bg);
}
body.page-contact .contact-main{ background: #F3F5F9 !important; }
body.page-contact .contact-card,
body.page-contact .contact-details{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(11,18,32,.10) !important;
  box-shadow: 0 18px 60px rgba(11,18,32,.12) !important;
  color: rgba(11,18,32,.92) !important;
}
body.page-contact .contact-card-title,
body.page-contact .contact-details h3{ color: rgba(11,18,32,.92) !important; }
body.page-contact .contact-card-sub,
body.page-contact .contact-details div,
body.page-contact .section-head p{ color: rgba(11,18,32,.66) !important; }
body.page-contact .field label{ color: rgba(11,18,32,.84) !important; }
body.page-contact .field input,
body.page-contact .field textarea{
  background: rgba(11,18,32,.04) !important;
  border: 1px solid rgba(11,18,32,.14) !important;
  color: rgba(11,18,32,.92) !important;
}
body.page-contact .field input::placeholder,
body.page-contact .field textarea::placeholder{ color: rgba(11,18,32,.45) !important; }
body.page-contact .field input:focus,
body.page-contact .field textarea:focus{
  border-color: rgba(59,130,246,.55) !important;
  box-shadow: 0 0 0 6px rgba(59,130,246,.14) !important;
}
body.page-contact .field-hint,
body.page-contact .contact-actions .helper{ color: rgba(11,18,32,.55) !important; }
body.page-contact .contact-item a,
body.page-contact .contact-item span{
  background: rgba(11,18,32,.03) !important;
  border: 1px solid rgba(11,18,32,.10) !important;
  color: rgba(11,18,32,.92) !important;
}
body.page-contact .ci-ico{
  background: rgba(59,130,246,.10) !important;
  border: 1px solid rgba(59,130,246,.20) !important;
  color: rgba(11,18,32,.85) !important;
}
body.page-contact .ci-sub{ color: rgba(11,18,32,.55) !important; }

/* =========================
   STORY / TESTIMONIALS / CAREERS (compat)
========================= */
.story-steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step-card{ padding: 18px; border-radius: var(--radius); }
.step-num{
  display:inline-flex;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: rgba(11,18,32,.92);
  border: 1px solid var(--border);
  background: var(--surface2);
  margin-bottom: 10px;
}
.testimonial-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.testimonial-card{ padding: 20px; border-radius: var(--radius); }
.testimonial-quote{ font-size: 18px; line-height: 1.6; color: var(--muted); margin-bottom: 16px; }
.testimonial-meta strong{ display:block; color: rgba(11,18,32,.92); }
.testimonial-meta span{ font-size: 14px; color: var(--faint); }
.careers-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.career-card{ padding: 20px; border-radius: var(--radius); }
.career-meta{ margin: 6px 0 12px; color: var(--faint); font-weight: 750; font-size: 14px; }

/* =========================
   FOOTER (dark) — consistent + clean responsive
========================= */
.footer{
  background: var(--footerBg);
  border-top: 1px solid var(--footerBorder);
  padding-top: 48px;
  color: var(--footerText);
}
.footer-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 34px;
  padding-bottom: 36px;
  align-items: start;
}
.footer-col.footer-brand{ min-width: 240px; }
@media (min-width: 980px){
  .footer-col.footer-brand{ grid-column: span 2; }
}
.footer-title{
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 800;
  color: var(--footerText);
}
.footer-logo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--footerText);
  font-weight: 900;
  margin-bottom: 12px;
}
.footer-logo img{
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
.footer-desc{
  margin: 0 0 14px;
  color: var(--footerMuted);
  line-height: 1.55;
  max-width: 40ch;
}
.footer-social{ display: flex; flex-wrap: wrap; gap: 12px; }
.footer-social a{ color: var(--footerMuted); font-size: 14px; transition: color .2s ease; }
.footer-social a:hover{ color: var(--accent); }
.footer-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.footer-list a{
  color: var(--footerMuted);
  transition: transform .2s ease, color .2s ease;
  display: inline-block;
}
.footer-list a:hover{ color: var(--accent); transform: translateX(3px); }
.footer-muted{ color: var(--footerMuted); }
.avrem-links a{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255,255,255,.30);
}
.avrem-links a:hover{ text-decoration-color: rgba(var(--accentRGB), .90); }
.footer-bottom{
  border-top: 1px solid var(--footerBorder);
  padding: 18px 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-bottom small{ color: var(--footerMuted); }
.footer-bottom-links{ display: flex; gap: 16px; flex-wrap: wrap; }
.footer-bottom-links a{ color: var(--footerMuted); transition: color .2s ease; }
.footer-bottom-links a:hover{ color: var(--accent); }
@media (max-width: 820px){
  .footer-bottom{
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align:center;
    gap: 10px;
  }
  .footer-bottom-links{ justify-content: center; gap: 12px; }
}

/* =========================
   REVEAL
========================= */
.reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: 520ms ease;
}
.reveal.show{
  opacity: 1;
  transform: translateY(0px);
}

/* =========================
   MEGA MENU (Flat panel) ✅
========================= */
.has-mega{ position: relative; }

.mega{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 10px);

  /* ✅ iOS-safe viewport width; avoids 100vw overflow issues */
  width: min(980px, calc(100svw - 28px));

  background: #fff;
  border: 1px solid rgba(11,18,32,.14);
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(11,18,32,.14);
  padding: 16px;
  display: none;
}
.has-mega.is-open > .mega{ display:block; }

.mega-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  gap: 18px;
}
.mega-grid-3{ grid-template-columns: 1fr 1fr 1fr; }

.mega-title{
  margin: 0 0 10px;
  font-size: .92rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(11,18,32,.55);
  font-weight: 900;
}
.mega-link{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  transition: 160ms ease;
  color: rgba(11,18,32,.86);
  font-weight: 800;
}
.mega-link:hover{ background: rgba(11,18,32,.05); }

.mega-cta{
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
}
.mega-badge{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: .85rem;
  background: rgba(var(--accentRGB), .10);
  border: 1px solid rgba(var(--accentRGB), .18);
  color: rgba(11,18,32,.86);
  margin-bottom: 10px;
}
.mega-cta-title{
  font-weight: 950;
  color: rgba(11,18,32,.92);
  margin-bottom: 6px;
}
.mega-cta-text{
  margin: 0 0 12px;
  color: rgba(11,18,32,.65);
  font-size: .98rem;
  line-height: 1.6;
}

/* Hide mega-menu on touch/mobile */
@media (max-width: 980px){
  .mega{ display:none !important; }
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 1100px){
  .core-grid{ grid-template-columns: 1fr 1fr; }
  .next-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr 1fr; }
  .why-grid{ grid-template-columns: 1fr 1fr; }
  .phase-grid{ grid-template-columns: 1fr; }
  .risk-grid{ grid-template-columns: 1fr; }
  .expect-grid{ grid-template-columns: 1fr; }
  .about-hero-grid{ grid-template-columns: 1fr; }
  .about-proof{ grid-template-columns: 1fr; }
  .about-approach-grid{ grid-template-columns: 1fr; }
  .about-audience-grid{ grid-template-columns: 1fr; }
  .about-principles{ grid-template-columns: 1fr; }
  .contact-hero-grid{ grid-template-columns: 1fr; }
  .contact-trust{ grid-template-columns: 1fr; }
  .testimonial-grid{ grid-template-columns: 1fr; }
  .careers-grid{ grid-template-columns: 1fr; }
  .story-steps{ grid-template-columns: 1fr; }
  .page-services .hero-grid{ grid-template-columns: 1fr; }
  .svc-detail{ grid-template-columns: 1fr; }
  .how-panel-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .nav-links{ display:none; }
  .burger{ display:inline-flex; align-items:center; justify-content:center; }
  .hero-actions .btn{ width: 100%; }
  .grid{ grid-template-columns: 1fr; }
  .why-grid{ grid-template-columns: 1fr; }
  .core-grid{ grid-template-columns: 1fr; }
  .contact-row{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .cta{ align-items: flex-start; gap: 14px; flex-direction: column; }
  .cta .btn{ width: 100%; text-align: center; }
  .svc-links a{ padding: 13px 12px; border-radius: 16px; }
  .svc-links a .mini{ width: 42px; height: 42px; border-radius: 15px; }
  .svc-links a .arrow{ width: 36px; height: 36px; border-radius: 13px; }
  .svc-links a .label{ font-size: 1.02rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{
    transition: none !important;
    scroll-behavior: auto !important;
    animation: none !important;
  }
}


/* =====================================
   Footer — mobile polish improvements
===================================== */

/* Prevent long email from stretching layout */
.footer a,
.footer-muted{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Make bottom links cleaner on small screens */
@media (max-width: 820px){
  .footer-bottom-links{
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 8px 16px;
    justify-content: center;
  }
}

/* On very small screens, stack neatly */
@media (max-width: 480px){
  .footer-bottom-links{
    grid-template-columns: 1fr;
  }
}



/* ================================
   HOW WE DELIVER (ICON REDESIGN)
================================ */

.svc-delivery-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 24px;
}

@media (min-width: 900px){
  .svc-delivery-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
}

.svc-delivery-card{
  border-radius: 22px;
  border: 1px solid rgba(11,18,32,.10);
  background: #ffffff;
  padding: 22px;
  box-shadow: 0 18px 60px rgba(0,0,0,.08);
  text-align: center;
  transition: transform .18s ease, box-shadow .18s ease;
}

.svc-delivery-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 70px rgba(0,0,0,.12);
}

.svc-delivery-icon{
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  font-size: 26px;
  background: rgba(59,130,246,.12);
  border: 1px solid rgba(59,130,246,.25);
}

.svc-delivery-card h3{
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: rgba(11,18,32,.92);
}

.svc-delivery-card p{
  margin: 0;
  color: rgba(11,18,32,.68);
  line-height: 1.55;
}

.svc-delivery-cta{
  margin-top: 28px;
  text-align: center;
}


.svc-delivery-icon{
  box-shadow:
    0 0 0 1px rgba(59,130,246,.25),
    0 10px 30px rgba(59,130,246,.15);
}

.svc-delivery-card:hover{
  background:
    linear-gradient(
      180deg,
      rgba(59,130,246,.04),
      #ffffff 30%
    );
}





/* =========================================================
   🔨 PREMIUM HAMMER OVERRIDE — TEAM PAGE
   Fix washed cards, upgrade icons, improve contrast
   ========================================================= */

/* ===== Force clean premium surfaces ===== */
.page-team .member-card,
.page-team .pill{
  background: #ffffff !important;
  border: 1px solid rgba(11,18,32,.08) !important;
  backdrop-filter: none !important;
  box-shadow:
    0 14px 45px rgba(11,18,32,.08),
    0 4px 14px rgba(11,18,32,.06) !important;
  transition: all .25s ease;
}

/* Subtle lift on hover (desktop only) */
@media (hover:hover){
  .page-team .member-card:hover,
  .page-team .pill:hover{
    transform: translateY(-3px);
    box-shadow:
      0 20px 60px rgba(11,18,32,.12),
      0 8px 24px rgba(11,18,32,.08) !important;
  }
}

/* ===== Fix text contrast ===== */
.page-team .member-body,
.page-team .pill{
  color: #0B1220 !important;
}

.page-team .member-name,
.page-team .pill h3{
  color: #0B1220 !important;
}

.page-team .member-bio,
.page-team .pill p{
  color: rgba(11,18,32,.72) !important;
}

/* ===== Upgrade role pill on photos ===== */
.page-team .role-pill{
  background: rgba(11,18,32,.85) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  font-weight: 800;
  letter-spacing: .02em;
}

.page-team .role-pill i{
  background: linear-gradient(180deg,#3B82F6,#22D3EE) !important;
}

/* ===== Upgrade focus chips ===== */
.page-team .chip{
  background: #F1F5F9 !important;
  border: 1px solid rgba(11,18,32,.06) !important;
  color: #0B1220 !important;
  font-weight: 700;
}

.page-team .chip:before{
  background: #3B82F6 !important;
}

/* ===== Premium icon blocks for Clarity / Security / Clean Handoff ===== */
.page-team .pill-ico{
  background:
    linear-gradient(180deg,#ffffff,#EEF1F6) !important;
  border: 1px solid rgba(59,130,246,.18) !important;
  box-shadow:
    0 12px 28px rgba(11,18,32,.10),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
  color: #0B1220 !important;
}

/* Slight glow ring */
.page-team .pill-ico::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: 20px;
  background: radial-gradient(circle, rgba(59,130,246,.18), transparent 70%);
  z-index:-1;
}

/* ===== Make photos look sharper and premium ===== */
.page-team .member-photo{
  background: #0B1220 !important;
}

.page-team .member-photo img{
  filter: contrast(1.04) saturate(1.03);
  transition: transform .4s ease;
}

@media (hover:hover){
  .page-team .member-card:hover .member-photo img{
    transform: scale(1.05);
  }
}

/* ===== Tighten spacing for cleaner rhythm ===== */
.page-team .member-body{
  padding: 20px 20px 22px !important;
}

.page-team .pill{
  padding: 18px !important;
}

/* ===== Remove old foggy gradients from cards ===== */
.page-team .member-card,
.page-team .pill{
  background-image: none !important;
}











/* =========================
   Home page — spill + rhythm
========================= */

/* Hero spill gradient (uses your existing navy + accent tokens) */
.hero.hero-spill{
  position: relative;
  overflow: hidden;
  padding-bottom: 56px; /* space for fade */
  background:
    radial-gradient(900px 500px at 70% 10%, rgba(var(--accentRGB), .18), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, #0F1A2E 45%, #14233F 70%, var(--bg) 100%);
}

/* Soft fade that "spills" into next section */
.hero-fade{
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 70px;
  background: linear-gradient(180deg, rgba(246,247,250,0) 0%, var(--bg) 100%);
  pointer-events:none;
}

/* Small trust pills under hero copy */
.hero-proof{
  margin-top: 18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.proof-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.82);
  font-size: 14px;
}
.proof-pill .dot{
  width:8px; height:8px;
  border-radius:50%;
  background: rgba(var(--accentRGB), .95);
  box-shadow: 0 0 0 4px rgba(var(--accentRGB), .18);
}

/* Trust strip (like the reference site) */
.trust-strip{
  background: var(--bg);
  padding: 12px 0 18px;
}
.trust-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,18,32,.08);
  box-shadow: 0 18px 60px rgba(11,18,32,.06);
}
.trust-copy strong{ display:block; color: var(--text); }
.trust-copy .muted{ display:block; color: var(--muted); font-size: 14px; margin-top: 2px; }

.trust-logos{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.logo-chip{
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(11,18,32,.04);
  border: 1px solid rgba(11,18,32,.08);
  color: rgba(11,18,32,.62);
  font-weight: 700;
  font-size: 13px;
}

/* Alternating surfaces for smoother scroll rhythm */
.surface-a{ background: var(--bg); }
.surface-b{ background: var(--bg2); }

/* Metrics row */
.metrics{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}
.metric{
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(11,18,32,.08);
  box-shadow: 0 18px 50px rgba(11,18,32,.06);
}
.metric-kpi{
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2px;
}
.metric-label{ color: var(--muted); font-size: 14px; }

/* CTA band */
.cta-band{
  margin-top: 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 18px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(var(--accentRGB), .10), rgba(var(--accentRGB), .04));
  border: 1px solid rgba(var(--accentRGB), .20);
}
.cta-actions{ display:flex; gap: 10px; flex-wrap:wrap; }

/* Responsive */
@media (max-width: 900px){
  .trust-inner{ flex-direction:column; align-items:flex-start; }
  .trust-logos{ justify-content:flex-start; }
  .metrics{ grid-template-columns: 1fr; }
  .cta-band{ flex-direction: column; align-items:flex-start; }
}





/* =========================
   How We Work — Premium spill
========================= */

.process-premium{
  position: relative;
  overflow: hidden;
  background: var(--bg); /* fallback */
}

/* Big spill band behind content */
.process-premium .process-spill{
  position:absolute;
  inset: -120px -120px auto -120px;
  height: 420px;
  pointer-events:none;
  background:
    radial-gradient(700px 420px at 20% 40%, rgba(var(--accentRGB), .14), transparent 62%),
    radial-gradient(700px 420px at 75% 20%, rgba(var(--accentRGB), .10), transparent 60%),
    linear-gradient(180deg, rgba(11,18,32,.06) 0%, rgba(11,18,32,0) 70%);
  filter: blur(0px);
  opacity: 1;
}

/* Add top + bottom fades so it feels like it "spills" into surrounding sections */
.process-premium::before,
.process-premium::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height: 80px;
  pointer-events:none;
}
.process-premium::before{
  top:-1px;
  background: linear-gradient(180deg, rgba(246,247,250,1) 0%, rgba(246,247,250,0) 100%);
}
.process-premium::after{
  bottom:-1px;
  background: linear-gradient(180deg, rgba(246,247,250,0) 0%, rgba(246,247,250,1) 100%);
}

/* Head alignment */
.process-head{
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}

/* The connector rail (premium timeline feel) */
.process-rail{
  position: relative;
  height: 1px;
  margin: 8px 0 14px;
  background: linear-gradient(90deg,
    rgba(11,18,32,0),
    rgba(11,18,32,.14),
    rgba(11,18,32,0)
  );
  opacity: .9;
}

/* Grid */
.process-grid{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

/* Cards: glass-lite + depth */
.process-step{
  position: relative;
  padding: 16px 16px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(11,18,32,.10);
  box-shadow:
    0 18px 55px rgba(11,18,32,.08),
    0 1px 0 rgba(255,255,255,.70) inset;
  backdrop-filter: blur(10px);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}

/* Premium highlight sweep */
.process-step::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
  transform: translateX(-30%);
  opacity: 0;
  transition: opacity .25s ease, transform .55s ease;
}
.process-step:hover::after{
  opacity: 1;
  transform: translateX(30%);
}

.process-step:hover{
  transform: translateY(-7px);
  border-color: rgba(var(--accentRGB), .22);
  box-shadow:
    0 26px 80px rgba(11,18,32,.12),
    0 1px 0 rgba(255,255,255,.70) inset;
}

.step-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 10px;
}

/* Number badge */
.process-step .step-num{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--text);
  background: rgba(var(--accentRGB), .12);
  border: 1px solid rgba(var(--accentRGB), .22);
}

/* Dot that visually ties steps to the rail */
.step-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(var(--accentRGB), .95);
  box-shadow: 0 0 0 5px rgba(var(--accentRGB), .14);
}

/* Text */
.process-step h3{ margin: 0 0 6px; }
.process-step p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

/* Responsive */
@media (max-width: 1100px){
  .process-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .process-grid{ grid-template-columns: 1fr; }
}


/* =========================
   Premium SVG spill divider
========================= */
.section-divider{
  position: relative;
  width: 100%;
  line-height: 0;
  overflow: hidden;
}

/* Spacer + smooth blend */
.section-divider--spill{
  margin-top: -18px; /* pulls sections together for a smoother “spill” */
  background: var(--bg); /* ensures no white gap on odd screens */
}

.section-divider--spill svg{
  display: block;
  width: 100%;
  height: 90px; /* adjust 70–120 based on taste */
}

/* The actual spill color = subtle accent wash */
.section-divider--spill path{
  fill: rgba(var(--accentRGB), .10);
}

/* Optional: add a second soft layer (more premium) */
.section-divider--spill::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 250px at 50% 0%,
    rgba(var(--accentRGB), .10),
    transparent 60%
  );
  pointer-events:none;
}


/* =========================================================
   GLOBAL — Premium Animated Spill (safe + reusable)
   - Uses existing tokens: --bg, --navy, --accentRGB
   - No layout shift; no overflow
   - Works for hero fade + section dividers + bands
========================================================= */

/* Subtle animated gradient wash */
@keyframes otSpillDrift {
  0%   { transform: translate3d(-2%, 0, 0) scale(1); opacity: .92; }
  50%  { transform: translate3d( 2%, 0, 0) scale(1.02); opacity: 1; }
  100% { transform: translate3d(-2%, 0, 0) scale(1); opacity: .92; }
}

/* Generic spill layer (place inside any section as a child) */
.spill-layer{
  position: absolute;
  inset: -140px -140px auto -140px; /* stays inside; no 100vw tricks */
  height: 440px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(800px 420px at 18% 42%, rgba(var(--accentRGB), .14), transparent 62%),
    radial-gradient(760px 420px at 82% 22%, rgba(34,211,238,.10), transparent 60%),
    linear-gradient(180deg, rgba(11,18,32,.06) 0%, rgba(11,18,32,0) 72%);
  filter: saturate(1.05);
  will-change: transform, opacity;
  animation: otSpillDrift 9s ease-in-out infinite;
}

/* Wrapper utility: makes any section "spill-capable" */
.has-spill{
  position: relative;
  overflow: hidden;      /* critical: prevents jitter */
  background: var(--bg); /* safe default */
}
.has-spill > *{ position: relative; z-index: 1; } /* content above spill */

/* Top/bottom fade helpers for clean blending into neighbors */
.has-spill::before,
.has-spill::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height: 84px;
  pointer-events:none;
  z-index: 0;
}
.has-spill::before{
  top:-1px;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(246,247,250,0) 100%);
}
.has-spill::after{
  bottom:-1px;
  background: linear-gradient(180deg, rgba(246,247,250,0) 0%, var(--bg) 100%);
}

/* Animated section-divider (SVG) — add class .section-divider--animated */
.section-divider--animated{
  position: relative;
  width: 100%;
  line-height: 0;
  overflow: hidden;
  background: var(--bg);
}
.section-divider--animated svg{
  display:block;
  width:100%;
  height: 96px; /* taste: 80–120 */
}
.section-divider--animated .spill-back{ fill: rgba(var(--accentRGB), .08); }
.section-divider--animated .spill-front{ fill: rgba(var(--accentRGB), .14); }

/* Optional shimmer on divider without moving the SVG paths */
.section-divider--animated::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 260px at 50% 0%,
      rgba(var(--accentRGB), .12),
      transparent 62%
    );
  opacity: .9;
  animation: otSpillDrift 10s ease-in-out infinite;
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce){
  .spill-layer,
  .section-divider--animated::after{
    animation: none !important;
  }
}


/* === ICON VISIBILITY FIX (ultra-clean) === */
.icon-chip{
  /* keep premium but not pure white */
  background: linear-gradient(180deg, rgba(59,130,246,.08), rgba(255,255,255,.92));
  border: 1px solid rgba(11,18,32,.10);
}

.icon-chip svg{
  width: 22px;
  height: 22px;
  color: rgba(11,18,32,.88); /* drives currentColor */
}

/* force stroke even when SVG paths don't include stroke="" attribute */
.icon-chip svg path,
.icon-chip svg circle,
.icon-chip svg rect,
.icon-chip svg line,
.icon-chip svg polyline,
.icon-chip svg polygon,
.icon-chip svg ellipse{
  stroke: currentColor !important;
  fill: none !important;
}



.icon-chip{
  background: rgba(255,255,255,.92);
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
  position: relative;
}
.icon-chip:before{
  content:"";
  position:absolute; inset:-1px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(59,130,246,.35), rgba(34,211,238,.22));
  opacity: .35;
  z-index: -1;
}


.icon-chip{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(11,18,32,.10);
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
  position: relative;
}
.icon-chip:before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 17px;
  padding: 1px;
  background: linear-gradient(90deg, rgba(59,130,246,.45), rgba(34,211,238,.30));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:.55;
}