.module-employee .image {
    background-color: #0066cc !important;
  }
  .module-payroll .image {
    background-color: #e91e63 !important;
  }
  .module-compensation .image {
    background-color: #4caf50 !important;
  }
  .module-training .image {
    background-color: #ff9800 !important;
  }
  .module-performance .image {
    background-color: #9c27b0 !important;
  }
  .module-industrial .image {
    background-color: #3f51b5 !important;
  }
  .module-position .image {
    background-color: #009688 !important;
  }
  .module-leave .image {
    background-color: #795548 !important;
  }
  .module-time .image {
    background-color: #f44336 !important;
  }
  .module-recruitment .image {
    background-color: #00bcd4 !important;
  }
  .module-development .image {
    background-color: #8bc34a !important;
  }
  .module-policy .image {
    background-color: #cddc39 !important;
  }
  .module-form .image {
    background-color: #607d8b !important;
  }
  .module-attendance .image {
    background-color: #673ab7 !important;
  }
  .module-mobile .image {
    background-color: #ff5722 !important;
  }
  .module-application .image {
    background-color: #0099cc !important;
  }
  /* ===== Module Theme Colors ===== */
.module-standard-report {
  background: #2196f3;   /* Blue */
  color: #fff;
}

.module-crystal-report {
  background: #9c27b0;   /* Purple */
  color: #fff;
}

/* Ensure icons are visible */
.module-standard-report svg,
.module-crystal-report svg {
  display: block;
  margin: 0 auto;
  fill: none;
  stroke: white;
}

/* --- Modules: add themes for the two new tiles --- */
.mods-grid .mod.module-standard-report .image{
  background:#2196f3;          /* blue badge */
  color:#fff;                   /* SVG uses currentColor */
}
.mods-grid .mod.module-standard-report .image::after{
  content:"";
  position:absolute; inset:-6px;
  border-radius:16px;
}

/* Crystal Report */
.mods-grid .mod.module-crystal-report .image{
  background:#7e57c2;          /* purple badge */
  color:#fff;
  box-shadow: 0 10px 20px rgba(126,87,194,.25), inset 0 0 0 2px rgba(255,255,255,.35);
}
/* (Optional) keep card itself white like all others */
.mods-grid .mod.module-standard-report,
.mods-grid .mod.module-crystal-report{
  background:#fff;
}

/* (Your existing hover effects kept) */
 /* Smooth scaling and shadow on hover for module cards */
 .features .container .row .col .item {
    transform: translateZ(0) !important;
    transition: transform 0.3s ease !important;
    will-change: transform !important;
    cursor: pointer !important;
    position: relative !important;
  }
  
  .features .container .row .col .item:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
    z-index: 10 !important;
  }

/* Smooth hover polish remains */
.features .item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform, opacity;
}

.features .item:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}
.animate-on-scroll.appear {
  opacity: 1;
  transform: translateY(0);
}
/* ===== CONTACT SECTION STYLES ===== */
/* Contact Us Section Overrides */

/* Section Header Style */
.contact-section h6.subtitle {
    color: #800000;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }
  
  .contact-section h2.title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
  }
  
  .contact-section .line-dec {
    width: 60px;
    height: 3px;
    background-color: #800000;
    margin: 0.5rem auto 1.5rem auto;
  }
  
  /* Form and Layout */
  .contact-form input,
  .contact-form textarea {
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid #ced4da;
    font-size: 0.95rem;
  }
  
  .contact-form textarea {
    resize: none;
  }
  
  .contact-form .btn-submit {
    background-color: #00a19d;
    border: none;
    color: white;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: background-color 0.3s ease;
  }
  
  .contact-form .btn-submit:hover {
    background-color: #a01111;
  }
  
  /* Illustration */
  .contact-illustration {
    max-height: 260px;
  }
  
  /* Map Container */
  .map-container iframe {
    min-height: 340px;
  }
  
  /* Contact Info Cards */
  .info-card {
    background-color: #fff;
    padding: 1.5rem 1rem;
    border-radius: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  }
  
  .info-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 0.5rem;
    object-fit: contain;
    opacity: 0.85;
  }
  
  .info-text {
    font-size: 0.95rem;
    font-weight: 500;
    color: #333;
  }
  
  /* Optional: Responsive Tweaks */
  @media (max-width: 576px) {
    .contact-form input,
    .contact-form textarea {
      font-size: 0.9rem;
    }
  
    .contact-section h2.title {
      font-size: 1.6rem;
    }
  }

  .info-box {
    background: #fff;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 8px 16px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    height: 100%;
  }
  
  .info-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
  }
  
  .icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #00a19d;
    background-color: rgba(0, 161, 157, 0.1);
  }
  
  .info-title {
    font-size: 1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.25rem;
  }
  
  .info-detail {
    color: #666;
    font-size: 0.95rem;
  }

  .contact-info-cards .info-card {
    background: #ffffff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
  }
  
  .contact-info-cards .info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }
  
  .contact-info-cards .info-icon {
    display: block;
    margin: 0 auto 12px;
    opacity: 0.8;
  }
  
  .contact-info-cards .info-label {
    font-weight: 600;
    color: #2a2a2a;
    margin-bottom: 4px;
  }
  
  .contact-info-cards .info-text {
    color: #666666;
    font-size: 15px;
  }

  /* Contact Info Styling */
.contact-info-cards {
    margin-top: 3rem;
  }
  
  .info-card {
    background-color: #fff;
    border-radius: 16px;
    transition: all 0.3s ease;
    height: 100%;
  }
  
  .info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  }
  
  .info-icon {
    width: 40px;
    height: 40px;
  }
  
  .info-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 0.3rem;
  }
  
  .info-text {
    color: #666;
    font-size: 15px;
  }
  
  .info-link {
    color: inherit;
  }
  
  .info-link:hover {
    text-decoration: none;
  }
  .section-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #222;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  .section-subtitle {
    font-size: 1rem;
    color: #555;
    margin-top: 5px;
  }
  
  .contact-info-cards .info-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    background-color: #fff;
  }
  
  .contact-info-cards .info-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  }
  
  .contact-info-cards .info-label {
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 6px;
    color: #2a2a2a;
  }
  
  .contact-info-cards .info-text {
    color: #777;
    font-size: 0.95rem;
  }
  
  .contact-info-cards .info-icon {
    display: inline-block;
  }
  
  .info-card-link {
    text-decoration: none;
    color: inherit;
  }
  
  .cursor-pointer {
    cursor: pointer;
  }
  
  /* Modal Styles */
  .modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 1050;
  }
  
  .modal-content {
    background: #fff;
    padding: 1rem;
    border-radius: 10px;
    max-width: 700px;
    width: 90%;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    animation: fadeInUp 0.3s ease;
  }
  
  .close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.5rem;
    background: none;
    border: none;
    color: #555;
    cursor: pointer;
  }
  
  @keyframes fadeInUp {
    from {
      transform: translateY(40px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.7);
    z-index: 9999;
    padding: 20px;
    box-sizing: border-box;
  }
  
  .modal-overlay.active {
    display: flex !important;
  }
  
  .modal-content {
    position: relative;
    background-color: #fff;
    border-radius: 12px;
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
  }
  
  .close-btn {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #333;
  }
  
  body.modal-open {
    overflow: hidden;
  }
  
  .contact-info-section .title {
    font-weight: 700;
    font-size: 2rem;
  }
  
  .contact-info-section .subtitle {
    color: #00a19d;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 0.5rem;
  }
  
  .contact-info-section .description {
    font-size: 1rem;
    color: #555;
  }
  
  .info-card:hover {
    background-color: #f8f9fa;
    transform: translateY(-4px);
    transition: all 0.3s ease;
  }
  .map-flyout {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 320px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    display: none;
    animation: slideInUp 0.3s ease;
  }
  
  @keyframes slideInUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .close-flyout {
    position: absolute;
    top: 6px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #999;
  }
  
  .close-flyout:hover {
    color: #000;
  }
/* =========================================================
   HRSC — ABOUT (REVAMPED v5) — Polished Skin
   Paste at the VERY BOTTOM of assets/css/hrsc-theme.css
   ========================================================= */
   #about {
    --hrsc-brand: #4da6e7;      /* tweak to your brand if needed */
    --ink: #111827;
    --muted: #6b7280;
    --card: #fff;
    --border: #eef2f7;
    --shadow-sm: 0 6px 14px rgba(0,0,0,.06);
    --shadow-md: 0 12px 28px rgba(0,0,0,.08);
    background: transparent !important;   /* ensure no grey section bg */
  }
  
  /* ---------- Section heading (centered to match site) ---------- */
  #about .section-heading { text-align: center; }
  #about .section-heading h6 { letter-spacing:.02em; margin-bottom:8px; }
  #about .section-heading h4 { margin-bottom:10px; }
  #about .section-heading .line-dec {
    width:64px; height:3px; background-color: #800000 !important;
    border-radius:3px; margin:0 auto;
  }
  
  /* ---------- Tabs (centered under title) ---------- */
  #about .about-tabs-wrap{ gap:10px; margin-top:8px; }
  #about .about-tab-btn{
    border:2px solid var(--hrsc-brand);
    background:#fff; color:var(--hrsc-brand);
    padding:10px 18px; border-radius:999px; font-weight:700;
    transition: all .25s ease; box-shadow: 0 2px 0 rgba(77,166,231,.12);
  }
  #about .about-tab-btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(77,166,231,.22); }
  #about .about-tab-btn.active{ background:var(--hrsc-brand); color:#fff; box-shadow:0 10px 24px rgba(77,166,231,.28); }
  
  /* ---------- Panels ---------- */
  #about.about.section{ padding-top:88px; padding-bottom:88px; }
  #about .about-panels{ margin-top:16px; }
  #about .about-panel[hidden]{ display:none !important; }
  
  /* ---------- Press Card (no cropping) ---------- */
  #about .news-card{ position:relative; border:1px solid var(--border); border-radius:18px; overflow:hidden; background:var(--card); box-shadow:var(--shadow-md); }
  #about .news-image.contain img{ width:100%; height:auto; display:block; object-fit:contain; } /* show full scan */
  #about .news-banner {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #ffff;
    color: #fff;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 15px;
    opacity: 0.9;
  }
  #about .news-banner .dot{ width:8px; height:8px; border-radius:50%; background:#fff; opacity:.9; }
  
  /* ---------- Google rating + Review Ticker ---------- */
  #about .rating-stack{ display:flex; flex-direction:column; gap:10px; }
  #about .rating-pill{
    display:inline-flex; align-items:center; gap:10px;
    background:#fff; border:1px solid var(--border); border-radius:999px;
    padding:8px 14px; box-shadow:var(--shadow-sm); font-weight:700; color:var(--ink);
  }
  #about .rating-pill .stars svg{ width:18px; height:18px; color:#f59e0b; }
  
  #about .review-ticker{
    border:1px solid var(--border); border-radius:14px; background:#fff;
    box-shadow:var(--shadow-sm); padding:10px 12px; overflow:hidden; min-height:78px;
  }
  #about .review-item{ display:flex; gap:10px; align-items:flex-start; animation: review-in .4s ease both; }
  #about .review-item .avatar{
    width:34px; height:34px; border-radius:50%; flex:0 0 34px;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; color:#fff; background:linear-gradient(135deg, #4da6e7, #0ea5e9);
  }
  #about .review-item .meta{ color:#374151; font-size:.95rem; }
  #about .review-item p{ margin:.25rem 0 0 0; color:#374151; }
  @keyframes review-in { from{opacity:0; transform: translateY(6px);} to{opacity:1; transform:none;} }
  
  .review-item:nth-child(1) .avatar { background: #4285F4; } /* Google blue */
.review-item:nth-child(2) .avatar { background: #EA4335; } /* Google red */
.review-item:nth-child(3) .avatar { background: #FBBC05; color: #333; } /* Google yellow */
.review-item:nth-child(4) .avatar { background: #34A853; } /* Google green */
.review-item:nth-child(5) .avatar { background: #673AB7; } /* Extra purple */
  /* ---------- Cards ---------- */
  #about .about-card{
    background:var(--card); border:1px solid var(--border); border-radius:18px;
    padding:22px; box-shadow:var(--shadow-md);
    transition: transform .25s ease, box-shadow .25s ease;
  }
  #about .about-card:hover{ transform: translateY(-3px); box-shadow:0 18px 36px rgba(0,0,0,.08); }
  #about .about-intro h5{ font-weight:800; margin-bottom:12px; }
  #about .about-intro p{ color:#374151; }
  
  /* ---------- Capsules ---------- */
  #about .capsule .capsule-head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
  #about .capsule .cap-icon img{ width:20px; height:20px; display:block; }
  #about .capsule h6{ margin:0; font-weight:800; }
  #about .capsule .capsule-points{ margin:0; padding-left:0; list-style:none; }
  #about .capsule .capsule-points li{
    position:relative; padding-left:18px; margin-bottom:8px; color:#374151; font-size:.96rem;
  }
  #about .capsule .capsule-points li::before{
    content:""; position:absolute; left:0; top:.62em;
    width:8px; height:8px; border-radius:50%; background:var(--hrsc-brand);
    box-shadow:0 0 0 3px rgba(77,166,231,.12);
  }
  
  /* ---------- Establishment emphasis (Since + timeline) ---------- */
  #about .capsule.emphasis .since-row{ display:flex; align-items:center; gap:10px; margin:8px 0 6px; }
  #about .since-badge{
    border-radius:999px; background:#e0f2fe; color:#075985;
    padding:6px 12px; font-weight:800; letter-spacing:.02em; border:1px solid #bae6fd;
  }
  #about .years-badge{
    border-radius:999px; background:#f1f5f9; color:#0f172a;
    padding:6px 12px; font-weight:800; border:1px solid #e2e8f0;
  }
  #about .micro-timeline{ display:flex; align-items:center; gap:10px; }
  #about .micro-timeline .tick .label{ font-weight:800; color:#334155; font-size:.85rem; }
  #about .micro-timeline .bar{
    position:relative; flex:1; height:8px; border-radius:8px; background:#e5f3fe; overflow:hidden;
    box-shadow: inset 0 0 0 1px #dbeafe;
  }
  #about .micro-timeline .bar .seg{
    position:absolute; left:0; top:0; bottom:0; width:0;
    background:#4da6e7; border-radius:8px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6);
    animation: seg-grow .9s ease forwards;
  }
  #about .micro-timeline .bar .seg.seg-2{
    left:auto; right:0; background:#93c5fd; animation-delay:.1s;
  }
  @keyframes seg-grow { from{width:0;} to{} } /* width is set via JS */
  #about .timeline-info{ margin-top:6px; color:#334155; font-weight:700; font-size:.9rem; }
  
  /* ---------- CEO Message (revamped) ---------- */
  #about .ceo-profile{ text-align:center; }
  #about .ceo-profile .avatar{ width:160px; height:160px; object-fit:cover; margin-bottom:10px; }
  #about .ceo-profile .meta{ font-weight:600; color:#1f2937; }
  
  #about .ceo-quote{ position:relative; overflow:hidden; }
  #about .ceo-quote .quote-header{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
  #about .ceo-quote .quote-icon{ width:28px; height:28px; color:#0ea5e9; }
  #about .ceo-quote .quote-header .bar{ flex:1; height:3px; background: linear-gradient(90deg,#0ea5e9,#4da6e7); border-radius:3px; }
  #about .ceo-quote .q-body p{ color:#374151; }
  #about .ceo-quote .quote-footer{ display:flex; justify-content:flex-end; margin-top:8px; }
  #about .ceo-quote .signature{ font-weight:800; color:#0f172a; }
  
  /* ---------- Section animations ---------- */
  @keyframes fadeUp { from{opacity:0; transform: translateY(10px);} to{opacity:1; transform:none;} }
  #about .about-panel:not([hidden]) .about-card,
  #about .about-panel:not([hidden]) .news-card,
  #about .about-panel:not([hidden]) .rating-pill,
  #about .about-panel:not([hidden]) .review-ticker { animation: fadeUp .5s ease both; }
  
  /* ---------- Responsive ---------- */
  @media (max-width: 991.98px){
    #about.about.section{ padding-top:72px; padding-bottom:72px; }
    #about .about-card{ padding:18px; }
    #about .ceo-profile .avatar{ width:140px; height:140px; }
  }
  @media (max-width: 575.98px){
    #about .about-tab-btn{ flex:1; text-align:center; padding:9px 12px; }
  }

/* ===== ABOUT — Google Reviews pill width fix (v6) ===== */
#about .rating-stack{
  align-items: flex-start !important;   /* keep the pill from stretching */
}

#about .rating-pill{
  width: max-content !important;        /* hug the content */
  max-width: 100% !important;
  flex: 0 0 auto !important;            /* do not grow */
  white-space: nowrap !important;       /* keep on one line */
  padding: 6px 12px !important;         /* slightly tighter */
  gap: 6px !important;                  /* reduce internal spacing */
}

#about .rating-pill .stars svg{
  width: 15px !important;
  height: 15px !important;
}

@media (max-width: 575.98px){
  #about .rating-pill{
    font-size: 13px !important;
    padding: 6px 10px !important;
  }
}

/* ===== ABOUT — Restore Google logo + stars inside rating pill ===== */
#about .rating-stack{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

#about .rating-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}

#about .rating-pill .g-logo{
  display: inline-flex;
  align-items: center;
  line-height: 0; /* keep svg tight */
}

#about .rating-pill .g-logo svg,
#about .rating-pill .g-logo img{
  width: 18px;
  height: 18px;
  display: block;
}

#about .rating-pill .stars{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #f59e0b; /* star yellow */
  font-weight: 700;
}

#about .rating-pill .stars svg{
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0;
}

#about .rating-pill .label{
  font-size: 12.5px;
  font-weight: 600;
  color: #555;
}
/* --- Google Review Pill --- */
.rating-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 50px;
  padding: 0.4rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;
  width: fit-content;
  margin: 0 auto;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.rating-pill .g-logo {
  display: flex;
  align-items: center;
}

.rating-pill .stars {
  display: flex;
  align-items: center;
  gap: 2px;
  color: #f4b400; /* Google gold */
  font-weight: bold;
}

.rating-pill .stars svg {
  width: 16px;
  height: 16px;
  fill: #f4b400;
}

.rating-pill .label {
  font-size: 0.85rem;
  color: #555;
}

/* === Establishment: clean timeline === */
.about .era-timeline {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.about .era-timeline .year {
  font-size: 12px;
  font-weight: 700;
  color: #4b5563; /* neutral text */
  letter-spacing: .3px;
}

.about .era-timeline .track {
  position: relative;
  height: 8px;
  border-radius: 6px;
  background: #eef2f7; /* light rail */
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}

.about .era-timeline .track .progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;            /* full span 1997 → 2025 */
  background: #009688;    /* accent; swap to #673ab7 if preferred */
}

/* small dots at each end for a premium feel */
.about .era-timeline .track::before,
.about .era-timeline .track::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #fff;
  box-shadow: 0 0 0 3px #009688; /* accent ring */
}
.about .era-timeline .track::before { left: -1px; }
.about .era-timeline .track::after  { right: -1px; }

/* caption below the rail */
.about .era-caption {
  margin-top: 14px;
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  color: #555;
  line-height: 1.4;
}

.era-caption .era-number {
  font-size: 2rem;          /* bigger than rest */
  font-weight: 700;         /* bold */
  color: #009688;           /* HRSC brand accent */
  display: inline-block;
  margin-right: 4px;
  position: relative;
}

.era-caption .era-number::after {
  content: "+";
  font-size: 1.2rem;        /* slightly smaller plus */
  vertical-align: super;    /* like superscript */
  margin-left: 1px;
}
/* If you prefer purple accent instead of teal, uncomment: */
/*
.about .era-timeline .track .progress { background: #673ab7; }
.about .era-timeline .track::before,
.about .era-timeline .track::after { box-shadow: 0 0 0 3px #673ab7; }
*/

/* Sequential reveal for module cards */
.mod-card {
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  transition: opacity .5s ease, transform .5s ease;
  will-change: opacity, transform;
}

.mod-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Optional: keep your nice hover feel */
.features .item {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.features .item:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}
/* --- Icon pop on sequential reveal --- */

/* start smaller so it can 'pop' in */
.features .mod-card .image img {
  transform: scale(0.85);
  opacity: 0.0;
  transition:
    transform 420ms cubic-bezier(.2,.8,.2,1),
    opacity   380ms ease-out;
  will-change: transform, opacity;
}

/* when the card becomes visible, pop the icon & fade it in */
.features .mod-card.is-visible .image img {
  transform: scale(1);
  opacity: 1;
}

/* a tiny overshoot for a premium feel */
@supports (animation: name) {
  .features .mod-card.is-visible .image img {
    animation: icon-pop 450ms cubic-bezier(.2,.9,.2,1) 40ms both;
  }
}

@keyframes icon-pop {
  0%   { transform: scale(0.85); }
  70%  { transform: scale(1.06); }  /* overshoot */
  100% { transform: scale(1.00); }
}

/* keep card hover polish you already have */
.features .item {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform, box-shadow;
}
.features .item:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

/* respectful motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .features .mod-card,
  .features .mod-card .image img {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

/* ===== Insights & Figures emphasis ===== */
#insights .figure-card {
  padding: 14px 6px;
}

#insights .figure-number {
  line-height: 1;
  margin-bottom: 10px;
}

/* BIG, bold number — responsive */
#insights .counter {
  display: inline-block;
  font-weight: 800;
  font-size: clamp(2.25rem, 4vw + 1rem, 4rem); /* scales nicely */
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums; /* stable width digits */
  transition: color .25s ease;
}

/* Caption smaller and softer */
#insights .figure-caption {
  margin-top: 6px;
  font-size: 1.1rem;
  color: #444;
}

/* Finishing pop animation when the count completes */
#insights .counter.pop-finish {
  animation: stat-pop 420ms cubic-bezier(.2,.9,.2,1) both;
}

@keyframes stat-pop {
  0%   { transform: scale(0.96); }
  70%  { transform: scale(1.06); }
  100% { transform: scale(1.00); }
}

/* Optional subtle shadow on hover */
#insights .figure-card:hover .counter {
  text-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* Make the captcha align nicely with your inputs */
.g-recaptcha {
  transform-origin: left top;
  margin: 4px 0 8px 0;
}

/* Center it on small screens */
@media (max-width: 576px) {
  .g-recaptcha { display: inline-block; }
  .contact-form .g-recaptcha { text-align: center; }
}

/* Result Modal — base */
.result-modal .modal-content {
  border-radius: 14px;
  border: 0;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
}
.result-modal .modal-body {
  padding: 20px 22px 6px 22px;
}
.result-modal .modal-footer {
  padding: 10px 22px 22px 22px;
}
.result-modal .bar {
  height: 4px;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

/* Icon bubble */
.result-modal .icon-wrap {
  width: 44px; height: 44px;
  min-width: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #eceff1; /* default */
}

/* Title & text */
.result-modal .modal-title {
  font-weight: 700;
  letter-spacing: .2px;
}
.result-modal #resultModalText {
  color: #555;
}

/* Success theme (HRSC teal) */
.result-modal.success .bar { background: #009688; }
.result-modal.success .modal-title { color: #009688; }
.result-modal.success .icon-wrap { background: rgba(0,150,136,.12); color: #009688; }

/* Error theme (brand maroon-ish) */
.result-modal.error .bar { background: #800000; }
.result-modal.error .modal-title { color: #800000; }
.result-modal.error .icon-wrap { background: rgba(128,0,0,.12); color: #800000; }

/* Optional: make “Request Demo” button match brand */
.btn.btn-submit {
  background: #00695c; /* normal background */
  color: white;
  transition: all 0.3s ease; /* smooth transition */
  transform: scale(1);
}

.btn.btn-submit:hover {
  background: #009688; /* hover background */
  color: white;
  transform: scale(1.05); /* slight zoom effect */
  box-shadow: 0 8px 20px rgba(0, 150, 136, 0.4); /* glowing shadow */
}

/* === Global smooth scroll & offset fix === */
html { scroll-behavior: smooth; }
#top, #about, #solution, #services, #choose, #news, #contact { scroll-margin-top: 90px; }

/* === HRSC NAV (scoped, overrides via specificity) === */
.hrsc-nav {
  position: sticky; top: 0; z-index: 9999;
  backdrop-filter: saturate(180%) blur(12px);
  background: rgba(255,255,255,0.72);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.hrsc-nav.is-scrolled { background: #ffffff; }

.hrsc-nav__inner {
  max-width: 1200px; margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; justify-content: space-between;
}

.hrsc-nav__brand img { height: 42px; display: block; }

.hrsc-nav__toggle {
  display: none; background: none; border: 0; padding: 6px; margin-left: auto;
  cursor: pointer;
}
.hrsc-nav__bar {
  display: block; width: 24px; height: 2px; background: #1b1b1b; margin: 5px 0; transition: transform .25s ease, opacity .25s ease;
}

/* menu */
.hrsc-nav__menu {
  display: flex; align-items: center; gap: 18px;
}

.hrsc-nav__link {
  font: 500 14px/1.2 "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #2a2a2a; text-decoration: none; padding: 10px 6px; border-radius: 8px;
  position: relative; transition: color .2s ease, background .2s ease;
}
.hrsc-nav__link:hover { color: #800000; background: rgba(128,0,0,0.06); }

.hrsc-nav__link.is-active {
  color: #800000;
}
.hrsc-nav__link.is-active::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 4px;
  height: 2px; background: #800000; border-radius: 2px;
}


/* CTA */
.hrsc-nav__cta {
  text-decoration: none;
  font-weight: 600; font-size: 14px;
  background: #0f9d8f; color: #fff;
  padding: 10px 14px; border-radius: 999px;
  box-shadow: 0 6px 14px rgba(15,157,143,.18);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.hrsc-nav__cta:hover {
  transform: translateY(-1px);
  background: #0d8e82;
  box-shadow: 0 10px 18px rgba(15,157,143,.22);
}

/* === Mobile === */
@media (max-width: 991px) {
  .hrsc-nav__toggle { display: inline-block; }
  .hrsc-nav__menu {
    position: fixed; inset: 64px 0 auto 0;
    background: #ffffff; border-top: 1px solid rgba(0,0,0,0.06);
    display: grid; gap: 8px; padding: 14px 16px;
    max-height: 0; overflow: hidden; transition: max-height .25s ease;
  }
  .hrsc-nav__menu.is-open { max-height: 70vh; box-shadow: 0 16px 32px rgba(0,0,0,.08); }

  .hrsc-nav__link, .hrsc-nav__cta { padding: 12px; border-radius: 10px; }
  .hrsc-nav__cta { text-align: center; }
}

/* === Hard overrides for legacy nav (if any) === */
.header-area, .main-nav, .header-sticky, .menu-trigger, .header-area * {
  all: unset; /* nuke legacy rules */
}

/* ===== Modules v1 (namespaced) ===== */
.modules-v1 { padding: 48px 0 64px; background:#fff; }
.modules-v1 .section-heading h6 { margin-bottom:6px; }
.modules-v1 .section-heading h4 { margin:0; }
.modules-v1 .line-dec { width:64px; height:3px; background:#800000; border-radius:2px; margin:10px auto 0; }

/* Grid: 7 columns desktop, responsive down */
.modules-v1 .mv1-grid{
  display:grid;
  grid-template-columns:repeat(7, minmax(140px,1fr));
  gap:22px;
  justify-items:center;
  align-items:stretch;
}

/* Card */
.modules-v1 .mv1-card{
  width:100%;
  max-width:170px;                 /* bigger cards */
  background:#fff !important;
  border:1px solid #e7edf3 !important;
  border-radius:16px !important;
  padding:24px 14px 18px !important;
  text-align:center !important;
  box-shadow:0 8px 18px rgba(0,0,0,.06) !important;
  transition:transform .25s ease, box-shadow .25s ease !important;
  cursor:pointer !important;
}
.modules-v1 .mv1-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:0 14px 28px rgba(0,0,0,.12) !important;
}

/* Icon tile */
.modules-v1 .mv1-ico{
  width:68px; height:68px; margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center;
  border-radius:14px;
  background:#f1f5f9;             /* default tile bg */
}
.modules-v1 .mv1-ico img{ max-width:44px; height:auto; }

/* Title */
.modules-v1 .mv1-card h4{
  font-size:14px; line-height:1.25; font-weight:700; color:#0f172a; margin:0;
}

/* Color accents per module (adjust freely) */
.modules-v1 .mv1-emp .mv1-ico{ background:#e8f1ff; }
.modules-v1 .mv1-pay .mv1-ico{ background:#ffe8f0; }
.modules-v1 .mv1-comp .mv1-ico{ background:#e8fff1; }
.modules-v1 .mv1-trn .mv1-ico{ background:#fff3e6; }
.modules-v1 .mv1-perf .mv1-ico{ background:#f4e8ff; }
.modules-v1 .mv1-ind .mv1-ico{ background:#e9edff; }
.modules-v1 .mv1-pos .mv1-ico{ background:#e6fffb; }
.modules-v1 .mv1-leave .mv1-ico{ background:#f4ebe6; }
.modules-v1 .mv1-time .mv1-ico{ background:#ffecea; }
.modules-v1 .mv1-rec .mv1-ico{ background:#e7fbff; }
.modules-v1 .mv1-dev .mv1-ico{ background:#eefbe8; }
.modules-v1 .mv1-pol .mv1-ico{ background:#f7fde6; }
.modules-v1 .mv1-form .mv1-ico{ background:#edf3f6; }
.modules-v1 .mv1-matt .mv1-ico{ background:#efe9ff; }
.modules-v1 .mv1-mapp .mv1-ico{ background:#ffece3; }

/* e-… family */
.modules-v1 .mv1-edata .mv1-ico{ background:#e8f1ff; }
.modules-v1 .mv1-efin  .mv1-ico{ background:#ffe8f0; }
.modules-v1 .mv1-eclm  .mv1-ico{ background:#ffe8f0; }
.modules-v1 .mv1-loan  .mv1-ico{ background:#f1f5f9; }
.modules-v1 .mv1-eloan .mv1-ico{ background:#f1f5f9; }
.modules-v1 .mv1-etime .mv1-ico{ background:#ffecea; }
.modules-v1 .mv1-erec  .mv1-ico{ background:#e7fbff; }
.modules-v1 .mv1-edev  .mv1-ico{ background:#eefbe8; }
.modules-v1 .mv1-eforms.mv1-card .mv1-ico{ background:#edf3f6; }
.modules-v1 .mv1-repo  .mv1-ico{ background:#edf3f6; }

/* Reveal animation */
.modules-v1 .mv1-reveal{ opacity:0; transform:translateY(14px); }
.modules-v1 .mv1-reveal.mv1-in{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; }

/* Responsive */
@media (max-width:1400px){
  .modules-v1 .mv1-grid{ grid-template-columns:repeat(5, minmax(140px,1fr)); }
}
@media (max-width:992px){
  .modules-v1 .mv1-grid{ grid-template-columns:repeat(3, minmax(140px,1fr)); }
}
@media (max-width:576px){
  .modules-v1 .mv1-grid{ grid-template-columns:repeat(2, minmax(140px,1fr)); }
}
/* Small label between sections (keeps existing theme) */
#modules .module-subheading{
  text-align:center;
  font-weight:800;
  color:#0f172a;
  margin:6px 0 14px;
  letter-spacing:.2px;
}
#modules .module-subheading::after{
  content:"";
  display:block;
  width:48px;
  height:3px;
  background:#800000;
  border-radius:2px;
  margin:8px auto 0;
}

/* ===================== MODULES (CLEAN OVERRIDE) ===================== */
#modules-clean{padding:60px 0 50px;background:#fff}
#modules-clean .container-narrow{max-width:1200px;margin:0 auto;padding:0 16px}

/* Heading */
#modules-clean .section-heading h6{margin-bottom:6px}
#modules-clean .section-heading h4{margin:0}

/* 5-up grid; wraps nicely on smaller screens */
#modules-clean .modules-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(180px,1fr));
  gap:22px;
  margin-top:22px;
}
@media (max-width: 1100px){
  #modules-clean .modules-grid{grid-template-columns:repeat(4,minmax(160px,1fr))}
}
@media (max-width: 900px){
  #modules-clean .modules-grid{grid-template-columns:repeat(3,minmax(150px,1fr))}
}
@media (max-width: 600px){
  #modules-clean .modules-grid{grid-template-columns:repeat(2,minmax(140px,1fr))}
}

/* Card */
#modules-clean .mod-card{
  background:#fff;border:1px solid #e9edf2;border-radius:18px;
  padding:22px 16px 18px;text-align:center;min-height:156px;
  box-shadow:0 14px 36px rgba(0,0,0,.06);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start
}
#modules-clean .mod-card:hover{
  transform:translateY(-4px);
  border-color:rgba(13,142,130,.35);
  box-shadow:0 20px 48px rgba(13,142,130,.14)
}
#modules-clean .mod-card .image{
  width:64px;height:64px;border-radius:16px;
  display:grid;place-items:center;margin:4px auto 10px;background:#eef2f6
}
#modules-clean .mod-card .image img,
#modules-clean .mod-card .image svg{
  width:44px;height:44px;object-fit:contain;display:block
}
#modules-clean .mod-card h4{
  font-size:.94rem;line-height:1.25;font-weight:700;color:#0f172a;margin:8px 0 0
}

/* Parent families (your color palette) */
#modules-clean .module-employee     .image{background:#0066cc!important}
#modules-clean .module-payroll      .image{background:#e91e63!important}
#modules-clean .module-compensation .image{background:#4caf50!important}
#modules-clean .module-training     .image{background:#ff9800!important}
#modules-clean .module-performance  .image{background:#9c27b0!important}
#modules-clean .module-industrial   .image{background:#3f51b5!important}
#modules-clean .module-position     .image{background:#009688!important}
#modules-clean .module-leave        .image{background:#795548!important}
#modules-clean .module-time         .image{background:#f44336!important}
#modules-clean .module-loan         .image{background:#e91e63!important} /* finance tone */
#modules-clean .module-development  .image{background:#8bc34a!important}
#modules-clean .module-recruitment  .image{background:#00bcd4!important}
#modules-clean .module-policy       .image{background:#cddc39!important}
#modules-clean .module-form         .image{background:#607d8b!important}
#modules-clean .module-attendance   .image{background:#673ab7!important}
#modules-clean .module-application  .image{background:#0099cc!important}

/* e-modules inherit family colors */
#modules-clean .module-edata        .image{background:#0066cc!important}  /* employee */
#modules-clean .module-efinancial   .image{background:#e91e63!important}  /* payroll  */
#modules-clean .module-eclaim       .image{background:#4caf50!important}   /* comp&ben */
#modules-clean .module-etraining    .image{background:#ff9800!important}   /* training */
#modules-clean .module-eappraisal   .image{background:#9c27b0!important}   /* performance */
#modules-clean .module-eindustrial  .image{background:#3f51b5!important}   /* industrial */
#modules-clean .module-eleave       .image{background:#795548!important}   /* leave */
#modules-clean .module-etime        .image{background:#f44336!important}   /* time */
#modules-clean .module-eloan        .image{background:#e91e63!important}   /* finance */
#modules-clean .module-edevelopment .image{background:#8bc34a!important}   /* development */
#modules-clean .module-erecruit     .image{background:#00bcd4!important}   /* recruitment */
#modules-clean .module-eforms       .image{background:#607d8b!important}   /* forms */

/* Nuke legacy styling that might leak in */
.features #modules-clean, .features #modules-clean * { all: revert; }
.force-modules, .force-modules * {
  all: unset;
  all: revert;
  box-sizing: border-box;
}

/* ===================== OUR MODULES — HARD OVERRIDE ===================== */
.ep2p-modules{ padding: 32px 0 24px; background:#fff; }
.ep2p-modules .line-dec{ width:64px; height:3px; background:#800000; border-radius:2px; margin:10px auto 0; }

/* Single grid: always 5 per row on desktop */
.ep2p-modules .modgrid{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0,1fr)) !important;
  gap:22px !important;
  max-width:1200px;
  margin: 14px auto 0;
  padding: 0 12px;
}

/* Reset any legacy Bootstrap/Flex sizing */
.ep2p-modules .mod{ all:unset; }
.ep2p-modules .mod{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:170px !important;
  background:#fff;
  border:1px solid #e9edf2;
  border-radius:18px;
  box-shadow:0 14px 34px rgba(0,0,0,.06);
  padding:18px 10px 14px;
  text-align:center;
  transition:transform .18s ease, box-shadow .18s ease;
}
.ep2p-modules .mod:hover{ transform:translateY(-4px); box-shadow:0 22px 48px rgba(0,0,0,.10); }

.ep2p-modules .mod .image{
  width:72px; height:72px; border-radius:16px;
  display:grid; place-items:center;
  color:#fff; margin-bottom:10px;
}
.ep2p-modules .mod .image img{ width:44px; height:44px; object-fit:contain; }
.ep2p-modules .mod .image svg{ width:44px; height:44px; }
.ep2p-modules .mod .image span{ font-weight:900; font-size:28px; }

/* Label text */
.ep2p-modules .mod h4{
  margin:8px 6px 0; font-size:13px; line-height:1.35; color:#111827;
}

/* ---- Color mapping (main modules) ---- */
.module-employee   .image{ background:#0066cc !important; }
.module-payroll    .image{ background:#e91e63 !important; }
.module-compensation .image{ background:#4caf50 !important; }
.module-training   .image{ background:#ff9800 !important; }
.module-performance.image, .module-performance .image{ background:#9c27b0 !important; }

.module-industrial .image{ background:#3f51b5 !important; }
.module-position   .image{ background:#009688 !important; }
.module-leave      .image{ background:#795548 !important; }
.module-time       .image{ background:#f44336 !important; }
.module-development .image{ background:#8bc34a !important; }
.module-recruitment .image{ background:#00bcd4 !important; }
.module-form       .image{ background:#607d8b !important; }
.module-attendance .image{ background:#673ab7 !important; }
.module-application .image{ background:#0099cc !important; }
.module-loan       .image{ background:#ff2d6a !important; } /* loan color */

/* e* modules: tint to match their parent color (lighter, but same family) */
.mod.e .image{ filter:saturate(0.92) brightness(1.05); }

/* ---- Responsive: keep grid usable on small screens ---- */
@media (max-width: 1200px){ .ep2p-modules .modgrid{ grid-template-columns:repeat(4,1fr) !important; } }
@media (max-width: 992px){  .ep2p-modules .modgrid{ grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width: 768px){  .ep2p-modules .modgrid{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width: 520px){  .ep2p-modules .modgrid{ grid-template-columns:1fr !important; } }

/* ===================== eP2P Modules — Hard Reset + Layout ===================== */
.ep2p-modules{position:relative;background:#fff;padding:40px 0}
.ep2p-modules .mods-wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.ep2p-modules .mods-head{text-align:center;margin-bottom:18px}
.ep2p-modules .mods-head h6{margin:0 0 6px;font-weight:800;color:#6b7280;letter-spacing:.08em;text-transform:uppercase}
.ep2p-modules .mods-head h4{margin:0;font-weight:800;color:#0f172a}

/* Grid — 5 per row on desktop (auto wraps; last row can be 2) */
.ep2p-modules .mods-grid{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(180px,1fr)) !important;
  gap:22px !important;
}

/* Card */
.ep2p-modules .mod{
  background:#fff !important;
  border:1px solid #e9edf2 !important;
  border-radius:18px !important;
  padding:22px 12px 18px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  min-height:160px !important;
  box-shadow:0 16px 36px rgba(0,0,0,.06) !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.ep2p-modules .mod:hover{
  transform:translateY(-4px) !important;
  border-color:rgba(13,142,130,.28) !important;
  box-shadow:0 22px 50px rgba(13,142,130,.14) !important;
}
.ep2p-modules .mod h4{
  margin:12px 0 0 !important;
  font-size:.98rem !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  color:#0f172a !important;
}

/* Icon pill */
.ep2p-modules .mod .image{
  width:74px !important;height:74px !important;
  border-radius:18px !important;
  display:grid !important;place-items:center !important;
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.35),0 6px 16px rgba(0,0,0,.10) !important;
}
.ep2p-modules .mod .image img,
.ep2p-modules .mod .image svg{
  width:44px !important;height:44px !important;display:block !important;
  color:#fff !important; /* for inline SVG */
}

/* ===== Colour mapping (parents & e-modules share colours) ===== */
.ep2p-modules .module-employee .image{background:#0066cc !important;}
.ep2p-modules .module-payroll .image{background:#e91e63 !important;}
.ep2p-modules .module-compensation .image{background:#4caf50 !important;}
.ep2p-modules .module-training .image{background:#ff9800 !important;}
.ep2p-modules .module-performance .image{background:#9c27b0 !important;}
.ep2p-modules .module-industrial .image{background:#3f51b5 !important;}
.ep2p-modules .module-position .image{background:#009688 !important;}
.ep2p-modules .module-leave .image{background:#795548 !important;}
.ep2p-modules .module-time .image{background:#f44336 !important;}
.ep2p-modules .module-recruitment .image{background:#00bcd4 !important;}
.ep2p-modules .module-development .image{background:#8bc34a !important;}
.ep2p-modules .module-policy .image{background:#cddc39 !important;}
.ep2p-modules .module-form .image{background:#607d8b !important;}
.ep2p-modules .module-attendance .image{background:#673ab7 !important;}
.ep2p-modules .module-mobile .image{background:#ff5722 !important;}
.ep2p-modules .module-application .image{background:#0099cc !important;}
/* New: Loan colour (used by Loan & eLoan) */
.ep2p-modules .module-loan .image{background:#ff4278 !important;}

/* e-modules share the same colours via their module-* class; no extra style needed */

/* ===== Responsiveness (keeps things neat on smaller screens) ===== */
@media (max-width: 1100px){
  .ep2p-modules .mods-grid{grid-template-columns:repeat(4,minmax(160px,1fr)) !important;}
}
@media (max-width: 900px){
  .ep2p-modules .mods-grid{grid-template-columns:repeat(3,minmax(160px,1fr)) !important;}
}
@media (max-width: 640px){
  .ep2p-modules .mods-grid{grid-template-columns:repeat(2,minmax(150px,1fr)) !important;}
}

/* ===== FAQ v2 (override-safe) ===== */
.faqv2{position:relative;background:#fff;padding:64px 0 84px;overflow:hidden}
.faqv2 .section-heading h6{margin-bottom:6px}
.faqv2 .section-heading h4{margin:0}
.faqv2 .line-dec{width:64px;height:3px;background:#800000;border-radius:2px;margin:10px auto 0}

.faqv2-orb{position:absolute;border-radius:50%;filter:blur(28px);opacity:.16;pointer-events:none}
.faqv2-orb.a{width:520px;height:520px;background:#38e1cd;left:-160px;top:-120px}
.faqv2-orb.b{width:560px;height:560px;background:#ffd166;right:-180px;bottom:-160px}

.faqv2-wrap{max-width:1400px;margin:0 auto;padding:0 20px}
.faqv2-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:start;margin-top:18px}
@media (max-width:1100px){.faqv2-grid{grid-template-columns:1fr;gap:24px}}

.faqv2-qa .accordion-item{border:1px solid #e9edf2;border-radius:14px;margin-bottom:12px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.06)}
.faqv2-qa .accordion-button{font-weight:700;padding:16px 18px}
.faqv2-qa .accordion-body{padding:16px 18px;color:#475569;text-align:justify}

.faqv2-cta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.faqv2-cta .faqv2-link{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:#0d8e82;color:#fff;font-weight:800;text-decoration:none;box-shadow:0 8px 20px rgba(13,142,130,.25)}
.faqv2-cta .faqv2-link:hover{filter:brightness(.96)}
.faqv2-cta span{color:#0b1220;font-weight:700}

.faqv2-visual{display:flex;flex-direction:column;align-items:center;gap:10px}
.faqv2-visual figcaption{font-weight:800;color:#0b1220}

.faqv2-desktop{width:100%;max-width:640px;background:#0a0f1a;border:2px solid rgba(255,255,255,.08);border-radius:14px;box-shadow:0 26px 60px rgba(0,0,0,.28)}
.faqv2-desktop .bar{height:28px;background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e);opacity:.22;border-top-left-radius:12px;border-top-right-radius:12px}
.faqv2-desktop .screen{position:relative;aspect-ratio:16/10;border-bottom-left-radius:12px;border-bottom-right-radius:12px;overflow:hidden;background:#000}
.faqv2-desktop .screen .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.faqv2-desktop .screen .shot.is-on{opacity:1}

.faqv2-dots{display:flex;gap:6px;margin-top:6px}
.faqv2-dots button{width:8px;height:8px;border-radius:50%;border:0;background:#aab3be}
.faqv2-dots button.is-on{background:#0f172a}
/* ===================== CONTACT v2 ===================== */
.contactv2{position:relative;background:#fff;padding:64px 0 96px;overflow:hidden}
.contactv2 .line-dec{width:64px;height:3px;background:#800000;border-radius:2px;margin:10px auto 0}
.contactv2-sub{max-width:860px;margin:8px auto 0;color:#556070}

.contactv2-orb{position:absolute;border-radius:50%;filter:blur(28px);opacity:.16;pointer-events:none}
.contactv2 .orb-a{width:540px;height:540px;background:#38e1cd;left:-160px;top:-140px}
.contactv2 .orb-b{width:580px;height:580px;background:#ffd166;right:-180px;bottom:-160px}

.contactv2-wrap{max-width:1400px;margin:0 auto;padding:0 20px}
.contactv2-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:36px;align-items:center}
@media (max-width:1100px){.contactv2-grid{grid-template-columns:1fr;gap:24px}}

.contactv2-visual{display:grid;grid-template-columns:1fr auto;align-items:end;gap:18px;justify-items:center}
@media (max-width:1100px){.contactv2-visual{justify-items:center}}

.laptop{width:100%;max-width:720px;animation:cv2Float 6s ease-in-out infinite}
.laptop .lid{position:relative;width:100%;aspect-ratio:16/10;background:#0a0f1a;border:2px solid rgba(255,255,255,.08);border-radius:14px;box-shadow:0 26px 60px rgba(0,0,0,.28)}
.laptop .bar{height:26px;background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e);opacity:.22;border-top-left-radius:12px;border-top-right-radius:12px}
.laptop .screen{position:relative;overflow:hidden;border-bottom-left-radius:12px;border-bottom-right-radius:12px;background:#000;height:calc(100% - 26px)}
.laptop .screen .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.laptop .screen .shot.is-on{opacity:1}
.laptop .base{width:92%;height:16px;margin:6px auto 0;background:linear-gradient(#cfd6df,#b9c2cd);border-radius:0 0 12px 12px;box-shadow:0 12px 24px rgba(0,0,0,.18)}
.laptop .hinge{position:absolute;left:50%;transform:translateX(-50%);top:-6px;width:80px;height:6px;background:#9aa3ae;border-radius:6px 6px 0 0}

.phone{align-self:end;text-align:center;animation:cv2Float 7s ease-in-out -1s infinite}
.phone .shell{position:relative;width:260px;height:520px;border-radius:44px;background:#0a0f1a;border:2px solid rgba(255,255,255,.08);box-shadow:0 28px 80px rgba(0,0,0,.35)}
.phone .notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:130px;height:24px;background:#0a0f1a;border-bottom-left-radius:14px;border-bottom-right-radius:14px}
.phone .screen{position:absolute;inset:22px;border-radius:30px;overflow:hidden;background:#000}
.phone img{width:100%;height:100%;object-fit:cover;display:block}
.phone figcaption{font-size:12px;color:#475569;margin-top:6px}

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

/* Form card */
.contactv2-formwrap{background:#fff;border:1px solid #e9edf2;border-radius:18px;padding:20px;box-shadow:0 24px 56px rgba(0,0,0,.06)}
.contactv2-form .form-control{border-radius:12px;border:1px solid #dfe7ee}
.contactv2-form .form-control:focus{border-color:#0d8e82;box-shadow:0 0 0 0.2rem rgba(13,142,130,.12)}
.contactv2 .btn-submit{background:#0d8e82;color:#fff;font-weight:800;border-radius:12px;border:0;box-shadow:0 10px 24px rgba(13,142,130,.25)}
.contactv2 .btn-submit:hover{filter:brightness(.97)}

/* Module picker */
.contactv2-picker{position:relative}
.contactv2-picker .picker-label{font-weight:800;color:#0b1220}
.contactv2-picker .muted{color:#6b7280;font-weight:600}
.picker-input{display:flex;align-items:center;gap:8px;min-height:48px;border:1px solid #dfe7ee;border-radius:12px;padding:6px 12px;background:#fff;cursor:pointer;flex-wrap:wrap}
.picker-input:focus,.picker-input:focus-visible{outline:2px solid #0d8e82}
.picker-input .placeholder{color:#94a3b8}
.picker-input .chev{margin-left:auto;color:#64748b}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;background:#eef2f7;border:1px solid #dfe7ee;border-radius:999px;padding:4px 8px;font-weight:700;font-size:12px;color:#0b1220}
.chip button{border:0;background:transparent;line-height:1;padding:0 0 0 2px;color:#6b7280}
.chip button:hover{color:#0b1220}

.picker-panel{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid #e9edf2;border-radius:14px;box-shadow:0 24px 56px rgba(0,0,0,.10);padding:10px;z-index:40;display:none}
.picker-panel.is-open{display:block}
.picker-head{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.picker-groups{max-height:320px;overflow:auto}
.group{border-top:1px dashed #e5e7eb;padding-top:8px;margin-top:8px}
.group h6{font-size:.9rem;margin:0 0 6px;color:#334155;font-weight:800}
.group .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
@media (max-width:600px){.group .grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.group label{display:flex;align-items:center;gap:8px;border:1px solid #e9edf2;border-radius:10px;padding:8px 10px;font-size:.9rem;cursor:pointer}
.group input[type="checkbox"]{accent-color:#0d8e82}

/* Result modal theming (keeps your existing JS) */
.result-modal .bar{height:4px;background:linear-gradient(90deg,#22c55e,#0ea5e9);border-top-left-radius:8px;border-top-right-radius:8px}
.result-modal.success .bar{background:linear-gradient(90deg,#22c55e,#16a34a)}
.result-modal.error .bar{background:linear-gradient(90deg,#f97316,#ef4444)}
.result-modal .icon-wrap{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#f1f5f9;color:#0f172a}

/* ===== Request Demo v5 – hard override ===== */
.contact-v5 * { box-sizing: border-box; }
.contact-v5 .section-heading h6{ font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#9c2323; }
.contact-v5 .section-heading h4{ font-weight:800; text-transform:none; }
.contact-v5 .line-dec{ width:60px; height:3px; background:#9c2323; margin:12px auto 0; border-radius:2px; }

.contact-v5-row{ align-items:center; }

/* --- Device stage --- */
.device-stage{ position:relative; height:520px; }
.mock-laptop{ position:absolute; left:-10px; top:40px; width:520px; max-width:100%; margin:0; text-align:center; }
.mock-laptop .lid{ position:relative; width:100%; aspect-ratio:16/10; background:#0a0f1a; border-radius:14px; border:2px solid rgba(255,255,255,.08); box-shadow:0 26px 60px rgba(0,0,0,.28); }
.mock-laptop .cam{ position:absolute; top:8px; left:50%; transform:translateX(-50%); width:10px; height:10px; border-radius:50%; background:#1f2937; }
.mock-laptop .screen{ position:absolute; inset:16px; border-radius:8px; overflow:hidden; background:#000; }
.mock-laptop .screen .lap-shot{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s ease; }
.mock-laptop .screen .lap-shot.is-on{ opacity:1; }
.mock-laptop .base{ position:relative; width:92%; height:16px; margin:6px auto 0; background:linear-gradient(#cfd6df,#b9c2cd); border-radius:0 0 12px 12px; box-shadow:0 12px 24px rgba(0,0,0,.18); }
.mock-laptop .hinge{ position:absolute; left:50%; transform:translateX(-50%); top:-6px; width:80px; height:6px; background:#9aa3ae; border-radius:6px 6px 0 0; }
.mock-laptop .kbd{ position:absolute; left:4%; right:4%; top:2px; height:8px; background:repeating-linear-gradient(90deg,#aeb7c1 0 8px,#b8c1cc 8px 12px); border-radius:6px; }
.mock-laptop .track{ position:absolute; left:38%; right:38%; top:2px; height:8px; background:#9aa3ae; border-radius:6px; }
.mock-laptop figcaption{ font-size:12px; color:#64748b; margin-top:6px; }

/* Phone overlaps neatly on the right side of laptop */
.mock-phone{ position:absolute; right:-10px; top:0; width:270px; text-align:center; margin:0; }
.mock-phone .shell{ position:relative; width:100%; height:540px; border-radius:44px; background:#0a0f1a; border:2px solid rgba(255,255,255,.08); box-shadow:0 28px 80px rgba(0,0,0,.35); }
.mock-phone .notch{ position:absolute; top:12px; left:50%; transform:translateX(-50%); width:130px; height:24px; background:#0a0f1a; border-bottom-left-radius:14px; border-bottom-right-radius:14px; }
.mock-phone .screen{ position:absolute; inset:22px; border-radius:30px; overflow:hidden; background:#000; }
.mock-phone .screen .ph-shot{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s ease; }
.mock-phone .screen .ph-shot.is-on{ opacity:1; }
.mock-phone figcaption{ font-size:12px; color:#64748b; margin-top:6px; }

/* Responsive tune */
@media (max-width: 1200px){
  .device-stage{ height:520px; }
  .mock-laptop{ left:-20px; width:480px; }
  .mock-phone{ right:-10px; width:250px; }
}
@media (max-width: 992px){
  .device-stage{ height:480px; margin-bottom:10px; }
  .mock-laptop{ position:relative; left:0; top:0; width:480px; margin-inline:auto; }
  .mock-phone{ position:absolute; right:calc(50% - 260px); top:20px; }
}
@media (max-width: 640px){
  .device-stage{ height:auto; }
  .mock-laptop{ position:static; width:100%; max-width:520px; }
  .mock-phone{ position:static; width:240px; margin:18px auto 0; }
}

/* --- Form look --- */
.contact-v5 .form-control{ border-radius:12px; padding:.75rem .9rem; }
.contact-v5 .btn-submit{ background:#0d8e82; color:#fff; border-radius:12px; font-weight:700; }
.contact-v5 .btn-submit:hover{ background:#0b7a71; }

/* --- Modules picker --- */
.mod-pills{ display:flex; gap:8px; flex-wrap:wrap; min-height:0; margin-bottom:8px; }
.mod-pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:#eef2f6; border:1px solid #e2e8f0; font-weight:700; font-size:12px; color:#0f172a; }
.mod-pill button{ border:0; background:transparent; padding:0 0 0 2px; line-height:1; }
.counter-badge{ background:#9c2323; color:#fff; font-weight:700; font-size:12px; border-radius:999px; padding:4px 8px; }

.mod-panel{ display:none; position:relative; z-index:5; background:#fff; border:1px solid #e9edf2; border-radius:14px; box-shadow:0 24px 56px rgba(0,0,0,.10); padding:10px; margin-top:8px; }
.mod-panel.open{ display:block; }
.mod-panel-head{ display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.mod-panel .btn-group .btn{ border-radius:10px; }
.mod-list{ max-height:240px; overflow:auto; border:1px solid #eef2f6; border-radius:10px; padding:10px; }
.mod-list ul{ list-style:none; margin:0; padding:0; columns:2; column-gap:24px; }
.mod-list li{ break-inside:avoid; margin:6px 0; }
.mod-list input{ margin-right:8px; }

.mod-trigger{ cursor:pointer; }

/* ===== Get In Touch — match global section title styling ===== */
.getintouch-v3 .section-heading { margin: 0 auto 28px !important; max-width: 900px; }
.getintouch-v3 .section-heading h6{
  margin:0 0 6px !important;
  font-size:.9rem !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  color:#800000 !important; /* same muted kicker tone */
}
.getintouch-v3 .section-heading h4{
  margin:0 !important;
  font-weight:800 !important;
  color:#0f172a !important;
  line-height:1.25 !important;
}
.getintouch-v3 .section-heading h4 em{
  color:#800000 !important;   /* your red accent */
  font-style:normal !important;
}
.getintouch-v3 .section-heading .line-dec{
  width:64px;height:3px;background:#800000;border-radius:2px;
  margin:10px auto 0 !important;
}
.getintouch-v3 .section-heading p{ text-align:center !important; }

/* Lower the whole Get in Touch section relative to the previous section */
#get-in-touch.getintouch-v3 { 
  margin-top: 6560px; /* tweak 40–100px to taste */
}

/* (Optional) If you only want the heading block to sit lower inside the section */
.getintouch-v3 .section-heading {
  margin-top: 30px !important;
}


/* -------- Section spacing so it doesn't sit too close to Solution -------- */
#insights.section { padding-top: 10px !important; padding-bottom: 10px !important; position: relative; overflow: hidden; }
#insights.section::before{
  content:""; position:absolute; inset:auto -20% -60% -20%;
  height:60%; background:radial-gradient(60% 60% at 50% 0%, rgba(0,163,157,.08), transparent 60%); pointer-events:none;
}

/* -------- Cards (override previous .figure-card look) -------- */
#insights .figure-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:18px;
  padding:22px 18px; box-shadow:0 18px 40px rgba(0,0,0,.06);
  transition:transform .45s ease, box-shadow .45s ease, background .45s ease;
  transform: translateY(14px); opacity:.0;
}
#insights .figure-card.reveal{ transform:none; opacity:1; }
#insights .figure-card:hover{ box-shadow:0 22px 60px rgba(0,0,0,.10); background:linear-gradient(180deg,#fff, #fafafa); }

/* -------- Big gradient numbers (override .counter appearance) -------- */
#insights .figure-number{ line-height:1; margin-bottom:8px; }
#insights .figure-number .counter{
  display:inline-block; font-weight:900; font-size:48px; letter-spacing:.5px;
  background:linear-gradient(180deg,#0ea5e9,#2563eb); -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:100% 200%; background-position:50% 0%;
  transition:background-position .8s ease;
}
#insights .figure-card:nth-child(2) .counter{ background-image:linear-gradient(180deg,#06b6d4,#0ea5e9); }
#insights .figure-card:nth-child(3) .counter{ background-image:linear-gradient(180deg,#6d28d9,#3b82f6); }
#insights .figure-card:nth-child(4) .counter{ background-image:linear-gradient(180deg,#ef4444,#f97316); }

#insights .figure-card.reveal .counter{ background-position:50% 100%; } /* subtle “sheen” on reveal */
#insights .figure-caption{ font-size:13px; opacity:.8; }

/* -------- Responsive tweaks -------- */
@media (max-width: 992px){ #insights .figure-number .counter{ font-size:44px; } }
@media (max-width: 576px){ #insights .figure-number .counter{ font-size:38px; } }




.hrsc-navv3__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hrsc-navv3__menu {
  display: flex;
  gap: 2rem;
  margin: 0 auto; /* centers the nav links between logo and button */
}

/* ===================== ABOUT v11 (overrides) ===================== */
:root{
  --ink:#0b1220; --muted:#556070; --hair:#e9edf2;
  --brand:#0d8e82; --maroon:#9c2323; --navy:#0d2a6a; --orange:#ff7a18;
}

/* section backdrop */
.aboutv11{
  position:relative;
  background:#fff url("assets/images/aboutusbackground.png") right top/cover no-repeat;
  scroll-margin-top:96px;
}
.aboutv11-wrap{ position:relative; z-index:1 }

/* tabs */
.aboutv11-tabs{display:flex; gap:10px; justify-content:center; margin-top:6px}
.aboutv11-tab{
  border:1px solid var(--hair); background:#fff; color:#111; font-weight:800;
  padding:10px 14px; border-radius:999px; cursor:pointer;
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.aboutv11-tab:hover{transform:translateY(-1px)}
.aboutv11-tab.is-active{background:#0f172a; color:#fff; border-color:#0f172a}

/* panes */
.aboutv11-panes{margin-top:12px}
.aboutv11-pane{opacity:0; transform:translateY(10px); transition:opacity .35s ease, transform .35s ease}
.aboutv11-pane.is-active{opacity:1; transform:none}

/* STORY */
.about-main{padding:8px 2px}
.about-main .tagline{
  white-space:nowrap;            /* keep inline on wide screens */
  margin:0 0 8px; font-weight:900; line-height:1.05;
  font-size: clamp(32px, 5.2vw, 54px);
  letter-spacing:-.02em;
}
.about-main .tagline span{color:var(--maroon)}
.about-main .lede{color:#475569; font-size:1.06rem}

/* VMV blocks — refined headings */
.vmv-grid{display:grid; grid-template-columns:1fr; gap:14px; margin-top:10px}
.vmv-block{border-radius:16px; padding:14px 16px; background:#fff; border:1px solid #eef1f5}
.vmv-head{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px;
  background:#f2f5f9; border:1px solid #e4eaf1; font-weight:900; letter-spacing:.02em;
  text-transform:uppercase; font-size:.72rem; color:#0f172a;
}
.chip-vision{border-color:#dbeafe; background:#eef6ff}
.chip-mission{border-color:#ccfbf1; background:#e6fffb}
.chip-core{border-color:#fee2e2; background:#fff1f2}
.vmv-head .rule{flex:1;height:2px;background:#eef1f5;border-radius:2px}

.vmv-list{list-style:none; margin:0; padding:0}
.vmv-list li{position:relative; padding-left:28px; color:#475569}
.vmv-list li + li{margin-top:6px}
/* crisp, coloured check bullets */
.vmv-list li::before{
  content:""; position:absolute; left:0; top:3px; width:18px; height:18px; border-radius:6px;
  background:#0f172a;
  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath fill=%27white%27 d=%27M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z%27/%3E%3C/svg%3E") center/18px 18px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath fill=%27white%27 d=%27M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z%27/%3E%3C/svg%3E") center/18px 18px no-repeat;
  opacity:.92;
}
.v-vision  .vmv-list li::before{background:#2563eb}
.v-mission .vmv-list li::before{background:#0d8e82}
.v-core    .vmv-list li::before{background:#e11d48}

/* Years badge — clean, no gradient/no card */
.years-badge{
  display:flex; align-items:baseline; gap:10px; margin-top:12px;
}
.years-badge .num{
  font-weight:900; line-height:1;
  font-size: clamp(34px, 6vw, 64px);
  letter-spacing:-.02em;
  color:#0f172a;
  text-shadow: 0 1px 0 rgba(0,0,0,.02);
  border-bottom:4px solid #0f172a; padding-bottom:2px;
}
.years-badge .txt{font-weight:800; color:#1f2937}

/* Product PHONE cards */
.phone-card{
  position:relative; border-radius:20px; padding:14px 12px 12px;
  overflow:hidden; margin-bottom:16px; color:#fff;
  box-shadow:0 22px 60px rgba(0,0,0,.12); border:1px solid rgba(255,255,255,.12);
}
.pc-head h6{margin:0 0 8px; font-weight:900; letter-spacing:.02em}
.pc-access{ background:linear-gradient(135deg,#0ea5e9, #0d8e82) }
.pc-cico  { background:linear-gradient(135deg,#ff7a18, #ef4444) }
.phone-card .orb{position:absolute;border-radius:50%;filter:blur(24px);opacity:.35;pointer-events:none}
.phone-card .orb.a{width:300px;height:300px;background:#fff;left:-120px;top:-120px}
.phone-card .orb.b{width:300px;height:300px;background:#fff;right:-120px;bottom:-120px}
.pc-phones{display:flex; gap:10px; align-items:center}
.pc-frame{
  width:calc(33.33% - 6.7px); aspect-ratio:9/19; border-radius:18px;
  background:#000; object-fit:cover; border:2px solid rgba(255,255,255,.25);
  box-shadow:0 18px 48px rgba(0,0,0,.35); opacity:.25; transform:translateY(8px);
  transition:opacity .45s ease, transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}
.pc-frame.is-on{opacity:1; transform:none; border-color:#fff; box-shadow:0 26px 64px rgba(0,0,0,.45)}

/* Big Apps browser */
.apps-browser{
  background:#fff; border:1px solid #e9edf2; border-radius:18px;
  box-shadow:0 20px 56px rgba(0,0,0,.08); overflow:hidden;
}
.apps-browser .chrome{
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  background:linear-gradient(180deg,#f6f7fb,#eef1f6); border-bottom:1px solid #e9edf2
}
.apps-browser .dots span{display:inline-block;width:10px;height:10px;border-radius:50%;background:#e57373}
.apps-browser .dots span:nth-child(2){background:#ffd166}
.apps-browser .dots span:nth-child(3){background:#81c784}
.apps-browser .title{font-weight:800; color:#111}
.apps-browser .screen{ position:relative; aspect-ratio: 16/9; background:#fff }
.apps-browser .screen .shot{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:0;
  transition:opacity .6s ease
}
.apps-browser .screen .shot.is-on{opacity:1}
.apps-browser .thumbs{display:flex; gap:8px; justify-content:center; padding:10px; background:#f8fafc; border-top:1px solid #e9edf2}
.apps-browser .thumbs button{width:10px;height:10px;border-radius:50%;border:0;background:#c7d0db;cursor:pointer}
.apps-browser .thumbs button.is-on{background:#0f172a}

/* CEO message — upgraded styling */
.ceo-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:#fff; border:1px solid #e9edf2; border-radius:18px; padding:16px;
  box-shadow:0 18px 42px rgba(0,0,0,.06)
}
.ceo-card .avatar{width:200px;height:200px;object-fit:cover;border-radius:50%;box-shadow:0 16px 36px rgba(0,0,0,.10)}
.ceo-card .who{margin-top:10px}
.ceo-card .who strong{display:block}
.ceo-card .who span{color:#6b7280;font-weight:600}

.ceo-canvas{
  position:relative; background:#fff; border:1px solid #e9edf2; border-radius:18px; overflow:hidden;
  box-shadow:0 22px 56px rgba(0,0,0,.08);
  padding:18px 18px 16px 24px;
}
.ceo-canvas .left-bar{position:absolute; left:0; top:0; bottom:0; width:6px; background:linear-gradient(180deg,#0d8e82,#9c2323)}
.ceo-canvas .qmark{
  position:absolute; right:12px; top:-8px; font-size:120px; line-height:1; color:rgba(13,142,130,.08); font-weight:900; pointer-events:none;
}
.ceo-canvas .copy p{color:#334155; margin:0 0 10px}
.ceo-canvas .copy a{color:#0d8e82; font-weight:700}
.ceo-canvas .copy .sign{font-weight:900; color:#0f172a}

/* responsive tweak: allow tagline to wrap only on small screens */
@media (max-width: 680px){
  .about-main .tagline{white-space:normal}
}
/* =================== ABOUT v11 — TUNE-UP (no HTML changes needed) =================== */

/* 1) Tagline: keep inline but shrink a notch so it won’t collide with the right visuals */
.aboutv11 .about-main .tagline{
  white-space:nowrap;
  font-size: clamp(30px, 4.2vw, 40px); /* was up to 54px */
  margin-bottom: 10px;
}

/* 2) “25+ years” — no card, no underline; bolder, coloured type */
.aboutv11 .years-badge{
  margin: 14px 0 6px;
  padding: 0;                        /* remove pill look */
}
.aboutv11 .years-badge .num{
  color: #9c2323;                    /* brand maroon (or swap to #0d8e82 if you prefer) */
  border: none;                      /* kill underline */
  text-shadow: none;
  font-size: clamp(36px, 6.2vw, 60px);
}
.aboutv11 .years-badge .txt{
  color:#0f172a; font-weight:800; opacity:.9;
}

/* 3) Vision/Mission/Core pills: stronger, colourful pills with white text */
.aboutv11 .chip{ color:#fff; border: none; letter-spacing:.04em }
.aboutv11 .chip-vision { background:#2563eb; }   /* blue */
.aboutv11 .chip-mission{ background:#0d8e82; }   /* teal */
.aboutv11 .chip-core   { background:#e11d48; }   /* rose */
.aboutv11 .vmv-block{ border-color:#e9edf2; box-shadow:0 10px 24px rgba(0,0,0,.04) }
.aboutv11 .vmv-head .rule{ background:#eef1f6 }

/* bullets a touch bigger so they pop with the new colour pills */
.aboutv11 .vmv-list li::before{ width:20px; height:20px; top:2px }

/* 4) Big dashboards block: reduce overall size & tighten */
.aboutv11 .apps-browser{
  max-width: 980px;                 /* was full width */
  margin: 10px auto 0;
  box-shadow: 0 18px 44px rgba(0,0,0,.07);
}
.aboutv11 .apps-browser .screen{ aspect-ratio: 16/9; }
.aboutv11 .apps-browser .screen .shot{ object-fit: contain }

/* 5) CEO: remove gradient/“cardy” feel, bigger copy, avatar not inside a card */
.aboutv11 .ceo-card{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.aboutv11 .ceo-card .avatar{
  width: 220px; height: 220px; border-radius: 50%;
  border: 6px solid #fff;
  box-shadow: 0 24px 60px rgba(0,0,0,.14);
}
.aboutv11 .ceo-card .who strong{ font-size: 1.05rem }
.aboutv11 .ceo-card .who span{ font-size:.95rem }

.aboutv11 .ceo-canvas{
  background:#fff;
  border:1px solid #e9edf2;
  box-shadow: 0 22px 56px rgba(0,0,0,.08);
  padding: 26px 26px 22px 30px;      /* larger breathing room */
}
.aboutv11 .ceo-canvas .left-bar{
  width: 8px; background:#0f172a;    /* solid, no gradient */
}
.aboutv11 .ceo-canvas .qmark{
  top:-16px; right:14px; font-size: 150px; color: rgba(15,23,42,.06);
}
.aboutv11 .ceo-canvas .copy p{ 
  font-size: 1.06rem; line-height: 1.75; color:#1f2937;
}
.aboutv11 .ceo-canvas .copy .sign{ 
  font-size: 1.05rem; margin-top: 8px;
}

/* 6) Tabs: prettier, colourful pills with subtle background motif */
.aboutv11 .aboutv11-tabs{
  position:relative; z-index:2; gap:12px;
}
.aboutv11 .aboutv11-tabs::before{
  content:""; position:absolute; inset:-14px 0 -8px 0; z-index:-1;
  background:
    radial-gradient(600px 120px at 30% 100%, rgba(13,142,130,.08), transparent 60%),
    radial-gradient(600px 120px at 70% 0%,   rgba(156,35,35,.08),  transparent 60%);
  border-radius: 18px;
}
.aboutv11 .aboutv11-tab{
  background:#0f172a; color:#fff; border:0;
  padding: 10px 16px; font-weight:900; border-radius: 999px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.08);
  position:relative; overflow:hidden;
}
.aboutv11 .aboutv11-tab::after{
  content:""; position:absolute; inset:0; opacity:.18;
  background: linear-gradient(135deg, #0d8e82, #9c2323);
  mix-blend-mode: screen;
}
.aboutv11 .aboutv11-tab.is-active{
  background:#0d8e82; box-shadow: 0 16px 34px rgba(13,142,130,.25);
}
.aboutv11 .aboutv11-tab.is-active::after{ opacity:.0 }

/* small spacing polishes */
.aboutv11 .about-main{ padding-top: 4px }
.aboutv11 .phone-card{ margin-bottom: 14px }
.aboutv11 .pc-phones .pc-frame{ border-radius: 20px }

/* mobile fallback: allow headline to wrap sooner so nothing overlaps */
@media (max-width: 860px){
  .aboutv11 .about-main .tagline{ white-space: normal }
}


/* === PATCH v12 === */

/* 1) Tabs — no gradient band + extra breathing room */
.aboutv11 .aboutv11-tabs::before {
  display: none !important;  /* kill the gradient motif */
}
.aboutv11 .aboutv11-tabs {
  margin-bottom: 28px;       /* space below buttons */
}
/* === PATCH v13 === */
/* === PATCH v14 === */

/* Center inline "25+ years delivering HR solutions" */
.aboutv11 .years-badge {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  margin: 30px auto;          /* center block under Core Values */
  padding: 0 !important;
  text-align: center;
  display: block;
}

.aboutv11 .years-badge .num {
  color: #0d8e82;             /* teal highlight */
  font-size: clamp(38px, 6vw, 62px);
  font-weight: 900;
  line-height: 1.2;
  display: inline-block;
  margin-right: 10px;
}

.aboutv11 .years-badge .txt {
  color: #0f172a;
  font-weight: 700;
  font-size: 1.5rem;
  display: inline-block;
  vertical-align: baseline;
}

.benefit-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
}

.benefit-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}
  .key-benefits-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    margin-top: 40px;
  }
  
  .key-benefits-grid .benefit-item {
    background-color: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    max-width: 320px;
    flex: 1 1 280px;
    text-align: center;
  }
  
  .key-benefits-grid .benefit-item img {
    width: 200px;
    height: auto;
    margin-bottom: 20px;
  }
  
  .key-benefits-grid .benefit-item h5 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #1a1a1a;
  }
  
  .key-benefits-grid .benefit-item p {
    font-size: 14px;
    color: #555;
  }

  .key-benefits-grid img {
  width: 100px;
  max-width: 100%;
  margin-bottom: 20px;
}
.benefit-item:nth-child(n+4) {
  margin-top: 30px;
}

.counter {
  transition: color 0.8s ease-in-out;
  color: #222;
  font-weight: bold;
}
  .counter.count-finished {
    color: #8b0000; /* dark red when done */
  }
  
/* ================= INSIGHTS & FIGURES — Harmonize with site (v20) ================= */

/* 1) Section spacing + remove the “special” background so it matches others */
#insights.section{
  margin-top: 48px !important;     /* distance from About */
  padding: 56px 0 72px !important; /* similar to other sections */
  background: #fff !important;
}
#insights.section::before,
#insights.section::after{ display:none !important; }  /* kill orbs/gradients from earlier */

/* 2) Heading = same treatment as other sections */
#insights .section-heading{ padding:0 !important; margin:0 0 28px !important; }
#insights .section-heading h6{
  text-transform:uppercase; letter-spacing:.08em; font-weight:800;
  color:#6b7280; margin-bottom:8px;
}
#insights .section-heading h4{
  font-weight:900; color:#0f172a; margin:0;
}
#insights .section-heading .line-dec{
  width:56px; height:3px; margin:14px auto 0; border-radius:2px;
  background:#9c2323; /* same red accent used elsewhere */
}

/* 3) Cards — clean white, subtle shadow, slim coloured top bar (no big gradients) */
#insights .figure-card{
  position:relative; background:#fff; color:#0f172a;
  border:1px solid #e9edf2; border-radius:18px;
  padding:28px 18px 24px; height:100%;
  box-shadow:0 14px 34px rgba(0,0,0,.06);
  transition:transform .2s ease, box-shadow .25s ease, border-color .25s ease;
  overflow:hidden;
}
/* slim top bar */
#insights .figure-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:6px; border-radius:18px 18px 0 0;
  background:#0d8e82; /* default teal */
}
/* per-card accent (muted, corporate) */
#insights #figures > div:nth-child(1) .figure-card::before{ background:#0d8e82; } /* teal */
#insights #figures > div:nth-child(2) .figure-card::before{ background:#1f50c8; } /* blue */
#insights #figures > div:nth-child(3) .figure-card::before{ background:#7c3aed; } /* purple */
#insights #figures > div:nth-child(4) .figure-card::before{ background:#c0362b; } /* maroon/orange */

#insights .figure-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0,0,0,.10);
  border-color: rgba(13,142,130,.25);
}

/* 4) Numbers & captions — strong but not shouty */
#insights .figure-number{ line-height:1; margin-bottom:8px; }
#insights .figure-number .counter{
  display:inline-block; font-weight:900;
  font-size: clamp(34px, 4.2vw, 52px);
  color:#0f172a;
}
#insights .figure-caption{
  font-size: .98rem; font-weight:600; color:#334155; line-height:1.35;
}

/* 5) Grid spacing */
#insights #figures{ row-gap: 20px !important; }

/* 6) Optional: soften the dots/indicators if any template adds them above the section */
#insights .swiper-pagination,
#insights .dots{ display:none !important; }
  
  /* ================= INSIGHTS & FIGURES — EMPHASIZED BAND (v21) ================= */

/* spacing & clean base */
#insights.section{
  position:relative;
  margin-top:72px !important;
  padding:56px 0 84px !important;
  background:#fff !important;
  overflow:hidden;
}

/* ---- header: match site style exactly, but keep <em> red accent ---- */
#insights .section-heading{padding:0 !important; margin:0 0 26px !important;}
#insights .section-heading h6{
  text-transform:uppercase; letter-spacing:.08em;
  color:#6b7280; font-weight:800; margin:0 0 8px;
}
#insights .section-heading h4{
  margin:0; font-weight:900; color:#0f172a;
}
#insights .section-heading h4 em{ color:#9c2323; font-style:normal; }
#insights .section-heading .line-dec{
  width:56px;height:3px;margin:14px auto 0;background:#9c2323;border-radius:2px;
}

/* ---- stat band (turn the four cards into bold tiles) ---- */
#insights #figures{ row-gap:22px !important; }

/* tile */
#insights .figure-card{
  border:0 !important; border-radius:22px !important;
  padding:28px 22px 22px !important; height:100% !important;
  color:#fff !important; text-align:center !important;
  box-shadow:0 22px 54px rgba(0,0,0,.20) !important;
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

/* Animate stat cards one by one */
#insights .figure-card {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.7s ease;
}

#insights .figure-card.show {
  opacity: 1;
  transform: translateY(0);
}

/* bold gradients per tile */
#insights #figures > div:nth-child(1) .figure-card{
  background: linear-gradient(135deg,#2563eb 0%,#1e40af 100%);
}
#insights #figures > div:nth-child(2) .figure-card{
  background: linear-gradient(135deg,#10b981 0%,#0f766e 100%);
}
#insights #figures > div:nth-child(3) .figure-card{
  background: linear-gradient(135deg,#8b5cf6 0%,#4c1d95 100%);
}
#insights #figures > div:nth-child(4) .figure-card{
  background: linear-gradient(135deg,#ef4444 0%,#b91c1c 100%);
}

/* lift on hover */
#insights .figure-card:hover{
  transform: translateY(-8px);
  box-shadow:0 30px 80px rgba(0,0,0,.28);
  filter: saturate(1.05);
}

/* number + caption */
#insights .figure-number{line-height:1;margin:0 0 6px;}
#insights .figure-number .counter{
  display:inline-block; font-weight:1000;
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing:.5px; text-shadow:0 3px 12px rgba(0,0,0,.35);
  color:#fff !important;               /* override any previous gradient text */
}
#insights .figure-caption{
  font-size:1rem; font-weight:700; line-height:1.3; color:#f8fafc !important;
  opacity:.95;
}

/* optional subtle inner sheen */
#insights .figure-card::after{
  content:""; position:absolute; inset:0 0 auto 0; height:48%;
  background:linear-gradient(180deg,rgba(255,255,255,.25),transparent 60%);
  border-top-left-radius:22px;border-top-right-radius:22px; pointer-events:none;
}

/* responsive nudge */
@media (max-width: 576px){
  #insights.section{padding:48px 0 72px !important;}
  #insights .figure-number .counter{ font-size:40px; }
}
  /* NEWS CARD CONTAINER */
.news-card {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
  position: relative;
}

/* HOVER STATE */
.news-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* IMAGE ANIMATION */
.news-card img {
  height: 160px;
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.4s ease;
}

.news-card:hover img {
  transform: scale(1.05);
}

/* GLOW RING BASED ON BORDER COLOR */
.news-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  transition: box-shadow 0.3s ease;
  z-index: 0;
}

.news-card:hover::before {
  box-shadow: 0 0 16px rgba(63, 114, 175, 0.25); /* default bluish glow */
}

/* OVERRIDE glow color using border-color */
.news-card[style*="#D72638"]:hover::before {
  box-shadow: 0 0 16px rgba(215, 38, 56, 0.25);
}
.news-card[style*="#28A745"]:hover::before {
  box-shadow: 0 0 16px rgba(40, 167, 69, 0.25);
}
.news-card[style*="#F0A500"]:hover::before {
  box-shadow: 0 0 16px rgba(240, 165, 0, 0.25);
}
.news-card[style*="#6F42C1"]:hover::before {
  box-shadow: 0 0 16px rgba(111, 66, 193, 0.25);
}

/* Layering content above glow */
.news-card > * {
  position: relative;
  z-index: 1;
}

/* Badge styling */
.news-section .badge {
  font-size: 0.75rem;
  padding: 0.5em 0.75em;
  border-radius: 12px;
}

/* ===== HRSC Nav v2 – fully namespaced ===== */
:root{
  --hrsc-maroon:#800000;
  --hrsc-ink:#101426;
  --hrsc-muted:#6b7280;
  --hrsc-glass-bg: rgba(255,255,255,.72);
  --hrsc-blur: 10px;
  --hrsc-shadow: 0 10px 30px rgba(16,20,38,.08);
  --hrsc-radius: 16px;
}

/* Lower the device stage so it doesn't clip the title */
.device-duo--lower { margin-top: 18px; }

/* Colored card borders using tones (subtle but confident) */
.sv8-card--tone{
  position: relative;
  border:1px solid var(--tone-border,#e9edf2);
  background: linear-gradient(180deg,var(--tone-bg1,#fff),var(--tone-bg2,#fff));
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
}
.sv8-card--tone::before{
  /* thin left accent bar */
  content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:4px;
  border-radius: 8px 0 0 8px; background: var(--tone-accent,#0d8e82);
}

/* tone palettes */
.sv8-t-blue  { --tone-border:#cfe2ff; --tone-bg1:#f7fbff; --tone-bg2:#eef6ff; --tone-accent:#2b6cb0; }
.sv8-t-teal  { --tone-border:#bfeee6; --tone-bg1:#f6fffd; --tone-bg2:#ebfbf6; --tone-accent:#0d8e82; }
.sv8-t-purple{ --tone-border:#d7ccff; --tone-bg1:#faf7ff; --tone-bg2:#f1ecff; --tone-accent:#6d28d9; }
.sv8-t-red   { --tone-border:#ffc7cd; --tone-bg1:#fff7f7; --tone-bg2:#ffeded; --tone-accent:#e11d48; }

/* 24/7 pops: focus ring + glow + ribbon */
.sv8-pop{
  box-shadow: 0 24px 60px rgba(225,29,72,.18), 0 6px 16px rgba(0,0,0,.06);
  border-color:#ffb4bf;
}
.sv8-pop::after{
  content:""; position:absolute; inset:-2px; border-radius:20px;
  box-shadow: 0 0 0 3px rgba(225,29,72,.18) inset;
  pointer-events:none;
}
.sv8-ribbon{
  position:absolute; top:12px; right:-10px;
  background:linear-gradient(180deg,#ff4d6d,#e11d48);
  color:#fff; font-weight:800; font-size:10px; letter-spacing:.06em;
  padding:4px 8px; border-radius:6px; transform:rotate(6deg);
  box-shadow:0 6px 16px rgba(225,29,72,.35);
}

/* Cloud Hosting: floating partner badges that overlap the card */
.sv8-cloud{ padding-bottom: 46px; } /* space for badges */
.sv8-host-badges{
  position:absolute; right:16px; bottom:-18px; display:flex; gap:10px; z-index:2;
}
.sv8-host-badges .host{
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid #e9edf2; border-radius:999px;
  padding:6px 10px; box-shadow:0 10px 28px rgba(0,0,0,.08);
}
.sv8-host-badges img{ height:20px; width:auto; object-fit:contain; }
.sv8-host-badges span{ font-size:12px; font-weight:700; color:#0f172a; }

/* Device polish (thinner frames) */
.laptop .lid{ border:1px solid rgba(255,255,255,.12); box-shadow:0 18px 48px rgba(0,0,0,.22); }
.laptop .screen{ inset:14px; border-radius:8px; background:#111; }
.phone .shell{ border:1px solid rgba(255,255,255,.12); box-shadow:0 22px 70px rgba(0,0,0,.32); }
.phone .screen{ inset:20px; }



/* ===================== OUR MODULES — HARD OVERRIDE ===================== */
.ep2p-modules{ padding: 32px 0 24px; background:#fff; }
.ep2p-modules .line-dec{ width:64px; height:3px; background:#800000; border-radius:2px; margin:10px auto 0; }

/* Single grid: always 5 per row on desktop */
.ep2p-modules .modgrid{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0,1fr)) !important;
  gap:22px !important;
  max-width:1200px;
  margin: 14px auto 0;
  padding: 0 12px;
}

/* Reset any legacy Bootstrap/Flex sizing */
.ep2p-modules .mod{ all:unset; }
.ep2p-modules .mod{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:170px !important;
  background:#fff;
  border:1px solid #e9edf2;
  border-radius:18px;
  box-shadow:0 14px 34px rgba(0,0,0,.06);
  padding:18px 10px 14px;
  text-align:center;
  transition:transform .18s ease, box-shadow .18s ease;
}
.ep2p-modules .mod:hover{ transform:translateY(-4px); box-shadow:0 22px 48px rgba(0,0,0,.10); }

.ep2p-modules .mod .image{
  width:72px; height:72px; border-radius:16px;
  display:grid; place-items:center;
  color:#fff; margin-bottom:10px;
}
.ep2p-modules .mod .image img{ width:44px; height:44px; object-fit:contain; }
.ep2p-modules .mod .image svg{ width:44px; height:44px; }
.ep2p-modules .mod .image span{ font-weight:900; font-size:28px; }

/* Label text */
.ep2p-modules .mod h4{
  margin:8px 6px 0; font-size:13px; line-height:1.35; color:#111827;
}

/* ---- Color mapping (main modules) ---- */
.module-employee   .image{ background:#0066cc !important; }
.module-payroll    .image{ background:#e91e63 !important; }
.module-compensation .image{ background:#4caf50 !important; }
.module-training   .image{ background:#ff9800 !important; }
.module-performance.image, .module-performance .image{ background:#9c27b0 !important; }

.module-industrial .image{ background:#3f51b5 !important; }
.module-position   .image{ background:#009688 !important; }
.module-leave      .image{ background:#795548 !important; }
.module-time       .image{ background:#f44336 !important; }
.module-development .image{ background:#8bc34a !important; }
.module-recruitment .image{ background:#00bcd4 !important; }
.module-form       .image{ background:#607d8b !important; }
.module-attendance .image{ background:#673ab7 !important; }
.module-application .image{ background:#0099cc !important; }
.module-loan       .image{ background:#ff2d6a !important; } /* loan color */

/* e* modules: tint to match their parent color (lighter, but same family) */
.mod.e .image{ filter:saturate(0.92) brightness(1.05); }

/* ---- Responsive: keep grid usable on small screens ---- */
@media (max-width: 1200px){ .ep2p-modules .modgrid{ grid-template-columns:repeat(4,1fr) !important; } }
@media (max-width: 992px){  .ep2p-modules .modgrid{ grid-template-columns:repeat(3,1fr) !important; } }
@media (max-width: 768px){  .ep2p-modules .modgrid{ grid-template-columns:repeat(2,1fr) !important; } }
@media (max-width: 520px){  .ep2p-modules .modgrid{ grid-template-columns:1fr !important; } }

/* make anchor targets not hide behind sticky bar */
#top, #about, #solution, #services, #choose, #news, #contact{ scroll-margin-top: 92px; }

.hrsc-navv2{
  position: sticky; top: 0; z-index: 9999;
  background: transparent; backdrop-filter: blur(var(--hrsc-blur));
  transition: all .25s ease;
}
.hrsc-navv2::before{
  content:""; position:absolute; inset:0;
  background: var(--hrsc-glass-bg);
  box-shadow: var(--hrsc-shadow);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.hrsc-navv2__inner{
  position: relative;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; padding:14px 18px; max-width:1200px; margin:0 auto;
}
.hrsc-navv2__brand img{ height:40px; display:block; }

/* menu */
.hrsc-navv2__menu{
  display:flex; align-items:center; gap:22px;
}
.hrsc-navv2__link{
  position:relative; display:inline-block;
  padding:10px 2px; font-weight:500;
  color:var(--hrsc-ink); text-decoration:none;
  transition: color .2s ease;
}
.hrsc-navv2__link:hover{ color: var(--hrsc-maroon); }
.hrsc-navv2__link.is-active{ color: var(--hrsc-maroon); }
.hrsc-navv2__link::after{
  content:""; position:absolute; left:0; bottom:6px; height:2px; width:0%;
  background:linear-gradient(90deg, var(--hrsc-maroon), #c03);
  border-radius:3px; transition:width .25s ease;
}
.hrsc-navv2__link:hover::after, .hrsc-navv2__link.is-active::after{ width:100%; }

/* CTA button */
/* CTA button */
.hrsc-navv2__cta{
  margin-left:8px; 
  padding:10px 16px; 
  border-radius:999px;
  background: #0d8e82;   /* updated color */
  color:#fff; 
  text-decoration:none; 
  font-weight:600;
  box-shadow: 0 6px 14px rgba(13,142,130,.25); /* teal shadow */
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.hrsc-navv2__cta:hover{
  background:#0b7a71;  /* slightly darker teal on hover */
  transform:translateY(-1px); 
  box-shadow:0 10px 18px rgba(13,142,130,.35);
}
.hrsc-navv2__cta:active{ 
  transform:translateY(0); 
}
/* mobile */
.hrsc-navv2__toggle{
  display:none; position:relative; width:42px; height:42px; border:0; border-radius:10px;
  background:#ffffff; box-shadow: var(--hrsc-shadow);
}
.hrsc-navv2__toggle span{
  position:absolute; left:10px; right:10px; height:2px; background:#222; transition:transform .25s, top .25s, opacity .2s;
}
.hrsc-navv2__toggle span:nth-child(1){ top:13px; }
.hrsc-navv2__toggle span:nth-child(2){ top:20px; }
.hrsc-navv2__toggle span:nth-child(3){ top:27px; }
.hrsc-navv2__toggle[aria-expanded="true"] span:nth-child(1){ top:20px; transform:rotate(45deg); }
.hrsc-navv2__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hrsc-navv2__toggle[aria-expanded="true"] span:nth-child(3){ top:20px; transform:rotate(-45deg); }

@media (max-width: 992px){
  .hrsc-navv2__toggle{ display:block; }
  .hrsc-navv2__menu{
    position:absolute; left:12px; right:12px; top:calc(100% + 8px);
    flex-direction:column; gap:4px; padding:12px;
    background:#fff; border-radius:14px; box-shadow: var(--hrsc-shadow);
    pointer-events:none; opacity:0; transform: translateY(-6px); transition: .22s ease;
  }
  .hrsc-navv2__menu.is-open{ pointer-events:auto; opacity:1; transform:translateY(0); }
  .hrsc-navv2__link, .hrsc-navv2__cta{ width:100%; text-align:center; padding:12px 10px; }
  .hrsc-navv2__link::after{ display:none; }
}
/* === NAV OVERRIDES (drop this after your existing CSS) === */
.header-area .main-nav .nav > li > a{
  color:#1f1f1f !important;          /* default text */
  text-decoration:none !important;
}
.header-area .main-nav .nav > li > a:hover,
.header-area .main-nav .nav > li > a:focus,
.header-area .main-nav .nav > li > a:active{
  color:#0d8e82 !important;          /* teal on hover/focus */
  text-decoration:none !important;
}
.header-area .main-nav .nav > li > a.active{
  color:#0d8e82 !important;          /* active state */
}
/* Logo sizing without distortion */
.header-area .main-nav .logo img{
  display:block;
  max-height:50px;   /* your desired cap */
  height:auto;       /* keep aspect */
  width:auto;        /* no forced stretch */
}

:root{
  --hrsc-ink:#101426;
  --hrsc-maroon:#800000;
  --hrsc-teal:#0d8e82;
  --hrsc-glass:rgba(255,255,255,.82);
  --hrsc-shadow:0 10px 30px rgba(16,20,38,.08);
  --hrsc-radius:16px;
}

/* keep anchor targets visible under sticky bar */
#top,#about,#solution,#services,#choose,#news,#contact{ scroll-margin-top: 96px; }

/* ===== NAV v3 (namespaced, overrides old styles) ===== */
.hrsc-navv3{
  position: sticky; top:0; z-index:9999;
  backdrop-filter: blur(10px);
}
.hrsc-navv3::before{
  content:""; position:absolute; inset:0;
  background: var(--hrsc-glass);
  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow: var(--hrsc-shadow);
}
.hrsc-navv3__inner{
  position:relative; max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; gap:20px;
}

/* brand logo — never stretched */
.hrsc-navv3__brand img{
  display:block;
  max-height:50px;   /* cap height */
  height:auto;       /* keep aspect */
  width:auto;        /* don't force width */
}
/* target only the solution section bullet text */
#solution .sv-bullets li {
  font-size: 1.1rem;   /* try 1.1–1.2rem for bigger font */
  line-height: 1.6;   /* spacing between lines */
  margin-bottom: 6px; /* add a little breathing room */
}
/* menu */
.hrsc-navv3__menu{
  display:flex; align-items:center; gap:22px;
}
.hrsc-navv3__link{
  position:relative; display:inline-block;
  padding:10px 2px; font-weight:500;
  color:var(--hrsc-ink) !important;  /* kill default blue */
  text-decoration:none !important;
  transition:color .2s ease;
}
.hrsc-navv3__link:hover,
.hrsc-navv3__link:focus{
  color:var(--hrsc-maroon) !important;
}
.hrsc-navv3__link.is-active{
  color:var(--hrsc-maroon) !important;
}
.hrsc-navv3__link::after{
  content:""; position:absolute; left:0; bottom:6px; height:2px; width:0%;
  background:linear-gradient(90deg, var(--hrsc-maroon), #c03);
  border-radius:3px; transition:width .25s ease;
}
.hrsc-navv3__link:hover::after,
.hrsc-navv3__link.is-active::after{ width:100%; }

/* CTA button — teal */
.hrsc-navv3__cta{
  margin-left:8px; padding:10px 16px; border-radius:999px;
  background:var(--hrsc-teal) !important;  /* exact color */
  color:#fff !important; text-decoration:none !important; font-weight:600;
  box-shadow:0 6px 14px rgba(13,142,130,.25);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.hrsc-navv3__cta:hover{ background:#0b7a71 !important; transform:translateY(-1px); box-shadow:0 10px 18px rgba(13,142,130,.35); }
.hrsc-navv3__cta:active{ transform:translateY(0); }

/* mobile toggle */
.hrsc-navv3__toggle{
  display:none; position:relative; width:42px; height:42px; border:0; border-radius:10px;
  background:#fff; box-shadow: var(--hrsc-shadow);
}
.hrsc-navv3__toggle span{
  position:absolute; left:10px; right:10px; height:2px; background:#222;
  transition:transform .25s, top .25s, opacity .2s;
}
.hrsc-navv3__toggle span:nth-child(1){ top:13px; }
.hrsc-navv3__toggle span:nth-child(2){ top:20px; }
.hrsc-navv3__toggle span:nth-child(3){ top:27px; }
.hrsc-navv3__toggle[aria-expanded="true"] span:nth-child(1){ top:20px; transform:rotate(45deg); }
.hrsc-navv3__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hrsc-navv3__toggle[aria-expanded="true"] span:nth-child(3){ top:20px; transform:rotate(-45deg); }

/* responsive menu */
@media (max-width: 992px){
  .hrsc-navv3__toggle{ display:block; }
  .hrsc-navv3__menu{
    position:absolute; left:12px; right:12px; top:calc(100% + 8px);
    flex-direction:column; gap:6px; padding:12px;
    background:#fff; border-radius:14px; box-shadow: var(--hrsc-shadow);
    pointer-events:none; opacity:0; transform: translateY(-6px);
    transition: .22s ease;
  }
  .hrsc-navv3__menu.is-open{ pointer-events:auto; opacity:1; transform:translateY(0); }
  .hrsc-navv3__link, .hrsc-navv3__cta{ width:100%; text-align:center; padding:12px 10px; }
  .hrsc-navv3__link::after{ display:none; }
}

/* smooth scroll for in-page links */
html{ scroll-behavior:smooth; }

/* nuclear overrides for any legacy navbar styles you might still load */
.header-area .main-nav .nav > li > a,
.main-nav .nav a,
.header-area .logo img{
  all: unset !important;
}

/* tighten spacing in "Drop us a Message" section */
.contact-section { padding-top: 24px; } /* optional, keeps section compact */

.contact-section .section-heading {
  margin-bottom: 1.25rem !important; /* override mb-5 */
}

.contact-section .section-heading h6 { margin-bottom: .35rem; }
.contact-section .section-heading .line-dec { margin: .5rem auto 0; }

.contact-section .contact-form-row {
  margin-top: 0 !important;          /* remove any top gap before the card */
  margin-bottom: 1.75rem !important;  /* smaller bottom gap */
}

/* align the illustration and form nicely on desktop */
@media (min-width: 992px) {
  .contact-illustration { max-width: 92%; }
}
/* ===== HERO v11 ===== */
:root{
  --ink:#0b1220;
  --muted:#4b5563;
  --accent:#0d8e82;
  --overlay: rgba(0,0,0,.45);   /* solid dimmer for readability */
  --mx: 0px;                    /* parallax offsets (set by JS) */
  --my: 0px;
}

/* Full section */
.hero-v11{
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: #fff;
  scroll-margin-top: 96px; /* sticky nav offset */
  background: #e9eef2;     /* fallback before the image loads */
}

/* Background image */
.hero-v11 .hero-bg{
  position: absolute; inset: -2% -2% 0 -2%; /* bleed beyond edges for parallax */
  background: url("assets/images/ep2pcollage.png") center/cover no-repeat;
  transform: translate(var(--mx), var(--my)) scale(1.02);
  transition: transform .15s linear;
  will-change: transform;
  z-index: 0;
}

/* Dim for readable text */
.hero-v11 .hero-dim{
  position: absolute; inset: 0;
  background: var(--overlay);
  z-index: 1;
}

/* Ornaments (soft, minimal) */
.hero-orb{
  position: absolute; border-radius: 50%;
  filter: blur(12px); opacity:.18; z-index: 1;
  animation: orbFloat 10s ease-in-out infinite;
}
.hero-orb.orb-a{ width: 220px; height: 220px; background:#ffffff; top:12%; left:8%; animation-delay:0s; }
.hero-orb.orb-b{ width: 280px; height: 280px; background:#38e1cd; bottom:14%; right:10%; animation-delay:2.8s; }
.hero-orb.orb-c{ width: 140px; height: 140px; background:#ffb703; top:24%; right:20%; animation-delay:5.2s; }
@keyframes orbFloat { 0%,100%{ transform:translateY(0)} 50%{ transform:translateY(-14px)} }

/* Content wrapper (centers nicely on wide screens) */
.hero-wrap{
  position: relative; z-index: 2;
  max-width: 1280px; margin: 0 auto; padding: clamp(24px, 4vw, 56px);
  display: grid; place-items: center;
  min-height: calc(100vh - 120px);
}

/* Frosted card with stronger contrast */
.hero-card{
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.774);
  outline: 1px solid rgba(255,255,255,.25);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  border-radius: 24px;
  padding: clamp(22px, 3.2vw, 40px);
  max-width: 860px;
  text-align: left;
  color: #000000;
}

/* Header: logo + pill */
.hero-head{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.hero-badge{
  width: 40px; height: 40px; border-radius: 9px;
  background:#fff; object-fit: contain; padding: 5px;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.hero-pill{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.3px;
  background:#101827; color:#fff; border:1px solid rgba(255,255,255,.18);
  padding:6px 10px; border-radius:999px;
}

/* Title & body */
.hero-title{
  font-size: clamp(32px, 4vw, 58px);
  font-weight: 800; line-height: 1.08; margin: 6px 0 10px;
}
.hero-title span{ color:#0d9a8e; text-shadow: 0 2px 10px rgba(0,0,0,.25); }
.hero-sub{
  font-size: clamp(15px, 1.15vw, 18px);
  color: #0b3e79; margin: 0 0 18px; max-width: 60ch;
}

/* CTAs */
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 4px; }
.btn{
  display:inline-block; font-weight:700; border-radius: 12px; padding:.85rem 1.4rem;
  text-decoration:none; transition: transform .16s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary{
  color: #000000; box-shadow: 0 10px 24px rgba(13,142,130,.35);
}
.btn-primary:hover{ transform: translateY(-1px); background:#0b7a71; }
.btn-ghost{
  color:#000000; border:2px solid #000000; background: transparent;
}

/* Points */
.hero-points{
  list-style:none; padding:0; margin:14px 0 0 0;
  display:flex; flex-wrap:wrap; gap:12px 16px; font-size:14px; color:#0b3e79;
}

/* Curved divider for a smooth hand-off to white About section */
.hero-divider{
  position:absolute; left:0; right:0; bottom:-1px; height:160px; z-index: 2;
  pointer-events:none;
}
.hero-divider svg{ width:100%; height:100%; display:block; }

/* Scroll cue */
.scroll-cue{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  width:26px; height:42px; border:2px solid rgba(255,255,255,.8); border-radius:20px;
  display:grid; place-items:center; z-index:3; opacity:.85;
}
.scroll-cue span{
  display:block; width:6px; height:10px; background:#fff; border-radius:3px; animation: cue 1.4s infinite;
}
@keyframes cue{ 0%{transform:translateY(-8px); opacity:0} 40%{opacity:1} 100%{transform:translateY(8px); opacity:0} }

/* Responsive tweaks */
@media (max-width: 992px){
  .hero-wrap{ place-items: start; }
  .hero-card{ max-width: 100%; }
  .hero-orb{ opacity:.15; }
}


/* ===== Hero Animations ===== */
.animate-fade,
.animate-slide,
.animate-stagger li,
.animate-stagger a { opacity: 0; transform: translateY(20px); }

.hero-v11.loaded .animate-fade { 
  animation: fadeIn 0.9s ease forwards;
}
.hero-v11.loaded .animate-slide {
  animation: slideUp 1s ease forwards;
}
.hero-v11.loaded .delay-1 { animation-delay: 0.3s; }
.hero-v11.loaded .delay-2 { animation-delay: 0.6s; }
.hero-v11.loaded .delay-3 > * { animation: fadeUp 0.8s ease forwards; }
.hero-v11.loaded .delay-3 > *:nth-child(1){ animation-delay: 0.9s; }
.hero-v11.loaded .delay-3 > *:nth-child(2){ animation-delay: 1.1s; }
.hero-v11.loaded .delay-4 li { animation: fadeUp 0.8s ease forwards; }
.hero-v11.loaded .delay-4 li:nth-child(1){ animation-delay: 1.3s; }
.hero-v11.loaded .delay-4 li:nth-child(2){ animation-delay: 1.5s; }
.hero-v11.loaded .delay-4 li:nth-child(3){ animation-delay: 1.7s; }

/* Keyframes */
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp { from{opacity:0; transform:translateY(40px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeUp { from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }


/* ===================== SOLUTION v7 ===================== */
:root{
  --sol7-ink:#0b1220;
  --sol7-muted:#556070;
  --sol7-brand:#0d8e82;      /* change once to rebrand */
  --sol7-hair:#e9edf2;
}

/* pure white section; no transparent overlay */
.solution-v7{ position:relative; background:#fff; }

/* wrapper to widen content visually */
.solv7-wrap{ margin-top: 6px; }

/* ===== Offer grid (larger) ===== */
.solv7-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px;
}
.sv-card{
  background:#fff; border:1px solid var(--sol7-hair); border-radius:18px;
  padding:18px 18px 16px; min-height: 188px;
  box-shadow:0 18px 42px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.sv-card:hover{ transform: translateY(-4px); border-color: rgba(13,142,130,.32); box-shadow:0 26px 56px rgba(13,142,130,.16); }
.section-heading .line-dec {
  margin: 12px auto 0 auto;  /* auto left & right centers it */
  width: 60px;              /* adjust width as needed */
  height: 3px;              /* thickness */
  background: #800000;         /* color (red in your case) */
  border-radius: 2px;       /* optional, smooth edges */
}


.sv-head{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.sv-ico{ width:32px; height:32px; object-fit:contain; }
.sv-card h5{ margin:0; font-weight:800; color:#0f172a; font-size:1.1rem; }

/* custom bullets (checks) */
.sv-bullets{ list-style:none; margin:0; padding:0; color:#475569; font-size:15px; }
.sv-bullets li{ position:relative; padding-left:28px; }
.sv-bullets li + li{ margin-top:8px; }
.sv-bullets li::before{
  content:""; position:absolute; left:0; top:4px; width:16px; height:16px; border-radius:4px;
  border:2px solid #0bb39f; background:
    radial-gradient(circle at 55% 45%, #0bb39f 0 45%, transparent 46%);
  transform: rotate(-15deg);
  box-shadow: inset 0 0 0 2px #fff;
}

/* ===== Phone device (no black box) ===== */
.sv-device{
  position:relative; display:grid; place-items:center; gap:10px;
  padding:6px 0 0;
}
.phone-shell{
  position:relative; width: 260px; height: 520px; border-radius:40px;
  background:#0a0f1a; box-shadow:0 28px 80px rgba(0,0,0,.35);
  border: 2px solid rgba(255,255,255,.08);
}
.phone-shell .screen{
  position:absolute; inset:20px; border-radius:28px; overflow:hidden; background:#000;
}
.phone-shell .notch{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  width:120px; height:22px; background:#0a0f1a; border-bottom-left-radius:14px; border-bottom-right-radius:14px;
}
.phone-shell .btn-sleep{ position:absolute; right:-3px; top:120px; width:4px; height:60px; background:#202733; border-radius:2px; }
.phone-shell .btn-vol{ position:absolute; left:-3px; top:150px; width:4px; height:96px; background:#202733; border-radius:2px; }

.screen .shot{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition: opacity .6s ease;
}
.screen .shot.is-on{ opacity:1; }

.sv-chips{ display:flex; gap:8px; justify-content:center; }
.chip{
  background:#eef2f6; color:#0f172a; border:1px solid #e2e8f0;
  padding:6px 12px; border-radius:999px; font-size:12px; font-weight:800;
}

.sv-dots{ display:flex; gap:6px; justify-content:center; }
.sv-dots button{ width:8px; height:8px; border-radius:50%; border:0; background:#aab3be; }
.sv-dots button.is-on{ background:#0f172a; }

/* marquee with pills */
.sv-marquee{
  margin-top:12px; background:#fff; border:1px solid var(--sol7-hair); border-radius:12px;
  overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,.06);
}
.sv-marquee .track{
  display:flex; gap:14px; white-space:nowrap; padding:10px 14px; animation: sv-scroll 16s linear infinite;
}
.pill{
  display:inline-block; padding:8px 14px; border-radius:999px;
  background:#eef2f6; color:#0f172a; border:1px solid #e2e8f0; font-weight:800; font-size:13px;
}
@keyframes sv-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* reveal-on-scroll */
.reveal-up{ opacity:0; transform: translateY(18px); }
.reveal-up.is-in{ opacity:1; transform:none; transition: opacity .7s ease var(--d,0s), transform .7s ease var(--d,0s); }

/* responsive */
@media (max-width: 1100px){
  .solv7-grid{ grid-template-columns:1fr; }
  .sv-device{ margin-top:4px; }
}
/* ===================== eP2P Modules — Hard Reset + Layout ===================== */
.ep2p-modules{position:relative;background:#fff;padding:40px 0}
.ep2p-modules .mods-wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.ep2p-modules .mods-head{text-align:center;margin-bottom:18px}
.ep2p-modules .mods-head h6{margin:0 0 6px;font-weight:800;color:#6b7280;letter-spacing:.08em;text-transform:uppercase}
.ep2p-modules .mods-head h4{margin:0;font-weight:800;color:#0f172a}

/* Grid — 5 per row on desktop (auto wraps; last row can be 2) */
.ep2p-modules .mods-grid{
  display:grid !important;
  grid-template-columns:repeat(5,minmax(180px,1fr)) !important;
  gap:22px !important;
}

/* Card */
.ep2p-modules .mod{
  background:#fff !important;
  border:1px solid #e9edf2 !important;
  border-radius:18px !important;
  padding:22px 12px 18px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  min-height:160px !important;
  box-shadow:0 16px 36px rgba(0,0,0,.06) !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}
.ep2p-modules .mod:hover{
  transform:translateY(-4px) !important;
  border-color:rgba(13,142,130,.28) !important;
  box-shadow:0 22px 50px rgba(13,142,130,.14) !important;
}
.ep2p-modules .mod h4{
  margin:12px 0 0 !important;
  font-size:.98rem !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  color:#0f172a !important;
}

/* Icon pill */
.ep2p-modules .mod .image{
  width:74px !important;height:74px !important;
  border-radius:18px !important;
  display:grid !important;place-items:center !important;
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.35),0 6px 16px rgba(0,0,0,.10) !important;
}
.ep2p-modules .mod .image img,
.ep2p-modules .mod .image svg{
  width:44px !important;height:44px !important;display:block !important;
  color:#fff !important; /* for inline SVG */
}

/* ===== Colour mapping (parents & e-modules share colours) ===== */
.ep2p-modules .module-employee .image{background:#0066cc !important;}
.ep2p-modules .module-payroll .image{background:#e91e63 !important;}
.ep2p-modules .module-compensation .image{background:#4caf50 !important;}
.ep2p-modules .module-training .image{background:#ff9800 !important;}
.ep2p-modules .module-performance .image{background:#9c27b0 !important;}
.ep2p-modules .module-industrial .image{background:#3f51b5 !important;}
.ep2p-modules .module-position .image{background:#009688 !important;}
.ep2p-modules .module-leave .image{background:#795548 !important;}
.ep2p-modules .module-time .image{background:#f44336 !important;}
.ep2p-modules .module-recruitment .image{background:#00bcd4 !important;}
.ep2p-modules .module-development .image{background:#8bc34a !important;}
.ep2p-modules .module-policy .image{background:#cddc39 !important;}
.ep2p-modules .module-form .image{background:#607d8b !important;}
.ep2p-modules .module-attendance .image{background:#673ab7 !important;}
.ep2p-modules .module-mobile .image{background:#ff5722 !important;}
.ep2p-modules .module-application .image{background:#0099cc !important;}
/* New: Loan colour (used by Loan & eLoan) */
.ep2p-modules .module-loan .image{background:#ff4278 !important;}

/* e-modules share the same colours via their module-* class; no extra style needed */

/* ===== Responsiveness (keeps things neat on smaller screens) ===== */
@media (max-width: 1100px){
  .ep2p-modules .mods-grid{grid-template-columns:repeat(4,minmax(160px,1fr)) !important;}
}
@media (max-width: 900px){
  .ep2p-modules .mods-grid{grid-template-columns:repeat(3,minmax(160px,1fr)) !important;}
}
@media (max-width: 640px){
  .ep2p-modules .mods-grid{grid-template-columns:repeat(2,minmax(150px,1fr)) !important;}
}
/* ===================== SOLUTION v8 ===================== */
:root{
  --sol8-ink:#0b1220;
  --sol8-muted:#556070;
  --sol8-brand:#0d8e82;      /* brand accent */
  --sol8-hair:#e9edf2;
}

/* pure white section */
.solution-v8{ position:relative; background:#fff; }

/* layout */
.solv8-wrap{ margin-top: 8px; }

/* ===== Cards (larger, airy) ===== */
.solv8-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:16px;
}
.sv8-card{
  background:#fff; border:1px solid var(--sol8-hair); border-radius:18px;
  padding:20px 20px 18px; min-height: 196px;
  box-shadow:0 18px 42px rgba(0,0,0,.06);
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.sv8-card:hover{ transform: translateY(-4px); border-color: rgba(13,142,130,.32); box-shadow:0 26px 56px rgba(13,142,130,.16); }
.sv8-card.sv8-highlight{ border-color: rgba(15,23,42,.35); box-shadow:0 22px 56px rgba(0,0,0,.12); } /* neutral shadow; no glow */

.sv8-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.sv8-ico{ width:34px; height:34px; object-fit:contain; }
.sv8-card h5{ margin:0; font-weight:800; color:#0f172a; font-size:1.12rem; }

/* custom check bullets (bigger) */
.sv8-bullets{ list-style:none; margin:0; padding:0; color:#475569; font-size:1.12rem; line-height:1.6; }
.sv8-bullets li{ position:relative; padding-left:30px; }
.sv8-bullets li + li{ margin-top:8px; }
.sv8-bullets li::before{
  content:""; position:absolute; left:0; top:6px; width:16px; height:16px; border-radius:4px;
  border:2px solid #0bb39f; background: radial-gradient(circle at 55% 45%, #0bb39f 0 45%, transparent 46%);
  transform: rotate(-15deg); box-shadow: inset 0 0 0 2px #fff;
}

/* ===== Unified Section Title Styling (same as other sections) ===== */
.section-title{
  text-align:center;
  margin-bottom:36px;
}
.section-title h6{
  font-size:0.6em;
  font-weight:800;
  color:#9c2323; /* red accent */
  margin-bottom:8px;
}
.section-title h4{
  font-size:1.9rem;
  font-weight:800;
  color:#111; /* dark text */
  text-transform:none;  /* 👈 keeps normal case */
  margin:0;
}
.section-title h4 span{
  color:#9c2323; /* red highlight word */
}
.section-title:after{
  content:"";
  display:block;
  width:46px;
  height:3px;
  background:#9c2323;
  margin:14px auto 0;
  border-radius:2px;
}





/* ===== Device Duo ===== */
.device-duo{
  position:relative; min-height: 520px; display:grid; place-items:center; margin-top:140px;
}

.device-duo .phone img {
  border: 4px solid #222;        /* dark border */
  border-radius: 28px;           /* more rounded like a real phone */
  box-shadow: 0 6px 18px rgba(0,0,0,0.25); /* deeper shadow */
}

/* Laptop mockup */
.laptop{ position:absolute; left:0; right:60px; margin:auto; width: 100%; max-width: 520px; transform: perspective(1200px) rotateY(-6deg) translateX(-18px); }
.laptop .lid{
  position:relative; width:100%; aspect-ratio: 16/10; background:#0a0f1a; border-radius:14px; border:2px solid rgba(255,255,255,.08);
  box-shadow:0 26px 60px rgba(0,0,0,.28);
}
.laptop .cam{
  position:absolute; top:8px; left:50%; transform:translateX(-50%); width:10px; height:10px; border-radius:50%; background:#1f2937;
  box-shadow: inset 0 0 0 2px #0d1117, 0 0 0 2px rgba(255,255,255,.06);
}
.laptop .screen{
  position:absolute; inset:16px; border-radius:8px; overflow:hidden; background:#000;
}
.laptop .screen img{ width:100%; height:100%; object-fit:cover; display:block; }
.laptop .base{
  position:relative; width:92%; height:16px; margin: 6px auto 0; background: linear-gradient(#cfd6df,#b9c2cd); border-radius:0 0 12px 12px;
  box-shadow:0 12px 24px rgba(0,0,0,.18);
}
.laptop .hinge{
  position:absolute; left:50%; transform:translateX(-50%); top:-6px; width:80px; height:6px; background:#9aa3ae; border-radius:6px 6px 0 0;
}
.laptop .kbd{
  position:absolute; left:4%; right:4%; top:2px; height:8px; background: repeating-linear-gradient(90deg,#aeb7c1 0 8px,#b8c1cc 8px 12px); border-radius:6px;
}
.laptop .track{
  position:absolute; left:38%; right:38%; top:2px; height:8px; background:#9aa3ae; border-radius:6px;
}
.laptop .cap{ text-align:center; font-size:12px; color:#475569; margin-top:6px; }

/* Phone mockup (overlapping on the right) */
.phone{ position:absolute; right:6px; bottom:-16px; width: 270px; }
.phone .shell{
  position:relative; width:100%; height: 540px; border-radius:44px; background:#0a0f1a; border: 2px solid rgba(255,255,255,.08);
  box-shadow:0 28px 80px rgba(0,0,0,.35);
  transform: perspective(1200px) rotateY(12deg) translateX(6px);
}
.phone .notch{
  position:absolute; top:12px; left:50%; transform:translateX(-50%); width:130px; height:24px; background:#0a0f1a; border-bottom-left-radius:14px; border-bottom-right-radius:14px;
}
.phone .screen{
  position:absolute; inset:22px; border-radius:30px; overflow:hidden; background:#000;
}
.phone .sleep{ position:absolute; right:-3px; top:140px; width:4px; height:70px; background:#202733; border-radius:2px; }
.phone .vol{ position:absolute; left:-3px; top:170px; width:4px; height:106px; background:#202733; border-radius:2px; }

.phone .screen .shot{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition: opacity .6s ease;
}
.phone .screen .shot.is-on{ opacity:1; }

.phone .cap{ text-align:center; font-size:12px; color:#475569; margin-top:6px; }

.phone .dots{ display:flex; gap:6px; justify-content:center; margin-top:6px; }
.phone .dots button{ width:8px; height:8px; border-radius:50%; border:0; background:#aab3be; }
.phone .dots button.is-on{ background:#0f172a; }

/* marquee */
.sv8-marquee{
  margin-top:30px; background:#fff; border:1px solid var(--sol8-hair); border-radius:12px;
  overflow:hidden; box-shadow:0 12px 28px rgba(0,0,0,.06);
}
.sv8-marquee .track{
  display:flex; gap:14px; white-space:nowrap; padding:10px 14px; animation: sv8-scroll 16s linear infinite;
}
.pill{
  display:inline-block; padding:8px 14px; border-radius:999px;
  background:#eef2f6; color:#0f172a; border:1px solid #e2e8f0; font-weight:800; font-size:13px;
}
@keyframes sv8-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* reveal-on-scroll */
.reveal-up{ opacity:0; transform: translateY(18px); }
.reveal-up.is-in{ opacity:1; transform:none; transition: opacity .7s ease var(--d,0s), transform .7s ease var(--d,0s); }

/* responsive */
@media (max-width: 1100px){
  .solv8-grid{ grid-template-columns:1fr; }
  .device-duo{ min-height: 620px; }
  .laptop{ right:0; transform: perspective(1000px) rotateY(-4deg) translateX(-6px); }
  .phone{ right:0; }
}
@media (max-width: 640px){
  .device-duo{ min-height: 580px; }
  .laptop{ max-width:100%; transform:none; position:static; margin:0 auto 24px; }
  .phone{ position:static; width:240px; margin:0 auto; }
}
/* final nudge if the gap persists because of global spacing */
.solution-v8 { margin-bottom: 0 !important; }
/* --- tighten the space between Solution v8 and Services --- */

/* reduce bottom padding just for this section (don’t touch the global .section) */
.solution-v8.section { padding-bottom: 56px !important; }

/* the device stage is a bit too tall; shave it down */
.device-duo { min-height: 460px; }      /* was 520px; tweak 420–480 to taste */

/* keep the pill marquee from adding extra push */
.sv8-marquee { margin-bottom: 8px; }


/* make sure the Services section starts a little closer */
.services-fw-v9 { padding-top: 48px; }  /* if it still feels far, go 40px */

/* ===== base tweaks ===== */
.services-fw-v9 { padding-top: 48px; }

/* force override for the Services background */
.services-fw-v9 {
  position: relative;
  background: url("/assets/images/back.jpg") center / cover no-repeat;
  background-attachment: fixed;  /* optional, gives parallax on desktop */
  padding: 40px 0 84px;
  margin-top: -18px;
  overflow: visible;
  z-index: 1;
  scroll-margin-top: 96px;
}


/* revamped wrapper with fixed bg */
.sv9-v10 {
  position: relative;
  padding: 40px 0 96px;
  overflow: clip;
  scroll-margin-top: 96px;
}
.sv9-v10 .sv9-bg{
  position:absolute; inset:0;
  background: url("assets/images/Background test.jpg") center/cover no-repeat fixed;
  z-index:-3;
}

/* geometric accents */
.sv9-shape{position:absolute;filter:blur(6px);opacity:.25;pointer-events:none;z-index:-2}
.sv9-shape-1{width:38vmin;height:38vmin;border-radius:24% 76% 59% 41% / 33% 36% 64% 67%; background:radial-gradient(circle at 30% 30%, #8bf0e6, #42a5f5 60%); left:-8vmin; top:14vmin; animation:float1 14s ease-in-out infinite}
.sv9-shape-2{width:44vmin;height:44vmin;border-radius:44% 56% 38% 62% / 48% 33% 67% 52%; background:radial-gradient(circle at 70% 70%, #ffd166, #ff7aa0 60%); right:-12vmin; bottom:-6vmin; animation:float2 18s ease-in-out infinite}
@keyframes float1 { 50% { transform: translateY(-10px) translateX(6px) rotate(2deg);} }
@keyframes float2 { 50% { transform: translateY(12px) translateX(-8px) rotate(-2deg);} }

/* keep your orbs but lower */
.sv9-orb{position:absolute;border-radius:50%;filter:blur(28px);opacity:.16;pointer-events:none;z-index:-2}
.sv9-orb-a{width:520px;height:520px;background:#38e1cd;left:-160px;top:-120px}
.sv9-orb-b{width:560px;height:560px;background:#ffd166;right:-180px;bottom:-160px}

/* heading minor spacing */
.services-fw-v9 .sv9-header{margin-bottom:16px}

/* ===== colorful tabs ===== */
.sv9-tabs{
  max-width:1280px;margin:18px auto 28px;padding:0 16px;
  display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:12px
}
.sv9-tab{
  position:relative;
  background:#fff;border:1px solid #e9edf2;border-radius:18px;padding:16px 14px;
  display:grid;place-items:center;text-align:center;gap:8px;line-height:1.1;
  font-weight:800;color:#0f172a;cursor:pointer;
  box-shadow:0 14px 36px rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  overflow:hidden;
}
.sv9-tab .ico img{width:32px;height:32px;object-fit:contain;filter: saturate(1.1)}
.sv9-tab:hover{transform:translateY(-2px)}
.sv9-tab .sv9-ink{
  position:absolute; inset:-1px;
  background: linear-gradient(135deg, rgba(13,142,130,.08), rgba(99,102,241,.08));
  opacity:0; transition:opacity .18s ease;
}
.sv9-tab.is-active{
  border-color:transparent; color:#0b3c39;
  background:linear-gradient(180deg,#eafffb,#ffffff);
  box-shadow:0 18px 42px rgba(13,142,130,.18);
}
.sv9-tab.is-active .sv9-ink{opacity:1}

/* ===== panels & grid ===== */
.sv9-panels{max-width:1400px;margin:0 auto}
.sv9-panel{display:none}
.sv9-panel.is-active{display:block}
.sv9-grid{
  display:grid;grid-template-columns:minmax(360px,1fr) minmax(520px,1.2fr);
  gap:32px;align-items:start;padding:0 24px
}
@media (max-width:1200px){ .sv9-grid{grid-template-columns:1fr} }

/* ===== cards with accents ===== */
.sv9-card{
  background:#fff;border:1px solid #e9edf2;border-radius:22px;padding:22px 22px 18px;
  box-shadow:0 24px 56px rgba(0,0,0,.06); color:#0f172a; position:relative; overflow:hidden;
}
.sv9-card .sv9-badge{
  display:inline-block; font-size:12px; font-weight:800; padding:4px 8px; border-radius:999px; background:#eef3f7; border:1px solid #dfe7ee; color:#0f172a;
}
.sv9-card-accent.teal::after,
.sv9-card-accent.indigo::after,
.sv9-card-accent.purple::after,
.sv9-card-accent.amber::after,
.sv9-card-accent.cyan::after,
.sv9-card-accent.rose::after{
  content:""; position:absolute; inset:auto 0 0 0; height:4px; border-bottom-left-radius:22px; border-bottom-right-radius:22px;
}
.sv9-card-accent.teal::after{background:linear-gradient(90deg,#0bb39f,#34d399)}
.sv9-card-accent.indigo::after{background:linear-gradient(90deg,#6366f1,#8b5cf6)}
.sv9-card-accent.purple::after{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}
.sv9-card-accent.amber::after{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.sv9-card-accent.cyan::after{background:linear-gradient(90deg,#06b6d4,#22d3ee)}
.sv9-card-accent.rose::after{background:linear-gradient(90deg,#fb7185,#f472b6)}
.sv9-card h5{margin:0 0 8px;font-weight:800}
.sv9-card p{margin:0 0 10px;color:#4b5563}
.sv9-card-head{display:flex;align-items:center;gap:10px;justify-content:space-between;}

/* bullets */
.sv9-bullets{list-style:none;margin:10px 0 0;padding:0;color:#334155;font-size:1.06rem;line-height:1.6}
.sv9-bullets li{position:relative;padding-left:26px}
.sv9-bullets li+li{margin-top:6px}
.sv9-bullets li::before{
  content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:4px;
  border:2px solid #0bb39f;background: radial-gradient(circle at 55% 45%,#0bb39f 0 45%, transparent 46%);
  transform:rotate(-15deg);box-shadow: inset 0 0 0 2px #fff;
}

/* pills & chips */
.sv9-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.sv9-pills .pill{background:#eef3f7;border:1px solid #dfe7ee;border-radius:999px;padding:6px 10px;font-weight:700;font-size:12px;color:#0f172a}
.sv9-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px}
.sv9-chips .chip{padding:6px 10px;border-radius:10px;border:1px dashed #c7d2fe;background:#f5f7ff;font-weight:700;font-size:12px}

/* flow */
.sv9-flow{list-style:none;margin:12px 0 10px;padding:0;display:grid;gap:10px}
.sv9-flow li{display:flex;gap:10px;align-items:flex-start}
.sv9-flow .num{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:#eef2ff;border:1px solid #c7d2fe;font-weight:800}
.sv9-flow .txt small{display:block;color:#64748b}

/* image strips/galleries */
.sv9-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.sv9-strip img{width:100%;height:120px;object-fit:cover;border-radius:12px;border:1px solid #e9edf2}
.sv9-integration-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:8px}
.sv9-integration-gallery img{width:100%;height:140px;object-fit:cover;border-radius:12px;border:1px solid #e9edf2}

/* phones */
.sv9-phones{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;align-items:flex-start}
.sv9-phone{width:320px;text-align:center;margin-inline:auto}
.sv9-phone.thin .shell{border-width:1px}
.sv9-phone .shell{position:relative;width:100%;height:640px;border-radius:46px;background:#0a0f1a;border:1.5px solid rgba(255,255,255,.18);box-shadow:0 30px 86px rgba(0,0,0,.35)}
.sv9-phone .notch{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:160px;height:24px;background:#0a0f1a;border-bottom-left-radius:14px;border-bottom-right-radius:14px}
.sv9-phone .screen{position:absolute;inset:22px;border-radius:30px;overflow:hidden;background:#000}
.sv9-phone .screen .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.sv9-phone .screen .shot.is-on{opacity:1}
.sv9-phone figcaption{color:#475569;font-size:12px;margin-top:6px}
.sv9-phone .dots{display:flex;gap:6px;justify-content:center;margin-top:6px}
.sv9-phone .dots button{width:8px;height:8px;border-radius:50%;border:0;background:#aab3be;cursor:pointer}
.sv9-phone .dots button.is-on{background:#0f172a}

/* attendance gallery */
.sv9-gallery{flex-wrap:wrap;justify-content:center}
.sv9-gallery .dev{width:260px;border-radius:18px;border:1px solid #e9edf2;box-shadow:0 20px 50px rgba(0,0,0,.08);object-fit:contain;background:#fff}

/* abstract animation (BPO) */
.sv9-abstract{position:relative;justify-content:center;align-items:center;min-height:320px}
.sv9-abstract-canvas{position:relative;width:min(560px,100%);aspect-ratio:16/10;border-radius:22px;overflow:hidden;border:1px solid #e9edf2;box-shadow:0 24px 56px rgba(0,0,0,.06);background: radial-gradient(120% 120% at 0% 0%, #fff 0 40%, #fef3f8 40% 100%);}
.sv9-abstract-canvas .layer{position:absolute;inset:-20%; background:
  conic-gradient(from 0deg,#ffe5ec 0 25%, transparent 25% 50%, #e3fdf5 50% 75%, transparent 75% 100%);
  filter: blur(24px); mix-blend-mode: multiply; opacity:.9;
}
.sv9-abstract-canvas .l1{animation:spin 26s linear infinite}
.sv9-abstract-canvas .l2{animation:spin-rev 32s linear infinite}
.sv9-abstract-canvas .l3{animation:spin 44s linear infinite}
.sv9-abstract-canvas .spark{position:absolute;inset:0;margin:auto;width:60%;height:60%;opacity:.9}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spin-rev{to{transform:rotate(-360deg)}}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .7s ease var(--d,0s),transform .7s ease var(--d,0s)}

/* responsiveness */
@media (max-width:1200px){
  .sv9-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .sv9-tabs{grid-template-columns:repeat(2,1fr)}
  .sv9-phone{width:300px}
  .sv9-strip img{height:100px}
}

/* ---- Uniform 7-column grid & equal cards ---- */
#modules .module-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
#modules .module-grid > .col {
  flex: 0 0 calc((100% - 6*16px)/7); /* 7 across with 16px gaps */
  max-width: calc((100% - 6*16px)/7);
}
@media (max-width: 1200px){
  #modules .module-grid > .col { flex-basis: calc((100% - 4*16px)/5); max-width: calc((100% - 4*16px)/5); }
}
@media (max-width: 992px){
  #modules .module-grid > .col { flex-basis: calc((100% - 3*16px)/4); max-width: calc((100% - 3*16px)/4); }
}
@media (max-width: 768px){
  #modules .module-grid > .col { flex-basis: calc((100% - 2*16px)/3); max-width: calc((100% - 2*16px)/3); }
}
@media (max-width: 540px){
  #modules .module-grid > .col { flex-basis: calc((100% - 1*16px)/2); max-width: calc((100% - 1*16px)/2); }
}

/* Equal tile height + centered icon */
.features .item.mod-card { min-height: 160px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.features .item .image { display:grid; place-items:center; width:64px; height:64px; border-radius:12px; }
.features .item .image img, 
.features .item .image svg { width:44px; height:44px; }

/* ---- Your main module colors (kept) + new ones ---- */
.module-employee .image      { background-color:#0066cc !important; }
.module-payroll .image       { background-color:#e91e63 !important; }
.module-compensation .image  { background-color:#4caf50 !important; }
.module-training .image      { background-color:#ff9800 !important; }
.module-performance .image   { background-color:#9c27b0 !important; }
.module-industrial .image    { background-color:#3f51b5 !important; }
.module-position .image      { background-color:#009688 !important; }
.module-leave .image         { background-color:#795548 !important; }
.module-time .image          { background-color:#f44336 !important; }
.module-recruitment .image   { background-color:#00bcd4 !important; }
.module-development .image   { background-color:#8bc34a !important; }
.module-policy .image        { background-color:#cddc39 !important; }
.module-form .image          { background-color:#607d8b !important; }
.module-attendance .image    { background-color:#673ab7 !important; }
.module-mobile .image        { background-color:#ff5722 !important; }
.module-application .image   { background-color:#0099cc !important; }

/* NEW mains used above */
.module-reporting .image     { background-color:#607d8b !important; } /* same as form/reporting tone */
.module-loan .image          { background-color:#e91e63 !important; } /* align to payroll-related palette */

/* ---- e-Modules color mapping to their parent ---- */
.module-edata .image         { background-color:#0066cc !important; } /* Employee Admin */
.module-efinancial .image    { background-color:#e91e63 !important; } /* Payroll */
.module-eclaim .image        { background-color:#e91e63 !important; } /* Payroll/Comp */
.module-etraining .image     { background-color:#ff9800 !important; } /* Training */
.module-eappraisal .image    { background-color:#9c27b0 !important; } /* Performance */
.module-eindustrial .image   { background-color:#3f51b5 !important; } /* Industrial Relations */
.module-eleave .image        { background-color:#795548 !important; } /* Leave */
.module-etime .image         { background-color:#f44336 !important; } /* Time */
.module-eloan .image         { background-color:#e91e63 !important; } /* Loan (payroll related) */
.module-edevelopment .image  { background-color:#8bc34a !important; } /* Employee Development */
.module-erecruit .image      { background-color:#00bcd4 !important; } /* Recruitment */
.module-eforms .image        { background-color:#607d8b !important; } /* Forms/Reporting */
/* === FIX GAP: Solution v8 → Services === */
/* ---- Uniform 5-column grid & equal cards ---- */
#modules .module-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* spacing between cards */
}

#modules .module-grid > .col {
  flex: 0 0 calc((100% - 4*20px)/5); /* 5 across with 20px gaps */
  max-width: calc((100% - 4*20px)/5);
}

@media (max-width: 1200px){
  #modules .module-grid > .col {
    flex-basis: calc((100% - 3*20px)/4);
    max-width: calc((100% - 3*20px)/4);
  }
}
@media (max-width: 992px){
  #modules .module-grid > .col {
    flex-basis: calc((100% - 2*20px)/3);
    max-width: calc((100% - 2*20px)/3);
  }
}
@media (max-width: 768px){
  #modules .module-grid > .col {
    flex-basis: calc((100% - 1*20px)/2);
    max-width: calc((100% - 1*20px)/2);
  }
}
@media (max-width: 540px){
  #modules .module-grid > .col {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* Equal tile height + centered icon */
.features .item.mod-card {
  min-height: 180px; /* slightly taller since fewer per row */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.features .item .image {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 14px;
}
.features .item .image img,
.features .item .image svg {
  width: 48px;
  height: 48px;
}
/* 1) Most themes add big vertical padding via .section — clamp it just for Solution */
.section.solution-v8,
.solution-v8.section {
  padding-bottom: 36px !important;   /* tighten */
  margin-bottom: 0 !important;
}

/* 2) Kill stray margins from the last blocks inside Solution */
.solution-v8 .solv8-wrap,
.solution-v8 .solv8-grid,
.solution-v8 .sv8-marquee,
.solution-v8 .section-heading {
  margin-bottom: 0 !important;
}
.solution-v8 .solv8-wrap > *:last-child,
.solution-v8 .solv8-grid > *:last-child {
  margin-bottom: 0 !important;
}

/* 3) That tall stage can push the section visually — trim it */
.solution-v8 .device-duo { 
  min-height: 460px !important;      /* was 520 — adjust 420–480 to taste */
}

/* 4) Some templates insert clearfix pseudo-elements with height — remove them */
.solution-v8::after,
.solution-v8::before {
  content: none !important;
  display: none !important;
}

/* 5) Pull Services up a touch and keep its top compact */
#services.services-fw-v9 {
  margin-top: -10px !important;      /* gentle nudge upward */
  padding-top: 40px !important;      /* compact top padding */
}

/* 6) Nuclear option for frameworks that add gap between sections */
.section + .section,
.section + #services,
.solution-v8 + #services {
  margin-top: 0 !important;
}

/* 7) If your site wraps sections in .container with bottom spacing, kill it just here */
.solution-v8 > .container:last-child,
.solution-v8 .container:last-child {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* ==== Kill the huge gap between Solution (v8) and Services (v9) ==== */

/* 1) Tighten the tail of Solution v8 */
.solution-v8,
.section.solution-v8 {
  padding-bottom: 28px !important;   /* was bigger */
  margin-bottom: 0 !important;
}

/* 2) The stage (laptop/phone) sets a large min-height; shrink it */
.solution-v8 .device-duo { 
  min-height: 420px !important;      /* try 380–460 to taste */
}

/* 3) Ensure the last block inside Solution doesn’t add spacing */
.solution-v8 .solv8-wrap,
.solution-v8 .solv8-grid,
.solution-v8 .sv8-marquee,
.solution-v8 .section-heading {
  margin-bottom: 0 !important;
}
.solution-v8 .solv8-wrap > *:last-child,
.solution-v8 .solv8-grid > *:last-child,
.solution-v8 > *:last-child {
  margin-bottom: 0 !important;
}

/* 4) Some themes inject clearfix pseudo blocks—disable them here */
.solution-v8::before,
.solution-v8::after {
  content: none !important;
  display: none !important;
}

/* 5) Compact the top of Services and nudge it up slightly */
#services.services-fw-v9,
.services-fw-v9 {
  padding-top: 36px !important;      /* match your other sections */
  margin-top: -580px !important;      /* closes the visual gap */
}

/* 6) If your theme adds default spacing between .section siblings, zero it here */
.solution-v8 + .services-fw-v9,
.solution-v8 + #services,
.section + .services-fw-v9 {
  margin-top: 0 !important;
}

/* ==== eP2P Modules — hard reset to 5 per row (desktop) ==== */
#modules .module-grid{
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 20px !important;
  align-items: stretch !important;
}

/* Kill bootstrap/flex sizing from earlier rules */
#modules .module-grid > .col{
  all: unset !important;           /* drop any flex-basis/max-width from old CSS */
  display: block !important;       /* behave like a normal grid item */
}

/* Uniform tile look */
#modules .item.mod-card{
  min-height: 180px !important;    /* same height for all */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff;
  border: 1px solid #e9edf2;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

/* Consistent icon block */
#modules .item .image{
  display: grid !important;
  place-items: center !important;
  width: 70px !important;
  height: 70px !important;
  border-radius: 14px !important;
  margin-bottom: 10px !important;
}
#modules .item .image img,
#modules .item .image svg{
  width: 48px !important;
  height: 48px !important;
}

/* Type size align */
#modules .item h4{
  font-size: 13px !important;
  line-height: 1.35 !important;
  text-align: center !important;
  margin: 8px 0 0 !important;
  color: #111827;
}

/* -------- Section spacing so it doesn't sit too close to Solution -------- */
#insights.section { padding-top: 10px !important; padding-bottom: 100px !important; position: relative; overflow: hidden; }
#insights.section::before{
  content:""; position:absolute; inset:auto -20% -60% -20%;
  height:60%; background:radial-gradient(60% 60% at 50% 0%, rgba(0,163,157,.08), transparent 60%); pointer-events:none;
}

/* -------- Cards (override previous .figure-card look) -------- */
#insights .figure-card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:18px;
  padding:22px 18px; box-shadow:0 18px 40px rgba(0,0,0,.06);
  transition:transform .45s ease, box-shadow .45s ease, background .45s ease;
  transform: translateY(14px); opacity:.0;
}
#insights .figure-card.reveal{ transform:none; opacity:1; }
#insights .figure-card:hover{ box-shadow:0 22px 60px rgba(0,0,0,.10); background:linear-gradient(180deg,#fff, #fafafa); }

/* -------- Big gradient numbers (override .counter appearance) -------- */
#insights .figure-number{ line-height:1; margin-bottom:8px; }
#insights .figure-number .counter{
  display:inline-block; font-weight:900; font-size:48px; letter-spacing:.5px;
  background:linear-gradient(180deg,#0ea5e9,#2563eb); -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:100% 200%; background-position:50% 0%;
  transition:background-position .8s ease;
}
#insights .figure-card:nth-child(2) .counter{ background-image:linear-gradient(180deg,#06b6d4,#0ea5e9); }
#insights .figure-card:nth-child(3) .counter{ background-image:linear-gradient(180deg,#6d28d9,#3b82f6); }
#insights .figure-card:nth-child(4) .counter{ background-image:linear-gradient(180deg,#ef4444,#f97316); }

#insights .figure-card.reveal .counter{ background-position:50% 100%; } /* subtle “sheen” on reveal */
#insights .figure-caption{ font-size:13px; opacity:.8; }

/* -------- Responsive tweaks -------- */
@media (max-width: 992px){ #insights .figure-number .counter{ font-size:44px; } }
@media (max-width: 576px){ #insights .figure-number .counter{ font-size:38px; } }

/* Responsive (optional) — keep usability on smaller screens */
@media (max-width: 1200px){
  #modules .module-grid{ grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 992px){
  #modules .module-grid{ grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px){
  #modules .module-grid{ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px){
  #modules .module-grid{ grid-template-columns: 1fr !important; }
}



/* ======================== SERVICES v10 OVERRIDES ======================== */
#services.sv9-v10{ position:relative !important; background:none !important; }
#services.sv9-v10 .sv9-bg{
  position:absolute; inset:0;
  background:url("assets/images/Background test.jpg") center/cover no-repeat !important;
  z-index:-1;
}

/* tabs & layout */
#services.sv9-v10 .sv9-panels{max-width:1400px;margin:0 auto}
#services.sv9-v10 .sv9-panel{display:none}
#services.sv9-v10 .sv9-panel.is-active{display:block}
#services.sv9-v10 .sv9-tabs{
  max-width:1280px;margin:18px auto 28px;padding:0 16px;
  display:grid;grid-template-columns:repeat(4,minmax(220px,1fr));gap:12px
}
#services.sv9-v10 .sv9-tab{background:#fff;border:1px solid #e9edf2;border-radius:18px;padding:16px 14px;display:grid;place-items:center;text-align:center;gap:8px;font-weight:800}
#services.sv9-v10 .sv9-tab.is-active{background:linear-gradient(180deg,#f3fffb,#fff)}
#services.sv9-v10 .sv9-two{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;padding:0 24px;margin-bottom:22px}
@media (max-width:1024px){ #services.sv9-v10 .sv9-two{grid-template-columns:1fr} }

/* cards / text */
#services.sv9-v10 .sv9-card{position:relative;background:#fff;border:1px solid #e9edf2;border-radius:22px;padding:22px;box-shadow:0 24px 56px rgba(0,0,0,.06)}
#services.sv9-v10 .sv9-card.tinted{background:linear-gradient(180deg,#ffffff,#fbfbff)}
#services.sv9-v10 .sv9-card h5{margin:0 0 8px;font-weight:800}
#services.sv9-v10 .sv9-card p{margin:0 0 10px;color:#4b5563;text-align:justify}
#services.sv9-v10 .sv9-bullets{list-style:none;margin:10px 0 0;padding:0;color:#334155;line-height:1.6;text-align:justify}
#services.sv9-v10 .sv9-bullets li{position:relative;padding-left:26px}
#services.sv9-v10 .sv9-bullets li+li{margin-top:6px}
#services.sv9-v10 .sv9-bullets li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:4px;border:2px solid #0bb39f;background: radial-gradient(circle at 55% 45%,#0bb39f 0 45%, transparent 46%);transform:rotate(-15deg);box-shadow: inset 0 0 0 2px #fff;}
#services.sv9-v10 .sv9-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
#services.sv9-v10 .sv9-pills .pill{background:#eef3f7;border:1px solid #dfe7ee;border-radius:999px;padding:6px 10px;font-weight:700;font-size:12px;color:#0f172a}
#services.sv9-v10 .sv9-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
#services.sv9-v10 .sv9-badge{display:inline-block;font-size:12px;font-weight:800;padding:4px 8px;border-radius:999px;background:#eef3f7;border:1px solid #dfe7ee}
#services.sv9-v10 .sv9-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 6px}
#services.sv9-v10 .sv9-chips .chip{padding:6px 10px;border-radius:10px;border:1px dashed #c7d2fe;background:#f5f7ff;font-weight:700;font-size:12px}
#services.sv9-v10 .sv9-flow{list-style:none;margin:12px 0 10px;padding:0;display:grid;gap:10px}
#services.sv9-v10 .sv9-flow .num{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:#eef2ff;border:1px solid #c7d2fe;font-weight:800}
#services.sv9-v10 .sv9-flow .txt small{display:block;color:#64748b}

/* accent bars under cards */
#services.sv9-v10 .sv9-card-accent.teal::after,
#services.sv9-v10 .sv9-card-accent.indigo::after,
#services.sv9-v10 .sv9-card-accent.purple::after,
#services.sv9-v10 .sv9-card-accent.amber::after{
  content:""; position:absolute; inset:auto 0 0 0; height:4px; border-bottom-left-radius:22px; border-bottom-right-radius:22px;
}
#services.sv9-v10 .sv9-card-accent.teal::after{background:linear-gradient(90deg,#0bb39f,#34d399)}
#services.sv9-v10 .sv9-card-accent.indigo::after{background:linear-gradient(90deg,#6366f1,#8b5cf6)}
#services.sv9-v10 .sv9-card-accent.purple::after{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}
#services.sv9-v10 .sv9-card-accent.amber::after{background:linear-gradient(90deg,#f59e0b,#fbbf24)}

/* ===== WEB: rectangular sliders (aspect-ratio) ===== */
#services.sv9-v10 .sv9-gallery-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:0 24px}
@media (max-width:1100px){ #services.sv9-v10 .sv9-gallery-row{grid-template-columns:1fr} }
#services.sv9-v10 .sv9-snap-group{background:#fff;border:1px solid #e9edf2;border-radius:16px;padding:14px;box-shadow:0 18px 42px rgba(0,0,0,.06)}
#services.sv9-v10 .sv9-snap-group .snap-head h6{margin:0 0 8px;font-weight:800;text-align:justify}
#services.sv9-v10 .snap-roller{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;        /* <<< forces rectangle, no tall boxes */
  border-radius:12px; overflow:hidden; background:#fff;
}
#services.sv9-v10 .snap-roller .snap{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain;         /* show full screenshot, no crop */
  background:#fff; opacity:0; transition:opacity .45s ease;
}
#services.sv9-v10 .snap-roller .snap.is-on{opacity:1}
#services.sv9-v10 .snap-dots{display:flex;gap:6px;justify-content:center;margin-top:8px}
#services.sv9-v10 .snap-dots button{width:10px;height:10px;border-radius:50%;border:0;background:#cbd5e1;cursor:pointer}
#services.sv9-v10 .snap-dots button.is-on{background:#111827}

/* ===== MOBILE: EXACT about-style phone cards + text side-by-side ===== */
#services.sv9-v10 .phone-card{position:relative;background:#fff;border:1px solid #e9edf2;border-radius:22px;padding:18px;box-shadow:0 24px 56px rgba(0,0,0,.06);overflow:hidden}
#services.sv9-v10 .pc-head h6{margin:0 0 10px;font-weight:800;text-align:justify}
#services.sv9-v10 .pc-phones{position:relative;height:620px;border-radius:18px;overflow:hidden;background:#0a0f1a}
#services.sv9-v10 .pc-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;opacity:0;transition:opacity .5s ease}
#services.sv9-v10 .pc-frame.is-on{opacity:1}
#services.sv9-v10 .pc-dots{display:flex;gap:6px;justify-content:center;margin-top:8px}
#services.sv9-v10 .pc-dots button{width:10px;height:10px;border-radius:50%;border:0;background:#cbd5e1}
#services.sv9-v10 .pc-dots button.is-on{background:#111827}
/* gradient orbs like About section */
#services.sv9-v10 .phone-card .orb{position:absolute;border-radius:50%;filter:blur(18px);opacity:.18;pointer-events:none}
#services.sv9-v10 .pc-access .orb.a{width:160px;height:160px;left:-40px;top:-40px;background:#8b5cf6}
#services.sv9-v10 .pc-access .orb.b{width:180px;height:180px;right:-40px;bottom:-40px;background:#22c55e}
#services.sv9-v10 .pc-cico .orb.a{width:160px;height:160px;left:-40px;top:-40px;background:#f59e0b}
#services.sv9-v10 .pc-cico .orb.b{width:180px;height:180px;right:-40px;bottom:-40px;background:#0ea5e9}
@media (max-width:1024px){ #services.sv9-v10 .pc-phones{height:560px} }

/* Mobile Apps rows */
.sv9-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 3rem;
}
.sv9-col {
  flex: 1;
}
.phone-side {
  display: flex;
  justify-content: center;
  align-items: center;
}
.phone-mockup {
  max-width: 260px;
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .sv9-row {
    flex-direction: column;
  }
  .phone-mockup {
    max-width: 200px;
    margin-bottom: 1rem;
  }
}

/* ===== Mobile Apps rows ===== */
#services .mobile-app-row{display:flex;align-items:stretch;gap:28px;margin:28px 24px 40px}
#services .mobile-app-row.reverse{flex-direction:row-reverse}
@media (max-width:992px){#services .mobile-app-row,#services .mobile-app-row.reverse{flex-direction:column}}

/* Text card */
#services .ma-text.card{flex:1;background:#fff;border:1px solid #e9edf2;border-radius:18px;padding:20px 20px 16px;
  box-shadow:0 18px 42px rgba(0,0,0,.06);text-align:justify;position:relative}
#services .ma-text.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;border-radius:18px 0 0 18px}
#services .ma-text.card.accent-blue::before{background:linear-gradient(#1f7cf0,#37c0e9)}
#services .ma-text.card.accent-orange::before{background:linear-gradient(#f55f3e,#f79d4d)}
#services .ma-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
#services .ma-head h5{margin:0;font-weight:800;letter-spacing:.2px}
#services .badge{font-size:12px;font-weight:800;padding:5px 10px;border-radius:999px;background:#eef3f7;border:1px solid #dfe7ee;color:#0f172a}
#services .ma-text.card p{color:#4b5563;margin:0 0 10px}
#services .ma-bullets{list-style:none;margin:10px 0 0;padding:0;color:#334155;line-height:1.6}
#services .ma-bullets li{position:relative;padding-left:26px}
#services .ma-bullets li+li{margin-top:6px}
#services .ma-bullets li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:4px;border:2px solid #0bb39f;
  background:radial-gradient(circle at 55% 45%,#0bb39f 0 45%,transparent 46%);transform:rotate(-15deg);box-shadow:inset 0 0 0 2px #fff}
#services .ma-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
#services .ma-pills .pill{background:#eef3f7;border:1px solid #dfe7ee;border-radius:999px;padding:6px 10px;font-weight:700;font-size:12px;color:#0f172a}

/* Gradient phone blocks */
#services .gradient-card{flex:1;border-radius:20px;padding:20px;display:flex;align-items:center;justify-content:center}
#services .gradient-blue{background:linear-gradient(135deg,#1f7cf0,#37c0e9)}
#services .gradient-orange{background:linear-gradient(135deg,#f55f3e,#f79d4d)}

/* Default (non-slider) look kept for fallback */
#services .gc-phones{display:flex;gap:14px;justify-content:center;align-items:flex-end}
#services .gc-phones img{width:140px;border-radius:24px;box-shadow:0 10px 26px rgba(0,0,0,.25);transition:transform .25s ease}
#services .gc-phones img:hover{transform:translateY(-6px)}

/* Slider mode: one phone at a time */
#services .gc-phones.slider{position:relative;display:block;height:540px}
#services .gc-phones.slider img{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:auto;height:520px;opacity:0;transition:opacity .45s ease,transform .45s ease;will-change:opacity,transform}
#services .gc-phones.slider img.is-on{opacity:1;animation:sv9PhoneFloat .6s ease both}
@keyframes sv9PhoneFloat{from{transform:translate(-50%,-52%) scale(.985)}to{transform:translate(-50%,-50%) scale(1)}}
#services .gc-dots{display:flex;gap:8px;justify-content:center;margin-top:10px}
#services .gc-dots button{width:10px;height:10px;border-radius:50%;border:0;background:#cbd5e1;opacity:.9;cursor:pointer}
#services .gc-dots button.is-on{background:#111827}

@media (max-width:992px){
  #services .gc-phones.slider{height:480px}
  #services .gc-phones.slider img{height:460px}
}
@media (max-width:768px){
  #services .gc-phones.slider{height:420px}
  #services .gc-phones.slider img{height:400px}
}

/* ========== MOBILE APPS V11 ========== */

/* title matches other sections */
#sv9-panel-mobile .sv9-mobile-title { margin-top: 6px; margin-bottom: 12px; }

/* rows */
#sv9-panel-mobile .sv9-mobile-row{
  display:flex; gap:28px; align-items:flex-start; justify-content:space-between;
  padding:0 24px; margin:22px 0 34px;
}
#sv9-panel-mobile .sv9-mobile-row.reverse{ flex-direction:row-reverse; }
@media (max-width:992px){
  #sv9-panel-mobile .sv9-mobile-row,
  #sv9-panel-mobile .sv9-mobile-row.reverse{ flex-direction:column; }
}

/* text card (keep your pretty look) */
#sv9-panel-mobile .ma-text{
  flex:1; position:relative; text-align:justify;
}
#sv9-panel-mobile .ma-text.sv9-card{ padding:22px; }
#sv9-panel-mobile .accent-blue::before,
#sv9-panel-mobile .accent-orange::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px; border-radius:18px 0 0 18px;
}
#sv9-panel-mobile .accent-blue::before{ background:linear-gradient(#1f7cf0,#37c0e9); }
#sv9-panel-mobile .accent-orange::before{ background:linear-gradient(#f55f3e,#f79d4d); }

/* keep your pretty bullets from other sections */
#sv9-panel-mobile .sv9-bullets{ list-style:none; margin:10px 0 0; padding:0; color:#334155; line-height:1.6; }
#sv9-panel-mobile .sv9-bullets li{ position:relative; padding-left:26px; }
#sv9-panel-mobile .sv9-bullets li+li{ margin-top:6px; }
#sv9-panel-mobile .sv9-bullets li::before{
  content:""; position:absolute; left:0; top:7px; width:14px; height:14px; border-radius:4px;
  border:2px solid #0bb39f; background: radial-gradient(circle at 55% 45%,#0bb39f 0 45%, transparent 46%);
  transform:rotate(-15deg); box-shadow: inset 0 0 0 2px #fff;
}

/* pills/tags — reuse site style */
#sv9-panel-mobile .sv9-pills{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px }
#sv9-panel-mobile .sv9-pills .pill{
  background:#eef3f7; border:1px solid #dfe7ee; border-radius:999px; padding:6px 10px; font-weight:700; font-size:12px; color:#0f172a;
}

/* gradient phones block (no stretch) */
#sv9-panel-mobile .gradient-card{
  flex:1; border-radius:20px; padding:20px;
  display:flex; align-items:center; justify-content:center;
}
#sv9-panel-mobile .gradient-blue{ background:linear-gradient(135deg,#1f7cf0,#37c0e9); }
#sv9-panel-mobile .gradient-orange{ background:linear-gradient(135deg,#f55f3e,#f79d4d); }

/* all phones visible with stagger reveal */
#sv9-panel-mobile .gc-phones{ display:flex; gap:14px; justify-content:center; align-items:flex-end; flex-wrap:wrap; }
#sv9-panel-mobile .gc-phones img{
  width:140px; border-radius:24px; box-shadow:0 10px 26px rgba(0,0,0,.25);
  opacity:0; transform:translateY(12px) scale(.985);
  transition:opacity .45s ease, transform .45s ease;
}
#sv9-panel-mobile .gc-phones img.reveal{ opacity:1; transform:translateY(0) scale(1); }
#sv9-panel-mobile .gc-phones img.reveal:hover{ transform:translateY(-6px) scale(1.01); }

@media (max-width:992px){
  #sv9-panel-mobile .gc-phones img{ width:120px; }
}
/* --- SERVICES: full-bleed background that sticks across tabs --- */
#services.sv9-v10{
  position: relative;
  z-index: 0;
  /* make sure old white background doesn't cover our image */
}

/* Use a pseudo layer so it always renders behind content */
/* === OVERRIDE SERVICES BACKGROUND (make solid, no transparency) === */
#services.sv9-v10::before {
  content: "" !important;
  position: absolute !important;
  left: calc(50% - 50vw) !important;
  width: 100vw !important;
  top: -24px !important;
  bottom: -24px !important;

  /* solid background, no transparency */
  background: url("../images/testforaboutus.png") center / cover no-repeat !important;

  opacity: 1 !important;       /* <-- force it fully visible */
  mix-blend-mode: normal !important;  /* kill blending modes */
  background-color: transparent !important; /* ensure no tint overlay */

  z-index: 0 !important;
  pointer-events: none !important;
}

#services.sv9-v10 .sv9-bg::after {
  background: none !important;
  content: none !important; /* ensures the pseudo-element disappears */
}

/* === FORCE SOLID BACKGROUND FOR SERVICES SECTION === */
#services.sv9-v10,
#services.sv9-v10::before,
#services.sv9-v10::after,
#services.sv9-v10 .sol-bg {
  background: url("../images/testforaboutus.png") center/cover no-repeat !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  background-color: transparent !important;
}

/* keep all real content above the background layer */
#services.sv9-v10 > *{
  position: relative;
  z-index: 1;
}

/* Fixed, full-bleed background for all Services tabs */
#services.sv9-v10{
  position:relative;
  z-index:0;
  --sv9-bg-span: 1200px;   /* fallback, will be updated by JS */
} 

#services.sv9-v10 .sv9-bg{
  position:absolute;
  left:calc(50% - 50vw);
  width:100vw;
  top:-24px;                      /* nudge up/down as you like */
  height:var(--sv9-bg-span);      /* stays constant across tabs */
  background:url("../images/testforaboutus.png") center/cover no-repeat;
  z-index:0;
  pointer-events:none;
}

#services.sv9-v10 > *:not(.sv9-bg){
  position:relative;
  z-index:1;
}
#services.sv9-v10 .sv9-bg::after {
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.6); /* transparent white */
}
/* Force About Us background with overlay */
#about.aboutv11.section {
  position: relative;
  width: 100%;
  background: url("../images/testforaboutus.png") center/cover no-repeat fixed !important;
  z-index: 0;
}

/* Add a semi-transparent overlay */
#about.aboutv11.section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.2); /* white overlay at 60% */
  /* try rgba(0,0,0,0.4) if you want a dark overlay */
  z-index: 0;
}

/* Keep real content above overlay */
#about.aboutv11.section > * {
  position: relative;
  z-index: 1;
}
#about .row.mt-2 {
  margin-top: 0 !important;   /* cancel Bootstrap margin */
}

.apps-browser {
  margin-top: -20px !important;   /* extra safety */
}

/* ABOUT — keep background steady inside the section (no parallax) */
#about.aboutv11.section{
  position: relative;
  width: 100%;
  /* same image, but no 'fixed' */
  background-image: url("../images/backgroundtest2-6.jpg") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center top !important;
  background-attachment: scroll !important; /* <- stops the follow/parallax */
  min-height: 100vh; /* keeps section tall so bg doesn’t jump when tabs switch */
  z-index: 0;
}

/* subtle overlay for readability (doesn't affect text) */
#about.aboutv11.section::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(300,300,300,0.1); /* adjust 0.3–0.8 to taste */
  z-index:0; pointer-events:none;
}

/* keep content on top and text black */
#about.aboutv11.section > *{ position:relative; z-index:1; }
#about.aboutv11.section,
#about.aboutv11.section p,
#about.aboutv11.section li { color:#000 !important; }

/* Make sure Apps Browser looks styled at all viewport widths */
#about .apps-browser {
  position: relative;              /* keep it above section overlay */
  z-index: 2;
  width: 100%;
  max-width: 1200px;               /* adjust if you want wider/narrower */
  margin: 12px auto 0;
  background: #fff;                /* visible “card” */
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.10);
  overflow: hidden;                /* keep screenshots clipped nicely */
}

/* Keep the chrome (title bar with dots) always visible */
#about .apps-browser .chrome {
  display: flex !important;        /* override any media query that hides it */
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(180deg,#f3f5f8,#e9ecf2);
  border-bottom: 1px solid #e5e9f0;
}

/* Title text should be black, not muted */
#about .apps-browser .title { 
  color: #000 !important; 
  font-weight: 700; 
}

/* Screenshot area */
#about .apps-browser .screen {
  padding: 0; 
  background: #fff;
}

#about .apps-browser .screen img.shot {
  display: block;
  width: 100%;
  height: auto;                    /* no scaling tricks */
  transform: none !important;      /* in case earlier CSS scaled it */
}

/* Thumbnails/dots always visible and spaced */
#about .apps-browser .thumbs {
  display: flex !important;        /* ensure not hidden by a breakpoint */
  gap: 8px; 
  justify-content: center;
  padding: 10px 0 14px;
}

/* (Optional) Slightly tighter gap above the browser */
#about .row.mt-2 { margin-top: 0 !important; }

/* RESET the old section background so it stops “moving” */
#apps-showcase{
  position: relative;
  z-index: 0;
  padding: 80px 0;
  background: none !important;            /* <- kill old bg */
  background-attachment: scroll !important;
}

/* Content above the bg layer */
#apps-showcase > *:not(.apps-bg){ position: relative; z-index: 2; }

/* FIXED, viewport-pinned background (mobile-safe) */
#apps-showcase .apps-bg{
  position: fixed;                         /* pinned to viewport */
  inset: 0;                                /* top/right/bottom/left:0 */
  background: url("../images/solutionbackground.jpg") center/cover no-repeat; /* <- correct path from assets/css */
  pointer-events: none;
  z-index: 0;
  opacity: 0;                              /* hidden until section is in view */
  transition: opacity .25s ease;
}

/* Optional tint to control "transparency" */
#apps-showcase .apps-bg::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(255,255,255,0.30);      /* lower number = less “wash”; try 0.2–0.35 */
}

/* Show the fixed bg only while #apps-showcase is visible */
#apps-showcase.is-on .apps-bg{ opacity: 1; }

/* Keep your browser card readable */
#apps-showcase .apps-browser{
  background: rgba(255,255,255,0.95);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}


/* SOLUTION: content above bg */
#solution.solution-v8 { position: relative; z-index: 0; }
#solution.solution-v8 > *:not(.sol-bg){ position: relative; z-index: 2; }

/* Fixed, full-viewport background (works on iOS/Android) */
#solution.solution-v8 .sol-bg{
  position: fixed;                 /* pinned to viewport */
  inset: 0;
  background: url("../images/solutionbackground.jpg") center/cover no-repeat;
  pointer-events: none;
  z-index: 0;
  opacity: 0;                      /* hidden until in view */
  transition: opacity .25s ease;
}

/* Optional: tint to control "transparency" */
#solution.solution-v8 .sol-bg::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(255,255,255,0.30); /* 0.15 = subtle, 0.5 = strong; use black for dark: rgba(0,0,0,.3) */
}

/* Show fixed bg only when the section is visible */
#solution.solution-v8.is-on .sol-bg{ opacity: 1; }

/* ===================== eP2P Apps + Insights Shared Background ===================== */
#apps-and-insights {
  position: relative;
  z-index: 0;
  overflow: hidden; /* ensures bg stays clean */
}

#apps-and-insights .bg-fixed {
  position: fixed;           /* stays pinned while scrolling */
  inset: 0;                  /* full viewport */
  background: url("assets/images/solutionbackground.jpg") center/cover no-repeat;
  z-index: -1;               /* sits behind content */
  pointer-events: none;      /* clicks pass through */
  opacity: 0.9;              /* adjust transparency (0 = invisible, 1 = solid) */
}

/* Make sure content is above background */
#apps-and-insights > * {
  position: relative;
  z-index: 1;
}

/* Let About HRSC text hug the left side */
.aboutv11-pane .about-main {
  margin-left: 0;
  padding-left: 0;
}

.aboutv11-pane .col-lg-7 {
  flex: 0 0 60%;   /* shrink to 60% instead of Bootstrap default */
  max-width: 60%;
}

.aboutv11-pane .col-lg-5 {
  flex: 0 0 40%;
  max-width: 40%;
}
/* === SOLUTION section spacing + background (final override) === */
#solution.solution-v8{
  position: relative;
  /* give the section real vertical space */
  padding: 110px 0 170px !important;   /* adjust numbers as you like */
  overflow: visible !important;        /* don't clip shadows/devices */
  z-index: 0;
}
#solution.solution-v8 .sol-bg {
  position: absolute;
  inset: 0;
  background: url("../images/backgroundtest2.png") center/cover no-repeat !important;
  opacity: 1 !important;        /* force solid */
  pointer-events: none;
  z-index: -1;
}
/* optional: a tiny spacer after the section if next block hugs it */
#solution.solution-v8::after{
  content:"";
  display:block;
  height: 24px;                        /* bump if you want more gap */
}


/* FORCE the solution background to be solid */
#solution.solution-v8 .sol-bg {
  position: absolute;
  inset: 0;
  background: url("../images/backgroundtest2.png") center/cover no-repeat !important;
  opacity: 1 !important;       /* force full visibility */
  pointer-events: none;
  z-index: -1;
}

/* Remove any tint/overlay that may be causing transparency */
#solution.solution-v8 .sol-bg::before,
#solution.solution-v8 .sol-bg::after {
  content: none !important;
  background: none !important;
  opacity: 1 !important;
}

/* minor layout cushions inside */
#solution.solution-v8 .device-duo{ margin-bottom: 10px; }
#solution.solution-v8 .solv8-grid{ margin-bottom: 10px; }

/* ===== Modules V2 Base ===== */
.modules-v2 { position: relative; overflow: hidden; padding: 64px 0; }
.modules-v2 .mods-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Background image behind the whole section */
.modules-v2 .mods-bg{
  position: absolute; inset: 0;
  background: url("assets/images/modules-bg.jpg") center/cover no-repeat;
  opacity: 1;              /* fully solid; change to 0.85 if you want slight fade */
  z-index: -1;
  pointer-events: none;
}

/* Section title */
.modules-v2 .section-title h6 { text-transform: uppercase; letter-spacing: .12em; margin: 0 0 6px; }
.modules-v2 .section-title h4 { margin: 0 0 18px; }
.modules-v2 .line-dec { width: 72px; height: 4px; border-radius: 4px; background: #e23b2e; margin: 0 auto 28px; }

/* Group headers */
.mods-group { margin-bottom: 28px; }
.mods-group-head { display: flex; align-items: baseline; gap: 14px; margin: 8px 0 14px; }
.mods-group-head h5 { margin: 0; font-weight: 700; }
.mods-group-head p { margin: 0; opacity: .8; }

/* Grid */
.mods-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 1199px){ .mods-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 992px){  .mods-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px){  .mods-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px){  .mods-grid{ grid-template-columns: 1fr; } }

/* Flip card */
.mod{
  perspective: 1000px;
  border-radius: 14px;
  cursor: pointer;
  outline: none;
}
.mod:focus-visible{ box-shadow: 0 0 0 3px rgba(16,185,129,.5); }
.mod .mod-inner{
  position: relative; transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
  border-radius: 14px; min-height: 170px;
}
.mod .front, .mod .back{
  position: absolute; inset: 0; border-radius: 14px;
  backface-visibility: hidden;
  display: grid; place-items: center;
  padding: 18px 14px; text-align: center;
}
.mod .front img{ width: 48px; height: 48px; object-fit: contain; margin-bottom: 10px; }
.mod .front h4{ font-size: 15px; line-height: 1.25; margin: 0; }
.mod .back{ transform: rotateY(180deg); padding: 16px; }
.mod .back ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; text-align: left; }
.mod .back li::before{ content: "✓"; margin-right: 8px; color: #0a7f56; }

/* Hover/flip */
.mod:hover .mod-inner,
.mod.is-flipped .mod-inner{ transform: rotateY(180deg); }

/* Tones (soft gradients) */
.tone-blue   .front{ background: linear-gradient(135deg,#e9f1ff, #dfeafe); }
.tone-teal   .front{ background: linear-gradient(135deg,#e9fffa, #def8f2); }
.tone-orange .front{ background: linear-gradient(135deg,#fff3e6, #ffe5d1); }
.tone-purple .front{ background: linear-gradient(135deg,#f4ecff, #efe6ff); }

.tone-blue   .back{ background: linear-gradient(135deg,#b7d0ff,#9db8ff); color:#0b2350; }
.tone-teal   .back{ background: linear-gradient(135deg,#b6f5e8,#9be9da); color:#053d32; }
.tone-orange .back{ background: linear-gradient(135deg,#ffd1ab,#ffb980); color:#5a2a00; }
.tone-purple .back{ background: linear-gradient(135deg,#d3c0ff,#c0a8ff); color:#271052; }

/* Nice elevation */
.mod .front, .mod .back{ box-shadow: 0 8px 20px rgba(2,8,23,.08); }

/* Give the section some breathing room below (fix “cut off” feeling) */
.modules-v2{ padding-bottom: 84px; }

/* ===== MODULES V4 – section, background, heading ===== */
.modules-v4{position:relative;overflow:hidden;padding:68px 0 104px}
.modules-v4 .mods-wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.modules-v4 .mods-bg{
  position:absolute;inset:0;
  background:url("assets/images/modules-bg.jpg") center/cover no-repeat;
  z-index:-1;opacity:1 /* set <1 if you want it softer */
}
.modules-v4 .section-title h6{letter-spacing:.12em;text-transform:uppercase;margin:0 0 6px}
.modules-v4 .section-title h4{margin:0 0 18px}
.modules-v4 .line-dec{width:80px;height:4px;border-radius:4px;background:#e23b2e;margin:0 auto 30px}

/* ===== Group header ===== */
.mods-group{margin:26px 0}
.mods-group-head{display:flex;align-items:baseline;gap:12px;margin:8px 0 14px}
.mods-group-head h5{margin:0;font-weight:800}
.mods-group-head .chip{font:600 12px/1 ui-sans-serif,system-ui;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:#0ea5e9;color:#fff}
.mods-group-head p{margin:0;opacity:.75}

/* ===== Grid ===== */
.mods-grid{display:grid;gap:16px;grid-template-columns:repeat(6,1fr)}
@media (max-width:1199px){.mods-grid{grid-template-columns:repeat(5,1fr)}}
@media (max-width:991px){ .mods-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width:768px){ .mods-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:460px){ .mods-grid{grid-template-columns:1fr}}

/* ===== Cards (flip) ===== */
.mod{perspective:1100px;border-radius:16px;cursor:pointer;outline:none}
.mod:focus-visible{box-shadow:0 0 0 3px rgba(56,189,248,.45)}
.mod .card{
  position:relative;min-height:184px;border-radius:16px;transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease
}
.mod .side{
  position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;
  display:grid;place-items:center;padding:18px 14px;text-align:center;
  box-shadow:0 14px 28px rgba(2,8,23,.10),0 2px 8px rgba(2,8,23,.06)
}
.mod .front{gap:8px}
.mod .front img,.mod .front svg{width:50px;height:50px;object-fit:contain}
.mod .front h4{font-size:15px;line-height:1.25;margin:0 2px}
.mod .back{transform:rotateY(180deg);padding:16px 16px}
.mod .back ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px;text-align:left}
.mod .back li{display:flex;gap:8px}
.mod .back li::before{content:"✓";color:#0a7f56;margin-top:1px}

/* flip triggers */
.mod:hover .card,.mod.is-flipped .card{transform:rotateY(180deg)}
.mod:hover .card{box-shadow:0 18px 36px rgba(2,8,23,.16),0 4px 12px rgba(2,8,23,.10)}

/* ===== Colorways (match your slide palette) ===== */
.t-core .front {background:linear-gradient(135deg,#e9e1da,#d6ccc5);color:#2b211d}
.t-core .back  {background:linear-gradient(135deg,#cdbfb6,#b8aaa2);color:#221a17}

.t-pay .front  {background:linear-gradient(135deg,#ffd7e5,#ffb7cf);color:#3d1425}
.t-pay .back   {background:linear-gradient(135deg,#ff9dbb,#ff7ea3);color:#2b0e19}

.t-hr  .front  {background:linear-gradient(135deg,#ffe8bd,#ffcf70);color:#3c2800}
.t-hr  .back   {background:linear-gradient(135deg,#ffc76c,#ffb23a);color:#2a1c00}

.t-sup .front  {background:linear-gradient(135deg,#d6e9ff,#bcd7ff);color:#0b2a55}
.t-sup .back   {background:linear-gradient(135deg,#9fc0ff,#7eabff);color:#062043}

.t-oth .front  {background:linear-gradient(135deg,#f1c3ff,#e49aff);color:#3b0a4a}
.t-oth .back   {background:linear-gradient(135deg,#d97bff,#c456f6);color:#2a0735}

/* subtle gloss + border */
.mod .front::after{
  content:"";position:absolute;inset:0;border-radius:16px;border:1px solid rgba(255,255,255,.35);
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0));
  pointer-events:none
}

/* a touch more bottom breathing room on the section */
.modules-v4{padding-bottom:110px}

/* ====== MATRIX LAYOUT ====== */
.ep2p-modules.matrix .mods-grid-5{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap:16px;
}
.ep2p-modules.matrix .section-title{ margin-bottom:14px; }

/* quick nav */
.mods-quicknav{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin:6px 0 18px;
}
.mods-quicknav a{
  padding:6px 12px; border-radius:999px; font-weight:700; font-size:13px;
  background:#f3f4f6; color:#111827; text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.mods-quicknav a:hover{ background:#e5e7eb; }

/* centered, colored tiles */
.ep2p-modules.matrix .mod{
  background:var(--tile-bg,#fff);
  border-radius:18px;
  padding:18px 14px 16px;
  box-shadow: 0 8px 22px rgba(2,8,23,.06);
  text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  transition: transform .18s ease, box-shadow .18s ease;
  min-height: 146px;
}
.ep2p-modules.matrix .mod:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(2,8,23,.12);
}
.ep2p-modules.matrix .mod.spacer{
  opacity:0; pointer-events:none; box-shadow:none; background:transparent; padding:0; min-height:0;
}

/* icon badge */
.ep2p-modules.matrix .mod .image{
  width:70px; height:70px; border-radius:16px; margin:2px auto 12px;
  display:grid; place-items:center; color:#fff;
  background:var(--tile-badge, #111827);
  box-shadow: 0 10px 18px rgba(2,8,23,.12), inset 0 0 0 2px rgba(255,255,255,.35);
}
.ep2p-modules.matrix .mod .image img{ width:36px; height:36px; object-fit:contain; }
.ep2p-modules.matrix .mod .image svg{ width:36px; height:36px; stroke:currentColor; fill:none; }

.ep2p-modules.matrix .mod h4{
  margin:0; font-size:14px; font-weight:800; letter-spacing:.1px; color:#0f172a;
}

/* Group pills */
.ep2p-modules.matrix .groupbar{
  grid-column: 1 / -1;
  display:grid; place-items:center;
  margin:10px 0 6px;
}
.ep2p-modules.matrix .groupbar .gb-pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 14px; border-radius:999px; font-weight:800; font-size:13px;
  color:#0f172a; background:#fff; 
  box-shadow: 0 6px 20px rgba(2,8,23,.05), inset 0 0 0 1px rgba(2,8,23,.06);
}

/* Base palette as RGB (lets us make tints easily) */
:root{
  --core: 109, 76, 65;          /* brown */
  --pay:  233, 30, 99;          /* pink */
  --str:  214, 152, 0;          /* amber */
  --sup:  33, 150, 243;         /* blue */
  --oth:  171, 71, 188;         /* purple */
}

/* Tile tints per group */
.mod.core     { --tile-bg: rgba(var(--core), .08);  }
.mod.payroll  { --tile-bg: rgba(var(--pay),  .08);  }
.mod.strategy { --tile-bg: rgba(var(--str),  .10);  }
.mod.support  { --tile-bg: rgba(var(--sup),  .08);  }
.mod.others   { --tile-bg: rgba(var(--oth),  .08);  }

/* Group pill subtle gradient */
.groupbar.core     .gb-pill{ background:linear-gradient(180deg, rgba(var(--core),.10), #fff); }
.groupbar.payroll  .gb-pill{ background:linear-gradient(180deg, rgba(var(--pay), .10), #fff); }
.groupbar.strategy .gb-pill{ background:linear-gradient(180deg, rgba(var(--str), .12), #fff); }
.groupbar.support  .gb-pill{ background:linear-gradient(180deg, rgba(var(--sup), .10), #fff); }
.groupbar.others   .gb-pill{ background:linear-gradient(180deg, rgba(var(--oth), .10), #fff); }

/* Badge tones (darker than tile; vary across items for richness) */
.mod.core.tone-1     { --tile-badge: rgb(109,76,65); }
.mod.core.tone-2     { --tile-badge: rgb(122,89,78); }
.mod.core.tone-3     { --tile-badge: rgb(93,64,55); }
.mod.core.tone-4     { --tile-badge: rgb(141,110,99); }

.mod.payroll.tone-1  { --tile-badge: rgb(233,30,99); }
.mod.payroll.tone-2  { --tile-badge: rgb(236,64,122); }
.mod.payroll.tone-3  { --tile-badge: rgb(240,98,146); }
.mod.payroll.tone-4  { --tile-badge: rgb(244,143,177); }
.mod.payroll.tone-5  { --tile-badge: rgb(216,27,96); }
.mod.payroll.tone-6  { --tile-badge: rgb(173,20,87); }
.mod.payroll.tone-7  { --tile-badge: rgb(255,82,82); }
.mod.payroll.tone-8  { --tile-badge: rgb(255,110,110); }
.mod.payroll.tone-9  { --tile-badge: rgb(255,23,68); }
.mod.payroll.tone-10 { --tile-badge: rgb(229,57,53); }

.mod.strategy.tone-1 { --tile-badge: rgb(198,146,0); }
.mod.strategy.tone-2 { --tile-badge: rgb(211,156,8); }
.mod.strategy.tone-3 { --tile-badge: rgb(230,173,28); }
.mod.strategy.tone-4 { --tile-badge: rgb(240,182,42); }
.mod.strategy.tone-5 { --tile-badge: rgb(209,143,0); }
.mod.strategy.tone-6 { --tile-badge: rgb(185,121,0); }
.mod.strategy.tone-7 { --tile-badge: rgb(224,160,0); }

.mod.support.tone-1  { --tile-badge: rgb(25,118,210); }
.mod.support.tone-2  { --tile-badge: rgb(30,136,229); }
.mod.support.tone-3  { --tile-badge: rgb(33,150,243); }
.mod.support.tone-4  { --tile-badge: rgb(66,165,245); }
.mod.support.tone-5  { --tile-badge: rgb(21,101,192); }
.mod.support.tone-6  { --tile-badge: rgb(13,71,161); }
.mod.support.tone-7  { --tile-badge: rgb(42,109,189); }
.mod.support.tone-8  { --tile-badge: rgb(95,168,255); }

.mod.others.tone-1   { --tile-badge: rgb(33,150,243); }    /* blue for Standard */
.mod.others.tone-2   { --tile-badge: rgb(171,71,188); }    /* purple for Crystal */

/* Responsive cols — keeps matrix feel while minimizing scroll */
@media (max-width: 1399px){
  .ep2p-modules.matrix .mods-grid-5{ grid-template-columns: repeat(5,minmax(0,1fr)); gap:14px; }
}
@media (max-width: 1199px){
  .ep2p-modules.matrix .mods-grid-5{ grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 991px){
  .ep2p-modules.matrix .mods-grid-5{ grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 640px){
  .ep2p-modules.matrix .mods-grid-5{ grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* smooth anchor scroll for quicknav */
html{ scroll-behavior:smooth; }


/* ===== MATRIX: make card color match its badge (harmonized tints) ===== */
/* 1) Give each group a single source color (the same color your badge uses) */
#modules.ep2p-modules.matrix article.mod.core     { --hero: #1e88e5; } /* Core = blue */
#modules.ep2p-modules.matrix article.mod.payroll  { --hero: #7cb342; } /* Payroll = green */
#modules.ep2p-modules.matrix article.mod.strategy { --hero: #fb8c00; } /* HR Strategic = orange */
#modules.ep2p-modules.matrix article.mod.support  { --hero: #e91e63; } /* Support = pink */
#modules.ep2p-modules.matrix article.mod.others   { --hero: #9c27b0; } /* Others = purple */

/* Make the INSIDE badge use the same color (so badge + card are related) */
#modules.ep2p-modules.matrix article.mod .image {
  background: var(--hero) !important;
  color: #fff !important;                     /* for inline SVGs that use currentColor */
}

/* 2) Tone steps = how strong to tint the card (1 = faint, higher = richer) */
#modules.ep2p-modules.matrix article.mod.tone-1  { --mix: 12%; }
#modules.ep2p-modules.matrix article.mod.tone-2  { --mix: 16%; }
#modules.ep2p-modules.matrix article.mod.tone-3  { --mix: 20%; }
#modules.ep2p-modules.matrix article.mod.tone-4  { --mix: 24%; }
#modules.ep2p-modules.matrix article.mod.tone-5  { --mix: 28%; }
#modules.ep2p-modules.matrix article.mod.tone-6  { --mix: 32%; }
#modules.ep2p-modules.matrix article.mod.tone-7  { --mix: 36%; }
#modules.ep2p-modules.matrix article.mod.tone-8  { --mix: 40%; }
#modules.ep2p-modules.matrix article.mod.tone-9  { --mix: 44%; }
#modules.ep2p-modules.matrix article.mod.tone-10 { --mix: 48%; }

/* 3) Use the group color + tone to generate a matching card + border + hover */
@supports (color: color-mix(in srgb, #000 10%, #fff)) {
  #modules.ep2p-modules.matrix article.mod {
    background:    color-mix(in srgb, var(--hero) var(--mix,16%), #fff) !important;
    border-color:  color-mix(in srgb, var(--hero) calc(var(--mix,16%) + 14%), #fff) !important;
    box-shadow: 0 14px 36px color-mix(in srgb, var(--hero) 16%, transparent) !important;
  }
  #modules.ep2p-modules.matrix article.mod:hover {
    box-shadow: 0 20px 48px color-mix(in srgb, var(--hero) 28%, transparent) !important;
  }
}

/* 4) Fallback for older browsers (no color-mix): a gentle neutral so it never clashes) */
@supports not (color: color-mix(in srgb, #000 10%, #fff)) {
  #modules.ep2p-modules.matrix article.mod {
    background:#fafbfc !important;
    border-color:#e9edf2 !important;
  }
}

/* ===== MATRIX UPGRADE — depth, sizing, centering ===== */

/* center every row in the 5-col matrix (even if the row has 1–4 items) */
#modules.ep2p-modules.matrix .mods-grid-5{
  display: grid;
  grid-template-columns: repeat(5, 220px);   /* fixed card width → easy centering */
  justify-content: center;                   /* <-- center sparse rows */
  gap: 26px;
}

/* make cards/badges bigger */
#modules.ep2p-modules.matrix article.mod{
  min-height: 198px !important;
  padding: 26px 18px 20px !important;
  border-radius: 20px !important;
}

/* larger icon badge with richer 3D finish (still uses --hero from earlier) */
#modules.ep2p-modules.matrix article.mod .image{
  width: 88px !important;
  height: 88px !important;
  border-radius: 22px !important;
  box-shadow:
    0 10px 26px color-mix(in srgb, var(--hero, #0ea5e9) 24%, transparent),
    inset 0 0 0 6px rgba(255,255,255,.35) !important;
}

/* bigger titles */
#modules.ep2p-modules.matrix article.mod h4{
  font-size: 1.08rem !important;
  letter-spacing: .1px;
}

/* depthy card skin driven by the SAME group color (uses your --hero + --mix) */
@supports (color: color-mix(in srgb, #000 10%, #fff)){
  #modules.ep2p-modules.matrix article.mod{
    --bg: color-mix(in srgb, var(--hero, #0ea5e9) var(--mix, 18%), #fff);
    --bd: color-mix(in srgb, var(--hero, #0ea5e9) calc(var(--mix,18%) + 16%), #fff);

    background:
      linear-gradient(180deg, var(--bg) 0%, #fff 120%) !important;
    border: 1px solid var(--bd) !important;
    box-shadow:
      0 18px 48px color-mix(in srgb, var(--hero, #0ea5e9) 20%, transparent),
      0 1px 0 rgba(255,255,255,.45) inset !important;
    position: relative;
    overflow: hidden;
  }
  /* elegant inner highlight ring */
  #modules.ep2p-modules.matrix article.mod::after{
    content:"";
    position:absolute; inset:0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
    pointer-events:none;
  }
  /* lively hover (slightly larger + glow in the same hue) */
  #modules.ep2p-modules.matrix article.mod:hover{
    transform: translateY(-6px) scale(1.02);
    box-shadow:
      0 26px 64px color-mix(in srgb, var(--hero, #0ea5e9) 32%, transparent),
      0 1px 0 rgba(255,255,255,.55) inset !important;
    border-color: color-mix(in srgb, var(--hero, #0ea5e9) 40%, #fff);
  }
}

/* responsive keeps rows centered */
@media (max-width:1180px){
  #modules.ep2p-modules.matrix .mods-grid-5{ grid-template-columns: repeat(4, 220px); }
}
@media (max-width:920px){
  #modules.ep2p-modules.matrix .mods-grid-5{ grid-template-columns: repeat(3, 220px); }
}
@media (max-width:640px){
  #modules.ep2p-modules.matrix .mods-grid-5{ grid-template-columns: repeat(2, 220px); }
}

/* ===== Group titles — bigger & bolder pill ===== */
#modules.ep2p-modules.matrix .groupbar{
  grid-column: 1 / -1; display:grid; place-items:center; margin: 14px 0 6px;
}
#modules.ep2p-modules.matrix .groupbar .gb-pill{
  font-size: 1.18rem;       /* bigger */
  font-weight: 900;
  letter-spacing: .02em;
  padding: 10px 18px;
  border-radius: 999px;
  background: #0f172a;      /* dark navy pill */
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.12), inset 0 0 0 1px rgba(255,255,255,.08);
}
/* Support palette (includes tone-7 used by Letter Management) */
/* Hard pin the exact card if needed */
#modules.ep2p-modules.matrix .mods-grid-5 .mod.support.tone-7 { background:#d81b60 !important; border-color:#bb1650 !important; }
#modules.ep2p-modules.matrix article.mod.support.tone-1 { background:#fce4ec !important; border-color:#f6c7d8 !important; }
#modules.ep2p-modules.matrix article.mod.support.tone-2 { background:#f8bbd0 !important; border-color:#ee9bbc !important; }
#modules.ep2p-modules.matrix article.mod.support.tone-3 { background:#f48fb1 !important; border-color:#e5719a !important; }
#modules.ep2p-modules.matrix article.mod.support.tone-4 { background:#f06292 !important; border-color:#dd4f82 !important; }
#modules.ep2p-modules.matrix article.mod.support.tone-5 { background:#ec407a !important; border-color:#d6336b !important; }
#modules.ep2p-modules.matrix article.mod.support.tone-6 { background:#e91e63 !important; border-color:#cb1652 !important; }
/* Letter Management is tone-7 → same depth as siblings */
#modules.ep2p-modules.matrix article.mod.support.tone-7 { background:#d81b60 !important; border-color:#bb1650 !important; }
#modules.ep2p-modules.matrix article.mod.support.tone-8 { background:#c2185b !important; border-color:#a7134c !important; }

/* ===== FINAL CARD COLOR OVERRIDES (match badge tones) ===== */

/* Core Modules (4) */
#modules.ep2p-modules.matrix article.mod.core.tone-1 { background:#90caf9 !important; border-color:#64b5f6 !important; }
#modules.ep2p-modules.matrix article.mod.core.tone-2 { background:#64b5f6 !important; border-color:#42a5f5 !important; }
#modules.ep2p-modules.matrix article.mod.core.tone-3 { background:#42a5f5 !important; border-color:#2196f3 !important; }
#modules.ep2p-modules.matrix article.mod.core.tone-4 { background:#2196f3 !important; border-color:#1e88e5 !important; }

/* Payroll Modules (10) */
#modules.ep2p-modules.matrix article.mod.payroll.tone-1  { background:#f1f8e9 !important; border-color:#dceccc !important; }
#modules.ep2p-modules.matrix article.mod.payroll.tone-2  { background:#dcedc8 !important; border-color:#c5e1a5 !important; }
#modules.ep2p-modules.matrix article.mod.payroll.tone-3  { background:#c5e1a5 !important; border-color:#aed581 !important; }
#modules.ep2p-modules.matrix article.mod.payroll.tone-4  { background:#aed581 !important; border-color:#9ccc65 !important; }
#modules.ep2p-modules.matrix article.mod.payroll.tone-5  { background:#9ccc65 !important; border-color:#8bc34a !important; }
#modules.ep2p-modules.matrix article.mod.payroll.tone-6  { background:#8bc34a !important; border-color:#7cb342 !important; }
#modules.ep2p-modules.matrix article.mod.payroll.tone-7  { background:#7cb342 !important; border-color:#689f38 !important; }
#modules.ep2p-modules.matrix article.mod.payroll.tone-8  { background:#689f38 !important; border-color:#558b2f !important; }
#modules.ep2p-modules.matrix article.mod.payroll.tone-9  { background:#558b2f !important; border-color:#33691e !important; }
#modules.ep2p-modules.matrix article.mod.payroll.tone-10 { background:#33691e !important; border-color:#2c5d1b !important; }

/* HR Strategic Modules (7) */
#modules.ep2p-modules.matrix article.mod.strategy.tone-1 { background:#ffe0b2 !important; border-color:#ffcc80 !important; }
#modules.ep2p-modules.matrix article.mod.strategy.tone-2 { background:#ffcc80 !important; border-color:#ffb74d !important; }
#modules.ep2p-modules.matrix article.mod.strategy.tone-3 { background:#ffb74d !important; border-color:#ffa726 !important; }
#modules.ep2p-modules.matrix article.mod.strategy.tone-4 { background:#ffa726 !important; border-color:#ff9800 !important; }
#modules.ep2p-modules.matrix article.mod.strategy.tone-5 { background:#ff9800 !important; border-color:#fb8c00 !important; }
#modules.ep2p-modules.matrix article.mod.strategy.tone-6 { background:#fb8c00 !important; border-color:#f57c00 !important; }
#modules.ep2p-modules.matrix article.mod.strategy.tone-7 { background:#f57c00 !important; border-color:#ef6c00 !important; }

/* Support Modules (8) */
#modules.ep2p-modules.matrix article.mod.support.tone-1 { background:#f8bbd0 !important; border-color:#f48fb1 !important; }
#modules.ep2p-modules.matrix article.mod.support.tone-2 { background:#f48fb1 !important; border-color:#f06292 !important; }
#modules.ep2p-modules.matrix article.mod.support.tone-3 { background:#f06292 !important; border-color:#ec407a !important; }
#modules.ep2p-modules.matrix article.mod.support.tone-4 { background:#ec407a !important; border-color:#e91e63 !important; }
#modules.ep2p-modules.matrix article.mod.support.tone-5 { background:#e91e63 !important; border-color:#d81b60 !important; }
#modules.ep2p-modules.matrix article.mod.support.tone-6 { background:#d81b60 !important; border-color:#c2185b !important; }
#modules.ep2p-modules.matrix article.mod.support.tone-7 { background:#c2185b !important; border-color:#ad1457 !important; }
#modules.ep2p-modules.matrix article.mod.support.tone-8 { background:#ad1457 !important; border-color:#880e4f !important; }

/* Others (2) */
#modules.ep2p-modules.matrix article.mod.others.tone-1 { background:#ba68c8 !important; border-color:#ab47bc !important; } /* Standard Report */
#modules.ep2p-modules.matrix article.mod.others.tone-2 { background:#8e24aa !important; border-color:#7b1fa2 !important; } /* Crystal Report */

/* ===== Center modules when less than 5 ===== */
#modules.ep2p-modules.matrix {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Center modules horizontally */
  gap: 1.5rem; /* spacing between cards */
}

#modules.ep2p-modules.matrix article.mod {
  flex: 0 1 180px; /* card width (adjust if needed) */
}

/* Center short groups (<5 cards) */
#modules.ep2p-modules.matrix .mods-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;   /* centers the two cards */
  gap:24px 22px;            /* match grid spacing */
}

/* make row cards size like grid cards */
#modules.ep2p-modules.matrix .mods-row .mod{
  width:220px;              /* adjust if your grid card width differs */
}
/* Special rule for the Others group row */
.mods-row.others-row {
  display: flex !important;     /* override grid */
  justify-content: center;      /* center horizontally */
  gap: 24px;                    /* space between the two cards */
  margin-top: 20px;             /* optional spacing from title */
}

/* Keep card sizing consistent */
.mods-row.others-row .mod {
  width: 220px;   /* adjust if your other cards have a different fixed width */
}
/* --- Auto rows created by JS --- */
.mods-grid-5 { display: block !important; } /* let rows manage their own layout */

.mods-row.auto-group{
  margin: 14px 0 8px;
}

/* ≥5 cards → 5-col matrix */
.mods-row.auto-group.is-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: 22px;
}

/* <5 cards → centered row */
.mods-row.auto-group.is-center{
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;           /* still wraps nicely on mobile */
}

/* keep card width consistent when centered */
.mods-row.auto-group.is-center .mod{
  width: min(220px, 100%);
}

/* === MATRIX GROUP SPACING — BALANCED RHYTHM === */
/* Space between a group title and its cards */
.mods-grid-5 .groupbar{
  margin: 28px 0 12px !important;    /* top, sides, bottom */
}

/* Space after each card row before the next group title */
.mods-row.auto-group{
  margin: 0 0 28px !important;       /* bottom gap only */
}

/* Tighter on tablets/phones so it doesn't feel airy */
@media (max-width: 992px){
  .mods-grid-5 .groupbar{ margin: 24px 0 10px !important; }
  .mods-row.auto-group{    margin: 0 0 22px !important; }
}
@media (max-width: 576px){
  .mods-grid-5 .groupbar{ margin: 20px 0 8px !important; }
  .mods-row.auto-group{    margin: 0 0 18px !important; }
}

/* Kill the spacer tiles so they don't add vertical height */
.mods-grid-5 .mod.spacer{
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Balance the spacing around group titles */
.mods-grid-5 .groupbar{
  margin: 18px 0 10px !important;   /* reduce top gap, small gap to cards */
}

/* Optional: a touch tighter row gap on large screens */
@media (min-width: 992px){
  .mods-grid-5{ row-gap: 18px !important; }  /* was larger */
}
#modules.ep2p-modules.matrix {
  background-image: url("../images/backgroundtest2-4.jpg") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;   /* fills width/height */
  background-position: center top !important;
  background-attachment: fixed;        /* gives parallax feel */
  padding: 80px 0 88px !important;
}

/* ===== Section background with soft overlay ===== */
#modules.ep2p-modules.matrix {
  position: relative;
  /* less transparent overlay => bg image still visible */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.95)),
    url("../images/testforaboutus.png") center/cover no-repeat;
  padding: 72px 0 88px;
}

/* ===== Group layout: landscape rows ===== */
#modules .groupbar { margin: 56px auto 18px; text-align: center; }
#modules .gb-pill { display:inline-block; padding:8px 18px; border-radius:999px; background:#0e1522; color:#fff; font-weight:700; letter-spacing:.2px; }

#modules .mods-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;   /* auto-center when <5 cards */
  gap: 28px 36px;           /* row/column gaps */
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== Card sizing (keeps your existing visuals) ===== */
#modules .mod{
  width: 220px;     /* consistent columns in each row */
  min-height: 220px;
  border-radius: 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* Larger icons/text inside (as you asked earlier) */
#modules .mod .image { width: 88px; height: 88px; border-radius: 20px; display:grid; place-items:center; margin-bottom: 14px; }
#modules .mod .image img, 
#modules .mod .image svg { width: 44px; height: 44px; }
#modules .mod h4 { font-size: 14.5px; line-height: 1.25; margin: 0; }

/* ===== Balanced spacing between groups ===== */
#modules .mods-row + .groupbar { margin-top: 64px; }

/* ===== Others row stays side-by-side and centered ===== */
#modules .others .mods-row,
#modules .mods-row.others-row { justify-content: center; }

/* (Your tone/background color rules stay intact) */
/* If you need the subtle card shadow/depth from earlier, keep those rules too */

/* kill the legacy 5-col grid so flex rows take over */
#modules .mods-grid-5 { 
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  padding: 0 !important;
}

/* spacers from the old layout */
#modules .mod.spacer { display: none !important; }

/* nuke any legacy floats/margins that could shift cards */
#modules.matrix article.mod {
  float: none !important;
  margin: 0 !important;
}

/* ensure every groupbar hugs its row nicely and rows center */
#modules .groupbar + .mods-row { margin-top: 14px; }
#modules .mods-row { justify-content: center !important; }

/* 1) Ensure we’re using a flexible, wrapping row layout */
#modules.ep2p-modules.matrix .mods-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
}

#modules.ep2p-modules.matrix .mods-row,
#modules.ep2p-modules.matrix .mods-grid-5 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 22px !important;
}

/* If .mods-grid-5 is still around, don’t let it force a grid */
#modules.ep2p-modules.matrix .mods-grid-5 {
  align-items: flex-start;
}

/* 2) Cards are regular blocks that can wrap to the next line naturally */
#modules.ep2p-modules.matrix article.mod {
  float: none !important;
  margin: 0 !important;
}

/* 3) Hide any legacy spacers just in case */
#modules.ep2p-modules.matrix .mod.spacer { display: none !important; }

/* 4) Tiny group “chip” above the first card of each group */
#modules.ep2p-modules.matrix article.mod[data-group] {
  position: relative;
}

/* the chip */
#modules.ep2p-modules.matrix article.mod[data-group]::before {
  content: attr(data-group);
  position: absolute;
  top: -52px;                 /* distance above the card */
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #fff;
  background: #0f172a;        /* dark navy pill */
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(15,23,42,.25);
  white-space: nowrap;
  z-index: 2;
}

/* 5) Give the first card of the whole section a bit more top space
      (so the first chip doesn’t collide with the section title) */
#modules.ep2p-modules.matrix .mods-grid-5 article.mod:first-of-type {
  margin-top: 18px;
}

/* 6) Make sure rows stay centered as they wrap */
#modules.ep2p-modules.matrix .mods-grid-5 {
  justify-content: center;
}

/* OPTIONAL: tighten vertical rhythm a bit now that bars are gone */
#modules.ep2p-modules.matrix { padding-top: 48px; }

/* === Modules grid: 6 per row === */
#modules.ep2p-modules.matrix .mods-grid-5{
  --cols: 6;                 /* 👈 six per row */
  --gap: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* center short rows */
  gap: var(--gap);
}

/* Card width formula */
#modules.ep2p-modules.matrix .mods-grid-5 > .mod{
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  max-width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
}

/* Group pill label (stays as before) */
#modules.ep2p-modules.matrix .mods-grid-5 > .mod[data-group]{
  position: relative;
  scroll-margin-top: 110px; /* nice anchor jump */
}
#modules.ep2p-modules.matrix .mods-grid-5 > .mod[data-group]::before{
  content: attr(data-group);
  position: absolute;
  top: -48px;
  left: 50%;
  transform: translateX(-50%);
  background: #0c1320;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  padding: 10px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(12,19,32,.18);
  white-space: nowrap;
}

/* Responsive fallbacks (optional) */
@media (max-width: 1200px){
  #modules.ep2p-modules.matrix .mods-grid-5{ --cols: 5; }
}
@media (max-width: 992px){
  #modules.ep2p-modules.matrix .mods-grid-5{ --cols: 4; }
}
@media (max-width: 768px){
  #modules.ep2p-modules.matrix .mods-grid-5{ --cols: 3; }
}
@media (max-width: 520px){
  #modules.ep2p-modules.matrix .mods-grid-5{ --cols: 2; }
}
.mods-grid-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5rem; /* adjust spacing */
}
@media (max-width: 1200px) {
  .mods-grid-6 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .mods-grid-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* === FULL-BLEED MODULES SECTION (edge-to-edge) === */
#modules.ep2p-modules.matrix{
  /* pull the section out of any centered wrapper */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* keep your background + padding */
  padding: clamp(24px, 3vw, 56px) 0 clamp(48px, 5vw, 80px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.94)),
    url("../images/backgroundtest2-2.png") center/cover no-repeat;
}

/* inner wrapper should not re-constrain width */
#modules .mods-wrap{
  max-width: none !important;
  padding-inline: clamp(12px, 3vw, 32px);
}

/* 6 per row across the full width */
#modules .mods-grid-6{
  display: grid;
  grid-template-columns: repeat(6, minmax(200px, 1fr));
  gap: clamp(14px, 1.8vw, 28px);
}

/* group labels span the whole row */
#modules .groupbar{ grid-column: 1 / -1; }

/* quick chips stay centered and not too wide */
#modules .mods-quicknav{ justify-content: center; }

/* ===== Module Group Frames (non-intrusive overlay) ===== */
.ep2p-modules .mods-grid-6 { position: relative; } /* anchor for absolute frames */

.mod-group-frame {
  position: absolute;
  border-radius: 14px;
  border: 2px solid var(--group-accent, #9aa4b2);
  background: color-mix(in hsl, var(--group-accent, #9aa4b2) 6%, transparent);
  /* Fallback if color-mix not supported */
  background: rgba(154,164,178,0.06);
  box-shadow: 0 8px 24px rgba(0,0,0,0.06) inset;
  pointer-events: none;       /* never block clicks on cards */
  z-index: 0;                 /* sit behind the cards */
}

/* keep cards above the frame */
.ep2p-modules .mods-grid-6 > .mod { position: relative; z-index: 1; }

/* Floating label/pill */
.mod-group-caption {
  position: absolute;
  top: -18px;
  left: 18px;
  transform: translateY(-50%);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  background: var(--group-accent, #9aa4b2);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  pointer-events: none;
  white-space: nowrap;
}

/* Accent colors per family (match your existing tones) */
.mod-group--core     { --group-accent: #1d4ed8; } /* blue */
.mod-group--payroll  { --group-accent: #e91e63; } /* pink */
.mod-group--strategy { --group-accent: #ff9800; } /* orange */
.mod-group--support  { --group-accent: #3f51b5; } /* indigo */
.mod-group--others   { --group-accent: #0d8e82; } /* teal */

/* Optional: a touch more inner air so frame doesn’t hug cards too tightly */
.mod-group-frame { --pad: 12px; }

.ep2p-modules .mods-grid-6{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px;
  position:relative;
}
.ep2p-modules .mod{
  background:#fff;
  border-radius:16px;
  padding:18px;
  text-align:center;
  position:relative;
  z-index:2;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
}

.group-bg{
  position:absolute;
  z-index:1;
  border-radius:20px;
  padding:0;
}
.group-bg .group-label{
  position:absolute;
  top:-12px; left:16px;
  padding:6px 12px;
  font-size:12px;
  font-weight:600;
  color:#fff;
  border-radius:999px;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
}

/* Distinct colors per group */
.plate-core     { background:rgba(33,150,243,.08); }
.plate-core .group-label{ background:#2196f3; }

.plate-payroll  { background:rgba(76,175,80,.08); }
.plate-payroll .group-label{ background:#4caf50; }

.plate-strategy { background:rgba(255,152,0,.12); }
.plate-strategy .group-label{ background:#fb8c00; }

.plate-support  { background:rgba(236,72,153,.10); }
.plate-support .group-label{ background:#ec407a; }

.plate-others   { background:rgba(126,87,194,.12); }
.plate-others .group-label{ background:#7e57c2; }


/* Base module card acts as border */
.mod {
  border-radius: 16px;   /* rounded border */
  padding: 4px;          /* thickness of border */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Inner face */
.mod .card-inner {
  border-radius: 12px;
  background: inherit;   /* takes same tone color */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Example tones: darker on wrapper, lighter on inner */
.mod.core.tone-1 { background-color: #1c6ed5; }   /* dark blue border */
.mod.core.tone-1 .card-inner { background-color: #2f85f5; }  /* lighter blue face */

.mod.payroll.tone-1 { background-color: #2d7a2f; }   /* dark green border */
.mod.payroll.tone-1 .card-inner { background-color: #4caf50; } /* lighter green face */

/* Repeat same pattern for other groups/tone variations */

.mod-border {
  display: inline-block;
  padding: 6px;              /* thickness of border */
  border-radius: 22px;       /* slightly larger than .mod radius */
  background-color: rgba(0, 0, 0, 0.08); /* subtle dark border effect */
}

/* group-specific border colors */
.core-border { background-color: rgba(63,169,245,0.25); }      /* blue border */
.payroll-border { background-color: rgba(60,179,113,0.25); }   /* green border */
.hr-border { background-color: rgba(255,165,0,0.25); }         /* orange border */
.support-border { background-color: rgba(255,105,180,0.25); }  /* pink border */
.others-border { background-color: rgba(155,89,182,0.25); }    /* purple border */



/* label row spans the full grid width */
.group-tag{
  grid-column: 1 / -1;
  margin: 28px 0 6px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* little color dot */
.group-tag::before{
  content:"";
  width: 10px; height: 10px; border-radius: 50%;
  box-shadow: 0 0 0 4px currentColor inset;
  opacity: .9;
}

/* colors per family – align with your plate/border hues */
.group-tag.core     { color:#3fa9f5; }     /* blue */
.group-tag.payroll  { color:#3cb371; }     /* green */
.group-tag.strategy { color:#ff9800; }     /* orange */
.group-tag.support  { color:#ec407a; }     /* pink/indigo */
.group-tag.others   { color:#0d8e82; }     /* teal */


/* ====== COLOR TOKENS (match your families) ====== */
:root{
  --core-accent:     #3FA9F5; /* blue */
  --payroll-accent:  #3CB371; /* green */
  --strategy-accent: #FF9800; /* orange */
  --support-accent:  #E91E63; /* pink */
  --others-accent:   #7E57C2; /* purple */

  --chip-bg: #0b1220;
  --chip-fg: #e7eefc;
}

/* Map accents to cards via family classes you already use */
.mod.core     { --accent: var(--core-accent); }
.mod.payroll  { --accent: var(--payroll-accent); }
.mod.strategy { --accent: var(--strategy-accent); }
.mod.support  { --accent: var(--support-accent); }
.mod.others   { --accent: var(--others-accent); }

/* ====== JUMP CHIPS ====== */
.mods-quicknav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin: 14px auto 22px;
  padding: 6px 8px;
}

.mods-quicknav a{
  --grad: linear-gradient(135deg, var(--accent, #64748b), color-mix(in srgb, var(--accent, #64748b) 72%, white));
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.5ch;
  padding:10px 14px;
  border-radius:999px;
  background: #111827;        /* base for inset border illusion */
  color: var(--chip-fg);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--accent, #64748b) 70%, transparent),
    0 6px 14px rgba(0,0,0,.15);
  transition: transform .18s ease, box-shadow .18s ease, color .18s ease;
}
.mods-quicknav a::before{
  content:"";
  position:absolute; inset:2px;
  border-radius:999px;
  background: var(--grad);
  opacity:.22;
  transition:opacity .2s ease;
}
.mods-quicknav a:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--accent, #64748b) 85%, transparent),
    0 10px 22px rgba(0,0,0,.22);
}
.mods-quicknav a:hover::before{ opacity:.33; }

/* Active chip (scrollspy) */
.mods-quicknav a.is-active{
  color:#fff;
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--accent, #64748b) 95%, transparent),
    0 10px 24px rgba(0,0,0,.24);
}
.mods-quicknav a.is-active::before{ opacity:.5; }

/* Assign accent per target */
.mods-quicknav a[href="#core"]     { --accent: var(--core-accent); }
.mods-quicknav a[href="#payroll"]  { --accent: var(--payroll-accent); }
.mods-quicknav a[href="#strategy"] { --accent: var(--strategy-accent); }
.mods-quicknav a[href="#support"]  { --accent: var(--support-accent); }
.mods-quicknav a[href="#others"]   { --accent: var(--others-accent); }

/* Smooth anchor offset (so titles/cards don’t hide under sticky headers) */
:target { scroll-margin-top: 90px; }

/* ====== FLIP OVERLAY (does not change your card size/look) ====== */
.mod{ position:relative; }

.flipcard{
  position:absolute; inset:0;
  border-radius: inherit;
  perspective: 1000px;
  pointer-events: none;             /* safe by default */
  z-index: 3;                       /* above inner face but below any menus you may have */
}

.flipcard-inner{
  width:100%; height:100%;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}

.flip-face{
  position:absolute; inset:0;
  border-radius: inherit;
  backface-visibility: hidden;
  display:flex; align-items:center; justify-content:center;
  padding: 14px;
  text-align:center;
}

/* Back face uses the module's accent subtly */
.flip-face.back{
  transform: rotateY(180deg);
  background:
    radial-gradient(120% 120% at 20% 0%,
      color-mix(in srgb, var(--accent, #64748b) 16%, transparent),
      transparent 70%),
    color-mix(in srgb, var(--accent, #64748b) 12%, #ffffff 88%);
  color:#0b1220;
  font-weight:600;
  line-height:1.35;
}

/* States */
.flipcard.is-flipped .flipcard-inner{ transform: rotateY(180deg); }

/* Hover/focus flips (no JS needed for that part) */
.mod:hover   .flipcard,
.mod:focus   .flipcard,
.mod:focus-within .flipcard{ pointer-events:auto; }
.mod:hover   .flipcard .flipcard-inner,
.mod:focus   .flipcard .flipcard-inner,
.mod:focus-within .flipcard .flipcard-inner{ transform: rotateY(180deg); }

/* One-time nudge hint (before user interacts) */
.flipcard.hint .flipcard-inner{
  animation: flip-hint 1.6s ease-out .5s 1 both;
}
@keyframes flip-hint{
  0%{transform:rotateY(0deg)}
  25%{transform:rotateY(12deg)}
  50%{transform:rotateY(0deg)}
  75%{transform:rotateY(12deg)}
  100%{transform:rotateY(0deg)}
}

/* Small helper for the back text */
.flip-desc{
  max-width: 90%;
  font-size: .95rem;
}

/* ====== OPTIONAL: nicer anchor scrolling ====== */
html{ scroll-behavior: smooth; }

/* (Keeps your existing .mod-border, .core-border, etc. untouched) */

/* ===== JUMP CHIPS: Larger, bolder, clearer colors ===== */
.mods-quicknav{
  position: sticky;            /* stays visible as user scans modules */
  top: 12px;                   /* tweak if you have a sticky header */
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  padding: 10px 14px;
  margin: 10px auto 22px;
  backdrop-filter: blur(6px);
}

.mods-quicknav a{
  /* size & shape */
  font-size: 16px;             /* bigger label */
  line-height: 1;
  padding: 13px 18px 13px 42px;/* extra left padding for color dot */
  border-radius: 999px;

  /* color & contrast (solid accent pill) */
  background: var(--accent, #64748b);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .02em;

  /* crisp edge + subtle depth */
  box-shadow:
    inset 0 -2px 0 color-mix(in srgb, #000 12%, transparent),
    0 8px 22px rgba(0,0,0,.18);
  border: 1px solid color-mix(in srgb, var(--accent, #64748b) 70%, #ffffff 30%);

  /* motion */
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease;
}

/* Leading color “dot” so the family is obvious at a glance */
.mods-quicknav a::before{
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, #fff 70%, transparent) inset;
  background: #fff; /* base; we overlay accent ring below */
}

/* Accent ring around the dot that matches the pill color */
.mods-quicknav a::after{
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px color-mix(in srgb, #000 10%, transparent) inset;
  background: color-mix(in srgb, var(--accent, #64748b) 35%, transparent);
}

/* Hover/active: stronger depth and a tiny lift */
.mods-quicknav a:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 -2px 0 color-mix(in srgb, #000 18%, transparent),
    0 12px 28px rgba(0,0,0,.26);
  filter: saturate(1.05) brightness(1.02);
}

/* Active chip (scrollspy) gets a brighter pill + glow */
.mods-quicknav a.is-active{
  box-shadow:
    inset 0 -2px 0 color-mix(in srgb, #000 22%, transparent),
    0 0 0 4px color-mix(in srgb, var(--accent, #64748b) 20%, transparent),
    0 14px 30px rgba(0,0,0,.30);
  filter: saturate(1.15) brightness(1.04);
}

/* Map each chip to its family accent (same colors you already use) */
.mods-quicknav a[href="#core"]     { --accent: #3FA9F5; }  /* Core: blue */
.mods-quicknav a[href="#payroll"]  { --accent: #8b1111; }  /* Payroll: green */
.mods-quicknav a[href="#strategy"] { --accent: #FF9800; }  /* HR Strategic: orange */
.mods-quicknav a[href="#support"]  { --accent: #E91E63; }  /* Support: pink */
.mods-quicknav a[href="#others"]   { --accent: #7E57C2; }  /* Others: purple */

/* Responsive tweaks */
@media (max-width: 640px){
  .mods-quicknav a{
    font-size: 15px;
    padding: 12px 16px 12px 40px;
  }
}

/* FAQ v2 Section Background */
.faqv2 {
  position: relative;
  padding: 100px 0;
  background: 
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.05),   /* lighter white, lets background show */
      rgba(255, 255, 255, 0.05)
    ),
    url("../images/../images/ep2pbacy.jpg") center/cover no-repeat; 
}
.faqv2-orb {
  display: none !important;
}

/* ======== Merge Apps + Insights into About section ======== */
#about .about-extras {
  position: relative;
  margin-top: 40px;
}

#about .about-extras .bg-fixed {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("../images/ep2pbacy2.jpg") contain/cover no-repeat fixed;
  opacity: 1;
}

#about .apps-section       { margin-top: 0; padding-top: 16px; }
#about .insights.section   { margin-top: 28px; }

#about .apps-section > .container:first-child { padding-top: 0; margin-top: 0; }
#about .insights.section  > .container:first-child { padding-top: 0; margin-top: 0; }

#apps-and-insights, .bg-wrapper { display: contents !important; }

/* =========================
   ABOUT → APPS → INSIGHTS
   Spacing fixes (safe overrides)
   ========================= */

/* 1) Make spacing predictable with a few tokens */
#about {
  --blk-gap-lg: clamp(56px, 6.5vw, 88px);   /* section spacing */
  --blk-gap-md: clamp(28px, 3.5vw, 48px);   /* block spacing */
  --blk-gap-sm: clamp(16px, 2vw, 28px);     /* small spacing */
}

/* 2) Tighten the space under the VMV grid and the years badge */
#about .vmv-grid { margin-bottom: var(--blk-gap-sm) !important; }
#about .years-badge {
  margin-top: var(--blk-gap-sm) !important;
  margin-bottom: var(--blk-gap-sm) !important; /* ↓ was causing a big gulf */
}

/* 3) Pull the Dashboard section closer to the content above */
#about .about-extras { margin-top: var(--blk-gap-sm) !important; }

#about .apps-section {
  padding-top: 0 !important;                  /* no extra top padding */
  margin-top: 0 !important;                   /* sit right after the years badge */
  margin-bottom: var(--blk-gap-md) !important;/* gentle space before Insights */
}

/* 4) Make the dashboard label breathe (not squished to the screen) */
#about .apps-section .chrome { margin-bottom: 10px !important; }

/* 5) Standardize spacing on the Insights block */
#about #insights.insights.section {
  padding-top: 0 !important;                  /* remove double padding */
  margin-top: 0 !important;
  margin-bottom: var(--blk-gap-lg) !important;
}

/* Headings inside Insights: compact but clear */
#about #insights .section-heading {
  margin: 0 0 var(--blk-gap-sm) !important;
  padding: 0 !important;
}

/* 6) Optional: nudge the figures row a bit closer to its heading */
#about #figures { margin-top: var(--blk-gap-sm) !important; }

/* 7) Make sure the dashboard image doesn’t introduce odd spacing */
#about .apps-browser { margin: 0 auto var(--blk-gap-sm) !important; }

/* 8) On small screens, tighten a bit more so it feels connected */
@media (max-width: 992px){
  #about { --blk-gap-lg: 64px; --blk-gap-md: 36px; --blk-gap-sm: 18px; }
}
@media (max-width: 576px){
  #about { --blk-gap-lg: 48px; --blk-gap-md: 28px; --blk-gap-sm: 14px; }
}

/* ===== About → Compact 2-column layout that keeps your existing visuals ===== */
#about .about-compact-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;                 /* more room for text */
  grid-template-areas:
    "left right"
    "full full"
    "full full";
  column-gap: clamp(28px, 4vw, 48px);
  row-gap: clamp(24px, 3vw, 36px);
  align-items:start;
  margin-left: clamp(-8px, -2.2vw, -24px);           /* nudge content slightly into bg art */
}
#about .about-compact-grid .col-left{ grid-area:left; }
#about .about-compact-grid .col-right{ grid-area:right; }
#about .about-compact-grid .col-full{ grid-area:full; }

/* tighten spacing between your phone cards only (visuals unchanged) */
#about .phone-card + .phone-card{ margin-top: clamp(16px, 2.2vw, 22px); }

/* years badge spacing in compact mode */
#about .about-compact-grid .years-badge{
  margin-top: clamp(12px, 1.6vw, 18px);
  margin-bottom: clamp(12px, 1.6vw, 18px);
}

/* ===== Mini dashboard inside the panel ===== */
#about .apps-section.apps-section--mini{
  margin: 2px 0 0;
  padding: 0;
}
#about .apps-section--mini .apps-browser{
  transform: scale(.86);
  transform-origin: center top;
  margin: -6px auto 0;
  max-width: 1080px;
}
#about .apps-section--mini .apps-browser::before{
  content:"";
  display:block;
  height:1px;
  width:clamp(180px, 18vw, 240px);
  margin:0 auto 14px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.12), transparent);
}

/* Insights block when it lives inside About */
#about .insights--inside-about .container-narrow{
  max-width: 1100px;
  margin-inline:auto;
}
#about .insights--inside-about .figure-card{ box-shadow: 0 6px 16px rgba(0,0,0,.06); }

/* ===== Responsive: stack under 992px ===== */
@media (max-width: 992px){
  #about .about-compact-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "right"
      "full"
      "full";
    margin-left: 0;
  }
  #about .apps-section--mini .apps-browser{
    transform: none;
    max-width: 100%;
  }
}

/* --- About > compact panel: tidy the mini dashboard & insights spacing --- */

/* Make the mini dashboard its own stacking context and add breathing room */
#about .apps-section.apps-section--mini{
  position: relative;
  margin: 16px 0 28px;   /* was 2px 0 0 */
  padding: 0;
  z-index: 2;
}

#about .apps-section--mini .apps-browser{
  transform: scale(.86);
  transform-origin: center top;
  margin: 0 auto;        /* remove negative margin so it won't pull insights upward */
  max-width: 1080px;
}

/* Decorative hairline under the dashboard */
#about .apps-section--mini .apps-browser::before{
  content:"";
  display:block;
  height:1px;
  width:clamp(180px, 18vw, 240px);
  margin: 14px auto 0;   /* underline sits below the dashboard now */
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.12), transparent);
}

/* Insights block should always sit BELOW the dashboard and not overlap it */
#about .insights--inside-about{
  position: relative;
  z-index: 1;            /* lower than the dashboard so shadows layer nicely */
  margin-top: 18px;      /* guarantees separation even if previous margins collapse */
  padding-top: 8px;
}

/* Slight polish on the stat cards when inside About */
#about .insights--inside-about .figure-card{
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* Responsive: on tablets/phones remove the dashboard scale so text stays crisp */
@media (max-width: 992px){
  #about .apps-section--mini .apps-browser{
    transform: none;
    max-width: 100%;
  }
  #about .apps-section.apps-section--mini{
    margin: 12px 0 22px;
  }
}

/* === Bring the "Solution Offering" section up and tighten spacing === */
#solution.solution-v8{
  /* pull the whole section upward */
  margin-top: 168px !important;         /* adjust: -40 ~ -96px */
  /* keep some inner breathing room */
  padding-top: 28px !important;

  /* make sure in-page links still land nicely under the sticky header */
  scroll-margin-top: 96px;

  /* layering: stay above previous background art */
  position: relative;
  z-index: 2;
}

/* If the section above adds extra bottom margin, force a bit more pull */
.section + #solution.solution-v8{
  margin-top: -84px !important;         /* optional stronger lift */
}

/* Keep its fixed background safely behind content */
#solution .sol-bg{
  position: absolute; inset: 0;
  background: var(--sol-bg-img, url("/assets/images/testforaboutus.png")) center/cover no-repeat fixed;
  opacity: .28;                          /* tweak 0.2–0.4 as you like */
  z-index: -1;
}

/* Slightly tighten internal vertical rhythm */
#solution .solv8-wrap{ row-gap: 24px; }
#solution .sv8-marquee{ margin-top: 8px; }
#solution .device-duo--lower{ margin-top: 160px; }

/* Mobile: ease off the negative pull so it doesn't crowd */
@media (max-width: 991.98px){
  #solution.solution-v8{ margin-top: -36px !important; padding-top: 24px !important; }
}
@media (max-width: 575.98px){
  #solution.solution-v8{ margin-top: -20px !important; padding-top: 20px !important; }
}

/* Insights block */
.insights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
  margin-top: 40px;
}

.insight {
  text-align: center;
  background: #fff;
  border-radius: 16px;
  padding: 24px 18px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.insight:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.insight .num {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: #0f172a; /* dark slate */
  line-height: 1.2;
}

.insight .label {
  display: block;
  margin-top: 6px;
  font-size: 0.95rem;
  color: #64748b; /* slate-500 */
}

/* Mobile single-column */
@media (max-width: 768px) {
  .insights-grid {
    grid-template-columns: 1fr;
  }
}

/* -------- Inline insights (no background) -------- */
.insights-inline{
  display:flex;
  align-items:center;
  flex-wrap:wrap;            /* will wrap nicely on small screens */
  gap:14px 24px;
  margin-top:22px;
}

.insights-inline .ins-item{
  display:flex;
  align-items:baseline;
  gap:10px;
  line-height:1.1;
  white-space:nowrap;
}

.insights-inline .num{
  font-size: clamp(24px, 3.2vw, 36px);
  font-weight:800;
  letter-spacing:-0.02em;
  color:#0f172a;            /* dark slate */
}

.insights-inline .unit{
  font-size: clamp(12px, 1.6vw, 14px);
  font-weight:700;
  text-transform:uppercase;
  color:#16a34a;            /* green accent to echo “25+ years” */
  margin-right:4px;
}

.insights-inline .label{
  font-size: clamp(12px, 1.7vw, 14px);
  color:#475569;            /* slate-600 */
  margin-left:2px;
}

/* vertical dot separators */
.insights-inline .sep{
  width:6px; height:6px; border-radius:50%;
  background:#cbd5e1;       /* slate-300 */
  display:inline-block;
  margin-inline:2px;
}

/* Stack to two rows / one row on smaller screens */
@media (max-width: 992px){
  .insights-inline{ gap:12px 18px; }
}
@media (max-width: 600px){
  .insights-inline{
    justify-content:flex-start;
  }
  .insights-inline .sep{ display:none; }  /* simpler when stacked */
}

/* -------- Mini dashboard browser -------- */
.mini-browser{
  max-width: 920px;
  margin: 18px 0 0;
  border-radius: 14px;
  overflow: hidden;
  background:#fff;
  box-shadow: 0 10px 30px rgba(2,6,23,.08);
}

.mini-browser .mb-chrome{
  display:flex; align-items:center; gap:8px;
  height:34px; padding:0 12px;
  background:linear-gradient(180deg,#f8fafc,#eef2f7);
  border-bottom:1px solid #e5e7eb;
}

.mini-browser .mb-chrome .dot{
  width:9px; height:9px; border-radius:50%;
  background:#d1d5db;
}

.mini-browser .mb-chrome .title{
  margin-left:8px;
  font-size:13px; font-weight:600; color:#334155;
}

.mini-browser .mb-screen{
  background:#000;           /* letterbox for wide images */
}

.mini-browser .mb-screen img{
  display:block; width:100%; height:auto;
}

/* ===== About (right column) – 2x1 grid layout ===== */
.about-compact-grid .col-right{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "access cico"
    "dash   dash";
  gap: 18px;
  align-items:start;
  max-width: 620px;       /* keep everything contained */
  margin-left: auto;      /* hug the right edge */
}

.about-compact-grid .col-right .pc-access{ grid-area: access; }
.about-compact-grid .col-right .pc-cico  { grid-area: cico; }

/* your dashboard container – use whichever selector exists in your markup */
.about-compact-grid .col-right .mini-browser,
.about-compact-grid .col-right .apps-browser,
.about-compact-grid .col-right .dashboard-block{
  grid-area: dash;
  width: 100%;
}

/* make whatever is inside scale without overflow */
.about-compact-grid .col-right img{ max-width:100%; height:auto; display:block; }

/* Stack on tablet/mobile */
@media (max-width: 992px){
  .about-compact-grid .col-right{
    grid-template-columns: 1fr;
    grid-template-areas:
      "access"
      "cico"
      "dash";
    max-width: none;
    margin-left: 0;
  }
}

/* === Right column layout fix === */
.about-compact-grid .col-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "access cico"
    "dash dash";
  gap: 24px;                 /* more spacing */
  max-width: 700px;          /* expand to allow larger cards */
  margin-left: auto;
}

.about-compact-grid .col-right .pc-access { 
  grid-area: access; 
  display: flex; 
  justify-content: center; 
  align-items: stretch;
}

.about-compact-grid .col-right .pc-cico { 
  grid-area: cico; 
  display: flex; 
  justify-content: center; 
  align-items: stretch;
}

/* Dashboard takes full width */
.about-compact-grid .col-right .mini-browser,
.about-compact-grid .col-right .apps-browser,
.about-compact-grid .col-right .dashboard-block {
  grid-area: dash;
  width: 100%;
}

/* Make cards and images fill nicely */
.about-compact-grid .col-right .pc-access img,
.about-compact-grid .col-right .pc-cico img {
  width: 100%;
  max-width: 320px;     /* same size */
  height: auto;
}

/* Responsive: stack */
@media (max-width: 992px){
  .about-compact-grid .col-right {
    grid-template-columns: 1fr;
    grid-template-areas:
      "access"
      "cico"
      "dash";
    max-width: none;
  }
}


/* === ABOUT compact panel — right column layout & sizing (non-destructive) === */

/* Give the right column enough room for two big cards side-by-side */
.about-compact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(600px, 720px);
  gap: 28px;
}

/* Right side becomes a 2-col grid; anything else (like a dashboard) can span full width using .span-2 */
.about-compact-grid .col-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-content: start;
}

/* Make the two cards equal size & nicely padded without changing your existing look */
.about-compact-grid .col-right .phone-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* scale up the cards */
  padding: 14px 16px;
  min-height: 320px;                 /* equal visual height */
  border-radius: 16px;               /* keep your rounded look */
}

/* Optional: if you have a dashboard block afterwards, let it fill both columns */
.about-compact-grid .col-right .span-2 { grid-column: 1 / -1; }

/* Head: keep compact so there’s more room for images */
.about-compact-grid .col-right .phone-card .pc-head h6 {
  font-size: .95rem;
  margin: 0 0 10px;
  line-height: 1.2;
}

/* Show multiple screenshots inside each card, clean grid of 3 */
.about-compact-grid .col-right .phone-card .pc-phones {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: end;
  margin-top: 6px;
}

/* Images scale uniformly (same width/height behavior across cards) */
.about-compact-grid .col-right .phone-card .pc-phones .pc-frame {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 19.5;         /* tall-phone feel; tweak if needed */
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .10);
}

/* Decorative orbs stay inside bounds */
.about-compact-grid .col-right .phone-card .orb { pointer-events: none; }

/* Responsiveness: stack on tablets/phones */
@media (max-width: 1200px){
  .about-compact-grid {
    grid-template-columns: 1fr;      /* full-width left + right stacking */
  }
  .about-compact-grid .col-right {
    grid-template-columns: 1fr 1fr;  /* keep 2-up a bit longer */
  }
}
@media (max-width: 900px){
  .about-compact-grid .col-right {
    grid-template-columns: 1fr;      /* stack */
  }
  .about-compact-grid .col-right .phone-card {
    min-height: 300px;
  }
}
/* === Make the right column and phone cards larger === */

/* 1) Give the right column more width (tune the max end to taste) */
.about-compact-grid{
  /* left takes remaining space, right is between 680px and 960px (prefers ~44vw) */
  grid-template-columns: minmax(0,1fr) clamp(680px, 44vw, 960px);
}

/* 2) Bigger cards with more internal room */
.about-compact-grid .col-right .phone-card{
  min-height: 380px;          /* was 320px */
  padding: 18px 20px;         /* a bit more breathing room */
  border-radius: 18px;
}

/* 3) Make each phone image larger */
.about-compact-grid .col-right .phone-card .pc-phones{
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;                  /* slightly wider gaps so they scale nicely */
}
.about-compact-grid .col-right .phone-card .pc-phones .pc-frame{
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 18;       /* a touch wider than 9/19.5 to look beefier */
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(15,23,42,.12);
}

/* 4) On very large screens, allow even more width if you want */
@media (min-width: 1600px){
  .about-compact-grid{
    grid-template-columns: minmax(0,1fr) clamp(760px, 42vw, 1040px);
  }
}

/* 5) Keep the two cards side-by-side; dashboard spans full width under them */
.about-compact-grid .col-right{
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.about-compact-grid .col-right .span-2{ grid-column: 1 / -1; }
/* Make the container for phones wider */
.about-compact-grid .col-right .phone-card .pc-phones{
  grid-template-columns: repeat(2, 1fr);   /* was 3, fewer per row = bigger */
  gap: 20px;                               /* more breathing room */
  justify-items: center;
}

/* Make phone images themselves bigger */
.about-compact-grid .col-right .phone-card .pc-phones .pc-frame{
  width: 85%;                /* increase % of card width (try 85–100%) */
  aspect-ratio: 9 / 17;       /* make phones look a bit wider than tall */
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

/* Optional: grow the whole phone card box a bit */
.about-compact-grid .col-right .phone-card{
  min-height: 420px;         /* taller container so phones have room */
  padding: 24px;
}
/* ===== ABOUT compact layout: keep phones on the RIGHT rail ===== */
.about-compact-grid{
  display: grid;
  grid-template-columns: 1fr 560px;        /* left grows, right is a fixed rail */
  gap: 28px;
  align-items: start;
}

/* Right rail becomes a small grid: 2 cards on top, dashboard full width below */
.about-compact-grid .col-right{
  display: grid;
  grid-template-columns: 1fr 1fr;          /* Access | CICO */
  grid-auto-rows: auto;
  gap: 18px;
  align-self: start;                       /* prevents drifting down */
}

/* Make each phone card wider and comfy */
.about-compact-grid .col-right .phone-card{
  width: 100%;
  padding: 22px 22px 26px;
  border-radius: 18px;
}

/* 3 phones side-by-side, but larger/less skinny */
.about-compact-grid .col-right .phone-card .pc-phones{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Make the phone images chunkier (wider aspect), fill their column */
.about-compact-grid .col-right .phone-card .pc-frame{
  width: 100%;
  aspect-ratio: 9 / 18;                    /* wider than 9/20, adjust if you want */
  object-fit: contain;
  border-radius: 18px;
  display: block;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

/* The dashboard block spans the whole right rail width (under both cards) */
.about-compact-grid .col-right .apps-dashboard,
.about-compact-grid .col-right .mini-dashboard,
.about-compact-grid .col-right .dashboard,
.about-compact-grid .col-right .apps-browser,
.about-compact-grid .col-right .dash {
  grid-column: 1 / -1;                     /* full width under Access/CICO */
}

/* Tweak headings inside cards if needed */
.about-compact-grid .col-right .phone-card .pc-head h6{
  font-size: 14px;
  margin: 0 0 8px;
}

/* Responsive: when viewport is narrow, stack the right rail */
@media (max-width: 1100px){
  .about-compact-grid{
    grid-template-columns: 1fr;            /* single column */
  }
  .about-compact-grid .col-right{
    grid-template-columns: 1fr;            /* stack Access, CICO, Dashboard */
  }
}

/* 1) Give the right rail more breathing room (wider fixed column) */
.about-compact-grid{
  /* bump up from ~560px to ~680–720px; pick what fits your design */
  grid-template-columns: 1fr 700px;
}

/* 2) Kill any legacy caps on the cards */
.about-compact-grid .col-right .phone-card{
  width: 100%;
  max-width: none !important;     /* in case a theme sets a cap */
  padding: 20px 22px 24px;
  border-radius: 18px;
}

/* 3) Make the 3-phone grid truly fill the card */
.about-compact-grid .col-right .phone-card .pc-phones{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* zero min so columns can expand */
  gap: 14px;                                       /* keep gaps modest */
}

/* 4) Make each phone chunkier/wider */
.about-compact-grid .col-right .phone-card .pc-frame{
  width: 100%;
  aspect-ratio: 9 / 18;            /* wider than tall-skinny; tweak to 9/17 if you want even chunkier */
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

/* 5) Let the top two cards sit side-by-side and the dashboard span below */
.about-compact-grid .col-right{
  display: grid;
  grid-template-columns: 1fr 1fr;  /* Access | CICO */
  gap: 18px;
  align-content: start;
}

.about-compact-grid .col-right .apps-browser,
.about-compact-grid .col-right .apps-dashboard,
.about-compact-grid .col-right .mini-dashboard,
.about-compact-grid .col-right .dashboard,
.about-compact-grid .col-right .dash {
  grid-column: 1 / -1;             /* full width under the two phone cards */
  max-width: none !important;
}

/* 6) Reduce header footprint so images have more width/height to breathe */
.about-compact-grid .col-right .phone-card .pc-head{
  margin-bottom: 8px;
}
.about-compact-grid .col-right .phone-card .pc-head h6{
  font-size: 14px;
  line-height: 1.2;
  margin: 0;
}

/* 7) Safety: if any theme adds img max-width caps */
.about-compact-grid .col-right img{
  max-width: 100% !important;
  height: auto;
}

/* 8) Responsive fallback */
@media (max-width: 1100px){
  .about-compact-grid{ grid-template-columns: 1fr; }
 
  .about-compact-grid .col-right{ grid-template-columns: 1fr; }
}
/* Force the phone cards to sit side by side */
.col-right {
  display: flex !important;
  flex-wrap: wrap;
  gap: 24px; /* spacing between Access & CICO */
  justify-content: flex-start;
  align-items: flex-start;
}

/* Each card should take equal width */
.col-right .phone-card {
  flex: 1 1 45% !important;   /* 2 cards per row */
  max-width: 48% !important;
  min-width: 300px;           /* so they don’t shrink too small */
  padding: 20px !important;
  border-radius: 16px !important;
}

/* Make the phones inside bigger and wider */
.col-right .phone-card .pc-phones {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}

.col-right .phone-card .pc-frame {
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 9 / 19 !important; /* adjust ratio to make wider */
  object-fit: contain !important;
}

.aboutv11-pane .col-right{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(280px, 1fr)) !important; /* keep current card size but allow to grow */
  grid-auto-rows: auto !important;
  gap: 18px !important;
 align-items: start !important;
 }
/* Make phone cards fill their grid cells and keep the nice spacing */
 .aboutv11-pane .col-right .phone-card{
  width: 100% !important;
 margin: 0 !important;          /* removes extra vertical gaps so the two cards align */
}

 /* Ensure both Access and CICO show three phones side‑by‑side comfortably */
 .aboutv11-pane .col-right .phone-card .pc-phones{ gap: 12px !important; }
.aboutv11-pane .col-right .phone-card .pc-frame{
width: calc(33.333% - 8px) !important; /* wider screens for each of the 3 phones */
   aspect-ratio: 9/19 !important;
 }

 /* Place the dashboard below, spanning both columns, even if it appears first in the HTML */
 .aboutv11-pane .col-right .apps-browser{
   grid-column: 1 / -1 !important;   /* span the two columns */
   order: 5 !important;               /* force it to appear after the two phone cards */
 }

 /* Minor polish: keep the dashboard from shrinking too narrow inside the right column */
 .aboutv11-pane .col-right .apps-browser .screen{ max-width: 100% !important; }

 /* Responsive: stack everything on tablets/phones */
@media (max-width: 1100px){
  .aboutv11-pane .col-right{
    grid-template-columns: 1fr !important; /* single column */   }
   .aboutv11-pane .col-right .apps-browser{ grid-column: auto !important; }
 }

 .ceo-canvas.styled {
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  position: relative;
}

.ceo-canvas .qmark {
  font-size: 3rem;
  color: #e74c3c;
  position: absolute;
  top: -10px;
  left: -10px;
  opacity: 0.2;
}

.ceo-canvas .copy {
  margin-bottom: 2rem;
}

.apps-preview h6 {
  margin-bottom: 1rem;
  font-weight: 600;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.apps-browser {
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fafafa;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* CEO Panel */
.ceo-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.ceo-card .avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.ceo-canvas.styled {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  position: relative;
}
.ceo-canvas .qmark {
  font-size: 2rem;
  color: #e94e1b;
  position: absolute;
  top: 10px;
  left: 15px;
  opacity: 0.4;
}

/* Dashboard Slideshow */
.apps-browser {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.apps-browser .chrome {
  background: #f5f5f5;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
}
.apps-browser .chrome .dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: 50%;
  background: #bbb;
}
.apps-browser .screen {
  position: relative;
  height: 320px;
}
.apps-browser .screen .shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s ease;
}
.apps-browser .screen .shot.is-on {
  opacity: 1;
}
.apps-browser .thumbs {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 8px;
  background: #fafafa;
}
.apps-browser .thumbs button {
  border: none;
  background: #ddd;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all .3s ease;
}
.apps-browser .thumbs button.is-on,
.apps-browser .thumbs button:hover {
  background: #e94e1b;
  color: #fff;
}

/* Layout */
.ceo-pane .ceo-flex {
  display: flex;
  gap: 2rem;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
}
.ceo-left, .ceo-right {
  flex: 1 1 50%;
}

/* CEO Card */
.ceo-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.ceo-card .avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 3px 8px rgba(0,0,0,.15);
}
.ceo-card .who strong {
  display: block;
  font-size: 1.2rem;
  color: #111;
}
.ceo-card .who span {
  font-size: .9rem;
  color: #666;
}

/* CEO Message */
.ceo-message {
  flex: 0 0 800px;   /* lock CEO card at 500px width */
  max-width: 800px;  /* optional, ensures it doesn’t stretch */
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.ceo-message .qmark {
  font-size: 2.5rem;
  color: #e94e1b;
  position: absolute;
  top: 8px;
  left: 16px;
  opacity: .3;
}
.ceo-message p {
  margin-bottom: 1rem;
  line-height: 1.6;
}
.ceo-message .sign {
  margin-top: 1rem;
  font-weight: bold;
  color: #e94e1b;
}

/* CTA */
.ceo-cta {
  margin-top: 1rem;
  font-size: .95rem;
  color: #444;
}
.ceo-cta a {
  color: #e94e1b;
  font-weight: bold;
}

/* Slideshow */
.slideshow {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 1rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  text-align: center;
}
.slideshow .slide {
  display: none;
}
.slideshow .slide.active {
  display: block;
}
.slideshow img {
  max-width: 100%;
  border-radius: 10px;
}
.slideshow .caption {
  display: block;
  margin-top: .5rem;
  font-size: .9rem;
  color: #666;
}
.slideshow .dots {
  margin-top: .8rem;
}
.slideshow .dots button {
  width: 10px;
  height: 10px;
  margin: 0 4px;
  border-radius: 50%;
  border: none;
  background: #ccc;
  cursor: pointer;
}
.slideshow .dots button.active {
  background: #e94e1b;
}/* Layout */
.ceo-pane .ceo-flex {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  grid-template-columns: 800px 1fr;
  gap: 2rem;
  flex-wrap: wrap;
}
.ceo-left {
  flex: 1 1 45%;
}
.ceo-right {
  flex: 1 1 50%;
}

/* CEO Card */
.ceo-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.ceo-card .avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 3px 8px rgba(0,0,0,.15);
}
.ceo-card .who strong {
  font-size: 1.2rem;
}
.ceo-card .who span {
  font-size: .9rem;
  color: #666;
}

/* Message */
.ceo-message {
  background: #fff;
  padding: 1.5rem;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  position: relative;
}
.ceo-message .qmark {
  font-size: 2.2rem;
  color: #e94e1b;
  position: absolute;
  top: 10px;
  left: 16px;
  opacity: .25;
}
.ceo-message p {
  margin-bottom: 1rem;
  line-height: 1.6;
}
.ceo-message .sign {
  margin-top: 1rem;
  font-weight: bold;
  color: #e94e1b;
}

/* Apps browser mock */
.apps-browser {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  overflow: hidden;
}
.apps-browser .chrome {
  background: #f5f5f5;
  padding: .5rem 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.apps-browser .dot {
  width: 10px; height: 10px;
  background: #ccc;
  border-radius: 50%;
  display: inline-block;
}
.apps-browser .title {
  margin-left: .5rem;
  font-size: .9rem;
  color: #444;
}
.apps-browser .screen {
  text-align: center;
  padding: 1rem;
}
.apps-browser .slide {
  display: none;
}
.apps-browser .slide.active {
  display: block;
}
.apps-browser .slide img {
  max-width: 100%;
  border-radius: 8px;
}
.apps-browser .caption {
  display: block;
  margin-top: .5rem;
  font-size: .85rem;
  color: #555;
}
.apps-browser .dots {
  text-align: center;
  padding: .5rem;
}
.apps-browser .dots button {
  width: 10px; height: 10px;
  margin: 0 4px;
  border-radius: 50%;
  border: none;
  background: #bbb;
}
.apps-browser .dots button.active {
  background: #e94e1b;
}
/* CEO Panel */
.ceo-card .avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-bottom: 10px;
}
.ceo-canvas .copy {
  background: #fff;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  font-size: 0.95rem;
}
.ceo-canvas .copy p {
  margin-bottom: 1rem;
  color: #444;
}
.ceo-canvas .copy a {
  color: #e94e1b;
  font-weight: 600;
}
.ceo-canvas .sign {
  font-weight: bold;
  margin-top: 1rem;
}

/* Browser Mockup */
.dashboard-mockup {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  overflow: hidden;
}
.browser-bar {
  background: #f3f3f3;
  display: flex;
  align-items: center;
  padding: .5rem 1rem;
  gap: .5rem;
  font-size: .85rem;
  color: #555;
}
.browser-bar .dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.browser-bar .red { background: #ff5f57; }
.browser-bar .yellow { background: #ffbd2f; }
.browser-bar .green { background: #28c840; }
.browser-bar .url {
  margin-left: 1rem;
  color: #888;
}
.browser-screen img {
  width: 100%;
  display: block;
}
.browser-tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: .75rem;
  background: #fafafa;
}
.browser-tabs button {
  border: none;
  background: none;
  font-size: .85rem;
  padding: .3rem .6rem;
  border-radius: 6px;
  cursor: pointer;
  color: #666;
  transition: 0.2s;
}
.browser-tabs button:hover {
  color: #000;
}
.browser-tabs button.active {
  background: #e94e1b;
  color: #fff;
}

.ceo-side .ceo-canvas .copy {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  font-size: 1rem;
  line-height: 1.6;
}
.ceo-side .ceo-card .avatar {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  margin-bottom: 10px;
}
.ceo-side .who span {
  display: block;
  font-size: 0.9rem;
  color: #666;
}
.dashboard-mockup {
  max-width: 100%;
}

.ceo-side .ceo-canvas .copy {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  font-size: 1rem;
  line-height: 1.6;
}
.ceo-side .ceo-card .avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-bottom: 10px;
}
.dashboard-mockup {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  overflow: hidden;
  max-width: 100%;
}
.dashboard-mockup .browser-bar {
  background: #f5f5f5;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dashboard-mockup .browser-bar .dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.dashboard-mockup .browser-bar .red { background: #ff5f57; }
.dashboard-mockup .browser-bar .yellow { background: #ffbd2e; }
.dashboard-mockup .browser-bar .green { background: #28c940; }
.dashboard-mockup .browser-bar .url {
  margin-left: auto;
  font-size: 0.85rem;
  color: #666;
}
.dashboard-mockup .browser-screen {
  position: relative;
  height: 400px;
}
.dashboard-mockup .shot {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.dashboard-mockup .shot.is-on { opacity: 1; }
.dashboard-mockup .browser-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 10px;
  background: #fafafa;
}
.dashboard-mockup .browser-tabs button {
  border: none;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  background: #eee;
  cursor: pointer;
  transition: all 0.3s ease;
}
.dashboard-mockup .browser-tabs button.active {
  background: #007bff;
  color: #fff;
}

/* Mockup Browser Frame */
.mockup-browser {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #ddd;
}

.browser-bar {
  background: #f5f5f5;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  color: #555;
  font-family: monospace;
}

.browser-bar .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 6px;
  display: inline-block;
}

.browser-bar .dot.red { background: #ff5f57; }
.browser-bar .dot.yellow { background: #ffbd2e; }
.browser-bar .dot.green { background: #28c840; }

.browser-bar .url {
  margin-left: 12px;
  color: #888;
}

.mockup-screen img {
  width: 100%;
  border-top: 1px solid #ddd;
}

/* Dashboard Caption Badges */
.carousel-caption {
  bottom: -50px;
}

/* Laptop Mockup Style */
.laptop-mockup {
  background: #111;
  border-radius: 8px;
  padding: 12px;
  position: relative;
  display: inline-block;
}

.laptop-screen {
  background: #000;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid #333;
}

.laptop-screen img {
  width: 100%;
  display: block;
}

.laptop-base {
  width: 100%;
  height: 12px;
  background: #111;
  border-radius: 0 0 10px 10px;
  margin-top: 4px;
  box-shadow: inset 0 -2px 6px rgba(0,0,0,0.5);
}

/* Carousel Captions */
.carousel-caption {
  bottom: -40px;
}

/* CEO Panel Wrapper */
.ceo-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3rem;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 3rem 2rem;
}

/* LEFT: CEO Message */
.ceo-message {
  flex: 1;
  max-width: 50%;
}

.ceo-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.ceo-photo {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin-right: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.ceo-meta strong {
  display: block;
  font-size: 1.2rem;
}
.ceo-meta span {
  font-size: 0.9rem;
  color: #777;
}

.ceo-text {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  text-align: justify;
  font-size: 1rem;
  line-height: 1.6;
}

.ceo-text a {
  color: #0077cc;
  font-weight: 600;
}

.sign {
  margin-top: 1rem;
  font-weight: bold;
}

/* RIGHT: Dashboard Showcase */
.ceo-dashboard {
  flex: 1;
  max-width: 80%;
}

.dashboard-mockup {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  overflow: hidden;
}

.db-chrome {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
  font-weight: 600;
  font-size: 0.9rem;
}
.db-chrome .dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}
.db-chrome .dot.red { background: #ff5f56; }
.db-chrome .dot.yellow { background: #ffbd2e; }
.db-chrome .dot.green { background: #27c93f; }

.db-screen {
  position: relative;
  height: 450px;
  width: 800px;
  overflow: hidden;
}
.db-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.db-screen img.is-on { display: block; }

/* Thumbnail Buttons */
.db-thumbs {
  display: flex;
  justify-content: space-evenly;
  padding: 0.75rem;
  background: #fafafa;
  border-top: 1px solid #eee;
}
.db-thumbs button {
  border: none;
  background: transparent;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  transition: all 0.2s;
}
.db-thumbs button.is-on {
  background: #0077cc;
  color: white;
}
.db-thumbs button:hover {
  background: #eee;
}

/* Container holding CEO + Dashboard */
.ceo-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem; /* spacing between CEO card & dashboard */
}

/* CEO Message Card */
.ceo-message {
  flex: 0 0 520px;    /* fixed width */
  max-width: 520px;   /* don’t stretch beyond this */
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Dashboard Wrapper */
.db-screen {
  flex: 1;            /* take remaining width */
  max-width: 100%;    /* keep responsive */
  height: 500px; 
  width: 1000px;     /* adjust height */
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}

/* Dashboard image */
.db-screen img {
  width: 100%;        /* fill container */
  height: 100%;
  object-fit: contain;
}

.about-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 32px;
  justify-content: flex-start;
}

.about-stats .stat {
  flex: 1 1 160px;
  text-align: center;
}

.about-stats .num {
  display: block;
  font-size: 2.2rem;
  font-weight: 700;
  color: #0066cc;
  line-height: 1.2;
}

.about-stats .label {
  font-size: 0.95rem;
  color: #444;
  margin-top: 6px;
  display: block;
}

.about-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 40px;
  justify-content: flex-start;
}

.about-stats .stat {
  flex: 1 1 180px;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s forwards;
  animation-delay: var(--d,0s);
}

.about-stats .num {
  display: block;
  font-size: 2.8rem;
  font-weight: 800;
  background: linear-gradient(90deg,#0066cc,#00c6ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-stats .label {
  font-size: 1rem;
  color: #333;
  margin-top: 6px;
  display: block;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Make the numbers BIG and bold */
.figure-number .counter {
  font-size: 2.5rem;   /* was probably ~1.5rem */
  font-weight: 800;
  color: #0077cc;   /* you can also use gradient text if you like */
  line-height: 1.2;
  display: inline-block;
  margin-bottom: 8px;
}

/* Optional: make the caption smaller so contrast is stronger */
.figure-caption {
  font-size: 1rem;
  color: #555;
  margin-top: 4px;
}

/* Style version metric differently */
.figure-card .counter {
  font-size: 3rem;
  font-weight: 800;
  color: #0077cc;
}

.figure-card .counter.version {
  color: #ff5722; /* highlight version in a brand color */
}

.sv9-gallery {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.device-banner {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-width: 150%;
}

.device-banner img {
  width: 100%;
  height: auto;
  display: block;

}

.device-banner:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}

/* Restrict BPO card width */
.sv9-centerwrap {
  display: flex;
  justify-content: center;
}

.bpo-card {
  max-width: 900px;   /* Limit width */
  width: 100%;
  padding: 40px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  text-align: justify;
}

.hero-v14 {
  position: relative;
  background: linear-gradient(135deg, #0a1d3a, #b31217);
  color: #fff;
  padding: 100px 0 60px;
  overflow: hidden;
}

.hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  gap: 2rem;
}

.hero-content {
  flex: 1;
  max-width: 540px;
}

.hero-title {
  font-size: 3.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.hero-title span {
  color: #ff4c4c; /* red highlight */
}

.hero-sub {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.hero-ctas .btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  margin-right: 1rem;
  border-radius: 6px;
  transition: all 0.3s ease;
}
.btn-primary {
  background: #ff4c4c;
  color: #fff;
}
.btn-primary:hover {
  background: #e03a3a;
}
.btn-secondary {
  border: 2px solid #fff;
  color: #fff;
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.1);
}

.hero-graphic {
  flex: 1;
  display: flex;
  justify-content: center;
}
.hero-graphic img {
  max-width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 12px 35px rgba(0,0,0,0.25);
  animation: floatHero 6s ease-in-out infinite;
}

/* Floating effect */
@keyframes floatHero {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.hero-divider {
  margin-top: -40px;
}

:root{
  --hrsc-navy:#0C1E3F;
  --hrsc-red:#AE1226;
  --hrsc-accent:#FF4C65;
  --hrsc-cyan:#56E3FF;
  --hero-max:1200px;
}

.hero-v15{
  position:relative;
  color:#fff;
  overflow:hidden;
  padding:96px 0 56px;
  isolation:isolate;
}

/* Background SVG fills the section */
.hero-v15-bg{
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
}
.hero-v15-canvas{ width:100%; height:100%; display:block; }

/* Subtle ribbon animation */
.ribbon{
  stroke-dasharray:1600;
  animation:draw 18s linear infinite;
  mix-blend-mode:screen;
}
.ribbon-b{ animation-duration:22s; animation-direction:reverse; }
.ribbon-c{ animation-duration:26s; }

@keyframes draw{
  0%{ stroke-dashoffset:1600;}
  100%{ stroke-dashoffset:0;}
}

/* Layout */
.hero-v15-wrap{
  position:relative;
  z-index:1;
  max-width:var(--hero-max);
  margin:0 auto;
  padding:0 24px;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:48px;
  align-items:center;
}

/* Copy */
.hero-v15-title{
  font-size:clamp(34px,4.2vw,56px);
  line-height:1.05;
  margin:0 0 14px;
  letter-spacing:-0.5px;
  text-wrap:balance;
}
.hero-v15-title span{ color:var(--hrsc-cyan); }

.hero-v15-sub{
  font-size:clamp(16px,1.3vw,18px);
  max-width:48ch;
  opacity:.92;
  margin:0 0 24px;
}

.hero-v15-ctas .btn{
  display:inline-block;
  padding:12px 20px;
  border-radius:10px;
  font-weight:600;
  margin-right:12px;
  transition:transform .15s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.btn-primary{ background:var(--hrsc-accent); color:#fff; }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-ghost{ border:2px solid rgba(255,255,255,.9); color:#fff; }
.btn-ghost:hover{ background:rgba(255,255,255,.08); transform:translateY(-2px); }

.hero-v15-points{
  display:flex; gap:14px; flex-wrap:wrap; margin:18px 0 0; padding:0; list-style:none;
}
.hero-v15-points li{
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:999px;
  font-size:14px;
  backdrop-filter:saturate(140%) blur(2px);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}

/* Artwork */
.hero-v15-art{ display:flex; justify-content:center; align-items:center; }
.hero-v15-illustration{
  width:min(560px,44vw);
  height:auto;
  filter: drop-shadow(0 22px 50px rgba(0,0,0,.35));
}
.float-a{ animation:floatA 7s ease-in-out infinite; }
.float-b{ animation:floatB 6.5s ease-in-out infinite; }

@keyframes floatA{
  0%,100%{ transform:translate(380px,60px) translateY(0); }
  50%{ transform:translate(380px,60px) translateY(-10px); }
}
@keyframes floatB{
  0%,100%{ transform:translate(460px,210px) translateY(0); }
  50%{ transform:translate(460px,210px) translateY(12px); }
}

/* Divider */
.hero-v15-divider{
  position:relative; z-index:1; margin-top:18px;
}
.hero-v15-divider svg{ display:block; width:100%; height:auto; }

/* Responsive */
@media (max-width: 1024px){
  .hero-v15-wrap{
    grid-template-columns:1fr;
    gap:28px;
    text-align:center;
  }
  .hero-v15-points{ justify-content:center; }
  .hero-v15-illustration{ width:min(520px,70vw); }
}


/* ===== HERO v16.1 — Scoped Styles ===== */
.hero-v161 {
  position: relative;
  overflow: hidden;
  padding: 120px 0 160px;
  background: linear-gradient(180deg, #1E2A50 0%, #205B90 40%, #EB5E28 100%);
  color: #fff;
}

/* Layout */
.hero-v161 .hero16-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 6%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
.hero-v161 .hero16-copy {
  flex: 1 1 500px;
  max-width: 580px;
}
.hero-v161 .hero16-art {
  flex: 1 1 400px;
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

/* Typography */
.hero-v161 .hero16-title {
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-size: clamp(42px, 6.6vw, 82px);
  margin: 0 0 14px;
}
.hero-v161 .hero16-title span {
  color: #31C3FF;
  text-shadow: 0 6px 24px rgba(49, 195, 255, 0.18);
}
.hero-v161 .hero16-sub {
  max-width: 40ch;
  color: #EAF6FF;
  margin: 0 0 22px;
  font-size: 18px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* Buttons */
.hero-v161 .hero16-ctas {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}
.hero-v161 .hero16-ctas .btn {
  transform: translateZ(0);
}

/* Simple muted points */
.hero-v161 .hero16-points {
  display: block;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  color: #cfe9ff;
  opacity: 0.85;
}
.hero-v161 .hero16-points li {
  display: inline;
}
.hero-v161 .hero16-points li+li::before {
  content: " · ";
  margin: 0 .4rem;
  opacity: .6;
}

/* Background decor lines */
.hero-v161 .flow {
  position: absolute;
  left: -10%;
  width: 120%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
              rgba(255,255,255,0),
              rgba(255,255,255,.6),
              rgba(255,255,255,0));
  opacity: .32;
}
.hero-v161 .f1 { top: 59%; animation: hero16-slide 10s linear infinite; }
.hero-v161 .f2 { top: 67%; animation: hero16-slide 14s linear reverse infinite; opacity: .26; }
.hero-v161 .f3 { top: 75%; animation: hero16-slide 12s linear infinite; opacity: .22; }

@keyframes hero16-slide {
  from { transform: translateX(0); }
  to { transform: translateX(12%); }
}

/* White fade transition */
.hero-v161 .hero16-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 180px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 70%);
  pointer-events: none;
}

/* Device illustration sizing */
.hero-v161 .device-illustration {
  width: 100%;
  height: auto;
  max-width: 500px;
}

/* Responsive tweaks */
@media (max-width: 900px) {
  .hero-v161 .hero16-wrap {
    flex-direction: column;
    text-align: center;
  }
  .hero-v161 .hero16-art {
    margin-top: 60px;
  }
}

/* ===== HERO v17 — Scoped ===== */
.hero-v17 {
  position: relative;
  overflow: hidden;
  padding: 130px 0 160px;
  color: #fff;
}

/* background */
.hero17-bg { position: absolute; inset: 0; }
.hero17-canvas { width: 100%; height: 100%; display: block; }

/* layout */
.hero17-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 6%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
.hero17-copy { flex: 1 1 500px; max-width: 580px; }
.hero17-art { flex: 1 1 400px; display: flex; justify-content: center; margin-top: 40px; }

/* text */
.hero17-title {
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-size: clamp(48px, 6vw, 78px); /* bigger */
  margin: 0 0 16px;
}
.hero17-title span {
  color: #31C3FF;
  text-shadow: 0 6px 24px rgba(49,195,255,0.18);
}
.hero17-sub.frost {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(10,16,28,.42);
  color: #fff;
  backdrop-filter: saturate(140%) blur(6px);
  -webkit-backdrop-filter: saturate(140%) blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  margin-bottom: 24px;
  font-size: 18px;
}

/* ctas */
.hero17-ctas { display: flex; gap: 12px; margin-bottom: 20px; }
.hero17-points { list-style: none; margin: 0; padding: 0; color: #cfe9ff; font-size: 15px; opacity: .85; }
.hero17-points li { display: inline; }
.hero17-points li+li::before { content: " · "; margin: 0 .4rem; opacity: .6; }

/* fade */
.hero17-fade {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 180px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 68%);
  pointer-events: none;
}

/* flow lines */
.flow {
  position: absolute; left: -10%;
  width: 120%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.6), rgba(255,255,255,0));
  opacity: .38;
}
.f1 { top: 58%; animation: slide17 10s linear infinite; }
.f2 { top: 66%; animation: slide17 14s linear reverse infinite; opacity: .30;}
.f3 { top: 74%; animation: slide17 12s linear infinite; opacity: .24;}

@keyframes slide17 { from { transform: translateX(0); } to { transform: translateX(12%); } }

/* device illustration */
.device-illustration { width: 100%; height: auto; max-width: 500px; }

/* responsive */
@media (max-width: 900px) {
  .hero17-wrap { flex-direction: column; text-align: center; }
  .hero17-art { margin-top: 60px; }
}

/* ===== HERO v18 (scoped) ===== */
.hero-v18{
  position:relative; overflow:hidden; color:#fff;
  padding:140px 0 190px;   /* extra bottom space so the fade breathes */
}

/* background layers */
.hero18-bg{ position:absolute; inset:0; }
.hero18-canvas{ width:100%; height:100%; display:block; }

/* animated “flow abstract” */
.hero18-waves{
  position:absolute; left:0; right:0; bottom:120px; width:100%; height:240px;
}
.hero18-waves .wave{
  stroke:rgba(255,255,255,.65);
  stroke-width:2.2; opacity:.28; vector-effect:non-scaling-stroke;
  stroke-dasharray:420 820; stroke-dashoffset:0;
  animation:hero18-dash 14s linear infinite;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.18));
}
.hero18-waves .w2{ opacity:.24; animation-duration:17s; }
.hero18-waves .w3{ opacity:.20; animation-duration:19s; }
@keyframes hero18-dash{ to{ stroke-dashoffset:-1240; } }

/* soft fade to white */
.hero18-fade{
  position:absolute; left:0; right:0; bottom:0; height:190px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 70%);
  pointer-events:none;
}

/* layout */
.hero18-wrap{
  max-width:1300px; margin:0 auto; padding:0 6%;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  position:relative; z-index:2;
}
.hero18-copy{ flex:1 1 520px; max-width:620px; }
.hero18-art{ flex:1 1 480px; display:flex; justify-content:center; margin-top:40px; }

/* bigger title */
.hero18-title{
  margin:0 0 14px; font-weight:800; letter-spacing:-0.02em; line-height:1.03;
  font-size: clamp(54px, 7.2vw, 86px);
}
.hero18-title span{ color:#31C3FF; text-shadow:0 8px 28px rgba(49,195,255,.18); }

/* readable subtitle */
.hero18-sub.frost{
  display:inline-block; margin-bottom:24px; font-size:18px;
  padding:12px 16px; border-radius:12px;
  background:rgba(10,16,28,.42); backdrop-filter:saturate(140%) blur(6px);
  -webkit-backdrop-filter:saturate(140%) blur(6px);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* CTAs & points */
.hero18-ctas{ display:flex; gap:12px; margin-bottom:18px; }
.hero18-points{ list-style:none; margin:0; padding:0; color:#d8ecff; opacity:.9; font-size:15px; }
.hero18-points li{ display:inline; }
.hero18-points li+li::before{ content:" · "; margin:0 .45rem; opacity:.6; }

/* BIGGER mockups */
.device-illustration{ width:100%; height:auto; max-width:640px; }
@media (min-width:1280px){
  .device-illustration{ max-width:700px; transform:translateX(10px); }
}

/* responsive stack */
@media (max-width:980px){
  .hero18-wrap{ flex-direction:column; text-align:center; }
  .hero18-art{ margin-top:64px; }
}

/* ===== HERO v19 ===== */
.hero-v19{
  position:relative; overflow:hidden; color:#fff;
  padding:120px 0 200px;   /* space below for the fade */
}

/* background */
.hero19-bg{ position:absolute; inset:0; }
.hero19-canvas{ width:100%; height:100%; display:block; }

/* flow abstract */
.hero19-waves{
  position:absolute; left:0; right:0; bottom:140px; width:100%; height:240px;
}
.hero19-waves .w{
  stroke:rgba(255,255,255,.65); stroke-width:2.2; opacity:.28;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:420 820; stroke-dashoffset:0;
  animation:hero19-dash 15s linear infinite;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.18));
}
.hero19-waves .w2{ opacity:.24; animation-duration:18s; }
.hero19-waves .w3{ opacity:.20; animation-duration:20s; }
@keyframes hero19-dash{ to{ stroke-dashoffset:-1240; } }

/* fade to the next section */
.hero19-fade{
  position:absolute; left:0; right:0; bottom:0; height:200px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 72%);
  pointer-events:none;
}

/* layout (left aligned, no centering) */
.hero19-wrap{
  max-width:1320px; margin:0 auto; padding:0 6%;
  display:grid; grid-template-columns:minmax(520px,620px) 1fr; gap:48px;
  align-items:center; position:relative; z-index:2;
}

/* text */
.hero19-title{
  margin:0 0 14px; line-height:1.05; letter-spacing:-.02em;
  font-weight:800; /* one line on desktop */
  font-size: clamp(56px, 6.6vw, 92px);
  white-space: nowrap;                 /* keep in one line on wide screens */
}
.hero19-title span{ color:#31C3FF; text-shadow:0 10px 32px rgba(49,195,255,.18); }

.hero19-sub{
  margin:0 0 22px; font-size:18px; line-height:1.55;
  max-width:52ch; color:#E8F3FF;
  background:rgba(9,15,28,.52); padding:12px 16px; border-radius:12px;
  backdrop-filter:saturate(140%) blur(6px); -webkit-backdrop-filter:saturate(140%) blur(6px);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.hero19-ctas{ display:flex; gap:12px; margin:0 0 12px; }
.hero19-points{ list-style:none; padding:0; margin:0; color:#d8ecff; opacity:.95; font-size:15px; }
.hero19-points li{ display:inline; }
.hero19-points li+li::before{ content:" · "; margin:0 .45rem; opacity:.6; }

/* illustration (large) */
.hero19-art{ display:flex; align-items:center; justify-content:flex-end; }
.hr-illustration{ width:100%; height:auto; max-width:760px; }

.spin{ transform-origin:center; animation:spin 9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.float{ animation:float 6s ease-in-out infinite; }
@keyframes float{ 0%,100%{ transform:translate(600px,120px) translateY(0); } 50%{ transform:translate(600px,120px) translateY(-8px); } }

/* responsiveness */
@media (max-width:1120px){
  .hero19-wrap{ grid-template-columns:1fr; gap:36px; }
  .hero19-title{ white-space:normal; } /* allow wrap on smaller screens */
  .hero19-art{ justify-content:center; }
}

/* ===== HERO v20 ===== */
.hero-v20{
  position:relative;
  color:#fff;
  min-height:100vh;          /* full-viewport so About Us never shows immediately */
  display:flex; align-items:center;
  overflow:hidden;
}

/* Background layers */
.hero-v20 .hero20-bg{ position:absolute; inset:0; }
.hero-v20 .hero20-gradient{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 75% 25%, rgba(49,195,255,.28), transparent 60%),
    radial-gradient(1000px 700px at 15% 85%, rgba(255,138,76,.30), transparent 60%),
    linear-gradient(135deg, #102B66 0%, #1a3d7a 35%, #f26a2e 100%); /* brand blue→orange */
  filter:saturate(110%);
}
/* subtle dotted texture via canvas (script draws) */
.hero-v20 .hero20-dots{ position:absolute; inset:0; opacity:.18; }

/* animated flow lines */
.hero-v20 .hero20-flow{
  position:absolute; left:0; right:0; bottom:160px; width:100%; height:220px;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.18));
}
.hero-v20 .f{
  stroke:rgba(255,255,255,.65); stroke-width:2;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:420 820; stroke-dashoffset:0;
  animation:hero20-dash 16s linear infinite;
  opacity:.30;
}
.hero-v20 .f2{ animation-duration:19s; opacity:.26; }
.hero-v20 .f3{ animation-duration:22s; opacity:.22; }
@keyframes hero20-dash { to { stroke-dashoffset:-1240; } }

/* soft fade to white so the next section doesn't feel abrupt */
.hero-v20 .hero20-fade{
  position:absolute; left:0; right:0; bottom:0; height:240px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 68%);
  pointer-events:none;
}

/* Content grid */
.hero-v20 .hero20-wrap{
  position:relative; z-index:2;
  width:100%; max-width:1400px; margin:0 auto; padding:0 clamp(24px,4vw,64px);
  display:grid; grid-template-columns:minmax(560px, 720px) 1fr; gap:56px; align-items:center;
}

/* Copy (left) */
.hero-v20 .hero20-title{
  margin:0 0 14px; line-height:1.03;
  font-weight:800; letter-spacing:-.02em;
  font-size: clamp(60px, 7.2vw, 96px);
  white-space:nowrap;         /* one line on desktop */
}
.hero-v20 .hero20-title span{
  color:#31C3FF; text-shadow:0 12px 36px rgba(49,195,255,.20);
}

.hero-v20 .hero20-sub{
  margin:0 0 22px; font-size:18px; line-height:1.6; max-width:60ch; color:#EAF4FF;
  background:rgba(6,12,22,.52); padding:14px 16px; border-radius:14px;
  backdrop-filter:saturate(140%) blur(6px); -webkit-backdrop-filter:saturate(140%) blur(6px);
  box-shadow:0 12px 34px rgba(0,0,0,.28);
}

.hero-v20 .hero20-ctas{ display:flex; gap:12px; margin:0 0 12px; }
.hero-v20 .hero20-points{ list-style:none; padding:0; margin:0; color:#d8ecff; font-size:15px; opacity:.95; }
.hero-v20 .hero20-points li{ display:inline; }
.hero-v20 .hero20-points li+li::before{ content:" · "; margin:0 .45rem; opacity:.6; }

/* Showcase (right) */
.hero-v20 .hero20-showcase{
  position:relative; min-height:480px;
  display:flex; align-items:center; justify-content:flex-end;
}

/* Generic device */
.hero-v20 .device{ margin:0; position:relative; }
.hero-v20 .device figcaption{ position:absolute; left:16px; bottom:-28px; font-size:12px; opacity:.75; }

/* Laptop */
.hero-v20 .device-laptop{
  width:min(640px, 46vw);
  transform:translateY(12px);
}
.hero-v20 .device-laptop .frame{
  position:relative; width:100%; padding-top:62%; /* aspect ratio */
  border-radius:20px; background:#0b2146; box-shadow:0 30px 60px rgba(0,0,0,.45);
  outline:2px solid rgba(255,255,255,.08);
}
.hero-v20 .device-laptop .frame::after{
  content:""; position:absolute; left:-4%; right:-4%; bottom:-18px; height:24px; border-radius:14px;
  background:#07162D; box-shadow:0 18px 28px rgba(0,0,0,.35);
}
.hero-v20 .screen{
  position:absolute; inset:10px 10px 18px 10px; width:calc(100% - 20px); height:calc(100% - 28px);
  object-fit:cover; border-radius:14px; opacity:0; transition:opacity .6s ease;
}
.hero-v20 .screen.is-on{ opacity:1; }

/* Phone */
.hero-v20 .device-phone{
  width:220px; position:absolute; right:-10px; bottom:24px;
  animation:hero20-float 6s ease-in-out infinite;
}
.hero-v20 .device-phone .frame{
  position:relative; width:100%; padding-top:185%;
  border-radius:26px; background:#0b2146; box-shadow:0 20px 40px rgba(0,0,0,.45);
  outline:2px solid rgba(255,255,255,.08);
}
.hero-v20 .device-phone .screen{
  position:absolute; inset:10px; border-radius:22px; object-fit:cover; opacity:0; transition:opacity .6s ease;
}
.hero-v20 .device-phone .screen.is-on{ opacity:1; }

@keyframes hero20-float{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-10px) }
}

/* Responsive */
@media (max-width:1180px){
  .hero-v20 .hero20-wrap{ grid-template-columns:1fr; gap:40px; }
  .hero-v20 .hero20-title{ white-space:normal; } /* allow wrap below desktop */
  .hero-v20 .hero20-showcase{ justify-content:center; min-height:520px; }
  .hero-v20 .device-phone{ right:18px; }
}

/* --- fix text hidden behind mockup --- */
.hero-v20 .hero20-wrap{
  /* widen the left column and add more gap */
  max-width: 1320px;              /* was 1400 – bring content in a touch */
  grid-template-columns: minmax(640px, 760px) minmax(520px, 1fr);
  gap: 64px;
}

.hero-v20 .hero20-copy{
  position: relative;
  z-index: 3;                     /* sits above the devices */
}

.hero-v20 .hero20-showcase{
  position: relative;
  z-index: 2;
  justify-content: flex-end;
}

/* keep headline huge but avoid pushing into the right column too early */
.hero-v20 .hero20-title{
  font-size: clamp(56px, 6.4vw, 92px);
  white-space: nowrap;            /* single line on desktop */
}

/* tighten device width a touch so it doesn’t encroach */
.hero-v20 .device-laptop{ width: min(600px, 44vw); }
.hero-v20 .device-phone{ right: -4px; }

/* make the whole thing step down cleanly before overlap happens */
@media (max-width: 1280px){
  .hero-v20 .hero20-title{ font-size: clamp(48px, 5.6vw, 80px); }
  .hero-v20 .hero20-wrap{
    grid-template-columns: minmax(560px, 680px) 1fr;
    gap: 52px;
  }
}
@media (max-width: 1180px){
  .hero-v20 .hero20-wrap{ grid-template-columns: 1fr; }
  .hero-v20 .hero20-title{ white-space: normal; } /* wrap nicely on tablet */
  .hero-v20 .hero20-showcase{ justify-content:center; }
}

/* --- hero-v20 text & layout fix --- */
.hero-v20 .hero20-wrap{
  max-width: 1320px;
  grid-template-columns: minmax(520px, 700px) 1fr; /* more room left */
  gap: 60px;
}

.hero-v20 .hero20-copy{
  position: relative;
  z-index: 3; /* always above the mockups */
}

.hero-v20 .hero20-title{
  font-size: clamp(56px, 6vw, 88px);
  line-height: 1.1;
  font-weight: 800;
  white-space: normal;   /* allow break, so “Future of HR” can drop */
}

.hero-v20 .hero20-sub{
  margin-top: 18px;
  max-width: 520px;
  font-size: 20px;
  line-height: 1.5;
  color: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px) saturate(140%);
  background: rgba(10,16,28,.42);
  padding: 12px 16px;
  border-radius: 12px;
}

.hero-v20 .hero20-showcase{
  position: relative;
  z-index: 2;
  justify-content: flex-end;
}

/* Device sizes slightly reduced so they don’t clash with copy */
.hero-v20 .device-laptop{ width: min(620px, 44vw); }
.hero-v20 .device-phone{ right: -6px; }

/* Responsiveness */
@media (max-width: 1180px){
  .hero-v20 .hero20-wrap{
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .hero-v20 .hero20-showcase{ justify-content: center; }
  .hero-v20 .hero20-sub{ margin-left:auto; margin-right:auto; }
}

/* Keep a tidy 2-line headline: line1 + line2 that never splits */
.hero-v20 .hero20-title.fix-wrap{
  display:flex;               /* ensures the two lines stack cleanly */
  flex-direction:column;
  gap:6px;
  font-size:clamp(56px, 6vw, 88px);
  line-height:1.05;
  font-weight:800;
}
.hero-v20 .hero20-title.fix-wrap .pre{ white-space:nowrap; }
.hero-v20 .hero20-title.fix-wrap .keep{ white-space:nowrap; }

/* Optional: if you ever want a single line on ultrawide screens */
@media (min-width:1600px){
  .hero-v20 .hero20-title.fix-wrap{
    font-size:clamp(72px, 6vw, 104px);
  }
}

.hero-v20 .hero20-mockup {
  margin-left: 100px;   /* adjust this number */
}
@media (max-width: 992px){
  .hero-v20 .hero20-mockup{
    margin-left: 0;       /* reset on tablet/mobile */
    max-width: 90%;
  }
}
.hero-graphic {
  position: relative;
  margin-left: 450px; /* pushes it 100px to the right */
}

/* === HERO v20 spacing & nudge === */
.hero-v20 .hero20-wrap{
  display: grid;
  grid-template-columns: 1.05fr 1fr;               /* give the text a little more width */
  align-items: center;
  column-gap: clamp(48px, 6vw, 140px);             /* bigger, responsive gap between text & mockup */
}

.hero-v20 .hero20-copy{
  max-width: 700px;                                 /* prevent super-long lines so it won't intrude right */
  position: relative; z-index: 3;                   /* keep text above background bits */
}

.hero-v20 .hero20-showcase{
  position: relative; z-index: 2;
  transform: translateX(100px);                     /* <<< nudge the mockup 100px to the right */
}

/* Scale back the nudge on narrower screens */
@media (max-width: 1200px){
  .hero-v20 .hero20-showcase{ transform: translateX(60px); }
}
@media (max-width: 992px){
  .hero-v20 .hero20-wrap{
    grid-template-columns: 1fr;                     /* stack on tablet/mobile */
    row-gap: 28px;
    
  }
  .hero-v20 .hero20-showcase{
    transform: none;                                /* no nudge when stacked */
    justify-self: center;                           /* center the mockup below */
  }
}

/* Adjust showcase position */
.hero-v20 .hero20-showcase{
  transform: translateX(60px);   /* was 100px */
}

/* Optional: keep spacing natural */
.hero-v20 .hero20-wrap{
  grid-template-columns: 1.05fr 1fr;
  column-gap: clamp(40px, 4vw, 80px); /* reduced max gap */
}

/* Tunables */
.hero-v20{
  --pre-size:  clamp(32px, 4.6vw, 56px);  /* "Powering the" */
  --main-size: clamp(52px, 7.4vw, 96px);  /* "Future of HR" */
  --pre-color: rgba(255,255,255,.92);
  --main-grad: linear-gradient(90deg,#38bdf8,#0ea5e9,#2563eb);
}

/* Base title wrapper */
.hero-v20 .hero20-title{
  margin: 0 0 10px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* "Powering the" — smaller, lighter */
.hero-v20 .hero20-pre{
  display:block;
  font-weight: 800;
  font-size: var(--pre-size);
  color: var(--pre-color);
}

/* "Future of HR" — emphasized, bigger, brand gradient */
.hero-v20 .hero20-main{
  display:block;
  font-weight: 900;
  font-size: var(--main-size);
  line-height: 1;
  letter-spacing: -0.025em;
  background: var(--main-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;                      /* shows the gradient */
  text-shadow: 0 6px 22px rgba(0,0,0,.18); /* subtle depth */
}

/* Keep the phrase on two lines max on mid screens */
@media (max-width: 1100px){
  .hero-v20 .hero20-pre{ font-size: clamp(30px, 5.4vw, 48px); }
  .hero-v20 .hero20-main{ font-size: clamp(44px, 8vw, 78px); }
}

/* If you ever want solid color instead of gradient: add .solid to the h1 */
.hero-v20 .hero20-title.solid .hero20-main{
  background: none;
  color: #2aa8ff; /* brand blue */
  text-shadow: 0 4px 18px rgba(0,0,0,.16);
}

/* Keep “Future of HR” on a single line and enlarge it */
.hero-v20 .hero20-main{
  display:block;
  white-space: nowrap;              /* <-- no line break */
  font-weight:900;
  font-size: clamp(56px, 7.6vw, 112px);
  line-height: 1.02;
  letter-spacing:-0.025em;
}

/* Slightly widen the copy column so the big line fits */
.hero-v20 .hero20-copy{
  max-width: 720px;                 /* was smaller; adjust if needed */
}

/* If you want it to wrap on very small screens, relax nowrap there */
@media (max-width: 640px){
  .hero-v20 .hero20-main{ white-space: normal; } /* optional */
}

/* Headline overrides */
.hero-v20 .hero20-pre {
  display: block;
  font-size: 28px;          /* smaller text */
  font-weight: 500;
  color: #a8c3ff;           /* light bluish tone */
  margin-bottom: 8px;
}

.hero-v20 .hero20-main {
  display: block;
  white-space: nowrap;      /* keeps "Future of HR" on one line */
  font-size: clamp(60px, 7vw, 110px);  /* big responsive size */
  font-weight: 900;
  color: #ff6a00;           /* ORANGE highlight */
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.hero20-pre {
  display: block;
  font-size: 28px !important;
  font-weight: 500 !important;
  color: #a8c3ff !important;  /* light bluish */
  margin-bottom: 8px !important;
}

.hero20-main {
  display: block;
  white-space: nowrap !important;  /* prevents breaking */
  font-size: clamp(60px, 7vw, 110px) !important;
  font-weight: 900 !important;
  color: #ff6a00 !important;  /* ORANGE now */
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
}

.hero20-sub {
  font-size: 20px;
  font-weight: 400;
  color: #e5e5e5;   /* subtle light gray */
  max-width: 580px;
  margin-top: 18px;
  margin-bottom: 28px;
  line-height: 1.4;
}

/* INSIGHTS — make sure nothing gets clipped & layout is robust */
#insights.section{ overflow: visible !important; padding-bottom: 88px !important; }
#insights #figures{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(220px,1fr));
  gap: 22px 22px;
}
@media (max-width: 1100px){
  #insights #figures{ grid-template-columns: repeat(2, minmax(220px,1fr)); }
}
@media (max-width: 640px){
  #insights #figures{ grid-template-columns: 1fr; }
}
/* strong min-height so longer labels don’t push tiles out oddly */
#insights .figure-card{ min-height: 160px; }

/* ===== METRICS v3 (scoped) ===== */
.metrics-v3{
  position: relative;
  padding: 72px 0 88px;
  color:#fff;
  overflow: hidden;
  --mx3-navy:#0d2a6a;
  --mx3-teal:#0d8e82;
  --mx3-maroon:#9c2323;
  --mx3-orange:#ff7a18;
}

.metrics-v3 .mx3-bg{
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(13,42,106,1) 10%, rgba(13,142,130,0.85) 55%, rgba(255,122,24,0.85) 100%);
}
.metrics-v3 .mx3-orb{
  position:absolute; border-radius:50%; filter: blur(30px); opacity:.25; pointer-events:none;
}
.metrics-v3 .mx3-orb.a{ width:520px; height:520px; background:#4fd3ff; left:-160px; top:-160px; }
.metrics-v3 .mx3-orb.b{ width:560px; height:560px; background:#ffd166; right:-180px; bottom:-200px; }

.metrics-v3 .mx3-flow{
  position:absolute; left:0; right:0; bottom:0; height:160px; opacity:.35;
}
.metrics-v3 .mx3-flow .f1,
.metrics-v3 .mx3-flow .f2{
  stroke: rgba(255,255,255,.6); stroke-width:2;
}
.metrics-v3 .mx3-flow .f1{ animation:mx3Slide 12s linear infinite; }
.metrics-v3 .mx3-flow .f2{ animation:mx3Slide 14s linear reverse infinite; opacity:.7; }
@keyframes mx3Slide{ from{ transform:translateX(-2%);} to{ transform:translateX(2%);} }

.metrics-v3 .mx3-wrap{ max-width:1200px; margin:0 auto; padding:0 18px; position:relative; z-index:1; }

.metrics-v3 .mx3-head{ text-align:center; margin-bottom:22px; }
.metrics-v3 .mx3-head h6{
  margin:0 0 6px; text-transform:uppercase; letter-spacing:.12em; font-weight:800; opacity:.85;
}
.metrics-v3 .mx3-head h3{
  margin:0; font-weight:900; letter-spacing:-.02em;
  font-size: clamp(28px, 2.6vw, 40px);
}
.metrics-v3 .mx3-head h3 em{ color:#ffd166; font-style:normal; }

.metrics-v3 .mx3-grid{
  display:grid; grid-template-columns:repeat(4, minmax(220px,1fr));
  gap:18px;
}
@media (max-width: 1100px){
  .metrics-v3 .mx3-grid{ grid-template-columns:repeat(2, minmax(240px,1fr)); }
}
@media (max-width: 640px){
  .metrics-v3 .mx3-grid{ grid-template-columns:1fr; }
}

/* tiles */
.metrics-v3 .mx3-tile{
  position:relative;
  padding:26px 22px;
  border-radius:18px;
  backdrop-filter: blur(6px) saturate(120%);
  background: rgba(255,255,255,.08);
  box-shadow: 0 18px 44px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.18);
  transform: translateY(16px);
  opacity: 0;
  transition: transform .6s cubic-bezier(.2,.9,.2,1), opacity .6s ease, box-shadow .3s ease;
}
.metrics-v3 .mx3-tile.show{ transform:none; opacity:1; }
.metrics-v3 .mx3-tile:hover{ box-shadow: 0 26px 64px rgba(0,0,0,.24), inset 0 0 0 1px rgba(255,255,255,.28); }

.metrics-v3 .mx3-tile .num{
  line-height:1; margin-bottom:6px;
  font-weight:900; letter-spacing:-.02em;
  font-size: clamp(44px, 5.6vw, 72px);
  display:flex; align-items:baseline; gap:6px;
}
.metrics-v3 .mx3-tile .suffix{ font-size:.5em; font-weight:900; opacity:.9; }
.metrics-v3 .mx3-tile .label{
  margin:0; font-weight:700; opacity:.92; letter-spacing:.2px;
}

/* subtle per-card tint */
.metrics-v3 .t1{ background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(79,211,255,.10)); }
.metrics-v3 .t2{ background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(13,142,130,.10)); }
.metrics-v3 .t3{ background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(156,35,35,.10)); }
.metrics-v3 .t4{ background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,122,24,.12)); }

/* if your main page uses dark text on white after this band, add a white fade */
.metrics-v3::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:140px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #ffffff 70%);
}

/* ================= METRICS SLIM (compact divider) ================= */
.metrics-slim {
  background: linear-gradient(135deg, #004aad, #ff6f00);
  color: #fff;
  text-align: center;
  padding: 50px 20px;   /* compact vertical spacing */
  position: relative;
  overflow: hidden;
}

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

.mxs-head h6 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.85;
  margin-bottom: 8px;
}

.mxs-head h3 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 30px;
}

.mxs-head em {
  color: #ffd54f; /* highlight word */
  font-style: normal;
}

.mxs-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mxs-item {
  flex: 1 1 180px;
  min-width: 160px;
}

.mxs-num {
  display: block;
  font-size: 42px;
  font-weight: 800;
  line-height: 1.2;
}

.mxs-num sup {
  font-size: 18px;
  margin-left: 2px;
}

.mxs-label {
  display: block;
  font-size: 15px;
  margin-top: 6px;
  opacity: 0.9;
}

/* Smaller screens */
@media (max-width: 768px) {
  .mxs-stats {
    gap: 25px;
  }
  .mxs-num {
    font-size: 34px;
  }
  .mxs-head h3 {
    font-size: 22px;
  }
}

/* ===== INSIGHTS & FIGURES — Clean white band, huge stats, tight spacing (v22) ===== */

/* Base: white, compact padding */
#insights.section{
  position: relative;
  background: #fff !important;           /* kill colored gradient */
  padding: 28px 0 28px !important;       /* tighter top/bottom */
  margin: 24px 0 0 !important;           /* pull closer to About */
  overflow: hidden;
}

/* Soft white fades so transitions to neighbors look seamless */
#insights.section::before,
#insights.section::after{
  content:"";
  position:absolute; left:0; right:0;
  pointer-events:none;
}
#insights.section::before{                /* fade FROM About into this band */
  top:-70px; height:80px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #ffffff 70%);
}
#insights.section::after{                 /* fade INTO Solution Offering */
  bottom:-90px; height:120px;
  background: linear-gradient(to top, rgba(255,255,255,0), #ffffff 75%);
}

/* Section header – consistent with the site */
#insights .section-heading{ margin: 0 0 16px !important; }
#insights .section-heading h6{
  margin:0 0 6px; text-transform:uppercase; letter-spacing:.08em; font-weight:800; color:#6b7280;
}
#insights .section-heading h4{
  margin:0; font-weight:900; color:#0f172a;
}
#insights .section-heading h4 em{ color:#9c2323; font-style:normal; }
#insights .section-heading .line-dec{
  width:56px; height:3px; margin:10px auto 0; border-radius:2px; background:#9c2323;
}

/* Grid spacing */
#insights #figures{ row-gap: 14px !important; }

/* Tiles: subtle white card (no band gradient) */
#insights .figure-card{
  background: rgba(255,255,255,.9) !important;
  border: 1px solid #e9edf2 !important;
  border-radius: 18px !important;
  padding: 24px 18px !important;
  height: 100% !important;
  text-align: center !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.06) !important;
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
#insights .figure-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0,0,0,.10);
  border-color: rgba(13,142,130,.25);
}

/* BIG numbers + bolder labels */
#insights .figure-number{ line-height: 1; margin-bottom: 6px; }
#insights .figure-number .counter{
  display:inline-block;
  font-weight: 900;
  letter-spacing: -1.2px;
  font-size: clamp(56px, 8vw, 120px);    /* <<< adjust max if you want it even bigger */
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}
#insights .figure-caption{
  font-size: clamp(14px, 1.05vw + .35rem, 22px);
  font-weight: 700;
  color: #374151;
}

/* Close the whitespace above/below by tightening neighbors */
#about{ margin-bottom: 10px !important; }
#solution{ margin-top: 8px !important; }  /* Solution Offering section */
#solution .section-heading{ margin-top: 0 !important; }

/* (Optional) If you still see a little gap, nudge more by a few pixels */
@media (min-width: 992px){
  #insights.section{ padding-bottom: 18px !important; }
  #solution{ margin-top: 2px !important; }
}


/* ===== METRICS SLIM v2 — compact white band, big numbers, smooth fades ===== */
.metrics-slim{
  --ink:#0f172a;
  --muted:#6b7280;
  --accent:#f26a2e;     /* Orange accent for “scale” – tweak if needed */
  --shadow:0 12px 24px rgba(0,0,0,.06);

  position:relative;
  background:#fff !important;
  padding: 28px 0 36px;                 /* tight band */
  isolation:isolate;                    /* keep fades contained */
}

/* Soft white fade from the section above and into the next section */
.metrics-slim::before,
.metrics-slim::after{
  content:"";
  position:absolute; left:0; right:0;
  pointer-events:none; z-index:0;
}
.metrics-slim::before{                  /* fade-in from previous section */
  top:-56px; height:56px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 70%);
}
.metrics-slim::after{                   /* fade-out into next section */
  bottom:-64px; height:64px;
  background:linear-gradient(to top, rgba(255,255,255,0), #fff 70%);
}

.mxs-wrap{ position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 16px; }

/* Heading */
.mxs-head{ text-align:center; margin:0 0 10px; }
.mxs-head h6{
  margin:0 0 6px;
  font: 800 12px/1.1 "Poppins",system-ui,sans-serif;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.mxs-head h3{
  margin:0;
  font: 900 clamp(22px,2.4vw,28px)/1.1 "Poppins",system-ui,sans-serif;
  color:var(--ink);
}
.mxs-head h3 em{ color:var(--accent); font-style:normal; }

/* Stats grid */
.mxs-stats{
  margin: 10px auto 0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap: clamp(10px, 1.8vw, 18px);
  align-items:stretch;
}

/* Each tile */
.mxs-item{
  background:#fff; border:1px solid #e9edf2; border-radius:16px;
  padding: clamp(14px, 2vw, 20px) clamp(10px, 2vw, 16px);
  box-shadow: var(--shadow);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.mxs-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(0,0,0,.08);
  border-color: rgba(13,142,130,.28); /* subtle teal tint on hover */
}

/* BIG numbers */
.mxs-num{
  line-height:1; margin-bottom:6px;
  display:flex; align-items:flex-start; gap:6px;
}
.mxs-num .counter{
  font-weight: 900;
  font-size: clamp(40px, 6.6vw, 86px);  /* HUGE on desktop, scales down nicely */
  letter-spacing:-.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.mxs-num sup{
  font-weight: 900;
  font-size: clamp(18px, 2vw, 24px);
  line-height:1;
  color: var(--ink);
  margin-top: clamp(6px, 0.8vw, 10px);
}

/* Labels */
.mxs-label{
  font-weight: 600;
  font-size: clamp(12px, 1.5vw, 14px);
  color:#334155;
  opacity:.9;
}

/* Tighten vertical rhythm to keep sections close */
.metrics-slim + section{ margin-top: 14px !important; }  /* pull next section up slightly */

/* Responsive stacking */
@media (max-width: 992px){
  .mxs-stats{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 540px){
  .mxs-stats{ grid-template-columns:1fr; }
  .metrics-slim{ padding:24px 0 30px; }
}

/* ===== METRICS SLIM v2.3 — blend-in background + tighter, bigger tiles ===== */

/* Base */
.metrics-slim{
  --ink:#0f172a;
  --muted:#6b7280;
  --accent:#f26a2e;                /* orange for “scale” */
  --blue:#0d2a6a;                  /* brand navy */
  --orange:#f26a2e;
  --shadow:0 12px 24px rgba(0,0,0,.06);

  position:relative;
  background:#fff !important;
  padding: 26px 0 34px;            /* compact band */
  isolation:isolate;
}

/* soft white fades so it doesn't feel cut off */
.metrics-slim::before,
.metrics-slim::after{
  content:"";
  position:absolute; left:0; right:0; pointer-events:none; z-index:0;
}
.metrics-slim::before{ top:-56px; height:56px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 70%);
}
.metrics-slim::after{ bottom:-64px; height:64px;
  background:linear-gradient(to top, rgba(255,255,255,0), #fff 70%);
}

/* ultra-light brand “halos” in opposite corners to tie into hero shapes */
.metrics-slim .mxs-wrap::before,
.metrics-slim .mxs-wrap::after{
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(520px 220px at 6% 0%, rgba(13,42,106,.06), transparent 60%),
    radial-gradient(520px 220px at 94% 100%, rgba(242,106,46,.08), transparent 60%);
  opacity:.85;
  filter: saturate(110%); /* keep it very soft but present */
}
.mxs-wrap{ position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:0 16px; }

/* Heading */
.mxs-head{ text-align:center; margin:0 0 12px; position:relative; }
.mxs-head h6{
  margin:0 0 6px;
  font:800 12px/1.1 "Poppins",system-ui,sans-serif;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.mxs-head h3{ margin:0; font:900 clamp(22px,2.4vw,28px)/1.1 "Poppins",system-ui,sans-serif; color:var(--ink); }
.mxs-head h3 em{ color:var(--accent); font-style:normal; }

/* connector hairline below heading */
.mxs-head::after{
  content:""; display:block; width:72px; height:3px; margin:10px auto 0;
  border-radius:2px; background:linear-gradient(90deg, var(--blue), var(--orange));
  opacity:.28;
}

/* Grid */
.mxs-stats{
  margin: 14px auto 0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap: clamp(12px, 2vw, 18px);
  align-items:stretch;
}

/* Tiles — a touch taller so big numbers don’t look cramped */
.mxs-item{
  background:#fff; border:1px solid #e9edf2; border-radius:18px;
  padding: clamp(16px, 2.2vw, 22px) clamp(14px, 2vw, 18px);
  min-height: 120px;                /* equal heights */
  box-shadow: var(--shadow);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
}
.mxs-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(0,0,0,.09);
  border-color: rgba(13,142,130,.24);
}

/* Big numbers */
.mxs-num{
  line-height:1; margin-bottom:6px;
  display:flex; align-items:flex-start; gap:6px; flex-wrap:nowrap;
}
.mxs-num .counter{
  font-weight: 900;
  font-size: clamp(44px, 7vw, 92px);   /* even bigger */
  letter-spacing:-.6px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.mxs-num sup{
  font-weight:900; font-size: clamp(18px, 2vw, 24px); line-height:1;
  color: var(--ink); margin-top: clamp(6px, .8vw, 10px);
}

/* Labels */
.mxs-label{
  font-weight:600; font-size: clamp(12px, 1.5vw, 14px);
  color:#334155; opacity:.9;
}

/* Reduce whitespace to next section */
.metrics-slim + section{ margin-top: 10px !important; }

/* Responsive */
@media (max-width: 992px){
  .mxs-stats{ grid-template-columns:repeat(2,1fr); }
  .mxs-item{ min-height: 110px; }
}
@media (max-width: 540px){
  .mxs-stats{ grid-template-columns:1fr; }
  .metrics-slim{ padding:24px 0 30px; }
}

/* ===== METRICS SLIM — full-bleed, no header, colored tiles (v3) ===== */

/* kill any section background/fades */
.metrics-slim{
  background: transparent !important;
  padding: 8px 0 0 !important;
}
.metrics-slim::before,
.metrics-slim::after{ display:none !important; }

/* hide the heading block entirely */
.metrics-slim .mxs-head{ display:none !important; }

/* FULL-BLEED wrapper (edge-to-edge) */
.metrics-slim .mxs-wrap{
  max-width: none !important;
  margin-inline: calc(50% - 50vw) !important;  /* pull to viewport edges */
  width: 100vw !important;
  padding-inline: clamp(12px, 5vw, 40px) !important; /* inner gutter */
  position: relative;
  z-index: 1;
}

/* Grid: 4 across desktop, responsive down */
.metrics-slim .mxs-stats{
  margin: 0 auto !important;
  padding: 0 !important;
  list-style: none;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(10px, 2vw, 18px) !important;
  align-items: stretch;
}

/* Cards — bigger, colored, no borders */
.metrics-slim .mxs-item{
  border: 0 !important;
  border-radius: 18px !important;
  min-height: 120px !important;
  padding: clamp(16px, 2.2vw, 22px) clamp(12px, 2vw, 18px) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.06) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  color: #0f172a !important;
  background: #fff; /* fallback */
}

/* subtle brand tints per tile */
.metrics-slim .mxs-item:nth-child(1){
  background: linear-gradient(180deg, rgba(13,42,106,.09), rgba(13,42,106,.04));
}
.metrics-slim .mxs-item:nth-child(2){
  background: linear-gradient(180deg, rgba(14,165,233,.10), rgba(14,165,233,.05));
}
.metrics-slim .mxs-item:nth-child(3){
  background: linear-gradient(180deg, rgba(124,58,237,.10), rgba(59,130,246,.06));
}
.metrics-slim .mxs-item:nth-child(4){
  background: linear-gradient(180deg, rgba(242,106,46,.12), rgba(242,106,46,.06));
}

/* Numbers — large & tight */
.metrics-slim .mxs-num{
  line-height: 1; margin-bottom: 6px;
  display: inline-flex; align-items: flex-start; gap: 6px;
}
.metrics-slim .mxs-num .counter{
  font-weight: 900 !important;
  font-size: clamp(44px, 7vw, 92px) !important;
  letter-spacing: -0.6px;
  font-variant-numeric: tabular-nums;
  color: #0b1220 !important;
}
.metrics-slim .mxs-num sup{
  font-weight: 900; font-size: clamp(16px, 2vw, 22px); margin-top: .4em;
}

/* Labels */
.metrics-slim .mxs-label{
  font-weight: 600; font-size: clamp(12px, 1.5vw, 14px); color: #334155; opacity: .95;
}

/* tighten gap to the next section */
.metrics-slim + section{ margin-top: 8px !important; }

/* Responsive */
@media (max-width: 992px){
  .metrics-slim .mxs-stats{ grid-template-columns: repeat(2,1fr) !important; }
  .metrics-slim .mxs-item{ min-height: 110px !important; }
}
@media (max-width: 560px){
  .metrics-slim .mxs-stats{ grid-template-columns: 1fr !important; }
  .metrics-slim .mxs-wrap{ padding-inline: 14px !important; }
}

/* ===== METRICS SLIM — FORCE FULL-BLEED EVEN INSIDE .container (v3.1) ===== */

/* escape any Bootstrap/parent container */
.container .metrics-slim,
.container-fluid .metrics-slim,
.metrics-slim{
  position: relative !important;
  width: 100vw !important;
  max-width: none !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;   /* pull to left edge of viewport */
  margin-right: -50vw !important;  /* pull to right edge of viewport */
  padding-top: 8px !important;
  padding-bottom: 0 !important;
  background: transparent !important;
}

/* keep inner gutters but don’t re-center */
.metrics-slim .mxs-wrap{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-left: clamp(12px, 5vw, 40px) !important;
  padding-right: clamp(12px, 5vw, 40px) !important;
}

/* kill the header if still visible anywhere */
.metrics-slim .mxs-head{ display: none !important; }

/* grid + cards (unchanged from previous, included here for completeness) */
.metrics-slim .mxs-stats{
  list-style: none; margin: 0 !important; padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: clamp(10px, 2vw, 18px) !important;
}
.metrics-slim .mxs-item{
  border: 0 !important; border-radius: 18px !important;
  min-height: 120px !important;
  padding: clamp(16px,2.2vw,22px) clamp(12px,2vw,18px) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.06) !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  text-align: center !important; color: #0f172a !important;
  background: #fff;
}

/* subtle tints per tile */
.metrics-slim .mxs-item:nth-child(1){
  background: linear-gradient(180deg, rgba(13,42,106,.09), rgba(13,42,106,.04));
}
.metrics-slim .mxs-item:nth-child(2){
  background: linear-gradient(180deg, rgba(14,165,233,.10), rgba(14,165,233,.05));
}
.metrics-slim .mxs-item:nth-child(3){
  background: linear-gradient(180deg, rgba(124,58,237,.10), rgba(59,130,246,.06));
}
.metrics-slim .mxs-item:nth-child(4){
  background: linear-gradient(180deg, rgba(242,106,46,.12), rgba(242,106,46,.06));
}

/* numbers + labels */
.metrics-slim .mxs-num{ line-height:1; margin-bottom:6px; display:inline-flex; gap:6px; }
.metrics-slim .mxs-num .counter{
  font-weight:900 !important; font-size: clamp(44px, 7vw, 92px) !important;
  letter-spacing:-.6px; font-variant-numeric: tabular-nums; color:#0b1220 !important;
}
.metrics-slim .mxs-num sup{ font-weight:900; font-size:clamp(16px,2vw,22px); margin-top:.4em; }
.metrics-slim .mxs-label{ font-weight:600; font-size:clamp(12px,1.5vw,14px); color:#334155; }

/* tighten gap to next section */
.metrics-slim + section{ margin-top: 8px !important; }

/* responsive */
@media (max-width: 992px){
  .metrics-slim .mxs-stats{ grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 560px){
  .metrics-slim .mxs-stats{ grid-template-columns: 1fr !important; }
  .metrics-slim .mxs-wrap{ padding-left:14px !important; padding-right:14px !important; }
}

/* ===== METRICS SLIM — stronger tint + font control ===== */

/* card styling */
.metrics-slim .mxs-item{
  border: 0 !important;
  border-radius: 18px !important;
  min-height: 140px !important;
  padding: clamp(18px,2.5vw,26px) clamp(14px,2.2vw,22px) !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.08) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  color: #0f172a !important;
  background: #fff; /* fallback */

  
}

.metrics-slim .mxs-item {
  box-shadow: none !important;   /* no shadows at all */
  background: #fff !important;   /* keep solid white cards */
}
/* vivid tint backgrounds */
.metrics-slim .mxs-item:nth-child(1){
  background: linear-gradient(160deg, rgba(13,42,106,.25), rgba(13,42,106,.15));
}
.metrics-slim .mxs-item:nth-child(2){
  background: linear-gradient(160deg, rgba(14,165,233,.30), rgba(14,165,233,.15));
}
.metrics-slim .mxs-item:nth-child(3){
  background: linear-gradient(160deg, rgba(124,58,237,.30), rgba(59,130,246,.18));
}
.metrics-slim .mxs-item:nth-child(4){
  background: linear-gradient(160deg, rgba(242,106,46,.35), rgba(242,106,46,.18));
}

/* numbers (decrease font size here) */
.metrics-slim .mxs-num .counter{
  font-weight: 900 !important;
  font-size: clamp(36px, 6vw, 64px) !important; /* smaller */
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  color: #0b1220 !important;
}
.metrics-slim .mxs-num sup{
  font-weight: 900;
  font-size: clamp(14px,1.8vw,18px);
  margin-top: .4em;
}

/* labels */
.metrics-slim .mxs-label{
  font-weight: 600;
  font-size: clamp(12px, 1.4vw, 14px); /* ↓ smaller */
  color: #1e293b;
}


/* Layout tweak: allow cards to breathe */
.metrics-slim .mxs-stats {
  display: flex;
  justify-content: center;
  gap: 28px;                  /* space between cards */
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 1100px;          /* shortens total width */
}

/* Card styling */
.metrics-slim .mxs-item {
  flex: 1 1 220px;            /* minimum width per card */
  max-width: 240px;           /* stop cards from stretching too long */
  border-radius: 20px;
  padding: 28px 20px;
  text-align: center;
  background: linear-gradient(145deg, #ffffff, #f8fafc);
  box-shadow: 0 12px 24px rgba(15,23,42,0.08), 
              0 4px 8px rgba(15,23,42,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Hover effect to make it pop */
.metrics-slim .mxs-item:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 20px 36px rgba(15,23,42,0.12), 
              0 8px 16px rgba(15,23,42,0.08);
}

/* Numbers */
.metrics-slim .mxs-num {
  font-size: 3.2rem;          /* bigger number */
  font-weight: 800;
  color: #F26A2E;             /* orange highlight */
  line-height: 1;
  margin-bottom: 10px;
}

/* Labels */
.metrics-slim .mxs-label {
  font-size: 1rem;
  font-weight: 500;
  color: #1e293b;             /* slate/dark blue */
}

/* Remove plate / glow background */
.metrics-slim {
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.metrics-slim .mxs-wrap {
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Layout for tighter fit */
.metrics-slim .mxs-stats {
  display: flex;
  justify-content: center;
  gap: 24px;             /* spacing between cards */
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 1100px;     /* not full edge-to-edge, looks more premium */
}

/* Card styling */
.metrics-slim .mxs-item {
  flex: 1 1 220px;       /* responsive width */
  max-width: 240px;
  border-radius: 18px;
  padding: 28px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* colorful backgrounds */
  background: linear-gradient(135deg, #ff7a18, #ffb347); /* Orange card default */
  color: #fff;

  box-shadow: 0 10px 18px rgba(0,0,0,0.12);
  transition: transform .25s ease, box-shadow .25s ease;
}

/* Alternate colors for variety */
.metrics-slim .mxs-item:nth-child(2) {
  background: linear-gradient(135deg, #2563eb, #3b82f6); /* Blue */
}
.metrics-slim .mxs-item:nth-child(3) {
  background: linear-gradient(135deg, #16a34a, #22c55e); /* Green */
}
.metrics-slim .mxs-item:nth-child(4) {
  background: linear-gradient(135deg, #9333ea, #a855f7); /* Purple */
}

/* Hover pop effect */
.metrics-slim .mxs-item:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 16px 28px rgba(0,0,0,0.18);
}

/* Numbers */
.metrics-slim .mxs-num {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 6px;
  color: #fff; /* force white for contrast */
}

/* Labels */
.metrics-slim .mxs-label {
  font-size: 1rem;
  font-weight: 500;
  opacity: 0.9;
  color: #f1f5f9; /* soft gray-white */
}
/* ========== INSIGHTS v22+ Styling ========== */
.metrics-v22 {
  padding: 60px 0 40px;
  width: 100%;
}

.metrics-v22 .mxv22-stats {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 1150px;
  padding: 0;
  list-style: none;
}

.metrics-v22 .mxv22-item {
  flex: 1 1 220px;
  max-width: 260px;
  border-radius: 20px;
  padding: 36px 24px;
  text-align: center;
  color: #fff;
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
  transition: transform .35s ease, box-shadow .35s ease;
  opacity: 0;
  transform: translateY(40px) scale(0.95);
}

.metrics-v22 .mxv22-item.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.metrics-v22 .mxv22-item:hover {
  transform: translateY(-8px) scale(1.07);
  box-shadow: 0 18px 36px rgba(0,0,0,0.22);
}

.metrics-v22 .mxv22-num {
  font-size: 3.5rem;   /* Bigger emphasis */
  font-weight: 800;
  line-height: 1;
  margin-bottom: 10px;
  display: block;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.metrics-v22 .mxv22-label {
  font-size: 1.1rem;
  font-weight: 500;
  opacity: 0.95;
}

/* ====== COLORS ====== */
.metrics-v22 .mxv22-item.orange { background: linear-gradient(135deg, #f97316, #fb923c); }
.metrics-v22 .mxv22-item.blue   { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.metrics-v22 .mxv22-item.green  { background: linear-gradient(135deg, #16a34a, #22c55e); }
.metrics-v22 .mxv22-item.purple { background: linear-gradient(135deg, #9333ea, #a855f7); }

/* ================== INSIGHTS v22+ OVERRIDE ================== */
.metrics-v22 {
  padding: 40px 0 40px !important;
  width: 100% !important;
  background: none !important; /* remove any section tint/plate */
  box-shadow: none !important;
}

.metrics-v22 .mxv22-stats {
  display: flex !important;
  justify-content: center !important;
  gap: 28px !important;
  flex-wrap: wrap !important;
  margin: 0 auto !important;
  max-width: 1150px !important;
  padding: 0 !important;
  list-style: none !important;
  background: none !important;
  box-shadow: none !important;
}

.metrics-v22 .mxv22-item {
  flex: 1 1 220px !important;
  max-width: 260px !important;
  border-radius: 20px !important;
  padding: 36px 24px !important;
  text-align: center !important;
  color: #fff !important;
  background: #2563eb !important; /* fallback solid */
  transition: transform .35s ease, box-shadow .35s ease !important;
  opacity: 0 !important;
  transform: translateY(40px) scale(0.95) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,0.15) !important;
}

.metrics-v22 .mxv22-item.show {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.metrics-v22 .mxv22-item:hover {
  transform: translateY(-8px) scale(1.07) !important;
  box-shadow: 0 18px 36px rgba(0,0,0,0.22) !important;
}

.metrics-v22 .mxv22-num {
  font-size: 3.5rem !important;   /* BIG emphasis */
  font-weight: 800 !important;
  line-height: 1 !important;
  margin-bottom: 10px !important;
  display: block !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
}

.metrics-v22 .mxv22-label {
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  opacity: 0.95 !important;
}

/* ====== Gradient Colors ====== */
.metrics-v22 .mxv22-item.orange { background: linear-gradient(135deg, #f97316, #fb923c) !important; }
.metrics-v22 .mxv22-item.blue   { background: linear-gradient(135deg, #2563eb, #3b82f6) !important; }
.metrics-v22 .mxv22-item.green  { background: linear-gradient(135deg, #16a34a, #22c55e) !important; }
.metrics-v22 .mxv22-item.purple { background: linear-gradient(135deg, #9333ea, #a855f7) !important; }

/* Remove all unwanted background/tint/plate under cards */
.metrics-v22 .mxv22-wrap,
.metrics-v22::before,
.metrics-v22::after {
  background: none !important;
  box-shadow: none !important;
}



/* =========================================================
   CENTRALIZED BACKGROUND OVERRIDES — for quick testing
   Place this at the very end of hrsc-theme.css
   ========================================================= */

/* Hero (top section) */
#top,
.hero-v11 {
  background: url("assets/images/bg-hero-test.jpg") center/cover no-repeat !important;
}

/* Override About Us background */
#about.aboutv11 {
  background: url("../images/testforaboutus.png") no-repeat center/cover !important;
}

/* Solution */
#solution {
  background: url("assets/images/bg-solution-test.jpg") center/cover no-repeat !important;
}

/* Services */
#services {
  background: url("assets/images/bg-services-test.jpg") center/cover no-repeat !important;
}

/* Choose Us */
#choose {
  background: url("assets/images/bg-choose-test.jpg") center/cover no-repeat !important;
}

/* News */
#news {
  background: url("assets/images/bg-news-test.jpg") center/cover no-repeat !important;
}

/* Contact */
#contact {
  background: url("assets/images/bg-contact-test.jpg") center/cover no-repeat !important;
}

/* Section container */
.metrics-v22 {
  position: relative;
  padding: 3rem 1rem;
  text-align: center;
  background: transparent; /* remove card feel */
}

/* Stats list */
.mxv22-stats {
  display: flex;
  flex-wrap: wrap;   /* allows wrapping if zoomed */
  justify-content: center;
  gap: 3rem;         /* spacing between stats */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each stat item */
.mxv22-item {
  flex: 1 1 180px;   /* flexible, minimum width */
  max-width: 220px;
  background: none;  /* remove card box */
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Big number */
.mxv22-num {
  display: block;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.2;
}

/* Label */
.mxv22-label {
  display: block;
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 500;
  margin-top: 0.5rem;
  color: #333;
}

/* Color accents per item */
.mxv22-item.orange .mxv22-num { color: #ff7a00; }
.mxv22-item.blue .mxv22-num   { color: #007bff; }
.mxv22-item.green .mxv22-num  { color: #28a745; }
.mxv22-item.purple .mxv22-num { color: #6f42c1; }

/* ================= HERO Floating Shapes ================= */
.hero20-shapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0; /* behind hero content */
}

.hero20-shapes .shape {
  position: absolute;
  opacity: 0.25;
  animation: float 18s infinite ease-in-out;
}

.hero20-shapes .circle {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: #ff7a00;
  top: 20%; left: 10%;
  animation-delay: 0s;
}

.hero20-shapes .circle.small {
  width: 40px; height: 40px;
  background: #6f42c1;
  top: 70%; left: 25%;
  animation-delay: 4s;
}

.hero20-shapes .square {
  width: 70px; height: 70px;
  background: #007bff;
  top: 50%; left: 80%;
  animation-delay: 2s;
  transform: rotate(15deg);
}

.hero20-shapes .square.small {
  width: 35px; height: 35px;
  background: #28a745;
  top: 30%; left: 60%;
  animation-delay: 6s;
}

.hero20-shapes .triangle {
  width: 0; height: 0;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  border-bottom: 80px solid #ff2e63;
  top: 75%; left: 70%;
  animation-delay: 8s;
}

@keyframes float {
  0%   { transform: translateY(0) rotate(0deg); opacity: .3; }
  50%  { transform: translateY(-40px) rotate(180deg); opacity: .5; }
  100% { transform: translateY(0) rotate(360deg); opacity: .3; }
}

/* ================= HERO Floating Shapes ================= */
.hero20-shapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0; /* behind hero content */
}

.hero20-shapes .shape {
  position: absolute;
  opacity: 0.25;
  animation: float 18s infinite ease-in-out;
}

/* Position each shape differently */
.hero20-shapes .circle {
  top: 15%; left: 10%;
  animation-delay: 0s;
}
.hero20-shapes .circle.small {
  top: 70%; left: 25%;
  animation-delay: 4s;
}
.hero20-shapes .square {
  top: 40%; left: 80%;
  transform: rotate(15deg);
  animation-delay: 2s;
}
.hero20-shapes .square.small {
  top: 30%; left: 60%;
  transform: rotate(-10deg);
  animation-delay: 6s;
}
.hero20-shapes .triangle {
  top: 75%; left: 70%;
  animation-delay: 8s;
}

@keyframes float {
  0%   { transform: translateY(0) rotate(0deg); opacity: .3; }
  50%  { transform: translateY(-40px) rotate(180deg); opacity: .5; }
  100% { transform: translateY(0) rotate(360deg); opacity: .3; }
}

/* ================= HERO Abstract Shapes ================= */
.hero20-abstract {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.hero20-abstract .shape {
  position: absolute;
  opacity: 0.15;
  animation: floaty 20s infinite ease-in-out;
}

/* Positioning */
.hero20-abstract .hex       { top: 10%; left: 15%; width: 120px; animation-delay: 0s; }
.hero20-abstract .concentric{ top: 60%; left: 20%; width: 160px; animation-delay: 3s; }
.hero20-abstract .spiral    { top: 25%; left: 70%; width: 180px; animation-delay: 6s; }
.hero20-abstract .star      { top: 70%; left: 75%; width: 140px; animation-delay: 9s; }

/* Floating + rotation animation */
@keyframes floaty {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0.15; }
  50%  { transform: translateY(-40px) rotate(180deg); opacity: 0.3; }
  100% { transform: translateY(0) rotate(360deg); opacity: 0.15; }
}

/* ================= HERO Abstract Shapes ================= */
.hero20-abstract {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Blob */
.hero20-abstract .blob {
  position: absolute;
  top: 20%;
  left: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle at 30% 30%, #ff6ec7, #ffb400);
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.35;
  animation: blobMove 18s infinite ease-in-out alternate;
}

/* Wavy grid */
.hero20-abstract .wave-grid {
  position: absolute;
  bottom: 10%;
  left: 10%;
  width: 500px;
  height: 300px;
  opacity: 0.3;
  animation: waveFloat 14s infinite ease-in-out alternate;
}

/* Starburst */
.hero20-abstract .starburst {
  position: absolute;
  top: 15%;
  right: 15%;
  width: 250px;
  height: 250px;
  opacity: 0.25;
  animation: spin 25s linear infinite;
}

/* Spiral */
.hero20-abstract .spiral {
  position: absolute;
  bottom: 15%;
  right: -5%;
  width: 400px;
  height: 400px;
  opacity: 0.3;
  animation: spinReverse 35s linear infinite;
}

/* Animations */
@keyframes blobMove {
  from { transform: translateY(0) scale(1); }
  to   { transform: translateY(-80px) scale(1.1); }
}
@keyframes waveFloat {
  from { transform: translateX(0); }
  to   { transform: translateX(40px); }
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes spinReverse {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

/* === Metrics v22 Text Overrides === */

.metrics-v22 .mxv22-num,
.metrics-v22 .mxv22-num .counter {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* The little "+" sign */
.metrics-v22 .mxv22-num sup {
  color: #2196f3 !important;   /* <-- pick your highlight color */
  font-size: 0.6em;
  vertical-align: super;
}

/* Labels under numbers */
.metrics-v22 .mxv22-label {
  color: #ffffff !important;   /* <-- change label text color */
  font-weight: 500;
}

/* All items start hidden */
.metrics-v22 .mxv22-item {
  opacity: 0;
  transform: translateY(40px);
}

/* Animate when section is in view */
.metrics-v22.animate .mxv22-item {
  animation-duration: 0.9s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Left-to-right motion */
@keyframes flyInLeft {
  from { opacity: 0; transform: translateX(-120px) scale(0.9); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* Right-to-left motion */
@keyframes flyInRight {
  from { opacity: 0; transform: translateX(120px) scale(0.9); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* Assign different directions + stagger */
.metrics-v22.animate .mxv22-item:nth-child(1) {
  animation-name: flyInLeft;
  animation-delay: 0.2s;
}
.metrics-v22.animate .mxv22-item:nth-child(2) {
  animation-name: flyInRight;
  animation-delay: 0.5s;
}
.metrics-v22.animate .mxv22-item:nth-child(3) {
  animation-name: flyInLeft;
  animation-delay: 0.8s;
}
.metrics-v22.animate .mxv22-item:nth-child(4) {
  animation-name: flyInRight;
  animation-delay: 1.1s;
}

/* Initial hidden state */
.metrics-v22 .mxv22-item {
  opacity: 0;
  transform: translateY(60px) scale(0.9);
}

/* Animate when section comes into view */
.metrics-v22.animate .mxv22-item {
  animation: cardRise 0.8s forwards cubic-bezier(0.22, 1, 0.36, 1);
}

/* Keyframes */
@keyframes cardRise {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Stagger delays */
.metrics-v22.animate .mxv22-item:nth-child(1) { animation-delay: 0.1s; }
.metrics-v22.animate .mxv22-item:nth-child(2) { animation-delay: 0.3s; }
.metrics-v22.animate .mxv22-item:nth-child(3) { animation-delay: 0.5s; }
.metrics-v22.animate .mxv22-item:nth-child(4) { animation-delay: 0.7s; }

/* ==== Payroll Related Modules Override (Force Bold Blue Palette) ==== */
#modules.ep2p-modules.matrix .mod.payroll.tone-1 { background: #4D96FF !important; }
#modules.ep2p-modules.matrix .mod.payroll.tone-2 { background: #256DFF !important; }
#modules.ep2p-modules.matrix .mod.payroll.tone-3 { background: #1E40AF !important; }
#modules.ep2p-modules.matrix .mod.payroll.tone-4 { background: #14213D !important; }
#modules.ep2p-modules.matrix .mod.payroll.tone-5 { background: #3B82F6 !important; }
#modules.ep2p-modules.matrix .mod.payroll.tone-6 { background: #1D4ED8 !important; }
#modules.ep2p-modules.matrix .mod.payroll.tone-7 { background: #1E3A8A !important; }
#modules.ep2p-modules.matrix .mod.payroll.tone-8 { background: #0F172A !important; }
#modules.ep2p-modules.matrix .mod.payroll.tone-9 { background: #60A5FA !important; }
#modules.ep2p-modules.matrix .mod.payroll.tone-10 { background: #93C5FD !important; }


/* =========================================================
   SOLUTION — Giant half-phone (full-bleed, end-to-end width)
   ========================================================= */
   :root{
    --hp-width: min(62vw, 1120px); /* size of the phone image */
    --hp-left:  -7vw;              /* how far it bleeds into left gutter */
    --hp-cut:   190px;             /* how much it hangs below the section (the “cut”) */
  }
  
  .solution-v8{ position:relative; overflow:visible; }
  .solution-v8 > .container{ position:relative; z-index:2; } /* cards sit above the phone */
  
  /* The full-bleed phone layer (lives outside .container) */
  .solution-v8 .halfphone-hero{
    position:absolute;
    z-index:1;                 /* behind content */
    left:var(--hp-left);
    bottom:calc(-1 * var(--hp-cut));  /* hangs below to look cut by divider */
    pointer-events:none;
    filter:
      drop-shadow(0 36px 96px rgba(0,0,0,.35))
      drop-shadow(0 10px 24px rgba(0,0,0,.22));
  }
  
  .solution-v8 .halfphone-hero img{
    display:block;
    width:var(--hp-width);     /* BIG — uses viewport, not container */
    height:auto;
  }
  
  /* Give the section extra bottom to accommodate that overhang */
  .solution-v8.section{ padding-bottom:var(--hp-cut) !important; }
  
  /* Layout nips: left column is now just spacing + marquee */
  .solution-v8 .solv8-wrap{ align-items:flex-start; }
  @media (min-width: 992px){
    .solution-v8 .solv8-left{ padding-right:0; }
  }
  
  /* Make sure Services doesn't overlap/pull up into Solution */
  #services.services-fw-v9, .services-fw-v9{
    margin-top:0 !important;          /* kill any negative margin that was used before */
    padding-top:48px !important;      /* comfortable spacing */
  }
  
  /* Mobile/tablet — center the phone above, no bleed */
  @media (max-width: 991.98px){
    .solution-v8 .halfphone-hero{
      position:static;
      margin:-6px auto 16px;          /* sits above the cards */
      left:auto; bottom:auto;
      filter:drop-shadow(0 18px 44px rgba(0,0,0,.25));
    }
    .solution-v8 .halfphone-hero img{
      width:88vw; max-width:520px;
    }
    .solution-v8.section{ padding-bottom:56px !important; }
  }
  
  /* Optional: slightly tighten the stage/marquee spacing */
  .solution-v8 .sv8-marquee{ margin-top:16px; }
  
  /* =============================================
     CLEANUP: neutralize the old device-duo styles
     ============================================= */
  .solution-v8 .device-duo,
  .solution-v8 .laptop,
  .solution-v8 .phone{ display:none !important; }

/* ===== Section-level half phone ===== */
.solution-v8 { position: relative; }            /* anchor for the absolute child */
.solution-v8 > .container { position: relative; z-index: 2; } /* cards above phone */

@media (min-width: 992px){
  .solution-v8 {
    --hp-x: -249px;   /* left  = negative, right  = positive */
    --hp-y: -160px;   /* up    = negative, down   = positive */
  }
  .solution-v8 .halfphone-hero{
    position: absolute !important;
    z-index: 1 !important;         /* behind the cards */
    left: -9vw !important;         /* base anchor to the left */
    bottom: -160px !important;     /* hang below section for 'cut-off' look */
    pointer-events: none !important;
    filter: drop-shadow(0 36px 96px rgba(0,0,0,.35))
            drop-shadow(0 10px 24px rgba(0,0,0,.22));
    transform: translate(var(--hp-x), var(--hp-y)) !important;  /* the nudge */
  }
  .solution-v8 .halfphone-hero img{
    display: block;
    width: min(82vw, 1800px);      /* big, uses section width, not container */
    height: auto;
  }
}

/* Mobile/tablet: put it back into normal flow, centered */
@media (max-width: 991.98px){
  .solution-v8 .halfphone-hero{
    position: static !important;
    margin: -10px auto 16px !important;
    transform: none !important;
  }
  .solution-v8 .halfphone-hero img{
    width: 88vw; max-width: 520px;
  }
}

@media (min-width: 992px){
  .solution-v8 .sv8-marquee {
    transform: translateX(-90px); /* negative = move left */
  }
}

@media (max-width: 991.98px){
  .solution-v8 .halfphone-hero{
    position: static !important;
    margin: -40px auto 16px !important; /* was -10px, now pulls phone higher */
    transform: none !important;
  }
}
@media (min-width: 992px){
  .solution-v8 .sv8-marquee.reveal-up,
  .solution-v8 .sv8-marquee.reveal-up.is-in{ transform:none !important; }

  .solution-v8 .col-lg-5 .sv8-marquee{
    margin-left: -255px !important; /* negative = move left */
    max-width: none;                /* let it extend */
  }
}

/* 1) Stop the drop-shadow */
.solution-v8 .halfphone-hero{ filter:none !important; }

/* ===== Half-phone scroll entrance ===== */
.solution-v8 .halfphone-hero img{
  /* start slightly left & soft */
  opacity: 0;
  transform: translate3d(-64px, 0, 0) scale(.985);
  transition:
    transform .9s cubic-bezier(.22,.75,.1,1),
    opacity   .9s ease;
  will-change: transform, opacity;
}

/* when it enters view */
.solution-v8 .halfphone-hero img.is-in{
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}

/* optional: tiny idle float after it’s in */
@keyframes hp-float {
  0%,100% { transform: translate3d(0,-1px,0); }
  50%     { transform: translate3d(0, 1px,0); }
}
.solution-v8 .halfphone-hero img.is-in{
  animation: hp-float 6s ease-in-out 1.2s infinite;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .solution-v8 .halfphone-hero img,
  .solution-v8 .halfphone-hero img.is-in{
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Cert bar sits below the 4 cards only */
.sv8-certbar{
  margin-top: 32px;                 /* pushes badges down without moving phone */
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;          /* centered under card grid */
}

/* Pills */
.sv8-certbar .cert-pill{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e8eef4;
  border-radius: 14px;
  box-shadow: 0 16px 38px rgba(0,0,0,.06);
  min-width: 320px;                 /* larger, as requested */
}

/* Logos */
.sv8-certbar .cert-logo{
  width: 48px; height: 48px;        /* bigger logos */
  border-radius: 10px;
  display: grid; place-items: center;
  background: #f3f6fb;
  border: 1px solid #e6edf5;
}
.sv8-certbar .cert-logo img{
  width: 36px; height: 36px; object-fit: contain;
}

/* Text */
.sv8-certbar .cert-text strong{
  display:block; font-weight:800; color:#0f172a; line-height:1.1;
}
.sv8-certbar .cert-text small{
  display:block; color:#64748b; line-height:1.1;
}

/* Responsive: stack nicely on small screens */
@media (max-width: 991.98px){
  .sv8-certbar{ justify-content: center; margin-top: 22px; }
  .sv8-certbar .cert-pill{ min-width: 260px; }
}

/* ===== Right side: smooth stagger-in on scroll ===== */
.solution-v8 .solv8-grid > article,
.solution-v8 .sv8-certbar .cert-pill{
  opacity: 0;
  transform: translateY(24px) scale(.98);
  will-change: transform, opacity, filter;
  transition:
    transform .70s cubic-bezier(.17,.84,.44,1),
    opacity   .70s ease,
    filter    .70s ease;
  transition-delay: var(--d, 0s);              /* will be set by JS */
  filter: blur(2px);
}

/* when in view */
.solution-v8 .solv8-grid > article.is-in,
.solution-v8 .sv8-certbar .cert-pill.is-in{
  opacity: 1;
  transform: none;
  filter: none;
}

/* A tiny hover lift for cards (kept subtle) */
.solution-v8 .solv8-grid > article:hover{
  transform: translateY(-4px);
}

/* Hosting partner minis: reveal after the Cloud card appears */
.solution-v8 .sv8-card .sv8-host-badges .host{
  opacity: 0;
  transform: translateY(8px);
  transition: transform .55s ease, opacity .55s ease;
}
.solution-v8 .sv8-card.is-in .sv8-host-badges .host:nth-child(1){
  transition-delay: .12s;
  opacity: 1; transform: none;
}
.solution-v8 .sv8-card.is-in .sv8-host-badges .host:nth-child(2){
  transition-delay: .22s;
  opacity: 1; transform: none;
}

/* Cert pills: a tiny scale pop as they finish */
@keyframes sv8-pop {
  0%   { transform: translateY(24px) scale(.98); opacity: 0; }
  60%  { transform: translateY(-2px) scale(1.02); opacity: 1; }
  100% { transform: none; }
}
.solution-v8 .sv8-certbar .cert-pill.is-in{
  animation: sv8-pop .70s cubic-bezier(.17,.84,.44,1) var(--d,0s) both;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .solution-v8 .solv8-grid > article,
  .solution-v8 .sv8-certbar .cert-pill,
  .solution-v8 .sv8-card .sv8-host-badges .host{
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}

/* Force justification in solution section */
.solution-v8 {
  text-align: justify;
  text-justify: inter-word;
}

/* Base pill style */
.marquee .pill {
  display: inline-block;
  padding: 6px 14px;
  margin: 0 6px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

/* ==== SOLUTION: colored marquee pills (override) ==== */

/* base pill override */
.solution-v8 .sv8-marquee .pill{
  background:#2563eb !important;   /* default fallback */
  color:#fff !important;
  border:none !important;
  box-shadow:none !important;
}

/* cycle colors across the row */
.solution-v8 .sv8-marquee .track .pill:nth-child(8n+1){ background:#2563eb !important; } /* blue */
.solution-v8 .sv8-marquee .track .pill:nth-child(8n+2){ background:#0d9488 !important; } /* teal */
.solution-v8 .sv8-marquee .track .pill:nth-child(8n+3){ background:#9333ea !important; } /* purple */
.solution-v8 .sv8-marquee .track .pill:nth-child(8n+4){ background:#dc2626 !important; } /* red */
.solution-v8 .sv8-marquee .track .pill:nth-child(8n+5){ background:#f59e0b !important; } /* amber */
.solution-v8 .sv8-marquee .track .pill:nth-child(8n+6){ background:#14b8a6 !important; } /* aqua */
.solution-v8 .sv8-marquee .track .pill:nth-child(8n+7){ background:#3b82f6 !important; } /* indigo */
.solution-v8 .sv8-marquee .track .pill:nth-child(8n+8){ background:#ef4444 !important; } /* scarlet */

/* keep pill text from justifying with the section */
.solution-v8 .sv8-marquee .pill { text-align:center !important; }

/* ==== Metrics v22 — fluid, no cropping ==== */
.metrics-v22{
  overflow: visible !important;           /* never clip tiles */
  padding: 18px 0 14px !important;
}

.mxv22-wrap{
  max-width: min(1280px, 96vw) !important; /* keep inside viewport on zoom */
  margin: 0 auto !important;
  padding: 0 16px !important;              /* gutter so edges never cut */
}

.mxv22-stats{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: clamp(12px, 2vw, 20px) !important;
  align-items: stretch !important;
}

@media (max-width: 1100px){
  .mxv22-stats{ grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 560px){
  .mxv22-stats{ grid-template-columns: 1fr !important; }
}

/* tile */
.mxv22-item{
  display: grid !important;
  place-items: center !important;
  min-height: clamp(84px, 10vw, 120px) !important;   /* scales with viewport */
  border-radius: clamp(12px, 1.6vw, 18px) !important;
  padding: clamp(12px, 2vw, 18px) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.08) !important;
}

/* number + label scale smoothly */
.mxv22-num{
  line-height: 1 !important;
  font-size: clamp(26px, 5vw, 44px) !important;
  font-weight: 900 !important;
}
.mxv22-num sup{ font-size: .5em !important; top: -.4em; position: relative; }

.mxv22-label{
  margin-top: 6px !important;
  font-size: clamp(12px, 1.6vw, 16px) !important;
  font-weight: 700 !important;
  opacity: .95 !important;
}

/* if any parent had overflow hidden, neutralize it here */
.metrics-v22,
.metrics-v22 *{ overflow: visible !important; }

/* === Lift metrics cards so they're not cut off === */
.metrics-v22 {
  position: relative;
  margin-top: -40px;   /* adjust this until cards sit nicely */
  z-index: 5;          /* make sure they appear above bg shapes */
}
.metrics-v22 {
  margin-top: -50px;
  margin-bottom: 40px;
}

/* Extend section so counters have breathing space */
.metrics-v22 {
  position: relative;
  padding-top: 60px;   /* create extra space above */
  padding-bottom: 60px; /* create extra space below */
  margin-top: -20px;    /* small lift so it overlaps nicely */
  z-index: 5;
}

.mxv22-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px; /* spacing between the cards */
}

.mxv22-item {
  flex: 1 1 200px;      /* responsive sizing */
  max-width: 250px;     /* prevent oversized cards */
}

/* HERO20 text adjustments */
.hero20-copy {
  max-width: 600px;       /* narrower column so text isn’t centered */
  text-align: left;       /* align everything left */
  margin-left: 0;         /* push text closer to the left edge */
}

.hero20-title {
  font-size: 4rem;        /* huge main heading */
  line-height: 1.2;
  font-weight: 800;
}

.hero20-title .hero20-pre {
  font-size: 2rem;        /* smaller pre-heading */
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 400;
}

.hero20-sub {
  font-size: 1.25rem;     /* slightly bigger subtitle */
  margin: 1.5rem 0;
  max-width: 90%;         /* so it wraps nicely */
}

.hero20-ctas .btn {
  padding: 0.85rem 2rem;  /* larger buttons */
  font-size: 1.1rem;
}

.hero20-points {
  margin-top: 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
  list-style: disc inside;
}.hero20-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* push everything left */
  padding-left: 8%;            /* add breathing space */
}

.hero20-ctas .btn-ghost {
  color: #ffffff;                 /* a nice orange/red tone */
  border: 2px solid #ff5722;
  background: #f26a2e;
  transition: all 0.3s ease;
}

.hero20-ctas .btn-ghost:hover {
  background: #ff5722;
  color: #fff;
}

.hero20-showcase figcaption {
  font-size: 1rem;        /* slightly bigger */
  color: #ffffff;         /* bright white */
  font-weight: 600;       /* stronger emphasis */
  text-align: center;
  margin-top: 0.5rem;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4); /* adds readability on dark bg */
}
/* eP2P Access (Mobile) */
.phone-card.pc-access {
  background: #ffeddf !important;   /* pastel peach */
  color: #222 !important;           /* darker text for contrast */
}

.phone-card.pc-access .pc-head h6 {
  font-weight: 700;
  font-size: 1.1rem;
  color: #000000 !important;           /* stronger dark text */
}

/* eP2P CICO (Mobile) */
.phone-card.pc-cico {
  background: #ffe8f0 !important;   /* pastel pinkish, softer than orange */
  color: #222 !important;
}

.phone-card.pc-cico .pc-head h6 {
  font-weight: 700;
  font-size: 1.1rem;
  color: #111 !important;
}

/* eP2P CICO (Mobile) */
.phone-card.pc-cico {
  background: #e6f7f1 !important;   /* pastel mint */
  color: #222 !important;
}

.phone-card.pc-cico .pc-head h6 {
  font-weight: 700;
  font-size: 1.1rem;
  color: #111 !important;
}

.phone-card .pc-head h6 {
  color: #000 !important;
  font-weight: 700;
  position: relative;
  z-index: 5;              /* bring above orbs/overlays */
  text-shadow: 0 1px 2px rgba(255,255,255,0.9); /* crisp against pastel */
}

/* Force CEO message section to centerize & widen */
.ceo-wrapper {
  display: flex !important;
  justify-content: center !important;
}

.ceo-message {
  width: 100% !important;        /* take full width of wrapper */
  max-width: 19990px !important;  /* adjust this number to your liking */
  margin: 0 auto !important;
  padding: 2rem;
}
.ceo-message .ceo-header {
  justify-content: center;   /* center photo + name block */
  text-align: center;
}

.ceo-message .ceo-photo {
  margin: 0 auto 1rem;       /* center CEO image */
  display: block;
  border-radius: 50%;
  max-width: 180px;          /* optional: nice size */
}

/* --- CEO pane: center + widen the single card (strong override) --- */
section.aboutv11 .aboutv11-panes .ceo-pane .ceo-wrapper{
  /* kill any previous grid/row/column layout */
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 0 !important;
  width: 100% !important;
}

section.aboutv11 .aboutv11-panes .ceo-pane .ceo-wrapper > *{
  /* neutralize any .col-*, floats, widths from Bootstrap/etc */
  float: none !important;
  max-width: none !important;
  width: auto !important;
  flex: 0 1 auto !important;
}

section.aboutv11 .aboutv11-panes .ceo-pane .ceo-wrapper .ceo-message{
  /* make it big & centered */
  width: 100% !important;
  max-width: 1100px !important;      /* ← tweak 1000–1200 to taste */
  margin: 0 auto !important;
  padding: 24px 28px !important;
}

/* Optional: give it a little presence */
section.aboutv11 .aboutv11-panes .ceo-pane .ceo-message{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.06);
}

/* --- CEO card: keep header compact, centered, and not stretched --- */

/* Make the whole message wide but the inner content has a comfy max width */
.aboutv11 .ceo-pane .ceo-message .ceo-header,
.aboutv11 .ceo-pane .ceo-message .ceo-text{
  max-width: 920px;            /* <- adjust 820–980 to taste */
  margin-left: auto;
  margin-right: auto;
}

/* Header layout: avatar + texts, centered as a unit */
.aboutv11 .ceo-pane .ceo-message .ceo-header{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-content: center;     /* centers the two-column block as a whole */
  gap: 16px;
  text-align: left;            /* keep name/title left aligned */
  padding: 6px 0 14px;
}

/* Avatar stays a fixed size */
.aboutv11 .ceo-pane .ceo-message .ceo-photo{
  width: 84px !important;
  height: 84px !important;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

/* Name + title styling (doesn't stretch font sizes) */
.aboutv11 .ceo-pane .ceo-message .ceo-meta strong{
  font-size: 1.05rem;
  line-height: 1.25rem;
}
.aboutv11 .ceo-pane .ceo-message .ceo-meta span{
  display: block;
  font-size: .85rem;
  color: #64748b;              /* slate-ish */
}

/* Body text width + spacing (readable lines) */
.aboutv11 .ceo-pane .ceo-message .ceo-text{
  line-height: 1.7;
  padding: 0 8px 6px;
}
.aboutv11 .ceo-pane .ceo-message .ceo-text p{
  margin-bottom: 1rem;
}
.aboutv11 .ceo-pane .ceo-message .ceo-text .sign{
  font-weight: 700;
  margin-top: .25rem;
}
/* ===== CEO pane responsive polish ===== */

/* Tablet (≤ 991px): make the card breathe & center elements */
@media (max-width: 991.98px){
  .aboutv11 .ceo-pane .ceo-card{
    max-width: 760px;      /* keep it wide but comfy */
    margin-inline: auto;
    padding: 24px 24px 22px;
  }
  .aboutv11 .ceo-pane .ceo-header{
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .aboutv11 .ceo-pane .ceo-photo{
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
  }
  .aboutv11 .ceo-pane .ceo-meta strong{ font-size: 1rem; }
  .aboutv11 .ceo-pane .ceo-meta span{   font-size: .8125rem; opacity:.7; }
  .aboutv11 .ceo-pane .ceo-text{ margin-top: 12px; font-size: .975rem; }
}

/* Mobile (≤ 575px): stack photo on top, center everything */
@media (max-width: 575.98px){
  .aboutv11 .ceo-pane .ceo-card{
    max-width: 92vw;       /* nearly edge-to-edge with nice gutters */
    padding: 20px 18px;
    border-radius: 16px;
  }
  .aboutv11 .ceo-pane .ceo-header{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }
  .aboutv11 .ceo-pane .ceo-photo{
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
  }
  .aboutv11 .ceo-pane .ceo-meta strong{ font-size: 1.05rem; }
  .aboutv11 .ceo-pane .ceo-meta span{   font-size: .8125rem; }
  .aboutv11 .ceo-pane .ceo-text{
    margin-top: 10px;
    font-size: .95rem;
    line-height: 1.6;
    text-align: justify;   /* optional – matches your section style */
  }
  .aboutv11 .ceo-pane .ceo-text .sign{
    display: block;
    margin-top: 10px;
    text-align: right;
  }
}

/* ========== Full-width text banner ========== */
.solution-v8 { position: relative; }
.solution-v8 .sv8-banner{
  width: 100vw;               /* true end-to-end */
  margin-left: calc(50% - 50vw);  /* break out of container */
  margin-right: calc(50% - 50vw);
  position: relative;
  z-index: 3;                 /* above the phone (phone is z-index:1) */
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.85);
  backdrop-filter: saturate(130%) blur(2px);
}

.solution-v8 .sv8-banner .sv8-track{
  display: inline-flex;
  gap: 2.25rem;
  padding: .65rem 1.25rem;
  animation: sv8-scroll 28s linear infinite;
}

.solution-v8 .sv8-banner span{
  font-weight: 600;
  letter-spacing: .02em;
  font-size: clamp(.95rem, 1.2vw, 1.05rem);
  color: #172033;
  opacity: .9;
}

@keyframes sv8-scroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* push the grid down to sit clearly below the banner */
.solution-v8 .solv8-wrap{ margin-top: 18px; }

/* ========== Bigger, more readable cards ========== */
.solution-v8 .solv8-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 16px 18px;
}
.solution-v8 .sv8-card{
  border-left: 6px solid var(--tone, #e5e7eb);
  padding: 18px 18px 16px;
  border-radius: 14px;
}
.solution-v8 .sv8-head h5{
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  font-weight: 800;
}
.solution-v8 .sv8-bullets{
  margin-top: 8px;
  font-size: clamp(.95rem, 1.05vw, 1rem);
  line-height: 1.55;
}

/* bullet dots that match the left color bar */
.solution-v8 .sv8-bullets li{
  list-style: none;
  position: relative;
  padding-left: 20px;
  text-align: justify;
}
.solution-v8 .sv8-bullets li::before{
  content:"";
  position: absolute;
  left: 0; top: .6em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tone, #94a3b8);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--tone) 22%, transparent);
}

/* tone variables per card */
.solution-v8 .sv8-card.sv8-t-blue   { --tone:#2d7ef7; }
.solution-v8 .sv8-card.sv8-t-teal   { --tone:#08b8b1; }
.solution-v8 .sv8-card.sv8-t-purple { --tone:#7d5cff; }
.solution-v8 .sv8-card.sv8-t-red    { --tone:#ff5577; }

/* make sure the absolute phone doesn’t get pushed by anything */
.solution-v8 .halfphone-hero{ pointer-events:none; }

/* Mobile: stack cards, banner remains full-width */
@media (max-width: 991.98px){
  .solution-v8 .solv8-grid{ grid-template-columns: 1fr; }
  .solution-v8 .sv8-banner .sv8-track{ padding: .55rem 1rem; }
  .solution-v8 .sv8-bullets{ font-size: .95rem; }
}




/* === Half Phone: make it taller/wider & fine-tune position === */
:root{
  /* bump overall size (taller because height:auto) */
  --hp-width: min(72vw, 1380px); /* try 68–78vw or raise px cap */
  --hp-cut:   200px;             /* hangs lower to look taller */
  --hp-left:  -9vw;              /* optional: bleed a bit more left */
}
@media (min-width: 992px){
  .solution-v8{
    /* nudge position relative to its anchor without changing layout */
    --hp-x: -200px;   /* negative = move further left if needed */
    --hp-y: -300px;   /* negative = pull upward (reduce if too high) */
  }
}

/* === Services v10: shift cards right to make room for phone === */
@media (min-width: 1200px){
  #services.sv9-v10 .sv9-two,
  #services.sv9-v10 .sv9-grid{
    padding-left: 140px; /* try 120–180px until it feels right */
  }
}

/* === Pastel Gradient Overrides === */
#sv9-panel-mobile .gradient-blue {
  background: linear-gradient(135deg, #a5d8ff, #74c0fc); /* pastel sky to mid blue */
}

#sv9-panel-mobile .gradient-orange {
  background: linear-gradient(135deg, #ffd8a8, #ffa94d); /* pastel peach to soft orange */
}

#sv9-panel-mobile .gradient-card { 
  /* current: border-radius:20px; padding:20px; flex:1 */
  flex: 0 0 470px;   /* fixed width card */
  padding: 10px;     /* tighter padding */
  border-radius: 18px;
}


/* Center 3 tabs after BPO removal */
.sv9-tabs {
  display: flex;
  justify-content: center;   /* centers all tabs */
  gap: 2rem;                 /* adjust spacing between tabs */
}

.sv9-tab {
  flex: 0 0 auto;            /* stop tabs from stretching */
}
/* === Services tabs: center 3 items (override anything old) === */
.sv9-tabs{
  display: flex !important;
  justify-content: center !important;   /* center the group */
  align-items: center !important;
  gap: 24px !important;                  /* spacing between tabs */
  flex-wrap: nowrap !important;
  width: 100%;
  margin: 0 auto 12px !important;        /* keep the bar centered */
}
.sv9-tabs .sv9-tab{
  flex: 0 0 auto !important;             /* stop stretching to fill row */
  max-width: none !important;
}

/* mobile: allow wrap but keep centered */
@media (max-width: 576px){
  .sv9-tabs{ flex-wrap: wrap !important; justify-content: center !important; }
  .sv9-tabs .sv9-tab{ flex: 1 0 140px !important; } /* two per line if needed */
}

/* === Service Tabs: centered, pill-style, prettier === */
.sv9-tabs {
  display: flex !important;
  justify-content: center !important;   /* cluster neatly in center */
  align-items: center !important;
  gap: 32px !important;                 /* spacing between pills */
  flex-wrap: nowrap !important;
  margin: 0 auto 30px !important;
  width: 100%;
}

.sv9-tabs .sv9-tab {
  flex: 0 0 auto !important;           /* don’t stretch */
  padding: 14px 28px;
  border-radius: 9999px;               /* pill shape */
  background: #ffffff;
  border: 2px solid #e5e7eb;           /* light gray border */
  color: #111827;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: all 0.25s ease;
}

/* icon inside tabs */
.sv9-tabs .sv9-tab .ico {
  display: block;
  margin-bottom: 6px;
  font-size: 20px;
}

/* hover */
.sv9-tabs .sv9-tab:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

/* active (selected) */
.sv9-tabs .sv9-tab.is-active {
  background: linear-gradient(135deg, #60a5fa, #2563eb); /* soft blue gradient */
  border-color: #2563eb;
  color: #fff;
  box-shadow: 0 6px 14px rgba(37,99,235,0.35);
}


/* === Unified module colors (ignore per-card tones) =================== */
/* Palette: bold + no pink/orange */
:root{
  --core-bg:    #2563EB;  --core-br:   #1E40AF;  /* Royal Blue */
  --pay-bg:     #16A34A;  --pay-br:    #15803D;  /* Emerald */
  --strat-bg:   #0EA5A4;  --strat-br:  #0F766E;  /* Teal */
  --supp-bg:    #7C3AED;  --supp-br:   #6D28D9;  /* Violet */
  --other-bg:   #334155;  --other-br:  #1F2937;  /* Slate */
}

/* Match or beat specificity of older rules (note the [class*="tone-"]) */
#modules.ep2p-modules.matrix article.mod.core[class*="tone-"],
#modules.ep2p-modules.matrix article.mod.core{
  background: var(--core-bg) !important;  border-color: var(--core-br) !important;
}

#modules.ep2p-modules.matrix article.mod.payroll[class*="tone-"],
#modules.ep2p-modules.matrix article.mod.payroll{
  background: var(--pay-bg) !important;   border-color: var(--pay-br) !important;
}

#modules.ep2p-modules.matrix article.mod.strategy[class*="tone-"],
#modules.ep2p-modules.matrix article.mod.strategy{
  background: var(--strat-bg) !important; border-color: var(--strat-br) !important;
}

#modules.ep2p-modules.matrix article.mod.support[class*="tone-"],
#modules.ep2p-modules.matrix article.mod.support{
  background: var(--supp-bg) !important;  border-color: var(--supp-br) !important;
}

#modules.ep2p-modules.matrix article.mod.others[class*="tone-"],
#modules.ep2p-modules.matrix article.mod.others{
  background: var(--other-bg) !important; border-color: var(--other-br) !important;
}

/* Ensure text/icons stay readable on bold backgrounds */
#modules.ep2p-modules.matrix article.mod h4{ color:#fff !important; }
#modules.ep2p-modules.matrix article.mod .image{
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.28) !important;
  color:#fff !important;
}
#modules.ep2p-modules.matrix article.mod svg path{
  stroke: currentColor !important; fill: currentColor !important; opacity:.95;
}

/* === Group-unified colors (match tone-1 tile of each group) ========== */
/* Replace the hex values below with the exact colors you used on each group's tone-1 card. */
/* Example values shown; swap to your real ones so the whole group matches its first tile. */

:root{
  /* Core  → match "Employee Administration" (tone-1) */
  --core-bg:  #2563EB;  /* background or gradient start */
  --core-br:  #1E40AF;  /* border/darker edge */

  /* Payroll → match "Payroll Administration" (tone-1) */
  --pay-bg:   #C81E1E;  /* ← put the same red you used on tone-1 */
  --pay-br:   #991B1B;

  /* HR Strategy → match "Training Management" (tone-1) */
  --strat-bg: #0EA5A4;
  --strat-br: #0F766E;

  /* Support → match "Industrial Relations" (tone-1) */
  --supp-bg:  #7C3AED;
  --supp-br:  #6D28D9;

  /* Others → match "Standard Report" (tone-1) */
  --other-bg: #334155;
  --other-br: #1F2937;
}

/* Beat the tone-* rules by targeting the same elements and using !important */
#modules.ep2p-modules.matrix article.mod.core,
#modules.ep2p-modules.matrix article.mod.core[class*="tone-"]{
  background: var(--core-bg) !important;
  border-color: var(--core-br) !important;
}

#modules.ep2p-modules.matrix article.mod.payroll,
#modules.ep2p-modules.matrix article.mod.payroll[class*="tone-"]{
  background: var(--pay-bg) !important;      /* now all Payroll follow Payroll Admin color */
  border-color: var(--pay-br) !important;
}

#modules.ep2p-modules.matrix article.mod.strategy,
#modules.ep2p-modules.matrix article.mod.strategy[class*="tone-"]{
  background: var(--strat-bg) !important;
  border-color: var(--strat-br) !important;
}

#modules.ep2p-modules.matrix article.mod.support,
#modules.ep2p-modules.matrix article.mod.support[class*="tone-"]{
  background: var(--supp-bg) !important;
  border-color: var(--supp-br) !important;
}

#modules.ep2p-modules.matrix article.mod.others,
#modules.ep2p-modules.matrix article.mod.others[class*="tone-"]{
  background: var(--other-bg) !important;
  border-color: var(--other-br) !important;
}

/* Make icons/text readable on bold backgrounds */
#modules.ep2p-modules.matrix article.mod h4{ color:#fff !important; }
#modules.ep2p-modules.matrix article.mod .image{
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.28) !important;
  color:#fff !important;
}
#modules.ep2p-modules.matrix article.mod svg path{
  stroke: currentColor !important; fill: currentColor !important; opacity:.95;
}

/* === Solution Offering: add breathing room between cards (override) === */
#solution .solv8-grid{
  display:grid;                     /* ensure it’s a real grid */
  grid-template-columns: 1fr 1fr;   /* 2-up on desktop */
  column-gap: 54px;                 /* horizontal space between cards */
  row-gap: 49px;                    /* vertical space between cards */
}

/* extra spacing between the grid and the certification pills */
#solution .sv8-certbar{
  margin-top: 24px !important;
  gap: 16px;                        /* space between each cert pill */
}

/* tighten on medium screens */
@media (max-width: 1200px){
  #solution .solv8-grid{
    column-gap: 28px;
    row-gap: 22px;
  }
}

/* single column on mobile, with comfy spacing */
@media (max-width: 768px){
  #solution .solv8-grid{
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 16px;
  }
}

/* in case any theme adds margins between articles, neutralize them */
#solution .solv8-grid .sv8-card{ margin: 0 !important; }

/* === Solution Offering: bigger, nicer cards ===================== */
#solution .solv8-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
  gap: 40px;  /* one value handles both row + column spacing */
}

/* Cards themselves stretch fully */
#solution .solv8-grid .sv8-card{
  margin: 0 !important;
  width: 100%;
  height: 100%;
  padding: 28px 24px;          /* more breathing room inside */
  word-break: normal;          /* don’t break “Human Resource” apart */
  white-space: normal;         
  line-height: 1.5;            /* better text readability */
  box-sizing: border-box;
}

/* Smaller breakpoints still adapt */
@media (max-width: 1200px){
  #solution .solv8-grid{
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 28px;
  }
}

@media (max-width: 768px){
  #solution .solv8-grid{
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
/* SOLUTION — push the 4 cards away from the phone (no layout break) */
#solution .solv8-grid{
  margin-left: 54px !important;   /* add breathing room to the right column */
}

/* keep it sensible on medium screens */
@media (max-width: 1200px){
  #solution .solv8-grid{ margin-left: 36px !important; }
}

/* on tablet/phone, stack naturally (no offset) */
@media (max-width: 992px){
  #solution .solv8-grid{ margin-left: 0 !important; }
}


/* SOLUTION — nudge the cards to the right without shrinking their grid */
#solution .solv8-grid{
  transform: translateX(48px);     /* visual offset only */
  will-change: transform;
}

/* keep from clipping on the right edge */
#solution .solv8-grid{ padding-right: 12px; overflow: visible; }

/* medium screens: smaller nudge */
@media (max-width: 1200px){
  #solution .solv8-grid{ transform: translateX(28px); }
}

/* tablet/phone: no nudge (stack naturally) */
@media (max-width: 992px){
  #solution .solv8-grid{ transform: none; }
}

#solution .solv8-grid{
  grid-template-columns: repeat(2, minmax(360px, 1fr));
  column-gap: 48px;
}

/* ===== FAQ v2 — single-column, polished cards (no right slider) ===== */

/* One centered column with comfy width */
#faqs.faqv2 .faqv2-grid{
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;          /* center the column */
  row-gap: 18px;
}

#faqs .faqv2-qa{
  width: 100%;
  max-width: 860px;               /* nice readable line length */
  margin: 0 auto;
}

/* Kill the desktop slider column if it still exists */
#faqs .faqv2-visual{ display: none !important; }

/* Section heading spacing */
#faqs .section-heading{
  margin-bottom: 16px !important;
}

/* Accordion as glossy cards */
#faqs .accordion-item{
  border: 1px solid #e9edf2;
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 32px rgba(0,0,0,.06);
  position: relative;
}

/* Slim coloured accent bar on the left */
#faqs .accordion-item::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:6px;
  background: linear-gradient(180deg, #0d8e82, #9c2323); /* teal → maroon */
  border-top-left-radius: 14px; border-bottom-left-radius: 14px;
}

/* Question button */
#faqs .accordion-button{
  font-weight: 800;
  padding: 16px 18px;
  color: #0f172a;
  background: linear-gradient(180deg, #ffffff, #fafbff);
}

/* Remove BS default shadow, keep focus ring subtle */
#faqs .accordion-button:focus{
  box-shadow: 0 0 0 3px rgba(13,142,130,.14);
  border-color: transparent;
}

/* Down arrow size/opacity */
#faqs .accordion-button::after{
  transform: scale(.9);
  opacity: .7;
}

/* Body copy */
#faqs .accordion-body{
  color: #475569;
  padding: 14px 18px 16px;
  text-align: justify;
}

/* Bullet list polish inside answers (if any) */
#faqs .accordion-body ul{
  margin: 0; padding-left: 0; list-style: none;
}
#faqs .accordion-body li{
  position: relative; padding-left: 20px; margin: 6px 0;
}
#faqs .accordion-body li::before{
  content:""; position:absolute; left:0; top:.6em;
  width:8px; height:8px; border-radius:50%;
  background:#0d8e82; box-shadow: 0 0 0 3px rgba(13,142,130,.14);
}

/* CTA card */
#faqs .faqv2-cta{
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  width: 100%; max-width: 860px; margin: 8px auto 0;
  padding: 14px 16px;
  background:#fff;
  border:1px solid #e9edf2; border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
}
#faqs .faqv2-cta span{ font-weight: 800; color:#0b1220; }
#faqs .faqv2-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px; text-decoration:none;
  background:#0d8e82; color:#fff; font-weight:800;
  box-shadow:0 10px 24px rgba(13,142,130,.22);
}
#faqs .faqv2-link::before{
  content:"✉️"; font-size: 16px; line-height: 1;
}

/* Softer background orbs (keep them subtle and behind) */
#faqs .faqv2-orb{ opacity:.12; filter: blur(34px); z-index: 0; }
#faqs .faqv2-wrap{ position: relative; z-index: 1; }

/* Responsive nudge */
@media (max-width: 576px){
  #faqs .accordion-button{ padding: 14px 14px; }
  #faqs .accordion-body{ padding: 12px 14px 14px; }
  #faqs .faqv2-cta{ padding: 12px; }
}

/* ===== FAQ v2 — minimal, solid, intuitive (no gradients) ===== */

#faqs.faqv2{ position:relative; overflow:hidden; background:#fff; }

/* subtle dotted pano so it’s not empty */
#faqs.faqv2::before{
  content:""; position:absolute; inset:-40px -20px -20px -20px; z-index:0;
  background:
    radial-gradient(circle at 24px 24px, rgba(13,142,130,.06) 2px, transparent 3px) 0 0/28px 28px,
    radial-gradient(circle at 12px 12px, rgba(156,35,35,.045) 2px, transparent 3px) 0 0/32px 32px;
  pointer-events:none;
}
#faqs .faqv2-wrap{ position:relative; z-index:1; }

/* single centered column */
#faqs .faqv2-grid{
  display:grid; grid-template-columns:1fr; justify-items:center; row-gap:16px;
}
#faqs .faqv2-visual{ display:none !important; }  /* keep slider hidden */
#faqs .faqv2-qa{ width:100%; max-width:980px; margin:0 auto; }

/* section heading tighter */
#faqs .section-heading{ margin-bottom:14px !important; }

/* card base */
#faqs .accordion{ counter-reset: faqnum; }
#faqs .accordion-item{
  --accent:#0f172a;                /* default left bar color */
  background:#fff;
  border:1px solid #e6ebf2;
  border-radius:14px;
  margin-bottom:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  overflow:hidden;
}

/* numbered badge (auto, no HTML change) */
#faqs .accordion-item .accordion-button::before{
  counter-increment: faqnum;
  content: counter(faqnum);
  display:inline-grid; place-items:center;
  width:28px; height:28px; margin-right:10px;
  border-radius:10px;
  font: 800 13px/1 "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:#0f172a; background:#eef2f7; border:1px solid #dee5ee;
}

/* left accent bar (solid, not gradient) */
#faqs .accordion-item::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:var(--accent);
  opacity:.12;
}

/* question button */
#faqs .accordion-button{
  background:#fff;
  padding:16px 18px;
  font-weight:800; color:#0f172a;
  box-shadow:none;
}
#faqs .accordion-button:focus{ box-shadow:0 0 0 3px rgba(13,142,130,.14); }

.mxv22-item.orange .plus { color: #ffffff; }   /* white on orange */
.mxv22-item.blue   .plus { color: #ffd700; }   /* gold on blue */
.mxv22-item.green  .plus { color: #000000; }   /* black on green */
.mxv22-item.purple .plus { color: #ffccff; }   /* soft pink on purple */
/* chevron bubble */
#faqs .accordion-button::after{
  width:22px; height:22px; border-radius:999px; background:#f2f5f9;
  box-shadow: inset 0 0 0 1px #e3e9f1; transform: none !important;
}

.metrics-v22 .mxv22-num .plus {
  font-size: 1em;          /* same size as number */
  font-weight: inherit;    /* match number thickness */
  line-height: 1;
  color: #ffcc00;          /* change this to any color you like */
}


.metrics-v22 .mxv22-num {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.metrics-v22 .mxv22-num .plus {
  font-size: 1em;        /* same size as number */
  font-weight: inherit;  /* matches number thickness */
  line-height: 1;
  color: currentColor;   /* inherits number color */
}
/* Metrics: tidy the + symbol */
.metrics-v22 .mxv22-num{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
}
.metrics-v22 .mxv22-num sup{
  font-size: .6em;
  font-weight: 800;
  line-height: 1;
  position: relative;
  top: -0.05em;         /* tiny lift so it reads nicely */
  color:#000000;  /* matches the number color */
}
/* OPEN state = clearer: filled header & stronger bar */
#faqs .accordion-button:not(.collapsed){
  background:#f8fafc;
  border-bottom:1px solid #eef2f7;
}
#faqs .accordion-button:not(.collapsed)::after{
  background:#0d8e82; box-shadow:none; filter:none;
}

/* body */
#faqs .accordion-body{
  padding:14px 18px 16px; color:#475569; text-align:justify;
}

/* list polish inside answers */
#faqs .accordion-body ul{ margin:0; padding-left:0; list-style:none; }
#faqs .accordion-body li{ position:relative; padding-left:18px; margin:6px 0; }
#faqs .accordion-body li::before{
  content:""; position:absolute; left:0; top:.6em; width:8px; height:8px; border-radius:50%;
  background:#0d8e82; box-shadow:0 0 0 3px rgba(13,142,130,.14);
}

/* CTA row as tidy inline card */
#faqs .faqv2-cta{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  width:100%; max-width:980px; margin:8px auto 0; padding:12px 14px;
  background:#fff; border:1px solid #e6ebf2; border-radius:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
}
#faqs .faqv2-cta span{ font-weight:800; color:#0b1220; }
#faqs .faqv2-link{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:999px;
  text-decoration:none; background:#0d8e82; color:#fff; font-weight:800;
  box-shadow:0 10px 22px rgba(13,142,130,.22);
}
#faqs .faqv2-link::before{ content:"✉️"; }

/* optional: colour the left bar per item by order (keeps it lively without gradients) */
#faqs .accordion-item:nth-child(1){ --accent:#0d8e82; } /* teal */
#faqs .accordion-item:nth-child(2){ --accent:#1f50c8; } /* blue */
#faqs .accordion-item:nth-child(3){ --accent:#7c3aed; } /* purple */
#faqs .accordion-item:nth-child(4){ --accent:#c0362b; } /* maroon */
#faqs .accordion-item:nth-child(5){ --accent:#0d8e82; } /* teal */
#faqs .accordion-item:nth-child(6){ --accent:#1f50c8; } /* blue */

/* mobile niceties */
@media (max-width:576px){
  #faqs .accordion-button{ padding:14px 14px; }
  #faqs .accordion-body{ padding:12px 14px 14px; }
  #faqs .faqv2-cta{ padding:10px 12px; }
}
#faqs.faqv2{
  background: url("../images/ep2pbacy.jpg") no-repeat center center / cover;
}