/** Shopify CDN: Minification failed

Line 2820:75 Unexpected "{"
Line 2826:20 Unexpected "{"

**/
  :root {
    /* ── NewJaisa Brand Colors (Style Guide) ── */
    --primary:    #03B4D7;   /* Summer Blue – primary CTA / accent */
    --primary-dk: #0D77B6;   /* Denim Blue  – headers, nav bg     */
    --primary-lt: #E8F8FC;   /* Tint of primary for backgrounds   */
    --green:      #0DD688;   /* Brand green  – positive / savings */
    --green-lt:   #E6FBF3;
    --red:        #E50047;   /* Brand red    – alert / badges     */
    --navy:       #2E4270;   /* Dark navy    – footer, depth      */
    --yellow:     #FFC72C;   /* Gold accent  – highlights         */
    --orange:     #EB7555;   /* Warm orange  – CTA alt            */
    --black:      #353332;   /* Brand black  – body text          */

    /* ── Grays ── */
    --gray-900: #1A1A2E;
    --gray-700: #374151;
    --gray-500: #6B7280;
    --gray-300: #D1E9F5;
    --gray-100: #F0FAFD;
    --white:    #FFFFFF;

    /* ── Shadows ── */
    --shadow-sm: 0 1px 3px rgba(3,180,215,.08);
    --shadow-md: 0 4px 16px rgba(3,180,215,.14);
    --shadow-lg: 0 12px 40px rgba(3,180,215,.18);

    --radius:    10px;
    --radius-lg: 16px;
    --font: 'Urbanist', sans-serif;
  }
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: var(--font);
    background: #EBF7FC;
    color: #111827;
    min-height: 100vh;
  }

    /*-----------Start 5th April for Logo-------------*/
 /* Logo wrapper */
.nav-logo {
  position: relative;
  display: inline-block;
}

/* Logo image */
.logo-icon {
  height: 76px;
  display: block;
}

