/* ===== NAVBAR (responsive with toggle) ===== */
    :root{
      --nav-h: 64px;
      --nav-bg: rgba(11,19,32,.85);
      --nav-ring: rgba(255,255,255,.10);
      --link: #e8f2ff;
      --link-hover: var(--accent-2);
    }
  
    .navbar{
      position: sticky; top: 0; z-index: 1000;
      background: var(--nav-bg);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--nav-ring);
    }
    .navbar.scrolled{ box-shadow: 0 6px 18px rgba(0,0,0,.25); }
  
    .nav-container{
      max-width: 1200px;
      margin: 0 auto;
      height: var(--nav-h);
      padding: 41px 24px;
      display: flex; align-items: center; justify-content: space-between;
    }
  
    header .brand-logo {
      max-width: 200px;  /* navbar size */
    }
  
    .logo{
      font-size: 35px; font-weight: 800; text-decoration: none;
      color: #fff; letter-spacing: .2px;
    }
    .logo span{ color: var(--accent); }
  
    /* Desktop nav */
    .nav-links{
      display: flex; align-items: center; gap: 28px;
    }
    .nav-link{
      color: var(--link); text-decoration: none; font-weight: 500; font-size: 19px;
      padding: 8px 2px; position: relative; outline: none;
    }
    .nav-link::after{
      content:""; position:absolute; left:0; right:0; bottom:-6px;
      height:2px; background: transparent; border-radius:2px; transform: scaleX(0);
      transition: transform .25s ease, background .25s ease;
    }
    .nav-link:hover, .nav-link:focus{ color: var(--link-hover); text-shadow: 0 0 6px var(--link-hover); }
    .nav-link.is-active::after{ background: var(--accent); transform: scaleX(1); }
  
    /* Toggle button (hamburger) */
    .menu-toggle{
      display: none; position: relative; width: 40px; height: 40px;
      border: 1px solid var(--nav-ring); border-radius: 10px;
      background: rgba(255,255,255,.04); color: #fff; cursor: pointer;
    }
    .menu-toggle:focus-visible{ outline: 2px solid var(--accent-2); outline-offset: 2px; }
    .menu-toggle .bar{
      position: absolute; left: 9px; right: 9px; height: 2px; background: #fff; border-radius: 2px;
      transition: transform .25s ease, opacity .2s ease, top .25s ease, bottom .25s ease;
    }
    .menu-toggle .bar:nth-child(1){ top: 12px; }
    .menu-toggle .bar:nth-child(2){ top: 19px; }
    .menu-toggle .bar:nth-child(3){ bottom: 12px; }
    .menu-toggle[aria-expanded="true"] .bar:nth-child(1){ transform: rotate(45deg); top: 19px; }
    .menu-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity: 0; }
    .menu-toggle[aria-expanded="true"] .bar:nth-child(3){ transform: rotate(-45deg); bottom: auto; top: 19px; }
  
    /* Mobile drawer */
    .mobile-drawer{
      display: grid; gap: 6px;
      padding: 10px 14px 14px;
      border-top: 1px solid var(--nav-ring);
      background: rgba(10,16,28,.98);
    }
    .mobile-link{
      display:block; padding: 12px 10px; border-radius: 10px;
      color: var(--link); text-decoration: none; font-weight: 600;
    }
    .mobile-link:hover, .mobile-link:focus{ background: rgba(255,255,255,.06); color: var(--link-hover); }
  
    /* Layout rules */
    @media (max-width: 980px){
      .nav-links{ display: none; }
      .menu-toggle{ display: inline-flex; align-items: center; justify-content: center; }
    }
    @media (min-width: 981px){
      .mobile-drawer{ display: none !important; }
    }
  
    /* Ensure page content isn’t covered if you were using fixed nav earlier */
    body{ scroll-padding-top: var(--nav-h); }
  
    /* Respect the HTML [hidden] attribute everywhere */
    /* [hidden] { display: none !important; } */
  
  /* Active states */
.nav-link.active,
.nav-link.is-active {
  color: #66d1ff;                 /* brand blue */
  font-weight: 700;
  text-shadow: 0 0 6px rgba(102,209,255,.6);
}

/* Mega buttons (Products/Services/Industries/Careers) */
.mega-toggle.active,
.mega-toggle.is-active {
  color: #66d1ff;
  text-shadow: 0 0 6px rgba(102,209,255,.6);
}

/* Mobile */
.mobile-link.active,
.mobile-sub a.active {
  color: #66d1ff !important;
  font-weight: 700;
}

    
  /* Nav Bar styles for subnavs */
  /* ===== Mega menu (desktop) ===== */
  .nav-item{ position: relative; }
  .mega-toggle{
    background: none; border: 0; cursor: pointer; padding: 8px 2px;
    color: var(--link); font-weight: 500; font-size: 20px;
  }
  .mega-toggle:hover, .mega-toggle:focus{ color: var(--link-hover); text-shadow: 0 0 6px var(--link-hover);  }
  
  /* ===== Full-width mega menu under the navbar ===== */
  :root{
    --nav-h: 64px;                 /* keep this in sync with your navbar */
    --mega-bg: #0b1320;            /* dark band background (edit to match) */
    --mega-fg: #e8f2ff;
    --mega-ring: rgba(255,255,255,.06);
  }
  
  /* Make sure header doesn’t clip it */
  .navbar{ overflow: visible; }
  
  /* Full-bleed bar that occupies complete width */
  .mega-panel{
    position: fixed;
    left: 0; right: 0;
    top: var(--nav-h);          /* must match your navbar height */
    width: 100vw;
    /* background: var(--mega-bg, #0b1320); */
    background: linear-gradient(135deg, #2b1d4f 0%, #0a2342 100%);
    color: #f0f3ff;
    color: var(--mega-fg, #e8f2ff);
    box-shadow: none;           /* or keep a soft one if desired */
    border-top: 1px solid var(--mega-ring, rgba(255,255,255,.06));
    border-bottom: 1px solid transparent; /* avoid dark seam at bottom */
    padding: clamp(24px, 4vw, 48px) clamp(20px, 5vw, 72px);
    z-index: 950;
  }
  
  /* Ensure no ancestor clips it */
  .navbar, .nav-links, .nav-item { overflow: visible; }
  
  /* Content grid (keep yours) */
  .mega-inner{
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(200px,1fr)); /* 3–5 columns as you like */
    gap: clamp(16px, 2.5vw, 40px) clamp(24px, 4vw, 72px);
  }
  
  /* Typo & links */
  .mega-col h4{
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing:.04em;
    color:#bcd0e2;
    text-transform: uppercase;
  }
  .mega-col a{
    display:block;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--mega-fg);
    text-decoration: none;
    font-weight: 500;
  }
  .mega-col a:hover{
    background: rgba(255,255,255,.06);
    color: var(--accent-2);
  }
  
  /* ===== Mobile Drawer Sub Nav Items ===== */
  .mobile-drawer {
    display: grid;
    gap: 8px;
    padding: 18px;
    background: linear-gradient(180deg, #0b1320 0%, #12263f 100%); /* dark gradient */
    border-top: 1px solid rgba(255,255,255,.08);
  }
  
  /* Top-level links */
  .mobile-link,
  .mobile-accordion summary {
    display: block;
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    color: #e8f2ff;
    text-decoration: none;
    cursor: pointer;
    transition: background .3s, color .3s;
  }
  
  /* Hover/active state */
  .mobile-link:hover,
  .mobile-accordion summary:hover {
    background: rgba(255,255,255,.08);
    color: var(--accent-2);
  }
  
  /* Accordion arrows */
  .mobile-accordion summary {
    list-style: none;
    position: relative;
    padding-right: 30px;
  }
  .mobile-accordion summary::after {
    content: "▸";
    position: absolute;
    right: 12px;
    transition: transform .3s;
  }
  .mobile-accordion[open] summary::after {
    transform: rotate(90deg);
    color: var(--accent-2);
  }
  
  /* Sub-links */
  .mobile-sub {
    display: grid;
    gap: 6px;
    padding: 8px 0 12px 16px;
  }
  .mobile-sub a {
    display: block;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    color: #bcd0e2;
    text-decoration: none;
    transition: background .3s, color .3s;
  }
  .mobile-sub a:hover {
    background: rgba(255,255,255,.06);
    color: var(--accent);
  }
  
  /* Divider style between groups */
  .mobile-accordion,
  .mobile-link {
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .mobile-accordion:last-of-type,
  .mobile-link:last-of-type {
    border-bottom: none;
  }
  
  
  /* Hidden by default; shown when .open OR JS toggles [hidden=false] */
  [hidden]{ display:none !important; }
  .has-mega.open > .mega-panel{ display:block; }
  
  /* Responsive columns */
  @media (max-width: 1400px){
    .mega-inner{ grid-template-columns: repeat(4, minmax(180px,1fr)); }
  }
  @media (max-width: 1100px){
    .mega-inner{ grid-template-columns: repeat(3, minmax(180px,1fr)); }
  }
  
  /* Prevent desktop mega on mobile (use your drawer/accordion there) */
  @media (max-width: 980px){
    .has-mega > .mega-panel{ display: none !important; }
  }
  
  /* --- unify the hero/slide background and kill any seams --- */
  
  /* Make sure nothing adds a second background layer */
  .hero, .slider, .slide { background: none !important; }
  
  /* Keep the slide’s full-bleed solid background */
  .slide::before{
    content:"";
    position:absolute; inset:0; z-index:-1;
    background: var(--bg) !important;   /* #0b1320 everywhere */
  }
  
  /* The section after the hero should match exactly */
  #why-us,
  .why-section{
    background: var(--bg) !important;   /* same as hero */
    border-top: 0 !important;           /* remove divider line if any */
    margin-top: 0 !important;           /* prevent gap creating a hairline */
    box-shadow: none !important;        /* avoid shadow seam */
  }
  
  /* Optional safety: extend slide by 1px to cover device hairlines */
  .slide{ inset: -1px 0 -1px 0; }
  
  


/* Slides Section */
/* ======= HERO (nxh-) ======= */
.nxh-hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  isolation: isolate;
  color: #fff;
  background: linear-gradient(135deg, #0d1b3d 0%, #1f2d55 50%, #0d1b3d 100%);
  overflow: hidden;
}

/* angled overlay shapes */
.nxh-hero::before,
.nxh-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  clip-path: polygon(0 0, 100% 0, 100% 65%, 0 100%);
}
.nxh-hero::before {
  background: rgba(255,255,255,0.05);
}
.nxh-hero::after {
  background: linear-gradient(135deg, rgba(34,211,238,.2), rgba(124,58,237,.25));
  mix-blend-mode: overlay;
}

/* layout */
.nxh-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(36px, 8vw, 120px) 20px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(20px, 6vw, 60px);
  align-items: center;
  position: relative;
  z-index: 2;
}
@media (max-width: 900px) {
  .nxh-wrap { grid-template-columns: 1fr; text-align: center; }
}

/* copy */
.nxh-eyebrow {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .08em;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: 14px;
}

.nxh-copy h1 {
  margin: 0 0 14px;
  font-size: clamp(32px, 6vw, 64px);
  font-weight: 800;
  line-height: 1.1;
}

.nxh-sub {
  color: #d9e3f5;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.7;
  max-width: 60ch;
  margin: 0 auto 20px;
}

.nxh-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
@media (max-width: 900px) {
  .nxh-cta { justify-content: center; }
}

.nxh-btn {
  text-decoration: none;
  font-weight: 700;
  padding: 12px 18px;
  border-radius: 14px;
  transition: .25s ease;
}
.nxh-btn-primary {
  background: linear-gradient(180deg,#22d3ee,#0ea5a4);
  color: #001018;
}
.nxh-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,.25); }
.nxh-btn-ghost {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
}
.nxh-btn-ghost:hover { background: rgba(255,255,255,.18); }

/* visual image */
.nxh-visual img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
  transition: transform .35s ease, box-shadow .35s ease;
}
.nxh-visual img:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 28px 56px rgba(0,0,0,.5);
}

.cta-icon-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  color: #e5f3ff;
  transition: color .25s ease;
}
.cta-icon-text:hover { color: #22d3ee; }


/* Why Choose Us */
/* Section Heading */
.why-head {
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 70px);
  padding: 0 24px;
}
.why-main-title {
  margin: 0 0 12px;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800;
  color: var(--why-text);
}
.why-subtitle {
  max-width: 70ch;
  margin: 0 auto;
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--why-muted);
}

/* Theme Variables */
:root {
  --why-bg: #f5f8fb;         /* light grey background */
  --why-text: #1a1a1a;       /* dark text */
  --why-muted: #444;         /* muted grey text */
  --why-ring: rgba(0,0,0,.08);
  --why-card: #ffffff;       /* white cards */
  --accent: #0bbf8f;         /* teal accent */
}

/* Section */
.why-split {
  background: var(--why-bg);
  padding: clamp(56px, 8vw, 112px) 0;
}
.why-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  gap: clamp(48px, 6vw, 96px);
}

/* Blocks */
.why-block {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
}
.why-block.alt {
  grid-template-columns: 1fr 1.1fr;
}
@media(max-width: 900px) {
  .why-block,
  .why-block.alt {
    grid-template-columns: 1fr;
  }
  .why-block.alt .why-media {
    order: -1; /* image above text on mobile for consistency */
  }
}

/* Media (Image Container) */
.why-media {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--why-ring);
  background: #fff;
  box-shadow: 0 12px 40px rgba(0,0,0,.15);
  width: 100%;
  height: 100%;
  display: flex;
}

/* Image */
.why-media img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.why-media:hover img {
  transform: scale(1.05); /* subtle zoom */
}

/* On mobile, reset min-height for better fitting */
@media (max-width: 900px) {
  .why-media {
    min-height: auto;
    height: auto;
  }
  .why-media img {
    object-fit: contain; /* show full image on mobile */
  }
}

/* Content */
.why-content {
  color: var(--why-text);
}
.why-eyebrow {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: var(--why-card);
  border: 1px solid var(--why-ring);
  border-radius: 999px;
}
.why-title {
  margin: 0 0 12px;
  font-weight: 800;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1.2;
}
.why-text {
  margin: 0 0 16px;
  color: var(--why-muted);
  font-size: 17px;
  line-height: 1.6;
}
.why-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  color: var(--why-muted);
}
.why-list li {
  position: relative;
  padding-left: 22px;
}
.why-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-weight: bold;
}


/* Our Products */

/* ===== Products Section ===== */
.products-section {
  background: linear-gradient(180deg, #0b1320 0%, #121a2c 100%);
  padding: clamp(60px, 8vw, 100px) 0;
}

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

.products-head {
  text-align: center;
  margin-bottom: clamp(40px, 6vw, 70px);
}
.products-title {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800;
  margin: 0 0 12px;
  color: #e7f6ff;   /* light title */
}
.products-subtitle {
  max-width: 70ch;
  margin: 0 auto;
  color: #bcd0e2;   /* muted light text */
  font-size: 17px;
}

/* Grid */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(20px, 3vw, 32px);
}

/* Card */
.prod-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border-radius: 18px;
  background: rgba(255,255,255,.05); /* translucent dark card */
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.prod-card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,.08);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}

/* Icon */
.prod-icon {
  font-size: 34px;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 14px;
  color: #fff;
}

/* Accent colors (gradient blocks for icons) */
.accent-cyan .prod-icon { background: linear-gradient(135deg, #22d0da, #1bb6c0); }
.accent-violet .prod-icon { background: linear-gradient(135deg, #8f7dff, #6a59d1); }
.accent-amber .prod-icon { background: linear-gradient(135deg, #f9c74f, #f8961e); }
.accent-rose .prod-icon { background: linear-gradient(135deg, #ff6b6b, #d9415e); }
.accent-lime .prod-icon { background: linear-gradient(135deg, #9be15d, #56ab2f); }

/* Body */
.prod-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #e7f6ff;
}
.prod-desc {
  margin: 6px 0 10px;
  color: #bcd0e2;
  font-size: 15px;
  line-height: 1.5;
}
.prod-cta {
  font-weight: 600;
  color: #66d1ff; 
  /* color: var(--accent-2); */
  font-size: 14px;
  letter-spacing: .04em;
}


/* Our Services */
/* Services (MGI-style cards) */
.services-mgi{
  background:#f5f6f8;        /* light ash grey for corporate look */
  padding:clamp(56px,8vw,112px) 0;
  border-top:1px solid #e1e5ea;
}
.sm-container{ max-width:1200px; margin:0 auto; padding:0 24px; }
.sm-head{
  margin:0 0 28px;
  font-size:clamp(26px,4vw,40px);
  font-weight:800;
  color:#0b1320;
}

/* Grid */
.sm-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:28px;
}

/* Card */
.sm-card{
  display:block;
  background:#fff;
  border-radius:10px;
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  border:1px solid #e5eaf0;
  transition:transform .25s ease, box-shadow .25s ease;
}
.sm-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

/* Image */
.sm-media{ margin:0; height:200px; background:#edf1f5; overflow:hidden; }
.sm-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Body */
.sm-body{ padding:16px 18px 22px; }
.sm-eyebrow{
  display:block;
  font-size:14px;
  color:#606b7a;
  margin-bottom:8px;
}
.sm-title{
  margin:0;
  font-size:clamp(20px,2.6vw,28px);
  font-weight:800;
  line-height:1.3;
  color:#0b1320;
  display:flex; align-items:center; gap:10px;
}
.sm-arrow{
  width:22px; height:22px; flex:0 0 22px;
  color:#0056ff;
  transition:transform .2s ease;
}
.sm-card:hover .sm-arrow{ transform:translateX(4px); }



/* Industries Carousel in Home page */

/* ===== Carousel Section (matches your navy theme, but distinct) ===== */
:root{
  --ind-bg1: #07111d;
  --ind-bg2: #0b1523;
  --ind-text: #eaf4ff;
  --ind-muted: #b8c7d7;
  --ind-ring: rgba(142,245,195,.55);
  --tile: rgba(255,255,255,.06);
}

.ind-carousel-section{
  background: radial-gradient(1200px 400px at 10% -10%, rgba(255,255,255,.04), transparent 60%),
              linear-gradient(180deg, var(--ind-bg1), var(--ind-bg2));
  padding: clamp(48px, 7vw, 96px) 0;
}

.ind-head{
  max-width: 1200px; margin: 0 auto 14px; padding: 0 24px;
}
.ind-head h2{
  margin:0 0 6px; font-weight:800; color:var(--ind-text);
  font-size: clamp(28px, 3.2vw, 44px);
}
.ind-head p{
  margin:0; color:var(--ind-muted); max-width: 72ch; font-size: 16px;
}

/* Rail */
.ind-rail-wrap{
  max-width: 1200px;
  margin: 12px auto 0;
  padding: 0 24px;
  position: relative;
  overflow: visible; /* allow arrows to sit outside the rail */
}
.ind-rail{
  display:flex; gap: clamp(16px,2vw,24px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 1px;
  padding-block: 10px;                         /* breathing room for shadows */
  padding-inline: clamp(32px, 4vw, 56px);      /* NEW: gutters so arrows don't overlay cards */
}
.ind-rail::-webkit-scrollbar{ height: 8px; }
.ind-rail::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 8px; }

/* Cards – NO border initially; appear only on hover */
.ind-card{
  flex: 0 0 min(380px, 86vw);
  background: var(--tile);
  border-radius: 20px;
  text-decoration: none;
  color: var(--ind-text);
  overflow: hidden;
  scroll-snap-align: start;
  transform: translateZ(0);
  outline: 1px solid transparent;
  transition:
    transform .25s ease, outline-color .25s ease, box-shadow .25s ease, filter .25s ease;
}

/* tone fills (subtle) */
.tone-teal   { background: rgba(22,99,112,.16); }
.tone-violet { background: rgba(76,54,135,.16); }
.tone-cyan   { background: rgba(28,119,144,.16); }
.tone-amber  { background: rgba(160,120,32,.16); }
.tone-slate  { background: rgba(95,108,123,.16); }
.tone-green  { background: rgba(28,120,78,.16); }

/* media */
.ind-media{ aspect-ratio: 16/9; overflow: hidden; }
.ind-media img{
  width:100%; height:100%; object-fit: cover; display:block;
  transform: scale(1.02);
  transition: transform .35s ease;
}

/* content */
.ind-body{ padding: 16px 16px 18px; }
.ind-title{ margin:0 0 6px; font-weight: 800; font-size: 20px; color: var(--ind-text); }
.ind-desc{ margin:0 0 14px; color: var(--ind-muted); font-size: 15px; line-height: 1.5; }
.ind-cta{
  display:inline-flex; align-items:center; gap: 8px; font-weight: 800; font-size: 14px;
  color:#71e1ff;
}
.ind-cta i{ transform: translateX(-4px); opacity: 0; transition: transform .22s ease, opacity .22s; }

/* hover/focus – border “appears”, lift, glow; image zoom */
.ind-card:hover,
.ind-card:focus-visible{
  outline-color: var(--ind-ring);
  box-shadow: 0 18px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
  transform: translateY(-6px);
  filter: saturate(1.05);
}
.ind-card:hover .ind-media img{ transform: scale(1.07); }
.ind-card:hover .ind-cta i{ transform: translateX(2px); opacity: 1; }

/* Nav buttons – moved OUTSIDE the rail, vertically centered */
.ind-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color:#fff; display:grid; place-items:center;
  cursor:pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
  backdrop-filter: blur(6px);
  z-index: 3;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  opacity: .9;
}
.ind-nav:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.28);
  transform: translateY(-50%) scale(1.06);
}

/* Pull arrows a bit OUTSIDE the content so they don't sit on cards */
.ind-prev{ left: -28px; }
.ind-next{ right: -28px; }

/* Wider screens: push slightly further out */
@media (min-width: 1200px){
  .ind-prev{ left: -34px; }
  .ind-next{ right: -34px; }
}
/* Tablet screens: adjust position accordingly */
@media (min-width: 641px) and (max-width: 1199px) {
  .ind-prev { left: 0px; }
  .ind-next { right: 0px; }
  .ind-nav { width: 36px; height: 36px; }
}
/* Small screens: keep reachable */
@media (max-width: 640px){
  .ind-prev{ left: 2px; }
  .ind-next{ right: 2px; }
  .ind-nav{ width: 30px; height: 30px; }
}

/* Optional: hide buttons while dragging to avoid distraction */
.ind-rail.dragging ~ .ind-prev,
.ind-rail.dragging ~ .ind-next{
  opacity: 0; pointer-events: none;
}


/* Footer */


/* ===== Footer v3 (namespaced, clean light version) ===== */
/* ================= Footer v3 — Fully Responsive, Scoped ================= */
/* FOOTER */
#ft3.ft3{
  --ft3-bg: #f2f2f2;
  --ft3-fg: #0b1320;
  --ft3-muted: #4a5868;
  --ft3-accent: #71e1ff;
  --ft3-accent-dark: #3aa8ef;
  --ft3-link: #0b1320;
  --ft3-rule: rgba(9,20,35,.12);

  background: var(--ft3-bg);
  color: var(--ft3-fg);
  position: relative; /* anchors absolute children like the toTop button */
  padding: clamp(28px, 4vw, 48px) 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

/* soft background accents */
#ft3::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(60% 90% at 70% 80%, rgba(0,0,0,.05), transparent 70%),
    radial-gradient(50% 60% at 25% 10%, rgba(0,0,0,.04), transparent 55%);
  pointer-events:none;
}

/* container + safe areas */
#ft3 .ft3__container{
  max-width: 1200px;
  margin: 0 auto;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

/* ===== Grid layout ===== */
#ft3 .ft3__grid{
  display:grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: clamp(20px,3vw,40px);
  align-items:flex-start;
}
@media (max-width: 1200px){
  #ft3 .ft3__grid{ grid-template-columns: 1.2fr repeat(3, 1fr); }
}
@media (max-width: 960px){
  #ft3 .ft3__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  #ft3 .ft3__grid{ grid-template-columns: 1fr; }
}

/* brand + about */
#ft3 .ft3__logo{
  max-width: clamp(140px, 22vw, 200px);
  height:auto;
  display:block;
  margin-bottom: 16px;
}
#ft3 .ft3__about{
  margin:0;
  color:var(--ft3-muted);
  line-height:1.7;
  font-size:15px;
  word-break: break-word;
}

/* headings */
#ft3 .ft3__heading{
  margin:0 0 14px;
  font-weight:700;
  color:#111927;
  font-size:16px;
}

/* lists */
#ft3 .ft3__list{
  list-style:none;
  margin:0; padding:0;
  display:grid; gap:10px;
}
#ft3 .ft3__link{
  color:var(--ft3-link);
  text-decoration:none;
  font-size:15px;
}
#ft3 .ft3__link:hover{
  color:var(--ft3-accent-dark);
  text-decoration:underline;
  text-underline-offset:3px;
}
#ft3 .ft3__link:focus-visible{
  outline: 2px solid var(--ft3-accent-dark);
  outline-offset: 2px;
  border-radius: 6px;
}

/* divider */
#ft3 .ft3__rule{
  border:0;
  border-top:1px solid var(--ft3-rule);
  margin: clamp(20px,4vw,32px) 0 clamp(16px,3vw,26px);
}

/* bottom row */
#ft3 .ft3__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
#ft3 .ft3__copy{
  color:var(--ft3-muted);
  font-size:14px;
}

/* socials */
#ft3 .ft3__socials{ display:flex; gap:10px; }
#ft3 .ft3__social{
  width:38px; height:38px;
  border-radius:50%;
  display:grid; place-items:center;
  background:#e2e8f0;
  color:#0b1320;
  text-decoration:none;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
#ft3 .ft3__social:hover{
  background:var(--ft3-accent);
  color:#0b1320;
  transform:translateY(-2px);
}

/* Back to top — footer scoped, left side */
#ft3 .ft3__toTop{
  position:absolute;       /* was: fixed */
  left:20px;               /* left side within footer */
  bottom:22px;             /* sits at bottom of footer */
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.1);
  background:#ffffffcc;
  color:#0b1320;
  box-shadow:0 6px 20px rgba(0,0,0,.15);
  display:grid; place-items:center;
  cursor:pointer;
  transition: transform .25s ease, background .25s ease;
  z-index:1;               /* no need to float above entire page */
}
#ft3 .ft3__toTop:hover{
  background:#fff;
  transform:translateY(-2px);
}
#ft3 .ft3__toTop:focus-visible{
  outline:2px solid var(--ft3-accent-dark);
  outline-offset:2px;
}

/* scoped media reset */
#ft3 :where(img,svg){ max-width:100%; height:auto; }

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


/* About Page */
/* 1. Our Leadership */
/* ================= ABOUT HERO (abp-) ================= */
.abp-hero{
  background:#0e1424;            /* darker + different from index */
  color:#e7eefc;
  isolation:isolate;
  /* height: 89vh; */
  overflow:hidden;
  border-top:1px solid #0f1b34;
}
.abp-wrap{
  max-width:1200px; margin:0 auto; padding: clamp(48px,8vw,120px) 20px;
  display:grid; grid-template-columns: 120px 1.1fr .9fr; gap: clamp(18px,4vw,40px);
  align-items:center;
}
@media (max-width: 1024px){
  .abp-wrap{ grid-template-columns: 100px 1fr; }
  .abp-visual{ grid-column: 1 / -1; order: 3; margin-top:10px }
}

