/* ============================================================
   NextBridge Technologies — Design System
   Palette: white / deep navy / NextBridge blue, faceted-N motif
   Type: Space Grotesk (display) + Inter (body)
   ============================================================ */

:root{
  --navy: #0B1220;
  --navy-2: #102A56;
  --navy-3: #16305a;
  --blue: #2b6ef2;
  --blue-light: #5b9dff;
  --blue-pale: #eaf2ff;
  --blue-pale-2: #f4f8ff;
  --ink: #131f36;
  --slate: #5a6785;
  --slate-light: #8996b3;
  --line: #e2e8f3;
  --line-2: #d5deee;
  --white: #ffffff;
  --amber: #ffb84d;

  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", sans-serif;

  --maxw: 1240px;
  --radius-s: 4px;
  --shadow-card: 0 1px 2px rgba(10,27,51,.04), 0 12px 32px -16px rgba(10,27,51,.14);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family: var(--font-display); color: var(--navy); margin:0; line-height:1.12; letter-spacing:-.01em; }
p{ margin:0; }
button{ font-family: inherit; cursor:pointer; }
input, select, textarea{ font-family: inherit; font-size: 15px; }

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

@media (max-width: 720px){
  .container{ padding: 0 20px; }
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

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

/* ============ Utility type ============ */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 18px;
}
.eyebrow::before{
  content:"";
  width: 8px; height: 8px;
  background: var(--blue);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  flex: none;
}
.section-head{ max-width: 640px; margin-bottom: 48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size: clamp(28px, 3.4vw, 40px); }
.section-head p{ color: var(--slate); font-size: 17px; margin-top: 16px; max-width: 56ch; }
.section-head.center p{ margin-left:auto; margin-right:auto; }

.kicker-line{ color: var(--slate); font-size: 17px; max-width: 60ch; }

section{ padding: 92px 0; }
@media (max-width: 720px){ section{ padding: 64px 0; } }

.section-navy{ background: var(--navy); color: rgba(255,255,255,.86); }
.section-navy h2, .section-navy h3{ color: #fff; }
.section-pale{ background: var(--blue-pale-2); }

/* ============ Scroll reveal (animation-based) ============
   Uses the individual `translate` property so it never fights with
   hover `transform` on cards. JS only needs to add the class `in`.   */
.reveal{ opacity:0; }
.reveal.in{
  animation: revealUp .7s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(var(--i, 0) * 100ms);
}
@keyframes revealUp{
  from{ opacity:0; translate:0 22px; }
  to{   opacity:1; translate:0 0; }
}
@media (scripting: none){ .reveal{ opacity:1; } }

/* ============ Shared helpers ============ */
.mt-64{ margin-top:64px; }
.text-center{ text-align:center; }
.eyebrow-pill{
  display:inline-block; padding:6px 14px; margin-bottom:18px;
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); border:1px solid rgba(43,110,242,.4); background:rgba(43,110,242,.08);
  border-radius:999px;
}
.about-h2{ font-size:clamp(28px,3.6vw,42px); line-height:1.15; margin:0 0 22px; color:var(--navy); }
.about-h2 span{ color:var(--blue); }
.about-p{ font-size:16.5px; line-height:1.75; color:#4a5568; margin:0 0 16px; }
.split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,72px); align-items:center;
}

/* ============ Buttons ============ */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content:center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn-primary{
  background: linear-gradient(135deg, var(--blue), #1848a8);
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(43,110,242,.55);
}
.btn-primary:hover{ background: linear-gradient(135deg, #3a7bff, #1f5fe0); transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(43,110,242,.65); }
.btn-ghost{
  background: transparent;
  color: var(--navy);
  border-color: var(--line-2);
}
.btn-ghost:hover{ border-color: var(--blue); color: var(--blue); }
.btn-on-navy{
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.3);
}
.btn-on-navy:hover{ border-color: #fff; }
.btn-block{ width:100%; }
.btn-sm{ padding: 10px 18px; font-size: 14px; }

/* ============ Header ============ */
.site-header{
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.site-header::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blue), transparent);
  opacity: 0;
  transition: opacity .25s ease;
}
.site-header.is-scrolled{
  box-shadow: 0 12px 30px -20px rgba(10,27,51,.35);
  border-bottom-color: transparent;
  background: rgba(255,255,255,.98);
}
.site-header.is-scrolled::after{ opacity: 1; }
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: 82px;
  position: relative;
  z-index: 1;
}
.brand{ display:flex; align-items:center; gap: 12px; transition: transform .2s ease; }
.brand:hover{ transform: translateY(-1px); }
.brand img{ height: 30px; width:auto; }
.brand-word{ display:block; height: 22px; width:auto; }

.main-nav{ display:flex; align-items:center; gap: 4px; z-index: 900; }
.main-nav a{
  position: relative;
  padding: 10px 16px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  border-radius: 999px;
  transition: color .15s ease, background .15s ease;
}
.main-nav a::after{
  content:"";
  position:absolute;
  left: 16px; right: 16px; bottom: 6px;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.main-nav a:hover{ color: var(--blue); background: var(--blue-pale-2); }
.main-nav a:hover::after{ transform: scaleX(1); }
.main-nav a.active{ color: var(--blue); background: var(--blue-pale); font-weight: 600; }
.main-nav a.active::after{ transform: scaleX(0); }
.header-actions{ display:flex; align-items:center; gap: 10px; }

.nav-toggle{
  position:relative;
  display:none;
  background:none;
  border:none;
  width: 40px; height: 40px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap: 5px;
}
.nav-toggle span{ display:block; width: 22px; height: 2px; background: var(--navy); transition: transform .25s ease, opacity .2s ease; }

.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

body.nav-open{ overflow:hidden; }

/* Services Dropdown */
.nav-dropdown {
    position: relative;
}

.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dropdown-toggle i {
    font-size: 11px;
    transition: transform 0.3s ease;
}

/* Dropdown Menu for nav */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #fff;
    border-radius: 10px;
    padding: 10px 0;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

/* Dropdown Links */
.dropdown-menu a {
    display: block;
    padding: 12px 18px;
    color: #333;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.dropdown-menu a:hover {
    background: #f5f5f5;
    color: #1848a8;
    padding-left: 24px;
}

/* Show Dropdown on Hover */
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

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

@media (max-width: 768px) {
    .nav-dropdown {
        width: 100%;
    }

    .dropdown-menu {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: #f8f8f8;
        border-radius: 8px;
        width: 100%;
        padding: 5px 0;
    }

    .nav-dropdown:hover .dropdown-menu,
    .nav-dropdown:focus-within .dropdown-menu {
        display: block;
    }

    .dropdown-menu a {
        padding-left: 30px;
    }
}

@media (max-width: 980px){
  .main-nav{
    position: fixed;
    top: 82px; left:0; right:0; bottom:0;
    height: calc(100dvh - 82px);
    box-shadow: 0 20px 40px -20px rgba(10,27,51,.35);
    background: #fff;
    flex-direction:column;
    align-items: stretch;
    padding: 12px 20px 32px;
    gap: 2px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events:none;
    transition: opacity .18s ease, transform .18s ease;
    overflow-y:auto;
  }
  .main-nav a:last-child{ border-bottom:none; }

  .main-nav.open{ opacity:1; transform: translateY(0); pointer-events:auto; }
  .main-nav a{ padding: 14px 6px; border-bottom: 1px solid var(--line); font-size: 16px; }
  .header-actions .btn-ghost{ display:none; }
  .nav-toggle{ display:flex; }
}

@media (max-width: 980px) {
    .nav-dropdown {
        width: 100%;
    }

    .dropdown-menu {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: #f8f8f8;
        border-radius: 8px;
        width: 100%;
        padding: 5px 0;
    }

    .nav-dropdown.open .dropdown-menu {
        display: block;
    }

    .nav-dropdown.open .dropdown-toggle i {
        transform: rotate(180deg);
    }

    .dropdown-menu a {
        padding-left: 30px;
    }
}

/* ============ Hero ============ */
.hero{
   position:relative; overflow:hidden; color:#fff;
  padding:clamp(90px,11vw,150px) 0 clamp(70px,8vw,110px);
  background:
    radial-gradient(60% 90% at 12% 0%, rgba(43,110,242,.45), transparent 60%),
    radial-gradient(50% 80% at 95% 100%, rgba(43,110,242,.28), transparent 60%),
    linear-gradient(135deg, var(--navy-2) 0%, var(--navy) 100%);
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
          mask-image:radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
  animation:gridDrift 4s linear infinite;
  transform-origin: var(--mx, 50%) var(--my, 50%);
  transition: transform .5s ease, transform-origin .1s ease;
}

.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
          mask-image:radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
  animation:gridDrift 4s linear infinite;
}

.hero .container.hero-grid{
  position:relative;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items:center;
}
.hero-slider{ position:relative; }
.hero-slides{ position:relative; min-height: 300px; }
.hero-slide{
  position:absolute; inset:0;
  opacity:0;
  transform: translateY(16px);
  pointer-events:none;
  transition: opacity .5s ease, transform .5s ease;
}
.hero-slide.is-active{
  position:relative;
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.hero-slide h1{
  color:#fff;
  font-size: clamp(32px, 4.4vw, 54px);
  margin: 10px 0 22px;
}

.hero-slide h1 em{
  font-style:normal;
  background:linear-gradient(90deg,#5B92F7,#9DBBFA,#5B92F7); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:shine 5s linear infinite;
}
.hero-slide p{
  color: rgba(255,255,255,.72);
  font-size: 18px;
  max-width: 46ch;
  margin-bottom: 34px;
}
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin:0 0 30px; }

.hero-controls{
  display:flex;
  align-items:center;
  gap: 18px;
  margin-top: 36px;
}
.hero-arrow{
  width: 42px; height:42px;
  flex:none;
  border-radius:50%;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.04);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.hero-arrow:hover{ background: var(--blue); border-color: var(--blue); transform: translateY(-1px); }
.hero-dots{ display:flex; gap:8px; }
.hero-dot{
  width: 26px; height:4px;
  border-radius: 2px;
  border:none;
  background: rgba(255,255,255,.28);
  transition: background .2s ease, width .2s ease;
}
.hero-dot.is-active{ background: var(--blue-light); width: 40px; }
.hero-dot:hover{ background: rgba(255,255,255,.55); }

.hero-art{ position:relative; }
.facet-mark{ width: 100%; height:auto; }

@media (prefers-reduced-motion: reduce){
  .hero::after{ display:none; }
}

@media (max-width: 900px){
  .hero .container.hero-grid{ grid-template-columns: 1fr; }
  .hero-art{ order:-1; max-width: 220px; margin: 0 auto 8px; }
  .hero-slides{ min-height: 340px; }
}

/* Pixel-dissolve decorative grid, echo of the logo's mark */
.pixel-grid{
  position:absolute;
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  opacity: .5;
}
.pixel-grid span{ width:6px; height:6px; background: var(--blue-light); }
.pixel-grid span:nth-child(3n){ opacity:.5; }
.pixel-grid span:nth-child(5n){ opacity:.25; }

/* ============ Faceted divider ============ */
.facet-divider{
  height: 64px;
  background: var(--navy);
  clip-path: polygon(0 0, 100% 0, 100% 40%, 0 100%);
  margin-bottom: -1px;
}
.facet-divider.flip{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 60%);
}