/* Business text positioned under "Jaisa" */
.nav-logo-sub {
  position: absolute;
  right: 0;        /* 👈 pushes to Jaisa side */
  bottom: 4px;   /* 👈 below logo */
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  letter-spacing: 1px;
}
  /*-----------End 5th April for Logo-------------*/
  /* ─── GLOBAL CHROME ─── */
  .app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  /* Top meta bar */
  .meta-bar {
    background: var(--primary-dk);
    color: var(--gray-300);
    font-size: 11px;
    font-family: var(--font);
    letter-spacing: .06em;
    padding: 6px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 200;
  }
  .meta-bar span { display: flex; align-items: center; gap: 20px; }
  .meta-bar .badge {
    background: var(--primary);
    color: #fff;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    letter-spacing: .08em;
  }

  /* Page selector pill strip */
  .page-nav {
    background: var(--primary-lt);
    border-bottom: 1px solid var(--gray-300);
    padding: 0 32px;
    display: flex;
    gap: 0;
    overflow-x: auto;
    position: sticky;
    top: 73px;
    z-index: 190;
  }
  .page-nav-btn {
    padding: 13px 20px;
    font-size: 12px;
    font-family: var(--font);
    font-weight: 600;
    letter-spacing: .05em;
    color: #5C9BD6;
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all .2s;
    white-space: nowrap;
    text-transform: uppercase;
  }
  .page-nav-btn:hover { color: var(--primary-dk); }
  .page-nav-btn.active { color: var(--primary); border-bottom-color: var(--primary); }

  /* Canvas area */
  .canvas-area {
    flex: 1;
    padding: 0px;
    overflow: visible; /*7th April for home page sticky*/
  }

  /* Page frame */
  .page-frame {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: visible;          /* changed: allows mega-menu to overflow below navbar */
    box-shadow: 0 0 0 1px var(--gray-300), 0 24px 80px rgba(21,101,192,.15);
    margin: 0 auto;
    display: none;
  }
  .page-frame.active { display: block; }

  /* ─── WIREFRAME COMPONENTS ─── */
  .wf-section {
    border-bottom: 1px solid var(--wf-border);
    position: relative;
  }
  /* .wf-label {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 9px;
    font-family: var(--font);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wf-label);
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
    padding: 2px 8px;
    border-radius: 20px;
    pointer-events: none;
    z-index: 5;
  } */
  .wf-box {
    background: var(--wf-box);
    border: 1.5px dashed #94A3B8;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--wf-label);
    font-family: var(--font);
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .wf-img { background: linear-gradient(135deg, #CBD5E1, #E2E8F0); }

  /* ─── NAVBAR ─── */
  .navbar {
    background: var(--primary-dk);
    padding: 10px 32px;
    position: sticky;
    top: 0;
    z-index: 500;
  }
  .nav-utility {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    padding: 6px 0;

  }
  .nav-utility a {
    font-size: 11px;
    color: var(--gray-300);
    text-decoration: none;
    font-family: var(--font);
    letter-spacing: .05em;
  }
  .nav-main {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 60px;
  }
  .nav-logo {
    font-family: var(--font);
    font-weight: 800;
    font-size: 32px;
    color: #fff;
    margin-right: 24px;
    letter-spacing: -.02em;
  }
  .nav-logo span { color: #f9f8fd; }
  .nav-item {
    font-size: 13px;
    font-family: var(--font);
    font-weight: 600;
    color: var(--primary-lt);
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
    letter-spacing: .03em;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all .15s;
  }
  .nav-item:hover { color: #fff; background: rgba(255,255,255,.12); }
  .nav-item .chevron { font-size: 9px; opacity: .7; }
  .nav-spacer { flex: 1; }
  .nav-cta-link {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
  }
  .nav-cta {
    background: var(--primary);
    color: #fff;
    padding: 9px 20px;
    border-radius: 7px;
    font-size: 13px;
    font-family: var(--font);
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    border: none;
    transition: all .15s;
  }
  .nav-cta:hover { background: #02a0bf; color: #fff; }
  .nav-cta__label-mobile { display: none; }
  .nav-login {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,.4);
    color: var(--primary-lt);
    padding: 8px 18px;
    border-radius: 7px;
    font-size: 12px;
    font-family: var(--font);
    font-weight: 600;
    cursor: pointer;
    margin-left: 8px;
  }

  /* ─── HERO SECTION ─── */
  .hero {
    background: linear-gradient(135deg, var(--navy) 0%, var(--primary-dk) 55%, var(--primary) 100%);
    padding: 72px 64px 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute;
    right: -80px;
    top: -80px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255,255,255,.15) 0%, transparent 70%);
    pointer-events: none;
  }
  .hero-trust-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .trust-badge {
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    color: #CBD5E1;
    font-size: 11px;
    font-family: var(--font);
    font-weight: 600;
    letter-spacing: .06em;
    padding: 5px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .trust-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #4ADE80; }
  .hero-headline {
    font-family: var(--font);
    font-size: 42px;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -.02em;
    margin-bottom: 18px;
  }
  .hero-headline .accent { color: var(--yellow); }
  .hero-sub {
    font-size: 16px;
    color: rgba(255,255,255,.8);
    line-height: 1.65;
    margin-bottom: 28px;
    max-width: 480px;
  }
  .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
  .cta-primary {
    background: var(--primary);
    color: #fff;
    padding: 14px 28px;
    border-radius: 8px;
    font-family: var(--font);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    border: none;
    letter-spacing: .04em;
    box-shadow: 0 4px 20px rgba(21,101,192,.3);
  }
  .cta-secondary {
    background: rgba(255,255,255,.1);
    border: 1.5px solid rgba(255,255,255,.3);
    color: #fff;
    padding: 14px 28px;
    border-radius: 8px;
    font-family: var(--font);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    letter-spacing: .04em;
  }
  .micro-benefits { display: flex; gap: 18px; flex-wrap: wrap; }
  .micro-item {
    font-size: 12px;
    color: var(--gray-300);
    font-family: var(--font);
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .micro-item .check { color: #4ADE80; font-size: 14px; }
  .hero-visual {
    height: 360px;
    border-radius: var(--radius-lg);
    background: linear-gradient(145deg, var(--primary) 0%, var(--primary-dk) 100%);
    border: 1px solid rgba(255,255,255,.25);
    display: grid;
    place-items: center;
    font-size: 12px;
    color: rgba(255,255,255,.4);
    font-family: var(--font);
    letter-spacing: .1em;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
  }
  .hero-visual::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: calc(var(--radius-lg) - 1px);
    background: repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.03) 0,
      rgba(255,255,255,.03) 1px,
      transparent 0,
      transparent 12px
    );
  }

  /* ─── TRUST BAR ─── */
  /* ─── SOCIAL PROOF STRIP ─── */
  .social-proof-section {
    background: #fff;
    border-bottom: 1px solid var(--primary-lt);
    padding: 36px 64px;
  }
  .social-proof-header {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 28px;
  }
  .social-proof-label {
    font-size: 11px;
    font-family: var(--font);
    font-weight: 700;
    color: #6B7280;
    letter-spacing: .12em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .social-proof-label::before,
  .social-proof-label::after {
    content: '';
    height: 1px;
    width: 40px;
    background: var(--gray-300);
    display: block;
  }
  .social-proof-stats {
    display: flex;
    gap: 32px;
    align-items: center;
  }
  .sp-stat { text-align: center; }
  .sp-stat .num {
    font-family: var(--font);
    font-size: 22px;
    font-weight: 800;
    color: var(--primary-dk);
    line-height: 1;
  }
  .sp-stat .lbl {
    font-size: 10px;
    color: #6B7280;
    font-family: var(--font);
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-top: 3px;
  }
  .logo-carousel-outer {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
  }
  .carousel-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--gray-300);
    background: #fff;
    color: var(--primary-dk);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(21,101,192,.13);
    transition: all .2s;
    z-index: 10;
    user-select: none;
    flex-shrink: 0;
  }
  .carousel-btn:hover {
    background: var(--primary-dk);
    color: #fff;
    border-color: var(--primary-dk);
    box-shadow: 0 4px 20px rgba(21,101,192,.25);
    transform: scale(1.08);
  }
  .carousel-btn:active { transform: scale(.96); }
  .logo-track-wrapper {
    overflow: hidden;
    position: relative;
    flex: 1;
    margin: 0 12px;
  }
  .logo-track-wrapper::before,
  .logo-track-wrapper::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
  }
  .logo-track-wrapper::before { left: 0; background: linear-gradient(to right, #fff, transparent); }
  .logo-track-wrapper::after  { right: 0; background: linear-gradient(to left, #fff, transparent); }
  .logo-track {
    display: flex;
    gap: 16px;
    align-items: center;
    transition: transform .45s cubic-bezier(.4,0,.2,1);
    will-change: transform;
  }
  .logo-card {
    flex-shrink: 0;
    height: 72px;
    min-width: 160px;
    background: #F8FBFF;
    border: 1.5px solid var(--primary-lt);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 20px;
    transition: all .2s;
    cursor: pointer;
  }
  .logo-card:hover {
    border-color: var(--primary);
    background: var(--primary-lt);
    box-shadow: 0 4px 16px rgba(21,101,192,.1);
    transform: translateY(-2px);
  }
  .logo-card svg { display: block; }
  .logo-card .logo-name {
    font-family: var(--font);
    font-size: 10px;
    font-weight: 700;
    color: #6B7280;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .logo-card .logo-tag {
    font-size: 9px;
    font-family: var(--font);
    color: var(--primary);
    letter-spacing: .04em;
  }

  /* ─── GRID LAYOUTS ─── */
  .section-wrapper { padding: 60px 64px; }
  .section-title {
    font-family: var(--font);
    font-size: 32px;
    font-weight: 800;
    color: var(--primary-dk);
    letter-spacing: -.02em;
    margin-bottom: 8px;
  }
  .section-sub {
    font-size: 15px;
    color: #6B7280;
    margin-bottom: 40px;
    max-width: 560px;
  }
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

  /* VALUE PROP CARD */
  .vp-card {
    background: var(--white);
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius);
    padding: 28px 24px;
    transition: all .2s;
  }
  .vp-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
  .vp-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }
  .vp-icon.blue { background: var(--primary-lt); }
  .vp-icon.green { background: var(--green-lt); }
  .vp-icon.orange { background: var(--primary-lt); }
  .vp-title {
    font-family: var(--font);
    font-size: 15px;
    font-weight: 700;
    color: var(--primary-dk);
    margin-bottom: 6px;
  }
  .vp-desc { font-size: 13px; color: #6B7280; line-height: 1.6; }

  /* ROI CALCULATOR */
  .roi-section {
    background: linear-gradient(135deg, var(--navy), var(--primary-dk));
    padding: 56px 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
  }
  .roi-left h2 { font-family: var(--font); font-size: 30px; font-weight: 800; color: #fff; margin-bottom: 10px; }
  .roi-left p { color: var(--gray-300); font-size: 14px; line-height: 1.7; }
  .roi-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--radius-lg);
    padding: 32px;
  }
  .roi-input-group { margin-bottom: 20px; }
  .roi-input-group label {
    display: block;
    font-size: 12px;
    font-family: var(--font);
    font-weight: 600;
    color: var(--gray-300);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .roi-input {
    width: 100%;
    height: 44px;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 8px;
    padding: 0 16px;
    color: #fff;
    font-size: 14px;
    font-family: var(--font);
  }
  .roi-input option {
    background: var(--primary-dk);
    color: #fff;
  }
  .roi-result {
    background: rgba(13,122,78,.2);
    border: 1px solid rgba(74,222,128,.3);
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .roi-num { font-family: var(--font); font-size: 24px; font-weight: 800; color: #4ADE80; }
  .roi-label { font-size: 11px; color: var(--gray-300); font-family: var(--font); letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }

  /* PRODUCT CARD */
  .product-card {
    background: var(--white);
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all .2s;
  }
  .product-card:hover { box-shadow: var(--shadow-md); border-color: var(--primary); transform: translateY(-2px); }
  .product-img {
    height: 160px;
    background: var(--gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--primary);
    color: #fff;
    font-size: 10px;
    font-family: var(--font);
    font-weight: 700;
    letter-spacing: .06em;
    padding: 3px 8px;
    border-radius: 4px;
  }
  .product-info { padding: 18px; }
  .product-name { font-family: var(--font); font-size: 13px; font-weight: 700; color: #111827; margin-bottom: 4px; }
  .product-specs { font-size: 12px; color: #6B7280; margin-bottom: 10px; line-height: 1.5; }
  .product-price { font-family: var(--font); font-size: 18px; font-weight: 800; color: var(--primary-dk); }
  .product-actions { display: flex; gap: 8px; margin-top: 12px; }
  .btn-sm {
    flex: 1;
    padding: 8px;
    border-radius: 6px;
    font-size: 11px;
    font-family: var(--font);
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    text-align: center;
    border: none;
  }
  .btn-sm.primary { background: var(--primary-dk); color: #fff; }
  .btn-sm.outline { background: transparent; border: 1.5px solid var(--gray-300); color: #374151; }

  /* CASE STUDY CARD */
  .case-card {
    background: var(--white);
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all .2s;
  }
  .case-card:hover { box-shadow: var(--shadow-lg); }
  /*--------28th March 2026--------*/
  .case-img {
  position: relative;
  height: 180px;
  border-radius: 16px 16px 0 0;

  /* Image settings */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  overflow: hidden;
}

/* Overlay for readability */
.case-img--gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(37, 99, 235, 0.6),
    rgba(59, 130, 246, 0.6)
  );
  z-index: 1;
}
/*--------28th March 2026--------*/

 .case-company {
  position: absolute;
  bottom: 16px;
  left: 16px;
  z-index: 2; /* 👈 THIS IS THE KEY FIX */
  padding: 6px 12px;
  font-size: 12px;
  color: #000000;
  background: #f8f9fd;
  backdrop-filter: blur(6px);
  border-radius: 8px;
}
/*------------++++++++++++++++++++++++++++-----------*/
  .case-body { padding: 22px; }
  .case-stat { font-family: var(--font); font-size: 32px; font-weight: 800; color: var(--orange); line-height: 1; margin-bottom: 6px; }
  .case-title { font-size: 14px; font-weight: 600; color: #111827; margin-bottom: 10px; }
  .case-quote { font-size: 13px; color: #6B7280; font-style: italic; line-height: 1.6; border-left: 3px solid var(--primary); padding-left: 12px; }

  /* INDUSTRY GRID */
  .industry-card {
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius);
    padding: 24px;
    cursor: pointer;
    transition: all .2s;
    background: var(--white);
    display: flex;
    align-items: flex-start;
    gap: 16px;
  }
  .industry-card:hover { border-color: var(--primary); background: var(--primary-lt); }
  .industry-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--primary-lt);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
  }
  .industry-name { font-family: var(--font); font-size: 13px; font-weight: 700; color: #111827; margin-bottom: 4px; }
  .industry-desc { font-size: 12px; color: #6B7280; line-height: 1.5; }

  /* SOLUTION CARD */
  .solution-card {
    background: linear-gradient(135deg, var(--navy), var(--primary-dk));
    border-radius: var(--radius-lg);
    padding: 32px;
    color: #fff;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform .2s;
  }
  .solution-card:hover { transform: translateY(-3px); }
  .solution-card::after {
    content: '';
    position: absolute;
    right: -30px;
    bottom: -30px;
    width: 140px;
    height: 140px;
    background: rgba(255,255,255,.06);
    border-radius: 50%;
  }
  .solution-tag {
    display: inline-block;
    background: rgba(21,101,192,.2);
    border: 1px solid rgba(21,101,192,.4);
    color: var(--primary-lt);
    font-size: 10px;
    font-family: var(--font);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 14px;
  }
  .solution-title { font-family: var(--font); font-size: 17px; font-weight: 800; margin-bottom: 8px; }
  .solution-desc { font-size: 13px; color: var(--gray-300); line-height: 1.6; margin-bottom: 16px; }
  .solution-link { font-size: 12px; font-family: var(--font); font-weight: 700; color: var(--primary-lt); letter-spacing: .06em; }

  /* FOOTER */
  .site-footer {
    background: var(--navy);
    padding: 56px 64px 32px;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 40px;
  }
 
/*------1st April 2026--------*/
/* Container for the logo */
.footer-brand .logo {
   position: relative;
  display: inline-block; /* important */
}

/* Business text positioning */
.footer-brand .logo-business {
  position: absolute;
  right: 0;        /* push to Jaisa side */
  bottom: 2px;   /* below logo */
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  letter-spacing: 1px;
}

.footer-brand .logo img {
    display: block;
    max-width: 220px; 
    height: auto;     
    object-fit: contain;
}

/* Optional: Social icon spacing adjustment to match the layout */
.footer-brand .social-icons {
    margin-top: 25px;
    display: flex;
    gap: 12px;
}
/* Container for icons */
.social-container {
    display: flex;
    gap: 15px; /* Space between circles */
    margin: 20px 0;
}

/* The Circular Border */
.social-icon {
    width: 35px;  /* Increased size */
    height: 35px; /* Increased size */
    border: 1.5px solid #ffffff; /* White border */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* The actual SVG icon inside */
.social-icon svg {
    width: 22px;  /* Scaled up icon size */
    height: 22px; /* Scaled up icon size */
    fill: #ffffff; /* Makes them white */
    display: block;
}

/* Hover effect for a premium feel */
.social-icon:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-3px);
}
/* Mobile Specific Adjustments (Screens smaller than 768px) */
@media screen and (max-width: 767px) {
  .logo-icon{
        height: 50px;
        display: block;
  }
  .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the logo and social container */
    text-align: center;  /* Centers the description text */
  }
   .footer-brand .logo {
    display: inline-block;
  }

  .footer-brand .logo-business {
    font-size: 10px;
    right: 2px;
  }

  /* Centering the Social Icon Flex Container */
  .footer-brand .social-container {
    justify-content: center !important; 
    margin-top: 5px;
  }
  
  .footer-brand .logo img {
    margin: 0 auto; /* Extra insurance for centering the image */
    max-width: 180px; /* Slightly smaller for mobile screens */
  }
  .social-icon{
    width:35px;
    height:35px;
  }
}

/* Desktop Logic (Ensures logo stays visible and left-aligned) */
@media screen and (min-width: 768px) {
  .footer-brand .logo img {
    max-width: 220px;
    display: block;
  }
}

/*-------1st April 2026-------*/
  .footer-brand p { font-size: 12px; color: #fcfcfc; line-height: 1.7; margin-bottom: 16px; max-width: 220px; }
  .footer-col h4 { font-family: var(--font); font-size: 11px; font-weight: 700; color: #f8f9fd; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
  .footer-col a { display: block; font-size: 12px; color: #fcfcfc; text-decoration: none; margin-bottom: 8px; transition: color .15s; }
  .footer-col a:hover { color: var(--primary); }
  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: rgba(255,255,255,.4);
    font-family: var(--font);
  }
  .footer-badge {
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.5);
    font-size: 10px;
    font-family: var(--font);
    font-weight: 600;
    letter-spacing: .06em;
    padding: 3px 10px;
    border-radius: 20px;
  }

  /* ─── PRODUCT PAGE SPECIFIC ─── */
  .product-page-layout { display: grid; grid-template-columns: 260px 1fr; min-height: 600px; }
  .filter-sidebar {
    border-right: 1px solid var(--gray-300);
    padding: 28px 20px;
    background: var(--gray-100);
  }
  .filter-title { font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--primary-dk); margin-bottom: 20px; text-transform: uppercase; letter-spacing: .08em; }
  .filter-group { margin-bottom: 22px; }
  .filter-group-title { font-size: 11px; font-family: var(--font); font-weight: 700; color: #374151; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--gray-300); }
  .filter-option { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
  .filter-cb {
    width: 15px; height: 15px;
    border: 1.5px solid var(--gray-300);
    border-radius: 3px;
    flex-shrink: 0;
    background: var(--white);
  }
  .filter-cb.checked { background: var(--primary-dk); border-color: var(--primary-dk); }
  .filter-option-text { font-size: 12px; color: #374151; }
  .filter-option-count { font-size: 11px; color: #6B7280; margin-left: auto; }
  .price-slider {
    height: 4px;
    background: linear-gradient(to right, var(--primary-dk) 60%, var(--gray-300) 60%);
    border-radius: 2px;
    margin: 10px 0;
    position: relative;
  }
  .price-slider::after {
    content: ''; position: absolute; right: 40%;
    top: -6px; width: 16px; height: 16px;
    background: var(--primary-dk); border: 2px solid #fff;
    border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.2);
    cursor: pointer;
  }
  .price-range-labels { display: flex; justify-content: space-between; font-size: 11px; color: #6B7280; font-family: var(--font); }
  .product-main { padding: 28px 32px; }
  .product-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
  .product-count { font-size: 13px; color: #6B7280; flex: 1; }
  .sort-select {
    height: 36px; padding: 0 12px;
    border: 1.5px solid var(--gray-300);
    border-radius: 7px;
    font-size: 12px;
    font-family: var(--font);
    color: #111827;
    background: var(--white);
    cursor: pointer;
  }
  .view-toggle { display: flex; gap: 6px; }
  .view-btn {
    width: 34px; height: 34px;
    border: 1.5px solid var(--gray-300);
    border-radius: 6px;
    background: var(--white);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
  }
  .view-btn.active { background: var(--primary-dk); border-color: var(--primary-dk); color: #fff; }

  /* ─── SOLUTION PAGE ─── */
  .solution-hero {
    background: linear-gradient(135deg, var(--navy), var(--primary-dk));
    padding: 72px 64px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
  }
  .solution-hero h1 { font-family: var(--font); font-size: 38px; font-weight: 800; color: #fff; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 16px; }
  .solution-hero p { color: var(--gray-300); font-size: 15px; line-height: 1.7; margin-bottom: 28px; }
  .process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; margin-top: 40px; }
  .process-steps::before { content: ''; position: absolute; top: 24px; left: 10%; right: 10%; height: 2px; background: linear-gradient(to right, var(--primary), var(--orange)); z-index: 0; }
  .step { text-align: center; position: relative; z-index: 1; padding: 0 16px; }











  .step-num {
    width: 52px; height: 52px;
    background: var(--primary-dk);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font); font-weight: 900; font-size: 18px;
    margin: 0 auto 14px;
    border: 3px solid #fff;
    box-shadow: 0 0 0 5px var(--primary-lt), 0 4px 14px rgba(13,119,182,.2);
  }
  .step-title { font-family: var(--font); font-size: 13px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
  .step-desc { font-size: 12px; color: #374151; line-height: 1.6; font-weight: 500; }

  /* ─── PRICING PAGE ─── */
  .pricing-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .pricing-card {
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    background: var(--white);
    transition: all .2s;
    position: relative;
  }
  .pricing-card.featured {
    border-color: var(--primary);
    box-shadow: 0 8px 40px rgba(27,79,216,.15);
    transform: scale(1.03);
  }
  .pricing-card.featured::before {
    content: 'MOST POPULAR';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-dk);
    color: #fff;
    font-size: 10px;
    font-family: var(--font);
    font-weight: 700;
    letter-spacing: .1em;
    padding: 3px 14px;
    border-radius: 20px;
  }
  .pricing-tier-name { font-family: var(--font); font-size: 14px; font-weight: 800; color: var(--primary-dk); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
  .pricing-range { font-family: var(--font); font-size: 36px; font-weight: 800; color: #111827; line-height: 1; margin: 12px 0 4px; }
  .pricing-per { font-size: 13px; color: #6B7280; margin-bottom: 24px; }
  .pricing-features { list-style: none; margin-bottom: 28px; }
  .pricing-features li { font-size: 13px; color: #374151; padding: 7px 0; border-bottom: 1px solid var(--gray-100); display: flex; gap: 8px; }
  .pricing-features li::before { content: '✓'; color: var(--green); font-weight: 700; flex-shrink: 0; }

  /* ─── RESOURCE HUB ─── */
  .resource-filter-bar {
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-300);
    padding: 16px 64px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
  }
  .filter-pill {
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-family: var(--font);
    font-weight: 600;
    letter-spacing: .04em;
    cursor: pointer;
    border: 1.5px solid var(--gray-300);
    background: var(--white);
    color: #374151;
    transition: all .15s;
  }
  .filter-pill.active, .filter-pill:hover { background: var(--primary-dk); color: #fff; border-color: var(--primary-dk); }
  .resource-card {
    background: var(--white);
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all .2s;
  }
  .resource-card:hover { box-shadow: var(--shadow-md); }
  .resource-thumb { height: 140px; }
  .resource-body { padding: 18px; }
  .resource-type-badge {
    display: inline-block;
    font-size: 10px;
    font-family: var(--font);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
  }
  .badge-blue { background: var(--primary-lt); color: var(--primary); }
  .badge-green { background: var(--green-lt); color: var(--green); }
  .badge-orange { background: var(--primary-lt); color: var(--orange); }
  .resource-title { font-family: var(--font); font-size: 13px; font-weight: 700; color: #111827; margin-bottom: 6px; line-height: 1.4; }
  .resource-excerpt { font-size: 12px; color: #6B7280; line-height: 1.6; margin-bottom: 14px; }
  .resource-meta { display: flex; justify-content: space-between; align-items: center; }
  .resource-time { font-size: 11px; color: #6B7280; font-family: var(--font); }
  .resource-cta { font-size: 11px; font-family: var(--font); font-weight: 700; color: var(--primary-dk); letter-spacing: .04em; }

  /* ─── INDUSTRY PAGE ─── */
  .industry-hero {
    padding: 72px 64px;
    background: linear-gradient(135deg, var(--navy), var(--primary-dk));
    position: relative;
  }
  .industry-hero::after {
    content: 'BPO & CALL CENTERS';
    position: absolute;
    right: 64px; top: 50%;
    transform: translateY(-50%);
    font-family: var(--font);
    font-size: 100px;
    font-weight: 800;
    color: rgba(255,255,255,.06);
    letter-spacing: -.04em;
    white-space: nowrap;
    pointer-events: none;
  }
  .industry-hero h1 { font-family: var(--font); font-size: 40px; font-weight: 800; color: #fff; line-height: 1.15; letter-spacing: -.02em; margin-bottom: 14px; }
  .industry-hero .stat-row { display: flex; gap: 32px; margin-top: 32px; }
  .industry-stat { }
  .industry-stat .num { font-family: var(--font); font-size: 36px; font-weight: 800; color: var(--primary); line-height: 1; }
  .industry-stat .lbl { font-size: 12px; color: var(--gray-300); font-family: var(--font); letter-spacing: .06em; text-transform: uppercase; margin-top: 4px; }

  /* ─── FINAL CTA SECTION ─── */
  .final-cta {
    background: linear-gradient(135deg, var(--primary-dk) 0%, var(--primary) 100%);
    padding: 64px;
    text-align: center;
  }
  .final-cta h2 { font-family: var(--font); font-size: 36px; font-weight: 800; color: #fff; margin-bottom: 12px; }
  .final-cta p { color: rgba(255,255,255,.8); font-size: 16px; margin-bottom: 32px; }
  .final-cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
  .cta-white { background: #fff; color: var(--primary-dk); padding: 14px 32px; border-radius: 8px; font-family: var(--font); font-weight: 800; font-size: 14px; cursor: pointer; letter-spacing: .04em; border: none; }
  .cta-outline-white { background: transparent; border: 2px solid rgba(255,255,255,.5); color: #fff; padding: 14px 32px; border-radius: 8px; font-family: var(--font); font-weight: 700; font-size: 14px; cursor: pointer; letter-spacing: .04em; }

  /* ─── ANNOTATION SYSTEM ─── */
  /* .annotation {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FFFBEB;
    border: 1px solid #FCD34D;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 10px;
    font-family: var(--font);
    font-weight: 600;
    color: #92400E;
    letter-spacing: .04em;
    margin: 4px 4px;
  }
  .annotations-bar {
    background: #FFFBEB;
    border-bottom: 1px solid #FCD34D;
    padding: 10px 64px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }
  .annotations-bar span { font-size: 11px; font-family: var(--font); font-weight: 700; color: #92400E; letter-spacing: .08em; text-transform: uppercase; margin-right: 8px; } */

  /* ─── BREADCRUMB ─── */
  .breadcrumb {
    padding: 12px 64px;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-300);
    font-size: 12px;
    color: #6B7280;
    font-family: var(--font);
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .breadcrumb a { color: var(--primary); text-decoration: none; }
  .breadcrumb .sep { color: var(--gray-300); }

  /* ─── DIVIDER ─── */
  .hr { border: none; border-top: 1px solid var(--gray-300); }

  /* ─── FORM ─── */
  .inline-form {
    background: var(--white);
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius-lg);
    padding: 28px;
  }
  .form-title { font-family: var(--font); font-size: 16px; font-weight: 800; color: var(--primary-dk); margin-bottom: 4px; }
  .form-sub { font-size: 12px; color: #6B7280; margin-bottom: 20px; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
  .form-field { }
  .form-field label { display: block; font-size: 11px; font-family: var(--font); font-weight: 600; color: #6B7280; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 5px; }
  .form-input {
    width: 100%;
    height: 40px;
    border: 1.5px solid var(--gray-300);
    border-radius: 7px;
    padding: 0 12px;
    font-size: 13px;
    font-family: var(--font);
    color: #111827;
    background: var(--white);
  }
  .form-input option { color: #111827; background: #fff; }
  .form-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-lt); }

  /* ─── MEGA MENU OVERLAY ─── */
  .mega-preview {
    background: var(--white);
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius-lg);
    margin: 0 64px;
    padding: 32px;
    box-shadow: var(--shadow-lg);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    margin-bottom: 0;
    border-top: 3px solid var(--primary);
  }
  .mega-col-title { font-family: var(--font); font-size: 11px; font-weight: 700; color: #6B7280; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
  .mega-link { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; cursor: pointer; padding: 8px; border-radius: 7px; transition: background .15s; }
  .mega-link:hover { background: var(--primary-lt); }
  .mega-link-icon { width: 32px; height: 32px; border-radius: 7px; background: var(--primary-lt); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; }
  .mega-link-title { font-family: var(--font); font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 2px; }
  .mega-link-sub { font-size: 11px; color: #6B7280; line-height: 1.4; }

  /* ── INDUSTRIES MEGA MENU ── */
  .ind-mega {
    background: #fff;
    border-top: 3px solid var(--primary);
    box-shadow: 0 20px 60px rgba(46,66,112,.18);
    display: grid;
    grid-template-columns: 260px 1fr 280px;
    min-height: 460px;
  }
  /* Left: vertical industry list */
  .ind-sidebar {
    background: var(--navy);
    padding: 28px 0;
  }
  .ind-sidebar-header {
    font-family: var(--font);
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,.4);
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 0 24px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 4px;
  }
  .ind-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 24px;
    cursor: pointer;
    transition: all .15s;
    position: relative;
    border-left: 3px solid transparent;
  }
  .ind-tab:hover, .ind-tab.active {
    background: rgba(3,180,215,.15);
    border-left-color: var(--primary);
  }
  .ind-tab-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    background: rgba(255,255,255,.08);
  }
  .ind-tab.active .ind-tab-icon { background: var(--primary); }
  .ind-tab-label { font-family: var(--font); font-size: 13px; font-weight: 600; color: rgba(255,255,255,.75); }
  .ind-tab.active .ind-tab-label { color: #fff; }
  .ind-tab-arrow { margin-left: auto; font-size: 11px; color: rgba(255,255,255,.3); }
  .ind-tab.active .ind-tab-arrow { color: var(--primary); }

  /* Centre: content panel */
  .ind-panel {
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
  }
  .ind-panel-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 10px;
  }
  .ind-panel-tag::before {
    content: '';
    width: 18px; height: 2px;
    background: var(--primary);
    border-radius: 2px;
  }
  .ind-panel-title {
    font-family: var(--font);
    font-size: 22px;
    font-weight: 800;
    color: var(--navy);
    margin-bottom: 10px;
    line-height: 1.2;
  }
  .ind-panel-desc {
    font-size: 13px;
    color: #6B7280;
    line-height: 1.7;
    margin-bottom: 24px;
    max-width: 440px;
  }
  .ind-use-cases {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 24px;
  }
  .ind-use-case {
    background: var(--gray-100);
    border: 1.5px solid var(--gray-300);
    border-radius: 9px;
    padding: 14px;
    cursor: pointer;
    transition: all .15s;
  }
  .ind-use-case:hover { border-color: var(--primary); background: var(--primary-lt); }
  .ind-uc-title { font-family: var(--font); font-size: 12px; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
  .ind-uc-sub { font-size: 11px; color: #6B7280; }
  .ind-panel-ctas { display: flex; gap: 10px; margin-top: auto; }
  .ind-cta-main {
    background: var(--primary);
    color: #fff;
    padding: 11px 22px;
    border-radius: 8px;
    font-family: var(--font);
    font-weight: 700;
    font-size: 13px;
    border: none;
    cursor: pointer;
    letter-spacing: .03em;
  }
  .ind-cta-ghost {
    background: transparent;
    border: 1.5px solid var(--gray-300);
    color: var(--navy);
    padding: 11px 22px;
    border-radius: 8px;
    font-family: var(--font);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
  }

  /* Right: featured / stats */
  .ind-featured {
    background: var(--primary-lt);
    border-left: 1px solid var(--gray-300);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .ind-feat-header {
    font-family: var(--font);
    font-size: 10px;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .ind-stat-card {
    background: #fff;
    border: 1.5px solid var(--gray-300);
    border-radius: 10px;
    padding: 16px;
  }
  .ind-stat-num { font-family: var(--font); font-size: 28px; font-weight: 900; color: var(--primary); line-height: 1; }
  .ind-stat-label { font-size: 12px; color: #6B7280; margin-top: 4px; }
  .ind-case-card {
    background: #fff;
    border: 1.5px solid var(--gray-300);
    border-radius: 10px;
    padding: 16px;
    cursor: pointer;
    transition: all .15s;
  }
  .ind-case-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
  .ind-case-tag { font-size: 10px; font-family: var(--font); font-weight: 700; color: var(--primary); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
  .ind-case-title { font-size: 12px; font-weight: 700; color: var(--navy); line-height: 1.4; margin-bottom: 4px; }
  .ind-case-result { font-size: 11px; color: #6B7280; }
  .ind-view-all {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--navy);
    color: #fff;
    padding: 12px 16px;
    border-radius: 10px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    margin-top: auto;
    letter-spacing: .03em;
  }

  /* ─── SCROLL ─── */
  /* ── MEGA PANEL SWITCHING ── */
  .mega-panel { display: none; }
  .mega-panel.active { display: block; }
  .mega-trigger { transition: all .15s; cursor: pointer; }

  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: #EBF7FC; }
  ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ── Desktop  : 1280px+   (default styles above)
   ── Laptop   : 1024px – 1279px
   ── Tablet   : 768px  – 1023px
   ── Mobile   : 480px  – 767px
   ── Xs Mobile: 0px    – 479px
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   LAPTOP  ≤ 1279px
───────────────────────────────────────────────────────────────*/
@media (max-width: 1279px) {
  .canvas-area { padding: 20px; }

  .hero { padding: 56px 40px 48px; gap: 32px; }
  .hero-headline { font-size: 36px; }

  .section-wrapper { padding: 48px 40px; }
  .section-title { font-size: 28px; }

  .social-proof-section { padding: 28px 40px; }
  .resource-filter-bar { padding: 14px 40px; }
  /* .annotations-bar { padding: 10px 40px; } */
  .breadcrumb { padding: 12px 40px; }

  .roi-section { padding: 48px 40px; gap: 40px; }

  .solution-hero { padding: 56px 40px; gap: 40px; }
  .solution-hero h1 { font-size: 32px; }

  .industry-hero { padding: 56px 40px; }
  .industry-hero::after { font-size: 72px; right: 40px; }
  .industry-hero h1 { font-size: 34px; }

  .final-cta { padding: 48px 40px; }
  .final-cta h2 { font-size: 30px; }

  .site-footer { padding: 48px 40px 28px; }

  .mega-preview { margin: 0 40px; gap: 20px; }

  .pricing-tiers { gap: 16px; }
  .pricing-card.featured { transform: scale(1.02); }

  .navbar { padding: 0 20px; }
  .nav-item { padding: 8px 10px; font-size: 12px; }
  .nav-logo { margin-right: 12px; font-size: 20px; }

  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: 1.2fr repeat(3, 1fr); }
  .footer-grid > div:last-child { display: none; } /* hide last footer col at laptop */

  .product-page-layout { grid-template-columns: 220px 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   TABLET  ≤ 1023px
───────────────────────────────────────────────────────────────*/
@media (max-width: 1023px) {
  /* ── Shell & navigation ── */
  .canvas-area { padding: 12px; }
  .page-frame { border-radius: var(--radius); }

  .meta-bar {
    padding: 6px 16px;
    font-size: 10px;
  }
  .meta-bar > span:last-child { display: none; } /* hide right side text */

  .page-nav { padding: 0 8px; top: 52px; }
  .page-nav-btn { padding: 10px 12px; font-size: 11px; }

  /* ── Navbar ── */
  .navbar { padding: 0 16px; }
  .nav-utility { display: none; }
  .nav-main { height: 52px; gap: 2px; }
  .nav-logo { font-size: 18px; margin-right: 8px; }
  .nav-item { display: none; }   /* hide nav links — wireframe mode on tablet */
  .nav-spacer { display: none; }
  .nav-cta { margin-left: auto; padding: 8px 14px; font-size: 12px; }
  .nav-login { display: none; }

 

  /* ── Hero ── */
  .hero {
    grid-template-columns: 1fr;
    padding: 40px 24px 36px;
    gap: 28px;
  }
  .hero-headline { font-size: 30px; }
  .hero-sub { font-size: 14px; max-width: 100%; }
  .hero-visual { height: 240px; }
  .hero::before { width: 300px; height: 300px; right: -60px; top: -60px; }

  /* ── Social proof ── */
  .social-proof-section { padding: 24px 20px; }
  .social-proof-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
  }
  .social-proof-stats { gap: 16px; flex-wrap: wrap; }
  .sp-stat .num { font-size: 18px; }

  /* ── Grids ── */
  .grid-3 { grid-template-columns: 1fr 1fr; gap: 14px; }
  .grid-4 { grid-template-columns: 1fr 1fr; gap: 14px; }
  .grid-2 { grid-template-columns: 1fr; gap: 16px; }

  /* ── Section wrapper ── */
  .section-wrapper { padding: 36px 20px; }
  .section-title { font-size: 24px; }
  .section-sub { font-size: 13px; margin-bottom: 28px; }

  /* ── ROI Calculator ── */
  .roi-section {
    grid-template-columns: 1fr;
    padding: 36px 20px;
    gap: 28px;
  }
  .roi-left h2 { font-size: 24px; }

  /* ── Solution hero ── */
  .solution-hero {
    grid-template-columns: 1fr;
    padding: 40px 20px;
    gap: 28px;
  }
  .solution-hero h1 { font-size: 28px; }

  /* ── Process steps ── */
  .process-steps {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .process-steps::before { display: none; }

  /* ── Product page ── */
  .product-page-layout { grid-template-columns: 1fr; }
  .filter-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--gray-300);
    padding: 20px 16px;
  }
  .product-main { padding: 20px 16px; }

  /* ── Pricing ── */
  .pricing-tiers { grid-template-columns: 1fr; gap: 16px; }
  .pricing-card.featured { transform: scale(1); }

  /* ── Footer ── */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .footer-grid > div:last-child { display: block; }
  .site-footer { padding: 36px 20px 24px; }
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
  .footer-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

  /* ── Mega menu ── */
  .mega-preview {
    grid-template-columns: 1fr 1fr;
    margin: 0 16px;
    padding: 20px;
    gap: 16px;
  }
  .ind-mega { grid-template-columns: 1fr; min-height: unset; }
  .ind-sidebar { display: none; }
  .ind-featured { border-left: none; border-top: 1px solid var(--gray-300); }

  /* ── Industry hero ── */
  .industry-hero { padding: 40px 20px; }
  .industry-hero::after { display: none; }
  .industry-hero h1 { font-size: 28px; }
  .industry-hero .stat-row { gap: 20px; flex-wrap: wrap; }
  .industry-stat .num { font-size: 28px; }

  /* ── Final CTA ── */
  .final-cta { padding: 40px 20px; }
  .final-cta h2 { font-size: 26px; }
  .final-cta p { font-size: 14px; }
  .final-cta-buttons { flex-direction: column; align-items: center; gap: 10px; }
  .cta-white, .cta-outline-white { width: 100%; max-width: 320px; text-align: center; }

  /* ── Form ── */
  .form-row { grid-template-columns: 1fr; }
  .inline-form { padding: 20px; }

  /* ── Annotations ── */
  /* .annotations-bar { padding: 10px 16px; } */
  .breadcrumb { padding: 10px 16px; }

  /* ── Resource bar ── */
  .resource-filter-bar { padding: 12px 16px; }

  /* ── ROI result grid ── */
  .roi-result { grid-template-columns: 1fr; }
  .roi-num { font-size: 20px; }

  /* ── Company page tabs ── */
  #co-tabs { overflow-x: auto; }
  .co-tab { white-space: nowrap; padding: 12px 16px !important; }
}

/* ─────────────────────────────────────────────────────────────
   MOBILE  ≤ 767px
───────────────────────────────────────────────────────────────*/
@media (max-width: 767px) {
  /* ── Shell ── */
  .canvas-area { padding: 8px; }
  .page-frame { border-radius: 8px; }

  /* ── Meta bar: single line ── */
  .meta-bar {
    padding: 5px 12px;
    font-size: 9px;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .meta-bar > span:last-child { display: none; }
  .meta-bar span { gap: 8px; }

  /* ── Page nav ── */
  .page-nav { padding: 0 4px; top: 58px; }
  .page-nav-btn { padding: 8px 10px; font-size: 10px; letter-spacing: 0; }

  /* ── Navbar ── */
  .navbar { padding: 0 12px; }
  .nav-main {
    position: relative;
    justify-content: space-between;
    height: 58px;
    gap: 10px;
  }
  .nav-logo-link {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 1;
  }
  .nav-logo {
    font-size: 17px;
    margin-right: 0;
    line-height: 1;
  }
  .nav-hamburger {
    display: flex !important;
    order: 1;
    margin-left: 0;
    width: 42px;
    height: 42px;
    padding: 8px;
    border-radius: 10px;
  }
  .nav-cta-link {
    order: 3;
    margin-left: auto;
    position: relative;
    z-index: 2;
  }
  .nav-cta {
    padding: 9px 12px;
    font-size: 11px;
    border-radius: 10px;
    min-height: 40px;
    white-space: nowrap;
  }
  .nav-cta__label-desktop { display: none; }
  .nav-cta__label-mobile { display: inline; }

  /* ── Hero ── */
  .hero { padding: 28px 16px 24px; gap: 20px; }
  .hero-trust-badges { gap: 6px; }
  .trust-badge { font-size: 10px; padding: 4px 8px; }
  .hero-headline { font-size: 24px; line-height: 1.2; margin-bottom: 12px; }
  .hero-sub { font-size: 13px; margin-bottom: 18px; }
  .hero-ctas { gap: 10px; flex-direction: column; }
  .cta-primary, .cta-secondary { width: 100%; text-align: center; padding: 13px 20px; }
  .micro-benefits { gap: 10px; }
  .micro-item { font-size: 11px; }
  .hero-visual { height: 180px; }

  /* ── Social proof ── */
  .social-proof-section { padding: 20px 16px; }
  .social-proof-label::before,
  .social-proof-label::after { display: none; }
  .social-proof-stats { gap: 10px; justify-content: space-between; }
  .sp-stat .num { font-size: 16px; }
  .sp-stat .lbl { font-size: 9px; }
  .carousel-btn { width: 36px; height: 36px; font-size: 14px; }

  /* ── Grids → single column on mobile ── */
  .grid-3 { grid-template-columns: 1fr; gap: 12px; }
  .grid-4 { grid-template-columns: 1fr; gap: 12px; }
  .grid-2 { grid-template-columns: 1fr; gap: 12px; }

  /* ── Section wrapper ── */
  .section-wrapper { padding: 28px 16px; }
  .section-title { font-size: 22px; letter-spacing: -.01em; }
  .section-sub { font-size: 13px; margin-bottom: 20px; }

  /* ── Value prop cards ── */
  .vp-card { padding: 20px 16px; }
  .vp-title { font-size: 14px; }

  /* ── ROI calculator ── */
  .roi-section { padding: 28px 16px; gap: 20px; }
  .roi-left h2 { font-size: 22px; }
  .roi-left p { font-size: 13px; }
  .roi-card { padding: 20px 16px; }
  .roi-num { font-size: 18px; }
  .roi-input { height: 40px; font-size: 13px; }

  /* ── Product cards ── */
  .product-card { display: flex; flex-direction: row; }
  .product-img { height: 100%; min-width: 100px; width: 100px; flex-shrink: 0; }
  .product-info { padding: 12px; }
  .product-name { font-size: 12px; }
  .product-specs { font-size: 11px; }
  .product-price { font-size: 15px; }

  /* ── Case cards ── */
  .case-img { height: 120px; }
  .case-stat { font-size: 26px; }
  .case-body { padding: 16px; }

  /* ── Industry cards ── */
  .industry-card { padding: 16px; gap: 12px; }
  .industry-icon { width: 40px; height: 40px; font-size: 18px; }
  .industry-name { font-size: 12px; }
  .industry-desc { font-size: 11px; }

  /* ── Solution cards ── */
  .solution-card { padding: 24px 18px; }
  .solution-title { font-size: 15px; }

  /* ── Solution hero ── */
  .solution-hero { padding: 28px 16px; gap: 20px; }
  .solution-hero h1 { font-size: 24px; }
  .solution-hero p { font-size: 13px; }

  /* ── Process steps ── */
  .process-steps { grid-template-columns: 1fr 1fr; gap: 20px; }
  .step-num { width: 40px; height: 40px; font-size: 15px; }
  .step-title { font-size: 12px; }
  .step-desc { font-size: 11px; }

  /* ── Product page ── */
  .product-page-layout { display: block; }
  .filter-sidebar { padding: 16px 12px; }
  .product-main { padding: 16px 12px; }
  .product-toolbar { flex-wrap: wrap; gap: 8px; }
  .sort-select { width: 100%; }
  .view-toggle { margin-left: auto; }

  /* ── Mega preview ── */
  .mega-preview {
    grid-template-columns: 1fr;
    margin: 0;
    padding: 16px;
    gap: 12px;
  }

  /* ── Pricing ── */
  .pricing-tiers { grid-template-columns: 1fr; }
  .pricing-card { padding: 24px 18px; }
  .pricing-range { font-size: 28px; }

  /* ── Footer ── */
  .footer-grid { grid-template-columns: 1fr; gap: 0px; text-align: center; justify-items: center;}
  .site-footer { padding: 28px 16px 20px; }
  .footer-brand p { max-width: 100%; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
  .footer-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }

  /* ── Final CTA ── */
  .final-cta { padding: 32px 16px; }
  .final-cta h2 { font-size: 22px; }
  .final-cta p { font-size: 13px; margin-bottom: 20px; }
  .cta-white, .cta-outline-white { padding: 12px 20px; font-size: 13px; }

  /* ── Industry hero ── */
  .industry-hero { padding: 28px 16px; }
  .industry-hero::after { display: none; }
  .industry-hero h1 { font-size: 24px; }
  .industry-hero .stat-row { gap: 12px; flex-wrap: wrap; }
  .industry-stat .num { font-size: 24px; }
  .industry-stat .lbl { font-size: 10px; }

  /* ── Resource filter bar ── */
  .resource-filter-bar { padding: 10px 12px; gap: 6px; }
  .filter-pill { padding: 5px 12px; font-size: 11px; }

  /* ── Breadcrumb ── */
  .breadcrumb { padding: 8px 12px; font-size: 11px; }
  /* .annotations-bar { padding: 8px 12px; } */

  /* ── Form ── */
  .form-row { grid-template-columns: 1fr; }
  .inline-form { padding: 16px; }
  .form-title { font-size: 14px; }

  /* ── Company page tabs ── */
  #co-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .co-tab { padding: 10px 14px !important; font-size: 12px !important; white-space: nowrap; }

  /* ── Inline style overrides for wide padding sections (used in snippets) ── */
  [style*="padding: 56px 64px"],
  [style*="padding:56px 64px"] {
    padding: 28px 16px !important;
  }
  [style*="padding: 64px"],
  [style*="padding:64px"] {
    padding: 28px 16px !important;
  }
  [style*="padding: 72px 64px"],
  [style*="padding:72px 64px"] {
    padding: 32px 16px !important;
  }
  [style*="padding: 40px 64px"],
  [style*="padding:40px 64px"] {
    padding: 24px 16px !important;
  }

  /* ── Inline grids: force to column ── */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(2"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns: 1.5fr repeat(4"],
  [style*="grid-template-columns:1.5fr repeat(4"],
  [style*="grid-template-columns: 1.1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: repeat(6"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns:repeat(6"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ── Typography ── */
  h1 { font-size: 26px !important; }
  h2 { font-size: 20px !important; }
}

/* ─────────────────────────────────────────────────────────────
   XS MOBILE  ≤ 479px
───────────────────────────────────────────────────────────────*/
@media (max-width: 479px) {
  /* ── Product cards: stacked again ── */
  .product-card { flex-direction: column; }
  .product-img { width: 100%; height: 130px; }

  /* ── Fully single column on tiny screens ── */
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns: repeat(6"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns:repeat(6"],
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Process steps ── */
  .process-steps { grid-template-columns: 1fr; gap: 16px; }

  /* ── Pricing ── */
  .pricing-range { font-size: 24px; }

  /* ── Hero ── */
  .hero-headline { font-size: 20px; }
  .hero-visual { display: none; } /* hide on xs — it's a placeholder box */

  /* ── Social proof stats: 2-up ── */
  .social-proof-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  .social-proof-stats > div[style*="width:1px"] { display: none; }

  /* ── Meta bar ── */
  .meta-bar { padding: 4px 10px; }

  /* ── Nav ── */
  .navbar { padding: 0 10px; }
  .nav-main { height: 54px; gap: 8px; }
  .nav-logo { font-size: 36px; }
  .nav-hamburger {
    width: 40px;
    height: 40px;
  }
  .nav-cta { font-size: 10px; padding: 8px 10px; min-height: 38px; }

  /* ── Final CTA buttons: stacked & full width ── */
  .final-cta-buttons { flex-direction: column; align-items: stretch; }
  .cta-white, .cta-outline-white { width: 100%; max-width: 100%; }

  /* ── Footer ── */
  .footer-col { min-width: 0; }

  /* ── Canvas ── */
  .canvas-area { padding: 4px; }
  .page-frame { border-radius: 6px; }

  /* ── Section wrappers ── */
  .section-wrapper { padding: 20px 12px; }
  .roi-section { padding: 20px 12px; }
  .solution-hero { padding: 20px 12px; }
  .industry-hero { padding: 20px 12px; }
  .final-cta { padding: 24px 12px; }
  .site-footer { padding: 24px 12px 16px; }
  .social-proof-section { padding: 16px 12px; }

  /* ── All inline padding overrides for xs ── */
  [style*="padding: 56px 64px"],
  [style*="padding:56px 64px"],
  [style*="padding: 64px"],
  [style*="padding:64px"],
  [style*="padding: 72px 64px"],
  [style*="padding:72px 64px"],
  [style*="padding: 40px 64px"],
  [style*="padding:40px 64px"],
  [style*="padding: 28px 64px"],
  [style*="padding:28px 64px"] {
    padding: 20px 12px !important;
  }

  h1 { font-size: 22px !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 16px !important; }
}

/* ─────────────────────────────────────────────────────────────
   SAFETY GUARDS  — prevent any layout from overflowing
───────────────────────────────────────────────────────────────*/
@media (max-width: 1023px) {
  /* Prevent horizontal scroll from fixed-width elements */
  .page-frame,
  .app-shell,
  .canvas-area {
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Ensure all images / SVGs scale within their containers */
  img, svg {
    max-width: 100%;
    height: auto;
  }

  /* Stop inline style widths from breaking layout */
  [style*="min-width: 160px"] { min-width: 120px !important; }
  [style*="min-width:160px"]  { min-width: 120px !important; }
  [style*="min-width: 175px"] { min-width: 130px !important; }
  [style*="min-width: 180px"] { min-width: 130px !important; }

  /* Fix any wide inline display:grid wrappers */
  div[style*="display:grid"],
  div[style*="display: grid"] {
    max-width: 100%;
    min-width: 0;
  }

  /* Mega menu panels never overflow */
  .mega-panel { overflow-x: hidden; }

  /* Logo track — allow scroll on touch */
  .logo-track { cursor: grab; }
  .logo-track-wrapper { -webkit-overflow-scrolling: touch; }
}



/* ═══════════════════════════════════════════════════════════════
   MEGA MENU DROPDOWN  +  HAMBURGER  +  MOBILE DRAWER
   ═══════════════════════════════════════════════════════════════ */

/* ── Logo link (no underline) ── */
.nav-logo-link { text-decoration: none; }

/* ── Mega menu container – full-width white panel ── */
.mega-menu {
  position: absolute;
  top: 100%;          /* sits flush below the navbar */
  left: -32px;        /* break out of navbar padding */
  right: -32px;
  background: #ffffff;
  border-top: 3px solid var(--primary);
  box-shadow: 0 20px 60px rgba(46,66,112,.18), 0 4px 20px rgba(46,66,112,.06);
  z-index: 9999;
  display: none;
  overflow: hidden;
}
.mega-menu.is-open {
  display: block;
  animation: njMegaIn .18s ease-out both;
}
@keyframes njMegaIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Panel base ── */
.mega-panel {
  display: none;
  padding: 36px 40px;
  max-width: 1280px;
  margin: 0 auto;
  gap: 0;
}
.mega-panel.is-active { display: grid; }

/* Per-panel column configs */
#mega-products.is-active   { grid-template-columns: 1fr 1fr 1fr 1fr 240px; }
#mega-solutions.is-active  { grid-template-columns: 1fr 1fr 1fr 240px; }
#mega-industries.is-active { grid-template-columns: 1fr 1fr 1fr 240px; }
#mega-resources.is-active  { grid-template-columns: 1fr 1fr 1fr 240px; }
#mega-company.is-active    { grid-template-columns: 1fr 1fr 1fr 1fr 240px; }

/* ── Column ── */
.mega-col {
  padding: 0 28px;
  border-right: 1px solid var(--gray-300);
  min-width: 0;
}
.mega-col:first-child { padding-left: 0; }
.mega-col:last-child  { border-right: none; }

/* Column heading */
.mega-col-head {
  font-size: 10px;
  font-family: var(--font);
  font-weight: 700;
  color: var(--gray-500);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mega-col-head::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  flex-shrink: 0;
}
.mega-col-head--green::before { background: var(--green); }

/* Nav link item */
.mega-nav-link {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 4px;
  cursor: pointer;
  padding: 8px;
  border-radius: 7px;
  transition: background .14s;
  text-decoration: none;
  color: inherit;
}
.mega-nav-link:hover  { background: var(--primary-lt); }
.mega-nav-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }

.mega-nav-icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  background: var(--primary-lt);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.mega-nav-icon--green { background: var(--green-lt); }
.mega-nav-icon--navy  { background: rgba(46,66,112,.08); }

.mega-nav-title {
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1px;
  line-height: 1.3;
}
.mega-nav-sub {
  font-size: 11px;
  color: var(--gray-500);
  line-height: 1.45;
}

/* View-all link at column bottom */
.mega-view-all {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--gray-300);
  font-size: 11px;
  font-family: var(--font);
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  letter-spacing: .03em;
  text-decoration: none;
  transition: color .14s;
}
.mega-view-all:hover { color: var(--primary-dk); }

/* ── Promo column ── */
.mega-col--promo {
  padding-left: 24px;
  border-right: none;
}
.mega-promo-card {
  background: linear-gradient(135deg, var(--navy), var(--primary-dk));
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 10px;
}
.mega-promo-tag {
  font-size: 10px;
  font-family: var(--font);
  font-weight: 700;
  color: var(--primary);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.mega-promo-title {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
  line-height: 1.3;
}
.mega-promo-desc {
  font-size: 11px;
  color: rgba(255,255,255,.72);
  line-height: 1.6;
  margin-bottom: 12px;
}
.mega-promo-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 9px 14px;
  border-radius: 7px;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: background .14s;
  letter-spacing: .02em;
}
.mega-promo-btn:hover { background: #02a0bf; }

.mega-promo-light {
  background: var(--primary-lt);
  border: 1.5px solid var(--gray-300);
  border-radius: 10px;
  padding: 14px;
}
.mega-promo-light-title {
  font-size: 11px;
  font-family: var(--font);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 5px;
}
.mega-promo-light-sub {
  font-size: 11px;
  color: var(--gray-500);
  margin-bottom: 8px;
  line-height: 1.5;
}
.mega-promo-light-link {
  font-size: 11px;
  font-family: var(--font);
  font-weight: 700;
  color: var(--primary);
  cursor: pointer;
  transition: color .14s;
}
.mega-promo-light-link:hover { color: var(--primary-dk); }

/* ── Active trigger highlight ── */
.mega-trigger.is-active {
  color: var(--primary) !important;
  background: rgba(3,180,215,.15) !important;
}
.mega-trigger.is-active .chevron { opacity: 1; }

/* ── Backdrop – transparent click-catcher behind mega ── */
.mega-backdrop {
  position: fixed;
  inset: 0;
  z-index: 498;          /* below navbar (500) but above content */
  display: none;
  cursor: default;
  background: transparent;
}
.mega-backdrop.is-active { display: block; }

/* ════════════════════════════════
   HAMBURGER BUTTON
═══════════════════════════════ */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1.5px solid rgba(255,255,255,.28);
  color: #fff;
  cursor: pointer;
  padding: 7px 9px;
  border-radius: 6px;
  margin-left: 12px;
  transition: background .14s, border-color .14s;
  width: 40px;
  height: 40px;
}
.nav-hamburger:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }
.ham-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .24s ease, opacity .2s ease;
}
/* Animated X state */
.nav-hamburger.is-open .ham-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.is-open .ham-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.is-open .ham-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ════════════════════════════════
   MOBILE NAV OVERLAY + DRAWER
═══════════════════════════════ */
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.54);
  z-index: 10000;
  display: none;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  cursor: pointer;
}
.mobile-nav-overlay.open { display: block; }

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  left: -100%;
  width: min(320px, 88vw);
  height: 100%;
  max-height: 100dvh;
  background: var(--primary-dk);
  z-index: 10001;
  transition: left .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.mobile-nav-drawer.open { left: 0; }
.mobile-nav-drawer[aria-hidden="false"] { left: 0; }

/* Drawer header */
.mobile-nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: var(--primary-dk);
  z-index: 1;
}
.mobile-nav-logo {
  font-family: var(--font);
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.02em;
  text-decoration: none;
}
.mobile-nav-logo span { color: var(--primary); }
.mobile-nav-close {
  background: rgba(255,255,255,.1);
  border: none;
  color: rgba(255,255,255,.8);
  font-size: 16px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .14s;
  flex-shrink: 0;
}
.mobile-nav-close:hover { background: rgba(255,255,255,.2); }

/* Drawer nav items */
.mobile-nav-items { flex: 1; padding: 6px 0; }

.mobile-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  color: rgba(255,255,255,.88);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s;
  border: none;
  background: none;
  text-align: left;
  letter-spacing: .02em;
  text-decoration: none;
  line-height: 1.3;
}
.mobile-nav-item:hover,
.mobile-nav-item.is-active { background: rgba(255,255,255,.08); color: #fff; }

.mobile-chevron {
  font-size: 10px;
  opacity: .55;
  transition: transform .24s ease, opacity .2s;
  flex-shrink: 0;
  margin-left: 8px;
}
.mobile-nav-item.is-active .mobile-chevron {
  transform: rotate(180deg);
  opacity: 1;
  color: var(--primary);
}

/* Sub-menu */
.mobile-sub-menu {
  display: none;
  background: rgba(0,0,0,.22);
  padding: 2px 0 6px;
}
.mobile-sub-menu.open { display: block; }

.mobile-sub-item {
  display: block;
  padding: 10px 20px 10px 40px;
  color: rgba(255,255,255,.65);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color .14s;
  text-decoration: none;
  line-height: 1.4;
}
.mobile-sub-item:hover { color: var(--primary); }

.mobile-sub-divider {
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: 6px 20px;
}

/* Drawer CTA */
.mobile-nav-cta {
  padding: 16px 20px;
  border-top: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
.mobile-nav-cta-btn {
  width: 100%;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 13px;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .03em;
  transition: background .14s;
  text-align: center;
}
.mobile-nav-cta-btn:hover { background: #02a0bf; }

/* Utility links at drawer bottom */
.mobile-nav-utility {
  padding: 12px 20px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  border-top: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.mobile-nav-utility a {
  font-size: 11px;
  color: rgba(255,255,255,.45);
  text-decoration: none;
  font-family: var(--font);
  transition: color .14s;
}
.mobile-nav-utility a:hover { color: rgba(255,255,255,.8); }

/*++++++++++++++ PREMIUM FAQ CSS (Improved UI + Smooth UX) +++++++++++++*/
.hc-section{
  margin-bottom:60px !important;
}
.hc-sec-head {
  text-align: center;
  max-width: 720px;
  margin: 20px auto 30px auto;
}
/* SMALL "FAQ" LABEL */
.hc-eyebrow {
  display: inline-block;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #03B4D7;
  margin-bottom: 10px;
}

/* MAIN HEADING */
.hc-sec-h2 {
  font-weight: 800;
  line-height: 1.3;
  color: #1F2A44;
  margin-bottom: 14px;
}

/* HIGHLIGHT WORD (Common Questions) */
.hc-sec-h2 span {
  color: #03B4D7;
}

/* SUBTEXT */
.hc-sec-sub {
  font-size: 16px;
  color: #6B7280;
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto;
}

.hc-faq-wrap {
  max-width: 820px;
  margin: 0 auto !important;
  padding: 0 16px;
}

.hc-faq-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* CARD */
.hc-faq-item {
  background: #ffffff !important;
  border: 1px solid #DCEAF2 !important;
  border-radius: 18px !important;
  overflow: hidden;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}

/* HOVER EFFECT */
.hc-faq-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(3,180,215,0.12);
  border-color: #CDEAF5;
}

/* ACTIVE STATE */
.hc-faq-item.open {
  box-shadow: 0 14px 30px rgba(3,180,215,0.18);
  border-color: #03B4D7;
}

/* QUESTION BUTTON */
.hc-faq-q {
  padding: 18px 22px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #2E4270 !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  transition: all 0.2s ease;
  font-family: var(--hc-font) !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  text-align: left !important;
  line-height: 1.5;
}

/* HOVER BG */
.hc-faq-q:hover {
  background: #F4FBFE !important;
}

/* PLUS ICON */
.hc-faq-arr {
  font-size: 20px !important;
  color: #03B4D7 !important;
  font-weight: 800 !important;
  transition: all 0.3s ease !important;
  flex-shrink: 0;
  margin-left: 12px;
}

/* ROTATE ICON */
.hc-faq-item.open .hc-faq-arr {
  transform: rotate(45deg) scale(1.1);
}

/* ANSWER CONTAINER */
.hc-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  opacity: 0;
}

/* OPEN STATE */
.hc-faq-item.open .hc-faq-a {
  max-height: 500px;
  opacity: 1;
}

/* INNER CONTENT */
.hc-faq-inner {
  padding: 0 22px 18px !important;
  padding-top: 10px !important;
  font-size: 14px !important;
  color: #4B5563 !important;
  line-height: 1.8 !important;
  border-top: 1px solid #E6F3F8;
  font-family: var(--hc-font) !important;
}

/* ================= MOBILE OPTIMIZATION ================= */
@media (max-width: 768px) {
   .hc-sec-head {
    margin-bottom: 28px;
    padding: 0 12px;
  }

  .hc-sec-h2 {
    font-size: 24px;
    line-height: 1.4;
  }

  .hc-sec-sub {
    font-size: 14px;
  }

  .hc-eyebrow {
    font-size: 11px;
    letter-spacing: 1.2px;
  }

  .hc-faq-wrap {
    padding: 0 12px;
  }

  .hc-faq-list {
    gap: 12px !important;
  }

  .hc-faq-item {
    border-radius: 16px !important;
  }

  .hc-faq-q {
    padding: 16px !important;
    font-size: 14px !important;
  }

  .hc-faq-inner {
    padding: 0 16px 16px !important;
    font-size: 13px !important;
  }

  .hc-faq-arr {
    font-size: 18px !important;
  }
}
/*-----END FAQ-----*/
/* ════════════════════════════════
   RESPONSIVE — SHOW HAMBURGER
   ≤ 1023px
═══════════════════════════════ */
@media (max-width: 1023px) {
  /* Hide desktop nav links */
  .navbar .nav-item,
  .navbar .nav-spacer,
  .navbar .nav-login { display: none !important; }

  /* Show hamburger */
  .nav-hamburger { display: flex !important; }

  /* Keep the CTA button visible on tablet */
  .navbar .nav-cta {
    display: block !important;
    margin-left: auto;
    font-size: 12px;
    padding: 7px 14px;
  }

  /* Suppress desktop mega menu — mobile uses drawer */
  .mega-menu,
  .mega-backdrop { display: none !important; }
}

/* ════════════════════════════════
   RESPONSIVE — TABLET mega layout
   768px – 1023px  (already off)
═══════════════════════════════ */

/* ════════════════════════════════
   RESPONSIVE — SMALL DESKTOP
   1024px – 1200px: tighter panels
═══════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1200px) {
  #mega-products.is-active  { grid-template-columns: 1fr 1fr 1fr 1fr 200px; }
  #mega-solutions.is-active,
  #mega-industries.is-active,
  #mega-resources.is-active { grid-template-columns: 1fr 1fr 1fr 200px; }
  #mega-company.is-active   { grid-template-columns: 1fr 1fr 1fr 1fr 200px; }

  .mega-panel { padding: 28px 24px; }
  .mega-col   { padding: 0 18px; }
  .mega-col--promo { padding-left: 16px; }
  .mega-promo-card { padding: 16px; }
}


/*B2b-bpo-enterprise.css*/
/* ═══════════════════════════════════════════════════════
   NEWJAISA — BPO INDUSTRY PAGE
   File: assets/component-bpo.css
   All classes prefixed bpo- · No navbar · No footer
   Responsive: 480px · 768px · 1024px · 1280px+
═══════════════════════════════════════════════════════ */

:root {
  --bpo-cyan:    #03B4D7;
  --bpo-cyanlt:  #E0F7FC;
  --bpo-cyandim: rgba(3,180,215,.12);
  --bpo-blue:    #0D77B6;
  --bpo-navy:    #2E4270;
  --bpo-navydk:  #1C2B4A;
  --bpo-navyxd:  #0D1B30;
  --bpo-green:   #0DD688;
  --bpo-greenlt: #E0FBF2;
  --bpo-red:     #E50047;
  --bpo-mist:    #F0FAFD;
  --bpo-border:  #D1E9F5;
  --bpo-g50:     #F9FAFB;
  --bpo-g500:    #6B7280;
  --bpo-g700:    #374151;
  --bpo-ink:     #111827;
  --bpo-white:   #ffffff;
  --bpo-font:    'Urbanist', sans-serif;
  --bpo-mono:    'DM Mono', monospace;
  --bpo-rmd:     10px;
  --bpo-rlg:     14px;
  --bpo-rxl:     20px;
  --bpo-shcard:  0 2px 12px rgba(0,0,0,.07);
  --bpo-shhov:   0 8px 28px rgba(0,0,0,.12);
  --bpo-shcyan:  0 4px 20px rgba(3,180,215,.28);
  --bpo-maxw:    1160px;
  --bpo-px:      40px;
}

/* ── BOX-SIZING ─────────────────────────────────────── */
.bpo-breadcrumb *, .bpo-breadcrumb *::before, .bpo-breadcrumb *::after,
.bpo-hero *, .bpo-hero *::before, .bpo-hero *::after,
.bpo-stats-bar *, .bpo-stats-bar *::before, .bpo-stats-bar *::after,
.bpo-section *, .bpo-section *::before, .bpo-section *::after,
.bpo-trust-strip *, .bpo-trust-strip *::before, .bpo-trust-strip *::after, {
  box-sizing: border-box;
}

/* ── RESETS ─────────────────────────────────────────── */
.bpo-breadcrumb a, .bpo-hero a, .bpo-section a,
.bpo-trust-strip a, { text-decoration: none; color: inherit; }
.bpo-hero button, .bpo-section button {
  font-family: var(--bpo-font); cursor: pointer; border: none; outline: none;
}

/* ── LAYOUT ─────────────────────────────────────────── */
.bpo-wrap {
  max-width: var(--bpo-maxw);
  margin: 0 auto;
  padding: 0 var(--bpo-px);
  width: 100%;
}
.bpo-section { padding: 52px 0 !important; }
.bpo-alt     { background: var(--bpo-mist) !important; }

/* ── REVEAL ─────────────────────────────────────────── */
.bpo-reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .6s ease; }
.bpo-reveal.bpo-vis { opacity: 1 !important; transform: translateY(0) !important; }

/* ════════════════════════════════════
   BREADCRUMB
════════════════════════════════════ */
.bpo-breadcrumb {
  background: linear-gradient(135deg, #1a2f5a 0%, #0D77B6 100%);
  padding: 14px 0 !important;
}
.bpo-breadcrumb .bpo-wrap { display: flex !important; align-items: center; gap: 8px; font-size: 12px !important; }
.bpo-breadcrumb a    { color: rgba(255,255,255,.5) !important; font-weight: 600 !important; transition: color .15s; font-family: var(--bpo-font) !important; }
.bpo-breadcrumb a:hover { color: #fff !important; }
.bpo-sep { color: rgba(255,255,255,.25) !important; }
.bpo-cur { color: rgba(255,255,255,.8) !important; font-weight: 700 !important; font-family: var(--bpo-font) !important; }

/* ════════════════════════════════════
   HERO
════════════════════════════════════ */
.bpo-hero {
  background: linear-gradient(135deg, #1a2f5a 0%, #0D77B6 100%) !important;
  padding: 44px 0 60px !important;
  position: relative !important;
  overflow: hidden;
}
.bpo-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(3,180,215,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(3,180,215,.05) 1px, transparent 1px);
  background-size: 52px 52px; pointer-events: none;
}
.bpo-hero::after {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(3,180,215,.14) 0%, transparent 62%);
  pointer-events: none;
}
.bpo-hero .bpo-wrap { position: relative !important; z-index: 1 !important; }

.bpo-hero-layout {
  display: grid !important;
  grid-template-columns: 1fr 340px !important;
  gap: 52px !important;
  align-items: center !important;
}
.bpo-hero-pill {
  display: inline-flex !important; align-items: center; gap: 6px;
  background: rgba(3,180,215,.2) !important; border: 1px solid rgba(3,180,215,.45) !important;
  color: #03B4D7 !important; font-size: 10px !important; font-weight: 800 !important;
  letter-spacing: .1em; text-transform: uppercase; padding: 5px 14px !important;
  border-radius: 30px !important; margin-bottom: 18px !important;
  font-family: var(--bpo-font) !important;
}
.bpo-hero-h1 {
  font-size: 44px !important; font-weight: 900 !important; color: #fff !important;
  line-height: 1.07 !important; letter-spacing: -.55px; margin-bottom: 14px !important;
  font-family: var(--bpo-font) !important;
}
.bpo-hero-h1 span { color: #03B4D7 !important; }
.bpo-hero-desc {
  font-size: 14px !important; color: rgba(255,255,255,.7) !important;
  line-height: 1.8 !important; max-width: 520px; margin-bottom: 22px !important;
  font-family: var(--bpo-font) !important;
}
.bpo-bullets { display: flex !important; flex-wrap: wrap; gap: 10px 22px !important; margin-bottom: 26px !important; }
.bpo-bullets span { font-size: 13px !important; font-weight: 600 !important; color: rgba(255,255,255,.85) !important; display: flex !important; align-items: center; gap: 5px; font-family: var(--bpo-font) !important; }
.bpo-chk { color: #0DD688 !important; font-weight: 900 !important; font-style: normal !important; }

.bpo-btn-row { display: flex !important; flex-wrap: wrap; gap: 10px !important; }
.bpo-btn-primary {
  background: #03B4D7 !important; color: #fff !important;
  padding: 12px 22px !important; border-radius: var(--bpo-rmd) !important;
  font-size: 13px !important; font-weight: 800 !important;
  box-shadow: var(--bpo-shcyan); transition: background .2s, transform .2s;
  display: inline-block !important; text-decoration: none !important;
  border: none !important; cursor: pointer; font-family: var(--bpo-font) !important;
}
.bpo-btn-primary:hover { background: #0D77B6 !important; transform: translateY(-1px); }
.bpo-btn-ghost {
  background: transparent !important; border: 1.5px solid rgba(255,255,255,.35) !important;
  color: #fff !important; padding: 11px 18px !important;
  border-radius: var(--bpo-rmd) !important; font-size: 13px !important; font-weight: 700 !important;
  transition: .2s; display: inline-block !important; text-decoration: none !important;
  font-family: var(--bpo-font) !important;
}
.bpo-btn-ghost:hover { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.55) !important; }

/* Hero estimator card */
.bpo-hero-card {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: var(--bpo-rxl) !important; padding: 22px !important;
  backdrop-filter: blur(10px);
}
.bpo-hc-label {
  font-size: 11px !important; font-weight: 800 !important; color: #03B4D7 !important;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px !important;
  font-family: var(--bpo-font) !important; display: block !important;
}
.bpo-hc-field { margin-bottom: 10px !important; }
.bpo-hc-field label {
  display: block !important; font-size: 10px !important; font-weight: 700 !important;
  color: #f8f9fd !important; text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 4px !important; font-family: var(--bpo-font) !important;
}
.bpo-hc-input {
  width: 100% !important; padding: 9px 12px !important;
  background: rgba(255,255,255,.08) !important; border: 1.5px solid rgba(255,255,255,.13) !important;
  border-radius: 8px !important; font-family: var(--bpo-font) !important;
  font-size: 14px !important; font-weight: 600 !important;
  color: #000000 !important; outline: none; transition: .15s;
  -webkit-appearance: none; appearance: none;
}
.bpo-hc-input:focus { border-color: #03B4D7 !important; background: rgba(3,180,215,.1) !important; }
.bpo-hc-input option { background:rgb(255, 255, 255); }
.bpo-hc-result {
  background: rgba(13,214,136,.08) !important; border: 1px solid rgba(13,214,136,.2) !important;
  border-radius: 10px !important; padding: 12px !important; margin: 12px 0 !important;
}
.bpo-hcr-item { display: flex !important; align-items: center; justify-content: space-between; margin-bottom: 8px !important; }
.bpo-hcr-item:last-child { margin-bottom: 0 !important; }
.bpo-hcr-save { border-top: 1px solid rgba(13,214,136,.2) !important; padding-top: 8px !important; margin-top: 4px !important; }
.bpo-hcr-lbl { font-size: 10px !important; font-weight: 700 !important; color: #f8f9fd !important; text-transform: uppercase; letter-spacing: .07em; font-family: var(--bpo-font) !important; }
.bpo-hcr-val { font-family: var(--bpo-mono) !important; font-size: 15px !important; color: #f8f9fd !important; }
.bpo-hcr-strike { color: #f8f9fd !important; text-decoration: line-through !important; }
.bpo-hcr-green  { color: #0DD688 !important; }
.bpo-hc-cta {
  display: block !important; width: 100% !important; padding: 10px !important;
  background: #03B4D7 !important; color: #fff !important; border-radius: 8px !important;
  font-size: 12px !important; font-weight: 800 !important; text-align: center !important;
  text-decoration: none !important; transition: background .2s;
  box-shadow: var(--bpo-shcyan); font-family: var(--bpo-font) !important;
}
.bpo-hc-cta:hover { background: #0D77B6 !important; }

/* ════════════════════════════════════
   STATS BAR
════════════════════════════════════ */
.bpo-stats-bar { background: #03B4D7 !important; }
.bpo-stats-inner { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; }
.bpo-stat-item { padding: 20px 14px !important; text-align: center; border-right: 1px solid rgba(255,255,255,.2); }
.bpo-stat-item:last-child { border-right: none; }
.bpo-stat-num { font-size: 24px !important; font-weight: 900 !important; color: #fff !important; line-height: 1 !important; margin-bottom: 3px !important; display: block !important; font-family: var(--bpo-font) !important; }
.bpo-stat-lbl { font-size: 10px !important; color: rgba(255,255,255,.82) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .05em; font-family: var(--bpo-font) !important; display: block !important; }

/* ════════════════════════════════════
   SECTION HEADINGS
════════════════════════════════════ */
.bpo-eyebrow {
  font-size: 18px !important; font-weight: 800 !important; color: #03B4D7 !important;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px !important;
  font-family: var(--bpo-font) !important; display: block !important;
}
.bpo-sec-h2 {
  font-size: 30px !important; font-weight: 900 !important; color: #2E4270 !important;
  line-height: 1.1 !important; letter-spacing: -.3px; margin-bottom: 10px !important;
  font-family: var(--bpo-font) !important;
}
.bpo-sec-h2 span { color: #03B4D7 !important; }
.bpo-sec-sub {
  font-size: 14px !important; color: #6B7280 !important; line-height: 1.75 !important;
  max-width: 560px; font-family: var(--bpo-font) !important;
}
.bpo-sec-head { margin-bottom: 30px !important; }
.bpo-center   { text-align: center !important; }
.bpo-center .bpo-sec-sub { margin: 0 auto !important; }

/* ════════════════════════════════════
   SOLUTION CARDS
════════════════════════════════════ */
.bpo-sol-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
.bpo-sol-card {
  background: #fff !important; border: 1.5px solid #D1E9F5 !important;
  border-radius: var(--bpo-rlg) !important; padding: 20px !important;
  transition: border-color .18s, transform .2s, box-shadow .2s;
  position: relative !important; overflow: hidden;
}
.bpo-sol-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #03B4D7, #0D77B6);
  transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.bpo-sol-card:hover { border-color: #03B4D7 !important; transform: translateY(-3px); box-shadow: var(--bpo-shhov); }
.bpo-sol-card:hover::before { transform: scaleX(1); }
.bpo-sc-icon  { font-size: 26px !important; margin-bottom: 10px !important; display: block !important; }
.bpo-sc-title { font-size: 14px !important; font-weight: 800 !important; color: #2E4270 !important; margin-bottom: 7px !important; font-family: var(--bpo-font) !important; display: block !important; }
.bpo-sc-desc  { font-size: 12px !important; color: #374151 !important; line-height: 1.7 !important; margin-bottom: 12px !important; font-family: var(--bpo-font) !important; display: block !important; }
.bpo-sc-link  { font-size: 11px !important; font-weight: 800 !important; color: #03B4D7 !important; display: inline-flex !important; align-items: center; gap: 4px; transition: gap .15s; font-family: var(--bpo-font) !important; }
.bpo-sc-link:hover { gap: 8px !important; }

/* ════════════════════════════════════
   PRODUCT CARDS
════════════════════════════════════ */
.bpo-prod-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; }
.bpo-prod-card { background: #fff !important; border: 1.5px solid #D1E9F5 !important; border-radius: var(--bpo-rlg) !important; overflow: hidden; transition: .22s; align-self: start !important; }
.bpo-prod-card:hover { box-shadow: var(--bpo-shhov); transform: translateY(-3px); border-color: transparent !important; }
.bpo-pc-img {
  background: linear-gradient(135deg, #f0f9ff, #E0F7FC);
  height: 100px !important; display: flex !important; align-items: center !important;
  justify-content: center !important; font-size: 36px !important; position: relative !important;
}
.bpo-badge { position: absolute; top: 8px; left: 8px; font-size: 9px !important; font-weight: 800 !important; padding: 2px 7px !important; border-radius: 4px !important; color: #fff !important; text-transform: uppercase; font-family: var(--bpo-font) !important; }
.bpo-badge-cyan  { background: #03B4D7 !important; }
.bpo-badge-blue  { background: #0D77B6 !important; }
.bpo-badge-navy  { background: #2E4270 !important; }
.bpo-pc-body { padding: 14px !important; }
.bpo-pc-name { font-size: 13px !important; font-weight: 800 !important; color: #2E4270 !important; margin-bottom: 3px !important; font-family: var(--bpo-font) !important; display: block !important; }
.bpo-pc-spec { font-size: 11px !important; color: #6B7280 !important; margin-bottom: 8px !important; font-family: var(--bpo-mono) !important; display: block !important; }
.bpo-pc-price { font-size: 18px !important; font-weight: 900 !important; color: #0D77B6 !important; margin-bottom: 10px !important; display: block !important; font-family: var(--bpo-font) !important; }
.bpo-from { font-size: 11px !important; font-weight: 600 !important; color: #6B7280 !important; vertical-align: middle; margin-right: 2px; }
.bpo-btn-add {
  display: block !important; width: 100% !important; padding: 8px !important;
  background: #03B4D7 !important; color: #fff !important; border-radius: 7px !important;
  font-size: 12px !important; font-weight: 800 !important; text-align: center !important;
  text-decoration: none !important; transition: background .15s;
  font-family: var(--bpo-font) !important; border: none !important; cursor: pointer;
}
.bpo-btn-add:hover { background: #0D77B6 !important; }
.bpo-prod-more { text-align: center !important; margin-top: 28px !important; }

/* ════════════════════════════════════
   CASE CARDS
════════════════════════════════════ */
.bpo-case-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; }
.bpo-case-card { background: #fff !important; border: 1.5px solid #D1E9F5 !important; border-radius: var(--bpo-rxl) !important; overflow: hidden; transition: .22s; }
.bpo-case-card:hover { box-shadow: var(--bpo-shhov); transform: translateY(-4px); border-color: transparent !important; }
.bpo-cc-head { background: linear-gradient(135deg, #1C2B4A, #0D77B6) !important; padding: 20px !important; position: relative !important; overflow: hidden; }
.bpo-cc-head::after { content: ''; position: absolute; top: -30px; right: -30px; width: 90px; height: 90px; background: radial-gradient(circle, rgba(3,180,215,.2), transparent); }
.bpo-cc-co { font-size: 11px !important; font-weight: 700 !important; color: rgba(255,255,255,.6) !important; margin-bottom: 4px !important; font-family: var(--bpo-font) !important; display: block !important; }
.bpo-cc-tags { display: flex !important; gap: 5px; flex-wrap: wrap; margin-bottom: 10px !important; }
.bpo-cc-tag { font-size: 9px !important; font-weight: 700 !important; padding: 2px 7px !important; border-radius: 4px !important; background: rgba(255,255,255,.12) !important; color: rgba(255,255,255,.7) !important; font-family: var(--bpo-font) !important; }
.bpo-cc-stat { font-family: var(--bpo-mono) !important; font-size: 36px !important; color: #fff !important; font-weight: 500 !important; line-height: 1 !important; margin-bottom: 3px !important; display: block !important; }
.bpo-cc-stat-lbl { font-size: 11px !important; color: rgba(255,255,255,.55) !important; font-weight: 600 !important; font-family: var(--bpo-font) !important; display: block !important; }
.bpo-cc-body { padding: 16px 18px 18px !important; }
.bpo-cc-title { font-size: 13px !important; font-weight: 800 !important; color: #2E4270 !important; margin-bottom: 8px !important; line-height: 1.45 !important; font-family: var(--bpo-font) !important; display: block !important; }
.bpo-cc-outcome { font-size: 11px !important; color: #374151 !important; background: #E0FBF2 !important; border-left: 3px solid #0DD688 !important; padding: 7px 10px !important; border-radius: 0 7px 7px 0 !important; margin-bottom: 8px !important; line-height: 1.6 !important; font-family: var(--bpo-font) !important; display: block !important; }
.bpo-cc-quote { font-size: 12px !important; color: #6B7280 !important; font-style: italic; border-left: 2px solid #03B4D7 !important; padding: 7px 10px !important; border-radius: 0 7px 7px 0 !important; margin-bottom: 10px !important; line-height: 1.65 !important; background: #F9FAFB !important; font-family: var(--bpo-font) !important; display: block !important; }
.bpo-cc-link { font-size: 11px !important; font-weight: 800 !important; color: #03B4D7 !important; display: inline-flex !important; align-items: center; gap: 4px; transition: gap .15s; font-family: var(--bpo-font) !important; text-decoration: none !important; }
.bpo-cc-link:hover { gap: 8px !important; }

/* ════════════════════════════════════
   TRUST STRIP
════════════════════════════════════ */
.bpo-trust-strip { background: #F9FAFB !important; border-top: 1px solid #D1E9F5 !important; border-bottom: 1px solid #D1E9F5 !important; padding: 22px 0 !important; }
.bpo-trust-inner { display: flex !important; align-items: center; justify-content: center; flex-wrap: wrap; gap: 24px !important; }
.bpo-ti { display: flex !important; align-items: center; gap: 10px !important; }
.bpo-ti-icon  { font-size: 20px !important; flex-shrink: 0; }
.bpo-ti-title { font-size: 13px !important; font-weight: 800 !important; color: #2E4270 !important; font-family: var(--bpo-font) !important; display: block !important; }
.bpo-ti-sub   { font-size: 11px !important; color: #6B7280 !important; font-family: var(--bpo-font) !important; display: block !important; }
.bpo-ti-sep   { width: 1px !important; height: 32px !important; background: #D1E9F5; flex-shrink: 0; }

/* ════════════════════════════════════
   FAQ
════════════════════════════════════ */
.bpo-faq-wrap { max-width: 760px; margin: 0 auto !important; }
.bpo-faq-list { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.bpo-faq-item { background: #fff !important; border: 1.5px solid #D1E9F5 !important; border-radius: var(--bpo-rlg) !important; overflow: hidden; }
.bpo-faq-q {
  padding: 14px 18px !important; font-size: 14px !important; font-weight: 700 !important;
  color: #2E4270 !important; cursor: pointer; display: flex !important; align-items: center;
  justify-content: space-between; transition: background .15s;
  font-family: var(--bpo-font) !important; background: none !important;
  border: none !important; width: 100% !important; text-align: left !important;
}
.bpo-faq-q:hover { background: #E0F7FC !important; }
.bpo-faq-arr { font-size: 18px !important; color: #03B4D7 !important; font-weight: 800 !important; transition: transform .25s !important; flex-shrink: 0; margin-left: 12px; }
.bpo-faq-item.open .bpo-faq-arr { transform: rotate(45deg) !important; }
.bpo-faq-a { max-height: 0 !important; overflow: hidden; transition: max-height .35s ease; }
.bpo-faq-item.open .bpo-faq-a { max-height: 400px !important; }
.bpo-faq-inner { padding: 0 18px 14px !important; padding-top: 12px !important; font-size: 13px !important; color: #374151 !important; line-height: 1.8 !important; border-top: 1px solid #D1E9F5; font-family: var(--bpo-font) !important; }

/* ════════════════════════════════════
   INDUSTRIES GRID
════════════════════════════════════ */
.bpo-ind-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; }
.bpo-ind-card { display: flex !important; align-items: center; gap: 10px !important; padding: 14px !important; border-radius: var(--bpo-rlg) !important; background: #fff !important; border: 1.5px solid #D1E9F5 !important; cursor: pointer; transition: .18s; }
.bpo-ind-card:hover { border-color: #03B4D7 !important; background: #E0F7FC !important; }
.bpo-ind-ic   { font-size: 20px !important; flex-shrink: 0; }
.bpo-ind-name { font-size: 13px !important; font-weight: 800 !important; color: #2E4270 !important; font-family: var(--bpo-font) !important; display: block !important; }
.bpo-ind-sub  { font-size: 11px !important; color: #6B7280 !important; margin-top: 2px !important; font-family: var(--bpo-font) !important; display: block !important; }

/* ════════════════════════════════════
   FINAL CTA
════════════════════════════════════ */
.bpo-cta-btns { display: flex !important; flex-wrap: wrap; gap: 10px !important; justify-content: center; margin-bottom: 16px !important; }
.bpo-btn-cta-w {
  background: #fff !important; color: #2E4270 !important; padding: 13px 28px !important;
  border-radius: var(--bpo-rmd) !important; font-size: 14px !important; font-weight: 800 !important;
  transition: .2s; box-shadow: 0 4px 18px rgba(0,0,0,.2);
  display: inline-block !important; text-decoration: none !important; border: none !important;
  font-family: var(--bpo-font) !important;
}
.bpo-btn-cta-w:hover { background: #03B4D7 !important; color: #fff !important; transform: translateY(-2px); }
.bpo-btn-cta-o {
  background: transparent !important; border: 2px solid rgba(255,255,255,.25) !important;
  color: #fff !important; padding: 12px 22px !important;
  border-radius: var(--bpo-rmd) !important; font-size: 14px !important; font-weight: 700 !important;
  transition: .2s; display: inline-block !important; text-decoration: none !important;
  font-family: var(--bpo-font) !important;
}
.bpo-btn-cta-o:hover { border-color: rgba(255,255,255,.55) !important; background: rgba(255,255,255,.07) !important; }
.bpo-cta-trust { display: flex !important; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px !important; }
.bpo-ct-item   { display: flex !important; align-items: center; gap: 5px !important; font-size: 11px !important; color: rgba(255,255,255,.32) !important; font-weight: 600 !important; font-family: var(--bpo-font) !important; }
.bpo-ct-dot    { width: 4px !important; height: 4px !important; border-radius: 50% !important; background: #03B4D7 !important; flex-shrink: 0; display: inline-block !important; }

/* ════════════════════════════════════
   RESPONSIVE ≤ 1024px
════════════════════════════════════ */
@media (max-width: 1024px) {
  :root { --bpo-px: 28px; }
  .bpo-hero-layout { grid-template-columns: 1fr !important; gap: 28px !important; }
  .bpo-hero-card   { max-width: 480px !important; }
  .bpo-hero-h1     { font-size: 36px !important; }
  .bpo-sec-h2      { font-size: 26px !important; }
  .bpo-sol-grid    { grid-template-columns: repeat(2, 1fr) !important; }
  .bpo-prod-grid   { grid-template-columns: repeat(2, 1fr) !important; }
  .bpo-case-grid   { grid-template-columns: repeat(2, 1fr) !important; }
  .bpo-ind-grid    { grid-template-columns: repeat(2, 1fr) !important; }
  .bpo-trust-inner { gap: 18px !important; }
}

/* ════════════════════════════════════
   RESPONSIVE ≤ 768px
════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --bpo-px: 18px; }
  .bpo-hero        { padding: 32px 0 44px !important; }
  .bpo-hero-h1     { font-size: 26px !important; }
  .bpo-hero-desc   { font-size: 13px !important; }
  .bpo-stats-inner { grid-template-columns: repeat(2, 1fr) !important; }
  .bpo-stats-inner .bpo-stat-item:nth-child(2) { border-right: none; }
  .bpo-stats-inner .bpo-stat-item:nth-child(3) { border-top: 1px solid rgba(255,255,255,.2); }
  .bpo-section     { padding: 40px 0 !important; }
  .bpo-sec-h2      { font-size: 22px !important; }
  .bpo-sol-grid    { grid-template-columns: 1fr !important; }
  .bpo-prod-grid   { grid-template-columns: repeat(2, 1fr) !important; }
  .bpo-case-grid   { grid-template-columns: 1fr !important; }
  .bpo-ind-grid    { grid-template-columns: repeat(2, 1fr) !important; }
  .bpo-ti-sep      { display: none !important; }
  .bpo-cta-btns    { flex-direction: column !important; align-items: stretch !important; }
  .bpo-btn-cta-w,
  .bpo-btn-cta-o   { width: 100% !important; text-align: center !important; display: block !important; }
}

/* ════════════════════════════════════
   RESPONSIVE ≤ 480px
════════════════════════════════════ */
@media (max-width: 480px) {
  :root { --bpo-px: 14px; }
  .bpo-hero-h1   { font-size: 22px !important; }
  .bpo-sec-h2    { font-size: 20px !important; }
  .bpo-prod-grid { grid-template-columns: 1fr !important; }
  .bpo-ind-grid  { grid-template-columns: 1fr !important; }
  .bpo-case-grid { grid-template-columns: 1fr !important; }
}
/* ════════════════════════════════════
   End of B2B EnterPrise BPO CSS
════════════════════════════════════ */

/* ════════════════════════════════════
   B2B Industry Private Company 
════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   NEWJAISA — STARTUPS & PRIVATE ENTERPRISE PAGE
   File: assets/component-startups.css
   Prefix: ent- · No topbar · No breadcrumb · No footer · No Final CTA
   Unique: purple (#7C3AED) / violet (#8B5CF6) accent
   Responsive: 480px · 768px · 1024px · 1280px+
═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   NEWJAISA — STARTUPS & PRIVATE ENTERPRISE PAGE
   File: assets/component-startups.css
   Prefix: ent- · No topbar · No breadcrumb · No footer · No Final CTA
   Unique: purple (#7C3AED) / violet (#8B5CF6) accent
   Responsive: 480px · 768px · 1024px · 1280px+
═══════════════════════════════════════════════════════ */

:root {
  --ent-cyan:      #03B4D7;
  --ent-cyanlt:    #E0F7FC;
  --ent-blue:      #0D77B6;
  --ent-navy:      #2E4270;
  --ent-navydk:    #1C2B4A;
  --ent-navyxd:    #0D1B30;
  --ent-green:     #0DD688;
  --ent-greenlt:   #E0FBF2;
  --ent-purple:    #7C3AED;
  --ent-purpledk:  #5B21B6;
  --ent-purplelt:  #EDE9FE;
  --ent-violet:    #8B5CF6;
  --ent-mist:      #F0FAFD;
  --ent-border:    #D1E9F5;
  --ent-g50:       #F9FAFB;
  --ent-g500:      #6B7280;
  --ent-g700:      #374151;
  --ent-white:     #ffffff;
  --ent-font:      'Urbanist', sans-serif;
  --ent-mono:      'DM Mono', monospace;
  --ent-rmd:       10px;
  --ent-rlg:       14px;
  --ent-rxl:       20px;
  --ent-shhov:     0 8px 28px rgba(0,0,0,.12);
  --ent-shcyan:    0 4px 20px rgba(3,180,215,.28);
  --ent-shpurple:  0 4px 20px rgba(124,58,237,.3);
  --ent-maxw:      1160px;
  --ent-px:        40px;
}

/* ── BOX-SIZING ─────────────────────────────────────── */
.ent-hero *, .ent-hero *::before, .ent-hero *::after,
.ent-stats-bar *, .ent-stats-bar *::before, .ent-stats-bar *::after,
.ent-section *, .ent-section *::before, .ent-section *::after,
.ent-trust-strip *, .ent-trust-strip *::before, .ent-trust-strip *::after { box-sizing: border-box; }
.ent-hero a, .ent-section a, .ent-trust-strip a { text-decoration: none; color: inherit; }
.ent-hero button, .ent-section button { font-family: var(--ent-font); cursor: pointer; border: none; outline: none; background: none; }

/* ── LAYOUT ─────────────────────────────────────────── */
.ent-wrap    { max-width: var(--ent-maxw); margin: 0 auto; padding: 0 var(--ent-px); width: 100%; }
.ent-section { padding: 52px 0 !important; }
.ent-alt     { background: var(--ent-mist) !important; }

/* ── REVEAL ─────────────────────────────────────────── */
.ent-reveal { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .55s ease; }
.ent-reveal.ent-vis { opacity: 1 !important; transform: translateY(0) !important; }

/* ════════════════════════════════════
   HERO (purple radial glow)
════════════════════════════════════ */
.ent-hero { background: linear-gradient(135deg,#1a2f5a 0%,#0D77B6 100%) !important; padding: 44px 0 60px !important; position: relative !important; overflow: hidden; }
.ent-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(3,180,215,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(3,180,215,.05) 1px,transparent 1px); background-size: 52px 52px; pointer-events: none; }
.ent-hero::after  { content: ''; position: absolute; top: -60px; right: -60px; width: 520px; height: 520px; background: radial-gradient(circle,rgba(124,58,237,.15) 0%,transparent 62%); pointer-events: none; }
.ent-hero .ent-wrap { position: relative !important; z-index: 1 !important; }

.ent-hero-layout { display: grid !important; grid-template-columns: 1fr 370px !important; gap: 52px !important; align-items: center !important; }
.ent-hero-pill { display: inline-flex !important; align-items: center; gap: 6px; background: rgba(124,58,237,.2) !important; border: 1px solid rgba(124,58,237,.45) !important; color: #f8f9fd !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .1em; text-transform: uppercase; padding: 5px 14px !important; border-radius: 30px !important; margin-bottom: 18px !important; font-family: var(--ent-font) !important; }
.ent-h1 { font-size: 42px !important; font-weight: 900 !important; color: #fff !important; line-height: 1.07 !important; letter-spacing: -.55px; margin: 0 0 14px !important; font-family: var(--ent-font) !important; }
.ent-h1 span { color: #03B4D7 !important; }
.ent-hero-desc { font-size: 14px !important; color: rgba(255,255,255,.7) !important; line-height: 1.8 !important; max-width: 520px; margin: 0 0 22px !important; font-family: var(--ent-font) !important; }
.ent-bullets { display: flex !important; flex-wrap: wrap; gap: 10px 22px !important; margin: 0 0 26px !important; }
.ent-bullets span { font-size: 13px !important; font-weight: 600 !important; color: rgba(255,255,255,.85) !important; display: flex !important; align-items: center; gap: 5px; font-family: var(--ent-font) !important; }
.ent-chk { color: #0DD688 !important; font-weight: 900 !important; font-style: normal !important; }
.ent-btn-row { display: flex !important; flex-wrap: wrap; gap: 10px !important; }
.ent-btn-primary { background: #03B4D7 !important; color: #fff !important; padding: 12px 22px !important; border-radius: var(--ent-rmd) !important; font-size: 13px !important; font-weight: 800 !important; box-shadow: var(--ent-shcyan); transition: background .2s, transform .2s; display: inline-block !important; text-decoration: none !important; border: none !important; cursor: pointer; font-family: var(--ent-font) !important; }
.ent-btn-primary:hover { background: #0D77B6 !important; transform: translateY(-1px); }
.ent-btn-ghost { background: transparent !important; border: 1.5px solid rgba(255,255,255,.35) !important; color: #fff !important; padding: 11px 18px !important; border-radius: var(--ent-rmd) !important; font-size: 13px !important; font-weight: 700 !important; transition: background .2s; cursor: pointer; font-family: var(--ent-font) !important; }
.ent-btn-ghost:hover { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.55) !important; }

/* ── RUNWAY CARD ─────────────────────────────────── */
.ent-runway-card { background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.13) !important; border-radius: var(--ent-rxl) !important; padding: 22px !important; backdrop-filter: blur(10px); }
.ent-rc-title { font-size: 11px !important; font-weight: 800 !important; color: #f8f9fd !important; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px !important; display: flex !important; align-items: center; gap: 8px; font-family: var(--ent-font) !important; }
.ent-rc-title::before { content: ''; width: 16px; height: 2px; background: #8B5CF6; flex-shrink: 0; }
.ent-rc-sub { display: block !important; font-size: 11px !important; color: rgba(255,255,255,.38) !important; margin-bottom: 12px !important; font-family: var(--ent-font) !important; }

.ent-stage-wrap { margin-bottom: 12px !important; }
.ent-stage-lbl  { display: block !important; font-size: 10px !important; font-weight: 700 !important; color: rgba(255,255,255,.4) !important; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 7px !important; font-family: var(--ent-font) !important; }
.ent-stage-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
.ent-stage-full { grid-column: 1 / -1 !important; }
.ent-stage-btn  { padding: 9px 6px !important; border-radius: 7px !important; border: 1.5px solid rgba(255,255,255,.12) !important; background: rgba(255,255,255,.05) !important; font-size: 11px !important; font-weight: 700 !important; color: rgba(255,255,255,.5) !important; cursor: pointer; text-align: center; transition: border-color .15s, background .15s, color .15s; font-family: var(--ent-font) !important; }
.ent-stage-btn:hover { border-color: rgba(124,58,237,.5) !important; color: #8B5CF6 !important; }
.ent-stage-btn.ent-on { border-color: #8B5CF6 !important; background: rgba(124,58,237,.15) !important; color: #8B5CF6 !important; }

.ent-rc-row { margin-bottom: 10px !important; }
.ent-rc-row label { display: block !important; font-size: 10px !important; font-weight: 700 !important; color: rgba(255,255,255,.4) !important; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px !important; font-family: var(--ent-font) !important; }
.ent-rc-input { width: 100% !important; padding: 9px 12px !important; background: rgba(255,255,255,.08) !important; border: 1.5px solid rgba(255,255,255,.13) !important; border-radius: 8px !important; font-family: var(--ent-font) !important; font-size: 13px !important; font-weight: 600 !important; color: #fff !important; outline: none; transition: .15s; -webkit-appearance: none; appearance: none; }
.ent-rc-input:focus { border-color: #8B5CF6 !important; background: rgba(124,58,237,.08) !important; box-shadow: 0 0 0 3px rgba(124,58,237,.15); }
.ent-rc-input option { background: #1C2B4A; }

.ent-rc-result { background: rgba(124,58,237,.1) !important; border: 1px solid rgba(124,58,237,.25) !important; border-radius: 10px !important; padding: 12px !important; margin: 12px 0 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.ent-rcr-item { }
.ent-rcr-lbl  { display: block !important; font-size: 9px !important; font-weight: 700 !important; color: rgba(255,255,255,.32) !important; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px !important; font-family: var(--ent-font) !important; }
.ent-rcr-val  { display: block !important; font-family: var(--ent-mono) !important; font-size: 16px !important; color: #fff !important; font-weight: 500 !important; }
.ent-rcr-new  { color: rgba(255,255,255,.35) !important; text-decoration: line-through; }
.ent-purple   { color: #f8f9fd !important; font-size: 18px !important; }
.ent-green    { color: #0DD688 !important; }
.ent-rcr-bottom { grid-column: 1 / -1 !important; border-top: 1px solid rgba(124,58,237,.2) !important; padding-top: 8px !important; margin-top: 2px !important; }
.ent-rcr-disc { display: block !important; font-size: 11px !important; font-weight: 700 !important; color: #0DD688 !important; margin-bottom: 10px !important; font-family: var(--ent-mono) !important; }
.ent-rc-cta   { display: block !important; width: 100% !important; padding: 10px !important; background: #7C3AED !important; color: #fff !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 800 !important; text-align: center !important; text-decoration: none !important; transition: background .2s; box-shadow: var(--ent-shpurple); font-family: var(--ent-font) !important; border: none !important; cursor: pointer; }
.ent-rc-cta:hover { background: #5B21B6 !important; }

/* ════════════════════════════════════
   STATS BAR
════════════════════════════════════ */
.ent-stats-bar { background: #03B4D7 !important; }
.ent-stats-inner { display: grid !important; grid-template-columns: repeat(4,1fr) !important; }
.ent-stat-item { padding: 20px 14px !important; text-align: center; border-right: 1px solid rgba(255,255,255,.2); }
.ent-stat-item:last-child { border-right: none; }
.ent-stat-num { display: block !important; font-size: 22px !important; font-weight: 900 !important; color: #fff !important; line-height: 1 !important; margin-bottom: 3px !important; font-family: var(--ent-mono) !important; }
.ent-stat-lbl { display: block !important; font-size: 10px !important; color: rgba(255,255,255,.82) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .05em; font-family: var(--ent-font) !important; }

/* ════════════════════════════════════
   SECTION HEADINGS
════════════════════════════════════ */
.ent-eyebrow        { display: block !important; font-size: 20px !important; font-weight: 800 !important; color: #03B4D7 !important; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px !important; font-family: var(--ent-font) !important; }
.ent-eyebrow-purple { color: #8B5CF6 !important; }
.ent-sec-h2         { font-size: 30px !important; font-weight: 900 !important; color: #2E4270 !important; line-height: 1.1 !important; letter-spacing: -.3px; margin: 0 0 10px !important; font-family: var(--ent-font) !important; }
.ent-sec-h2 span    { color: #03B4D7 !important; }
.ent-sec-h2 .ent-purple { color: #f8f9fd !important; }
.ent-sec-sub        { font-size: 14px !important; color: #6B7280 !important; line-height: 1.75 !important; max-width: 560px; font-family: var(--ent-font) !important; }
.ent-sec-head       { margin-bottom: 30px !important; }
.ent-center         { text-align: center !important; }
.ent-center .ent-sec-sub { margin: 0 auto !important; }

/* ════════════════════════════════════
   STAGE JOURNEY BANNER (purple dark)
════════════════════════════════════ */
.ent-stage-journey { background: linear-gradient(135deg,#1a1535,#22104a) !important; border: 1.5px solid rgba(124,58,237,.25) !important; border-radius: var(--ent-rxl) !important; padding: 24px 28px !important; margin-bottom: 34px !important; }
.ent-sj-title { display: block !important; font-size: 15px !important; font-weight: 900 !important; color: #fff !important; margin-bottom: 6px !important; font-family: var(--ent-font) !important; }
.ent-sj-desc  { display: block !important; font-size: 13px !important; color: rgba(255,255,255,.5) !important; line-height: 1.65 !important; margin-bottom: 20px !important; font-family: var(--ent-font) !important; }
.ent-sj-stages { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 0 !important; }
.ent-sj-stage { padding: 14px 10px !important; text-align: center; position: relative; border-right: 1px solid rgba(255,255,255,.07); }
.ent-sj-stage:last-child { border-right: none; }
.ent-sj-icon { display: block !important; font-size: 22px !important; margin-bottom: 8px !important; }
.ent-sj-name { display: block !important; font-size: 12px !important; font-weight: 800 !important; color: #fff !important; margin-bottom: 4px !important; font-family: var(--ent-font) !important; }
.ent-sj-what { display: block !important; font-size: 10px !important; color: #f8f9fd !important; line-height: 1.5 !important; font-family: var(--ent-font) !important; }
.ent-highlight .ent-sj-name { color: #f8f9fd !important; }
.ent-highlight .ent-sj-what { color: #f8f9fd !important; }

/* ════════════════════════════════════
   SOLUTION CARDS (purple top-bar on hover)
════════════════════════════════════ */
.ent-sol-grid { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 16px !important; }
.ent-sol-card { background: #fff !important; border: 1.5px solid #D1E9F5 !important; border-radius: var(--ent-rlg) !important; padding: 20px !important; transition: border-color .18s, transform .2s, box-shadow .2s; position: relative !important; overflow: hidden; display: flex; flex-direction: column; }
.ent-sol-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,#7C3AED,#8B5CF6); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.ent-sol-card:hover { border-color: #7C3AED !important; transform: translateY(-3px); box-shadow: var(--ent-shhov); }
.ent-sol-card:hover::before { transform: scaleX(1); }
.ent-sc-icon  { display: block !important; font-size: 26px !important; margin-bottom: 10px !important; }
.ent-sc-title { display: block !important; font-size: 14px !important; font-weight: 800 !important; color: #2E4270 !important; margin-bottom: 7px !important; font-family: var(--ent-font) !important; }
.ent-sc-desc  { display: block !important; font-size: 12px !important; color: #374151 !important; line-height: 1.7 !important; margin-bottom: 12px !important; flex: 1; font-family: var(--ent-font) !important; }
.ent-sc-tag   { display: inline-block !important; font-size: 10px !important; font-weight: 800 !important; padding: 2px 8px !important; border-radius: 4px !important; font-family: var(--ent-font) !important; }
.ent-tag-cyan   { background: #E0F7FC !important; color: #0D77B6 !important; }
.ent-tag-purple { background: #EDE9FE !important; color: #7C3AED !important; }
.ent-tag-green  { background: #E0FBF2 !important; color: #059669 !important; }

/* ════════════════════════════════════
   STARTER PACKS
════════════════════════════════════ */
.ent-pack-grid { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 18px !important; }
.ent-pack-card { border: 1.5px solid #D1E9F5 !important; border-radius: var(--ent-rxl) !important; overflow: hidden; transition: box-shadow .22s, transform .22s; background: #fff !important; }
.ent-pack-card:hover { box-shadow: var(--ent-shhov); transform: translateY(-3px); }
.ent-pack-featured { border: 2px solid #7C3AED !important; }
.ent-pack-head { background: var(--ent-mist) !important; padding: 20px 22px !important; text-align: center; }
.ent-pack-featured .ent-pack-head { background: #7C3AED !important; }
.ent-pack-name { display: block !important; font-size: 16px !important; font-weight: 900 !important; color: #2E4270 !important; margin-bottom: 4px !important; font-family: var(--ent-font) !important; }
.ent-pack-featured .ent-pack-name { color: #fff !important; }
.ent-pack-sub { display: block !important; font-size: 11px !important; color: #6B7280 !important; font-family: var(--ent-font) !important; }
.ent-pack-featured .ent-pack-sub  { color: rgba(255,255,255,.65) !important; }
.ent-pack-body { padding: 20px 22px !important; }
.ent-pack-what { display: block !important; font-size: 13px !important; font-weight: 700 !important; color: #2E4270 !important; margin-bottom: 12px !important; font-family: var(--ent-font) !important; }
.ent-pack-items { list-style: none !important; display: flex !important; flex-direction: column !important; gap: 8px !important; margin-bottom: 16px !important; padding: 0 !important; }
.ent-pack-items li { font-size: 12px !important; color: #374151 !important; display: flex !important; align-items: center; gap: 7px !important; font-family: var(--ent-font) !important; }
.ent-pk-chk   { color: #7C3AED !important; font-weight: 800 !important; font-size: 13px !important; flex-shrink: 0; }
.ent-pack-price { display: block !important; font-size: 11px !important; font-weight: 700 !important; color: #6B7280 !important; margin-bottom: 12px !important; font-family: var(--ent-font) !important; }
.ent-pk-bold  { font-size: 18px !important; font-weight: 900 !important; color: #2E4270 !important; }
.ent-pack-cta { display: block !important; text-align: center !important; padding: 10px !important; background: #7C3AED !important; color: #fff !important; border-radius: var(--ent-rmd) !important; font-size: 13px !important; font-weight: 800 !important; transition: background .18s; text-decoration: none !important; font-family: var(--ent-font) !important; }
.ent-pack-cta:hover { background: #5B21B6 !important; }

/* ════════════════════════════════════
   PRODUCT CARDS (purple badges + tags)
════════════════════════════════════ */
.ent-prod-grid { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 16px !important; }
.ent-prod-card { background: #fff !important; border: 1.5px solid #D1E9F5 !important; border-radius: var(--ent-rlg) !important; overflow: hidden; transition: .22s; align-self: start !important; }
.ent-prod-card:hover { box-shadow: var(--ent-shhov); transform: translateY(-3px); border-color: transparent !important; }
.ent-pc-img   { background: linear-gradient(135deg,#f5f3ff,#ede9fe); height: 100px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 36px !important; position: relative !important; }
.ent-badge    { position: absolute; top: 8px; left: 8px; font-size: 9px !important; font-weight: 800 !important; padding: 2px 7px !important; border-radius: 4px !important; color: #fff !important; text-transform: uppercase; font-family: var(--ent-font) !important; }
.ent-badge-cyan   { background: #03B4D7 !important; }
.ent-badge-blue   { background: #0D77B6 !important; }
.ent-badge-navy   { background: #2E4270 !important; }
.ent-badge-purple { background: #7C3AED !important; }
.ent-pc-body  { padding: 14px !important; }
.ent-pc-name  { display: block !important; font-size: 13px !important; font-weight: 800 !important; color: #2E4270 !important; margin-bottom: 3px !important; font-family: var(--ent-font) !important; }
.ent-pc-spec  { display: block !important; font-size: 11px !important; color: #6B7280 !important; margin-bottom: 8px !important; font-family: var(--ent-mono) !important; }
.ent-pc-tags  { display: flex !important; gap: 5px; flex-wrap: wrap; margin-bottom: 8px !important; }
.ent-pc-tags span { font-size: 9px !important; font-weight: 800 !important; padding: 2px 6px !important; border-radius: 4px !important; background: #EDE9FE !important; color: #7C3AED !important; font-family: var(--ent-font) !important; }
.ent-tag-g    { background: #E0FBF2 !important; color: #059669 !important; }
.ent-tag-c    { background: #E0F7FC !important; color: #0D77B6 !important; }
.ent-pc-price { display: block !important; font-size: 17px !important; font-weight: 900 !important; color: #0D77B6 !important; margin-bottom: 10px !important; font-family: var(--ent-font) !important; }
.ent-from     { font-size: 11px !important; font-weight: 600 !important; color: #6B7280 !important; vertical-align: middle; margin-right: 2px; }
.ent-newp     { font-size: 11px !important; color: #6B7280 !important; text-decoration: line-through; margin-left: 4px; font-family: var(--ent-mono) !important; }
.ent-btn-add  { display: block !important; width: 100% !important; padding: 8px !important; background: #7C3AED !important; color: #fff !important; border-radius: 7px !important; font-size: 12px !important; font-weight: 800 !important; text-align: center !important; text-decoration: none !important; transition: background .15s; font-family: var(--ent-font) !important; border: none !important; cursor: pointer; }
.ent-btn-add:hover { background: #5B21B6 !important; }
.ent-prod-more { text-align: center !important; margin-top: 28px !important; }

/* ════════════════════════════════════
   CASE CARDS (purple gradient header)
════════════════════════════════════ */
.ent-case-grid { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 20px !important; }
.ent-case-card { background: #fff !important; border: 1.5px solid #D1E9F5 !important; border-radius: var(--ent-rxl) !important; overflow: hidden; transition: .22s; }
.ent-case-card:hover { box-shadow: var(--ent-shhov); transform: translateY(-4px); border-color: transparent !important; }
.ent-cc-head  { background: linear-gradient(135deg,#1C2B4A,#5B21B6) !important; padding: 20px !important; position: relative !important; overflow: hidden; }
.ent-cc-head::after { content: ''; position: absolute; top: -30px; right: -30px; width: 90px; height: 90px; background: radial-gradient(circle,rgba(124,58,237,.25),transparent); }
.ent-cc-co   { display: block !important; font-size: 11px !important; font-weight: 700 !important; color: rgba(255,255,255,.6) !important; margin-bottom: 4px !important; font-family: var(--ent-font) !important; }
.ent-cc-tags { display: flex !important; gap: 5px; flex-wrap: wrap; margin-bottom: 10px !important; }
.ent-cc-tag  { font-size: 9px !important; font-weight: 700 !important; padding: 2px 7px !important; border-radius: 4px !important; background: rgba(255,255,255,.12) !important; color: rgba(255,255,255,.7) !important; font-family: var(--ent-font) !important; }
.ent-cc-stat { display: block !important; font-family: var(--ent-mono) !important; font-size: 36px !important; color: #fff !important; font-weight: 500 !important; line-height: 1 !important; margin-bottom: 3px !important; }
.ent-cc-stat-lbl { display: block !important; font-size: 11px !important; color: rgba(255,255,255,.55) !important; font-weight: 600 !important; font-family: var(--ent-font) !important; }
.ent-cc-body    { padding: 16px 18px 18px !important; }
.ent-cc-title   { display: block !important; font-size: 13px !important; font-weight: 800 !important; color: #2E4270 !important; margin-bottom: 8px !important; line-height: 1.45 !important; font-family: var(--ent-font) !important; }
.ent-cc-outcome { display: block !important; font-size: 11px !important; color: #374151 !important; background: #E0FBF2 !important; border-left: 3px solid #0DD688 !important; padding: 7px 10px !important; border-radius: 0 7px 7px 0 !important; margin-bottom: 8px !important; line-height: 1.6 !important; font-family: var(--ent-font) !important; }
.ent-cc-quote   { display: block !important; font-size: 12px !important; color: #6B7280 !important; font-style: italic; border-left: 2px solid #7C3AED !important; padding: 7px 10px !important; border-radius: 0 7px 7px 0 !important; margin-bottom: 10px !important; line-height: 1.65 !important; background: #F9FAFB !important; font-family: var(--ent-font) !important; }
.ent-cc-link    { font-size: 11px !important; font-weight: 800 !important; color: #7C3AED !important; display: inline-flex !important; align-items: center; gap: 4px; transition: gap .15s; font-family: var(--ent-font) !important; text-decoration: none !important; }
.ent-cc-link:hover { gap: 8px !important; }

/* ESG block */
.ent-esg-block { background: linear-gradient(135deg,#0a1f0a,#1f3a28) !important; border: 1.5px solid rgba(13,214,136,.2) !important; border-radius: var(--ent-rxl) !important; padding: 24px 28px !important; margin-top: 36px !important; display: grid !important; grid-template-columns: 1fr 1fr 1fr !important; gap: 20px !important; align-items: center !important; }
.ent-eb-eyebrow { display: block !important; font-size: 10px !important; font-weight: 800 !important; color: #0DD688 !important; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px !important; font-family: var(--ent-font) !important; }
.ent-eb-title   { display: block !important; font-size: 18px !important; font-weight: 900 !important; color: #fff !important; margin-bottom: 8px !important; font-family: var(--ent-font) !important; }
.ent-eb-desc    { display: block !important; font-size: 13px !important; color: rgba(255,255,255,.5) !important; line-height: 1.7 !important; font-family: var(--ent-font) !important; }
.ent-esg-stat   { text-align: center; padding: 16px !important; background: rgba(13,214,136,.06) !important; border: 1px solid rgba(13,214,136,.15) !important; border-radius: var(--ent-rlg) !important; }
.ent-es-num     { display: block !important; font-family: var(--ent-mono) !important; font-size: 36px !important; color: #0DD688 !important; font-weight: 500 !important; line-height: 1 !important; margin-bottom: 6px !important; }
.ent-es-lbl     { display: block !important; font-size: 11px !important; color: rgba(255,255,255,.4) !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .05em; font-family: var(--ent-font) !important; }

/* ════════════════════════════════════
   TRUST STRIP
════════════════════════════════════ */
.ent-trust-strip { background: #F9FAFB !important; border-top: 1px solid #D1E9F5 !important; border-bottom: 1px solid #D1E9F5 !important; padding: 22px 0 !important; }
.ent-trust-inner { display: flex !important; align-items: center; justify-content: center; flex-wrap: wrap; gap: 24px !important; }
.ent-ti       { display: flex !important; align-items: center; gap: 10px !important; }
.ent-ti-icon  { font-size: 20px !important; flex-shrink: 0; }
.ent-ti-title { display: block !important; font-size: 13px !important; font-weight: 800 !important; color: #2E4270 !important; font-family: var(--ent-font) !important; }
.ent-ti-sub   { display: block !important; font-size: 11px !important; color: #6B7280 !important; font-family: var(--ent-font) !important; }
.ent-ti-sep   { width: 1px !important; height: 32px !important; background: #D1E9F5; flex-shrink: 0; }

/* ════════════════════════════════════
   FAQ (purple arrow + hover)
════════════════════════════════════ */
.ent-faq-wrap { max-width: 760px; margin: 0 auto !important; }
.ent-faq-list { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.ent-faq-item { background: #fff !important; border: 1.5px solid #D1E9F5 !important; border-radius: var(--ent-rlg) !important; overflow: hidden; }
.ent-faq-q  { width: 100% !important; padding: 14px 18px !important; font-size: 14px !important; font-weight: 700 !important; color: #2E4270 !important; cursor: pointer; display: flex !important; align-items: center; justify-content: space-between; transition: background .15s; font-family: var(--ent-font) !important; background: none !important; border: none !important; text-align: left !important; }
.ent-faq-q:hover { background: #EDE9FE !important; }
.ent-faq-arr { font-size: 18px !important; color: #7C3AED !important; font-weight: 800 !important; transition: transform .25s !important; flex-shrink: 0; margin-left: 12px; }
.ent-faq-item.open .ent-faq-arr { transform: rotate(45deg) !important; }
.ent-faq-a   { max-height: 0 !important; overflow: hidden; transition: max-height .35s ease; }
.ent-faq-item.open .ent-faq-a { max-height: 400px !important; }
.ent-faq-inner { padding: 12px 18px 14px !important; font-size: 13px !important; color: #374151 !important; line-height: 1.8 !important; border-top: 1px solid #D1E9F5; font-family: var(--ent-font) !important; }

/* ════════════════════════════════════
   INDUSTRIES GRID (purple hover)
════════════════════════════════════ */
.ent-ind-grid { display: grid !important; grid-template-columns: repeat(4,1fr) !important; gap: 12px !important; }
.ent-ind-card { display: flex !important; align-items: center; gap: 10px !important; padding: 14px !important; border-radius: var(--ent-rlg) !important; background: #fff !important; border: 1.5px solid #D1E9F5 !important; cursor: pointer; transition: border-color .18s, background .18s; text-decoration: none; color: inherit; }
.ent-ind-card:hover { border-color: #7C3AED !important; background: #EDE9FE !important; }
.ent-ind-ic   { font-size: 20px !important; flex-shrink: 0; }
.ent-ind-name { display: block !important; font-size: 13px !important; font-weight: 800 !important; color: #2E4270 !important; font-family: var(--ent-font) !important; }
.ent-ind-sub  { display: block !important; font-size: 11px !important; color: #6B7280 !important; margin-top: 2px !important; font-family: var(--ent-font) !important; }

/* ════════════════════════════════════
   RESPONSIVE — TABLET ≤ 1024px
════════════════════════════════════ */
@media (max-width: 1024px) {
  :root { --ent-px: 28px; }
  .ent-hero-layout  { grid-template-columns: 1fr !important; gap: 28px !important; }
  .ent-runway-card  { max-width: 480px !important; }
  .ent-h1           { font-size: 34px !important; }
  .ent-sec-h2       { font-size: 26px !important; }
  .ent-sj-stages    { grid-template-columns: 1fr 1fr !important; }
  .ent-sol-grid     { grid-template-columns: repeat(2,1fr) !important; }
  .ent-pack-grid    { grid-template-columns: 1fr !important; max-width: 420px; margin: 0 auto !important; }
  .ent-prod-grid    { grid-template-columns: repeat(2,1fr) !important; }
  .ent-case-grid    { grid-template-columns: repeat(2,1fr) !important; }
  .ent-esg-block    { grid-template-columns: 1fr !important; gap: 16px !important; }
  .ent-ind-grid     { grid-template-columns: repeat(2,1fr) !important; }
  .ent-trust-inner  { gap: 18px !important; }
}

/* ════════════════════════════════════
   RESPONSIVE — MOBILE ≤ 768px
════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --ent-px: 18px; }
  .ent-hero         { padding: 32px 0 44px !important; }
  .ent-h1           { font-size: 26px !important; }
  .ent-hero-desc    { font-size: 13px !important; }
  .ent-stats-inner  { grid-template-columns: repeat(2,1fr) !important; }
  .ent-stats-inner .ent-stat-item:nth-child(2) { border-right: none; }
  .ent-stats-inner .ent-stat-item:nth-child(3) { border-top: 1px solid rgba(255,255,255,.2); }
  .ent-section      { padding: 40px 0 !important; }
  .ent-sec-h2       { font-size: 22px !important; }
  .ent-sj-stages    { grid-template-columns: 1fr 1fr !important; }
  .ent-sol-grid     { grid-template-columns: 1fr !important; }
  .ent-prod-grid    { grid-template-columns: repeat(2,1fr) !important; }
  .ent-case-grid    { grid-template-columns: 1fr !important; }
  .ent-ind-grid     { grid-template-columns: repeat(2,1fr) !important; }
  .ent-rc-result    { grid-template-columns: 1fr !important; }
  .ent-ti-sep       { display: none !important; }
}

/* ════════════════════════════════════
   RESPONSIVE — SMALL MOBILE ≤ 480px
════════════════════════════════════ */
@media (max-width: 480px) {
  :root { --ent-px: 14px; }
  .ent-h1           { font-size: 22px !important; }
  .ent-sec-h2       { font-size: 20px !important; }
  .ent-stage-grid   { grid-template-columns: 1fr 1fr !important; }
  .ent-sj-stages    { grid-template-columns: 1fr 1fr !important; }
  .ent-prod-grid    { grid-template-columns: 1fr !important; }
  .ent-ind-grid     { grid-template-columns: 1fr !important; }
}

/*++++++++7th Arpril+++++*/
/* ONLY target navbar contact — no global override */
.navbar .nav-main .nav-contact-stack {
  display: inline-flex;              /* safer than flex */
  flex-direction: column;            /* stack */
  align-items: flex-end;
  gap: 2px;
  margin-right: 10px;
}

/* only links inside contact */
.navbar .nav-main .nav-contact-stack a {
  font-size: 16px;
  color: #f8f9fd;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;              /* prevent break */
}

/* make phone slightly bold */
.navbar .nav-main .nav-contact-stack a:first-child {
  font-weight: 600;
}

/* DO NOT TOUCH EXISTING nav-main */
/* just ensure it doesn't wrap */
.navbar .nav-main {
  flex-wrap: nowrap;                /* 👈 key fix */
}

/* keep spacer behavior intact */
.navbar .nav-main .nav-spacer {
  flex: 1 1 auto;
}

/* RESPONSIVE (non-breaking) */
@media (max-width: 1024px) {
  .navbar .nav-main .nav-contact-stack {
    display: none;
  }
}