/* --- Left rail badge --- */
.abp-rail{ display:flex; justify-content:center }
.abp-rail-inner{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:10px 0;
  border-left:2px solid rgba(255,255,255,.1);
}
.abp-mark{
  font-weight:900; font-size:14px; letter-spacing:.08em;
  padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18);
}
.abp-meta{ font-size:12px; color:#b8c9e6; white-space:nowrap }
.abp-dot{ width:6px; height:6px; border-radius:50%; background:#22d3ee; opacity:.8 }

/* --- Copy --- */
.abp-copy{ max-width: 680px }
.abp-eyebrow{
  display:inline-block; padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  font:700 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:.06em; text-transform:uppercase; color:#dff6ff;
}
.abp-title{
  margin:12px 0 10px;
  font-family: ui-serif, "Georgia", "Times New Roman", serif; /* editorial contrast */
  font-weight:800; letter-spacing:-.01em; line-height:1.12;
  font-size: clamp(28px, 5.2vw, 46px);
  color:#ffffff;
}
.abp-lead{
  margin:0 0 14px; color:#cfe1ff; max-width: 60ch;
  font-size: clamp(15px,2vw,18px); line-height:1.7;
}

/* Links */
.abp-links{ display:flex; gap:18px; flex-wrap:wrap; margin:10px 0 14px }
.abp-link{
  color:#e7eefc; text-decoration:none; font-weight:800;
  display:inline-flex; align-items:center; gap:6px;
  transition: color .25s ease, transform .25s ease;
}
.abp-link:hover{ color:#22d3ee; transform: translateX(2px); }
.abp-link--quiet{ color:#bdd1f1 }

/* Cred list (quiet stats) */
.abp-cred{ list-style:none; padding:0; margin:6px 0 0; display:flex; flex-wrap:wrap; gap:10px }
.abp-cred li{
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:10px 12px; min-width: 180px;
  display:flex; flex-direction:column; gap:2px;
}
.abp-cred strong{ color:#fff; font-size:14px }
.abp-cred span{ color:#a8bddf; font-size:12px }

/* --- Visual stack --- */
.abp-visual{ position:relative; min-height: 340px }
.abp-card{
  position:absolute; margin:0; border-radius:18px; overflow:hidden;
  border:1px solid rgba(255,255,255,.24);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.abp-card img{ display:block; width:100%; height:100%; object-fit:cover }

.abp-card--top{ width:min(420px,38vw); aspect-ratio:4/3; top:-6%; right:4% }
.abp-card--bottom{ width:min(320px,30vw); aspect-ratio:4/3; bottom:-8%; left:4% }

.abp-card:hover{ transform: translateY(-6px) scale(1.02); box-shadow: 0 32px 80px rgba(0,0,0,.55) }

@media (max-width:1024px){
  .abp-card{ position:relative; top:auto; bottom:auto; left:auto; right:auto; margin:10px 0 }
  .abp-card--top, .abp-card--bottom{ width:100%; aspect-ratio:16/10 }
}

/* Subtle backdrop gradient (different from index) */
.abp-hero::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(600px 360px at 18% 20%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(680px 420px at 82% 26%, rgba(124,58,237,.10), transparent 62%),
    linear-gradient(180deg, rgba(10,16,36,0) 0%, rgba(10,16,36,.45) 85%, rgba(10,16,36,.75) 100%);
  pointer-events:none;
}


/* ===== NAV / MEGAMENU — GLOBAL OVERRIDES (works on all PAGES) ===== */
.navbar{
  z-index: 10000;       /* above any hero/section */
  overflow: visible;    /* don’t clip dropdowns */
  isolation: isolate;   /* reliable stacking context */
}
.mega-panel{
  z-index: 10001;       /* above navbar background + content */
}

@media (min-width: 981px){
  .mega-panel{ display: none; }                     /* default hidden */
  .has-mega.open > .mega-panel{ display: block; }   /* shown when JS opens */
}

/* Keep page content underneath the nav stack */
main, section, .hero, .lfh, .lfh-media, .lfh-panel, .ww-section{
  position: relative; z-index: 0;
}

/* Safety: nav containers never clip children */
.navbar, .nav-links, .nav-item{ overflow: visible; }


/* 2. Our Mission & Vision */
/* ===== Mission & Vision (light section, large type) ===== */
:root{
  --mv-max: 1200px;
  --mv-pad: clamp(24px, 5vw, 64px);
  --mv-gap: clamp(24px, 5vw, 56px);
  --mv-fg: #1f2937;     /* text */
  --mv-sub: #4b5563;    /* secondary text */
  --mv-ring: rgba(2,6,23,.08);
  --mv-accent: #0b1320;
}

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

.mv-hero{
  background: #fff; color: var(--mv-fg);
  padding: var(--mv-pad) 0 calc(var(--mv-pad) * .75);
}
.mv-title{
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  margin: 0 0 .6em;
  letter-spacing: .2px;
}
.mv-lead{
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.7;
  color: var(--mv-sub);
  max-width: 70ch;
  margin: 0 0 1.2em;
}

/* Split grid (Mission | Vision) */
.mv-split{
  background: #fff; color: var(--mv-fg);
  padding: 0 0 var(--mv-pad);
  border-top: 1px solid var(--mv-ring);
}
.mv-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mv-gap);
  align-items: start;
  padding-top: calc(var(--mv-pad) * .5);
}
.mv-col{ min-width: 0; }

.mv-h{
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  line-height: 1.2;
  margin: 0 0 .4em;
  position: relative;
}
.mv-h::after{
  content:"";
  display:block;
  width: 56px; height: 3px;
  background: var(--mv-accent);
  border-radius: 2px;
  margin-top: .5rem;
}

.mv-body{
  font-size: clamp(1.02rem, 1.5vw, 1.25rem);
  color: var(--mv-sub);
  line-height: 1.75;
  margin: .6rem 0 1rem;
}
.mv-points{
  margin: .5rem 0 0;
  padding-left: 1.2rem;
}
.mv-points li{
  color: var(--mv-fg);
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.7;
  margin: .35rem 0;
}

/* Responsive */
@media (max-width: 960px){
  .mv-grid{ grid-template-columns: 1fr; }
}


/* 3. Our CORE VALUES */

/* ===== Core Values – Rail/Timeline (no cards) ===== */
.cv{ position:relative; padding:clamp(28px,6vw,60px) 0 clamp(34px,7vw,80px); isolation:isolate; }
.cv::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(60% 40% at 50% 0%, rgba(255,255,255,.05), transparent 60%); }
.cv__container{ max-width:1200px; margin:0 auto; padding:0 clamp(20px,4vw,64px); }
.cv__title{ font-size:clamp(2rem,5vw,3.5rem); line-height:1.05; margin:0 0 .8rem; letter-spacing:.2px; }
.cv__title + .cv__list{ margin-top:clamp(10px,1.8vw,16px); }

.cv__list{
  list-style:none; padding:0; margin:0; position:relative;
  display:grid; grid-template-columns:1fr clamp(44px,4.5vw,64px) 1fr;
  row-gap:clamp(26px, 3.8vw, 48px);
}
.cv__list::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:3px; background:linear-gradient(180deg,#68eaff,#8ef5c3 40%,#9aa7ff 60%,#68eaff);
  filter:drop-shadow(0 0 10px rgba(104,234,255,.45)); opacity:.85;
}

/* Items alternate sides */
.cv__item{ position:relative; padding-block:clamp(6px,1vw,10px); --y:0px; transform:translateY(var(--y)); transition:transform .2s ease; }
.cv__item:nth-child(odd){ grid-column:1/2; padding-right:clamp(10px,2vw,18px); text-align:right; }
.cv__item:nth-child(even){ grid-column:3/4; padding-left:clamp(10px,2vw,18px); }
.cv__item:hover{ transform:translateY(calc(var(--y) - 2px)); }

/* Stagger: Integrity up, Innovation down */
.cv--up{ --y:-12px; }
.cv--down{ --y:14px; }

/* connectors */
.cv__item::before{
  content:""; position:absolute; top:1.15em; height:2px; width:clamp(18px,2.5vw,28px);
  background:linear-gradient(90deg,#71e1ff,#8ef5c3);
}
.cv__item:nth-child(odd)::before{ right:calc(-1 * clamp(22px,3.6vw,42px)); transform:translateX(100%); }
.cv__item:nth-child(even)::before{ left: calc(-1 * clamp(22px,3.6vw,42px)); transform:translateX(-100%); }

/* dots */
.cv__dot{ position:absolute; top:12px; width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #fff, #baf0ff 38%, #5cd9ff 60%, #00c6ff 72%);
  box-shadow:0 0 0 4px rgba(0,198,255,.18), 0 0 20px rgba(0,198,255,.35);
}
.cv__item:nth-child(odd) .cv__dot{ right:calc(-1 * clamp(44px,6vw,70px)); transform:translateX(50%); }
.cv__item:nth-child(even) .cv__dot{ left: calc(-1 * clamp(44px,6vw,70px)); transform:translateX(-50%); }

/* headings + underline */
.cv__h{
  font-size:clamp(1.4rem,2.8vw,2rem); font-weight:800; margin:0 0 .4rem; line-height:1.15;
  background:linear-gradient(90deg,#eaf8ff 0 60%, #9edfff 100%) 0 100% / 0 2px no-repeat;
  transition:background-size .35s ease;
}
.cv__item:hover .cv__h{ background-size:100% 2px; }

/* body copy */
.cv__p{
  margin:0;
  color:#cfe2f1;
  font-size:clamp(1rem,1.5vw,1.2rem);
  line-height:1.7;
  max-width:56ch;
}
.cv__item:nth-child(odd) .cv__p{ margin-left:auto; }

/* mobile stack */
@media (max-width:860px){
  .cv__list{ grid-template-columns:clamp(18px,4vw,22px) 1fr; }
  .cv__list::before{ left:calc(clamp(18px,4vw,22px)/2); transform:none; }
  .cv__item, .cv__item:nth-child(odd), .cv__item:nth-child(even){
    grid-column:2/-1; text-align:left; padding:0 0 0 clamp(10px,2vw,14px); --y:0px; /* reset stagger */
  }
  .cv__item::before{ left:calc(-1 * clamp(18px,4vw,22px)); right:auto; transform:none; width:clamp(10px,2vw,16px); }
  .cv__dot{ left:calc(-1 * clamp(18px,4vw,22px)); transform:translateX(-40%); }
}



/* 4. Our Engagement Process (image-panels) */

/* ==== Engagement (image-panels) ==== */
:root{
  --eng-bg: #0b1320;
  --eng-fg: #e8f2ff;
  --eng-accent: #ff694b;
  --eng-ring: rgba(255,255,255,.08);
  --eng-radius: 22px;
}

.eng-section{
  background: linear-gradient(180deg, #0b1320 0%, #0c1626 100%);
  color: var(--eng-fg);
  padding: clamp(40px,6vw,84px) 0;
}
.eng-container{
  width: min(1200px, 92vw);
  margin: 0 auto;
}

.eng-title{
  text-align: center;
  font-size: clamp(28px, 4.2vw, 48px);
  line-height: 1.08;
  margin: 0;
  letter-spacing: .3px;
}
.eng-underline{
  display: block;
  width: clamp(60px, 8vw, 110px);
  height: 6px;
  margin: 16px auto 34px;
  border-radius: 999px;
  background: linear-gradient(90deg, #60e7ff, #7ea0ff, #ff9e7c);
  filter: drop-shadow(0 6px 22px rgba(0,0,0,.45));
}

.eng-grid{
  display: grid;
  gap: clamp(16px, 2.2vw, 28px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px){
  .eng-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .eng-grid{ grid-template-columns: 1fr; }
}

/* Card base */
.eng-card{
  position: relative;
  min-height: clamp(280px, 32vw, 380px);
  border-radius: var(--eng-radius);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 18px 60px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.05);
  transform: translateZ(0);
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}
.eng-card::before{
  /* background image layer */
  content:"";
  position:absolute; inset:0; z-index:-2;
  background-position:center;
  background-size:cover;
  transform: scale(1.04);
  filter: saturate(.95) brightness(.75);
  transition: transform .6s ease, filter .6s ease;
}
.eng-shade{
  /* gradient overlay */
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(140% 80% at 12% 8%, rgba(120,200,255,.24), transparent 55%),
    linear-gradient(180deg, rgba(6,10,18,.05), rgba(6,10,18,.72) 50%, rgba(6,10,18,.86));
  mix-blend-mode: normal;
}

/* Backgrounds per card */
.eng-1::before{
  background-image:url("/assets/images/engmnt_process1.avif");
}
.eng-2::before{
  background-image:url("/assets/images/engmnt_process2.avif")
}
.eng-3::before{
  background-image:url('/assets/images/whychoose2.avif');
}
.eng-4::before{
  background-image:url('/assets/images/engmnt_process4.avif');
}

/* Content */
.eng-content{
  position: absolute;
  inset: clamp(16px,2.2vw,24px);
  display: grid;
  align-content: end;
  gap: 10px;
}
.eng-step{
  display:inline-grid; place-items:center;
  width: 44px; height: 44px;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing:.02em;
  color:#0b1320;
  background: linear-gradient(135deg, #71e1ff, #9aa7ff);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 12px 26px rgba(0,0,0,.35);
  margin-bottom: 6px;
}
.eng-content h3{
  margin: 0;
  font-size: clamp(22px, 2.3vw, 28px);
  font-weight: 800;
  letter-spacing:.2px;
}
.eng-content p{
  margin: 0;
  max-width: 38ch;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  color: #d3e3f4;
}

/* Hover */
.eng-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 80px rgba(0,0,0,.45);
}
.eng-card:hover::before{
  transform: scale(1.08);
  filter: saturate(1.05) brightness(.9);
}



/* Products */

/* ===== Products hero (scoped) ===== */
/* ---------- Products Hero (scoped) ---------- */
:root{
  --prd-bg: #0f2e58;
  --prd-fg: #eaf3ff;
  --prd-fg-2:#bfd4ea;
  --prd-ring: rgba(255,255,255,.10);
  --prd-accent:#71e1ff;
  --prd-accent2:#9aa6ff;
  --prd-accent3:#34d399;
  --prd-accent4:#f59e90;
}

.prd-hero{
  position: relative;
  background: var(--prd-bg);
  color: var(--prd-fg);
  isolation: isolate;
}

.prd-wrap{
  display:grid;
  /* smaller right column */
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(20px,5vw,80px);
  padding: clamp(28px,6vw,64px) clamp(22px,7vw,88px);
  min-height: clamp(560px,78vh,880px);
  align-items: center;
}

/* LEFT */
.prd-copy{ max-width: 780px; }
.prd-badge{
  display:inline-block;
  font:700 12px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  letter-spacing:.16em; text-transform:uppercase;
  color:#cfe7ff; border:1px solid var(--prd-ring); border-radius:999px;
  padding:6px 12px; background:rgba(255,255,255,.045);
}
.prd-title{
  margin:.7rem 0 .25rem;
  font-weight:800; line-height:1.04;
  font-size: clamp(34px,5vw,72px);
  letter-spacing:.2px;
}
.prd-underline{
  width: clamp(160px,20vw,260px); height:8px; border-radius:999px;
  background: linear-gradient(90deg,var(--prd-accent),var(--prd-accent2),var(--prd-accent4));
  margin:.35rem 0 1.1rem;
}
.prd-lead{
  font-size: clamp(16px,1.5vw,20px);
  color: var(--prd-fg);
  opacity:.95; max-width:62ch; margin:.5rem 0;
}
.prd-lead--muted{ color: var(--prd-fg-2); }

.prd-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; }
.prd-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 18px; border-radius:14px; font-weight:800; text-decoration:none; line-height:1;
  border:1px solid var(--prd-ring);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.prd-btn--primary{
  color:#05251b; background:linear-gradient(135deg,var(--prd-accent),var(--prd-accent2));
  box-shadow:0 18px 60px rgba(0,0,0,.35);
}
.prd-btn--primary:hover{ transform: translateY(-2px); }
.prd-btn--ghost{ color:#eaf3ff; background:rgba(255,255,255,.06); }
.prd-btn--ghost:hover{ transform: translateY(-1px); background:rgba(255,255,255,.10); }

/* RIGHT — static blueprint with concentric rings + chips */
.prd-art{
  position:relative;
  justify-self:end;
  /* ↓ smaller canvas than before */
  width: clamp(340px, 40vw, 820px);
  aspect-ratio: 1 / 1;
  border-radius: 28px;
  background:
    radial-gradient(800px 400px at 75% 5%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(600px 600px at 20% 90%, rgba(113,225,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--prd-ring);
  box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.025);
  overflow:hidden;
}

/* faint grid */
.prd-art::before{
  content:"";
  position:absolute; inset:0; opacity:.08;
  background:
    repeating-linear-gradient(to right, #fff 0 1px, transparent 1px 32px),
    repeating-linear-gradient(to bottom,#fff 0 1px, transparent 1px 32px);
  mix-blend-mode: overlay;
}

/* concentric rings */
.prd-svg{ position:absolute; inset:0; width:100%; height:100%; }
.prd-svg circle{
  fill:none; stroke:#cfe7ff; opacity:.22; stroke-width:1;
}

/* Base chip */
.prd-chip{
  position:absolute; transform: translate(-50%,-50%);
  padding:7px 11px; border-radius:999px;
  border:1px solid var(--prd-ring);
  background: rgba(255,255,255,.07);
  color:#eaf3ff; font-weight:700; font-size:13px;
  white-space:nowrap; backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.03);
  left: var(--x); top: var(--y);

  /* New: smoother interaction */
  transition:
    transform .22s cubic-bezier(.2,.7,.2,1),
    background .22s ease,
    box-shadow .25s ease,
    outline-color .25s ease,
    color .22s ease;
  will-change: transform;
  cursor: default; /* change to pointer if you make them links */
  --glow: rgba(255,255,255,.25); /* fallback glow */
}

/* Color-matched glow per chip */
.prd-chip.ai       { --glow: rgba(113,225,255,.35); }  /* cyan */
.prd-chip.devops   { --glow: rgba(154,166,255,.35); }  /* indigo */
.prd-chip.data     { --glow: rgba(52,211,153,.35); }   /* green */
.prd-chip.security { --glow: rgba(113,225,255,.35); }
.prd-chip.observe  { --glow: rgba(154,166,255,.35); }

/* Hover + keyboard focus */
.prd-chip:hover,
.prd-chip:focus-visible{
  background: rgba(255,255,255,.14);
  transform: translate(-50%,-50%) translateY(-3px) scale(1.05);
  outline-color: var(--glow);
  box-shadow:
    0 16px 42px rgba(0,0,0,.35),
    0 0 0 3px var(--glow),
    0 0 28px 10px var(--glow);
}

/* High-contrast focus ring for keyboard users */
.prd-chip:focus-visible{
  outline: 2px solid var(--glow);
  outline-offset: 2px;
}

/* If chips are links, keep them tidy */
a.prd-chip{ text-decoration: none; cursor: pointer; }

/* Very large screens: keep it modest */
@media (min-width: 1400px){
  .prd-art{ width: clamp(360px, 36vw, 760px); }
}

/* Responsive stack */
@media (max-width: 980px){
  .prd-wrap{ grid-template-columns:1fr; }
  .prd-art{ order:-1; justify-self:center; width:min(86vw,760px); }
  .prd-title{ font-size: clamp(28px, 8vw, 56px); }
}



/* ===================== PRODUCTS – Information / PARAGRAPH SECTION STYLES ===================== */
/* Uses your existing --prd-* variables from the products theme */
/* ================================
   Products – prose sections
   (no dividers, with card hovers)
   ================================ */

   .prd-section{
    position: relative;
    background: var(--prd-bg);
    color: var(--prd-fg);
  }
  
  /* NO divider between sections */
  .prd-section + .prd-section{ border-top: 0; }
  
  .prd-container{
    max-width: 1200px;
    margin-inline: auto;
    padding: clamp(28px,6vw,64px) clamp(22px,6vw,80px);
  }
  
  /* Headings */
  .prd-h{
    font-weight: 800;
    line-height: 1.06;
    font-size: clamp(28px,3.4vw,40px);
    margin: 0 0 .5rem;
  }
  .prd-h-tight{
    font-weight: 800;
    line-height: 1.1;
    font-size: clamp(24px,3vw,34px);
    margin: 0 0 .5rem;
  }
  .prd-sub{
    font-weight: 800;
    line-height: 1.15;
    font-size: clamp(20px,2.2vw,26px);
    margin: 0 0 .35rem;
    letter-spacing: .2px;
  }
  .prd-underline{
    display:block;
    width: clamp(160px, 22vw, 280px);
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg,var(--prd-accent),var(--prd-accent2),var(--prd-accent4));
    margin-top: .5rem;
  }
  
  /* Paragraph rhythm */
  .prd-section p{
    font-size: clamp(16px,1.35vw,19px);
    line-height: 1.65;
    color: var(--prd-fg);
    opacity: .96;
    margin: .6rem 0 0;
    max-width: 72ch;
  }
  .prd-section p.muted{ color: var(--prd-fg-2); opacity: .95; }
  
  /* Columns */
  .prd-columns .cols-2{
    display: grid;
    gap: clamp(18px,3vw,36px);
    grid-template-columns: 1fr 1fr;
  }
  @media (max-width: 980px){
    .prd-columns .cols-2{ grid-template-columns: 1fr; }
  }
  
  /* Grid prose (4 items) */
  .prd-grid .grid-4{
    display: grid;
    gap: clamp(16px,2vw,24px);
    grid-template-columns: repeat(4, 1fr);
  }
  .prd-grid article{
    padding: clamp(14px,2.6vw,20px);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
    border: 1px solid var(--prd-ring);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    outline: none;               /* we’ll show a custom focus below */
  }
  .prd-grid article:hover{
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 18px 60px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
  }
  /* Keyboard-accessible focus for cards (article has tabindex="0") */
  .prd-grid article:focus-visible{
    border-color: var(--prd-accent2);
    box-shadow:
      0 18px 60px rgba(0,0,0,.35),
      0 0 0 3px rgba(154,166,255,.35),
      inset 0 0 0 1px rgba(255,255,255,.06);
  }
  
  .prd-grid h4{
    margin: 0 0 .3rem;
    font-weight: 800;
    font-size: clamp(18px,1.8vw,22px);
    letter-spacing: .2px;
  }
  
  @media (max-width: 1100px){
    .prd-grid .grid-4{ grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 640px){
    .prd-grid .grid-4{ grid-template-columns: 1fr; }
  }
  
  /* Slim narrative band */
  .prd-slab{
    background:
      radial-gradient(900px 400px at 10% -10%, rgba(113,225,255,.08), transparent 60%),
      radial-gradient(800px 500px at 90% 120%, rgba(154,166,255,.08), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  }
  .prd-slab .cols-3{
    display: grid;
    gap: clamp(18px,3vw,36px);
    grid-template-columns: 1fr 1fr 1fr;
  }
  .pill{
    display:inline-block;
    font-weight:800;
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#cfe7ff;
    border:1px solid var(--prd-ring);
    border-radius:999px;
    padding:6px 10px;
    background: rgba(255,255,255,.04);
    margin:0 0 .5rem;
  }
  @media (max-width: 980px){
    .prd-slab .cols-3{ grid-template-columns: 1fr; }
  }
  
  /* Motion-respect */
  @media (prefers-reduced-motion: reduce){
    .prd-grid article{ transition: none; }
  }

  /* Clickable Products */

 /* ===== Dark Theme Variables ===== */
:root{
  --prod-band-bg: #0b1020;          /* dark background */
  --prod-card-bg: #121a2b;          /* card surface */
  --prod-ink: #e9eefc;              /* main text */
  --prod-muted: #9aa6c0;            /* secondary text/icons */
  --prod-ring: rgba(120, 140, 200, .16);
  --prod-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --prod-shadow-hover: 0 18px 50px rgba(0, 0, 0, .55);
}

/* ===== Section shell ===== */
.products-band{
  background:
    radial-gradient(900px 400px at 15% -10%, rgba(90,120,255,.10), transparent 60%),
    var(--prod-band-bg);
  padding: clamp(28px, 5vw, 60px) 0;
}
.products-wrap{
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(18px, 5vw, 48px);
}

/* ===== Title ===== */
.products-title{
  margin: 0 0 clamp(16px,2.2vw,24px);
  font-size: clamp(22px, 3.8vw, 44px);
  line-height: 1.05;
  letter-spacing: .2px;
  color: var(--prod-ink);
  text-align: center;
}

/* ===== Grid (fixed card heights for uniform size) ===== */
.products-grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(14px, 2.2vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

/* Each LI becomes a flex container so the anchor can fill height */
.product-card{
  display: flex;
}

/* ===== Card ===== */
.product-link{
  --accent: #3b5cff;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;

  /* >>> The line below makes ALL CARDS THE SAME SIZE <<< */
  height: clamp(120px, 18vw, 160px);

  width: 100%;
  padding: clamp(16px, 2.6vw, 24px) clamp(18px, 3vw, 28px);
  border-radius: 16px;
  background: var(--prod-card-bg);
  color: var(--prod-ink);
  text-decoration: none;
  border: 1px solid var(--prod-ring);
  box-shadow: var(--prod-shadow);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease, filter .18s ease;
}

/* Icon */
.product-icon{
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--accent);
}

/* Title */
.product-title{
  font-weight: 700;
  font-size: clamp(16px, 2.2vw, 22px);
  line-height: 1.2;
}

/* Arrow */
.product-arrow{
  margin-left: auto;
  display: grid;
  place-items: center;
  color: var(--prod-muted);
  transition: transform .18s ease, color .18s ease;
}

/* Hover / focus */
.product-link:hover,
.product-link:focus-visible{
  background: color-mix(in srgb, var(--accent) 18%, var(--prod-card-bg));
  border-color: color-mix(in srgb, var(--accent) 55%, var(--prod-ring));
  transform: translateY(-3px);
  box-shadow: var(--prod-shadow-hover);
  filter: saturate(1.2);
}
.product-link:hover .product-icon,
.product-link:focus-visible .product-icon{
  color: var(--accent);
}
.product-link:hover .product-arrow,
.product-link:focus-visible .product-arrow{
  color: var(--prod-ink);
  transform: translate(3px,-3px);
}

/* Active/featured card option */
.product-card.is-active .product-link{
  background: var(--accent);
  color: #fff;
  border-color: transparent;
}
.product-card.is-active .product-icon,
.product-card.is-active .product-arrow{ color: #fff; }

/* Make the whole tile tappable */
.product-link::after{
  content:"";
  position:absolute; inset:0; border-radius:16px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .product-link{ transition: none; }
  .product-arrow{ transition: none; }
  .product-icon{ transition: none; }
}


/* 1. AI & ML Product */

/* ========= AI/ML HERO — NAMESPACED ========= */

/* Optional page-wide background ONLY for AI/ML page */
.aiml-page {
  --aiml-bg-1:#0d0620;
  --aiml-bg-2:#1a0b3a;
  --aiml-ink:#e9ecff;
  --aiml-muted:#a8b2d1;
  --aiml-accent:#73ffd8;
  --aiml-accent-2:#7aa2ff;
  color:var(--aiml-ink);
  background:
    radial-gradient(1200px 600px at 85% -10%, #221048 0%, transparent 60%),
    linear-gradient(180deg,var(--aiml-bg-1),var(--aiml-bg-2));
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  margin:0;
}

/* Component-level theme (self-contained) */
.aiml-hero {
  --aiml-bg-1:#0d0620;
  --aiml-bg-2:#1a0b3a;
  --aiml-ink:#e9ecff;
  --aiml-muted:#a8b2d1;
  --aiml-accent:#73ffd8;
  --aiml-accent-2:#7aa2ff;

  position:relative;
  overflow:hidden;
  min-height:100vh;
  height:100vh;
  display:grid;
  place-items:center;
  padding: clamp(32px,6vw,80px) clamp(18px,5vw,48px);
  isolation:isolate;
  color:var(--aiml-ink);
}

/* subtle grid */
.aiml-hero::before{
  content:""; position:absolute; inset:-1px; z-index:-2;
  background:
    radial-gradient(600px 400px at 15% 20%, rgba(122,162,255,.12), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(115,255,216,.10), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 40px);
  filter:saturate(120%);
}

/* floating blobs */
.aiml-blob{
  position:absolute; inset:auto;
  width:42vmax; height:42vmax; border-radius:50%;
  background: radial-gradient(closest-side at 30% 30%, rgba(115,255,216,.18), transparent 60%);
  filter: blur(40px);
  animation: aiml-drift 28s linear infinite;
  z-index:-1;
}
.aiml-b2{ left:-10vmax; top:-10vmax; animation-duration: 34s; background: radial-gradient(closest-side at 65% 40%, rgba(122,162,255,.20), transparent 60%);}
.aiml-b3{ right:-12vmax; bottom:-8vmax; animation-duration: 40s; background: radial-gradient(closest-side at 40% 50%, rgba(183,135,255,.18), transparent 60%);}
@keyframes aiml-drift{
  0%{ transform: translate3d(0,0,0) rotate(0)}
  50%{ transform: translate3d(2vmax,-1vmax,0) rotate(180deg)}
  100%{ transform: translate3d(0,0,0) rotate(360deg)}
}

.aiml-wrap{ max-width: 1150px; width:100%; display:grid; grid-template-columns: 1.2fr .8fr; gap:clamp(24px,4vw,48px); align-items:center }
@media (max-width: 900px){ .aiml-wrap{ grid-template-columns: 1fr } }

.aiml-eyebrow{
  display:inline-flex; gap:.5rem; align-items:center;
  padding:8px 12px; border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  font-size:.82rem; color:var(--aiml-muted);
  margin-bottom: 14px;
}
.aiml-dot{ width:.55rem; height:.55rem; border-radius:50%; background:var(--aiml-accent); box-shadow:0 0 16px rgba(115,255,216,.4) }

.aiml-hero h1{
  font-weight:800; line-height:1.05;
  font-size: clamp(34px, 6vw, 64px);
  margin:0 0 12px 0;
}
.aiml-grad{
  background: linear-gradient(90deg, var(--aiml-accent), var(--aiml-accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.aiml-lede{
  color:var(--aiml-muted); font-size: clamp(14px, 1.8vw, 18px); line-height:1.6;
  max-width: 52ch; margin: 0 0 22px 0;
}

/* orbs */
.aiml-orbs{ position:relative; min-height: 360px; display:grid; place-items:center }
.aiml-orb{
  width: 130px; height:130px; border-radius:50%; position:absolute;
  display:grid; place-items:center;
  background: radial-gradient(120px 120px at 30% 35%, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 60px rgba(122,162,255,.08), 0 25px 120px rgba(0,0,0,.55);
  animation: aiml-float 8s ease-in-out infinite;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}
.aiml-orb:nth-child(1){ top: 12%; right:10% }
.aiml-orb:nth-child(2){ top: 48%; left:-2% ; animation-delay:2s; animation-duration: 10s; }
.aiml-orb:nth-child(3){ bottom: -4%; right: 22%; animation-delay:4s; animation-duration: 12s; }

@keyframes aiml-float {
  0%   { transform: translateY(0) scale(1); }
  25%  { transform: translateY(-12px) scale(1.05); }
  50%  { transform: translateY(0) scale(1); }
  75%  { transform: translateY(12px) scale(0.97); }
  100% { transform: translateY(0) scale(1); }
}

.aiml-ring{ position:absolute; inset:-18px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(115,255,216,.18), transparent 65%);
  filter: blur(6px);
}
.aiml-tag{ position:absolute; bottom:-28px; width:100%; text-align:center; font-size:.78rem; color:var(--aiml-muted) }

.aiml-orb:hover {
  transform: scale(1.12) translateY(-6px);
  box-shadow:
    0 0 25px rgba(115,255,216,0.6),
    0 0 50px rgba(122,162,255,0.5),
    0 15px 40px rgba(0,0,0,0.5);
}
.aiml-orb:hover svg { transform: rotate(6deg) scale(1.05); transition: transform 0.3s ease; }



/* 1  */

/* === AI1 (Dark Glass Cards) === */
.ai1{ --ai1-bg1:#0f0b22; --ai1-ink:#e9ecff; --ai1-muted:#a8b2d1; --ai1-card:rgba(255,255,255,.06); --ai1-brd:rgba(255,255,255,.12);
  color:var(--ai1-ink); background: radial-gradient(900px 500px at 100% 0,#21175a 0, transparent 60%), linear-gradient(180deg,#0b0818,#120d2a);
  padding: clamp(40px,7vw,96px) clamp(16px,5vw,40px);
}
.ai1-wrap{ max-width:1200px; margin:0 auto }
.ai1-head h2{ margin:0 0 8px; font-size:clamp(28px,4vw,44px) }
.ai1-head p{ margin:0 0 22px; color:var(--ai1-muted); max-width:68ch }
.ai1-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
@media (max-width:900px){ .ai1-grid{ grid-template-columns:1fr } }
.ai1-card{
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid var(--ai1-brd); border-radius:16px; padding:20px;
  box-shadow: 0 10px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ai1-card:hover{ transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,.55) }
.ai1-card h3{ margin:0 0 6px; font-size:clamp(18px,2.4vw,22px) }
.ai1-card p{ margin:0 0 12px; color:var(--ai1-muted) }
.ai1-list{ margin:0; padding-left:18px; color:var(--ai1-ink) }
.ai1-list li{ margin:6px 0 }


/* 2 */
/* ===== AI2 — polished look (heading, paragraph, chips, image) ===== */
.ai2{
  --ink:#0b1320; --muted:#3a4960;
  --accent1:#6ee7f9; --accent2:#7c8cff; --paper:#ffffffcc;
  color:var(--ink);
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(108,130,255,.18), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(110,231,249,.16), transparent 60%),
    linear-gradient(180deg,#fbfdff,#f2f6ff);
  padding: clamp(44px,7vw,100px) clamp(16px,5vw,44px);
  border-block: 1px solid #e7edff;
}
.ai2-wrap{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:32px; align-items:center;
}
@media (max-width:980px){ .ai2-wrap{ grid-template-columns:1fr } }

/* Heading — gradient ink + underline on hover */
.ai2-copy h2{
  margin:0 0 14px; font-weight:800;
  font-size:clamp(28px,4.6vw,46px); line-height:1.05;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 24px rgba(124,140,255,.15);
  position:relative; display:inline-block;
}
.ai2-copy h2::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:4px;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  border-radius:999px; transform:scaleX(.35); transform-origin:left;
  transition:transform .35s ease;
}
.ai2-copy h2:hover::after{ transform:scaleX(1) }

/* Paragraph — glass card with accent stripe */
.ai2-copy p{
  margin:18px 0 0; max-width:64ch; color:var(--muted);
  line-height:1.75; font-size:clamp(15px,1.5vw,18px);
  padding:14px 16px 14px 18px; border-radius:14px;
  background:linear-gradient(180deg,var(--paper),#ffffffb8);
  border:1px solid rgba(20,40,80,.08);
  box-shadow:0 10px 30px rgba(20,40,80,.08);
  position:relative; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ai2-copy p::before{
  content:""; position:absolute; left:-2px; top:10px; bottom:10px; width:4px; border-radius:4px;
  background:linear-gradient(180deg,var(--accent1),var(--accent2));
  box-shadow:0 0 12px rgba(124,140,255,.45);
}
.ai2-copy p:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 42px rgba(20,40,80,.14);
  border-color:rgba(20,40,80,.12);
}

/* Chips */
.ai2-chips{
  list-style:none; padding:0; margin:14px 0 0; display:flex; flex-wrap:wrap; gap:10px;
}
.ai2-chips li{
  background:#fff; color:#22304a; font-weight:600; font-size:.9rem;
  padding:8px 12px; border-radius:999px; border:1px solid rgba(10,30,60,.12);
  box-shadow:0 6px 20px rgba(12,30,60,.08);
  transition:transform .18s ease, box-shadow .18s ease;
}
.ai2-chips li:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(12,30,60,.12) }

/* Image — gradient border + tilt/zoom on hover */
.ai2-fig{ margin:0; position:relative }
.ai2-img{
  width:100%; height:auto; display:block; border-radius:18px;
  border:2px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,var(--accent1),var(--accent2)) border-box;
  box-shadow:0 20px 60px rgba(15,25,50,.18);
  transition: transform .45s ease, box-shadow .45s ease, filter .45s ease;
  transform-origin:center;
}
.ai2-img:hover{
  transform: perspective(900px) rotateX(2deg) rotateY(-2deg) scale(1.03);
  box-shadow:0 28px 80px rgba(15,25,50,.26), 0 0 36px rgba(124,140,255,.35);
  filter:saturate(105%);
}
.ai2-fig figcaption{
  margin-top:10px; font-size:.92rem; color:#4a5874; text-align:center
}



/* 3 */
/* === AI3 (Vibrant Gradient KPIs) === */
/* === AI3 (Dark Neon Style) === */
.ai3{
  --glow1:#6ee7f9; --glow2:#7c8cff;
  --ink:#f9fbff; --muted:#b8c6e0; --pill:#14192d;

  background:
    radial-gradient(900px 500px at 10% 0%, rgba(108,130,255,.20), transparent 70%),
    radial-gradient(800px 500px at 90% 100%, rgba(110,231,249,.15), transparent 70%),
    linear-gradient(180deg,#0d1222,#161b2d);
  padding: clamp(50px,8vw,100px) clamp(18px,5vw,44px);
  color: var(--ink);
}
.ai3-wrap{ max-width:1200px; margin:0 auto; text-align:center }

.ai3-head h2{
  margin:0 0 10px;
  font-size:clamp(28px,4vw,42px);
  font-weight:800;
  background:linear-gradient(90deg,var(--glow1),var(--glow2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.ai3-head p{
  margin:0 0 30px;
  color:var(--muted);
  font-size:1rem;
}

/* KPIs — glass cards */
.ai3-kpis{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-bottom:28px;
}
@media (max-width:900px){
  .ai3-kpis{ grid-template-columns:repeat(2,1fr) }
}
.ai3-kpi{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:22px;
  backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ai3-kpi:hover{
  transform: translateY(-6px);
  box-shadow:0 14px 40px rgba(0,0,0,.6), 0 0 20px rgba(124,140,255,.3);
}
.ai3-kpi .num{
  font-size:clamp(22px,3.6vw,38px);
  font-weight:800;
  background:linear-gradient(90deg,var(--glow1),var(--glow2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.ai3-kpi .lbl{ font-size:.95rem; color:var(--muted); margin-top:6px }

/* Badges — neon pills */
.ai3-badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}
.ai3-badge{
  background:var(--pill);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:10px 16px;
  font-weight:600;
  color:var(--ink);
  font-size:.9rem;
  box-shadow:0 6px 18px rgba(0,0,0,.5), 0 0 10px rgba(124,140,255,.15);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ai3-badge:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 12px 26px rgba(0,0,0,.65), 0 0 16px rgba(110,231,249,.35);
}


/* DevOps & Automation Hero Section */

.dv2 {
  --a:#ff9d76; --c:#2ec4b6; --ink:#1a1c2e; --muted:#4a5674;
  background: linear-gradient(135deg,#fdfbfb 0%,#ebedee 100%);
  padding: clamp(48px,8vw,100px) clamp(20px,6vw,60px);
  position:relative; overflow:hidden;
}
.dv2-wrap { max-width:1200px; margin:0 auto; text-align:center; position:relative; z-index:2; }

.dv2 h1 {
  font-size:clamp(32px,5vw,56px);
  font-weight:800; line-height:1.1;
  margin:0 0 12px; color:var(--ink);
}
.dv2 h1 span {
  background:linear-gradient(90deg,var(--a),var(--c));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.dv2-lede {
  color:var(--muted); font-size:clamp(15px,1.4vw,18px);
  max-width:70ch; margin:0 auto 40px; line-height:1.7;
}

/* orbs + cards same as before */
.dv2-orbs { display:flex; justify-content:center; gap:30px; margin-bottom:40px; flex-wrap:wrap; }
.dv2-orb {
  width:120px; height:120px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:40px; background:#fff; box-shadow:0 8px 30px rgba(0,0,0,.08);
  transition:transform .4s, box-shadow .4s; position:relative;
  animation:float 6s ease-in-out infinite;
}
.dv2-orb:nth-child(2){ animation-duration:8s }
.dv2-orb:nth-child(3){ animation-duration:10s }
.dv2-orb:hover { transform:scale(1.1) translateY(-6px); box-shadow:0 12px 36px rgba(0,0,0,.12); }
.dv2-orb::after {
  content:attr(data-label); position:absolute; bottom:-26px; font-size:.9rem; color:var(--muted);
}
@keyframes float { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }

.dv2-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:900px){ .dv2-grid{ grid-template-columns:1fr } }
.dv2-card {
  background:#fff; border-radius:14px; padding:22px;
  box-shadow:0 8px 30px rgba(0,0,0,.08); transition:.25s;
}
.dv2-card:hover { transform:translateY(-6px); box-shadow:0 12px 40px rgba(0,0,0,.12) }
.dv2-card h3 {
  margin:0 0 8px; font-size:1.2rem;
  background:linear-gradient(90deg,var(--a),var(--c));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.dv2-card p { margin:0; color:var(--muted); font-size:.95rem; line-height:1.6; }


/* 1,2 & 3  */

/* ============== 1) Narrative Overview (paragraph only) ============== */
.dvx1--alt{
  --ink:#0d142a; --muted:#49567a; --bar1:#6ee7f9; --bar2:#7c8cff;
  --bg1:#fefefe; --bg2:#f1f5ff;

  /* angled split + subtle dots pattern (very different from AI/ML grid) */
  background:
    radial-gradient(750px 360px at -10% 10%, rgba(124,140,255,.18), transparent 60%),
    conic-gradient(from 200deg at 120% -10%, #fff 0 20%, rgba(110,231,249,.14) 20% 24%, #fff 24% 100%),
    linear-gradient(180deg,var(--bg1),var(--bg2));
  padding: clamp(56px,7vw,96px) clamp(18px,5vw,44px);
  color:var(--ink);
  position:relative; overflow:hidden;
}

/* faint dot texture */
.dvx1--alt::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(13,20,42,.06) 1px, transparent 1.5px);
  background-size:22px 22px;
  mask: linear-gradient(#000, transparent 80%);
}

.dvx1-wrap{ max-width:1100px; margin:0 auto; position:relative; z-index:1 }

/* heading with vertical accent bar */
.dvx1-head .eyebrow{
  display:inline-block; font-size:.85rem; color:#60709a; margin-bottom:8px;
  background:rgba(13,20,42,.04); border:1px solid rgba(13,20,42,.08);
  padding:6px 10px; border-radius:999px;
}
.dvx1-head h2{
  display:flex; align-items:center; gap:12px;
  margin:0 0 18px; font-weight:900; line-height:1.04;
  font-size:clamp(28px,4.8vw,48px);
  color:var(--ink);
}
.dvx1-head h2 i{
  display:inline-block; width:6px; height:32px; border-radius:3px;
  background:linear-gradient(180deg,var(--bar1),var(--bar2));
  box-shadow:0 0 16px rgba(124,140,255,.35);
}

/* flowing two-column text */
.dvx1-body{
  columns: 2; column-gap: 34px;
}
@media (max-width:980px){ .dvx1-body{ columns:1 } }

.dvx1-body p{
  break-inside: avoid; margin:0 0 16px;
  color:var(--muted); line-height:1.8; font-size:clamp(15px,1.5vw,18px);
}

/* pull-quote as a colored stripe that spans the column width */
.dvx1-quote{
  break-inside: avoid; margin:12px 0 16px; padding:12px 14px 12px 18px;
  border-radius:12px; position:relative; background:#fff;
  border:1px solid rgba(13,20,42,.08); box-shadow:0 10px 28px rgba(13,20,42,.08);
  font-style:italic; color:#2a3758;
}
.dvx1-quote::before{
  content:""; position:absolute; left:-2px; top:10px; bottom:10px; width:4px; border-radius:4px;
  background:linear-gradient(180deg,var(--bar1),var(--bar2));
}

/* tiny impact chips (inline, not cards) */
.dvx1-chips{
  list-style:none; padding:0; margin:8px 0 0; display:flex; flex-wrap:wrap; gap:10px;
}
.dvx1-chips li{
  background:#fff; color:#233150; font-weight:700; font-size:.85rem;
  padding:8px 12px; border-radius:999px; border:1px solid rgba(13,20,42,.10);
  box-shadow:0 6px 20px rgba(13,20,42,.08);
  transition:transform .18s ease, box-shadow .18s ease;
}
.dvx1-chips li:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(13,20,42,.12) }


/* ============== 2) Methodology Flow (connected timeline) ============== */
.dvx2{
  --ink:#f6f8ff; --muted:#c2cbea; --edge:#2a3355; --glow1:#6ee7f9; --glow2:#7c8cff;
  background:
    radial-gradient(900px 400px at 100% 0%, rgba(110,231,249,.14), transparent 60%),
    linear-gradient(180deg,#0d1222,#171c2f);
  color:var(--ink);
  padding: clamp(56px,7vw,96px) clamp(18px,5vw,40px);
}
.dvx2-wrap{ max-width:1200px; margin:0 auto; text-align:center }
.dvx2 h2{ margin:0 0 16px; font-weight:800; font-size:clamp(26px,4vw,40px) }

.dvx2-steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  list-style:none; padding:0; margin:26px 0 12px; position:relative;
}
@media (max-width:960px){ .dvx2-steps{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .dvx2-steps{ grid-template-columns:1fr } }

/* connector line */
.dvx2-steps::before{
  content:""; position:absolute; left:0; right:0; top:28px; height:2px;
  background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,.06));
  z-index:0;
}

.dvx2-steps li{
  text-align:center; position:relative; z-index:1; padding-top:18px;
}
.dvx2-steps .node{
  width:38px; height:38px; margin:0 auto 8px; border-radius:50%;
  background:linear-gradient(135deg,var(--glow1),var(--glow2));
  color:#0b1320; font-weight:800; display:grid; place-items:center;
  box-shadow:0 0 0 6px rgba(124,140,255,.12), 0 10px 28px rgba(0,0,0,.45);
  transition: transform .25s ease, box-shadow .25s ease;
}
.dvx2-steps li:hover .node{
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 0 0 10px rgba(110,231,249,.16), 0 14px 40px rgba(0,0,0,.6);
}

.dvx2 h3{ margin:6px 0 6px; font-size:1.05rem; color:#fff }
.dvx2 p{ margin:0; color:var(--muted); line-height:1.6 }
.dvx2-footnote{ margin-top:18px; color:#b2bee0; font-size:.95rem }

/* ============== 3) Image-Led (picture + copy) ============== */
/* Fancy background for Platform section */
.dvx3.fancy-bg{
  --ink:#f7faff; --muted:#d0d6ea;
  --grad1:#6ee7f9; --grad2:#7c8cff;

  background:
    radial-gradient(800px 400px at 15% 30%, rgba(110,231,249,.18), transparent 70%),
    radial-gradient(700px 350px at 85% 70%, rgba(124,140,255,.16), transparent 70%),
    linear-gradient(180deg,#182233,#0d1424);  /* darker gradient */
  
  position:relative;
  overflow:hidden;
  color:var(--ink);

  padding: clamp(70px,10vw,140px) clamp(22px,6vw,60px);
}

/* floating shapes */
.floating-shape{
  position:absolute; border-radius:50%; opacity:.15; pointer-events:none;
  animation: floaty 12s ease-in-out infinite;
}
.shape1{ width:220px; height:220px; background:#7c8cff; top:10%; left:-80px }
.shape2{ width:160px; height:160px; background:#2ec4b6; bottom:20%; right:-60px; animation-delay:3s }
.shape3{ width:100px; height:100px; background:#ff9d76; top:70%; left:40%; animation-delay:6s }

@keyframes floaty{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-30px) }
}

/* wrap layout */
.dvx3-wrap{
  max-width:1200px; margin:0 auto; display:grid;
  grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;
  position:relative; z-index:2;
}
@media (max-width:980px){ .dvx3-wrap{ grid-template-columns:1fr } }

/* image styling */
.dvx3-img{
  width:100%; border-radius:20px;
  border:2px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(135deg,var(--grad1),var(--grad2)) border-box;
  box-shadow:0 18px 60px rgba(15,25,50,.18);
  transition:transform .4s ease, box-shadow .4s ease;
}
.dvx3-img:hover{
  transform:scale(1.03);
  box-shadow:0 26px 80px rgba(15,25,50,.25);
}

.dvx3-copy h2{
  font-size:clamp(28px,4vw,44px); font-weight:800; margin-bottom:14px;
  background:linear-gradient(90deg,var(--grad1),var(--grad2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.dvx3-copy p{ color:var(--muted); margin:0 0 14px; line-height:1.75 }
.dvx3-highlights{ list-style:none; margin:0; padding:0 }
.dvx3-highlights li{
  background:#fff; padding:10px 14px; margin:8px 0; border-radius:12px;
  box-shadow:0 6px 20px rgba(0,0,0,.06); font-weight:500; color:#0c1228;
  transition:transform .2s ease, box-shadow .2s ease;
}
.dvx3-highlights li:hover{ transform:translateX(6px); box-shadow:0 12px 30px rgba(0,0,0,.12) }


/* BigData & analytics */

/* ==== Hero ==== */
/* ===== Simple Hero (low-motion) ===== */
.hero-bda.v4-lite{
  --ink:#f6f8ff; --muted:#cfd6f3;
  --c1:#6ee7f9; --c2:#7c8cff; --c3:#66ffb3;
  --panel:#0f1c26;
  position:relative; overflow:hidden;
  background: linear-gradient(135deg,#0c1326 10%, #131a3a 55%, #0c1326 100%);
  color:var(--ink);
  padding: clamp(50px,7.5vw,100px) clamp(20px,5vw,56px);
}

.v4-lite-blob{ position:absolute; border-radius:50%; filter:blur(120px); opacity:.14; pointer-events:none }
.v4-lite-blob.a{ width:320px;height:320px;background:var(--c1); left:-120px; top:-110px }
.v4-lite-blob.b{ width:280px;height:280px;background:var(--c2); right:-120px; bottom:-120px }

.hero-bda.v4-lite .hero-bda-wrap{
  display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;
  max-width:1200px; margin:0 auto; position:relative; z-index:1;
}
@media (max-width:960px){ .hero-bda.v4-lite .hero-bda-wrap{ grid-template-columns:1fr; text-align:center } }

.hero-bda.v4-lite h1{
  margin:0 0 12px; font-size:clamp(32px,5.4vw,60px); font-weight:900;
  background:linear-gradient(90deg,var(--c1),var(--c2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.hero-bda.v4-lite p{ margin:0 0 14px; color:var(--muted); line-height:1.75 }
.hero-bda.v4-lite .hero-bda-points{ list-style:none; padding:0; margin:10px 0 0 }
.hero-bda.v4-lite .hero-bda-points li{
  position:relative; padding-left:26px; margin:10px 0; color:#e9ecff; font-weight:500
}
.hero-bda.v4-lite .hero-bda-points li::before{
  content:""; position:absolute; left:0; top:9px; width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg,var(--c1),var(--c2)); box-shadow:0 0 8px rgba(110,231,249,.6);
}

/* ---------- Viz card (subtle) ---------- */
.viz-col{ display:flex; justify-content:center }
.viz-card{
  width:min(560px,92vw); background:linear-gradient(180deg,#0c1723,#0b1623);
  border:1px solid rgba(255,255,255,.08); border-radius:16px; overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.viz-card:hover{
  transform: translateY(-4px);
  border-color: rgba(110,231,249,.22);
  box-shadow:0 26px 70px rgba(0,0,0,.5);
}

.viz-head{
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  background: rgba(255,255,255,.02); border-bottom:1px solid rgba(255,255,255,.06);
}
.viz-head .label{ color:#dbe6ff; font-weight:700; letter-spacing:.3px }
.dot{ width:10px;height:10px;border-radius:50%; background:var(--c3); box-shadow:0 0 8px var(--c3) }

.viz{ display:block; width:100%; height:auto }
.grid path{ stroke:rgba(255,255,255,.08); stroke-width:1 }

.bars rect{
  fill: linear-gradient(180deg,#62e6f8,#6aaafc);
  rx:4; ry:4;
}
.series{
  fill:none;
  stroke: url(#lineGrad); /* fallback color below */
  stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  stroke: #6ee7f9;
}

/* Footer labels */
.viz-foot{
  display:flex; justify-content:space-between; gap:8px; padding:10px 14px; color:#b9c7da;
  font-weight:600; letter-spacing:.2px; border-top:1px solid rgba(255,255,255,.06)
}

/* Respect reduced motion (already low-motion) */
@media (prefers-reduced-motion: reduce){
  .viz-card:hover{ transform:none }
}


/* ==== Insights ==== */
/* ===== Insights v2 (distinct background + image effects) ===== */
.insights-bda.v2{
  --ink:#0e1430; --muted:#485377;
  --glowA:#6ee7f9; --glowB:#7c8cff; --panel:#ffffff;

  position:relative;
  padding: clamp(80px,9vw,140px) clamp(20px,5vw,60px);
  color:var(--ink);

  /* layered background: dark-to-light + soft glows */
  background:
    radial-gradient(900px 420px at 5% 15%, rgba(124,140,255,.18), transparent 60%),
    radial-gradient(800px 380px at 100% 90%, rgba(110,231,249,.15), transparent 60%),
    linear-gradient(180deg,#f7faff,#eef4ff);
  overflow:hidden;
}

/* subtle mesh overlay */
.insights-bda.v2 .grid-overlay{
  position:absolute; inset:0; pointer-events:none; opacity:.28;
  background-image:
    linear-gradient(rgba(12,22,48,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12,22,48,.06) 1px, transparent 1px);
  background-size: 42px 42px;
  mask: linear-gradient(180deg,#000,transparent 85%);
}

.insights-wrap{
  display:grid; grid-template-columns:1fr 1fr; gap:40px;
  max-width:1200px; margin:0 auto; align-items:center;
}
@media (max-width:900px){ .insights-wrap{ grid-template-columns:1fr } }

.insights-fig{ margin:0; position:relative }
.insights-fig figcaption{ font-size:.9rem; color:#5b6a86; }

.float-img{
  width:100%; display:block; border-radius:18px;
  /* gradient border + panel background */
  border:2px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,var(--glowA),var(--glowB)) border-box;
  box-shadow: 0 18px 60px rgba(15,25,50,.18);
  transition: transform .45s ease, box-shadow .45s ease, filter .45s ease;
  will-change: transform, box-shadow, filter;
}
.float-img:hover{
  transform: perspective(1000px) rotateX(1.2deg) rotateY(-2deg) scale(1.03);
  box-shadow: 0 28px 90px rgba(15,25,50,.28);
  filter: saturate(108%);
}

.insights-copy h2{
  margin:0 0 12px;
  font-size:clamp(26px,4.2vw,42px);
  font-weight:800;
  background:linear-gradient(90deg,var(--glowA),var(--glowB));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.insights-copy p{ margin:0 0 14px; color:var(--muted); line-height:1.8 }

/* animated blobs */
.insights-bda.v2 .blob{
  position:absolute; border-radius:50%; filter:blur(24px); opacity:.35; pointer-events:none;
  animation: floaty 14s ease-in-out infinite;
}
.insights-bda.v2 .b1{ width:320px; height:320px; left:-100px; top:40%; background:var(--glowB); }
.insights-bda.v2 .b2{ width:220px; height:220px; right:-70px; bottom:12%; background:var(--glowA); animation-delay:3s }
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-22px) } }


/* ==== Capabilities Grid ==== */
/* ===== Big Data & Analytics – Arc Section ===== */
.bda-arc{
  position:relative; overflow:hidden;
  padding: clamp(72px,10vw,140px) clamp(16px,5vw,48px) clamp(48px,6vw,90px);
  color:#eaf2ff;
  background:
    radial-gradient(900px 420px at 10% 20%, rgba(110,231,249,.12), transparent 60%),
    radial-gradient(800px 360px at 95% 10%, rgba(124,140,255,.10), transparent 60%),
    linear-gradient(135deg,#0c1426 10%, #0e1a33 45%, #0b1320 100%);
}

/* gentle pixel/mesh texture */
.bda-arc-bg{
  position:absolute; inset:0; opacity:.07; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* Curved arcs */
.bda-arc-left, .bda-arc-right{
  position:absolute; width:min(1200px,120vw); height:auto; pointer-events:none;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.25));
}
.bda-arc-left{ left:-12%; top:6% }
.bda-arc-right{ right:-10%; top:-2% }

.bda-arc-left path{
  fill:none; stroke: #49d17b; stroke-linecap:round;
  stroke-width:28; stroke-dasharray:1600; stroke-dashoffset:1600;
  animation: draw 1.8s ease forwards .1s;
}
.bda-arc-right path{
  fill:none; stroke: #37c0ff; stroke-linecap:round;
  stroke-width:26; stroke-dasharray:1400; stroke-dashoffset:1400;
  animation: draw 1.8s ease forwards .35s;
}
@keyframes draw{ to{ stroke-dashoffset:0 } }

/* Content */
.bda-arc-wrap{ position:relative; max-width:1050px; margin:0 auto; text-align:center }

.bda-arc-title{
  margin: 28px 0 8px;
  font-size: clamp(28px,6vw,64px); font-weight:900; letter-spacing:.2px;
  background: linear-gradient(90deg,#6ee7f9 0%, #7c8cff 45%, #7cf9c7 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.bda-arc-kicker{
  margin:0 0 18px; opacity:.8; font-weight:600; letter-spacing:.4px;
  color:#bcd0ff;
}

.bda-arc-sub{
  margin: 10px auto 10px;
  font-size: clamp(20px,3.2vw,32px); font-weight:800; color:#d9e6ff;
}

.bda-arc-points{
  margin:12px auto 0; padding:0; list-style:none; max-width:900px;
  display:grid; gap:10px; grid-template-columns:1fr; 
}
.bda-arc-points li{
  position:relative; padding-left:26px; line-height:1.7; color:#c7d6f6;
}
.bda-arc-points li::before{
  content:""; position:absolute; left:0; top:.7em; transform:translateY(-50%);
  width:12px; height:12px; border-radius:50%;
  background:linear-gradient(135deg,#6ee7f9,#7c8cff);
  box-shadow:0 0 8px rgba(110,231,249,.6);
}

@media (min-width:900px){
  .bda-arc-points{ grid-template-columns:repeat(3,1fr) }
}


/* ==== Use Cases Timeline ==== */
/* ===== Big Data – Use Cases ===== */
.bda-cases{
  position:relative;
  padding: clamp(72px,8vw,120px) clamp(18px,5vw,48px);
  color:#eaf2ff;
  background:
    radial-gradient(900px 420px at 6% 0%, rgba(110,231,249,.14), transparent 60%),
    radial-gradient(800px 380px at 100% 100%, rgba(124,140,255,.12), transparent 60%),
    linear-gradient(135deg,#0d1426,#0e1a33 45%,#0b1320);
  overflow:hidden;
}
.cases-mesh{
  position:absolute; inset:0; pointer-events:none; opacity:.08;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size:44px 44px;
  mask: linear-gradient(180deg,#000,transparent 90%);
}
.cases-wrap{ max-width:1200px; margin:0 auto }
.cases-title{
  margin:0 0 28px;
  font-size:clamp(28px,4.8vw,48px);
  font-weight:900;
  background:linear-gradient(90deg,#00e6ff,#4dff91,#00b3ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 2px 6px rgba(0,255,200,.35),0 4px 12px rgba(0,200,255,.25);
}

/* grid */
.cases-grid{
  display:grid; gap:26px;
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:1000px){ .cases-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .cases-grid{ grid-template-columns:1fr } }

/* card */
.case{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:22px;
  padding:18px 18px 22px;
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 46px rgba(5,12,28,.45);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.case:hover{
  transform: translateY(-8px);
  border-color: rgba(110,231,249,.4);
  box-shadow: 0 30px 70px rgba(5,12,28,.6);
}

/* media with glow and gradient border */
.case-media{
  position:relative; border-radius:16px; overflow:hidden;
  border:2px solid transparent;
  background:
    linear-gradient(#0e162b,#0e162b) padding-box,
    linear-gradient(135deg,#6ee7f9,#7c8cff) border-box;
}
.case-img{
  display:block; width:100%; height:240px; object-fit:cover;
  filter:saturate(95%) contrast(102%);
  transition: transform .5s ease, filter .5s ease;
}
.case:hover .case-img{ transform: scale(1.06); filter:saturate(108%) }

.case-glow{
  content:""; position:absolute; inset:auto -20% -20% -20%;
  height:40%; background: radial-gradient(60% 120% at 50% 100%, rgba(110,231,249,.28), transparent 60%);
  pointer-events:none; transition: opacity .35s ease;
  opacity:0;
}
.case:hover .case-glow{ opacity:1 }

.case-head{
  margin:14px 4px 6px; font-weight:800;
  color:#d9e6ff; font-size:clamp(18px,2.2vw,22px);
}
.case-copy{
  margin:0 4px; color:#c4d0ef; line-height:1.7; font-size:1rem;
}


/* Finance & Fintech */

/* --------- Base --------- */
*{ box-sizing: border-box }
html,body{ margin:0; padding:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:#0c1628 }
img{ max-width:100%; display:block }

/* --------- Section 1: Intro --------- */
.fintech-intro{
  background:#f6f9ff;
  padding: clamp(50px,7vw,86px) clamp(18px,5vw,40px);
}
.fintech-wrap{
  display:grid; grid-template-columns:1.05fr .95fr; gap:32px; align-items:center;
  max-width:1200px; margin:0 auto;
}
@media (max-width:960px){ .fintech-wrap{ grid-template-columns:1fr } }

.fintech-images{ display:flex; gap:18px; align-items:flex-start; justify-content:center }
.fintech-images img{
  width:100%; max-width:520px; border-radius:16px;
  box-shadow:0 16px 40px rgba(20,30,60,.12);
  transform: rotate(-1.2deg);
  transition: transform .25s ease, box-shadow .25s ease;
}
.fintech-images img:last-child{ transform: rotate(1.2deg) }
.fintech-images img:hover{
  transform: rotate(0deg) scale(1.02);
  box-shadow:0 20px 60px rgba(20,30,60,.18);
}

.fintech-copy h2{
  margin:0 0 10px; font-size: clamp(28px,4vw,44px);
  color:#182545;
}
.fintech-copy p{
  margin:0 0 12px; line-height:1.75; color:#3b4666;
}

/* --------- Section 2: Detailed narrative --------- */
.fintech-detail{
  background: linear-gradient(135deg, #0d1428, #1b2240);
  color:#f7faff;
  padding: clamp(60px,7.5vw,100px) clamp(18px,5vw,40px);
}
.fintech-detail-wrap{ max-width:900px; margin:0 auto }
.fintech-detail h2{
  margin:0 0 16px; font-size: clamp(28px,4vw,42px);
  background: linear-gradient(90deg, #6ee7f9, #7c8cff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.fintech-detail p{
  margin:0 0 16px; line-height:1.9; color:#cfd6f2;
}

/* --------- Section 3: Capabilities grid --------- */
.capabilities-alt.dark {
  background: linear-gradient(180deg, #0d1428, #1b1f35);
  padding: 80px 20px;
  color: #e9f1ff;
  position: relative;
}

.cap-wrap {
  max-width: 1100px;
  margin: 0 auto;
}

.cap-wrap h2 {
  text-align: center;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  margin-bottom: 14px;
  background: linear-gradient(90deg, #6ee7f9, #7c8cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cap-wrap .intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
  font-size: 1.1rem;
  color: #c7d4f2;
  line-height: 1.7;
}

/* Timeline */
.cap-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding-left: 50px;
}
.cap-steps::before {
  content: "";
  position: absolute;
  top: 0;
  left: 22px;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #6ee7f9, #7c8cff);
  border-radius: 4px;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
.cap-steps:hover::before {
  opacity: 0.7;
}

.cap-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  transition: transform 0.3s ease;
}
.cap-step:hover {
  transform: translateX(6px);
}

.step-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6ee7f9, #7c8cff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(110, 231, 249, 0.5);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.cap-step:hover .step-icon {
  transform: scale(1.15) rotate(6deg);
  box-shadow: 0 10px 28px rgba(110, 231, 249, 0.7);
  animation: pulse-glow 1.5s infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(110,231,249,.7); }
  50% { box-shadow: 0 0 24px rgba(110,231,249,.95); }
}

.step-content h3 {
  margin: 0 0 6px;
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffffff;
  transition: color 0.3s ease;
}
.cap-step:hover .step-content h3 {
  color: #6ee7f9;
}

.step-content p {
  margin: 0;
  color: #c7d4f2;
  line-height: 1.7;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.cap-step:hover .step-content p {
  transform: translateY(-3px);
  opacity: 0.95;
}


/* --------- Section 4: Use-case ribbon --------- */
.fintech-usecases{
  background: linear-gradient(180deg,#f7faff,#eef3ff);
  padding: clamp(56px,7.5vw,100px) clamp(18px,5vw,40px);
}
.uc-wrap{ max-width:1200px; margin:0 auto }
.fintech-usecases h2{
  margin:0 0 18px; font-size: clamp(26px,3.6vw,38px); color:#182545;
}
.uc-row{
  display:grid; grid-template-columns: repeat(4,1fr); gap:16px;
}
@media (max-width:1100px){ .uc-row{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .uc-row{ grid-template-columns:1fr } }

.uc-item{
  background:#fff; border:1px solid rgba(10,30,60,.08); border-radius:14px; overflow:hidden;
  box-shadow:0 12px 28px rgba(12,30,60,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}
.uc-item:hover{ transform: translateY(-3px); box-shadow:0 16px 36px rgba(12,30,60,.12) }
.uc-item img{ width:100%; height:180px; object-fit:cover }
.uc-item figcaption{ padding:12px 14px }
.uc-item h3{ margin:0 0 6px; color:#1b2a4a; font-size:1rem }
.uc-item p{ margin:0; color:#4b5a78; line-height:1.55 }


/* Risk & Compliance Systems */

body { margin:0; font-family:'Inter', sans-serif; background:#0d1428; color:#f1f5ff; line-height:1.7 }

/* ===== HERO ===== */
.hero-risk {
  background: linear-gradient(135deg,#0d1428,#1b2240);
  padding:100px 20px;
  text-align:center;
}
.hero-risk h1 {
  font-size: clamp(32px,5vw,60px);
  font-weight: 900;
  background: linear-gradient(90deg,#ff6a6a,#ff9a6a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:16px;
}
.hero-risk p {
  max-width: 700px; margin: 0 auto;
  font-size: 1.15rem; color:#cdd4f7;
}

/* ===== SECTION 1 ===== */
.section-text {
  background:#f9fbff;
  color:#1a2235;
  padding:80px 20px;
}
.section-text h2 {
  text-align:center; font-size: clamp(26px,4vw,42px); font-weight:800;
  margin-bottom:20px;
}
.section-text p {
  max-width:900px; margin:14px auto; font-size:1.05rem;
}

/* ===== SECTION 2 GRID CARDS ===== */
.capabilities-sec {
  background: linear-gradient(180deg, #101626, #141c34);
  color: #fff;
  padding: 90px 20px;
  text-align: center;
}

.cap-head {
  max-width: 800px;
  margin: 0 auto 50px;
}

.cap-head h2 {
  font-size: clamp(28px, 4.5vw, 42px);
  font-weight: 800;
  margin-bottom: 16px;
  background: linear-gradient(90deg, #6ee7f9, #7c8cff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cap-head p {
  color: #cfd5f7;
  font-size: 1.05rem;
  line-height: 1.7;
}

.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}

.cap-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 35px 22px;
  text-align: center;
  backdrop-filter: blur(10px);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border 0.35s ease;
  position: relative;
  overflow: hidden;
}

.cap-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, #6ee7f9, #7c8cff);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.cap-card:hover::before {
  opacity: 1;
}

.cap-card:hover {
  transform: translateY(-12px) scale(1.04);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.65);
}

.cap-card .icon {
  font-size: 2.4rem;
  margin-bottom: 16px;
  transition: transform 0.4s ease;
}

.cap-card:hover .icon {
  transform: rotate(8deg) scale(1.15);
}

.cap-card h3 {
  margin-bottom: 12px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
}

.cap-card p {
  font-size: 0.96rem;
  line-height: 1.6;
  color: #dbe3fa;
}


/* ===== SECTION 3 TIMELINE ===== */
/* ===== Section 3: Outcomes + Proof ===== */
.rc-outcomes{
  background: radial-gradient(800px 400px at 0% 0%, rgba(110,231,249,.08), transparent 60%),
              radial-gradient(800px 400px at 100% 100%, rgba(124,140,255,.08), transparent 60%),
              linear-gradient(180deg,#0e1430,#111a39);
  color:#e9f1ff;
  padding: clamp(64px,7vw,100px) clamp(18px,5vw,40px);
}
.rc-wrap{ max-width:1200px; margin:0 auto }
.rc-head h2{
  margin:0 0 10px; font-size:clamp(26px,4vw,40px); font-weight:800;
  background:linear-gradient(90deg,#6ee7f9,#7c8cff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rc-head p{ margin:0 0 28px; color:#cfd6f9; max-width:72ch; line-height:1.8 }

.rc-grid{
  display:grid; grid-template-columns: .9fr 1.1fr; gap:28px; align-items:start;
}
@media (max-width:980px){ .rc-grid{ grid-template-columns:1fr } }

/* KPIs */
.rc-kpis{ display:grid; gap:14px }
.kpi{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:18px 16px;
  box-shadow:0 16px 40px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.kpi:hover{
  transform: translateY(-4px);
  border-color: rgba(110,231,249,.35);
  box-shadow:0 22px 60px rgba(0,0,0,.34);
}
.kpi .num{
  font-size: clamp(24px,3.6vw,36px); font-weight:900;
  background:linear-gradient(90deg,#6ee7f9,#7c8cff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:4px;
}
.kpi .lbl{ font-weight:700; color:#ffffff }
.kpi .lbl span{ font-weight:600; color:#b8c3ee }
.kpi .hint{ margin:6px 0 0; color:#c7d2ff; font-size:.95rem }

/* Proof / checklist + image */
.rc-proof{ display:grid; grid-template-columns:1fr 1.1fr; gap:18px; align-items:start }
@media (max-width:720px){ .rc-proof{ grid-template-columns:1fr } }

.checklist{ list-style:none; padding:0; margin:0; display:grid; gap:10px }
.checklist li{
  display:flex; gap:10px; align-items:flex-start;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:12px 14px; line-height:1.6; color:#d9e2ff;
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}
.checklist li:hover{
  transform: translateX(4px);
  background:rgba(110,231,249,.06);
  border-color: rgba(110,231,249,.35);
}
.checklist li span{
  width:22px; height:22px; display:grid; place-items:center; flex-shrink:0;
  border-radius:50%;
  background:linear-gradient(135deg,#6ee7f9,#7c8cff);
  color:#0e1430; font-weight:900; font-size:.9rem;
  box-shadow:0 0 12px rgba(110,231,249,.6);
}

/* Image */
.rc-fig{ margin:0; }
.rc-fig img{
  width:100%; height:auto; display:block; border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 60px rgba(0,0,0,.4);
  transition: transform .4s ease, box-shadow .35s ease, filter .35s ease;
}
.rc-fig img:hover{
  transform: perspective(900px) rotateX(1.2deg) rotateY(-1.6deg) scale(1.03);
  box-shadow:0 28px 90px rgba(0,0,0,.55);
  filter: saturate(108%);
}
.rc-fig figcaption{ margin-top:8px; color:#bcd0ff; font-size:.92rem }



/* =============================
   Design tokens (scoped)
   ============================= */
   :root{
    --svc-ink:#0b3554;          /* deep navy for headings */
    --svc-body:#394656;         /* body text */
    --svc-muted:#6b7d90;        /* muted */
    --svc-accent:#e2513a;       /* orange/red accent */
    --svc-accent-2:#0b7fb8;     /* blue accent */
    --svc-bg:#ffffff;           /* page bg */
    --svc-soft:#f6f8fb;         /* soft gray */
    --svc-border:rgba(9,20,35,.10);
    --svc-radius:18px;
    --svc-shadow:0 20px 60px rgba(9,20,35,.10);
  }
  .svc-container{ max-width:1200px; margin:0 auto; padding:0 clamp(16px,4vw,32px); }
  .svc-eyebrow{ letter-spacing:.12em; text-transform:uppercase; font-size:.82rem; color:var(--svc-muted) }
  
  /* =============================
     1) HERO (layered image & shapes) for services
     ============================= */
  /* ===== tokens + base helpers (scoped) ===== */
:root{
  --svc-ink:#0b3554;
  --svc-body:#394656;
  --svc-muted:#6b7d90;
  --svc-accent:#e2513a;
  --svc-radius:18px;
  --svc-shadow:0 20px 60px rgba(9,20,35,.10);
}
.svc-container{ max-width:1200px; margin:0 auto; padding:0 clamp(16px,4vw,32px) }
.svc-eyebrow{ letter-spacing:.12em; text-transform:uppercase; font-size:.82rem; color:var(--svc-muted) }

/* ===== YOUR HERO STYLES (merged) ===== */
.svc-hero{
  background:#fff;
  padding: clamp(56px,8vw,110px) 0;
}
.svc-heroWrap{
  display:grid; gap: clamp(28px,5vw,64px);
  grid-template-columns: 1.05fr .95fr; align-items:center;
}
.svc-hero h1{
  color: var(--svc-ink);
  font-size: clamp(30px, 4.8vw, 58px);
  line-height:1.08; margin:.2rem 0 .75rem 0; font-weight:800;
}
.svc-hero p{
  color:var(--svc-body); font-size: clamp(15px,1.5vw,18px); line-height:1.7; max-width:60ch
}
.svc-cta{
  display:inline-flex; align-items:center; gap:.6rem; margin-top:18px;
  background: var(--svc-accent); color:#fff; text-decoration:none; font-weight:700;
  padding: 14px 18px; border-radius: 11px;
  box-shadow: 0 16px 40px rgba(226,81,58,.25); transition: transform .15s ease;
}
.svc-cta:hover{ transform: translateY(-2px) }

.svc-heroImg{ position:relative; min-height:340px }
.svc-heroImg img{
  display:block; width:100%; height:auto; border-radius:var(--svc-radius);
  box-shadow: var(--svc-shadow); object-fit:cover; position:relative; z-index:2;
}
/* layered rectangles (no cards) */
.svc-shape{ position:absolute; border-radius:10px; z-index:1 }
.svc-shape--a{ width: 38%; height: 30%; left:-8%; top:34%; background: var(--svc-accent) }
.svc-shape--b{ width: 52%; height: 40%; right:4%; top:-8%; background:#edf1f6 }
.svc-shape--c{ width: 22%; height: 18%; right:-6%; bottom:-8%; background: linear-gradient(135deg,#eaeef5,#fff) }
@media (max-width: 980px){
  .svc-heroWrap{ grid-template-columns:1fr }
  .svc-heroImg{ order:-1 }
}

/* ===== Enhancements: entrance + floating for shapes ===== */
.svc-hero .svc-eyebrow,
.svc-hero h1,
.svc-hero p,
.svc-hero .svc-cta{
  opacity: 0; transform: translateY(12px);
  animation: svc-fadeUp .7s ease forwards;
}
.svc-hero h1{ animation-delay: .06s }
.svc-hero p{ animation-delay: .12s }
.svc-hero .svc-cta{ animation-delay: .18s }
@keyframes svc-fadeUp{
  to { opacity:1; transform: translateY(0) }
}

.svc-heroImg .svc-shape{
  opacity:0; transform: translateY(18px) scale(.98) rotate(-1deg);
  animation: svc-shapeIn .7s ease forwards, svc-float 14s ease-in-out infinite;
  will-change: transform, opacity;
}
.svc-heroImg .svc-shape--a{ animation-delay:.10s }
.svc-heroImg .svc-shape--b{ animation-delay:.18s; animation-duration:16s }
.svc-heroImg .svc-shape--c{ animation-delay:.26s; animation-duration:18s }
@keyframes svc-shapeIn{
  to { opacity:1; transform: translateY(0) scale(1) rotate(0deg) }
}
@keyframes svc-float{
  0%   { transform: translate3d(0,0,0) rotate(0deg) }
  25%  { transform: translate3d(6px,-8px,0) rotate(1.2deg) }
  50%  { transform: translate3d(0,-2px,0) rotate(0deg) }
  75%  { transform: translate3d(-6px,6px,0) rotate(-1.2deg) }
  100% { transform: translate3d(0,0,0) rotate(0deg) }
}

/* Optional: image entrance */
/* .svc-heroImg img{
  opacity: 0; transform: translateY(10px) scale(1.01);
  animation: svc-imgIn .7s ease .12s forwards;
}
@keyframes svc-imgIn{
  to { opacity:1; transform: translateY(0) scale(1) }
} */

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .svc-hero *{ animation:none !important; transition:none !important }
}


  
  /* =============================
     2) IT SERVICES (striped rows, big numerals)
     ============================= */
  /* ================================
   IT Services (Striped Rows) — Base
   ================================ */
.svc-rows{
  background: linear-gradient(180deg,#fbfcfe 0%, #fff 100%);
  border-top:1px solid var(--svc-border);
  padding: clamp(48px,7vw,92px) 0;
}
.svc-rows header h2{
  color:var(--svc-ink); font-size: clamp(24px,3.2vw,40px); line-height:1.15; margin:.2rem 0 .4rem 0;
}
.svc-rows header p{ color:var(--svc-muted); max-width:75ch; margin:0 0 24px 0 }

/* striped list (no cards) */
.svc-stripes{ margin-top: 18px; border:1px solid var(--svc-border); border-radius: 14px; overflow:hidden }
.svc-stripe{
  display:grid; grid-template-columns: 120px 1fr 320px;
  gap: clamp(14px,2.6vw,24px); align-items:center;
  padding: clamp(16px,2.4vw,26px);
  background:
    linear-gradient(90deg, rgba(11,127,184,.06), transparent 30%),
    linear-gradient(180deg, #fff, #fff);
  border-bottom:1px solid var(--svc-border);
}
.svc-stripe:nth-child(even){
  background:
    linear-gradient(90deg, rgba(226,81,58,.06), transparent 30%),
    linear-gradient(180deg, #fcfdff, #fff);
}
.svc-stripe:last-child{ border-bottom:none }

.svc-num{
  font-weight:800; font-size: clamp(32px,5vw,54px); color:transparent;
  -webkit-text-stroke: 2px var(--svc-accent-2);
  text-stroke: 2px var(--svc-accent-2);
  line-height:1; justify-self:center;
}
.svc-num--warm{ -webkit-text-stroke: 2px var(--svc-accent) }

.svc-stripe h3{ margin:0 0 .25rem 0; font-size: clamp(18px,2.2vw,24px); color:var(--svc-ink) }
.svc-stripe p{ margin:0; color:var(--svc-body); line-height:1.65 }

/* right-side quick points (inline list, not cards) */
.svc-points{ display:flex; flex-wrap:wrap; gap:10px }
.svc-badge{
  background: #eef4f8; color:#0b3d57; border:1px solid var(--svc-border);
  padding:7px 10px; border-radius:999px; font-size:.86rem; white-space:nowrap
}
.svc-badge--warm{ background:#fff1ee; color:#5a2300; border-color: rgba(226,81,58,.35) }

@media (max-width: 1020px){
  .svc-stripe{ grid-template-columns: 90px 1fr }
  .svc-points{ grid-column: 2 / -1 }
}

/* 2 From strategy to steady-state */
/* ================================
   Enhancements — Hover Effects ONLY
   (keeps original look; adds polish)
   ================================ */

/* Animate numbers and badges smoothly */
/* =======================================
   Numbers & Badges — Unified Hover Effects
   ======================================= */

/* Smooth transitions */
.svc-num,
.svc-badge {
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    background .28s ease,
    color .28s ease,
    border-color .28s ease,
    -webkit-text-stroke-color .28s ease;
}

/* ===== Numbers ===== */

/* Default stroke look */
.svc-num {
  font-weight:800;
  font-size: clamp(32px,5vw,54px);
  color: transparent;
  -webkit-text-stroke: 2px var(--svc-accent-2);
  text-stroke: 2px var(--svc-accent-2);
  line-height:1;
  justify-self:center;
}

/* Warm variant default stroke */
.svc-num--warm {
  -webkit-text-stroke: 2px var(--svc-accent);
  text-stroke: 2px var(--svc-accent);
}

/* On row hover → ALL numbers behave same: gradient fill + glow + scale */
.svc-stripe:hover .svc-num {
  -webkit-text-stroke: 2px transparent;
  background: linear-gradient(90deg, var(--svc-accent-2), var(--svc-accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 10px rgba(11,127,184,.25));
  transform: scale(1.08);
}

/* Warm variant also switches to gradient fill like 1 & 2 */
.svc-stripe:hover .svc-num--warm {
  background: linear-gradient(90deg, var(--svc-accent), #ff9b82);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 10px rgba(226,81,58,.25));
  transform: scale(1.08);
}

/* ===== Badges ===== */

.svc-badge {
  background: #eef4f8;
  color:#0b3d57;
  border:1px solid var(--svc-border);
  padding:7px 10px;
  border-radius:999px;
  font-size:.86rem;
  white-space:nowrap;
  transform: translateY(0) scale(1);
}

/* Hover → lift, glow, subtle pulse */
.svc-badge:hover {
  transform: translateY(-3px) scale(1.06);
  background: #dff4ff;
  color: #06456c;
  box-shadow: 0 6px 14px rgba(11,127,184,.20);
  border-color: rgba(11,127,184,.35);
}
.svc-badge--warm:hover {
  background:#ffeae5;
  color:#7a1a00;
  box-shadow: 0 6px 14px rgba(226,81,58,.20);
  border-color: rgba(226,81,58,.45);
}

/* Keyboard focus → mimic hover (accessibility) */
.svc-badge:focus-visible {
  outline: none;
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 0 0 3px rgba(11,127,184,.25),
              0 6px 14px rgba(11,127,184,.20);
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  .svc-num, .svc-badge {
    transition: none !important;
  }
}

  
  /* =============================
     3) CONSULTING (sticky title + timeline)
     ============================= */
  /* Base (unchanged look) */
.svc-consult{
  padding: clamp(56px,8vw,110px) 0;
  background:
    radial-gradient(800px 300px at 15% 10%, rgba(11,127,184,.06), transparent 60%),
    radial-gradient(700px 280px at 95% 80%, rgba(226,81,58,.06), transparent 60%),
    #fff;
}
.svc-consultWrap{
  display:grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(22px,4vw,46px);
}
.svc-sticky{ position: sticky; top: 18px; align-self:start }
.svc-sticky h2{
  color:var(--svc-ink); font-size: clamp(24px,3.2vw,40px); line-height:1.15; margin:.2rem 0 .4rem 0;
}
.svc-sticky p{ color:var(--svc-muted); max-width:42ch }
.svc-quote {
  margin-top:18px;
  padding:14px 16px;
  border-left:6px solid var(--svc-accent);
  background:#fff6f4;
  color:#5a2300;
  border-radius: 8px 10px 10px 8px;
  font-size:.98rem;
  line-height:1.6;
  transition: all .28s ease;
}

/* Hover / focus effect */
.svc-quote:hover,
.svc-quote:focus-within {
  background:#ffece8;                          /* slightly richer bg */
  transform: translateY(-3px);                 /* gentle lift */
  box-shadow: 0 6px 18px rgba(226,81,58,.25);  /* warm glow */
  border-left-color:#d9442e;                   /* deeper accent bar */
}


/* Timeline */
.svc-line{ position:relative; padding-left: 28px; margin-top: 6px }
.svc-line::before{
  content:""; position:absolute; left:10px; top:0; bottom:0; width:2px;
  background: linear-gradient(180deg,#e6eef5,#c6d8e7);
  border-radius:2px;
  transition: background-position .6s ease, box-shadow .3s ease;
  background-size: 100% 200%;
  background-position: 0% 0%;
}
.svc-step{
  position:relative; padding: 18px 0 22px 0;
  opacity: 0; transform: translateY(14px);
  animation: svc-consult-in .6s ease forwards;
}
.svc-step:nth-child(1){ animation-delay:.06s }
.svc-step:nth-child(2){ animation-delay:.12s }
.svc-step:nth-child(3){ animation-delay:.18s }
.svc-step:nth-child(4){ animation-delay:.24s }

.svc-step::before{
  content:""; position:absolute; left:-28px; top:10px; width:14px; height:14px; border-radius:50%;
  background:#fff; border:3px solid var(--svc-accent-2);
  box-shadow:0 0 0 5px rgba(11,127,184,.08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.svc-step h3{
  margin: 0 0 6px 0; color:var(--svc-ink); font-size: clamp(18px,2.1vw,22px);
  display:inline-block; position:relative; transition: color .2s ease;
}
.svc-step h3::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
  background: linear-gradient(90deg, var(--svc-accent-2), var(--svc-accent));
  border-radius:2px; transition: width .28s ease;
}
.svc-step p{ margin:0; color:var(--svc-body); line-height:1.7; max-width:60ch; transition: color .2s ease }

/* Hover/Focus effects */
.svc-step:hover h3,
.svc-step:focus-visible h3{ color: var(--svc-ink) }
.svc-step:hover h3::after,
.svc-step:focus-visible h3::after{ width:72% }

.svc-step:hover p,
.svc-step:focus-visible p{ color: var(--svc-muted) }

.svc-step:hover::before,
.svc-step:focus-visible::before{
  transform: scale(1.15);
  border-color: var(--svc-accent);
  box-shadow:
    0 0 0 6px rgba(226,81,58,.10),
    0 4px 16px rgba(226,81,58,.25);
}

/* Make the vertical line “breathe” where you hover */
.svc-step:hover ~ .svc-step::before{} /* keeps CSS valid, no effect */
.svc-step:hover ~ .svc-step{}          /* keeps CSS valid, no effect */
.svc-step:hover,
.svc-step:focus-visible{
  /* nudge the background gradient to imply progress */
}
.svc-line:hover::before{
  background: linear-gradient(180deg,#cfdceb 0%, #bcd0e0 40%, #e6eef5 70%, #c6d8e7 100%);
  background-size: 100% 200%;
  background-position: 0% 100%;
  box-shadow: 0 0 0 2px rgba(11,127,184,.06) inset;
}

/* Subtle row highlight on hover/focus */
.svc-step:hover,
.svc-step:focus-visible{
  background:
    linear-gradient(90deg, rgba(11,127,184,.06), transparent 65%);
  border-radius: 8px;
  padding-left: 14px;               /* tiny nudge inward */
}

/* Sticky panel micro polish */
/* Stronger callouts styling */
.svc-callouts{
  margin-top: 18px;
  border:1px solid rgba(11,127,184,.35);
  border-radius: 14px;
  padding: 16px 18px;
  background:#eaf5ff;                           /* soft but visible blue */
  box-shadow: 0 4px 14px rgba(11,127,184,.12);
  font-size: .95rem;
  line-height: 1.6;
  color:#0b3554;                                /* force readable text */
}

.svc-callouts b{ 
  color:#062a44;                                /* even darker for labels */
  font-weight:600;
}

/* Hover/focus effect */
.svc-callouts:hover{
  background:#d9efff;
  border-color: rgba(11,127,184,.55);
  box-shadow: 0 8px 22px rgba(11,127,184,.18);
  transition: all .25s ease;
}


/* Reveal animation */
@keyframes svc-consult-in{
  to { opacity:1; transform: translateY(0) }
}

/* Keyboard accessibility */
.svc-step{ outline:none }
.svc-step:focus-visible{
  box-shadow: 0 0 0 3px rgba(11,127,184,.25);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .svc-step{ animation:none !important; opacity:1 !important; transform:none !important }
  .svc-line::before{ transition:none !important }
}

@media (max-width: 980px){
  .svc-consultWrap{ grid-template-columns:1fr }
  .svc-sticky{ position:static }
}

/* 4 */
/* ===== Service Tracks ===== */
.svc-tracks {
  padding: 70px 20px;
  background: linear-gradient(180deg,#fafcff,#f4f9fd);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, sans-serif;
  color: #0b1520;
}

.svc-container {
  max-width: 1200px;
  margin: 0 auto;
}

.svc-tracks-head {
  text-align: center;
  margin-bottom: 40px;
}
.svc-tracks-head h2 {
  font-size: 2rem;
  margin: 0 0 10px;
  font-weight: 700;
}
.svc-tracks-head p {
  color: #4b5a6b;
  font-size: 1rem;
  margin: 0;
}

/* List Layout */
.svc-tracklist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 768px) {
  .svc-tracklist {
    grid-template-columns: 1fr;
  }
}

/* Each Track */
.svc-track {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  text-decoration: none;
  background: #fff;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid #d6e3ee;
  box-shadow: 0 6px 16px rgba(11,127,184,.08);
  transition: transform .25s ease, box-shadow .25s ease, border .25s ease;
}
.svc-track:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(11,127,184,.12);
  border-color: #0b7fb8;
}

/* Number */
.svc-track-num {
  font-size: 1.4rem;
  font-weight: 800;
  color: #0b7fb8;
  flex-shrink: 0;
}

/* Body */
.svc-track-body strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 6px;
  color: #0b1520;
}
.svc-track-body em {
  font-style: normal;
  color: #4b5a6b;
  font-size: .95rem;
  line-height: 1.5;
}

/* CTA arrow */
.svc-track-cta {
  margin-left: auto;
  font-weight: 700;
  color: #0b7fb8;
  transition: transform .25s ease;
}
.svc-track:hover .svc-track-cta {
  transform: translateX(4px);
}



/* Services Cards in Service page */

/* ===== Service Tracks (Stepped Nav) ===== */
/* ===== New Hero Design for Strategy & Roadmap ===== */
.sr-hero-alt{
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(20px,5vw,60px);
  padding: clamp(32px,6vw,80px);
  background: linear-gradient(135deg,#0b1320 0%,#0f1d33 100%);
  color: #eaf4ff;
  overflow: hidden;
}

/* Left column */
.sr-hero-alt__content{
  z-index: 2;
  max-width: 680px;
}
.sr-hero-tag{
  display:inline-flex; gap:.5rem; align-items:center;
  padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  font-size:.9rem; color:#9ab8d6; margin-bottom:16px;
}
.sr-hero-dot{ width:.55rem; height:.55rem; border-radius:50%; background:#71e1ff }

.sr-hero-alt h1{
  font-size: clamp(34px,5vw,64px);
  line-height:1.1;
  margin:0 0 14px;
}
.sr-hero-alt h1 .grad{
  background: linear-gradient(90deg,#71e1ff,#8ef5c3);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.sr-hero-alt p{
  font-size: clamp(16px,1.6vw,20px);
  color:#bcd0e2;
  margin: 0 0 22px;
  line-height:1.6;
}
.sr-hero-cta{ display:flex; gap:14px; flex-wrap:wrap }

/* Right visual */
.sr-hero-alt__visual{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 50vh;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.sr-hero-alt__visual img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.02);
  transition: transform .6s ease;
}
.sr-hero-alt__visual:hover img{ transform: scale(1.06); }

/* Floating gradient orbs */
.sr-orb{
  position: absolute;
  border-radius:50%;
  filter: blur(60px);
  z-index:1;
  animation: floaty 16s ease-in-out infinite;
}
.sr-orb1{ width:280px; height:280px; background:#71e1ff44; top:-80px; left:-80px; }
.sr-orb2{ width:220px; height:220px; background:#8ef5c355; bottom:10%; right:-60px; animation-delay:4s; }
.sr-orb3{ width:180px; height:180px; background:#9aa7ff44; top:40%; left:50%; animation-delay:8s; }

@keyframes floaty{
  0%{ transform: translateY(0) }
  50%{ transform: translateY(-25px) }
  100%{ transform: translateY(0) }
}

/* CTA Buttons (reuse your btn style if you want consistency) */
.sr-btn{
  display:inline-flex; padding:12px 18px; border-radius:14px; font-weight:600;
  text-decoration:none; cursor:pointer; transition: transform .2s, box-shadow .2s;
}
.sr-btn--primary{ background: linear-gradient(180deg,#71e1ff,#3fb7f5); color:#082434 }
.sr-btn{ background: rgba(255,255,255,.08); color:#eaf4ff; border:1px solid rgba(255,255,255,.15) }
.sr-btn:hover{ transform:translateY(-2px); box-shadow:0 12px 34px rgba(0,0,0,.35) }

/* Responsive */
@media (max-width: 980px){
  .sr-hero-alt{ grid-template-columns: 1fr; padding: clamp(24px,5vw,60px) }
  .sr-hero-alt__visual{ min-height:40vh }
}

/* ============ Sections in DA ============ */
.sr-section{ background: var(--sr-bg); color:var(--sr-fg); }
.sr-section--panel{ background: linear-gradient(180deg, #0b1320 0%, #0e1a2e 100%) }
.sr-section--dark{ background: #0a1526 }
.sr-section--cards{ background: linear-gradient(180deg, #0a1424, #0f1d33) }

.sr-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(36px,6vw,84px) clamp(18px,5vw,40px);
}

/* Discovery layout */
.sr-fig{ 
  margin:0; 
  display:grid; 
  gap:10px; 
  position: relative;
}

.sr-fig img{
  width:100%; 
  height:100%; 
  max-height: 520px; 
  object-fit:cover;
  border-radius: 18px; /* more rounded corners */
  border:1px solid var(--sr-ring);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
  transition: transform .5s ease, box-shadow .5s ease, filter .5s ease;
}

/* Hover effects */
.sr-fig img:hover{
  transform: scale(1.05) rotate(-1deg);  /* subtle zoom + tilt */
  box-shadow: 0 28px 80px rgba(0,0,0,.65), 0 0 0 4px rgba(113,225,255,.15);
  filter: brightness(1.08) saturate(1.05); /* brighter & richer */
  border-radius: 22px; /* animate radius slightly */
}

/* Figcaption subtle styling */
.sr-fig figcaption{ 
  color:var(--sr-muted); 
  font-size:.9rem; 
  margin-top:6px;
  transition: color .3s ease;
}
.sr-fig:hover figcaption{
  color:#71e1ff; /* accent color on hover */
}


/* Timeline in DA 2 */
/* Timeline wrapper */
.sr-timeline-alt {
  position: relative;
  display: grid;
  gap: 40px;
  margin-top: 40px;
  padding-left: 30px;
  border-left: 3px solid rgba(255,255,255,.15);
}

/* Connector line */
.sr-timeline-alt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 11px;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--sr-accent2), #24caa0);
  border-radius: 2px;
}

/* Phase block */
.sr-phase {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  position: relative;
}

/* Circle badge */
.sr-circle {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sr-accent2), #24caa0);
  color: #0b1320;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 18px rgba(113,225,255,.4);
}

/* Phase content */
.sr-phase-content {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid var(--sr-ring);
  border-radius: 14px;
  padding: 18px 22px;
  box-shadow: 0 12px 35px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .25s ease;
}
.sr-phase-content:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
  border-color: rgba(113,225,255,.25);
}

.sr-phase-content h3 {
  margin: 0 0 8px;
  font-size: 1.4rem;
  color: #fff;
}

.sr-phase-content p {
  margin: 0 0 12px;
  color: var(--sr-muted);
  line-height: 1.65;
}

.sr-chipset {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sr-chipset li {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: .85rem;
  color: #082434;
  background: linear-gradient(135deg, #a4f1d3, #78e7c0);
  font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
  .sr-timeline-alt {
    padding-left: 15px;
    gap: 28px;
  }
  .sr-phase {
    flex-direction: column;
    gap: 12px;
  }
  .sr-phase-content {
    padding: 16px;
  }
}


/* Cards in DA 3 */
.sr-cardgrid{
  display:grid; gap: clamp(14px,2vw,18px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 18px;
}
.sr-card{
  padding: 20px 18px;
  border-radius: 16px;
  border:1px solid var(--sr-ring);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
.sr-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 60px rgba(0,0,0,.45); border-color: rgba(142,245,195,.25) }
.sr-list--compact{ padding-left: 1rem }
.sr-list--compact li{ color:var(--sr-muted) }

/* Responsive hero */
@media (max-width: 980px){
  .sr-hero{ grid-template-columns: 1fr; }
  .sr-hero__visual{ min-height: 38vh }
}


/* Data & analytics */


  :root{
    --da-bg: #0b1320;
    --da-bg-2: #0e1729;
    --da-card: #111b2f;
    --da-ink: #e8f0ff;
    --da-ink-dim: #a9b6d4;
    --da-accent: #6ee7ff;
    --da-accent-2: #3aa8ef;
    --da-ring: rgba(110,231,255,.35);
    --da-border: rgba(255,255,255,.08);
    --da-green: #7ef7c8;
    --da-yellow: #ffe38a;
    --da-pink: #ffb4e6;
    --da-radius: 16px;
    --da-shadow: 0 10px 40px rgba(0,0,0,.35);
  }
  .da{background:linear-gradient(180deg,var(--da-bg),var(--da-bg-2)); color:var(--da-ink); font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
  .da a{color:var(--da-accent-2); text-decoration:none}
  .da-wrap{max-width:1120px; margin:0 auto; padding:clamp(20px,4vw,40px)}
  .da h1,.da h2,.da h3,.da h4{line-height:1.15; letter-spacing:.2px}
  .da p{color:var(--da-ink); opacity:.92}

  /* HERO */
  .da-hero{position:relative; overflow:hidden; padding: clamp(32px,6vw,72px) 0}
  .da-hero .da-wrap{display:grid; grid-template-columns: 1.15fr .85fr; gap:40px; align-items:center}
  .da-hero__copy h1{font-size: clamp(28px,4vw,46px); margin:0 0 10px}
  .da-hero__sub{font-size: clamp(16px,2.1vw,18px); color:var(--da-ink-dim); margin: 6px 0 18px}
  .da-cta{display:flex; gap:12px; flex-wrap:wrap}
  .da-btn{display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:12px; border:1px solid var(--da-border); background:transparent; color:var(--da-ink); transition:.2s box-shadow,.2s transform,.2s background}
  .da-btn:hover{box-shadow:0 8px 22px rgba(0,0,0,.35); transform: translateY(-1px)}
  .da-btn--primary{background:linear-gradient(180deg,var(--da-accent),var(--da-accent-2)); color:#071018; border-color:transparent}
  .da-btn--ghost:hover{background:rgba(255,255,255,.04)}
  .da-hero__badges{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 8px; padding:0; list-style:none}
  .da-hero__badges li{border:1px solid var(--da-border); border-radius:999px; padding:6px 10px; color:var(--da-ink-dim); background:rgba(255,255,255,.03)}
  .da-hero__stats{display:flex; gap:18px; margin-top:16px; flex-wrap:wrap}
  .da-stat{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:1px solid var(--da-border); border-radius:14px; padding:12px 14px; min-width:170px; box-shadow: var(--da-shadow)}
  .da-stat__num{font-weight:800; font-size:24px}
  .da-stat__lbl{display:block; color:var(--da-ink-dim); font-size:13px}

  .da-hero__art{position:relative; min-height:320px}
  .da-grid{position:absolute; inset:12% 8% 12% 8%; border-radius:18px;
    background:
      radial-gradient(120px 60px at 80% 10%, rgba(110,231,255,.35), transparent),
      radial-gradient(120px 60px at 20% 90%, rgba(255,180,230,.25), transparent),
      linear-gradient(0deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid var(--da-border); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), var(--da-shadow)
  }
  .da-orb{position:absolute; width:120px; height:120px; border-radius:999px; filter: blur(18px); opacity:.8}
  .da-orb--a{background: var(--da-accent); top:10%; left:5%}
  .da-orb--b{background: var(--da-pink); bottom:8%; right:8%}

  /* Section shared */
  .da-sec{padding: clamp(28px,5vw,64px) 0}
  .da-sec__hdr{max-width:860px; margin-bottom:24px}
  .da-sec__hdr h2{font-size: clamp(22px,3vw,34px); margin:0 0 8px}
  .da-sec__hdr p{color:var(--da-ink-dim)}

  /* Capabilities grid */
  /* ============================
   LIGHT CARD LOOK
============================= */
.da-capabilities--lite{
  background: #ffffff;
  color:#151515;
}
.da-capabilities--lite .da-sec__hdr p{color:#5c5c5c}

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

.da-card{
  background: var(--card-surface, #f4f2ef);
  border: 1px solid #ece9e6;
  border-radius: 24px;
  padding: 28px 28px 20px;
  transition: background .4s ease, box-shadow .3s ease, transform .25s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
  position: relative;
  overflow: hidden;
  color:#151515;
}

/* Hover: only background changes */
.da-card:hover{
  background: var(--hover-gradient,
    linear-gradient(135deg, #2f66ff 0%, #63a9ff 45%, #f09ac2 100%));
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

/* Media (icon area) */
.da-card__media{
  height: 160px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 12px;
}
.da-card__media svg{ width:72%; height:auto; }

/* Text styles remain the same */
.da-card h3{
  font-size: 22px;
  margin: 6px 0 6px;
  font-weight: 700;
}
.da-card__lead{ color:#333 !important;  margin:0 0 10px; font-size:15px; }
.da-list{ margin:0 0 12px 18px; color:#2b2b2b; }
.da-list li{ margin:6px 0 }
.da-link{ display:inline-block; margin-top:6px; color:#0b67ff; text-decoration:none; }
.da-more{
  background:#fff; border:1px solid #e6e3df; color:#222;
  border-radius:10px; padding:8px 12px; cursor:pointer;
  transition: background .2s ease, border-color .2s ease;
}
.da-more:hover{ background:#f7f7f7; border-color:#dedad6 }
.da-more__panel{
  margin-top:10px; padding:12px; border:1px dashed #e2dfdb;
  border-radius:12px; background:#faf9f8; color:#3a3a3a;
}

/* Responsive */
@media (max-width: 980px){
  .da-cardgrid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .da-cardgrid{ grid-template-columns: 1fr; }
}


  /* Delivery / timeline */
  /* ============================
   HOW WE DELIVER (New Design)
   Namespace: dlv-*
============================= */
:root{
  --dlv-ink:#0f172a;
  --dlv-ink-dim:#475569;
  --dlv-bg:#ffffff;
  --dlv-accent:#3b82f6;
  --dlv-accent-2:#8b5cf6;
  --dlv-line:#e5e7eb;
  --dlv-card:#f8fafc;
  --dlv-card-border:#e2e8f0;
  --dlv-radius:18px;
}

.dlv{ background:var(--dlv-bg); color:var(--dlv-ink); font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; }
.dlv-wrap{ max-width:1100px; margin:0 auto; padding: clamp(24px,4vw,48px); }

.dlv-head h2{ font-size: clamp(24px,3.2vw,36px); margin:0 0 6px; }
.dlv-head p{ color:var(--dlv-ink-dim); margin:0 0 18px; }

/* Timeline layout */
.dlv-timeline{
  position:relative;
  list-style:none;
  margin: 18px 0 26px;
  padding: 8px 0 8px;
  display:grid;
  gap:22px;
}
.dlv-timeline::before{
  content:"";
  position:absolute; left:28px; top:0; bottom:0;
  width:2px; background:linear-gradient(180deg, var(--dlv-line), #f1f5f9);
}

/* Each step */
.dlv-step{
  display:grid;
  grid-template-columns: 56px 1fr;
  align-items:start;
  position:relative;
  gap:16px;
}

/* Number badge */
.dlv-badge{
  height:56px; width:56px; border-radius:50%;
  display:grid; place-items:center;
  font-weight:700; color:#fff;
  background: linear-gradient(135deg, var(--dlv-accent), var(--dlv-accent-2));
  box-shadow: 0 6px 18px rgba(59,130,246,.25);
  position:relative; z-index:1;
}

/* Card */
.dlv-card{
  background: var(--dlv-card);
  border:1px solid var(--dlv-card-border);
  border-radius: var(--dlv-radius);
  padding:16px 18px;
  transition: box-shadow .25s ease, transform .25s ease, background .25s ease, border-color .25s ease;
}
.dlv-card h4{ margin:0 0 6px; font-size:18px; }
.dlv-card p{ margin:0; color:var(--dlv-ink-dim); line-height:1.55; }

/* Hover effect – card only (content unchanged) */
.dlv-step:hover .dlv-card{
  background: #ffffff;
  border-color:#dbe4f0;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(2,8,23,.08);
}

/* KPI chips */
.dlv-kpis{
  display:flex; flex-wrap:wrap; gap:12px; margin: 22px 0 10px;
}
.dlv-kpi{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-radius: 999px;
  border:1px solid var(--dlv-card-border);
  background: radial-gradient(90% 120% at 10% 10%, #f1f5ff 0%, transparent 60%), #fff;
}
.dlv-kpi__num{ font-weight:800; font-size:16px; }
.dlv-kpi__lbl{ color:var(--dlv-ink-dim); font-size:13px; }

/* CTAs */
.dlv-cta{ display:flex; gap:12px; margin-top: 16px; flex-wrap:wrap; }
.dlv-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px; border-radius:12px; border:1px solid #dbe4f0;
  text-decoration:none; color:var(--dlv-ink); transition:.2s transform,.2s box-shadow,.2s background;
}
.dlv-btn--primary{
  color:#fff; border-color:transparent;
  background: linear-gradient(135deg, var(--dlv-accent), var(--dlv-accent-2));
}
.dlv-btn:hover{ transform: translateY(-1px); box-shadow:0 8px 18px rgba(2,8,23,.08); }
.dlv-btn--ghost{ background:#fff; }
.dlv-btn--ghost:hover{ background:#f8fafc; }

/* Responsive */
@media (max-width: 800px){
  .dlv-timeline::before{ left:20px; }
  .dlv-step{ grid-template-columns: 44px 1fr; }
  .dlv-badge{ width:44px; height:44px; font-size:14px; }
}
@media (max-width: 520px){
  .dlv-wrap{ padding: 20px; }
  .dlv-kpi{ padding:9px 12px; }
}


/* Services Cloud */

/* ======================================
   Cloud & Modernization 
   Namespace: cm2-*
====================================== */
:root{
  --cm2-ink:#0f172a;
  --cm2-ink-dim:#475569;
  --cm2-bg:#ffffff;
  --cm2-accent:#2563eb;     /* primary blue */
  --cm2-accent-2:#8b5cf6;   /* violet blend */
  --cm2-soft:#f1f5f9;       /* soft surface */
  --cm2-line:#e5e7eb;
  --cm2-radius:20px;
}

.cm2{font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; color:var(--cm2-ink); background:#fff;}
.cm2 a{text-decoration:none}

/* Wrap */
.cm2-wrap{max-width:1120px; margin:0 auto; padding:clamp(22px,4vw,42px)}

/* ========== HERO (classy) ========== */
.cm2-hero{
  background:
    radial-gradient(1000px 500px at 10% 0%, #eef2ff 0%, transparent 50%),
    radial-gradient(800px 400px at 90% 20%, #fce7f3 0%, transparent 50%),
    linear-gradient(180deg, #ffffff, #f8fafc);
  border-bottom: 1px solid var(--cm2-line);
}
.cm2-hero__grid{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:40px; align-items:center;
}
.cm2-hero__copy h1{
  font-size: clamp(32px,4.4vw,58px);
  letter-spacing:.2px; margin:0 0 8px;
}
.cm2-hero__sub{
  color:var(--cm2-ink-dim); font-size: clamp(16px,2vw,18px);
  margin: 6px 0 18px;
}
.cm2-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px}
.cm2-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px; border-radius:12px; border:1px solid var(--cm2-line);
  transition:.2s transform,.2s box-shadow,.2s background,.2s color;
  color:var(--cm2-ink);
}
.cm2-btn--primary{
  background: linear-gradient(135deg, var(--cm2-accent), var(--cm2-accent-2)); color:#fff; border-color:transparent;
}
.cm2-btn:hover{ transform: translateY(-1px); box-shadow:0 10px 22px rgba(2,8,23,.08) }
.cm2-btn--ghost:hover{ background:#f8fafc }

.cm2-badges{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 0; padding:0; list-style:none}
.cm2-badges li{
  border:1px solid var(--cm2-line); border-radius:999px; padding:6px 10px; color:var(--cm2-ink-dim); background:#fff;
}

/* Hero art */
/* ============================
   HERO (Alt Design) — cm3-*
============================= */
:root{
  --cm3-ink:#0b1220;
  --cm3-ink-dim:#445064;
  --cm3-bg:#ffffff;
  --cm3-line:#e6e9f0;
  --cm3-soft:#f6f8fc;
  --cm3-accent:#2563eb;    /* blue */
  --cm3-accent-2:#8b5cf6;  /* violet */
  --cm3-radius:20px;
}

.cm3-hero{
  position:relative;
  color:var(--cm3-ink);
  background:
    /* diagonal glow */
    conic-gradient(from 210deg at 110% -10%, #f7e8ff 0deg, transparent 90deg),
    conic-gradient(from 40deg at -10% 110%, #e6f0ff 0deg, transparent 110deg),
    linear-gradient(180deg, #ffffff, #f8fbff);
  border-bottom:1px solid var(--cm3-line);
  overflow:clip;
}

.cm3-wrap{ max-width:1120px; margin:0 auto; padding:clamp(24px,4vw,48px) }

/* Subtle grid pattern layer */
.cm3-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(10,20,40,.05), rgba(10,20,40,.05) 1px, transparent 1px, transparent 28px),
    repeating-linear-gradient(90deg, rgba(10,20,40,.05), rgba(10,20,40,.05) 1px, transparent 1px, transparent 28px);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0.05) 60%, transparent);
  pointer-events:none;
}

/* Main grid */
.cm3-hero__grid{
  position:relative;
  display:grid; grid-template-columns: 1.1fr .9fr; gap:40px; align-items:center;
}

/* LEFT side */
.cm3-hero__copy h1{
  font-size: clamp(34px,4.6vw,60px);
  margin:0 0 10px; letter-spacing:.2px;
}
.cm3-hero__sub{
  color:var(--cm3-ink-dim);
  font-size: clamp(16px,2vw,18px);
  margin: 6px 0 18px; max-width: 720px;
}

.cm3-cta{ display:flex; gap:12px; flex-wrap:wrap; margin:10px 0 12px }
.cm3-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px; border-radius:12px; border:1px solid var(--cm3-line);
  color:var(--cm3-ink); text-decoration:none;
  transition:.2s transform,.2s box-shadow,.2s background,.2s color,.2s border-color;
}
.cm3-btn--primary{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg, var(--cm3-accent), var(--cm3-accent-2));
  box-shadow: 0 12px 24px rgba(37,99,235,.25);
}
.cm3-btn--ghost{ background:#fff }
.cm3-btn:hover{ transform: translateY(-1px); box-shadow:0 10px 24px rgba(2,8,23,.08) }

.cm3-chips{
  display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 0; padding:0; list-style:none;
}
.cm3-chips li{
  padding:6px 10px; border-radius:999px; background:#fff;
  border:1px solid var(--cm3-line); color:var(--cm3-ink-dim);
  transition:.2s background,.2s transform,.2s box-shadow;
}
.cm3-chips li:hover{ background:var(--cm3-soft); transform: translateY(-1px) }

/* RIGHT side card */
.cm3-feature{
  background:#fff;
  border:1px solid var(--cm3-line);
  border-radius: var(--cm3-radius);
  padding:18px 18px 14px;
  box-shadow: 0 16px 40px rgba(2,8,23,.08);
  position:relative;
  overflow:hidden;
}
.cm3-feature::after{
  content:"";
  position:absolute; inset:-1px -1px auto -1px; height:140px;
  background: radial-gradient(60% 60% at 85% -20%, rgba(139,92,246,.20), transparent 60%),
              radial-gradient(70% 70% at -10% 110%, rgba(37,99,235,.15), transparent 60%);
  pointer-events:none;
}
.cm3-feature h3{ margin:0 0 8px; font-size:18px }
.cm3-list{ margin:8px 0 12px 18px; color:var(--cm3-ink) }
.cm3-list li{ margin:6px 0; position:relative; }
.cm3-dot{
  width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:8px;
  background: linear-gradient(135deg, var(--cm3-accent), var(--cm3-accent-2));
  vertical-align: middle;
}
.cm3-mini{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  padding-top:8px; border-top:1px dashed var(--cm3-line);
}
.cm3-mini div{
  background:linear-gradient(180deg,#ffffff,#f8fbff);
  border:1px solid var(--cm3-line); border-radius:12px; padding:10px 12px;
}
.cm3-mini strong{ display:block; font-size:16px }
.cm3-mini span{ color:var(--cm3-ink-dim); font-size:12px }

/* Floating ribbon */
.cm3-ribbon{
  position:relative; margin-top: 6px; margin-bottom: 40px;
}
.cm3-ribbon__grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:12px;
  background:#fff; border:1px solid var(--cm3-line);
  border-radius: 16px; padding: 10px 12px;
  box-shadow: 0 18px 28px rgba(2,8,23,.08);
}
.cm3-rb{ display:flex; align-items:center; gap:8px }
.cm3-rb__num{ font-weight:800; font-size:16px }
.cm3-rb__lbl{ color:var(--cm3-ink-dim); font-size:13px }

/* Responsive */
@media (max-width: 980px){
  .cm3-hero__grid{ grid-template-columns: 1fr; gap:22px }
}
@media (max-width: 720px){
  .cm3-ribbon__grid{ grid-template-columns: 1fr 1fr }
}
@media (max-width: 480px){
  .cm3-ribbon__grid{ grid-template-columns: 1fr }
}


/* ========== SECTION GENERIC ========== */
.cm2-sec{padding: clamp(28px,5vw,64px) 0}
.cm2-sec__hdr h2{font-size: clamp(22px,3.2vw,34px); margin:0 0 8px}

/* ========== SECTION 1: Paragraph-only ========== */
.cm2-sec--para{background:#fff}
.cm2-para{max-width:900px}
.cm2-para p{color:var(--cm2-ink); line-height:1.7; font-size:17px; margin:0 0 14px}

/* ========== SECTION 2: Split ========== */
.cm2-split__grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:30px; align-items:center}
.cm2-split__copy p{color:var(--cm2-ink-dim)}
.cm2-list{margin:12px 0 0 18px; color:var(--cm2-ink)}
.cm2-list li{margin:6px 0}
.cm2-split__media{
  margin:0; padding:0;
  border-radius: 20px; overflow:hidden;
  border:1px solid var(--cm2-line); background:#fff;
  box-shadow: 0 18px 40px rgba(2,8,23,.08);
}
.cm2-split__media img{display:block; width:100%; height:100%; object-fit:cover; transform: scale(1.02); transition: transform .5s ease}
.cm2-split__media:hover img{transform: scale(1.06)}

/* ========== SECTION 3: Cards with background images ========== */
.cm2-cards{background: linear-gradient(180deg, #ffffff, #f8fafc)}
.cm2-cardgrid{display:grid; grid-template-columns: repeat(3, 1fr); gap:16px}
.cm2-card{
  position:relative; display:block; min-height:260px; border-radius:22px; overflow:hidden;
  border:1px solid var(--cm2-line); background:#fff;
  box-shadow: 0 10px 28px rgba(2,8,23,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.cm2-card::before{
  /* background image layer */
  content:""; position:absolute; inset:0;
  background-image: var(--bg);
  background-size: cover; background-position:center;
  transform: scale(1.02); transition: transform .45s ease;
}
.cm2-card__overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(2,8,23,.05), rgba(2,8,23,.55) 70%),
    radial-gradient(80% 80% at 10% 10%, rgba(147,197,253,.25), transparent 50%);
  transition: background .35s ease, opacity .35s ease;
}
.cm2-card__content{
  position:absolute; left:16px; right:16px; bottom:14px;
  color:#fff; text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.cm2-card__content h3{margin:0 0 4px; font-size:20px}
.cm2-card__content p{margin:0; font-size:14px; opacity:.95}

/* Hover interactions */
.cm2-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 38px rgba(2,8,23,.12) }
.cm2-card:hover::before{ transform: scale(1.08) }
.cm2-card:hover .cm2-card__overlay{
  background:
    linear-gradient(180deg, rgba(2,8,23,.02), rgba(2,8,23,.65) 75%),
    radial-gradient(90% 80% at 15% 10%, rgba(139,92,246,.35), transparent 55%);
}

/* ========== Responsive ========== */
@media (max-width: 980px){
  .cm2-hero__grid{grid-template-columns:1fr}
  .cm2-split__grid{grid-template-columns:1fr; gap:18px}
  .cm2-cardgrid{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .cm2-cardgrid{grid-template-columns:1fr}
}


/* Process Optimization */
/* ======================================
   Process Optimization — Styles (po-*)
====================================== */
:root{
  --po-ink:#0b1320;
  --po-ink-dim:#415063;
  --po-bg:#ffffff;
  --po-soft:#f6f6f9;
  --po-line:#e6e8ee;
  --po-accent:#0ea5e9;     /* cyan-blue */
  --po-accent-2:#7c3aed;   /* violet */
  --po-good:#10b981;       /* green */
  --po-bad:#ef4444;        /* red */
  --po-radius:18px;
}

/* Base */
.po{font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif; color:var(--po-ink); background:var(--po-bg)}
.po a{text-decoration:none}
.po-wrap{max-width:1120px; margin:0 auto; padding:clamp(22px,4vw,42px)}

/* ========= HERO ========= */
/* ============================
   HERO (Model B) — Styles
   Namespace: poImg-*
============================= */
:root{
  --poImg-ink:#0b1220;
  --poImg-dim:#475569;
  --poImg-accent:#14b8a6;     /* teal */
  --poImg-accent-2:#8b5cf6;   /* violet */
  --poImg-line:rgba(255,255,255,.18);
  --poImg-radius:20px;
}

.poImg-hero{
  position:relative;
  height: 90vh;           /* change to 100dvh for true fullscreen */
  min-height:560px;
  color:#fff;
  overflow:clip;
  isolation:isolate;
  --bg: url('https://images.unsplash.com/photo-1506784983877-45594efa4cbe?auto=format&fit=crop&w=2000&q=80');
}

/* angled accent stripe */
.poImg-accent{
  position:absolute; inset:-10% -20% auto auto; height:70%;
  width:42%; transform:skewX(-18deg); transform-origin: right top;
  background: linear-gradient(135deg, var(--poImg-accent), var(--poImg-accent-2));
  filter: blur(18px); opacity:.35; pointer-events:none; z-index:0;
}

/* photo + gradient overlay */
.poImg-backdrop{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(3,7,18,.55) 0%, rgba(3,7,18,.55) 35%, rgba(3,7,18,.68) 100%),
    radial-gradient(120% 90% at 10% 20%, rgba(20,184,166,.25), transparent 60%),
    var(--bg) center/cover no-repeat;
}

/* layout */
.poImg-wrap{ max-width:1200px; margin:0 auto; padding: clamp(24px,4.5vw,48px); height:100%; display:flex; align-items:center }
.poImg-panel{
  max-width: 720px;
  background: rgba(255,255,255,.08);
  border:1px solid var(--poImg-line);
  border-radius: var(--poImg-radius);
  backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: 0 30px 80px rgba(2,8,23,.35);
  padding: clamp(18px,3vw,28px);
}

/* text */
.poImg-kicker{
  display:inline-block; letter-spacing:.18em; text-transform:uppercase;
  font-size:12px; color:#e5eefb; opacity:.85;
  border:1px solid var(--poImg-line); border-radius:999px; padding:6px 10px; margin-bottom:10px;
  background: rgba(255,255,255,.06);
}
.poImg-panel h1{
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px,4.8vw,58px);
  line-height:1.08; margin:0 0 10px;
  text-wrap: balance;
}
.poImg-sub{
  color:#e7eef9; opacity:.92; margin:6px 0 16px; font-size: clamp(16px,2vw,18px);
}

/* ctas & chips */
.poImg-cta{ display:flex; gap:12px; flex-wrap:wrap; margin: 6px 0 10px }
.poImg-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px; border-radius:12px; border:1px solid var(--poImg-line);
  text-decoration:none; transition:.2s transform,.2s box-shadow,.2s background,.2s color,.2s border-color;
}
.poImg-btn--primary{
  color:#06111a; background:#fff; border-color:transparent;
}
.poImg-btn--ghost{
  color:#fff; background:transparent;
}
.poImg-btn:hover{ transform: translateY(-1px); box-shadow:0 12px 26px rgba(2,8,23,.24) }

.poImg-chips{ display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 0; padding:0; list-style:none }
.poImg-chips li{
  padding:6px 10px; border-radius:999px; background: rgba(255,255,255,.10);
  border:1px solid var(--poImg-line); color:#eaf3ff;
  transition:.2s background,.2s transform;
}
.poImg-chips li:hover{ background: rgba(255,255,255,.18); transform: translateY(-1px) }

/* hover polish: panel subtle glow on hero hover */
.poImg-hero:hover .poImg-panel{ box-shadow: 0 40px 90px rgba(2,8,23,.45) }

/* responsive */
@media (max-width: 980px){
  .poImg-hero{ height:auto; min-height: 520px }
  .poImg-panel{ max-width: 100% }
}


/* ========= Sections (shared) ========= */
.po-sec{padding: clamp(28px,5vw,64px) 0}
.po-sec h2{font-size: clamp(22px,3vw,34px); margin:0 0 10px}
.po-sec__hdr p{color:var(--po-ink-dim)}

.po-split{display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; align-items:start}
.po-split__copy p{color:var(--po-ink-dim)}
.po-list{margin:10px 0 0 18px}
.po-list li{margin:6px 0}
.po-more summary{cursor:pointer; color:var(--po-ink-dim)}
.po-more p{margin:8px 0 0}

/* ========= Section 1: Maturity heatmap ========= */
/* ============================
   SECTION 1 — Styles (poS1-*)
============================= */
:root{
  --poS1-ink:#0b1320;
  --poS1-dim:#4a5568;
  --poS1-bg:#ffffff;
  --poS1-soft:#f7f9fc;
  --poS1-line:#e5e9f2;
  --poS1-accent:#0ea5e9;    /* cyan */
  --poS1-accent2:#7c3aed;   /* violet */
  --poS1-radius:18px;
}

.poS1{ background: linear-gradient(180deg,#fff,#fbfcff); color:var(--poS1-ink); }
.poS1-wrap{ max-width:1120px; margin:0 auto; padding:clamp(24px,4vw,48px) }
.poS1-head h2{ font-size: clamp(24px,3.2vw,36px); margin:0 0 6px }
.poS1-intro{ color:var(--poS1-dim); max-width:860px; margin:0 0 16px }

/* Tabs */
.poS1-tabs{ background:#fff; border:1px solid var(--poS1-line); border-radius:20px; padding:12px; box-shadow:0 10px 28px rgba(2,8,23,.06) }
.poS1-tabs input{ position:absolute; left:-9999px }
.poS1-tabs label{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px; margin:4px 6px 10px 0;
  border:1px solid var(--poS1-line); background:#fff; color:var(--poS1-dim);
  cursor:pointer; user-select:none; transition:.2s background,.2s color,.2s box-shadow,.2s transform;
}
.poS1-tabs label:hover{ background:#f5f8ff; transform: translateY(-1px) }

/* Active pill styles */
#poS1-assess:checked ~ label[for="poS1-assess"],
#poS1-redesign:checked ~ label[for="poS1-redesign"],
#poS1-roadmap:checked ~ label[for="poS1-roadmap"]{
  background: linear-gradient(135deg,var(--poS1-accent),var(--poS1-accent2));
  color:#fff; border-color:transparent; box-shadow: 0 10px 20px rgba(14,165,233,.20);
}

/* Panels */
.poS1-panels{ position:relative }
.poS1-panel{
  display:none; margin-top:8px; padding:16px; border:1px solid var(--poS1-line);
  border-radius:16px; background: linear-gradient(180deg,#fff,#f9fbff);
}
#poS1-assess:checked ~ .poS1-panels .poS1-panel[data-panel="assess"],
#poS1-redesign:checked ~ .poS1-panels .poS1-panel[data-panel="redesign"],
#poS1-roadmap:checked ~ .poS1-panels .poS1-panel[data-panel="roadmap"]{
  display:grid;
}

.poS1-panel{ grid-template-columns: 1.15fr .85fr; gap:18px; align-items:start }
.poS1-col--copy h3{ margin:0 0 8px; font-size:20px }
.poS1-col--copy p{ color:var(--poS1-dim); margin:0 0 10px; line-height:1.7 }
.poS1-list{ margin:10px 0 0 18px; color:var(--poS1-ink) }
.poS1-list li{ margin:6px 0 }

/* Artifacts */
.poS1-col--artifacts h4{ margin:2px 0 8px; font-size:14px; color:var(--poS1-dim); letter-spacing:.02em; text-transform:uppercase }
.poS1-cards{ display:grid; grid-template-columns:1fr; gap:10px }
.poS1-card{
  position:relative; padding:12px 12px 10px 36px;
  border:1px solid var(--poS1-line); border-radius:14px; background:#fff;
  transition:.25s transform,.25s box-shadow,.25s border-color;
}
.poS1-card:hover{ transform: translateY(-2px); border-color:#d7deec; box-shadow:0 12px 24px rgba(2,8,23,.08) }
.poS1-card strong{ display:block; margin-bottom:4px }
.poS1-card p{ margin:0; color:var(--poS1-dim) }
.poS1-dot{
  position:absolute; left:12px; top:14px; width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg,var(--poS1-accent),var(--poS1-accent2));
  box-shadow: 0 6px 16px rgba(14,165,233,.25);
}

/* Tracks strip */
.poS1-tracks{
  margin-top:16px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap:12px;
}
.poS1-track{
  background:
    radial-gradient(100% 120% at 10% 0%, rgba(14,165,233,.10), transparent 60%),
    radial-gradient(90% 100% at 100% 100%, rgba(124,58,237,.10), transparent 60%),
    linear-gradient(180deg,#ffffff,#f6f8fc);
  border:1px solid var(--poS1-line); border-radius:16px; padding:14px 14px 12px;
  transition:.25s transform,.25s box-shadow,.25s border-color;
}
.poS1-track h5{ margin:0 0 6px; font-size:15px }
.poS1-track p{ margin:0; color:var(--poS1-dim) }
.poS1-track:hover{ transform: translateY(-3px); border-color:#d7deec; box-shadow:0 14px 28px rgba(2,8,23,.10) }

/* Responsive */
@media (max-width: 980px){
  .poS1-panel{ grid-template-columns:1fr; }
  .poS1-tracks{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){
  .poS1-tracks{ grid-template-columns:1fr; }
}


/* ========= Section 2: Pattern cards ========= */
/* ======================================
   Services Section — Styles (svcX-*)
====================================== */
:root{
  --svcX-ink:#0c1320;
  --svcX-dim:#475569;
  --svcX-bg:#ffffff;
  --svcX-soft:#f7f9fc;
  --svcX-line:#e6e9f2;
  --svcX-accent:#2563eb;    /* blue */
  --svcX-accent2:#8b5cf6;   /* violet */
  --svcX-radius:20px;
}

.svcX{ background:linear-gradient(180deg,#fff,#fbfdff); color:var(--svcX-ink); font-family:system-ui,-apple-system,Inter,Roboto,Segoe UI,Arial,sans-serif; }
.svcX-wrap{ max-width:1160px; margin:0 auto; padding:clamp(24px,4vw,48px) }
.svcX-head h2{ font-size:clamp(24px,3.2vw,36px); margin:0 0 8px }
.svcX-lead{ color:var(--svcX-dim); max-width:860px; margin:0 0 16px }

/* Stack layout */
.svcX-stack{ display:grid; gap:14px }
.svcX-row{
  position:relative; overflow:hidden;
  border:1px solid var(--svcX-line); border-radius: var(--svcX-radius);
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(37,99,235,.06), transparent 60%),
    radial-gradient(140% 140% at 100% 100%, rgba(139,92,246,.06), transparent 60%),
    linear-gradient(180deg,#fff,#f8fbff);
  transition: background .35s ease, box-shadow .25s ease, transform .22s ease, border-color .25s ease;
}
.svcX-row:hover{
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(140% 140% at 100% 100%, rgba(139,92,246,.10), transparent 60%),
    linear-gradient(180deg,#ffffff,#f4f8ff);
  box-shadow:0 16px 36px rgba(2,8,23,.10);
  transform: translateY(-2px);
  border-color:#d9e2f2;
}

/* Angled ribbon (unique look) */
.svcX-ribbon{
  position:absolute; left:-6%; top:-2%; bottom:-2%; width:14%;
  background: linear-gradient(180deg,var(--svcX-accent),var(--svcX-accent2));
  transform: skewX(-18deg);
  filter: blur(0.5px);
  opacity:.85;
}
.svcX-row--apps  .svcX-ribbon{ background:linear-gradient(180deg,#0ea5e9,#6366f1) }
.svcX-row--data  .svcX-ribbon{ background:linear-gradient(180deg,#06b6d4,#22c55e) }
.svcX-row--devsecops .svcX-ribbon{ background:linear-gradient(180deg,#f59e0b,#ef4444) }
.svcX-row--security  .svcX-ribbon{ background:linear-gradient(180deg,#9333ea,#14b8a6) }
.svcX-row--managed   .svcX-ribbon{ background:linear-gradient(180deg,#64748b,#0ea5e9) }

/* Content */
.svcX-main{ padding:18px 18px 16px 18px; margin-left:min(8vw,120px) }
.svcX-main h3{ margin:4px 0 6px; font-size:20px }
.svcX-sub{ color:var(--svcX-dim); margin:0 0 10px; line-height:1.6 }
.svcX-bullets{ margin:0 0 10px 18px; color:var(--svcX-ink) }
.svcX-bullets li{ margin:6px 0 }

/* Details (keeps layout clean) */
.svcX-more summary{
  cursor:pointer; list-style:none; color:#1f2a44; font-weight:700;
}
.svcX-more summary::-webkit-details-marker{ display:none }
.svcX-more p{ margin:8px 0 0; color:var(--svcX-dim) }

/* Tool chips */
.svcX-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }
.svcX-chips span{
  font-size:12px; padding:6px 10px; border-radius:999px;
  border:1px solid var(--svcX-line); background:#fff; color:var(--svcX-dim);
  transition:.2s transform,.2s border-color,.2s box-shadow;
}
.svcX-row:hover .svcX-chips span{ border-color:#cfd7e6; box-shadow:0 6px 16px rgba(2,8,23,.06) }

/* CTA */
.svcX-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px }
.svcX-btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:12px;
  border:1px solid var(--svcX-line); color:var(--svcX-ink); text-decoration:none;
  transition:.2s transform,.2s box-shadow,.2s background,.2s color,.2s border-color;
}
.svcX-btn--primary{
  background:linear-gradient(135deg,var(--svcX-accent),var(--svcX-accent2)); color:#fff; border-color:transparent
}
.svcX-btn--ghost{ background:#fff }
.svcX-btn:hover{ transform: translateY(-1px); box-shadow:0 12px 24px rgba(2,8,23,.08) }

/* Responsive */
@media (max-width: 980px){
  .svcX-main{ margin-left: calc(48px + 2vw) }
  .svcX-ribbon{ width:18% }
}
@media (max-width: 560px){
  .svcX-main{ margin-left: 18px }
  .svcX-ribbon{ display:none } /* keep it clean on small screens */
}


/* ========= Section 3: Outcomes board ========= */
/* ======================================
   Operate, Measure & Improve — Styles
   Namespace: omiX-*
====================================== */
:root{
  --omiX-ink:#0b1320;
  --omiX-dim:#445064;
  --omiX-bg:#ffffff;
  --omiX-soft:#f7f9fc;
  --omiX-line:#e6e9f2;
  --omiX-accent:#0ea5e9;     /* cyan */
  --omiX-accent2:#7c3aed;    /* violet */
  --omiX-radius:22px;
}

.omiX{ background:linear-gradient(180deg,#fff,#fbfdff); color:var(--omiX-ink); font-family:system-ui,-apple-system,Inter,Roboto,Segoe UI,Arial,sans-serif; }
.omiX-wrap{ max-width:1160px; margin:0 auto; padding:clamp(24px,4vw,48px) }

.omiX-head h2{ font-size:clamp(24px,3.2vw,36px); margin:0 0 6px }
.omiX-lead{ color:var(--omiX-dim); max-width:860px; margin:0 0 16px }

/* Grid */
.omiX-grid{
  display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; align-items:center;
}

/* Copy */
.omiX-copy h3{ margin:0 0 8px; font-size:20px }
.omiX-copy p{ color:var(--omiX-dim); margin:0 0 10px; line-height:1.7 }
.omiX-list{ margin:8px 0 10px 18px }
.omiX-list li{ margin:6px 0 }
.omiX-pills{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px }
.omiX-pills span{
  font-size:12px; padding:6px 10px; border-radius:999px; background:#fff; color:var(--omiX-dim);
  border:1px solid var(--omiX-line);
}

/* Image mosaic */
.omiX-media{
  position:relative; min-height:360px;
  border-radius: var(--omiX-radius); overflow:hidden; padding:10px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(14,165,233,.10), transparent 60%),
    radial-gradient(120% 120% at 100% 100%, rgba(124,58,237,.10), transparent 60%),
    linear-gradient(180deg,#ffffff,#f6f9ff);
  border:1px solid var(--omiX-line);
  box-shadow: 0 16px 36px rgba(2,8,23,.08);
  display:grid; grid-template-areas:
    "A B"
    "A C";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 54% 46%;
  gap:10px;
}

.omiX-photo{ position:relative; border-radius:16px; overflow:hidden; isolation:isolate }
.omiX-photo::before{
  content:""; position:absolute; inset:0;
  background: var(--img) center/cover no-repeat;
  transform: scale(1.02); transition: transform .45s ease;
}
.omiX-photo::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(2,8,23,.02), rgba(2,8,23,.35));
}
.omiX-photo--a{ grid-area:A }
.omiX-photo--b{ grid-area:B }
.omiX-photo--c{ grid-area:C }

.omiX-media:hover .omiX-photo::before{ transform: scale(1.07) }

/* KPI chips floating on image */
.omiX-kpis{
  position:absolute; right:12px; top:12px; display:flex; flex-direction:column; gap:8px;
}
.omiX-kpi{
  backdrop-filter: blur(6px) saturate(1.2);
  background: rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.6);
  border-radius:12px; padding:8px 10px; min-width:150px;
  box-shadow: 0 10px 22px rgba(2,8,23,.12);
}
.omiX-kpi strong{ display:block; font-size:14px }
.omiX-kpi span{ display:block; color:#2e3c52; font-size:12px }

/* Bottom rail (distinct strip) */
.omiX-rail{
  margin:12px 0 4px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap:12px;
}
.omiX-rail__item{
  border:1px solid var(--omiX-line); border-radius:16px; padding:12px;
  background:
    radial-gradient(100% 120% at 10% 0%, rgba(14,165,233,.10), transparent 60%),
    radial-gradient(100% 120% at 100% 100%, rgba(124,58,237,.10), transparent 60%),
    #fff;
  transition:.25s transform,.25s box-shadow,.25s border-color;
}
.omiX-rail__item h4{ margin:0 0 6px; font-size:15px }
.omiX-rail__item p{ margin:0; color:var(--omiX-dim) }
.omiX-rail__item:hover{ transform: translateY(-3px); border-color:#d7deec; box-shadow:0 14px 28px rgba(2,8,23,.10) }

/* CTA */
.omiX-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:12px }
.omiX-btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:12px;
  border:1px solid var(--omiX-line); color:var(--omiX-ink); text-decoration:none;
  transition:.2s transform,.2s box-shadow,.2s background,.2s color,.2s border-color;
}
.omiX-btn--primary{
  background:linear-gradient(135deg,var(--omiX-accent),var(--omiX-accent2)); color:#fff; border-color:transparent
}
.omiX-btn--ghost{ background:#fff }
.omiX-btn:hover{ transform: translateY(-1px); box-shadow:0 12px 24px rgba(2,8,23,.08) }

/* Responsive */
@media (max-width: 980px){
  .omiX-grid{ grid-template-columns:1fr; }
  .omiX-media{ min-height:320px }
}
@media (max-width: 560px){
  .omiX-kpis{ right:8px; top:8px }
  .omiX-kpi{ min-width:unset }
}


/* ======= Responsive ======= */
@media (max-width: 980px){
  .po-hero__grid{grid-template-columns:1fr}
  .po-split{grid-template-columns:1fr; gap:18px}
  .po-cardgrid{grid-template-columns:1fr 1fr}
  .po-tiles{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .po-cardgrid{grid-template-columns:1fr}
}


/* Industries Page */
/* ============================
   Industries HERO — Styles (indImg-*)
============================= */
:root{
  --indImg-ink:#0b1220;
  --indImg-dim:#e7eef9;
  --indImg-accent:#0ea5e9;    /* teal-cyan */
  --indImg-accent-2:#7c3aed;  /* violet */
  --indImg-line:rgba(255,255,255,.18);
  --indImg-radius:20px;
}

.indImg-hero{
  position:relative;
  height: 90vh;       /* use 100dvh for true fullscreen */
  min-height:560px;
  color:#fff;
  overflow:clip;
  isolation:isolate;
  /* default image (change via inline --bg) */
  --bg: url('https://images.unsplash.com/photo-1496307042754-b4aa456c4a2d?auto=format&fit=crop&w=2000&q=80');
}

/* angled accent glow */
.indImg-accent{
  position:absolute; inset:-12% -22% auto auto; height:72%;
  width:44%; transform:skewX(-18deg); transform-origin:right top;
  background: linear-gradient(135deg, var(--indImg-accent), var(--indImg-accent-2));
  filter: blur(18px); opacity:.35; pointer-events:none; z-index:0;
}

/* photo + gradient overlay */
.indImg-backdrop{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(3,7,18,.45) 0%, rgba(3,7,18,.55) 60%, rgba(3,7,18,.72) 100%),
    radial-gradient(120% 90% at 12% 18%, rgba(20,184,166,.25), transparent 60%),
    var(--bg) center/cover no-repeat;
}

/* layout */
.indImg-wrap{ max-width:1200px; margin:0 auto; padding: clamp(24px,4.5vw,48px); height:100%; display:flex; align-items:center }
.indImg-panel{
  max-width: 780px;
  background: rgba(255,255,255,.08);
  border:1px solid var(--indImg-line);
  border-radius: var(--indImg-radius);
  backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: 0 30px 80px rgba(2,8,23,.35);
  padding: clamp(18px,3vw,28px);
}

/* text */
.indImg-kicker{
  display:inline-block; letter-spacing:.18em; text-transform:uppercase;
  font-size:12px; color:#eaf3ff; opacity:.9;
  border:1px solid var(--indImg-line); border-radius:999px; padding:6px 10px; margin-bottom:10px;
  background: rgba(255,255,255,.06);
}
.indImg-panel h1{
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px,4.8vw,56px);
  line-height:1.08; margin:0 0 10px;
  text-wrap: balance;
}
.indImg-sub{
  color:var(--indImg-dim); opacity:.92; margin:6px 0 16px; font-size: clamp(16px,2vw,18px);
}

/* ctas & chips */
.indImg-cta{ display:flex; gap:12px; flex-wrap:wrap; margin: 6px 0 10px }
.indImg-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px; border-radius:12px; border:1px solid var(--indImg-line);
  text-decoration:none; transition:.2s transform,.2s box-shadow,.2s background,.2s color,.2s border-color;
}
.indImg-btn--primary{ color:#06111a; background:#fff; border-color:transparent }
.indImg-btn--ghost{ color:#fff; background:transparent }
.indImg-btn:hover{ transform: translateY(-1px); box-shadow:0 12px 26px rgba(2,8,23,.24) }

.indImg-chips{ display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 0; padding:0; list-style:none }
.indImg-chips li{
  padding:6px 10px; border-radius:999px; background: rgba(255,255,255,.10);
  border:1px solid var(--indImg-line); color:#ecf3ff;
  transition:.2s background,.2s transform;
}
.indImg-chips li:hover{ background: rgba(255,255,255,.18); transform: translateY(-1px) }

/* responsive */
@media (max-width: 980px){
  .indImg-hero{ height:auto; min-height: 520px }
  .indImg-panel{ max-width: 100% }
}


/* ======================================
   Co-Managed Support — Styles (supportText-*)
====================================== */
:root{
  --supportText-ink:#202631;
  --supportText-dim:#4b5563;
  --supportText-max: 1100px;
}

.supportText{
  background:#fff; color:var(--supportText-ink);
  padding: clamp(32px, 8vw, 96px) 16px;
}

.supportText-wrap{
  max-width: var(--supportText-max);
  margin: 0 auto;
  text-align: center;
}

.supportText h2{
  font-weight: 700;
  letter-spacing:.2px;
  font-size: clamp(32px, 6vw, 64px);
  line-height: 1.05;
  margin: 0 0 12px;
}

.supportText-kicker{
  max-width: 800px;
  margin: 0 auto clamp(28px, 6vw, 80px);
  color: var(--supportText-dim);
  font-size: clamp(16px, 2.2vw, 18px);
  line-height: 1.7;
}

.supportText-body{
  max-width: 1000px;
  margin: 0 auto;
}

.supportText-body p{
  margin: 0 0 clamp(22px, 4vw, 40px);
  color: var(--supportText-ink);
  font-size: clamp(16px, 2.2vw, 18px);
  line-height: 1.9;
}

/* Responsive polish */
@media (max-width: 640px){
  .supportText{ padding-left: 14px; padding-right: 14px; }
}


/*  */

/* ====== Section shell ====== */
.ind-slab{
  --bg: #0b1320;         /* page background if needed */
  --panel: #081729;      /* left tile background */
  --ink: #0d1220;        /* dark text on light bg (not used here) */
  --fg: #0c1222;         /* main body text (not used here) */
  --muted:#56627a;       /* muted */
  --accent:#2f78ff;      /* blue word */
  --mint:#68e7d6;        /* cyan pins */
  --route:#7ed6ff;       /* dotted route */

  background:#fff;       /* section bg like screenshot */
  color:#0c1526;
}
.ind-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(32px,6vw,72px) clamp(18px,5vw,48px);
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: clamp(18px,4vw,48px);
  align-items: center;
}

/* ====== Left visual section 2 in Industires page ====== */
.ind-visual{
  margin:0;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.18));
}
.ind-visual svg{ width:100%; height:auto; display:block }
.tile{ fill:#062149 } /* deep navy tile */
.route{
  fill:none;
  stroke: var(--route);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 2 14;
  opacity:.9;
}
.pin-outer{ fill:#39bdee }
.pin-inner{ fill:#062149 }

/* subtle hover wiggle */
.ind-visual:hover .route{ animation: dash 10s linear infinite }
@keyframes dash{
  to{ stroke-dashoffset:-320 }
}

/* ====== Copy ====== */
.ind-copy h2{
  font-size: clamp(28px, 4.8vw, 54px);
  line-height: 1.05;
  margin: 0 0 10px;
  letter-spacing:.2px;
}
.ind-copy .accent{
  color: var(--accent);
}
.ind-copy .lede{
  font-size: clamp(16px, 1.7vw, 20px);
  color:#3b4760;
  margin: 6px 0 14px;
}
.ind-copy p{ color:#3b4760; line-height:1.75 }

.ind-points{
  margin: 12px 0 0;
  padding-left: 1.1rem;
  color:#30405a;
}
.ind-points li{ margin:.4rem 0 }

/* CTAs */
.ind-cta{ margin-top: 16px; display:flex; gap:12px; flex-wrap:wrap }
.btn{
  --ring: rgba(47,120,255,.25);
  display:inline-block; border:1px solid rgba(12,18,38,.12);
  padding:12px 16px; border-radius:12px; text-decoration:none;
  font-weight:700; letter-spacing:.2px; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{
  color:#062149; background: linear-gradient(180deg,#69f1d8,#44d7c0);
  border-color: transparent;
}
.btn-ghost{
  color:#0b2a55; background: rgba(11,42,85,.06);
  border-color: rgba(11,42,85,.15);
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.14), 0 0 0 4px var(--ring) }

/* ====== Responsive ====== */
@media (max-width: 980px){
  .ind-wrap{ grid-template-columns: 1fr; }
  .ind-visual{ max-width: 520px }
}

/* 3 in industires page */

/* ===== Industries steps (How-It-Works style) ===== */
:root{
  --step-bg: #ffffff;
  --step-ink: #1a1630;
  --step-muted:#544c75;
  --step-accent:#6b008f;      /* purple like in your reference */
  --step-ring: rgba(107,0,143,.18);
  --step-shadow: 0 14px 40px rgba(0,0,0,.10);
  --step-shadow-hover: 0 18px 60px rgba(0,0,0,.16);
}

.industries-steps{
  background: var(--step-bg);
  color: var(--step-ink);
}
.ind-steps-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(36px,6vw,72px) clamp(18px,5vw,48px);
}
.ind-steps-head{
  text-align:center;
  margin-bottom: clamp(18px,2.8vw,28px);
}
.ind-steps-head h2{
  font-size: clamp(28px,4.8vw,56px);
  margin: 0 0 6px;
}
.ind-steps-head p{
  color: var(--step-muted);
  font-size: clamp(16px,1.6vw,20px);
}

/* Grid: 3 per row on desktop */
.ind-steps-grid{
  display: grid;
  gap: clamp(14px,2vw,22px);
  grid-template-columns: repeat(3, 1fr);
}

/* Card / step */
.ind-step{
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  justify-items: center;
  text-align: center;
  padding: clamp(16px,2vw,22px);
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  box-shadow: var(--step-shadow);
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease;
}
.ind-step:hover,
.ind-step:focus-visible{
  transform: translateY(-6px);
  box-shadow: var(--step-shadow-hover), 0 0 0 6px var(--step-ring);
  border-color: rgba(0,0,0,.10);
  outline: none;
}

/* Icon block (purple square with white glyph) */
.ind-step-icon{
  width: 112px; height: 112px; border-radius: 24px;
  display: grid; place-items: center;
  background: var(--step-accent);
  color: #fff;
  box-shadow: 0 10px 24px rgba(107,0,143,.25);
  margin-top: clamp(6px,1vw,10px);
}
.ind-step-icon svg{ width: 56px; height: 56px; }

/* Number under icon */
.ind-step-num{
  font-weight: 800;
  font-size: clamp(22px,2.8vw,34px);
  color: var(--step-accent);
  margin: 10px 0 4px;
}

/* Title and text */
.ind-step-title{
  font-size: clamp(18px,2.2vw,22px);
  margin: 4px 0 6px;
}
.ind-step-text{
  color: var(--step-muted);
  font-size: clamp(14px,1.5vw,18px);
  line-height: 1.7;
}

/* Responsive: 2 per row on tablets, 1 per row on phones */
@media (max-width: 1024px){
  .ind-steps-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .ind-steps-grid{ grid-template-columns: 1fr; }
}




/* Financial page */


    /* ===================== NAMESPACE ROOT ===================== */
    #fs-finance {
      --fs-ink:#0b132b;
      --fs-ink-2:#1c2541;
      --fs-brand:#0b7fb8;
      --fs-brand-2:#73c0f5;
      --fs-mint:#10b981;
      --fs-bg:#f6f9fc;
      --fs-card:#ffffff;
      --fs-accent:#ffd166;
      --fs-danger:#ef4444;
      --fs-shadow:0 10px 30px rgba(11,127,184,.15);
      --fs-radius:18px;

      font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
      color:var(--fs-ink);
      background:var(--fs-bg);
    }
    #fs-finance *{ box-sizing:border-box }
    #fs-finance a{ color:inherit; text-decoration:none }
    #fs-finance img{ max-width:100%; display:block }
    #fs-finance .fs-container{ max-width:1200px; margin:0 auto }

    /* ===================== SECTION 1: HERO ===================== */
    #fs-finance .fs-hero{
      position:relative; overflow:hidden;
      padding: clamp(48px, 8vw, 96px) 24px;
      background:
        radial-gradient(1200px 600px at 85% -10%, rgba(115,192,245,.35), transparent 60%),
        linear-gradient(145deg, #f9fbff 0%, #eef7ff 45%, #f9fbff 100%);
      border-bottom: 1px solid rgba(11,127,184,.15);
    }
    #fs-finance .fs-hero-wrap{
      display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center;
    }
    @media(max-width:960px){ #fs-finance .fs-hero-wrap{ grid-template-columns:1fr } }

    #fs-finance .fs-kicker{
      display:inline-grid; grid-auto-flow:column; gap:10px; align-items:center;
      font-weight:700; letter-spacing:.08em; text-transform:uppercase;
      font-size:12px; color:var(--fs-brand); background:#e6f4ff; border:1px solid rgba(11,127,184,.25);
      padding:8px 12px; border-radius:999px; width:max-content; box-shadow:var(--fs-shadow)
    }
    #fs-finance .fs-hero-title{
      font-family:"Plus Jakarta Sans",Inter,sans-serif;
      font-size: clamp(28px, 5vw, 56px);
      line-height:1.05; margin:16px 0 14px; letter-spacing:-.02em;
    }
    #fs-finance .fs-sub{
      font-size: clamp(15px, 2.2vw, 18px);
      color:#334155; max-width:52ch; margin-bottom:22px;
    }

    #fs-finance .fs-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; }
    #fs-finance .fs-btn{
      padding:12px 18px; border-radius:12px; border:1px solid transparent; font-weight:700; transition:.25s ease;
      display:inline-flex; align-items:center; gap:10px; cursor:pointer
    }
    #fs-finance .fs-btn-primary{ background:linear-gradient(180deg, var(--fs-brand), #0a6c9d); color:#fff; box-shadow:var(--fs-shadow) }
    #fs-finance .fs-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(11,127,184,.28)}
    #fs-finance .fs-btn-ghost{ background:#ffffff; border-color:rgba(11,127,184,.25); color:var(--fs-brand) }
    #fs-finance .fs-btn-ghost:hover{ background:#f6fbff }

    #fs-finance .fs-chip-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px }
    #fs-finance .fs-chip{
      background:#fff; border:1px dashed rgba(11,127,184,.35); color:#0b3650;
      padding:8px 12px; border-radius:999px; font-size:12px; box-shadow:0 2px 10px rgba(0,0,0,.04)
    }

    #fs-finance .fs-hero-media{ position:relative; isolation:isolate; }
    #fs-finance .fs-hero-card{
      background:var(--fs-card); border-radius:22px; padding:18px; box-shadow:var(--fs-shadow);
      transform:rotate(-2.2deg); border:1px solid rgba(11,127,184,.15);
    }
    #fs-finance .fs-hero-figure{
      aspect-ratio: 16/10; overflow:hidden; border-radius:16px; border:1px solid rgba(2,6,23,.06)
    }
    #fs-finance .fs-hero-figure img{ width:100%; height:100%; object-fit:cover; }
    #fs-finance .fs-badge{
      position:absolute; right:-6px; bottom:-10px; background:#fff; border:1px solid rgba(2,6,23,.06);
      padding:10px 14px; border-radius:14px; box-shadow:0 12px 26px rgba(0,0,0,.12);
      display:flex; gap:10px; align-items:center; transform:rotate(3deg)
    }
    #fs-finance .fs-dot{ width:10px; height:10px; border-radius:999px; background:var(--fs-mint); box-shadow:0 0 0 6px rgba(16,185,129,.18) }

    /* ===================== SECTION 2: SOLUTIONS ===================== */
    #fs-finance .fs-solutions{
      padding: clamp(36px, 7vw, 80px) 24px;
      background:
        radial-gradient(700px 500px at 15% 10%, rgba(16,185,129,.07), transparent 60%),
        radial-gradient(700px 500px at 85% 90%, rgba(11,127,184,.08), transparent 60%);
    }
    #fs-finance .fs-section-head{
      display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
      border-bottom:1px dashed rgba(11,127,184,.25); padding-bottom:16px; margin:0 auto 22px;
    }
    #fs-finance .fs-section-title{
      font-family:"Plus Jakarta Sans"; font-size: clamp(22px, 3.4vw, 34px); margin:0
    }
    #fs-finance .fs-section-desc{ color:#475569; margin:0; max-width:70ch }

    #fs-finance .fs-grid{
      margin:24px auto 0;
      display:grid; gap:18px;
      grid-template-columns: repeat(12, 1fr);
    }
    #fs-finance .fs-card{
      background:var(--fs-card); border:1px solid rgba(11,127,184,.14); border-radius:var(--fs-radius);
      padding:18px; box-shadow:var(--fs-shadow); position:relative; overflow:hidden; transition:.25s ease;
      display:flex; flex-direction:column; gap:12px;
    }
    #fs-finance .fs-card:hover{ transform:translateY(-4px) rotate(-.2deg) }
    #fs-finance .fs-eyebrow{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#0369a1; font-weight:800 }
    #fs-finance .fs-card h3{ font-size: clamp(18px, 2.5vw, 22px); margin:6px 0 0; letter-spacing:-.01em }
    #fs-finance .fs-card p{ color:#475569; margin:0 }
    #fs-finance .fs-meta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px }
    #fs-finance .fs-meta span{ font-size:11px; background:#f1f5f9; border:1px solid #e2e8f0; padding:6px 8px; border-radius:999px }
    #fs-finance .fs-card figure{ aspect-ratio: 16/9; border-radius:14px; overflow:hidden; border:1px solid rgba(2,6,23,.06) }
    #fs-finance .fs-card figure img{ width:100%; height:100%; object-fit:cover }
    #fs-finance .fs-more{ margin-top:auto; font-weight:700; color:var(--fs-brand); display:inline-flex; gap:8px; align-items:center }

    /* responsive spans */
    #fs-finance .fs-span-6{ grid-column:span 6 }
    #fs-finance .fs-span-4{ grid-column:span 4 }
    #fs-finance .fs-span-8{ grid-column:span 8 }
    #fs-finance .fs-span-12{ grid-column:span 12 }
    @media(max-width:1100px){
      #fs-finance .fs-span-8{ grid-column:span 12 }
      #fs-finance .fs-span-6{ grid-column:span 12 }
    }
    @media(max-width:720px){
      #fs-finance .fs-span-4,#fs-finance .fs-span-6,#fs-finance .fs-span-8,#fs-finance .fs-span-12{ grid-column:span 12 }
    }

    /* ===================== SECTION 3: OUTCOMES ===================== */
    #fs-finance .fs-outcomes{
      padding: clamp(42px, 8vw, 96px) 24px;
      background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
      border-top:1px solid rgba(11,127,184,.15);
    }
    #fs-finance .fs-out-wrap{ display:grid; grid-template-columns: 1fr 1fr; gap:28px; align-items:start }
    @media(max-width:980px){ #fs-finance .fs-out-wrap{ grid-template-columns:1fr } }
    #fs-finance .fs-pill{
      display:inline-flex; gap:10px; align-items:center; padding:8px 12px; border-radius:999px;
      background:#0b7fb8; color:#fff; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
      box-shadow:var(--fs-shadow);
    }
    #fs-finance .fs-out-title{ font-family:"Plus Jakarta Sans"; font-size: clamp(22px, 3.4vw, 36px); margin:14px 0 10px }
    #fs-finance .fs-statbar{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
    #fs-finance .fs-stat{
      background:#ffffff; border:1px solid rgba(11,127,184,.18); border-radius:16px; padding:16px; box-shadow:var(--fs-shadow);
    }
    #fs-finance .fs-stat b{ font-size:28px; display:block; letter-spacing:-.02em }
    #fs-finance .fs-stat small{ color:#475569 }

    #fs-finance .fs-timeline{ position:relative; margin-top:8px; border-left:3px solid rgba(11,127,184,.25); padding-left:16px; display:grid; gap:14px }
    #fs-finance .fs-t-item{
      background:#ffffff; border:1px solid rgba(2,6,23,.08); border-radius:14px; padding:14px 16px; box-shadow:0 8px 18px rgba(0,0,0,.06);
      position:relative;
    }
    #fs-finance .fs-t-item::before{
      content:""; position:absolute; left:-26px; top:18px; width:14px; height:14px; background:#fff; border:3px solid var(--fs-brand);
      border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,.12)
    }
    #fs-finance .fs-badge-mini{
      display:inline-block; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
      padding:6px 8px; border-radius:999px; background:#ecfeff; border:1px solid #bae6fd; color:#0369a1
    }

    #fs-finance .fs-out-card{
      background:conic-gradient(from 180deg at 80% -10%, #e6f4ff, #ffffff 35%) padding-box,
                 linear-gradient(180deg, rgba(11,127,184,.22), rgba(11,127,184,0)) border-box;
      border:1px solid transparent; border-radius:18px; padding:18px; box-shadow:var(--fs-shadow);
    }
    #fs-finance .fs-out-img{ aspect-ratio: 4/3; border-radius:14px; overflow:hidden; border:1px solid rgba(2,6,23,.06); margin-bottom:12px }
    #fs-finance .fs-note{
      display:flex; gap:10px; align-items:flex-start; background:#fff; border:1px dashed rgba(11,127,184,.3); border-radius:12px; padding:10px 12px; margin-top:10px
    }
    #fs-finance .fs-footer{
      margin:28px auto 0; padding:18px 0 8px; color:#475569; font-size:13px; text-align:center
    }



    /* Health care */

    /* ================= NAMESPACE ROOT ================= */
#hcx-root{
  --hcx-ink:#0f172a;      /* slate-900 */
  --hcx-ink-2:#334155;    /* slate-600 */
  --hcx-bg:#f7fbff;
  --hcx-rail:#0ea5a4;     /* teal-500 */
  --hcx-rail-2:#7c3aed;   /* violet-600 */
  --hcx-card:#ffffff;
  --hcx-shadow:0 14px 36px rgba(15,23,42,.12);
  --hcx-radius:20px;

  font-family:Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--hcx-ink);
  background:var(--hcx-bg);
}

#hcx-root *{ box-sizing:border-box }
#hcx-root img{ display:block; max-width:100% }
#hcx-root a{ color:inherit; text-decoration:none }
#hcx-root .hcx-container{ max-width:1200px; margin:0 auto; }

/* ================= SECTION A — RAIL HERO ================= */
/* ===== IT Consulting Hero (itx-) ===== */
#itx-hero{
  --itx-bg:#070b16;
  --itx-ink:#e5e7eb;
  --itx-ink-2:#cbd5e1;
  --itx-panel:#0e1a33;
  --itx-line:#1b2a4a;
  --itx-teal:#22d3ee;
  --itx-violet:#7c3aed;
  --itx-green:#34d399;
  --itx-amber:#f59e0b;
  --itx-shadow:0 24px 60px rgba(0,0,0,.45);

  position:relative;
  color:var(--itx-ink);
  background:var(--itx-bg);
  overflow:hidden;
  padding: clamp(56px, 8vw, 110px) 0;
}
#itx-hero .itx-wrap{ max-width:1200px; margin:0 auto; padding:0 20px; position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:34px }
@media (max-width:980px){ #itx-hero .itx-wrap{ grid-template-columns:1fr } }

/* Background decor */
#itx-hero .itx-hero-bg{ position:absolute; inset:0; z-index:1 }
#itx-hero .itx-mesh{
  position:absolute; inset:-20% -10% auto -10%; height:120%;
  background:
    radial-gradient(600px 340px at 20% 20%, rgba(124,58,237,.28), transparent 60%),
    radial-gradient(600px 340px at 80% 80%, rgba(34,211,238,.22), transparent 60%);
  filter: blur(20px);
}
#itx-hero .itx-diagonal{
  position:absolute; top:-10%; right:-10%; width:70vw; height:120%;
  transform:skewX(-18deg);
  background:linear-gradient(180deg, rgba(255,255,255,.06), transparent 40%);
  border-left:1px solid rgba(124,58,237,.25);
}
#itx-hero .itx-grid{
  position:absolute; inset:0;
  background-image: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity:.3;
}

/* Left column */
#itx-hero .itx-kicker{
  display:inline-block; padding:8px 12px; border-radius:999px;
  border:1px solid rgba(124,58,237,.45);
  background:rgba(124,58,237,.18);
  font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:12px;
}
#itx-hero .itx-title{ margin:16px 0 8px; font-weight:900; letter-spacing:-.02em; line-height:1.06; font-size: clamp(28px, 4.8vw, 56px) }
#itx-hero .itx-sub{ color:var(--itx-ink-2); max-width:64ch; font-size: clamp(15px, 2.1vw, 18px) }
#itx-hero .itx-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px }
#itx-hero .itx-btn{ padding:12px 18px; border-radius:14px; font-weight:800; border:1px solid transparent; cursor:pointer; transition:.25s ease; text-decoration:none }
#itx-hero .itx-btn.itx-btn-primary{ background:linear-gradient(180deg, var(--itx-teal), #0ea5a4); color:#001018; box-shadow:var(--itx-shadow) }
#itx-hero .itx-btn.itx-btn-primary:hover{ transform:translateY(-2px) }
#itx-hero .itx-btn.itx-btn-quiet{ background:var(--itx-panel); border-color:var(--itx-line); color:#c7d2fe }
#itx-hero .itx-btn.itx-btn-quiet:hover{ background:#0f2246 }
#itx-hero .itx-metrics{ list-style:none; padding:0; margin:18px 0 0; display:flex; gap:10px; flex-wrap:wrap }
#itx-hero .itx-metrics li{ background:#0b142b; border:1px solid var(--itx-line); padding:10px 12px; border-radius:12px; min-width:120px; text-align:center }
#itx-hero .itx-metrics b{ display:block; font-size:22px }
#itx-hero .itx-metrics small{ color:#93c5fd }

/* Right column */
#itx-hero .itx-hero-right{ display:grid; gap:12px; align-content:start }
#itx-hero .itx-console{ border-radius:20px; border:1px solid var(--itx-line); background:linear-gradient(180deg, rgba(255,255,255,.06), transparent); padding:14px; box-shadow:var(--itx-shadow) }
#itx-hero .itx-floats{ display:flex; gap:10px; flex-wrap:wrap }
#itx-hero .itx-chip{
  background:#0b142b; border:1px solid var(--itx-line); padding:10px 12px; border-radius:12px;
  display:flex; flex-direction:column; min-width:160px;
}
#itx-hero .itx-chip b{ color:#e2e8f0 }
#itx-hero .itx-chip span{ color:#93c5fd; font-size:12px }


/* ================= SECTION B — STRANDS (horizontal scroll) ================= */
#hcx-root .hcx-strands{
  padding: clamp(36px, 7vw, 84px) 0;
  background:
    radial-gradient(700px 500px at 15% 20%, rgba(124,58,237,.07), transparent 60%),
    radial-gradient(650px 450px at 85% 80%, rgba(14,165,164,.08), transparent 60%);
}
#hcx-root .hcx-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px; padding:0 24px 16px; margin-bottom:8px;
  border-bottom:1px dashed rgba(124,58,237,.25);
}
#hcx-root .hcx-h2{ font-family:"Plus Jakarta Sans"; font-size: clamp(22px, 3.2vw, 34px); margin:0 }
#hcx-root .hcx-lead{ margin:0; color:var(--hcx-ink-2); max-width:70ch }

#hcx-root .hcx-chip-nav{ display:flex; gap:10px; flex-wrap:wrap }
#hcx-root .hcx-chip{
  font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 12px; border-radius:999px; background:#fff; border:1px solid #e5e7eb; cursor:pointer;
}
#hcx-root .hcx-chip.is-active{ border-color:#c7d2fe; background:#eef2ff; color:#3730a3 }

#hcx-root .hcx-scroll{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(280px, 36%); gap:18px;
  overflow-x:auto; padding:18px 24px 6px; scroll-snap-type:x mandatory;
}
@media (max-width:980px){ #hcx-root .hcx-scroll{ grid-auto-columns:80% } }
#hcx-root .hcx-scroll::-webkit-scrollbar{ height:10px }
#hcx-root .hcx-scroll::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:20px }

#hcx-root .hcx-strand-card{
  scroll-snap-align:start; background:var(--hcx-card); border:1px solid rgba(15,23,42,.10);
  border-radius:22px; padding:18px; box-shadow:var(--hcx-shadow); display:flex; flex-direction:column; gap:10px;
  transition:.25s ease;
  background-image: radial-gradient(600px 200px at 100% 0%, rgba(124,58,237,.08), transparent 50%);
}
#hcx-root .hcx-strand-card:hover{ transform: translateY(-4px) }
#hcx-root .hcx-eyebrow{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#7c3aed }
#hcx-root .hcx-card-top h3{ font-size: clamp(18px, 2.4vw, 22px); margin:6px 0 0; letter-spacing:-.01em }
#hcx-root .hcx-card-top p{ color:var(--hcx-ink-2); margin:0 }
#hcx-root .hcx-card-media{ aspect-ratio:16/9; overflow:hidden; border-radius:14px; border:1px solid rgba(2,6,23,.06) }
#hcx-root .hcx-card-media img{ width:100%; height:100%; object-fit:cover }
#hcx-root .hcx-meta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px }
#hcx-root .hcx-meta span{ font-size:11px; padding:6px 8px; border-radius:999px; background:#eef2ff; color:#3730a3; border:1px solid #e0e7ff }
#hcx-root .hcx-link{ margin-top:auto; font-weight:800; color:#7c3aed; display:inline-flex; gap:8px }

/* ================= SECTION C — BLUEPRINT (zig-zag steps) ================= */
#hcx-root .hcx-blueprint{
  padding: clamp(40px, 8vw, 92px) 24px; background:linear-gradient(180deg, #ffffff 0%, #f6f5ff 100%); border-top:1px solid rgba(124,58,237,.18)
}
#hcx-root .hcx-blue-head{ margin:0 auto 16px; max-width:1200px }
#hcx-root .hcx-stats{
  max-width:1200px; margin:10px auto 16px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
#hcx-root .hcx-stat{ background:#fff; border:1px solid rgba(15,23,42,.12); border-radius:16px; padding:16px; box-shadow:var(--hcx-shadow); text-align:center }
#hcx-root .hcx-stat b{ display:block; font-size:28px; letter-spacing:-.02em }
#hcx-root .hcx-stat small{ color:var(--hcx-ink-2) }

#hcx-root .hcx-steps{
  list-style:none; padding:0; margin:18px auto 0; max-width:1200px; display:grid; gap:22px;
}
#hcx-root .hcx-step{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:center;
}
#hcx-root .hcx-step:nth-child(even){ grid-template-columns: .9fr 1.1fr; }
@media (max-width:980px){
  #hcx-root .hcx-step, #hcx-root .hcx-step:nth-child(even){ grid-template-columns:1fr }
}

#hcx-root .hcx-step-card{
  background:#ffffff; border:1px solid rgba(2,6,23,.08); border-radius:18px; padding:16px; box-shadow:0 12px 26px rgba(0,0,0,.08); position:relative;
}
#hcx-root .hcx-step-tag{
  display:inline-flex; gap:8px; align-items:center; padding:6px 8px; border-radius:10px;
  background:#ecfeff; border:1px solid #bae6fd; color:#0369a1; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em
}
#hcx-root .hcx-step-media{ aspect-ratio: 4/3; overflow:hidden; border-radius:16px; border:1px solid rgba(2,6,23,.06) }
#hcx-root .hcx-step-media img{ width:100%; height:100%; object-fit:cover }



/* Tele communication */

/* ===================== Telco Consulting Theme (telneo-) ===================== */
#telneo-root{
  --ink:#0f172a;          /* dark text */
  --ink-2:#334155;        /* secondary text */
  --panel:#ffffff;        /* cards */
  --bg:#f8fafc;           /* page background */
  --line:#e5e7eb;         /* borders */
  --teal:#0ea5a4;         /* accent 1 */
  --violet:#7c3aed;       /* accent 2 */
  --blue:#38bdf8;         /* accent 3 */
  --shadow:0 18px 40px rgba(2,6,23,.12);
  --radius:16px;

  font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
}
#telneo-root *{ box-sizing:border-box }
#telneo-root img, #telneo-root svg{ display:block; max-width:100% }
#telneo-root a{ color:inherit; text-decoration:none }
#telneo-root .telneo-wrap{ max-width:1200px; margin:0 auto; padding:0 20px }

/* ===================== HERO (photo only) ===================== */
.telneo-hero{ position:relative; min-height:90vh; display:grid; align-items:end; overflow:hidden }
.telneo-hero .telneo-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.65) saturate(1.05) }
.telneo-hero .telneo-hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(2,6,23,.0) 0%, rgba(2,6,23,.45) 50%, rgba(2,6,23,.65) 100%),
              radial-gradient(70% 60% at 20% 20%, rgba(124,58,237,.18), transparent 55%);
}
.telneo-hero-inner{ position:relative; z-index:2; padding: clamp(48px, 7vw, 96px) 0 }
.telneo-hero-copy{ padding-bottom: 170px; max-width: 760px; color:#eef2ff }
.telneo-kicker{
  display:inline-block; padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.35);
  background:rgba(124,58,237,.25); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:12px;
}
.telneo-title{ margin:16px 0 10px; font-weight:900; letter-spacing:-.02em; line-height:1.05; font-size: clamp(28px, 4.8vw, 56px); color:#ffffff }
.telneo-sub{ color:#e2e8f0; font-size: clamp(15px, 2vw, 18px) }
.telneo-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px }
.telneo-btn{ padding:12px 18px; border-radius:14px; font-weight:800; border:1px solid transparent; cursor:pointer; transition:.25s ease }
.telneo-btn-primary{ background:linear-gradient(180deg, var(--teal), #0f766e); color:#001018; box-shadow:var(--shadow) }
.telneo-btn-primary:hover{ transform:translateY(-2px) }
.telneo-btn-quiet{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); color:#e0e7ff }
.telneo-btn-quiet:hover{ background:rgba(255,255,255,.24) }

/* ===================== Services ===================== */
.telneo-services{ padding: clamp(36px, 7vw, 84px) 0; background:#ffffff }
.telneo-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:14px; flex-wrap:wrap }
.telneo-h2{ margin:0; font-weight:900; font-size: clamp(22px, 3.2vw, 34px) }
.telneo-lead{ margin:0; color:var(--ink-2) }

.telneo-cardgrid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:16px; margin-top:16px }
.telneo-card{ grid-column: span 3; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow) }
@media (max-width:1100px){ .telneo-card{ grid-column: span 6 } }
@media (max-width:740px){ .telneo-card{ grid-column: span 12 } }
.telneo-ico{ width:48px; height:48px; border-radius:12px; background:#f0f9ff; display:grid; place-items:center; margin-bottom:8px; border:1px solid var(--line) }
.telneo-card h3{ margin:6px 0 8px; font-size:18px }
.telneo-card p{ margin:0 0 8px; color:var(--ink-2) }
.telneo-bullets{ margin:8px 0 0; padding-left:18px; color:#475569 }

/* ===================== Outcomes ===================== */
/* ===== Journey timeline + principles ===== */
.telneo-journey{ padding: clamp(40px, 8vw, 96px) 0; background:linear-gradient(180deg,#f8fafc,#ffffff) }

.telneo-timeline{
  list-style:none; margin:24px 0; padding:0;
  display:grid; gap:32px; position:relative;
}
.telneo-timeline::before{
  content:""; position:absolute; left:16px; top:0; bottom:0;
  width:3px; background:#e2e8f0;
}
.telneo-timeline li{ display:flex; align-items:flex-start; gap:16px; position:relative }
.telneo-tl-marker{
  width:20px; height:20px; border-radius:50%; background:#7c3aed;
  flex-shrink:0; margin-left:6px; margin-top:2px;
}
.telneo-tl-content{
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  padding:16px; box-shadow:0 6px 18px rgba(0,0,0,.08);
  flex:1;
}
.telneo-tl-content h3{ margin:0 0 6px; font-size:18px }
.telneo-tl-content p{ margin:0; color:#475569 }

.telneo-journey-principles{
  margin-top:40px; display:grid; grid-template-columns: repeat(12,1fr); gap:16px;
}
.telneo-journey-principles article{
  grid-column: span 4; background:#fff; border:1px solid #e5e7eb;
  border-radius:12px; padding:16px; box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.telneo-journey-principles h4{ margin:0 0 6px; font-size:16px; color:#0f172a }
.telneo-journey-principles p{ margin:0; color:#475569 }

@media(max-width:900px){
  .telneo-journey-principles article{ grid-column: span 12 }
}

/* ===================== Engage ===================== */
/* ===================== Engage (enhanced) ===================== */
.telneo-engage{
  padding: clamp(36px, 7vw, 84px) 0;
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(124,58,237,.06), transparent 60%),
    radial-gradient(50% 40% at 85% 10%, rgba(14,165,233,.06), transparent 60%),
    #ffffff;
  border-top:1px solid var(--line);
}

.telneo-steps{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:16px;
  margin-top:12px;
}

/* Card base + gradient border trick */
.telneo-step{
  grid-column: span 4;
  position: relative;
  border:1px solid transparent; /* required for gradient border */
  border-radius: var(--radius);
  padding: 18px 16px 16px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, var(--teal), var(--violet)) border-box;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
  isolation: isolate; /* keeps ::before below content */
  opacity: 0;
  transform: translateY(8px);
  animation: telneo-fadeup .6s ease forwards;
}

/* Stagger entrance */
.telneo-step:nth-child(1){ animation-delay: .05s }
.telneo-step:nth-child(2){ animation-delay: .15s }
.telneo-step:nth-child(3){ animation-delay: .25s }

/* Accent strip on top */
.telneo-step::before{
  content:"";
  position:absolute; left:10px; right:10px; top:10px; height:4px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--teal), var(--violet));
  opacity:.75;
  pointer-events:none;
}

/* Hover / focus lift */
.telneo-step:hover,
.telneo-step:focus-within{
  transform: translateY(-4px);
  box-shadow: 0 26px 64px rgba(2,6,23,.16);
}

/* Tag pill */
.telneo-step-tag{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#0f172a;
  background: linear-gradient(180deg, #f0f9ff, #e6f7fb);
  border:1px solid var(--line);
  box-shadow: 0 1px 0 rgba(2,6,23,.04) inset;
}

/* Head & copy */
.telneo-step h3{
  margin:10px 0 6px;
  font-size:18px;
  line-height:1.2;
  background: linear-gradient(90deg, #0f172a, #334155 60%);
  -webkit-background-clip:text; background-clip:text;
  color: transparent; /* gradient text */
}
.telneo-step p{ margin:0; color:#475569 }

/* Keyboard focus ring for links/buttons inside the card */
.telneo-step :where(a,button):focus-visible{
  outline: 3px solid color-mix(in oklab, var(--teal) 60%, white);
  outline-offset: 3px;
  border-radius: 10px;
}

/* Responsive */
@media (max-width:1100px){ .telneo-step{ grid-column: span 6 } }
@media (max-width:740px){ .telneo-step{ grid-column: span 12 } }

/* Motion-safe */
@media (prefers-reduced-motion: reduce){
  .telneo-step{ animation: none; opacity:1; transform:none }
  .telneo-step:hover, .telneo-step:focus-within{ transform:none }
}

/* Keyframes */
@keyframes telneo-fadeup{
  to{ opacity:1; transform: translateY(0) }
}


/* E-Commerce */

/* ===== namespace: rcx- (no conflicts) ===== */
/* ====== HERO (rxh-) — standalone, no CSS variables ====== */
.rxh-hero{
  position: relative;
  color: #e5f3ff;                    /* was var(--ink) */
  background: #0b1020;               /* was var(--bg) */
  overflow: hidden;
  padding: clamp(56px, 8vw, 120px) 0;
}

.rxh-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 34px;
  align-items: center;
  position: relative;
  z-index: 2;
}
@media (max-width:980px){ .rxh-wrap{ grid-template-columns:1fr } }

/* Background layers */
.rxh-bg{ position:absolute; inset:0; z-index:1 }
.rxh-mesh{
  position:absolute; inset:-20% -10% auto -10%; height:120%;
  background:
    radial-gradient(600px 360px at 20% 20%, rgba(34,211,238,.25), transparent 60%),
    radial-gradient(600px 360px at 80% 60%, rgba(124,58,237,.22), transparent 60%);
  filter: blur(18px);
}
.rxh-dots{
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .5;
}
.rxh-wave{ position:absolute; left:0; right:0; bottom:0; width:100%; height:40% }

/* Copy */
.rxh-eyebrow{
  display:inline-block; padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.3);
  background: rgba(124,58,237,.25);
  font-weight: 800; letter-spacing:.08em; text-transform:uppercase; font-size:12px; color:#e0e7ff;
}
.rxh-title{
  margin:14px 0 8px;
  font-weight: 500;
  letter-spacing:-.02em;
  line-height:1.06;
  font-size: clamp(28px, 4.8vw, 56px);
  color:#ffffff;
}
.rxh-sub{
  color:#c7d2fe;                     /* was var(--ink-2) */
  max-width:60ch;
  font-size: clamp(15px, 2.1vw, 18px);
}
.rxh-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:16px }
.rxh-btn{
  padding:12px 18px; border-radius:14px; font-weight:800;
  border:1px solid transparent; cursor:pointer; transition:.25s ease; text-decoration:none;
}
.rxh-btn-primary{
  background: linear-gradient(180deg, #22d3ee, #0ea5a4);  /* was var(--teal) */
  color:#001018;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);               /* was var(--shadow) */
}
.rxh-btn-primary:hover{ transform: translateY(-2px) }
.rxh-btn-quiet{
  background:#1a2748;                                     /* was var(--quiet) */
  border:1px solid rgba(255,255,255,.18);
  color:#c7d2fe;
}
.rxh-btn-quiet:hover{ background:#132349 }

/* Visual: circular photo with glow ring */
.rxh-visual{ display:grid; place-items:center; justify-items:end }
.rxh-ring{
  width:min(460px, 60vw); aspect-ratio:1/1; border-radius:50%;
  padding:10px;
  background: conic-gradient(from 90deg at 50% 50%, #22d3ee, #7c3aed, #22d3ee); /* teal→violet loop */
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.5));
}
.rxh-ring img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
}
.rxh-badge{
  margin-top:12px;
  background: rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  padding:8px 12px; border-radius:999px; color:#e2e8f0; font-size:12px;
}

/* Motion-safe */
@media (prefers-reduced-motion: no-preference){
  .rxh-ring{ animation: rxh-sheen 6s linear infinite }
  @keyframes rxh-sheen{
    to{ filter: drop-shadow(0 30px 60px rgba(0,0,0,.5)) hue-rotate(360deg) }
  }
}



/* ---------------- INTRO (paragraphs) ---------------- */
/* ===== Intro (Dedicated Support Model) — explicit colors ===== */
.rcx-intro {
  background: #ffffff;              /* clean white background */
  border-top: 1px solid #e5e7eb;    /* light gray divider */
}

.rcx-intro .rcx-wrap {
  padding: clamp(56px, 10vw, 140px) 0;
}

/* Header */
.rcx-intro-head {
  text-align: center;
  max-width: 1100px;
  margin: 0 auto;
}

.rcx-intro-head h2 {
  margin: 0;
  font-weight: 500;
  font-size: clamp(36px, 6.5vw, 40px);
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: #111827;                   /* dark neutral ink */
}

.rcx-intro-sub {
  margin: 14px auto 0;
  max-width: 760px;
  color: #374151;                   /* softer gray for subtitle */
  font-size: clamp(16px, 2.2vw, 18px);
  line-height: 1.6;
}

/* Body paragraphs */
.rcx-intro-body {
  max-width: 1100px;
  margin: clamp(48px, 7vw, 96px) auto 0;
  color: #374151;                   /* body text color */
  font-size: clamp(16px, 2.2vw, 18px);
  line-height: 1.9;
}

.rcx-intro-body p {
  margin: 0 0 clamp(28px, 4vw, 44px);
  text-align: left;
}

/* Responsive */
@media (max-width: 720px) {
  .rcx-intro-head h2 {
    font-size: clamp(32px, 9vw, 48px);
  }
  .rcx-intro-body {
    margin-top: clamp(36px, 9vw, 64px);
  }
}


/* ---------------- OFFERS (cards with icons) ---------------- */
/* ========== Feature Stripes Section (rcf-) — no cards, new look ========== */
/* ============== Retail Process (rxs-) ============== */
.rxs-process{
  background:#f7f7fb;
  border-top:1px solid #eceef3;
  padding: clamp(36px, 7vw, 84px) 0;
}
.rxs-wrap{
  max-width:1200px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(20px,4vw,40px); align-items:start;
}
@media (max-width:980px){ .rxs-wrap{ grid-template-columns:1fr } }

/* Head */
.rxs-head h2{
  margin:0 0 8px; font-weight:800; color:#0f172a;
  font-size: clamp(28px, 6vw, 56px); line-height:1.06; letter-spacing:-.02em;
}
.rxs-head p{ margin:0 0 16px; color:#475569; font-size: clamp(15px,2.1vw,18px) }

/* Steps */
.rxs-steps{ list-style:none; margin:8px 0 0; padding:0; border:1px solid #e5e7eb; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 14px 32px rgba(0,0,0,.06) }
.rxs-step + .rxs-step{ border-top:1px solid #eef0f4 }

/* Toggle row */
.rxs-toggle{
  width:100%; background:transparent; border:0; cursor:pointer; font:inherit; color:#0f172a;
  padding:16px 14px; display:grid; grid-template-columns:28px 1fr 20px; gap:10px; align-items:center; text-align:left;
}
.rxs-toggle:hover{ background:linear-gradient(180deg,#ffffff,#f9fbff) ; border-radius:10px }
.rxs-title{ font-weight:700; font-size: clamp(17px, 2.3vw, 20px) }

/* Colored dots */
.rxs-dot{ width:12px; height:12px; border-radius:999px; display:inline-block; box-shadow:0 0 0 3px #eef4ff inset }
.rxs-dot--blue{ background:#0C6DFF }
.rxs-dot--teal{ background:#0FA3A8 }
.rxs-dot--violet{ background:#7c3aed }
.rxs-dot--orange{ background:#E14A3B }

/* Chevron */
.rxs-chev{
  width:10px; height:10px; border-right:2px solid #64748b; border-bottom:2px solid #64748b;
  transform:rotate(-45deg); transition:transform .25s ease; justify-self:end;
}

/* Panel */
.rxs-panel{ padding: 0 14px 14px 52px; color:#475569; font-size:15px; line-height:1.6 }
.rxs-panel p{ margin:0 0 6px }
.rxs-bullets{ margin:0; padding-left:18px }
.rxs-bullets li{ margin:4px 0 }

/* Expanded state (JS toggles aria + hidden) */
.rxs-toggle[aria-expanded="true"] + .rxs-panel{ display:block }
.rxs-toggle[aria-expanded="false"] + .rxs-panel{ display:none }
.rxs-toggle[aria-expanded="true"] .rxs-chev{ transform:rotate(135deg) }

/* Right image */
.rxs-figure{ margin:0; border-radius:16px; overflow:hidden; border:1px solid #e6e9f1; box-shadow:0 18px 36px rgba(2,6,23,.08) }
.rxs-figure img{ width:100%; height:100%; display:block; object-fit:cover }



/* Logistics & Supply Chain */

/* ================= HERO (logi-) ================= */
/* ================= HERO (logi-) — full screen fit, bigger visuals ================= */
.logi-hero{
  position: relative;
  color: #0b1328;
  isolation: isolate;
  background: linear-gradient(135deg, #f7f9ff 0%, #eef4ff 45%, #f7fbff 100%);
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(16px, 4vh, 48px);
  overflow: hidden;
}

/* angled band behind */
.logi-hero::before{
  content:"";
  position:absolute; inset:auto 0 0 0; height:52%;
  background: linear-gradient(135deg,#101a34 0%, #0b1328 55%, #0a2034 100%);
  clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
  z-index: -1;
}

/* layout */
.logi-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
  display: grid;
  grid-template-columns: 0.95fr 1.15fr;    /* give visuals more room */
  align-items: center;
  gap: clamp(18px, 4vw, 40px);
  /* allow inner grid to breathe (no height cap) */
  max-height: none;
}
@media (max-width: 980px){
  .logi-wrap{ grid-template-columns: 1fr; text-align: center; }
}

/* Copy */
.logi-copy h1{
  margin: 6px 0 8px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.06;
  font-size: clamp(24px, 5.6vw, 52px);
  color: #0b1328;
}
.logi-copy p{
  margin: 0;
  color: #334155;
  max-width: 58ch;
  font-size: clamp(14px, 1.9vw, 17px);
  line-height: 1.55;
}
.logi-tag{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  background: #e8f0ff;
  border: 1px solid #dbe6ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #0f172a;
}

.logi-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; justify-content:flex-start; }
@media (max-width:980px){ .logi-badges{ justify-content:center } }

.logi-badge{
  padding:8px 12px; border-radius:999px; font-size:12px; font-weight:700;
  background:#101a34; color:#e6f0ff; border:1px solid rgba(255,255,255,.18);
  transition:.2s ease transform, .2s ease box-shadow;
}
.logi-badge:hover{ transform: translateY(-2px); box-shadow:0 10px 20px rgba(2,6,23,.15) }

.logi-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; justify-content:flex-start }
@media (max-width:980px){ .logi-cta{ justify-content:center } }

.logi-btn{
  padding:12px 16px; border-radius:14px; text-decoration:none; font-weight:800; border:1px solid transparent;
  transition: .2s ease transform, .2s ease box-shadow, .2s ease background;
}
.logi-btn--primary{ background: linear-gradient(180deg,#22d3ee,#0ea5a4); color:#001018; }
.logi-btn--ghost{ background:#ffffff; color:#0f172a; border:1px solid #e5e7eb }
.logi-btn:hover{ transform: translateY(-2px); box-shadow:0 12px 28px rgba(2,6,23,.12) }

/* Data strip */
.logi-data{
  display:flex; gap:16px; flex-wrap:wrap; margin-top:16px;
}
.logi-datapoint{
  background:#ffffff; border:1px solid #e7ebf6; border-radius:12px;
  padding:10px 14px; box-shadow:0 8px 18px rgba(2,6,23,.06);
  flex:1 1 150px; transition:.2s ease transform, .2s ease box-shadow;
}
.logi-datapoint:hover{ transform:translateY(-2px); box-shadow:0 16px 30px rgba(2,6,23,.10) }
.logi-datapoint h3{ margin:0; font-size:18px; font-weight:800; color:#0f172a }
.logi-datapoint p{ margin:4px 0 0; font-size:13px; color:#475569 }

/* Visual collage — larger base, scales with viewport */
.logi-visual{
  position:relative;
  min-height: clamp(320px, 46vh, 640px);   /* more height for visuals */
}
.logi-card{
  position:absolute; margin:0; border-radius:18px; overflow:hidden;
  border:1px solid #e6eaf4; background:#fff;
  box-shadow:0 18px 36px rgba(2,6,23,.10);
  transition: transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.logi-card img{ display:block; width:100%; height:100%; object-fit:cover }
.logi-card:hover{ transform: translateY(-6px) scale(1.02); box-shadow:0 28px 56px rgba(2,6,23,.18); filter:saturate(1.05) }

/* positions scaled up */
.logi-card--top{
  right:4%; top:0;
  width: min(48vw, 560px);
  height: clamp(200px, 34vh, 380px);
}
.logi-card--mid{
  left:3%; top: 36%;
  width: min(38vw, 420px);
  height: clamp(170px, 28vh, 320px);
}
.logi-card--bottom{
  right:16%; bottom:-2%;
  width: min(32vw, 360px);
  height: clamp(150px, 24vh, 280px);
}

/* Stack on mobile */
@media (max-width: 980px){
  .logi-visual{ min-height: auto; }
  .logi-card{ position:relative; right:auto; left:auto; top:auto; bottom:auto; margin:12px 0; width:100%; height:auto; aspect-ratio:16/10; }
}

/* Short-screen helpers */
@media (max-height: 780px){
  .logi-copy h1{ font-size: clamp(22px, 4.6vw, 44px); }
  .logi-copy p{ font-size: clamp(13px, 1.8vw, 16px); }
  .logi-card--top{ height: clamp(180px, 30vh, 320px); }
  .logi-card--mid{ height: clamp(150px, 24vh, 280px); top: 40%; }
  .logi-card--bottom{ height: clamp(130px, 20vh, 240px); }
}
@media (max-height: 640px){
  .logi-data{ display:none; } /* free space for visuals on very short screens */
}


/* 1 */

/* ================= Intro Alt (logi-introx) ================= */
.logi-introx{
  position: relative;
  background:#ffffff;
  border-top:1px solid #e5e7eb;
  overflow:hidden;
}
.logi-introx .logi-x-wrap{
  max-width:1200px; margin:0 auto; padding: clamp(44px, 8vw, 110px) 20px;
  display:grid; grid-template-columns: 220px 1fr; gap: clamp(16px, 4vw, 40px); align-items:start;
}
@media (max-width: 980px){
  .logi-introx .logi-x-wrap{ grid-template-columns: 1fr }
}

/* rail label */
.logi-x-rail{
  position:relative; display:grid; align-content:start; padding-top:8px;
}
.logi-x-rail span{
  display:inline-block; padding:10px 14px; border-radius:12px;
  background:#f1f6ff; border:1px solid #e5e7eb; color:#0f172a; font-weight:800; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

/* header */
.logi-x-head h2{
  margin:0 0 8px; font-size: clamp(26px, 3.6vw, 40px); font-weight:900; letter-spacing:-.01em; color:#0f172a;
}
.logi-x-head p{
  margin:0; color:#374151; font-size: clamp(15px, 2.1vw, 18px); line-height:1.75;
}

/* media stripes (not cards) */
.logi-x-stripes{
  list-style:none; margin: clamp(18px, 3vw, 28px) 0 0; padding:0;
  border:1px solid #e6e9f1; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 16px 34px rgba(2,6,23,.06)
}
.logi-x-stripe{
  display:grid; grid-template-columns: 64px 1fr; gap:14px; align-items:start;
  padding:18px; position:relative;
}
.logi-x-stripe + .logi-x-stripe{ border-top:1px solid #eef0f6 }
@media (max-width:720px){ .logi-x-stripe{ grid-template-columns: 56px 1fr; padding:16px } }

/* icon puck */
.logi-x-ico{
  width:48px; height:48px; border-radius:12px; display:grid; place-items:center;
  background:#f0f9ff; border:1px solid #e6e9f1; box-shadow: inset 0 1px 0 rgba(255,255,255,.9)
}

/* copy */
.logi-x-copy h3{ margin:2px 0 6px; font-size:18px; font-weight:800; color:#0f172a }
.logi-x-copy p{ margin:0 0 6px; color:#4b5563 }
.logi-x-bullets{ margin:0; padding-left:18px; color:#475569 }
.logi-x-bullets li{ margin:4px 0 }

/* hover affordance (subtle lift & accent bar) */
.logi-x-stripe::before{
  content:""; position:absolute; left:10px; top:10px; bottom:10px; width:3px; border-radius:2px;
  background:linear-gradient(180deg, #0C6DFF, #0FA3A8);
  opacity:0; transform: translateX(-6px); transition:opacity .25s ease, transform .25s ease;
}
.logi-x-stripe:hover{ background:linear-gradient(180deg,#ffffff,#f9fbff) }
.logi-x-stripe:hover::before{ opacity:.9; transform: translateX(0) }

/* pull-quote band */
.logi-x-quote{
  margin: clamp(20px, 4vw, 32px) 0 0; padding:14px 16px; border-radius:14px;
  background:#0b1328; color:#e6f0ff; border:1px solid #111a34; box-shadow:0 18px 32px rgba(2,6,23,.12)
}
.logi-x-quote blockquote{ margin:0; font-size: clamp(16px, 2.2vw, 18px); line-height:1.6; font-weight:500 }
.logi-x-quote figcaption{ margin-top:6px; font-size:12px; color:#bcd0ff }

/* subtle decorative background */
.logi-x-bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(550px 320px at 12% 18%, rgba(59,130,246,.16), transparent 60%),
    radial-gradient(620px 360px at 88% 70%, rgba(14,165,233,.14), transparent 60%);
  filter: blur(18px);
  opacity:.8;
  z-index:0;
}
.logi-introx > .logi-x-wrap{ position:relative; z-index:1 }

/* 2 */

/* ================= Showcase (lsc-) ================= */
.lsc-showcase{
  background:#ffffff;
  border-top:1px solid #e5e7eb;
  position:relative;
}
.lsc-showcase .lsc-wrap{
  max-width:1200px;
  margin:0 auto;
  padding: clamp(44px, 7vw, 96px) 20px;
}

/* Head */
.lsc-show-head h2{
  margin:0 0 8px;
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 900;
  letter-spacing:-.01em;
  color:#0f172a;
}
.lsc-show-head p{
  margin:0 0 clamp(16px, 3vw, 28px);
  color:#374151;
  font-size: clamp(15px, 2.1vw, 18px);
  line-height:1.6;
}

/* Grid */
.lsc-show-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:16px;
}
.lsc-tile{
  grid-column: span 3;
  background:#fff;
  border:1px solid #e6eaf4;
  border-radius:16px;
  padding:12px;
  box-shadow:0 14px 32px rgba(2,6,23,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
@media (max-width:1100px){ .lsc-tile{ grid-column: span 6 } }
@media (max-width:720px){ .lsc-tile{ grid-column: span 12 } }

.lsc-tile:hover{
  transform: translateY(-4px);
  box-shadow:0 22px 44px rgba(2,6,23,.10);
}

/* Visual frame */
.lsc-vis{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  background: linear-gradient(180deg,#f7fbff,#f2f6ff);
  border:1px solid #e6eaf4;
  margin-bottom:10px;
}
.lsc-vis::after{ /* soft shine */
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.25) 30%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .6s ease;
  pointer-events:none;
}
.lsc-tile:hover .lsc-vis::after{ transform: translateX(100%) }

/* Image holder keeps aspect ratio and rounds corners */
.lsc-vis-inner{
  aspect-ratio: 16 / 10;
  width:100%;
  overflow:hidden;
  border-radius:10px;
}
.lsc-vis-inner img{
  width:100%; height:100%; display:block; object-fit:cover;
  transform: scale(1.02);
  transition: transform .35s ease, filter .35s ease;
}
.lsc-tile:hover .lsc-vis-inner img{
  transform: scale(1.06);
  filter: saturate(1.05);
}

/* Optional badge */
.lsc-badge-free{
  position:absolute; top:10px; left:10px;
  z-index:2;
  background:#101a34;
  color:#e6f0ff;
  border:1px solid rgba(255,255,255,.18);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
}

/* Text */
.lsc-tile h3{
  margin:6px 0 4px;
  font-size:18px; font-weight:800; color:#0f172a;
}
.lsc-tile p{
  margin:0; color:#4b5563; line-height:1.55; font-size:15px;
}


/* 3 */

/* ================= Timeline Rail (lsc-rail-alt) ================= */
.lsc-rail-alt{
  background:#ffffff;
  border-top:1px solid #e5e7eb;
}
.lsc-rail-alt .lsc-wrap{
  max-width:1200px; margin:0 auto;
  padding: clamp(44px, 8vw, 96px) 20px;
}

/* Header */
.lsc-rail-head{ text-align:center; margin-bottom: clamp(28px, 5vw, 48px); }
.lsc-rail-head h2{
  margin:0 0 10px;
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight:900;
  color:#0f172a;
}
.lsc-rail-head p{
  margin:0; color:#374151; font-size:16px; line-height:1.6;
}

/* Steps as vertical rail */
.lsc-rail-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: 1fr;
  gap:28px; position:relative;
}
.lsc-rail-steps::before{
  content:""; position:absolute; left:28px; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, #0EA5A4, #7C3AED);
  border-radius:3px;
}

/* Step */
.lsc-rail-step{
  display:grid; grid-template-columns:56px 1fr;
  gap:16px; align-items:flex-start; position:relative; z-index:1;
}
.lsc-rail-icon{
  width:56px; height:56px; border-radius:50%;
  background:#f0f6ff; border:2px solid #e5e7eb;
  display:grid; place-items:center;
  transition:.25s ease transform, .25s ease box-shadow;
}
.lsc-rail-step:hover .lsc-rail-icon{
  transform:scale(1.05);
  box-shadow:0 8px 18px rgba(2,6,23,.12);
}
.lsc-rail-body h4{
  margin:2px 0 6px;
  font-size:18px; font-weight:800; color:#0f172a;
}
.lsc-rail-body p{
  margin:0; color:#4b5563; line-height:1.55; font-size:15px;
}

/* Responsive */
@media(max-width:720px){
  .lsc-rail-steps::before{ left:20px }
  .lsc-rail-step{ grid-template-columns:48px 1fr; gap:12px }
  .lsc-rail-icon{ width:48px; height:48px }
}



/* =========================
   PUBLIC SECTOR (psx-) THEME
   ========================= */

/* Base container */
.psx-wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* -------- HERO: Ribbon split (very different from logistics mosaic) -------- */
/* ================= PUBLIC SECTOR HERO (govhero-) ================= */
.govhero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #ffffff;
  background: url('https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg?auto=compress&cs=tinysrgb&w=1600') 
              center/cover no-repeat;
}

/* overlay tint */
.govhero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.65); /* dark navy overlay */
  z-index: 1;
}

/* content wrapper */
.govhero-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(40px, 8vw, 120px) 20px;
  position: relative;
  z-index: 2;
  text-align: left;
}

/* copy */
.govhero-tag {
  display: inline-block;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  margin-bottom: 12px;
}

.govhero-title {
  font-size: clamp(28px, 6vw, 56px);
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 16px;
}

.govhero-sub {
  max-width: 60ch;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.6;
  margin: 0 0 20px;
  color: #e2e8f0;
}

/* CTA buttons */
.govhero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.govhero-btn {
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}

.govhero-btn--primary {
  background: #22d3ee;
  color: #0f172a;
}

.govhero-btn--secondary {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: #f8fafc;
}

.govhero-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}

/* responsive */
@media (max-width: 768px) {
  .govhero { text-align: center; }
  .govhero-wrap { text-align: center; }
  .govhero-cta { justify-content: center; }
}


/* -------- STATEMENTS: Layered rows (no cards, no stripes like logistics) -------- */
.psx-statements{background:#ffffff;border-top:1px solid #e5e7eb}
.psx-statements .psx-wrap{padding: clamp(44px,8vw,96px) 20px}
.psx-stat-head{text-align:center;margin-bottom: clamp(20px,4vw,34px)}
.psx-stat-head h2{margin:0 0 8px;font-size: clamp(24px,3.4vw,36px);font-weight:900;color:#0f172a}
.psx-stat-head p{margin:0;color:#374151}

.psx-stacks{display:grid;gap:14px}
.psx-row{
  display:grid; grid-template-columns: 140px 1fr; gap:16px; align-items:start;
  background:linear-gradient(180deg,#fbfdff,#f6f9ff); border:1px solid #e6eaf4; border-radius:16px;
  padding:14px; box-shadow:0 16px 34px rgba(2,6,23,.06);
}
@media (max-width:780px){ .psx-row{ grid-template-columns: 1fr } }

.psx-chip{
  align-self:start; display:inline-flex; align-items:center; gap:8px;
  background:#0b1b32; color:#e6f0ff; padding:10px 12px; border:1px solid rgba(255,255,255,.18);
  border-radius:12px; font-weight:800; font-size:12px; letter-spacing:.04em; text-transform:uppercase;
}
.psx-chip svg{flex:0 0 auto}

.psx-row h3{margin:2px 0 6px; font-size:18px; font-weight:800; color:#0f172a}
.psx-row p{margin:0;color:#4b5563;line-height:1.6;font-size:15px}
.psx-bullets{margin:6px 0 0; padding-left:18px; color:#475569}
.psx-bullets li{margin:4px 0}

/* -------- SERVICE STREAMS: Staggered feature bands with big side images -------- */
.psx-streams{background:#ffffff;border-top:1px solid #e5e7eb}
.psx-streams .psx-wrap{padding: clamp(44px,8vw,96px) 20px}
.psx-streams h2{margin:0 0 10px;font-size: clamp(24px,3.4vw,36px);font-weight:900;color:#0f172a}
.psx-stream{display:grid;grid-template-columns: .85fr 1.15fr;gap:24px;align-items:center;margin-top:18px}
.psx-stream:nth-child(odd){grid-template-columns: 1.15fr .85fr}
@media (max-width:980px){ .psx-stream,.psx-stream:nth-child(odd){grid-template-columns:1fr} }
.psx-art{
  position:relative;border-radius:16px;overflow:hidden;border:1px solid #e6eaf4;background:#0b1b32;
  box-shadow:0 20px 44px rgba(2,6,23,.12)
}
.psx-art .psx-shot{aspect-ratio: 16/9;width:100%}
.psx-art img{width:100%;height:100%;object-fit:cover;display:block}
.psx-copy h3{margin:4px 0 6px;font-size:20px;font-weight:900;color:#0f172a}
.psx-copy p{margin:0 0 8px;color:#4b5563;line-height:1.6}
.psx-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.psx-tag2{
  padding:6px 10px;border-radius:999px;background:#f1f6ff;border:1px solid #e6eaf4;
  font-size:12px;color:#0f172a;font-weight:700
}

/* -------- ASSURANCE: Dark band with check rows -------- */
/* Container & headings (keep your base) */
.psx-assure{
  background: linear-gradient(180deg,#0b1328,#0e223d);
  color:#e6f0ff; border-top:1px solid #0f2948;
}
.psx-assure .psx-wrap{ padding: clamp(36px,7vw,84px) 20px; }
.psx-assure h2{ margin:0 0 8px; font-size: clamp(22px,3vw,32px); font-weight:900; }
.psx-assure p{ margin:0 0 12px; color:#bfd7ff; }

.psx-checks{
  display:grid; grid-template-columns: repeat(12,1fr); gap:14px; margin-top:10px;
}
.psx-check{
  grid-column: span 6;
  position: relative; isolation:isolate;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 16px 16px 14px 16px;
  box-shadow: 0 14px 32px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}

/* Accent glow on hover */
.psx-check::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(600px 220px at 12% 10%, rgba(34,211,238,.14), transparent 60%),
              radial-gradient(600px 220px at 88% 90%, rgba(124,58,237,.12), transparent 60%);
  opacity:0; transition: opacity .3s ease;
  z-index:0;
}
.psx-check:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.18);
}
.psx-check:hover::before{ opacity: 1; }

/* Icon puck */
.psx-ico{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  margin-bottom:8px;
}

/* Title, body, bullets */
.psx-check h3{
  margin: 6px 0 6px;
  font-size: 18px; font-weight: 800; color: #f0f7ff;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.psx-check p{ margin: 0 0 8px; color: #cdd9f8; }
.psx-points{
  margin: 0; padding-left: 18px; color:#d6e2ff; font-size: 14px; line-height:1.6;
}
.psx-points li{ margin: 4px 0; }

/* Little badges */
.psx-badge{
  display:inline-block; padding:4px 8px; border-radius:999px;
  background: rgba(34,211,238,.12);
  border:1px solid rgba(34,211,238,.35);
  color:#b9f7ff; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
}
.psx-badge--violet{
  background: rgba(124,58,237,.12);
  border-color: rgba(124,58,237,.38);
  color:#e5d5ff;
}
.psx-badge--blue{
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.38);
  color:#d2e4ff;
}
.psx-badge--teal{
  background: rgba(13,148,136,.12);
  border-color: rgba(13,148,136,.38);
  color:#c7fff6;
}

/* Keyboard focus for accessibility */
.psx-check:focus-within{
  outline: 3px solid #93c5fd; outline-offset: 2px;
  border-color: rgba(255,255,255,.28);
}

/* Responsiveness */
@media (max-width: 820px){
  .psx-check{ grid-column: span 12; }
}



/* Careers */

/* Hero Sec */
.career-hero {
  position: relative;
  background: url('/assets/images/careers_hero.jpeg') center/cover no-repeat;
  height: 89vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.career-hero-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.55);
}

.career-hero-content {
  position: relative;
  max-width: 900px;
  padding: 20px;
  z-index: 1;
}

.career-hero h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.career-hero p {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 25px;
}

.btn-career {
  display: inline-block;
  background: #0b7fb8;
  color: #fff;
  padding: 14px 28px;
  border-radius: 6px;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-career:hover {
  background: #095a80;
}

/* Responsive */
@media(max-width: 768px) {
  .career-hero h1 { font-size: 2.2rem; }
  .career-hero p { font-size: 1rem; }
}


/* ===== Careers Sections Styles ===== */
/* Why Build Your Career Here */

/* ===== Scroll-Snap Cards (No JS) ===== */
/* ===== Scroll-Snap Cards (No JS) ===== */
.evp--scrollsnap{
  --ink:#0b1520; --muted:#586a7a; --bg:#f6f9fc;
  --brand:#0b7fb8; --brand2:#66d1ff; --tile:#ffffff;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg,#fff,var(--bg));
  padding: 34px 16px 40px;
  border-radius: 0px;
  box-shadow: 0 10px 28px rgba(11,127,184,.08);
  position: relative; overflow: hidden;
}
.evp--scrollsnap::before{
  content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px;
  background: radial-gradient(circle at 30% 45%, rgba(102,209,255,.22), transparent 60%);
}
.evp-head{ text-align:center; max-width:900px; margin:0 auto 18px; position:relative; z-index:1; }
.evp-head h2{ margin:0 0 6px; font-size:2rem; letter-spacing:.2px; }
.evp-head .kicker{ margin:0; color:var(--muted); }

/* Track */
.evp-track{
  display: grid; grid-auto-flow: column; grid-auto-columns: 86%;
  gap: 14px; padding: 12px 6px 14px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.evp-track::-webkit-scrollbar{ height: 8px; }
.evp-track::-webkit-scrollbar-thumb{ background: rgba(11,127,184,.35); border-radius: 999px; }
.evp-track::-webkit-scrollbar-track{ background: rgba(11,127,184,.10); border-radius: 999px; }

/* Tiles */
.evp-tile{
  scroll-snap-align: center;
  background: var(--tile);
  border: 1px solid rgba(11,127,184,.14);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 12px 28px rgba(11,127,184,.10);
  position: relative; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.evp-tile::after{
  content:""; position:absolute; top:-28px; right:-40px; width:180px; height:90px;
  background: linear-gradient(135deg, var(--brand), var(--brand2)); opacity:.12;
  transform: rotate(16deg); filter: blur(8px);
}
.evp-tile h3{ margin:6px 0 8px; font-size:1.22rem; }
.evp-tile p{ margin:0; color:var(--muted); line-height:1.65; }
.evp-tile:hover{
  transform: translateY(-8px);
  box-shadow: 0 20px 44px rgba(11,127,184,.20);
  border-color: var(--brand);
  background: linear-gradient(180deg,#fff,#fbfeff);
}

/* Progress rail */
.evp-rail{
  height:6px; background: rgba(11,127,184,.12);
  border-radius: 999px; overflow: hidden;
  max-width:520px; margin:14px auto 0;
  position: relative;
}
.evp-rail span{
  display:block; height:100%;
  background: linear-gradient(90deg,var(--brand),var(--brand2));
  width:20%; /* 5 cards -> 1/5 */
  border-radius: inherit;
  animation: railSweep 8s ease-in-out infinite;
}
@keyframes railSweep{
  0%{ transform: translateX(0%); }
  20%{ transform: translateX(100%); }
  40%{ transform: translateX(200%); }
  60%{ transform: translateX(300%); }
  80%{ transform: translateX(400%); }
  100%{ transform: translateX(0%); }
}

/* Motion on load */
.evp-tile{ animation: tileIn .6s ease both; }
.evp-tile:nth-child(2){ animation-delay:.06s; }
.evp-tile:nth-child(3){ animation-delay:.12s; }
.evp-tile:nth-child(4){ animation-delay:.18s; }
.evp-tile:nth-child(5){ animation-delay:.24s; }
@keyframes tileIn{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }

/* Desktop enhancement: grid layout */
@media (min-width: 1024px){
  .evp-track{ grid-auto-flow: initial; grid-auto-columns: initial; grid-template-columns: repeat(5, 1fr); overflow: visible; }
  .evp-rail{ display:none; }
}
@media (max-width: 520px){
  .evp-track{ grid-auto-columns:92%; }
  .evp-head h2{ font-size:1.7rem; }
}


/* How we work */
/* ===== Zigzag Style for How We Work ===== */
.how-we-work-zigzag{
  --ink:#0b1520; 
  --muted:#334155;           /* darker for better contrast */
  --brand:#0b7fb8; 
  --brand2:#66d1ff; 
  --bg:#f6f9fc;              /* slightly brighter background */
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  background: var(--bg);
  padding: 48px 20px;
}
.hwwz-wrap{ max-width:1100px; margin:0 auto; }
.hwwz-head{ text-align:center; margin-bottom:38px; }
.hwwz-head h2{ 
  font-size:2rem; margin:0 0 8px; 
  color:#0b1520;               /* force visible */
}
.hwwz-head .hwwz-sub{ 
  color:var(--muted); margin:0; 
}

/* Steps container */
.hwwz-steps{ display:flex; flex-direction:column; gap:36px; }

/* Step row */
.hwwz-step{ display:flex; align-items:center; gap:28px; }
.hwwz-step.alt{ flex-direction:row-reverse; text-align:right; }

/* Step number (solid, no gradient/transparent text) */
.hwwz-num{
  font-size:3rem; font-weight:800; 
  color: var(--brand);          /* solid color for visibility */
  min-width:90px; text-align:center;
  opacity: 1;                   /* ensure full opacity */
}

/* Step card */
.hwwz-card{
  flex:1; background:#ffffff;
  border-radius:16px; padding:20px;
  border:1px solid #cfe8f6;     /* clearer border */
  box-shadow:0 10px 24px rgba(11,127,184,.12);
  transition: transform .3s ease, box-shadow .3s ease, border-color .2s ease;
}
.hwwz-card:hover{
  transform: translateY(-6px);
  box-shadow:0 18px 40px rgba(11,127,184,.18);
  border-color: var(--brand);
}
.hwwz-card h3{ 
  margin:0 0 8px; font-size:1.22rem; 
  color:#0b1520;                /* force visible */
  font-weight:700;
}
.hwwz-card p{ 
  margin:0 0 10px; color:var(--muted); line-height:1.65; 
}

/* Tags */
.hwwz-tags{
  display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none;
}
.hwwz-tags li{
  font-size:.9rem; padding:6px 10px;
  border-radius:999px; 
  border:1px solid #b3def3;     /* stronger outline */
  background:#eaf5ff;           /* filled for legibility */
  color:#0b4b6b; 
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.hwwz-tags li:hover{ 
  background:var(--brand); color:#fff; border-color:var(--brand); 
}

/* Responsive */
@media(max-width: 768px){
  .hwwz-step, .hwwz-step.alt{ flex-direction:column; text-align:left; }
  .hwwz-num{ margin-bottom:8px; }
}

/* Optional: if any ancestor applies opacity/filters, neutralize here */
.how-we-work-zigzag, 
.hwwz-wrap, 
.hwwz-card { 
  opacity: 1; filter: none; 
}


/*  */
/* ===== Modern Split Layout ===== */
.stack-modern{
  background:#f9fbfc;
  padding:64px 20px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}
.stack-modern .stack-inner{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns: 1.1fr 0.9fr; gap:40px;
  align-items:center;
}
.stack-modern h2{
  font-size:2rem; margin:0 0 16px; color:#0b1520;
}
.stack-modern p{
  color:#4b5a6b; font-size:1.05rem; line-height:1.65;
  margin:0 0 20px;
}

/* Tags as pill list with icons */
.stack-modern .tags{
  list-style:none; margin:0 0 28px; padding:0;
  display:grid; grid-template-columns: 1fr 1fr; gap:12px;
}
.stack-modern .tags li{
  background:#fff; border:1px solid #dce8f3;
  border-radius:10px; padding:10px 14px;
  font-size:.95rem; color:#0b2a3a;
  box-shadow:0 2px 6px rgba(11,127,184,.08);
  transition:.25s ease;
}
.stack-modern .tags li:hover{
  border-color:#0b7fb8;
  box-shadow:0 6px 18px rgba(11,127,184,.14);
  transform:translateY(-2px);
}

/* Outcomes list styled cleanly */
.stack-modern .outcomes h4{
  margin:0 0 10px; font-size:1.05rem; color:#0b1520;
}
.stack-modern .outcomes ul{
  margin:0; padding-left:20px; color:#4b5a6b;
}
.stack-modern .outcomes li{
  margin:8px 0;
}
.stack-modern .outcomes strong{
  color:#0b7fb8;
}

/* Media (image/illustration) */
.stack-modern .stack-media{
  border-radius:16px; overflow:hidden;
  box-shadow:0 14px 32px rgba(11,127,184,.15);
}
.stack-modern .stack-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.stack-modern .stack-media:hover img{
  transform:scale(1.05);
}

/* Responsive */
@media(max-width:960px){
  .stack-modern .stack-inner{
    grid-template-columns: 1fr; gap:30px;
  }
  .stack-modern .tags{ grid-template-columns: 1fr; }
}

/* Interview */
/* ===== Diversity, Equity & Belonging (soft gradient panels) ===== */
.deb-alt{
  --brand:#0b7fb8; --brand2:#66d1ff;
  --ink:#0b1520; --muted:#4b5a6b;
  background:linear-gradient(180deg,#f8fbff,#eef6fc);
  padding:64px 20px;
  text-align:center;
  border-radius:0px;
}
.deb-alt h2{
  font-size:2rem; margin:0 0 10px; color:var(--ink);
}
.deb-alt .kicker{
  margin:0 0 32px; font-size:1.1rem; color:var(--muted);
}

/* Grid */
.deb-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:28px; max-width:1100px; margin:0 auto;
}

/* Panel */
.deb-item{
  background:#fff;
  border-radius:18px;
  padding:32px 22px;
  box-shadow:0 8px 22px rgba(11,127,184,.08);
  border:1px solid rgba(11,127,184,.12);
  transition:.3s ease;
  display:flex; flex-direction:column; align-items:center;
}
.deb-item:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 36px rgba(11,127,184,.16);
  border-color:var(--brand);
}

/* Icon */
.deb-icon{
  font-size:2rem;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
  box-shadow:0 6px 16px rgba(11,127,184,.2);
}

/* Text */
.deb-item h3{
  margin:0 0 10px; font-size:1.15rem; color:var(--ink);
}
.deb-item p{
  margin:0; color:var(--muted); line-height:1.6;
}

/* Responsive */
@media(max-width: 900px){
  .deb-grid{ grid-template-columns:1fr; gap:20px; }
}

/* ===== Team page (scoped) ===== */
#teamx{
  --ink:#0b1520; --muted:#4b5a6b; --bg:#f9fbfc; --card:#ffffff;
  --brand:#0b7fb8; --brand2:#66d1ff; --accent:#0bb85e;
  --ring: 0 0 0 3px rgba(11,127,184,.25);
  --shadow: 0 10px 24px rgba(11,127,184,.10);
  --radius:16px;
  color:var(--ink); background:var(--bg); font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

/* Shell */
#teamx .teamx-container{max-width:1200px; margin:0 auto; padding:0 20px}
/* #teamx .teamx-section{padding:56px 0} */
#teamx h1,#teamx h2,#teamx h3{margin:0 0 10px}
#teamx .teamx-kicker{color:var(--muted); margin:0}

/* Hero */
#teamx .teamx-hero{padding:64px 0;}
#teamx .teamx-heroWrap{
  background:
    radial-gradient(900px 420px at 110% -10%, rgba(102,209,255,.18), transparent 60%),
    linear-gradient(180deg,#fff,var(--bg));
  border-radius:22px; box-shadow:var(--shadow); overflow:hidden;
  display:grid; grid-template-columns: 1.1fr .9fr;
  transition: transform .3s ease, box-shadow .3s ease;
}
#teamx .teamx-heroWrap:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(11,127,184,.18) }
#teamx .teamx-heroCopy{ padding:38px 28px }
#teamx .teamx-hero h1{ font-size:2.2rem; line-height:1.2 }
#teamx .teamx-hero p{ color:var(--muted); margin:10px 0 18px }
#teamx .teamx-cta{ display:flex; gap:12px; flex-wrap:wrap }

/* Buttons (scoped) */
#teamx .teamx-btn{
  display:inline-block; border-radius:999px; padding:12px 18px;
  font-weight:700; text-decoration:none; transition:.3s ease; transform:translateY(0);
}
#teamx .teamx-btn:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 6px 14px rgba(11,127,184,.18) }
#teamx .teamx-btn.brand{ background:linear-gradient(90deg,var(--brand),var(--brand2)); color:#fff }
#teamx .teamx-btn.brand:hover{ filter:saturate(1.05) brightness(1.02) }
#teamx .teamx-btn.ghost{ border:2px solid var(--brand); color:var(--ink) }
#teamx .teamx-btn.ghost:hover{ background:rgba(11,127,184,.08) }

/* Media */
#teamx .teamx-media{ min-height:260px; background:#eef6ff; overflow:hidden; position:relative }
#teamx .teamx-media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease }
#teamx .teamx-media:hover img{ transform:scale(1.05) }

/* Support model block */
#teamx .teamx-support{ text-align:center; max-width:900px }
#teamx .teamx-support h1{ font-size:2rem; margin-bottom:8px; color:var(--ink) }
#teamx .teamx-support .teamx-kicker{ color:var(--muted); margin-bottom:32px }
#teamx .teamx-support p{ color:#333; line-height:1.65; margin:0 0 20px; text-align:justify }

/* Contact section (split) */
.teamx-header{
  max-width:800px;
  margin:0 auto 48px;
  text-align:center;
}
.teamx-header h2{
  font-size:2.2rem;
  margin-bottom:14px;
  color:#0b1520;
}
.teamx-header p{
  font-size:1.05rem;
  color:#4b5a6b;
  line-height:1.6;
}

#teamx .teamx-contact{ background:linear-gradient(135deg,#f9fbfc,#eef7fb); padding:60px 20px }
#teamx .teamx-contactWrap{
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
}

/* ===================== Responsive ===================== */

/* Large tablets */
@media(max-width: 992px){
  #teamx .teamx-heroWrap{ grid-template-columns:1fr; }
  #teamx .teamx-heroCopy{ padding:28px 20px; text-align:center; }
  #teamx .teamx-cta{ justify-content:center; }
  #teamx .teamx-contactWrap{ grid-template-columns:1fr; text-align:center; }
}

/* Tablets */
@media(max-width: 768px){
  #teamx .teamx-hero h1{ font-size:1.8rem; }
  #teamx .teamx-support h1{ font-size:1.6rem; }
  .teamx-header h2{ font-size:1.8rem; }
  .teamx-header p{ font-size:1rem; }
}

/* Mobile */
@media(max-width: 576px){
  #teamx .teamx-hero{ padding:40px 0; }
  #teamx .teamx-hero h1{ font-size:1.5rem; }
  #teamx .teamx-hero p{ font-size:.95rem; }
  #teamx .teamx-support p{ font-size:.95rem; text-align:left; }
  .teamx-header h2{ font-size:1.5rem; }
  .teamx-header p{ font-size:.95rem; }
  #teamx .teamx-contact{ padding:40px 16px; }
}


/* Timeline-style intro Form */
#teamx .teamx-intro{
  padding:28px; border-left:4px solid var(--brand); background:#fff; border-radius:12px;
  box-shadow:0 8px 20px rgba(11,127,184,.08);
}
#teamx .teamx-intro h2{ font-size:2rem; margin:0 0 14px; color:#0b1520 }
#teamx .teamx-intro p{ margin:0 0 20px; color:#4b5a6b; line-height:1.6 }
#teamx .teamx-points{ list-style:none; margin:0; padding:0; display:grid; gap:16px }
#teamx .teamx-points li{
  display:flex; align-items:center; gap:12px; font-size:1rem; font-weight:500; color:#0b1520;
  position:relative; padding-left:4px;
}
#teamx .teamx-marker{
  width:28px; height:28px; border-radius:6px; background:var(--brand);
  display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0;
  box-shadow:0 3px 8px rgba(11,127,184,.25);
}
#teamx .teamx-marker svg{ width:16px; height:16px }

/* Contact form card */
#teamx .teamx-form{ background:#fff; padding:30px; border-radius:18px; box-shadow:0 14px 30px rgba(11,127,184,.12) }
#teamx .teamx-form h3{ margin:0 0 18px; color:#0b1520 }
#teamx .teamx-form label{ font-weight:600; font-size:.95rem; display:block; margin:10px 0 6px }
#teamx .teamx-form input,#teamx .teamx-form textarea{
  width:100%; padding:12px 14px; border:1px solid #d6e3ee; border-radius:10px; font:inherit; transition:.25s;
}
#teamx .teamx-form input:focus,#teamx .teamx-form textarea:focus{ border-color:var(--brand); box-shadow:var(--ring); outline:none }
#teamx .teamx-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
#teamx .teamx-form small{ color:#6b7a8a; font-size:.8rem }
#teamx .teamx-form button{
  margin-top:16px; width:100%; padding:14px; border:none; border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand2)); color:#fff; font-weight:700; font-size:1rem; cursor:pointer; transition:.25s ease;
}
#teamx .teamx-form button:hover{ filter:brightness(1.05) }

@media (max-width:900px){
  #teamx .teamx-contactWrap{ grid-template-columns:1fr; gap:32px }
}


/* What Defines Our Team */

#careerx{
  --dark:#0b1520;
  --ink:#f1f5f9;
  --muted:#9caab5;
  --brand:#0b7fb8;
  --brand2:#66d1ff;
  --accent:#0bb85e;
  --radius:34px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  padding: 20px;
}
#careerx .careerx-wrap{
  max-width: 980px; margin: 0 auto;
  display: grid; grid-template-columns: 320px 1fr;
  border-radius: var(--radius); overflow: hidden;
  background: var(--dark);
  box-shadow: 0 20px 48px rgba(0,0,0,.35);
  transition:.3s ease;
}
#careerx .careerx-wrap:hover{ transform: translateY(-4px); box-shadow:0 28px 60px rgba(0,0,0,.45) }

/* left image */
#careerx .careerx-media{ margin:0; background:#e1eef7 }
#careerx .careerx-media img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .6s ease }
#careerx .careerx-wrap:hover .careerx-media img{ transform:scale(1.05) }

/* right content */
#careerx .careerx-content{
  padding:28px; color:var(--ink);
  display:flex; flex-direction:column; gap:14px; justify-content:center;
}
#careerx .careerx-eyebrow{
  letter-spacing:.18em; font-size:.78rem; text-transform:uppercase; color:var(--muted);
}
#careerx h3{
  margin:0; font-size: clamp(1.6rem,1.1rem+1.5vw,2.4rem); line-height:1.2;
}
#careerx h3 em{ color:var(--brand2); font-style:normal; font-weight:800 }
#careerx p{ color:var(--muted); margin:0 0 10px; line-height:1.55; }

/* buttons */
#careerx .careerx-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px }
#careerx .cx-btn{
  border-radius:999px; font-weight:700; padding:12px 20px; text-decoration:none;
  text-transform:uppercase; font-size:.9rem; letter-spacing:.05em; transition:.25s ease;
}
#careerx .cx-solid{ background:linear-gradient(90deg,var(--brand),var(--brand2)); color:#fff }
#careerx .cx-solid:hover{ filter:brightness(1.08) }
#careerx .cx-outline{ border:2px solid var(--brand2); color:#fff; background:transparent }
#careerx .cx-outline:hover{ background:rgba(102,209,255,.15) }

/* responsive */
@media(max-width:900px){
  #careerx .careerx-wrap{ grid-template-columns:1fr; max-width:640px }
  #careerx .careerx-media{ height:200px }
}

/*    <!-- What Defines Our Team --> */

#teamtraits{
  padding:60px 20px;
  background:#f9fbfc;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

#teamtraits .traits-wrap{
  max-width:1200px; margin:0 auto;
}

#teamtraits .traits-header{
  text-align:center;
  max-width:800px;
  margin:0 auto 40px;
}
#teamtraits .traits-header h2{
  font-size:2rem; margin-bottom:12px; color:#0b1520;
}
#teamtraits .traits-header p{
  color:#4b5a6b; font-size:1rem; line-height:1.6;
}

#teamtraits .traits-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
}

#teamtraits .trait-card{
  background:#fff;
  border:1px solid #d6e3ee;
  border-radius:14px;
  padding:24px;
  text-align:left;
  transition:.25s ease;
}
#teamtraits .trait-card:hover{
  border-color:#0b7fb8;
  box-shadow:0 10px 20px rgba(11,127,184,.12);
  transform:translateY(-4px);
}

#teamtraits .trait-icon{
  width:42px; height:42px;
  margin-bottom:14px;
}

#teamtraits h3{
  margin:0 0 10px; font-size:1.2rem; color:#0b1520;
}
#teamtraits p{
  margin:0; color:#4b5a6b; line-height:1.5;
}



/* Roles page */
/* ====== Scoped tokens ====== */
#jobsx{
  --navy:#0c2130;
  --ink:#0b1520;
  --muted:#4b5a6b;
  --card:#ffffff;
  --brand:#0b7fb8; --brand2:#66d1ff;
  --accent:#0bb85e;
  --ring:0 0 0 3px rgba(11,127,184,.25);
  --shadow:0 14px 30px rgba(11,127,184,.12);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--ink);
}

/* ====== Hero ====== */
#jobsx .jx-hero{
  background:#0f2736; /* dark navy band */
  padding: 48px 0 64px;
}
#jobsx .jx-hero-wrap{
  max-width:1200px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns: 520px 1fr; gap:40px; align-items:center;
}
#jobsx .jx-hero-media{
  margin:0; background:#07141d; border-radius:14px; overflow:hidden;
  box-shadow: var(--shadow);
}
#jobsx .jx-hero-media img{ display:block; width:100%; height:100%; object-fit:cover }
#jobsx .jx-hero-copy{
  color:#e8f1f6;
}
#jobsx .jx-eyebrow{
  display:block; margin-bottom:10px; color:#9db1bf; letter-spacing:.18em;
  text-transform:uppercase; font-size:.85rem;
}
#jobsx .jx-hero-copy h1{
  font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem);
  line-height:1.15; margin:0 0 10px; font-weight:800; color:#ffffff;
}
#jobsx .jx-hero-copy .jx-arrow{ font-weight:900; margin-left:.1em; color:#8de58f }
#jobsx .jx-hero-copy p{ color:#c7d5de; margin:0; line-height:1.6; max-width: 58ch }

/* ===================== Responsive ===================== */

/* Large tablets (stack media + copy if needed) */
@media(max-width: 992px){
  #jobsx .jx-hero-wrap{
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }
  #jobsx .jx-hero-copy p{
    margin-left: auto;
    margin-right: auto;
  }
}

/* Tablets */
@media(max-width: 768px){
  #jobsx .jx-hero{
    padding: 36px 0 48px;
  }
  #jobsx .jx-hero-copy h1{
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
  }
  #jobsx .jx-hero-copy p{
    font-size: 0.95rem;
  }
}

/* Mobiles */
@media(max-width: 576px){
  #jobsx .jx-hero{
    padding: 28px 0 40px;
  }
  #jobsx .jx-hero-wrap{
    gap: 20px;
    padding: 0 16px;
  }
  #jobsx .jx-hero-copy h1{
    font-size: 1.5rem;
    line-height: 1.25;
  }
  #jobsx .jx-hero-copy p{
    font-size: 0.9rem;
    line-height: 1.5;
  }
}

/* ====== Roles list ====== */
/* ====== Current Openings Cards ====== */
#jobsCards{
  --ink:#0b1520; --muted:#4b5a6b; --brand:#0b7fb8; --brand2:#66d1ff; --shadow:0 10px 22px rgba(11,127,184,.12);
  font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;
  padding:64px 20px; background:linear-gradient(180deg,#fafcff,#f4f9fd);
  color:var(--ink);
}
.jc-shell{max-width:1200px; margin:0 auto}
.jc-head{display:flex; justify-content:space-between; align-items:end; margin-bottom:32px; flex-wrap:wrap; gap:16px}
.jc-head h2{margin:0; font-size:2rem}
.jc-head p{margin:0; color:var(--muted)}

/* Grid layout */
.jc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
}

/* Card */
.jc-card{
  background:#fff; border:1px solid #d6e3ee; border-radius:16px; padding:20px;
  box-shadow:var(--shadow); transition:.25s ease; display:flex; flex-direction:column; justify-content:space-between;
}
.jc-card:hover{transform:translateY(-5px); border-color:var(--brand)}

.jc-card h3{margin:10px 0; font-size:1.25rem}
.jc-card .meta{color:#6a7a8a; font-size:.9rem; margin-bottom:6px}
.jc-card .tags{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px}
.jc-card .tags span{background:#eef6ff; color:#0b5a86; font-weight:600; font-size:.8rem; padding:4px 8px; border-radius:999px}
.jc-card .badge{display:inline-block; background:#eef6ff; color:#0b5a86; font-weight:700; font-size:.8rem; padding:4px 10px; border-radius:999px}
.jc-card .desc{flex:1; color:var(--muted); font-size:.95rem; margin:8px 0 16px}

/* Actions */
.jc-card .actions{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.jc-btn{
  padding:10px 16px; border-radius:999px; font-weight:700; cursor:pointer; border:none; transition:.25s ease;
}
.jc-btn.apply{background:linear-gradient(90deg,var(--brand),var(--brand2)); color:#fff; flex:1}
.jc-btn.ghost{background:#fff; border:2px solid var(--brand); color:var(--brand)}
.jc-btn:hover{filter:brightness(1.05)}


/* Role Hero buttons */
.jx-hero-ctas {
  margin-top: 18px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.jx-btn {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: .25s ease;
  cursor: pointer;
}

/* Solid Button */
.jx-btn.solid {
  background: linear-gradient(90deg, #0b7fb8, #66d1ff);
  color: #fff;
  box-shadow: 0 10px 18px rgba(11,127,184,.2);
}
.jx-btn.solid:hover {
  filter: brightness(1.07);
  transform: translateY(-2px);
}

/* Outline Button */
.jx-btn.outline {
  border: 2px solid #0b7fb8;
  color: #0b7fb8;
  background: transparent;
}
.jx-btn.outline:hover {
  background: rgba(11,127,184,.08);
  transform: translateY(-2px);
}



/* Submit Resume */

:root {
  --ink: #0b1520;
  --muted: #4b5a6b;
  --bg: #f9fbfc;
  --brand: #0b7fb8;
  --brand2: #66d1ff;
  --radius: 14px;
  --shadow: 0 8px 20px rgba(0,0,0,.12);
  --accent: #0bb85e;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

/* Hero */
.resume-hero {
  background: linear-gradient(135deg, #0b7fb8, #66d1ff);
  color: #fff;
  text-align: center;
  padding: 80px 20px;
}
.resume-hero h1 {
  font-size: clamp(2rem, 1.2rem + 2.2vw, 3rem);
  margin-bottom: 16px;
}
.resume-hero p {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.1rem;
  line-height: 1.6;
}

.resume-action {
  margin-top: 24px;
}

.resume-btn-outline {
  display: inline-block;
  padding: 14px 32px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 8px;
  text-decoration: none;
  background: transparent;
  transition: all .3s ease;
}

.resume-btn-outline:hover {
  background: #fff;
  color: #0b7fb8; /* brand blue on hover */
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.resume-btn-outline:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(0,0,0,.2);
}




/* Form Section */
.resume-form-section {
  background: var(--bg);
  padding: 60px 20px;
}
.resume-form-wrap {
  max-width: 700px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow);
}
.resume-form-wrap h2 {
  margin-bottom: 20px;
  text-align: center;
  color: var(--ink);
}

/* Resume Form */
.resume-form .form-group {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
}
.resume-form label {
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--muted);
}
.resume-form input,
.resume-form textarea {
  padding: 12px 14px;
  border: 1px solid #d0d8e2;
  border-radius: var(--radius);
  font-size: 1rem;
}
.resume-form input:focus,
.resume-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(11,127,184,.2);
}

.resume-btn {
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  color: #fff;
  padding: 14px 22px;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
.resume-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(11,127,184,.25);
}

/* Responsive */
@media (max-width: 768px) {
  .resume-hero { padding: 60px 20px; }
  .resume-form-wrap { padding: 28px; }
}
@media (max-width: 480px) {
  .resume-hero h1 { font-size: 1.8rem; }
  .resume-hero p { font-size: 1rem; }
  .resume-form-wrap { padding: 20px; }
}




/* ===== Map section (custom, no Bootstrap) ===== */
.map{
  --ink:#0b1520;
  --brand:#0b7fb8;
  --brand-2:#66d1ff;
  --ring: 0 0 0 3px rgba(102,209,255,.35);

  padding: 60px 0;
  background:
    radial-gradient(1200px 500px at 110% -20%, rgba(102,209,255,.06), transparent 60%),
    linear-gradient(180deg, #f7fbfe, #f1f6fb);
  color: var(--ink);
}

.map__container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Map aspect ratio box */
.map__frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;              /* modern browsers */
  border-radius: 16px;
  overflow: hidden;
  background:#eaf3fb;
  box-shadow: 0 14px 34px rgba(11,19,32,.14);
}
.map__frame iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; display:block;
  filter: saturate(1.02) contrast(1.02);
}

/* Row below the map (address + buttons) */
.map__row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 14px;
}

.map__address{
  font-size: 0.98rem;
}

/* Actions (buttons) */
.map__actions{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;                  /* push buttons to the right on wide screens */
}

.map__btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;                 /* small size like .btn-sm */
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.map__btn:focus-visible{
  outline: none;
  box-shadow: var(--ring);
  transform: translateY(-1px);
}
.map__icon{
  font-size: 1rem; line-height: 1;
}

/* Primary (gradient) */
.map__btn--primary{
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color: var(--brand);
}
.map__btn--primary:hover{
  filter: brightness(1.03);
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(11,127,184,.25);
}

/* Outline (light) */
.map__btn--outline{
  color: #274157;
  background: #ffffff;
  border-color: #b7c7d6;
}
.map__btn--outline:hover{
  color: var(--brand);
  border-color: var(--brand-2);
  background: #f6fbff;
  transform: translateY(-2px);
}

/* Dark outline */
.map__btn--dark{
  color: #0b1520;
  background: #ffffff;
  border-color: #2b3a46;
}
.map__btn--dark:hover{
  color: #ffffff;
  background: #2b3a46;
  border-color: #2b3a46;
  transform: translateY(-2px);
}

/* Responsive tweaks */
@media (max-width: 700px){
  .map__actions{ margin-left: 0; }     /* stack neatly on smaller screens */
}
@media (max-width: 576px){
  .map__frame{ aspect-ratio: 16 / 10; } /* slightly taller on small screens */
}

/* Optional: Dark mode */
@media (prefers-color-scheme: dark){
  .map{
    background:
      radial-gradient(1200px 500px at 110% -20%, rgba(102,209,255,.09), transparent 60%),
      linear-gradient(180deg, #0e1a26, #0b1320);
    color:#e8f2ff;
  }
  .map__frame{ background:#0f1f2c; box-shadow: 0 16px 36px rgba(0,0,0,.5); }
  .map__btn--outline{ color:#d7e6f3; border-color:#3a4a58; background: transparent; }
  .map__btn--outline:hover{ background:#0f1f2c; color: var(--brand-2); border-color: var(--brand-2); }
  .map__btn--dark{ color:#e8f2ff; border-color:#445463; background: transparent; }
  .map__btn--dark:hover{ background:#223140; }
}