/* ============ Stat / trust strip ============ */
.trust-strip{
  border-bottom: 1px solid var(--line);
  padding: 40px 0;
}
.trust-strip .container{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.trust-item{ padding-left: 18px; border-left: 2px solid var(--blue); }
.trust-item strong{ display:block; font-family: var(--font-display); color: var(--navy); font-size: 15px; margin-bottom: 4px; }
.trust-item span{ color: var(--slate); font-size: 14px; }
@media (max-width: 860px){
  .trust-strip .container{ grid-template-columns: repeat(2, 1fr); }
}

/* ============ Problem grid ============ */
.problem-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.problem-card{
  background: #fff;
  padding: 30px 28px;
}
.problem-card .num{
  font-family: var(--font-display);
  color: var(--blue-light);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 14px;
  display:block;
}
.problem-card p{ color: var(--ink); font-size: 15.5px; font-weight: 500; }
@media (max-width: 860px){ .problem-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .problem-grid{ grid-template-columns: 1fr; } }

/* ========== MODULES SECTION ========== */
.modules-section{
  position:relative;
  overflow:hidden;
  padding: clamp(64px, 8vw, 110px) 0;
  color:#fff;
 background:
    radial-gradient(60% 90% at 12% 0%, rgba(43,110,242,.45), transparent 60%),
    radial-gradient(50% 80% at 95% 100%, rgba(43,110,242,.28), transparent 60%),
    linear-gradient(135deg, var(--navy-2) 0%, var(--navy) 100%);
}
.modules-section::before{            /* faint grid */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
}
.modules-section .container{ position:relative; }
.modules-section .section-head{ text-align:center; max-width:820px; margin:0 auto 56px; }
.modules-section .section-head h2{ color:#fff; }
.modules-section .section-head p{ color:rgba(255,255,255,.7); }

/* grid */
.module-ring{
  --gap:28px;
  counter-reset: mod;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

/* card */
.module-card{
  counter-increment: mod;
  position:relative;
  padding: 28px 24px 26px;
  border-radius:16px;
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
/* number badge */
.module-card::before{
  content: "0" counter(mod);
  position:absolute; top:18px; right:20px;
  font-size:13px; font-weight:600; letter-spacing:.1em;
  color:rgba(255,255,255,.28);
  transition: color .3s;
}
/* connector to the next card */
.module-card::after{
  content:""; position:absolute; top:50%; left:100%;
  width:var(--gap); height:2px; transform:translateY(-50%);
  background: repeating-linear-gradient(90deg, var(--blue) 0 6px, transparent 6px 12px);
  background-size:12px 2px;
  animation: dashFlow 1s linear infinite;
  opacity:.7;
}
.module-card:nth-child(4n)::after,
.module-card:last-child::after{ display:none; }
@keyframes dashFlow{ to{ background-position:12px 0; } }

.m-icon{
  width:56px; height:56px; margin-bottom:20px;
  display:grid; place-items:center; border-radius:14px;
  background: linear-gradient(135deg, rgba(43,110,242,.30), rgba(43,110,242,.08));
  border:1px solid rgba(43,110,242,.45);
  box-shadow: 0 0 0 6px rgba(43,110,242,.06);
  transition: transform .3s ease, background .3s ease;
}
.module-card h4{ margin:0 0 8px; font-size:18px; color:#fff; }
.module-card p{ margin:0; font-size:14px; line-height:1.6; color:rgba(255,255,255,.68); }

/* hover */
.module-card:hover{
  transform: translateY(-8px);
  border-color: rgba(43,110,242,.8);
  background: linear-gradient(160deg, rgba(43,110,242,.22), rgba(255,255,255,.03));
  box-shadow: 0 24px 48px -16px rgba(43,110,242,.55);
}
.module-card:hover::before{ color:#7FA8F9; }
.module-card:hover .m-icon{ background:var(--blue); transform:scale(1.06) rotate(-4deg); }
.module-card:hover .m-icon svg{ stroke:#fff; }

/* animated flow bar under the grid */
.module-flow-bar{
  position:relative; height:3px; margin-top:56px; border-radius:3px; overflow:hidden;
  background: rgba(255,255,255,.10);
}
.module-flow-bar::after{
  content:""; position:absolute; top:0; left:-30%; width:30%; height:100%;
  background: linear-gradient(90deg, transparent, var(--blue), #9DBBFA, transparent);
  animation: flowPulse 3.2s ease-in-out infinite;
}
@keyframes flowPulse{ to{ left:100%; } }

/* responsive */
@media (max-width: 1024px){
  .module-ring{ grid-template-columns: repeat(2, 1fr); }
  .module-card:nth-child(4n)::after{ display:block; }   /* reset */
  .module-card:nth-child(2n)::after,
  .module-card:last-child::after{ display:none; }
}
@media (max-width: 560px){
  .module-ring{ grid-template-columns: 1fr; --gap:20px; }
  .module-card::after{ display:none !important; }
}
@media (prefers-reduced-motion: reduce){
  .module-card::after, .module-flow-bar::after{ animation:none; }
}

.modules-section .eyebrow-pill{
  color:#9DBBFA; border-color:rgba(43,110,242,.5); background:rgba(43,110,242,.12);
}

/* ============ Why NextBridge slider (matches modules section) ============
   HTML: <section class="why-section modules-section"> */
.why-section{ padding-bottom: clamp(56px, 7vw, 96px); }
.why-section .section-head{ margin-bottom:48px; }

.why-slider{
  position:relative; width:100vw; margin-left:calc(50% - 50vw);
  background:transparent;
  border-top:1px solid rgba(255,255,255,.10);
  border-bottom:1px solid rgba(255,255,255,.10);
}

.why-track{ position:relative; min-height:440px; overflow:hidden; }
.why-slide{
  position:absolute; inset:0; display:grid; grid-template-columns:58% 42%;
  opacity:0; visibility:hidden;
  transition:opacity .7s ease, visibility 0s linear .7s;
}
.why-slide.is-active{ position:relative; opacity:1; visibility:visible; transition:opacity .7s ease; }

/* visual panel */
.why-visual{ position:relative; overflow:hidden; }
.why-visual::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(11,18,32,0) 55%, rgba(11,18,32,.85) 100%);
}
.why-visual-inner{
  position:absolute; inset:-6%; display:flex; align-items:center; justify-content:center;
  transform:scale(1.08); transition:transform .9s cubic-bezier(.16,.84,.44,1);
}
.why-visual-inner::before{
  content:""; position:absolute; width:340px; height:340px; border-radius:50%;
  border:1px solid rgba(43,110,242,.35);
  box-shadow:0 0 0 40px rgba(43,110,242,.05), 0 0 0 80px rgba(43,110,242,.03);
}
.why-slide.is-active .why-visual-inner{ transform:scale(1); animation:whyKenBurns 9s ease-in-out .9s infinite alternate; }
@keyframes whyKenBurns{ from{ transform:scale(1); } to{ transform:scale(1.045); } }
.why-glyph{ position:relative; opacity:.52; filter:drop-shadow(0 0 40px rgba(43,110,242,.55)); }

/* patterns: pattern layers on top, translucent gradient underneath */
.pattern-blueprint{ background:
  repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 42px),
  repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 42px),
  linear-gradient(135deg, rgba(16,42,86,.55), rgba(11,18,32,.25)); }
.pattern-flow{ background:
  repeating-linear-gradient(115deg, rgba(91,141,239,.16) 0 2px, transparent 2px 48px),
  linear-gradient(135deg, rgba(16,42,86,.55), rgba(11,18,32,.25)); }
.pattern-grid{ background:
  radial-gradient(rgba(255,255,255,.18) 1.5px, transparent 1.5px) 0 0 / 28px 28px,
  linear-gradient(135deg, rgba(16,42,86,.55), rgba(11,18,32,.25)); }
.pattern-rings{ background:
  repeating-radial-gradient(circle at 68% 38%, rgba(91,141,239,.20) 0 2px, transparent 2px 36px),
  linear-gradient(135deg, rgba(16,42,86,.55), rgba(11,18,32,.25)); }
.pattern-circuit{ background:
  radial-gradient(rgba(91,141,239,.28) 2px, transparent 2px) 0 0 / 36px 36px,
  linear-gradient(135deg, rgba(16,42,86,.55), rgba(11,18,32,.25)); }
.pattern-globe{ background:
  repeating-radial-gradient(ellipse at 50% 50%, transparent 0 40px, rgba(255,255,255,.08) 41px 42px),
  linear-gradient(135deg, rgba(16,42,86,.55), rgba(11,18,32,.25)); }

/* content panel: staggered entrance */
.why-content{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  padding:clamp(28px,4vw,64px) clamp(28px,5vw,80px) clamp(28px,4vw,64px) clamp(20px,3vw,48px);
}
.why-step{
  display:inline-block; padding:6px 14px; margin-bottom:22px;
  font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:#9DBBFA; border:1px solid rgba(43,110,242,.5); background:rgba(43,110,242,.12); border-radius:999px;
  opacity:0; transform:translateY(14px); transition:opacity .5s ease .15s, transform .5s ease .15s;
}
.why-content h4{
  position:relative; margin:0 0 22px; padding-bottom:18px;
  font-size:clamp(26px,3vw,38px); line-height:1.15; color:#fff;
  opacity:0; transform:translateY(28px); transition:opacity .6s ease .28s, transform .6s ease .28s;
}
.why-content h4::after{ content:""; position:absolute; left:0; bottom:0; width:48px; height:3px; background:var(--blue); }
.why-content p{
  margin:0; max-width:460px; font-size:16.5px; line-height:1.7; color:rgba(255,255,255,.72);
  opacity:0; transform:translateY(28px); transition:opacity .6s ease .42s, transform .6s ease .42s;
}
.why-slide.is-active .why-step,
.why-slide.is-active .why-content h4,
.why-slide.is-active .why-content p{ opacity:1; transform:none; }

/* glass arrows */
.why-arrow{
  position:absolute; top:50%; z-index:6; transform:translateY(-50%);
  width:52px; height:52px; display:grid; place-items:center; cursor:pointer; color:#fff;
  border-radius:50%; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background .25s, border-color .25s, transform .25s;
}
.why-arrow.prev{ left:clamp(12px,2.5vw,40px); }
.why-arrow.next{ right:clamp(12px,2.5vw,40px); }
.why-arrow:hover{ background:var(--blue); border-color:var(--blue); transform:translateY(-50%) scale(1.08); }
.why-arrow:focus-visible, .why-dot:focus-visible{ outline:2px solid #5B92F7; outline-offset:3px; }
.why-arrow svg{ transition:transform .2s ease; }
.why-arrow.prev:hover svg{ transform:translateX(-2px); }
.why-arrow.next:hover svg{ transform:translateX(2px); }

/* dots: active one stretches */
.why-dots{ position:absolute; left:0; right:0; bottom:22px; z-index:6; display:flex; justify-content:center; gap:10px; }
.why-dot{
  width:10px; height:10px; padding:0; border:0; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.28); transition:width .3s ease, background .3s ease;
}
.why-dot:hover{ background:rgba(255,255,255,.55); }
.why-dot.is-active{ width:34px; background:var(--blue); }

@media (max-width:900px){
  .why-track{ min-height:0; }
  .why-slide{ grid-template-columns:1fr; grid-template-rows:220px auto; }
  .why-visual::after{ background:linear-gradient(180deg, rgba(11,18,32,0) 50%, rgba(11,18,32,.9) 100%); }
  .why-glyph{ width:150px; height:150px; }
  .why-visual-inner::before{ width:220px; height:220px; }
  .why-content{ padding:24px 24px 72px; }
  .why-content h4{ font-size:24px; }
  .why-arrow{ top:110px; width:44px; height:44px; }
}
@media (prefers-reduced-motion:reduce){
  .why-slide.is-active .why-visual-inner{ animation:none !important; transform:none !important; }
}

/* Slider CSS */
/* ===== Image (rectangle) ===== */
.why-visual-inner::before{ display:none; }   /* hides only the circle ring; patterns stay */

/* .why-glyph.why-photo{
  width:min(450px, 80%);
  height:auto;
  aspect-ratio:16 / 10;          
  object-fit:cover;              
  border-radius:14px;
  opacity:1;                   
  filter:none;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 20px 50px -12px rgba(0,0,0,.55), 0 0 40px rgba(43,110,242,.25);
}

@media (max-width:900px){
  .why-glyph.why-photo{ width:min(260px, 70%); height:auto; }
} */

.why-glyph.why-photo{
  width:min(640px, 88%);        
  height:275px;                 
  aspect-ratio:auto;            
  object-fit:cover;
  border-radius:14px;
  opacity:1;
  filter:none;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 20px 50px -12px rgba(0,0,0,.55), 0 0 40px rgba(43,110,242,.25);
}

@media (max-width:900px){
  .why-glyph.why-photo{ width:min(300px, 80%); height:150px; }
}

/* ============ Manufacturing flow chain ============ */
.flow-chain{
  display:flex;
  align-items:stretch;
  gap: 0;
  overflow-x:auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.flow-step{
  flex: 1 0 128px;
  position:relative;
  padding: 22px 22px 22px 30px;
  background: var(--navy-2);
  color:#fff;
}
.flow-step:nth-child(odd){ background: var(--navy-3); }
.flow-step .fs-index{ font-family: var(--font-display); color: var(--blue-light); font-size: 12px; font-weight:700; display:block; margin-bottom:8px; }
.flow-step .fs-label{ font-family: var(--font-display); font-size: 14.5px; font-weight:600; }
.flow-arrow{
  flex: none;
  width: 26px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--navy);
  color: var(--blue-light);
  font-size: 14px;
}
.flow-caption{ margin-top: 22px; color: var(--slate-light); font-family: var(--font-display); font-size: 14px; }


/* ============ Industries preview — animated marquee ============ */
.industries-preview{ overflow:hidden; }
.industry-marquee{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;  
  gap:16px;                
  padding: 8px 0 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.industry-track{
  display:flex;
  gap:16px;
  padding-right:16px;      /* same as gap, so -50% lands exactly on the seam */
  width:max-content;
  animation: marqueeScroll 40s linear infinite;
  will-change: transform;
}
.industry-marquee:hover .industry-track{ animation-play-state: paused; }
@keyframes marqueeScroll{
  from{ transform: translateX(0); }
  to{   transform: translateX(-50%); }
}
.industry-card{
  --c:#2b6ef2;
  position:relative;
  flex:0 0 240px;          
  width:240px;
  box-sizing:border-box;
  background:#fff;
  border:1px solid #e6ebf5;
  border-radius:16px;
  padding:22px 20px;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 28px -14px rgba(16,24,40,.14);
  overflow:hidden;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.industry-card::before{            /* coloured top line that grows on hover */
  content:"";position:absolute;left:0;top:0;height:3px;width:100%;
  background:var(--c);transform:scaleX(0);transform-origin:left;
  transition:transform .35s ease;
}
.industry-card:hover{
  transform:translateY(-6px);
  border-color:transparent;
  box-shadow:0 18px 40px -16px rgba(16,24,40,.28);
}
.industry-card:hover::before{transform:scaleX(1);}
 
.industry-card .i-icon{
  width:54px;height:54px;border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  color:var(--c);
  background:rgba(43,110,242,.10);                       /* fallback */
  background:color-mix(in srgb,var(--c) 12%,#fff);
  transition:background .28s ease,color .28s ease,transform .28s ease;
}
.industry-card .i-icon svg{
  width:26px;height:26px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.industry-card:hover .i-icon{background:var(--c);color:#fff;transform:rotate(-6deg) scale(1.06);}
 
.industry-card h4{margin:0 0 8px;font-size:17px;line-height:1.3;font-weight:700;color:#0f1b33;}
.industry-card p{margin:0;font-size:14px;line-height:1.65;color:#5b6577;}
@media (prefers-reduced-motion: reduce) {
  .industry-track { animation: none; }
}

/* ============ CTA band (full-bleed) ============ */
.cta-band{
  position:relative; width:100%; overflow:hidden; text-align:center; color:#fff;
  padding:clamp(64px,9vw,120px) 24px;
  background:
    radial-gradient(60% 90% at 15% 0%, rgba(43,110,242,.45) 0%, transparent 60%),
    radial-gradient(50% 80% at 90% 100%, rgba(43,110,242,.30) 0%, transparent 60%),
    linear-gradient(135deg, var(--navy-2) 0%, var(--navy) 100%);
}
.cta-band::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
          mask-image:radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
/* .container kept so pages still on the old markup look right too */
.cta-inner, .cta-band .container{ position:relative; max-width:900px; margin:0 auto; display:block; }
.cta-eyebrow{
  display:inline-block; padding:6px 14px; margin-bottom:20px;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:#9DBBFA; border:1px solid rgba(43,110,242,.5); background:rgba(43,110,242,.12); border-radius:999px;
}
.cta-band h2{ font-size:clamp(28px,4vw,46px); line-height:1.15; color:#fff; margin:0 auto 16px; max-width:none; }
.cta-band h2 em{ font-style:normal; color:#5B92F7; }
.cta-sub{ max-width:620px; margin:0 auto 32px; color:rgba(255,255,255,.72); font-size:17px; }
.cta-band .cta-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:28px; }
.cta-sub + .cta-actions{ margin-top:0; }

/* ============ Footer (full-bleed) ============ */
.site-footer{
  position:relative; width:100%; background:
    radial-gradient(60% 90% at 12% 0%, rgba(43,110,242,.45), transparent 60%),
    radial-gradient(50% 80% at 95% 100%, rgba(43,110,242,.28), transparent 60%),
    linear-gradient(135deg, var(--navy-2) 0%, var(--navy) 100%);
   color:rgba(255,255,255,.70);
  padding:clamp(48px,6vw,80px) 0 0;
}
/* .site-footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--blue) 30%, #5B92F7 50%, var(--blue) 70%, transparent);
} */
.footer-inner, .site-footer > .container{ max-width:1400px; margin:0 auto; padding:0 clamp(20px,4vw,64px); }
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1.2fr 1.2fr;
  gap:clamp(28px,4vw,64px); padding-bottom:48px;
}
.footer-brand img{ height:44px; width:auto; margin-bottom:18px; /* filter:brightness(0) invert(1); <- if logo is dark */ }
.footer-brand p{ max-width:360px; line-height:1.7; font-size:14.5px; color:rgba(255,255,255,.62); }
.footer-social{ display:flex; gap:10px; margin-top:22px; }
.footer-social a{
  width:38px; height:38px; display:grid; place-items:center; color:#fff;
  border:1px solid rgba(255,255,255,.16); border-radius:10px; background:rgba(255,255,255,.04);
  transition:background .2s, border-color .2s, transform .2s;
}
.footer-social a:hover{ background:var(--blue); border-color:var(--blue); transform:translateY(-3px); }
.footer-col h5{
  position:relative; margin:0 0 20px; padding-bottom:12px;
  font-family:var(--font-display); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:#fff;
}
.footer-col h5::after{ content:""; position:absolute; left:0; bottom:0; width:28px; height:2px; background:var(--blue); }
.footer-col a, .footer-col p{ display:block; margin:0 0 12px; font-size:14.5px; color:rgba(255,255,255,.70); }
.footer-col a{ transition:color .2s, transform .2s; }
.footer-col a:hover{ color:#fff; transform:translateX(4px); }
.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  padding:22px 0; border-top:1px solid rgba(255,255,255,.10);
  font-size:13px; color:rgba(255,255,255,.55);
}
.footer-tag{ color:#7FA8F9; letter-spacing:.06em; }

/* ============ Page hero (all inner pages) ============ */
.page-hero{
  position:relative; overflow:hidden; color:#fff;
  padding:clamp(90px,11vw,150px) 0 clamp(70px,8vw,110px);
  background:
    radial-gradient(60% 90% at 12% 0%, rgba(43,110,242,.45), transparent 60%),
    radial-gradient(50% 80% at 95% 100%, rgba(43,110,242,.28), transparent 60%),
    linear-gradient(135deg, var(--navy-2) 0%, var(--navy) 100%);
}
.page-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
          mask-image:radial-gradient(ellipse at 30% 40%, #000 20%, transparent 75%);
  animation:gridDrift 4s linear infinite;
}
@keyframes gridDrift{ to{ background-position:56px 56px; } }
.hero-orb{ position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; }
.orb-1{ width:360px; height:360px; top:-80px; right:8%; background:rgba(43,110,242,.35); animation:orbFloat 12s ease-in-out infinite; }
.orb-2{ width:260px; height:260px; bottom:-90px; left:10%; background:rgba(91,146,247,.25); animation:orbFloat 15s ease-in-out infinite reverse; }
@keyframes orbFloat{ 50%{ transform:translate(40px,-30px) scale(1.12); } }

.page-hero .container{ position:relative; }
/* staggered entrance for whatever sits inside the hero container */
.page-hero .container > *{ animation:revealUp .8s ease both; }
.page-hero .container > *:nth-child(2){ animation-delay:.12s; }
.page-hero .container > *:nth-child(3){ animation-delay:.24s; }
.page-hero .container > *:nth-child(4){ animation-delay:.36s; }
.page-hero .container > *:nth-child(5){ animation-delay:.48s; }

.page-hero .eyebrow{ color:var(--blue-light); }
.page-hero .breadcrumb{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:26px;
  padding:7px 16px; border-radius:999px; font-size:13px;
  color:rgba(255,255,255,.75); border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05);
}
.page-hero .breadcrumb a{ color:#fff; }
.page-hero .breadcrumb i{ font-style:normal; opacity:.4; }
.page-hero h1{ font-size:clamp(32px,5vw,58px); line-height:1.1; color:#fff; margin:0 0 22px; max-width:26ch; }
.page-hero h1 em{
  font-style:normal;
  background:linear-gradient(90deg,#5B92F7,#9DBBFA,#5B92F7); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:shine 5s linear infinite;
}
@keyframes shine{ to{ background-position:200% center; } }
.page-hero p{ max-width:680px; font-size:18px; line-height:1.7; color:rgba(255,255,255,.75); margin:0 0 32px; }
.hero-chips{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.hero-chips span{
  padding:8px 18px; border-radius:999px; font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; border:1px solid rgba(43,110,242,.55); background:rgba(43,110,242,.15);
}
.hero-chips i{
  width:34px; height:2px; background:repeating-linear-gradient(90deg,var(--blue) 0 6px,transparent 6px 12px);
  background-size:12px 2px; animation:dashFlow 1s linear infinite;
}

/* ============ ERP page ============ */
/* ========== WHAT'S INCLUDED: numbered glass cards ========== */
.service-grid{
  counter-reset: svc;
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
}
.service-card{
  counter-increment: svc;
  position:relative; overflow:hidden;
  padding:28px 24px 26px; border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.service-card::before{                       /* 01 – 13 */
  content: counter(svc, decimal-leading-zero);
  display:block; margin-bottom:18px;
  font:700 30px 'Space Grotesk',sans-serif; color:rgba(91,146,247,.5);
  transition:color .3s;
}
.service-card::after{                        /* blue line draws across the top */
  content:""; position:absolute; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--blue),#213765); transition:width .5s ease;
}
.service-card h4{ margin:0 0 8px; font-size:17px; color:#fff; }
.service-card p{ margin:0; font-size:14px; line-height:1.6; color:rgba(255,255,255,.68); }
.service-card:hover{
  transform:translateY(-8px); border-color:rgba(43,110,242,.8);
  background:linear-gradient(160deg,rgba(43,110,242,.22),rgba(255,255,255,.03));
  box-shadow:0 24px 48px -16px rgba(43,110,242,.55);
}
.service-card:hover::before{ color:#7FA8F9; }
.service-card:hover::after{ width:100%; }
.service-card:last-child{ grid-column:1 / -1; display:flex; align-items:center; flex-wrap:wrap; }   /* 13th card spans the last row */
.service-card:last-child::before{ display:inline-block; margin:0 16px 0 0; }
.service-card:last-child h4{ margin:0 16px 0 0; }

/* ========== IMPLEMENTATION PROCESS ========== */
.impl-section, .mod-section{ padding:clamp(56px,7vw,100px) 0; }
.impl-section{ background:linear-gradient(180deg,#f4f7fd,#fff); }
.impl-section .section-head{ text-align:center; max-width:760px; margin:0 auto 56px; }
.impl-section .about-h2{ margin-bottom:14px; }

.impl-timeline{
  display:grid; grid-template-columns:repeat(5,1fr); gap:28px 24px;
}
.impl-step{
  position:relative; text-align:center;
  padding:26px 18px 24px; border-radius:16px; background:#fff;
  border:1px solid #dfe6f3; box-shadow:0 10px 30px -20px rgba(16,42,86,.35);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.impl-step:hover{
  transform:translateY(-8px); border-color:var(--blue);
  box-shadow:0 28px 48px -22px rgba(43,110,242,.45);
}
.impl-num{
  display:grid; place-items:center; width:52px; height:52px; margin:0 auto 16px;
  border-radius:50%; font:700 17px 'Space Grotesk',sans-serif; color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--navy-2));
  box-shadow:0 0 0 7px rgba(43,110,242,.10);
  transition:transform .3s ease, box-shadow .3s ease;
}
.impl-step:hover .impl-num{ transform:scale(1.12); box-shadow:0 0 0 11px rgba(43,110,242,.16); }
.impl-step h4{ margin:0 0 6px; font-size:17px; color:var(--navy); }
.impl-step p{ margin:0; font-size:14px; line-height:1.55; color:#4a5568; }

/* animated connector to the next step */
.impl-step::after{
  content:""; position:absolute; top:51px; left:100%; width:24px; height:2px;
  background:repeating-linear-gradient(90deg,var(--blue) 0 6px,transparent 6px 12px);
  background-size:12px 2px; animation:dashFlow 1s linear infinite; opacity:.7;
}
.impl-step:nth-child(5n)::after{ display:none; }

/* ========== MODULES WE CONFIGURE ========== */
.mod-split{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center;
}
.check-list{
  position:relative; overflow:hidden; list-style:none; margin:0; padding:26px;
  display:grid; gap:4px; border-radius:18px; color:#fff;
  background:linear-gradient(160deg,var(--navy-2),var(--navy));
  border:1px solid rgba(43,110,242,.35);
  box-shadow:0 30px 60px -24px rgba(11,18,32,.6);
}
.check-list::after{                          /* floating glow */
  content:""; position:absolute; width:240px; height:240px; top:-90px; right:-70px; border-radius:50%;
  background:rgba(43,110,242,.35); filter:blur(50px); pointer-events:none;
  animation:orbFloat 12s ease-in-out infinite;
}
.check-list li{
  position:relative; z-index:1; padding:14px 14px 14px 54px; border-radius:10px;
  font-size:15.5px; color:rgba(255,255,255,.85);
  transition:background .25s ease, transform .25s ease, color .25s ease;
}
.check-list li::before{
  content:""; position:absolute; left:14px; top:50%; width:26px; height:26px; transform:translateY(-50%);
  border-radius:50%; border:1px solid rgba(43,110,242,.6);
  background:rgba(43,110,242,.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239DBBFA' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/13px no-repeat;
  transition:background-color .25s ease, transform .25s ease;
}
.check-list li:hover{ background:rgba(43,110,242,.20); color:#fff; transform:translateX(6px); }
.check-list li:hover::before{ background-color:var(--blue); transform:translateY(-50%) scale(1.12); }

/* ============ Keyword chips (industries page) ============ */
.chip-row{ display:flex; flex-wrap:wrap; gap: 10px; }
.chip{
  border: 1px solid var(--line-2);
  padding: 8px 16px;
  font-size: 13.5px;
  color: var(--navy);
  border-radius: 999px;
}

/* ============ Contact page ============ */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items:start;
}
@media (max-width: 940px){ .contact-grid{ grid-template-columns: 1fr; } }

.contact-card{
  border: 1px solid var(--line);
  padding: 24px 26px;
  display:flex;
  gap: 16px;
  margin-bottom: 16px;
}
.contact-card .c-icon{
  flex:none;
  width: 42px; height:42px;
  background: var(--blue-pale);
  display:flex; align-items:center; justify-content:center;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.contact-card h4{ font-size: 15px; margin-bottom: 4px; }
.contact-card p, .contact-card a{ font-size: 14px; color: var(--slate); }
.contact-card a:hover{ color: var(--blue); }

.form-panel{
  border: 1px solid var(--line);
  padding: 34px;
  background: #fff;
}
.form-panel h3{ font-size: 20px; margin-bottom: 6px; }
.form-panel > p{ color: var(--slate); font-size: 14px; margin-bottom: 24px; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-row.single{ grid-template-columns: 1fr; }
@media (max-width: 560px){ .form-row{ grid-template-columns: 1fr; } }
.field label{
  display:block;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 7px;
}
.field input, .field select, .field textarea{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 3px;
  color: var(--ink);
  background: #fcfdff;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline: none;
  border-color: var(--blue);
  background: #fff;
}
.field textarea{ resize: vertical; min-height: 96px; }
.form-note{ font-size: 12.5px; color: var(--slate-light); margin-top: 14px; }

.slot-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 16px; }
.slot-btn{
  border: 1px solid var(--line-2);
  background: #fcfdff;
  padding: 10px 8px;
  font-size: 13px;
  text-align:center;
  border-radius: 3px;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.slot-btn.selected, .slot-btn:hover{ border-color: var(--blue); color: var(--blue); background: var(--blue-pale); }
@media (max-width: 500px){ .slot-grid{ grid-template-columns: repeat(2,1fr); } }

.form-success{
  display:none;
  text-align:center;
  padding: 40px 20px;
}
.form-success.show{ display:block; }
.form-success .fs-mark{
  width: 56px; height:56px;
  margin: 0 auto 18px;
  background: var(--blue-pale);
  color: var(--blue);
  display:flex; align-items:center; justify-content:center;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.form-success h3{ margin-bottom: 10px; }
.form-success p{ color: var(--slate); font-size: 14.5px; }

/* ============ FAQ (contact) ============ */
.faq-item{ border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq-item summary{
  cursor:pointer;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--navy);
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; color: var(--blue); font-size:20px; flex:none; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{ margin-top: 12px; color: var(--slate); font-size: 14.5px; }

/* ============ Floating action buttons ============ */
.fab-stack{
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 900;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: 14px;
}
.fab{
  width: 56px; height:56px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border: none;
  cursor:pointer;
  box-shadow: 0 10px 26px -8px rgba(10,27,51,.4);
  transition: transform .15s ease;
}
.fab:hover{ transform: translateY(-2px) scale(1.03); }
.fab-whatsapp{ background: #25D366; color:#fff; }
.fab-chat{ background: var(--blue); color:#fff; }

/* ============ Chatbot widget ============ */
/* ============ Chat widget: on-theme ============ */
.chat-window{
  position: fixed; right: 22px; bottom: 92px;
  width: 372px; max-width: calc(100vw - 32px);
  height: 500px; max-height: calc(100vh - 140px);
  background:#fff; border-radius: 20px; overflow:hidden;
  border: 1px solid rgba(43,110,242,.12);
  box-shadow: 0 40px 70px -24px rgba(11,18,32,.35), 0 0 0 1px rgba(255,255,255,.6) inset;
  z-index: 950; display:flex; flex-direction:column;
  transform: translateY(20px) scale(.97); opacity:0; pointer-events:none;
  transition: opacity .25s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.chat-window.open{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }

/* header: gradient navy, matches founder-card / check-list */
.chat-head{
  position:relative; overflow:hidden;
  background: linear-gradient(150deg, var(--navy-2, #102A56), var(--navy, #0B1220));
  color:#fff; padding: 18px 18px; display:flex; align-items:center; gap: 12px;
}
.chat-head::before{               /* soft glow, echoes founder-card::before */
  content:""; position:absolute; width:180px; height:180px; top:-80px; right:-60px;
  border-radius:50%; background:rgba(43,110,242,.4); filter:blur(40px); pointer-events:none;
}
.chat-head::after{                /* glowing bottom edge, matches footer top line */
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--blue, #2B6EF2) 30%, #5B92F7 50%, var(--blue, #2B6EF2) 70%, transparent);
}
.chat-head .ch-dot{
  position:relative; z-index:1;
  width:10px; height:10px; border-radius:50%; background:#3ddc84; flex:none;
  box-shadow:0 0 0 0 rgba(61,220,132,.6);
  animation: chDotPulse 2.2s ease-out infinite;
}
@keyframes chDotPulse{
  0%{ box-shadow:0 0 0 0 rgba(61,220,132,.5); }
  70%{ box-shadow:0 0 0 7px rgba(61,220,132,0); }
  100%{ box-shadow:0 0 0 0 rgba(61,220,132,0); }
}
.chat-head strong{ position:relative; z-index:1; font-family: var(--font-display); font-size: 14.5px; display:block; }
.chat-head span{ position:relative; z-index:1; font-size: 12px; color: rgba(255,255,255,.65); }
.chat-close{
  position:relative; z-index:1; margin-left:auto;
  width:28px; height:28px; display:grid; place-items:center;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:50%;
  color:#fff; font-size:18px; cursor:pointer; line-height:1;
  transition: background .2s ease, transform .2s ease;
}
.chat-close:hover{ background: var(--blue, #2B6EF2); transform: rotate(90deg); }

/* body */
.chat-body{
  flex:1; overflow-y:auto; padding: 18px 16px; display:flex; flex-direction:column; gap: 10px;
  background: var(--blue-pale-2, #f4f7fd);
}
.chat-body::-webkit-scrollbar{ width:6px; }
.chat-body::-webkit-scrollbar-thumb{ background: rgba(43,110,242,.25); border-radius:4px; }

.chat-msg{
  max-width: 86%; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height:1.55;
  opacity:0; animation: chMsgIn .3s ease forwards;
}
@keyframes chMsgIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
.chat-msg.bot{
  background:#fff; border: 1px solid var(--line, #e3e8f2); color: var(--navy, #0B1220);
  align-self:flex-start; border-bottom-left-radius:4px;
  box-shadow: 0 6px 16px -12px rgba(16,42,86,.3);
}
.chat-msg.user{
  background: linear-gradient(135deg, var(--blue, #2B6EF2), #4a7ef5);
  color:#fff; align-self:flex-end; border-bottom-right-radius:4px;
  box-shadow: 0 8px 18px -10px rgba(43,110,242,.5);
}

.chat-options{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.chat-option{
  text-align:left; background:#fff; border: 1px solid var(--line-2, #dfe6f3);
  padding: 10px 14px; font-size: 13px; border-radius: 12px; color: var(--navy, #0B1220);
  cursor:pointer;
  transition: border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.chat-option:hover{
  border-color: var(--blue, #2B6EF2); color: var(--blue, #2B6EF2);
  transform: translateX(3px);
  box-shadow: 0 8px 18px -12px rgba(43,110,242,.35);
}

/* typing indicator, if your JS adds a .chat-msg.bot.typing */
.chat-typing{ display:flex; gap:4px; padding:4px 2px; }
.chat-typing span{
  width:6px; height:6px; border-radius:50%; background: rgba(43,110,242,.5);
  animation: chTyping 1.1s ease-in-out infinite;
}
.chat-typing span:nth-child(2){ animation-delay:.15s; }
.chat-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes chTyping{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }

/* footer / input */
.chat-foot{
  padding: 14px; border-top: 1px solid var(--line, #e3e8f2); display:flex; gap:8px; background:#fff;
}
.chat-foot input{
  flex:1; border: 1px solid var(--line-2, #dfe6f3); border-radius: 22px;
  padding: 11px 18px; font-size: 13.5px; color: var(--navy, #0B1220);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.chat-foot input:focus{
  outline:none; border-color: var(--blue, #2B6EF2);
  box-shadow: 0 0 0 3px rgba(43,110,242,.15);
}
.chat-foot button{
  background: linear-gradient(135deg, var(--blue, #2B6EF2), var(--navy-2, #102A56));
  color:#fff; border:none; width: 40px; height:40px; border-radius:50%; flex:none;
  display:grid; place-items:center; cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.chat-foot button:hover{
  transform: scale(1.08) rotate(8deg);
  box-shadow: 0 10px 22px -10px rgba(43,110,242,.55);
}

@media (max-width:480px){
  .chat-window{ right:16px; bottom:80px; width: calc(100vw - 32px); height: 65vh; }
}
@media (prefers-reduced-motion: reduce){
  .chat-head .ch-dot{ animation:none; }
  .chat-msg{ animation:none; opacity:1; }
  .chat-typing span{ animation:none; }
}

/* ============ About page ============ */
.about-story .split, .about-mv .split{ grid-template-columns:1.2fr 1fr; }
.about-mv .split{ grid-template-columns:1fr 1fr; gap:28px; align-items:stretch; }
.about-story, .about-mv{ padding:clamp(56px,7vw,100px) 0; }

/* ========== FOUNDER CARD ========== */
.founder-card{
  position:relative; display:flex; gap:22px; align-items:flex-start; padding:32px; border-radius:18px; color:#fff; overflow:hidden;
  background:linear-gradient(160deg,var(--navy-2),var(--navy));
  border:1px solid rgba(43,110,242,.35);
  box-shadow:0 30px 60px -24px rgba(11,18,32,.6);
  transition:transform .35s ease, box-shadow .35s ease;
}
.founder-card::before{ content:""; position:absolute; width:240px; height:240px; top:-90px; right:-70px; border-radius:50%; background:rgba(43,110,242,.35); filter:blur(50px); }
.founder-card:hover{ transform:translateY(-6px); box-shadow:0 40px 70px -24px rgba(43,110,242,.5); }
.founder-avatar{
  position:relative; flex:none; width:68px; height:68px; display:grid; place-items:center; border-radius:50%;
  font:700 26px 'Space Grotesk',sans-serif; color:#fff; background:var(--blue);
}
.founder-avatar::after{
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border:2px dashed rgba(91,146,247,.7); animation:spin 14s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.founder-card h4{ margin:0 0 4px; font-size:20px; color:#fff; }
.founder-role{ display:block; margin-bottom:12px; font-size:13px; letter-spacing:.04em; color:#7FA8F9; }
.founder-card p{ margin:0; font-size:14.5px; line-height:1.7; color:rgba(255,255,255,.72); position:relative; }

/* ========== STEPS STRIP ========== */
.about-steps{ padding:0 0 clamp(56px,7vw,100px); padding-top: clamp(64px, 8vw, 110px); }
.steps-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; position:relative; }
.steps-row::before{      /* line running behind the three steps */
  content:""; position:absolute; top:34px; left:8%; right:8%; height:2px;
  background:repeating-linear-gradient(90deg,var(--blue) 0 8px,transparent 8px 16px); opacity:.35;
}
.step{ position:relative; text-align:center; padding:0 12px; }
.step span{
  position:relative; display:inline-grid; place-items:center; width:68px; height:68px; margin-bottom:18px;
  border-radius:50%; font:700 18px 'Space Grotesk',sans-serif; color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--navy-2)); box-shadow:0 0 0 8px rgba(43,110,242,.10);
  transition:transform .3s ease, box-shadow .3s ease;
}
.step:hover span{ transform:scale(1.1); box-shadow:0 0 0 12px rgba(43,110,242,.16); }
.step h4{ margin:0 0 8px; font-size:18px; color:var(--navy); }
.step p{ margin:0 auto; max-width:260px; font-size:14.5px; line-height:1.6; color:#4a5568; }

/* ========== MISSION / VISION ========== */
.about-mv{ background:linear-gradient(180deg,#e4eaf7,#e4edf1); }
.mv-card{
  position:relative; overflow:hidden; padding:36px 32px; border-radius:18px; background:#fff;
  border:1px solid #dfe6f3; box-shadow:0 10px 30px -18px rgba(16,42,86,.35);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.mv-card::after{       /* blue bar draws in on hover */
  content:""; position:absolute; left:0; bottom:0; height:3px; width:0; background:linear-gradient(90deg,var(--blue),#9DBBFA);
  transition:width .5s ease;
}
.mv-card:hover{ transform:translateY(-8px); border-color:var(--blue); box-shadow:0 30px 50px -22px rgba(43,110,242,.45); }
.mv-card:hover::after{ width:100%; }
.mv-icon{
  width:56px; height:56px; margin-bottom:22px; display:grid; place-items:center; border-radius:14px;
  background:rgba(43,110,242,.10); border:1px solid rgba(43,110,242,.3); transition:transform .3s, background .3s;
}
.mv-card:hover .mv-icon{ background:var(--blue); transform:rotate(-6deg) scale(1.06); }
.mv-card:hover .mv-icon svg{ stroke:#fff; }
.mv-card h3{ margin:0 0 12px; font-size:24px; color:var(--navy); }
.mv-card p{ margin:0; font-size:16px; line-height:1.7; color:#4a5568; }

/* ========== VALUES (dark) ========== */
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.value-card{
  position:relative; overflow:hidden; padding:30px 26px; border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.value-card::before{      /* light sweep on hover */
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent); transform:skewX(-20deg);
}
.value-card:hover::before{ left:130%; transition:left .8s ease; }
.value-card:hover{
  transform:translateY(-8px); border-color:rgba(43,110,242,.8);
  background:linear-gradient(160deg,rgba(43,110,242,.22),rgba(255,255,255,.03));
  box-shadow:0 24px 48px -16px rgba(43,110,242,.55);
}
.v-num{ display:block; margin-bottom:16px; font:700 34px 'Space Grotesk',sans-serif; color:rgba(91,146,247,.55); transition:color .3s; }
.value-card:hover .v-num{ color:#7FA8F9; }
.value-card h4{ margin:0 0 8px; font-size:18px; color:#fff; }
.value-card p{ margin:0; font-size:14.5px; line-height:1.65; color:rgba(255,255,255,.68); }

/* ============ Responsive ============ */
@media (max-width:1100px){
  .service-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:980px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width:960px){
  .about-story .split, .about-mv .split{ grid-template-columns:1fr; }
  .values-grid{ grid-template-columns:1fr 1fr; }
  .steps-row{ grid-template-columns:1fr; }
  .steps-row::before{ display:none; }
}
@media (max-width:900px){
  .split{ grid-template-columns:1fr; gap:36px; }
  .service-grid{ grid-template-columns:repeat(2,1fr); }
  .impl-timeline{ grid-template-columns:repeat(2,1fr); }
  .impl-step:nth-child(5n)::after{ display:block; }
  .impl-step:nth-child(2n)::after{ display:none; }
  .mod-split{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; text-align:center; }
  .cta-band .cta-actions .btn, .hero-ctas .btn{ width:100%; justify-content:center; }
  .service-grid, .impl-timeline, .values-grid{ grid-template-columns:1fr; }
  .impl-step::after{ display:none !important; }
  .service-card:last-child{ display:block; }
  .service-card:last-child::before{ display:block; margin:0 0 18px; }
  .founder-card{ flex-direction:column; }
  .hero-chips i{ display:none; }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  .page-hero::before, .hero-orb, .founder-avatar::after, .hero-chips i, .page-hero h1 em,
  .impl-step::after, .check-list::after{ animation:none; }
}

/* ============ Legacy (remove if no page still uses .why-grid) ============ */
/* ============ Why grid (legacy, kept for other pages) ============ */
.why-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.why-item{ display:flex; gap:16px; }
.why-item .w-icon{
  flex:none;
  width: 40px; height:40px;
  background: var(--blue-pale);
  display:flex; align-items:center; justify-content:center;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.why-item h4{ font-size: 16px; margin-bottom: 6px; }
.why-item p{ font-size: 14.5px; color: var(--slate); }
@media (max-width: 860px){ .why-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .why-grid{ grid-template-columns: 1fr; } }

/* Consulting Page */

/* ============ Process engagement list (Consulting page) ============ */
.process-list{ display:flex; flex-direction:column; gap:0; max-width:900px; margin:0 auto; }
.process-row{
  position:relative; display:flex; gap:28px; align-items:flex-start;
  padding:32px 8px; border-bottom:1px solid var(--line, #e3e8f2);
  transition:padding-left .3s ease;
}
.process-row:first-child{ padding-top:8px; }
.process-row:last-child{ border-bottom:none; padding-bottom:8px; }
.process-row:hover{ padding-left:16px; }

.p-num{
  flex:none; display:grid; place-items:center; width:60px; height:60px;
  border-radius:50%; font:700 20px 'Space Grotesk',sans-serif; color:#fff;
  background:linear-gradient(135deg, var(--blue), var(--navy-2));
  box-shadow:0 0 0 7px rgba(43,110,242,.10);
  transition:transform .3s ease, box-shadow .3s ease;
}
.process-row:hover .p-num{ transform:scale(1.1); box-shadow:0 0 0 11px rgba(43,110,242,.16); }

.process-row h4{ margin:0 0 8px; font-size:19px; color:var(--navy); }
.process-row p{ margin:0; max-width:560px; font-size:15.5px; line-height:1.7; color:#4a5568; }

/* connecting line running down through the numbers */
.process-list{ position:relative; }
.process-list::before{
  content:""; position:absolute; left:30px; top:38px; bottom:38px; width:2px; z-index:0;
  background:repeating-linear-gradient(180deg, var(--blue) 0 8px, transparent 8px 16px);
  opacity:.3;
}
.p-num{ position:relative; z-index:1; }

@media (max-width:640px){
  .process-row{ gap:18px; padding:24px 4px; }
  .process-row:hover{ padding-left:4px; }
  .p-num{ width:48px; height:48px; font-size:16px; }
  .process-list::before{ left:24px; }
}

/* ============ Sectors We Serve (light) ============ */
.sectors-section{ padding: clamp(56px,7vw,100px) 0; background:#fff; }
.sectors-section .section-head{ text-align:center; max-width:760px; margin:0 auto 52px; }
.sectors-section .about-h2{ margin:0 0 14px; }

.sector-grid{
  counter-reset: sect;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:22px;
}
.sector-card{
  counter-increment: sect;
  position:relative; overflow:hidden;
  padding:28px 24px 26px; border-radius:16px;
  background:#fff; border:1px solid var(--line-2, #dfe6f3);
  box-shadow:0 10px 30px -22px rgba(16,42,86,.35);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.sector-card::before{
  content: counter(sect, decimal-leading-zero);
  display:inline-grid; place-items:center;
  width:44px; height:44px; margin-bottom:18px; border-radius:12px;
  font:700 15px 'Space Grotesk',sans-serif; color:var(--blue);
  background: var(--blue-pale, rgba(43,110,242,.08));
  border:1px solid rgba(43,110,242,.25);
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.sector-card::after{                       /* accent bar draws in on hover */
  content:""; position:absolute; left:0; bottom:0; height:3px; width:0;
  background:linear-gradient(90deg, var(--blue), #9DBBFA);
  transition:width .45s ease;
}
.sector-card h4{ margin:0 0 8px; font-size:16.5px; color:var(--navy); }
.sector-card p{ margin:0; font-size:14px; line-height:1.6; color:#4a5568; }

.sector-card:hover{
  transform: translateY(-8px);
  border-color: rgba(43,110,242,.5);
  box-shadow: 0 26px 46px -22px rgba(43,110,242,.35);
}
.sector-card:hover::before{ background:var(--blue); color:#fff; transform:scale(1.08) rotate(-4deg); }
.sector-card:hover::after{ width:100%; }

/* ============ Manufacturing language (soft blue) ============ */
.lang-section{
  position:relative; overflow:hidden;
  padding: clamp(56px,7vw,100px) 0;
  background: linear-gradient(180deg, var(--blue-pale-2, #eef3fd), #fff);
}
.lang-section::before{                     /* faint fading grid, on-theme, not distracting */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(43,110,242,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,110,242,.06) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 75%);
}
.lang-section .container{ position:relative; }
.lang-section .section-head{ text-align:center; max-width:640px; margin:0 auto 44px; }
.lang-section .about-h2{ margin:0; }

.lang-cloud{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
  max-width:860px; margin:0 auto;
}
.lang-chip{
  padding:11px 22px; border-radius:999px; font-size:14.5px; font-weight:600;
  color:var(--navy); background:#fff; border:1px solid rgba(43,110,242,.25);
  box-shadow:0 6px 16px -10px rgba(16,42,86,.25);
  transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.lang-chip:hover{
  transform: translateY(-4px);
  background: var(--blue); color:#fff; border-color:var(--blue);
  box-shadow:0 14px 28px -12px rgba(43,110,242,.5);
}

/* ============ Responsive ============ */
@media (max-width:640px){
  .sector-grid{ grid-template-columns:1fr; }
  .lang-chip{ padding:9px 18px; font-size:13.5px; }
}

/* ============ What We Cover (light, own component) ============ */
.cover-section{ padding: clamp(56px,7vw,100px) 0; background:#fff; }
.cover-section .section-head{ text-align:center; max-width:720px; margin:0 auto 52px; }
.cover-section .about-h2{ margin:0; }

.cover-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
}
.cover-wide{ grid-column: span 2; }

.cover-card{
  position:relative; overflow:hidden;
  padding:30px 26px 28px; border-radius:16px;
  background: linear-gradient(180deg, #fff, var(--blue-pale-2, #f4f7fd));
  border:1px solid var(--line-2, #dfe6f3);
  box-shadow: 0 10px 28px -22px rgba(16,42,86,.4);
  transition: transform .35s ease, border-color .3s ease, box-shadow .35s ease;
}
.cover-card::before{                      /* diagonal accent corner */
  content:""; position:absolute; top:-40px; right:-40px; width:110px; height:110px;
  background: radial-gradient(circle, rgba(43,110,242,.14), transparent 70%);
  transition: transform .4s ease, opacity .4s ease;
}
.cover-card::after{                       /* bottom accent bar draws in */
  content:""; position:absolute; left:0; bottom:0; height:3px; width:0;
  background: linear-gradient(90deg, var(--blue), #9DBBFA);
  transition: width .45s ease;
}

.cover-num{
  display:inline-block; margin-bottom:16px;
  font: 700 30px 'Space Grotesk', sans-serif;
  color: rgba(43,110,242,.28);
  transition: color .3s ease, transform .3s ease;
}
.cover-card h4{ margin:0 0 8px; font-size:17px; color: var(--navy); }
.cover-card p{ margin:0; font-size:14.5px; line-height:1.65; color:#4a5568; }

.cover-card:hover{
  transform: translateY(-8px);
  border-color: rgba(43,110,242,.5);
  box-shadow: 0 30px 50px -24px rgba(43,110,242,.4);
}
.cover-card:hover::before{ transform: scale(1.4); opacity:.7; }
.cover-card:hover::after{ width:100%; }
.cover-card:hover .cover-num{ color: var(--blue); transform: translateY(-2px); }

@media (max-width:1100px){
  .cover-grid{ grid-template-columns: repeat(2, 1fr); }
  .cover-wide{ grid-column: span 2; }
}
@media (max-width:560px){
  .cover-grid{ grid-template-columns: 1fr; }
  .cover-wide{ grid-column: span 1; }
}

/* ============ AI section: consolidated, final ============ */
.ai-section{
  position:relative;
  background:
    radial-gradient(70% 60% at 50% -10%, rgba(43,110,242,.10), transparent 65%),
    radial-gradient(50% 50% at 100% 100%, rgba(43,110,242,.06), transparent 60%),
    linear-gradient(180deg, #F6F9FF 0%, #FFFFFF 55%);
  padding-block: clamp(72px, 9vw, 120px);
}

.ai-section .eyebrow-pill{
  display:inline-flex; align-items:center; gap:8px;
  font: 600 13px/1 "Space Grotesk", sans-serif;
  letter-spacing:.01em; color:var(--blue);
  padding:8px 16px; border-radius:999px;
  background:rgba(43,110,242,.08); border:1px solid rgba(43,110,242,.2);
}

.ai-section .section-head{ text-align:center; max-width:720px; margin:0 auto 56px; }

.ai-section .about-h2{
  margin:14px 0 0;
  font-family:"Space Grotesk", sans-serif;
  font-weight:600;
  font-size:clamp(28px, 3.6vw, 42px);
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--navy);
}
.ai-section .about-h2 span{ color:var(--blue); }

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

/* card shell */
.ai-card{
  position:relative; overflow:hidden; z-index:1;
  padding:32px 28px 28px; border-radius:18px;
  background:
    linear-gradient(180deg, rgba(43,110,242,.04), transparent 40%),
    #ffffff;
  border:1px solid rgba(16,42,86,.08);
  box-shadow:0 1px 2px rgba(16,42,86,.04);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;

  /* fallback: visible by default so content never depends on JS running */
  opacity:1; transform:none;
}
.ai-card:hover{
  transform: translateY(-6px);
  border-color: rgba(43,110,242,.35);
  box-shadow: 0 24px 40px -26px rgba(43,110,242,.45);
}

/* progressive enhancement: only animate FROM hidden state if JS has added .will-reveal */
.ai-card.will-reveal{ opacity:0; transform:translateY(18px); }
.ai-card.will-reveal.is-visible{
  opacity:1; transform:translateY(0);
  transition: opacity .6s ease calc(var(--i) * 80ms),
              transform .6s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 80ms);
}

/* heading */
.ai-card h4{
  position:relative; display:inline-block;
  margin:0 0 12px; padding-bottom:10px;
  font-family:"Space Grotesk", sans-serif;
  font-weight:600; font-size:17.5px; letter-spacing:-.005em; color:var(--navy);
  transition: color .3s ease;
}
.ai-card h4::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:26px;
  background:var(--blue);
  transform:scaleX(1); transform-origin:left center;
  transition: width .3s ease;
}
.ai-card.will-reveal h4::after{ transform:scaleX(0); }
.ai-card.will-reveal.is-visible h4::after{
  transform:scaleX(1);
  transition: transform .5s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 80ms + 200ms);
}
.ai-card:hover h4{ color:var(--blue); }
.ai-card:hover h4::after{ width:100%; }

/* description */
.ai-card p{
  margin:0; padding-left:1px;
  font-size:14.5px; line-height:1.7; color:#5a6478;
  max-width:32ch;
  transition: color .35s ease;
  opacity:1; transform:none; filter:none;
}
.ai-card.will-reveal p{ opacity:0; transform:translateY(8px); filter:blur(2px); }
.ai-card.will-reveal.is-visible p{
  opacity:1; transform:translateY(0); filter:blur(0);
  transition: opacity .55s ease calc(var(--i) * 80ms + 340ms),
              transform .55s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 80ms + 340ms),
              filter .55s ease calc(var(--i) * 80ms + 340ms);
}
.ai-card:hover p{ color:#41506e; }
.ai-card p::first-line{ color:#3c4a63; }

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

@media (prefers-reduced-motion: reduce){
  .ai-card, .ai-card p, .ai-card h4::after{ transition:none !important; }
}

/* ============ CAREERS PAGE (cr-*  namespace, unique to this page) ============ */

/* ---- Why Join Us: notch-corner cards on white ---- */
.cr-why{ padding: clamp(56px,7vw,100px) 0;background:
    radial-gradient(70% 60% at 50% -10%, rgba(43,110,242,.10), transparent 65%),
    radial-gradient(50% 50% at 100% 100%, rgba(43,110,242,.06), transparent 60%),
    linear-gradient(180deg, #F6F9FF 0%, #FFFFFF 55%); }
.cr-value-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.cr-value-card{
  position:relative; padding:30px 26px 28px; background:#fff;
  border:1px solid var(--line-2, #dfe6f3);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  transition: background .35s ease, transform .35s ease, box-shadow .35s ease;
}
.cr-value-num{
  display:inline-block; margin-bottom:14px;
  font:700 28px 'Space Grotesk', sans-serif; color: rgba(43,110,242,.3);
  transition: color .3s ease;
}
.cr-value-card h4{ margin:0 0 8px; font-size:17px; color:var(--navy); transition:color .3s ease; }
.cr-value-card p{ margin:0; font-size:14.5px; line-height:1.65; color:#4a5568; transition:color .3s ease; }
.cr-value-card:hover{
  background:
    radial-gradient(60% 90% at 12% 0%, rgba(43,110,242,.45), transparent 60%),
    radial-gradient(50% 80% at 95% 100%, rgba(43,110,242,.28), transparent 60%),
    linear-gradient(135deg, var(--navy-2) 0%, var(--navy) 100%);
      transform: translateY(-8px);
  box-shadow: 0 26px 46px -22px rgba(43,110,242,.4);
}
.cr-value-card:hover .cr-value-num{ color:#9DBBFA; }
.cr-value-card:hover h4{ color:#fff; }
.cr-value-card:hover p{ color:rgba(255,255,255,.72); }

/* ---- Perks: icon cards with fill-in circle ---- */
.cr-perk-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; }
.cr-perk-card{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:26px 22px; border-radius:14px; background:#fff;
  border:1px solid var(--line-2, #dfe6f3);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.cr-perk-icon{
  width:44px; height:44px; margin-bottom:16px; border-radius:50%;
  display:grid; place-items:center;
  background: var(--blue-pale, rgba(43,110,242,.08));
  border:1px solid rgba(43,110,242,.25);
  transition: background .3s ease, transform .3s ease;
}
.cr-perk-card h4{ margin:0 0 6px; font-size:15.5px; color:var(--navy); }
.cr-perk-card p{ margin:0; font-size:13.5px; line-height:1.6; color:#4a5568; }
.cr-perk-card:hover{
  transform: translateY(-6px);
  border-color: rgba(43,110,242,.4);
  box-shadow: 0 18px 34px -20px rgba(43,110,242,.35);
}
.cr-perk-card:hover .cr-perk-icon{ background:var(--blue); transform:scale(1.08) rotate(-6deg); }
.cr-perk-card:hover .cr-perk-icon svg{ stroke:#fff; }

/* ---- Open Positions: rows with left accent + badges ---- */
.cr-positions{ padding: clamp(56px,7vw,100px) 0; background:#fff; }
.cr-job-list{ display:flex; flex-direction:column; gap:16px; max-width:920px; margin:0 auto; }
.cr-job-card{
  position:relative; display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:24px 28px; border-radius:14px; background:#fff;
  border:1px solid var(--line-2, #dfe6f3); border-left:4px solid transparent;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.cr-job-card:hover{
  border-left-color: var(--blue);
  transform: translateX(4px);
  box-shadow: 0 18px 36px -24px rgba(16,42,86,.4);
}
.cr-job-main{ display:flex; flex-direction:column; gap:10px; }
.cr-job-title{ display:flex; align-items:center; gap:10px; font-size:17px; font-weight:600; color:var(--navy); }
.cr-job-badge{
  display:inline-block; padding:3px 12px; border-radius:999px; font-size:11.5px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color:#fff; background:#94a3b8;
}
.cr-job-badge.open{
  background: var(--blue);
  animation: crBadgePulse 2.4s ease-in-out infinite;
}
@keyframes crBadgePulse{
  0%, 100%{ box-shadow:0 0 0 0 rgba(43,110,242,.45); }
  50%{ box-shadow:0 0 0 6px rgba(43,110,242,0); }
}
.cr-job-meta{ display:flex; flex-wrap:wrap; gap:8px; }
.cr-job-tag{
  padding:5px 12px; border-radius:999px; font-size:12.5px; color:#4a5568;
  background: var(--blue-pale-2, #f4f7fd); border:1px solid var(--line-2, #dfe6f3);
}
.cr-job-apply{ flex:none; }
.cr-job-empty{
  border-style:dashed; border-color:var(--line-2, #dfe6f3); border-left-style:dashed;
  background: var(--blue-pale-2, #f4f7fd);
}
.cr-job-empty:hover{ border-left-color:#94a3b8; transform:none; box-shadow:none; }

/* ---- Responsive ---- */
@media (max-width:960px){
  .cr-value-grid{ grid-template-columns:repeat(2, 1fr); }
  .cr-perk-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:700px){
  .cr-job-card{ flex-direction:column; align-items:flex-start; }
  .cr-job-apply{ align-self:stretch; }
  .cr-job-apply .btn{ width:100%; text-align:center; }
}
@media (max-width:560px){
  .cr-value-grid{ grid-template-columns:1fr; }
  .cr-perk-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .cr-job-badge.open{ animation:none; }
}

/* ============ Why Us — dark split section (rhymes with founder-card + step circles) ============ */
.sectors-section1.ai-section{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:
    radial-gradient(50% 60% at 10% 0%, rgba(43,110,242,.30), transparent 60%),
    radial-gradient(45% 55% at 95% 100%, rgba(43,110,242,.22), transparent 60%),
    linear-gradient(160deg, var(--navy-2) 0%, var(--navy) 70%);
  padding-bottom: clamp(90px, 11vw, 150px);

}
.sectors-section1.ai-section::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, #000 25%, transparent 75%);
}
.sectors-section1.ai-section .container{ position:relative; }

.whyus-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 5vw, 72px);
  align-items:start;
}
.whyus-intro .about-h2{ color:#fff; }
.whyus-intro .about-h2 span{ color: var(--blue-light); }
.whyus-intro .about-p{ color: rgba(255,255,255,.68); }

.whyus-lead{
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 23px);
  line-height:1.5;
  color:#fff;
  margin: 25px 0 20px;
}
.whyus-statement{
  position:relative;
  margin-top: 26px;
  padding: 18px 0 18px 24px;
  border-left: 3px solid var(--blue);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.9vw, 21px);
  line-height:1.5;
  color:#fff;
}

.whyus-points{ display:flex; flex-direction:column; gap:16px;  padding-top: clamp(24px, 6vw, 64px);
 }
.whyus-point{
  display:flex; gap:16px; align-items:flex-start;
  padding: 20px 22px;
  border-radius:14px;
  background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.whyus-point:hover{
  transform: translateX(4px);
  border-color: rgba(43,110,242,.7);
  background: linear-gradient(160deg, rgba(43,110,242,.20), rgba(255,255,255,.03));
}
.wp-icon{
  flex:none; width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background: rgba(43,110,242,.16);
  border: 1px solid rgba(43,110,242,.4);
  transition: background .25s ease, transform .25s ease;
}
.whyus-point:hover .wp-icon{ background: var(--blue); transform: scale(1.08); }
.whyus-point:hover .wp-icon svg{ stroke:#fff; }
.whyus-point h4{ font-size: 15px; color:#fff; margin: 0 0 4px; }
.whyus-point p{ font-size: 13px; color: rgba(255,255,255,.6); margin:0; }

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

.error-msg { display:block; color:#e5484d; font-size:13px; margin-top:6px; min-height:0; }
.field input.has-error,
.field select.has-error,
.field textarea.has-error { border-color:#e5484d; }

/* ============================================================
   WEBSITE DEVELOPMENT PAGE  (wb-* namespace)
   Append this block to the END of style.css
   ============================================================ */

/* ---- Hero: text + animated browser mockup ---- */
.wb-hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(32px,5vw,72px); align-items:center; }
.wb-hero-text .hero-ctas{ margin:28px 0 28px; }
.wb-tech{ display:flex; flex-wrap:wrap; gap:10px; }
.wb-tech span{
  padding:6px 14px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:#cfe0ff; border:1px solid rgba(43,110,242,.5); background:rgba(43,110,242,.14);
}

.wb-visual{ position:relative; padding:20px 0 30px; animation:revealUp .9s .3s ease both; }
.wb-browser{
  position:relative; border-radius:14px; overflow:hidden;
  background:#0f1c36; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 70px -24px rgba(0,0,0,.65), 0 0 60px rgba(43,110,242,.25);
  animation:wbBob 7s ease-in-out infinite;
}
@keyframes wbBob{ 50%{ transform:translateY(-10px); } }
.wb-bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; background:rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.08); }
.wb-bar i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.28); }
.wb-bar i:first-child{ background:#ff6b6b; } .wb-bar i:nth-child(2){ background:var(--amber); } .wb-bar i:nth-child(3){ background:#3ddc84; }
.wb-bar span{ margin-left:10px; flex:1; padding:4px 12px; border-radius:999px; font-size:11px; color:rgba(255,255,255,.55); background:rgba(255,255,255,.07); }
.wb-screen{ padding:18px; display:grid; gap:14px; }
.wb-nav{ display:flex; align-items:center; gap:10px; }
.wb-nav b{ width:26px; height:26px; border-radius:7px; background:linear-gradient(135deg,var(--blue),var(--blue-light)); margin-right:auto; }
.wb-nav s{ width:34px; height:6px; border-radius:3px; background:rgba(255,255,255,.2); }
.wb-banner{ padding:22px 18px; border-radius:10px; display:grid; gap:10px; background:linear-gradient(135deg,rgba(43,110,242,.45),rgba(43,110,242,.08)); border:1px solid rgba(91,157,255,.3); }
.wb-line{ display:block; height:9px; border-radius:5px; background:rgba(255,255,255,.75); position:relative; overflow:hidden; }
.wb-line.w70{ width:70%; height:12px; } .wb-line.w50{ width:50%; background:rgba(255,255,255,.35); }
.wb-line::after, .wb-cols div::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); animation:wbShimmer 2.8s ease-in-out infinite;
}
@keyframes wbShimmer{ to{ transform:translateX(100%); } }
.wb-btn{ width:84px; height:22px; border-radius:4px; background:#fff; animation:wbPulse 2.4s ease-in-out infinite; }
@keyframes wbPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,.5); } 50%{ box-shadow:0 0 0 8px rgba(255,255,255,0); } }
.wb-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.wb-cols div{ position:relative; overflow:hidden; height:54px; border-radius:8px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.08); }
.wb-cols div:nth-child(2)::after{ animation-delay:.4s; } .wb-cols div:nth-child(3)::after{ animation-delay:.8s; }
.wb-chart{ display:flex; align-items:flex-end; gap:8px; height:64px; padding:0 4px; }
.wb-chart span{
  flex:1; height:var(--h); border-radius:4px 4px 0 0; transform-origin:bottom;
  background:linear-gradient(180deg,var(--blue-light),var(--blue)); animation:wbGrow 3.6s ease-in-out infinite;
}
.wb-chart span:nth-child(2){ animation-delay:.15s; } .wb-chart span:nth-child(3){ animation-delay:.3s; }
.wb-chart span:nth-child(4){ animation-delay:.45s; } .wb-chart span:nth-child(5){ animation-delay:.6s; } .wb-chart span:nth-child(6){ animation-delay:.75s; }
@keyframes wbGrow{ 0%{ transform:scaleY(.15); } 30%,80%{ transform:scaleY(1); } 100%{ transform:scaleY(.15); } }

/* phone overlapping the browser */
.wb-phone{
  position:absolute; right:-14px; bottom:0; width:92px; padding:10px 8px; border-radius:16px; display:grid; gap:7px;
  background:#0f1c36; border:1px solid rgba(255,255,255,.2); box-shadow:0 24px 40px -14px rgba(0,0,0,.6);
  animation:wbBob 6s ease-in-out -2s infinite;
}
.wb-phone i{ display:block; height:7px; border-radius:4px; background:rgba(255,255,255,.22); }
.wb-phone i:first-child{ height:34px; background:linear-gradient(135deg,rgba(43,110,242,.5),rgba(91,157,255,.25)); }
.wb-phone i:nth-child(3){ width:60%; }

/* floating badges */
.wb-float{
  position:absolute; z-index:2; padding:8px 14px; border-radius:999px; font:600 12px var(--font-display); color:#fff;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 14px 28px -14px rgba(0,0,0,.5); animation:wbFloat 5s ease-in-out infinite;
}
.wb-float::before{ content:""; display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:#3ddc84; }
.wb-float.f1{ top:0; left:-14px; }
.wb-float.f2{ top:42%; left:-30px; animation-delay:-1.6s; }
.wb-float.f3{ bottom:6px; left:22%; animation-delay:-3.2s; }
@keyframes wbFloat{ 50%{ transform:translateY(-9px); } }

/* ---- What we build: bento cards (navy-fill hover, notch corner) ---- */
.wb-build{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--blue-pale-2),#fff);
}
.wb-build::before{               /* faint fading grid, same language as .lang-section */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(43,110,242,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(43,110,242,.06) 1px,transparent 1px);
  background-size:48px 48px; animation:gridDrift 6s linear infinite;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 25%,transparent 75%);
          mask-image:radial-gradient(ellipse at 50% 30%,#000 25%,transparent 75%);
}
.wb-build .container{ position:relative; }
.wb-build .section-head{ text-align:center; max-width:780px; margin:0 auto 56px; }
.wb-build .section-head p{ margin-left:auto; margin-right:auto; max-width:62ch; }

.wb-bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:22px; }
.wb-card{
  position:relative; overflow:hidden; isolation:isolate; grid-column:span 2;
  padding:34px 28px 78px; background:#fff; border:1px solid var(--line-2);
  clip-path:polygon(0 0,100% 0,100% 100%,18px 100%,0 calc(100% - 18px));
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.wb-card:nth-child(n+4){ grid-column:span 3; }
.wb-card::before{                /* navy panel that sweeps up on hover */
  content:""; position:absolute; inset:0; z-index:-1; transform:translateY(101%);
  background:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/40px 40px,
    radial-gradient(60% 90% at 12% 0%,rgba(43,110,242,.5),transparent 60%),
    radial-gradient(50% 80% at 95% 100%,rgba(43,110,242,.3),transparent 60%),
    linear-gradient(135deg,var(--navy-2),var(--navy));
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.wb-card::after{                 /* blue line draws across the top */
  content:""; position:absolute; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--blue),var(--blue-light)); transition:width .55s ease;
}
.wb-no{
  position:absolute; top:12px; right:20px; font:700 56px/1 var(--font-display);
  color:rgba(43,110,242,.12); transition:color .4s ease, transform .4s ease;
}
.wb-card .t-icon{
  width:58px; height:58px; margin-bottom:22px; display:grid; place-items:center; border-radius:15px;
  background:var(--blue-pale); border:1px solid rgba(43,110,242,.28); box-shadow:0 0 0 6px rgba(43,110,242,.05);
  animation:wbTick 4s ease-in-out infinite; animation-delay:calc(var(--i,0) * -.7s);
  transition:background .35s ease, box-shadow .35s ease;
}
@keyframes wbTick{ 50%{ transform:translateY(-5px); } }
.wb-card .t-icon svg{ stroke:var(--blue); transition:stroke .3s ease, transform .4s ease; }
.wb-card h4{ font-size:19px; margin-bottom:10px; transition:color .3s ease; }
.wb-card p{ font-size:14.5px; line-height:1.65; color:#4a5568; max-width:38ch; transition:color .3s ease; }
.wb-arrow{
  position:absolute; left:28px; bottom:26px; width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  color:#fff; background:var(--blue); opacity:0; transform:translateX(-12px);
  transition:opacity .35s ease .1s, transform .35s ease .1s;
}

.wb-card:hover{ transform:translateY(-8px); }
.wb-card:hover::before{ transform:translateY(0); }
.wb-card:hover::after{ width:100%; }
.wb-card:hover .wb-no{ color:rgba(157,187,250,.35); transform:translateY(4px) scale(1.08); }
.wb-card:hover .t-icon{ background:var(--blue); box-shadow:0 0 0 9px rgba(91,157,255,.18); }
.wb-card:hover .t-icon svg{ stroke:#fff; transform:rotate(-8deg) scale(1.1); }
.wb-card:hover h4{ color:#fff; }
.wb-card:hover p{ color:rgba(255,255,255,.75); }
.wb-card:hover .wb-arrow{ opacity:1; transform:translateX(0); }

/* ---- Dark "More than a website" — reuse .module-ring in 3 columns ---- */
.module-ring.cols-3{ grid-template-columns:repeat(3,1fr); }
.module-ring.cols-3 .module-card::after{ display:none; }
.module-ring.cols-3 .module-card::before{ content:"0" counter(mod); }
.modules-section .section-head .eyebrow{ color:#9DBBFA; }
@media (max-width:1024px){ .module-ring.cols-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .module-ring.cols-3{ grid-template-columns:1fr; } }

/* ---- Responsive ---- */
@media (max-width:1000px){
  .wb-bento{ grid-template-columns:1fr 1fr; }
  .wb-card, .wb-card:nth-child(n+4){ grid-column:span 1; }
  .wb-card:nth-child(5){ grid-column:1 / -1; }
}
@media (max-width:900px){
  .wb-hero-grid{ grid-template-columns:1fr; }
  .wb-visual{ max-width:460px; margin:0 auto; width:100%; }
}
@media (max-width:640px){
  .wb-float.f2{ display:none; } .wb-float.f1{ left:0; }
  .wb-phone{ right:0; }
}
@media (max-width:620px){ .wb-bento{ grid-template-columns:1fr; } .wb-card:nth-child(5){ grid-column:auto; } }

@media (prefers-reduced-motion:reduce){
  .wb-card .t-icon, .wb-build::before, .wb-browser, .wb-phone, .wb-float, .wb-chart span, .wb-btn, .wb-line::after, .wb-cols div::after{ animation:none; }
  .wb-chart span{ transform:none; }
}

/*  Custom Software */

/* ---- Requirement → Workflow → Application (timeline) ---- */
.req-flow{
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 1px 1px,rgba(43,110,242,.14) 1px,transparent 0) 0 0/28px 28px,
    linear-gradient(180deg,#fff,var(--blue-pale-2,#f3f7ff));
}
.req-flow::before{                       /* fade the dots out toward the edges */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 60%,transparent 30%,var(--blue-pale-2,#f3f7ff) 85%);
}
.req-flow .container{ position:relative; }
.req-flow .section-head{ text-align:center; max-width:820px; margin:0 auto 64px; }
.req-flow .section-head p{ max-width:64ch; margin-left:auto; margin-right:auto; }

/* row of 5 equal columns, nodes sit on one line */
.req-flow .chip-row{
  position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:0; counter-reset:step;
}
.req-flow .chip-row::before,
.req-flow .chip-row::after{              /* track + animated fill */
  content:""; position:absolute; top:22px; left:10%; right:10%; height:2px; border-radius:2px;
}
.req-flow .chip-row::before{ background:rgba(43,110,242,.18); }
.req-flow .chip-row::after{
  background:linear-gradient(90deg,var(--blue,#2b6ef2),var(--blue-light,#5b9dff));
  transform-origin:left; transform:scaleX(0);
  animation:reqFill 10s linear infinite;
}

/* chip = numbered node + label (no pill, no box) */
.req-flow .chip{
  position:relative; z-index:1; display:block; padding:0 14px; text-align:center;
  background:none; border:0; box-shadow:none; border-radius:0;
  font-size:15px; font-weight:600; line-height:1.4; color:var(--navy,#0f1c36);
  counter-increment:step;
  animation:reqLabel 10s ease-in-out infinite;
  transition:color .3s ease;
}
.req-flow .chip::before{
  content:counter(step,decimal-leading-zero);
  display:grid; place-items:center; width:46px; height:46px; margin:0 auto 16px; border-radius:50%;
  font:700 14px/1 var(--font-display,inherit);
  color:var(--blue,#2b6ef2); background:#fff;
  border:2px solid rgba(43,110,242,.35);
  box-shadow:0 0 0 6px rgba(43,110,242,.06);
  animation:reqNode 10s ease-in-out infinite;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.req-flow .chip:hover::before{ transform:scale(1.12); }
.req-flow .chip:hover{ color:var(--blue,#2b6ef2); }

/* highlight travels node to node, in step with the fill line */
.req-flow .chip:nth-child(1), .req-flow .chip:nth-child(1)::before{ animation-delay:0s; }
.req-flow .chip:nth-child(2), .req-flow .chip:nth-child(2)::before{ animation-delay:2s; }
.req-flow .chip:nth-child(3), .req-flow .chip:nth-child(3)::before{ animation-delay:4s; }
.req-flow .chip:nth-child(4), .req-flow .chip:nth-child(4)::before{ animation-delay:6s; }
.req-flow .chip:nth-child(5), .req-flow .chip:nth-child(5)::before{ animation-delay:8s; }

@keyframes reqFill{
  0%{ transform:scaleX(0); opacity:1; }
  80%{ transform:scaleX(1); opacity:1; }
  94%{ transform:scaleX(1); opacity:1; }
  100%{ transform:scaleX(1); opacity:0; }
}
@keyframes reqNode{
  0%,22%,100%{ color:var(--blue,#2b6ef2); background:#fff; border-color:rgba(43,110,242,.35);
               box-shadow:0 0 0 6px rgba(43,110,242,.06); }
  4%,16%{ color:#fff; background:var(--blue,#2b6ef2); border-color:var(--blue,#2b6ef2);
          box-shadow:0 0 0 9px rgba(43,110,242,.16), 0 14px 26px -10px rgba(43,110,242,.75); }
}
@keyframes reqLabel{
  0%,22%,100%{ color:var(--navy,#0f1c36); }
  4%,16%{ color:var(--blue,#2b6ef2); }
}

/* ---- Tablet: tighter labels ---- */
@media (max-width:900px){
  .req-flow .chip{ font-size:13.5px; padding:0 8px; }
}

/* ---- Mobile: vertical timeline ---- */
@media (max-width:640px){
  .req-flow .chip-row{ grid-template-columns:1fr; gap:22px; max-width:340px; margin:0 auto; }
  .req-flow .chip-row::before,
  .req-flow .chip-row::after{ top:23px; bottom:23px; left:22px; right:auto; width:2px; height:auto; }
  .req-flow .chip-row::after{ transform-origin:top; transform:scaleY(0); animation-name:reqFillY; }
  .req-flow .chip{ display:flex; align-items:center; gap:18px; padding:0; text-align:left; }
  .req-flow .chip::before{ flex:none; margin:0; }
}
@keyframes reqFillY{
  0%{ transform:scaleY(0); opacity:1; }
  80%,94%{ transform:scaleY(1); opacity:1; }
  100%{ transform:scaleY(1); opacity:0; }
}

/* ---- Reduced motion: show a finished, static state ---- */
@media (prefers-reduced-motion:reduce){
  .req-flow .chip, .req-flow .chip::before{ animation:none; }
  .req-flow .chip-row::after{ animation:none; transform:none; }
}

/* ---- We understand before we recommend ---- */
.biz-insight{
  background:#fff;
}
.biz-insight .split{ align-items:center; gap:clamp(32px,5vw,72px); }

/* left: text with a blue guide line */
.biz-insight .kicker-line{
  position:relative; padding-left:20px; max-width:56ch;
  color:#4a5568; line-height:1.75;
}
.biz-insight .kicker-line::before{
  content:""; position:absolute; left:0; top:.3em; bottom:.3em; width:3px; border-radius:3px;
  background:linear-gradient(180deg,var(--blue,#2b6ef2),var(--blue-light,#5b9dff));
}

/* right: dark "analysis panel" */
.biz-insight .chip-row{
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  padding:28px; border-radius:20px;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/36px 36px,
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/36px 36px,
    radial-gradient(70% 90% at 0% 0%,rgba(43,110,242,.45),transparent 60%),
    linear-gradient(135deg,var(--navy-2,#14264a),var(--navy,#0b1630));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 36px 60px -30px rgba(11,22,48,.7), 0 0 50px rgba(43,110,242,.15);
}

/* scan beam sweeping down the panel */
.biz-insight .chip-row::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 78%,rgba(91,157,255,.28) 96%,rgba(157,187,250,.9) 100%);
  transform:translateY(-100%);
  animation:bizScan 8s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes bizScan{
  0%{ transform:translateY(-100%); }
  65%,100%{ transform:translateY(0); }
}

/* chips: glass pills with a status dot */
.biz-insight .chip{
  position:relative; z-index:1; display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-radius:12px;
  font-size:14px; font-weight:600; line-height:1.35; color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  animation:bizFound 8s ease-in-out infinite;
  transition:transform .3s ease, background .3s ease, border-color .3s ease;
}
.biz-insight .chip::before{
  content:""; flex:none; width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.3);
  animation:bizDot 8s ease-in-out infinite;
}
.biz-insight .chip:hover{
  transform:translateY(-3px); background:rgba(43,110,242,.3); border-color:rgba(157,187,250,.6);
}

/* each row lights up as the beam passes it */
.biz-insight .chip:nth-child(-n+2), .biz-insight .chip:nth-child(-n+2)::before{ animation-delay:.3s; }
.biz-insight .chip:nth-child(3), .biz-insight .chip:nth-child(4),
.biz-insight .chip:nth-child(3)::before, .biz-insight .chip:nth-child(4)::before{ animation-delay:2s; }
.biz-insight .chip:nth-child(n+5), .biz-insight .chip:nth-child(n+5)::before{ animation-delay:3.7s; }

@keyframes bizFound{
  0%,4%,60%,100%{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.88); }
  10%,45%{ background:rgba(43,110,242,.32); border-color:rgba(157,187,250,.65); color:#fff; }
}
@keyframes bizDot{
  0%,4%,60%,100%{ background:rgba(255,255,255,.3); box-shadow:none; }
  10%,45%{ background:#3ddc84; box-shadow:0 0 0 5px rgba(61,220,132,.18), 0 0 12px rgba(61,220,132,.7); }
}

/* ---- Responsive ---- */
@media (max-width:900px){
  .biz-insight .kicker-line{ max-width:none; }
}
@media (max-width:460px){
  .biz-insight .chip-row{ grid-template-columns:1fr; padding:20px; }
  .biz-insight .chip-row::after{ display:none; }   /* beam timing only fits 2 columns */
  .biz-insight .chip, .biz-insight .chip::before{ animation:none; }
  .biz-insight .chip::before{ background:#3ddc84; }
}

/* ---- Reduced motion: static "findings" state ---- */
@media (prefers-reduced-motion:reduce){
  .biz-insight .chip-row::after{ animation:none; display:none; }
  .biz-insight .chip, .biz-insight .chip::before{ animation:none; }
  .biz-insight .chip::before{ background:#3ddc84; }
}

/* ---- Journey flow: Understand → Transform ---- */

/* your background, plus soft light rays and a fading grid */
.section-navy.jr-section{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(60% 90% at 12% 0%, rgba(43,110,242,.45), transparent 60%),
    radial-gradient(50% 80% at 95% 100%, rgba(43,110,242,.28), transparent 60%),
    linear-gradient(135deg, var(--navy-2) 0%, var(--navy) 100%);
}
.jr-section::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px) 0 0/44px 44px,
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) 0 0/44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 5%,transparent 70%);
          mask-image:radial-gradient(ellipse at 50% 40%,#000 5%,transparent 70%);
}

.jr-flow{
  position:relative; max-width:1040px; margin:0 auto;
  display:grid; grid-template-columns:repeat(5,1fr);
}

/* base track + a soft glowing copy of it */
.jr-flow::before{
  content:""; position:absolute; top:35px; left:10%; right:10%; height:2px; border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(157,187,250,.55) 0 8px,transparent 8px 16px);
}

.jr-step{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center;
  padding:0 8px;
}

/* node: glass circle with a pulsing ring when active */
.jr-node{
  position:relative; z-index:1; display:grid; place-items:center; width:72px; height:72px; border-radius:50%;
  font:700 18px/1 var(--font-display,inherit); color:#9DBBFA;
  background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.03));
  border:1.5px solid rgba(157,187,250,.45);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:0 0 0 8px rgba(43,110,242,.08);
  animation:jrNode 10s ease-in-out infinite;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.jr-step:hover .jr-node{ transform:scale(1.1); }

.jr-label{
  font:700 clamp(15px,1.5vw,18px)/1.2 var(--font-display,inherit); color:rgba(255,255,255,.72);
  animation:jrLabel 10s ease-in-out infinite;
}

/* traveling orb: 10% → 90% of the track, reaches a node every 2s */
.jr-orb{
  position:absolute; top:35px; left:10%; width:14px; height:14px; margin:-6px 0 0 -7px; border-radius:50%;
  background:#fff; z-index:2; pointer-events:none;
  box-shadow:0 0 0 5px rgba(91,157,255,.35), 0 0 22px 6px rgba(91,157,255,.9);
  animation:jrOrb 10s linear infinite;
}
.jr-orb::after{                          /* comet tail */
  content:""; position:absolute; right:100%; top:50%; width:120px; height:3px; transform:translateY(-50%);
  background:linear-gradient(90deg,transparent,rgba(91,157,255,.8));
  border-radius:3px;
}

/* staggered highlight, in sync with the orb */
.jr-step:nth-child(1) :is(.jr-node,.jr-label){ animation-delay:0s; }
.jr-step:nth-child(2) :is(.jr-node,.jr-label){ animation-delay:2s; }
.jr-step:nth-child(3) :is(.jr-node,.jr-label){ animation-delay:4s; }
.jr-step:nth-child(4) :is(.jr-node,.jr-label){ animation-delay:6s; }
.jr-step:nth-child(5) :is(.jr-node,.jr-label){ animation-delay:8s; }

@keyframes jrOrb{
  0%{ left:10%; opacity:0; }
  2%{ opacity:1; }
  80%{ left:90%; opacity:1; }
  88%,100%{ left:90%; opacity:0; }
}
@keyframes jrNode{
  0%,22%,100%{ color:#9DBBFA; background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.03));
               border-color:rgba(157,187,250,.45); box-shadow:0 0 0 8px rgba(43,110,242,.08); transform:scale(1); }
  3%,14%{ color:#fff; background:linear-gradient(145deg,var(--blue-light,#5b9dff),var(--blue,#2b6ef2));
          border-color:#fff; box-shadow:0 0 0 12px rgba(91,157,255,.2), 0 18px 34px -10px rgba(43,110,242,.9); transform:scale(1.12); }
}
@keyframes jrLabel{
  0%,22%,100%{ color:rgba(255,255,255,.72); }
  3%,14%{ color:#fff; }
}

/* ---- Tablet ---- */
@media (max-width:900px){
  .jr-node{ width:60px; height:60px; font-size:16px; }
  .jr-flow::before, .jr-orb{ top:29px; }
}

/* ---- Mobile: vertical list, steps highlight in sequence (no orb) ---- */
@media (max-width:640px){
  .jr-flow{ grid-template-columns:1fr; max-width:320px; gap:26px; }
  .jr-flow::before{
    top:30px; bottom:30px; left:29px; right:auto; width:2px; height:auto;
    background:repeating-linear-gradient(180deg,rgba(157,187,250,.55) 0 8px,transparent 8px 16px);
  }
  .jr-orb{ display:none; }
  .jr-step{ flex-direction:row; gap:20px; text-align:left; padding:0; }
  .jr-node{ flex:none; }
}

/* ---- Reduced motion: static, finished state ---- */
@media (prefers-reduced-motion:reduce){
  .jr-node, .jr-label{ animation:none; }
  .jr-orb{ display:none; }
  .jr-node{ color:#fff; background:linear-gradient(145deg,var(--blue-light,#5b9dff),var(--blue,#2b6ef2)); border-color:#fff; }
  .jr-label{ color:#fff; }
}

/* ---- Connect consulting + technology ---- */
.cx-section{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#fff,var(--blue-pale-2,#f3f7ff));
}
.cx-section::before{                     /* faint fading grid */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(43,110,242,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(43,110,242,.05) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 70%,#000 15%,transparent 70%);
          mask-image:radial-gradient(ellipse at 50% 70%,#000 15%,transparent 70%);
}
.cx-section .container{ position:relative; }
.cx-section .section-head{ text-align:center; max-width:820px; margin:0 auto 52px; }

/* 3 cards on top, 2 wider cards below */
.cx-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:20px;grid-auto-rows:1fr; }
.cx-item{ grid-column:span 2; }
cx-item,
.cx-item:nth-child(n+4){ grid-column:span 2; }
.cx-item:nth-child(4){ grid-column:2 / span 2; }
.cx-item:nth-child(5){ grid-column:4 / span 2; }

.cx-item{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; gap:18px; align-items:flex-start;
  padding:26px 24px; border-radius:18px;
  background:#fff; border:1px solid rgba(43,110,242,.14);
  box-shadow:0 18px 36px -28px rgba(15,28,54,.35);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .3s ease;
}
.cx-item::before{                        /* blue line draws across the top on hover */
  content:""; position:absolute; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--blue,#2b6ef2),var(--blue-light,#5b9dff));
  transition:width .55s cubic-bezier(.2,.8,.2,1);
}
.cx-item::after{                         /* soft corner glow */
  content:""; position:absolute; z-index:-1; right:-40px; top:-40px; width:140px; height:140px; border-radius:50%;
  background:radial-gradient(closest-side,rgba(43,110,242,.14),transparent);
  transition:transform .5s ease;
}
.cx-item:hover{
  transform:translateY(-6px); border-color:rgba(43,110,242,.4);
  box-shadow:0 28px 46px -26px rgba(43,110,242,.5);
}
.cx-item:hover::before{ width:100%; }
.cx-item:hover::after{ transform:scale(1.8); }

/* icon tile */
.cx-icon{
  flex:none; display:grid; place-items:center; width:48px; height:48px; border-radius:14px;
  background:var(--blue-pale,#eaf1ff); border:1px solid rgba(43,110,242,.25);
  box-shadow:0 0 0 5px rgba(43,110,242,.05);
  transition:background .3s ease, box-shadow .3s ease;
}
.cx-icon svg{ stroke:var(--blue,#2b6ef2); transition:stroke .3s ease, transform .4s ease; }
.cx-item:hover .cx-icon{ background:var(--blue,#2b6ef2); box-shadow:0 0 0 8px rgba(43,110,242,.14); }
.cx-item:hover .cx-icon svg{ stroke:#fff; transform:rotate(-8deg) scale(1.1); }

.cx-item h4{ font-size:17px; line-height:1.3; margin:0 0 8px; color:var(--navy,#0f1c36); }
.cx-item p{ font-size:14.5px; line-height:1.65; color:#4a5568; margin:0; }

/* one entrance: cards rise in a stagger as they scroll into view
   (browsers without scroll-driven animation just show them) */
@supports (animation-timeline: view()){
  .cx-item{
    animation:cxRise both cubic-bezier(.2,.8,.2,1);
    animation-timeline:view();
    animation-range:entry 0% entry calc(55% + var(--i,0) * 6%);
  }
}
@keyframes cxRise{
  from{ opacity:0; transform:translateY(32px); }
  to  { opacity:1; transform:none; }
}

/* ---- Responsive ---- */
@media (max-width:1000px){
  .cx-grid{ grid-template-columns:1fr 1fr; }
  .cx-item,
  .cx-item:nth-child(n+4){ grid-column:span 1; }
  .cx-item:nth-child(4){ grid-column:span 1; }
  .cx-item:nth-child(5){                  /* same width as the others, centred */
    grid-column:1 / -1; justify-self:center; width:calc(50% - 10px);
  }
}
@media (max-width:620px){
  .cx-grid{ grid-template-columns:1fr; }
  .cx-item:nth-child(5){ grid-column:auto; width:auto; justify-self:stretch; }
}

/* ---- Keyboard focus + reduced motion ---- */
.cx-item:focus-within{ outline:2px solid var(--blue,#2b6ef2); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  .cx-item{ animation:none; }
  .cx-item, .cx-item::before, .cx-item::after{ transition:none; }
}


/* ---- Open positions ---- */
#career-openings{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#fff,var(--blue-pale-2,#f3f7ff));
}

#career-openings::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(43,110,242,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(43,110,242,.05) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(
    ellipse at 50% 30%,
    #000 15%,
    transparent 70%
  );
  mask-image:radial-gradient(
    ellipse at 50% 30%,
    #000 15%,
    transparent 70%
  );
}

#career-openings .co-job-list{
  position:relative;
  display:grid;
  gap:16px;
  max-width:900px;
  margin:0 auto;
}

/* ---- Job card ---- */
#career-openings .co-job-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px 28px 24px 34px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(43,110,242,.15);
  box-shadow:0 16px 34px -28px rgba(15,28,54,.4);
  transition:
    transform .4s cubic-bezier(.2,.8,.2,1),
    box-shadow .4s ease,
    border-color .3s ease;
}

/* ---- Accent bar ---- */
#career-openings .co-job-card::before{
  content:"";
  position:absolute;
  left:0;
  top:22%;
  bottom:22%;
  width:4px;
  border-radius:0 4px 4px 0;
  background:linear-gradient(
    180deg,
    var(--blue-light,#5b9dff),
    var(--blue,#2b6ef2)
  );
  transition:
    top .45s cubic-bezier(.2,.8,.2,1),
    bottom .45s cubic-bezier(.2,.8,.2,1);
}

/* ---- Hover tint ---- */
#career-openings .co-job-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:0;
  background:linear-gradient(
    90deg,
    rgba(43,110,242,.09),
    transparent 70%
  );
  transform:translateX(-30px);
  transition:
    opacity .4s ease,
    transform .5s cubic-bezier(.2,.8,.2,1);
}

#career-openings .co-job-card:hover{
  transform:translateX(6px);
  border-color:rgba(43,110,242,.42);
  box-shadow:0 24px 44px -26px rgba(43,110,242,.5);
}

#career-openings .co-job-card:hover::before{
  top:0;
  bottom:0;
}

#career-openings .co-job-card:hover::after{
  opacity:1;
  transform:none;
}

/* ---- Job text ---- */
#career-openings .co-job-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

#career-openings .co-job-title{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
  font:
    700 clamp(17px,1.8vw,20px)/1.3
    var(--font-display,inherit);
  color:var(--navy,#0f1c36);
  transition:color .3s ease;
}

#career-openings .co-job-card:hover .co-job-title{
  color:var(--blue,#2b6ef2);
}

/* ---- Badge ---- */
#career-openings .co-job-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:4px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  color:var(--blue,#2b6ef2);
  background:var(--blue-pale,#eaf1ff);
  border:1px solid rgba(43,110,242,.25);
}

#career-openings .co-job-badge.open{
  color:#0d7a43;
  background:rgba(61,220,132,.14);
  border-color:rgba(61,220,132,.4);
}

#career-openings .co-job-badge.open::before{
  content:"";
  width:7px;
  height:7px;
  flex:none;
  border-radius:50%;
  background:#2ec777;
  animation:coBadgePulse 2.2s ease-out infinite;
}

@keyframes coBadgePulse{
  0%{
    box-shadow:0 0 0 0 rgba(46,199,119,.6);
  }

  70%,100%{
    box-shadow:0 0 0 8px rgba(46,199,119,0);
  }
}

/* ---- Tags ---- */
#career-openings .co-job-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

#career-openings .co-job-tag{
  padding:5px 13px;
  border-radius:999px;
  font-size:13px;
  font-weight:500;
  line-height:1.3;
  color:#4a5568;
  background:rgba(43,110,242,.06);
  border:1px solid rgba(43,110,242,.14);
  transition:
    background .3s ease,
    color .3s ease,
    border-color .3s ease;
}

#career-openings .co-job-card:hover .co-job-tag{
  color:var(--navy,#0f1c36);
  background:rgba(43,110,242,.12);
  border-color:rgba(43,110,242,.3);
}

/* ---- Apply button ---- */
#career-openings .co-job-apply{
  flex:none;
}

#career-openings .co-job-apply .btn{
  position:relative;
  overflow:hidden;
  white-space:nowrap;
  transition:
    transform .3s cubic-bezier(.2,.8,.2,1),
    box-shadow .3s ease;
}

#career-openings .co-job-apply .btn::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:50%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.45),
    transparent
  );
  transform:translateX(-120%) skewX(-18deg);
}

#career-openings .co-job-card:hover .co-job-apply .btn{
  transform:translateY(-2px);
  box-shadow:0 12px 22px -10px rgba(43,110,242,.7);
}

#career-openings .co-job-card:hover .co-job-apply .btn::after{
  transform:translateX(320%) skewX(-18deg);
  transition:transform .8s ease;
}

/* ---- No matching role card ---- */
#career-openings .co-job-empty{
  background:transparent;
  box-shadow:none;
  border:1.5px dashed rgba(43,110,242,.35);
}

#career-openings .co-job-empty::before{
  display:none;
}

#career-openings .co-job-empty:hover{
  background:#fff;
  border-style:solid;
}

/* ---- Scroll entrance animation ---- */
@supports (animation-timeline:view()){
  #career-openings .co-job-card{
    animation:coJobRise both cubic-bezier(.2,.8,.2,1);
    animation-timeline:view();
    animation-range:entry 0% entry 55%;
  }
}

@keyframes coJobRise{
  from{
    opacity:0;
    transform:translateY(34px);
  }

  to{
    opacity:1;
    transform:none;
  }
}

/* ---- Responsive ---- */
@media (max-width:640px){

  #career-openings .co-job-card{
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    padding:22px 22px 22px 26px;
  }

  #career-openings .co-job-apply,
  #career-openings .co-job-apply .btn{
    width:100%;
    text-align:center;
    justify-content:center;
  }

  #career-openings .co-job-card:hover{
    transform:translateY(-4px);
  }
}

/* ---- Keyboard focus ---- */
#career-openings .co-job-card:focus-within{
  outline:2px solid var(--blue,#2b6ef2);
  outline-offset:3px;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){

  #career-openings .co-job-card{
    animation:none;
  }

  #career-openings .co-job-badge.open::before{
    animation:none;
  }

  #career-openings .co-job-card,
  #career-openings .co-job-card::before,
  #career-openings .co-job-card::after,
  #career-openings .co-job-apply .btn::after{
    transition:none;
  }
}


/* Section: dark gradient bg + subtle ambient glow */
.nxb-perks-section{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 90% at 12% 0%, rgba(43,110,242,.45), transparent 60%),
    radial-gradient(50% 80% at 95% 100%, rgba(43,110,242,.28), transparent 60%),
    linear-gradient(135deg, var(--navy-2) 0%, var(--navy) 100%);
}
.nxb-perks-section::before{
  content:"";
  position:absolute;
  top:-120px; right:-80px;
  width:420px; height:420px;
  background: radial-gradient(circle, rgba(91,157,255,.35), transparent 70%);
  filter: blur(10px);
  pointer-events:none;
  animation: nxbDrift 10s ease-in-out infinite;
}
.nxb-perks-section .container{ position:relative; z-index:1; }

/* Heading — now sits on navy, needs light text */
.nxb-heading-accent{ font-size: clamp(28px, 3.4vw, 40px); color: #fff; }
.nxb-heading-accent span{ color: var(--blue-light); }

/* Perk cards */
.nxb-perk-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.nxb-perk-card{
  position: relative;
  overflow: hidden;
  background: var(--blue-pale);
  border: 1px solid rgba(43,110,242,.14);
  padding: 28px 24px;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.nxb-perk-card::after{                 /* top accent line draws in on hover */
  content:"";
  position:absolute; top:0; left:0; height:3px; width:0;
  transition: width .45s ease;
}
.nxb-perk-card:hover{
  transform: translateY(-6px);
  background:#fff;
  border-color: rgba(43,110,242,.4);
  box-shadow: 0 20px 36px -18px rgba(5,15,32,.45);
}
.nxb-perk-card:hover::after{ width:100%; }

/* Stagger the fade-up using the --i index already on each card */
.nxb-perk-card.reveal{ transition-delay: calc(var(--i, 0) * 90ms); }

/* Icon tile */
.nxb-perk-icon{
  width: 40px; height: 40px;
  background: #fff;
  display:flex; align-items:center; justify-content:center;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  margin-bottom: 16px;
  transition: background .3s ease, transform .3s ease;
}
.nxb-perk-icon svg{ transition: stroke .3s ease, transform .3s ease; }
.nxb-perk-card:hover .nxb-perk-icon{ background: var(--blue); transform: translateY(-2px); }
.nxb-perk-card:hover .nxb-perk-icon svg{ stroke: #fff; transform: scale(1.08); }

.nxb-perk-card h4{ font-size: 15px; margin-bottom: 6px; transition: color .3s ease; }
.nxb-perk-card p{ font-size: 13.5px; color: var(--slate); }

@keyframes nxbDrift{ 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(-30px, 25px); } }

@media (max-width: 980px){ .nxb-perk-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .nxb-perk-grid{ grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce){
  .nxb-perks-section::before{ animation: none; }
  .nxb-perk-card{ transition: none; }
}