@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --bg: #f8fafc;
  --white: #ffffff;
  --text: #172033;
  --muted: #64748b;
  --line: #e8edf4;
  --blue: #d8eaff;
  --blue-strong: #3b78c6;
  --lavender: #e4ecff;
  --mint: #e1f3ee;
  --cream: #eaf3ff;
  --shadow: 0 18px 50px rgba(31, 41, 55, 0.12);
  --header-h: 190px;
  --header-row1-h: 44px;
  --header-row2-h: 72px;
  --header-row3-h: 56px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  max-width: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  max-width: 100%;
  font-family: "DM Sans", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 15%, rgba(221, 235, 255, .75), transparent 28%),
    radial-gradient(circle at 90% 20%, rgba(233, 225, 255, .65), transparent 25%),
    var(--bg);
}

body.menu-open,
body.search-open {
  overflow: hidden;
}

.page-loader {
    position: fixed;
    inset: 0;

    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #f8fbff;

    opacity: 1;

    transition:
        opacity 0.4s ease;
}


/* Dark mode */

html.dark-mode .page-loader,
body.dark-mode .page-loader {
    background: #101a29;
}


/* Logo wrapper */

.loader-logo-wrapper {
    position: relative;

    width: 110px;
    height: 110px;

    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        transform 0.9s cubic-bezier(.65, 0, .35, 1);
}


/* Logo */

.loader-logo {
    width: 62px;
    height: 62px;
    object-fit: contain;

    z-index: 2;
}

.toll-free {

    display: flex;

    align-items: center;

    gap: 7px;

    padding-right: 14px;

    border-right:
        1px solid #d9e3eb;

    color: #17364f;

    text-decoration: none;

    white-space: nowrap;
}
/* Circle */

.loader-circle {
    position: absolute;

    inset: 0;

    border-radius: 50%;

    border: 3px solid rgba(76, 131, 193, .15);

    border-top-color: #4c83c1;

    animation:
        loaderSpin 1s linear infinite;
}


@keyframes loaderSpin {

    to {
        transform: rotate(360deg);
    }

}


/* Move logo */

.page-loader.logo-moving
.loader-logo-wrapper {

    transform:
        translate(
            var(--logo-x),
            var(--logo-y)
        )
        scale(var(--logo-scale));
}


/* Stop spinner */

.page-loader.logo-moving
.loader-circle {

    animation: none;

    opacity: 0;
}


/* Hide loader */

html.loading body > *:not(.page-loader) {
    visibility: hidden;
}

.navbar-logo{
  height:50px;
  width: 250px;
}

.site-header {
  position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(190, 210, 235, 0.65);
    background: transparent;
    
    /* box-shadow: 0 8px 35px rgba(50, 90, 130, 0.08); */
    border-bottom: 1px solid transparent;

    transition:
        background 0.3s ease,
        backdrop-filter 0.3s ease,
        box-shadow 0.3s ease, 
        border-color 0.3s ease;
}

.site-header.scrolled {
    /* background: rgba(255, 255, 255, 0.72); */
    

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    box-shadow: 0 8px 30px rgba(50, 90, 130, 0.08);
}

.topbar {
  min-height: 100px;
  max-width: 1600px;
  margin: auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 26px;
}

.brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}

.brand-mark {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--blue);
  color: var(--blue-strong);
  box-shadow: inset 0 0 0 1px rgba(61, 115, 201, .08);
}

.brand-name {
  font-size: 18px;
  letter-spacing: -.4px;
}

.brand-name span {
  color: var(--blue-strong);
}

.service-nav {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.nav-dropdown {
  position: relative;
}

.service-btn {
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  padding: 11px 9px;
  border-radius: 10px;
  cursor: pointer;
  transition: .2s ease;
  letter-spacing: 0.1px;
}

a.service-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  color: var(--text);
}

.service-btn a{
    text-decoration: none;
    color: inherit;
}

.service-btn:hover,
.nav-dropdown.active .service-btn{
  background: var(--blue);
  color: #285b9f;
}

.chevron {
    display: inline-block;
    margin-left: 4px;
    font-size: 15px;
    transition: transform 0.25s ease;
}

.dropdown-icon {
    filter: brightness(0);
}

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

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

.dropdown-menu {
  position: absolute;
  top: calc(100%);
  left: 0;

  min-width: 245px;
  padding: 9px;

  background: #ffffff;
  border: 1px solid #dce9f8;
  border-radius: 16px;

  box-shadow: 0 18px 50px rgba(59, 120, 198, 0.15);

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);

  pointer-events: none;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;

  z-index: 1000;
}

/* Open dropdown on hover */
.nav-dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Optional: change button appearance on hover */
.nav-dropdown:hover .service-btn {
  /* background: #d8eaff; */
  color: #3b78c6;
}

.dropdown-menu a {
  display: block;
  padding: 11px 13px;

  color: #172033;
  text-decoration: none;

  font-size: 13px;
  border-radius: 10px;

  transition: all 0.18s ease;
}

.dropdown-menu a:hover {
  background: #e1f3ee;
  color: #206b49;
  transform: translateX(2px);
}

.nav-dropdown.active .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* =========================================================
   CORPORATE MART — MULTI LEVEL SERVICE DROPDOWN
========================================================= */

.nav-dropdown {
    position: relative;
}


/* Main dropdown */

.mega-dropdown {
    position: absolute;

    top: calc(100%);
    left: 0;

    width: 235px;

    padding: 8px;

    background: #ffffff;

    border: 1px solid #dce7ef;

    border-radius: 7px;

    box-shadow:
        0 18px 40px rgba(20, 52, 78, .13);

    opacity: 0;
    visibility: hidden;

    transform: translateY(8px);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;

    z-index: 1200;
}

.mega-dropdown .dropdown-item > :is(a, button) {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

/* Level-3 submenu items */
.sub-dropdown a {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}

/* Main dropdown open */

.nav-dropdown:hover > .mega-dropdown,
.nav-dropdown.active > .mega-dropdown {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}


/* =========================================================
   LEVEL 2 ITEMS
========================================================= */

.dropdown-item {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-radius: 5px;
}


/* Strip native button chrome so it can inherit the <a> styling below */
.dropdown-item > button {
    all: unset;
    display: block;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
}

.dropdown-item > :is(a, button) {

    flex: 1;

    display: block;

    padding: 10px 11px;

    color: #526b80;

    text-decoration: none;

    font-size: 10px;

    line-height: 1.3;

    border-radius: 5px;

    transition:
        color .18s ease,
        background .18s ease;
}


.dropdown-item:hover > :is(a, button),
.dropdown-item.active > :is(a, button) {

    color: #1676bb;

    background: #eef7ff;
}


/* Arrow */

.submenu-arrow {

    padding:
        0 9px;

    color: #91a3b1;

    font-size: 17px;

    line-height: 1;

    transition:
        color .18s ease,
        transform .18s ease;
}


.dropdown-item:hover .submenu-arrow,
.dropdown-item.active .submenu-arrow {

    color: #1676bb;

    transform: translateX(2px);
}


/* =========================================================
   LEVEL 3
========================================================= */

.sub-dropdown {

    position: absolute;

    max-height: 500px;

    overflow-y: scroll;

    top: -8px;

    left: calc(100% + 6px);

    width: 220px;

    padding: 8px;

    background: #ffffff;

    border: 1px solid #dce7ef;

    border-radius: 7px;

    box-shadow:
        0 18px 40px rgba(20, 52, 78, .13);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateX(7px);

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;

    z-index: 1300;
}


/* Open ONLY hovered / active item */

.dropdown-item:hover > .sub-dropdown,
.dropdown-item.active > .sub-dropdown {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateX(0);
}


/* Level 3 links */

.sub-dropdown a {

    display: block;

    padding: 9px 11px;

    color: #526b80;

    text-decoration: none;

    font-size: 10px;

    border-radius: 5px;

    white-space: nowrap;

    transition:
        background .18s ease,
        color .18s ease;
}


.sub-dropdown a:hover {

    color: #1676bb;

    background: #eef7ff;
}


/* =========================================================
   OPEN LEFT
========================================================= */

.sub-dropdown.open-left {

    left: auto;

    right: calc(100% + 6px);

    transform: translateX(-7px);
}


.dropdown-item:hover >
.sub-dropdown.open-left,

.dropdown-item.active >
.sub-dropdown.open-left {

    transform: translateX(0);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: 18px;
}

.search-trigger,
.menu-trigger {
  height: 46px;
  border: 1px solid #cfe0f5;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--white);
  cursor: pointer;
  transition: .2s ease;
}

.search-trigger {
  width: clamp(210px, 19vw, 330px);
  display: flex;
  justify-content: flex-start;
  gap: 5px;
  padding: 0px 16px;
  color: #6d829d;
}

/* .search-trigger::after {
  content: "Search services, blogs, certifications...";
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 500 12px/1 "DM Sans", Arial, sans-serif;
  color: #8192a8;
} */

.search-trigger:hover {
  background: #f1f7ff;
  border-color: #b9d2f0;
  box-shadow: 0 7px 20px rgba(59, 120, 198, .08);
}

.search-trigger-cursor {
    display: inline-block;

    width: 1px;
    height: 14px;

    margin-left: 2px;

    vertical-align: -2px;

    background: currentColor;

    animation: searchCursorBlink 0.7s step-end infinite;
}

@keyframes searchCursorBlink {
    50% {
        opacity: 0;
    }
}

.search-trigger svg,
.search-form svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.menu-trigger {
  gap: 4px;
  padding: 10px;
}

.menu-trigger span {
  width: 18px;
  height: 2px;
  border-radius: 5px;
  background: var(--text);
  transition: .2s ease;
}

.menu-trigger:hover {
  background: var(--lavender);
  border-color: #d9cff8;
}

.search-panel {
  display: none;
  max-width: 1600px;
  margin: auto;
  padding: 0 34px 20px;
}

.search-panel.open {
  display: block;
  animation: searchIn .2s ease;
}

.search-form {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 15px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 15px;
}

.search-form input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.search-form input::placeholder {
  color: #94a3b8;
}

.search-close,
.side-menu-close {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
}

.search-suggestions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 11px;
  font-size: 12px;
  color: var(--muted);
}

.search-suggestions button {
  border: 0;
  background: var(--cream);
  color: #172033;
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(23, 32, 51, .24);
  opacity: 0;
  visibility: hidden;
  transition: .25s ease;
}

.menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

.side-menu {
  position: fixed;
  z-index: 1200;
  top: 0;
  right: 0;
  width: min(430px, 92vw);
  height: 100dvh;
  padding: 34px;
  display: flex;
  flex-direction: column;
  background: var(--white);
  box-shadow: -20px 0 60px rgba(23, 32, 51, .14);
  transform: translateX(105%);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}

.side-menu.open {
  transform: translateX(0);
}

.side-menu-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.menu-eyebrow,
.eyebrow {
  margin: 0 0 7px;
  color: var(--blue-strong);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.side-menu h2 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -1px;
}

.secondary-nav {
  padding: 18px 0;
  overflow-y: auto;
  overflow-x: clip;
}

.secondary-nav a {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  border-radius: 12px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  transition: .18s ease;
}

.secondary-nav a:hover {
  background: var(--lavender);
  transform: translateX(4px);
}

.secondary-nav a span {
  color: #9aa5b5;
  font-size: 11px;
}

.secondary-nav a b {
  color: var(--muted);
  font-size: 16px;
}

.mobile-services {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  display: none;
}

.menu-section-title {
  margin: 0 0 10px;
  color: var(--blue-strong);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
}

.mobile-service {
  border-bottom: 1px solid #edf1f6;
}

.mobile-service>button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 14px 10px;

  border: 0;
  background: transparent;

  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;

  cursor: pointer;
}

.mobile-service>button:hover {
  background: var(--blue);
  border-radius: 10px;
}

.mobile-service>button span {
  font-size: 17px;
  transition: transform .25s ease;
}

.mobile-service-link {
  border-bottom: 1px solid #edf1f6;
}

.mobile-service-link>a {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
  transition: background .18s ease;
}

.mobile-service-link>a:hover {
  background: var(--blue);
  border-radius: 10px;
}

.mobile-submenu {
  display: none;
  padding: 0 10px 8px 20px;
}

.mobile-submenu.open {
  display: block;
}

.mobile-submenu a {
  display: block;
  padding: 9px 10px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
  border-radius: 8px;
}

.mobile-submenu a:hover {
  background: var(--mint);
  color: #206b49;
}

/* Level 2: Sub-category header (clickable accordion trigger) */
.mobile-sub-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 10px 8px;
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--blue-strong, #1676bb);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  border-radius: 6px;
  border-top: 1px dashed rgba(111, 159, 202, 0.25);
  cursor: pointer;
  user-select: none;
  transition: background 0.18s, color 0.18s;
}

.mobile-sub-title:first-child {
  border-top: none;
  margin-top: 0;
}

.mobile-sub-title:hover {
  background: rgba(22, 118, 187, 0.07);
}

.mobile-sub-title.open {
  color: #0e5fa0;
  background: rgba(22, 118, 187, 0.08);
}

/* The rotating chevron arrow on sub-title */
.mobile-sub-title .sub-arrow {
  font-size: 15px;
  font-weight: 400;
  color: inherit;
  display: inline-block;
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  transform: rotate(0deg);
  line-height: 1;
  margin-left: 6px;
  flex-shrink: 0;
}

.mobile-sub-title.open .sub-arrow {
  transform: rotate(90deg);
}

/* Level 2: Sub-group link container (hidden by default) */
.mobile-subgroup {
  display: none;
  padding-left: 8px;
  border-left: 2px solid rgba(22, 118, 187, 0.18);
  margin: 2px 0 6px 12px;
  animation: subgroupSlide 0.22s ease;
}

.mobile-subgroup.open {
  display: block;
}

@keyframes subgroupSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mobile-subgroup a {
  display: block;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}

.mobile-subgroup a:hover {
  background: var(--mint);
  color: #206b49;
}

/* Dark mode overrides */
body.dark-mode .mobile-sub-title {
  color: #6fb2e6;
  border-top-color: rgba(111, 178, 230, 0.18);
}

body.dark-mode .mobile-sub-title:hover,
body.dark-mode .mobile-sub-title.open {
  background: rgba(111, 178, 230, 0.1);
  color: #93caef;
}

body.dark-mode .mobile-subgroup {
  border-left-color: rgba(111, 178, 230, 0.25);
}

.mobile-service.open>button span {
  transform: rotate(180deg);
}

.menu-footer {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  border-top: 1px solid var(--line);
}

.menu-footer a,
.menu-footer button {
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: color 0.2s ease;
}

.menu-footer a:hover,
.menu-footer button:hover {
  color: var(--text);
}

.demo-content {
  max-width: 1100px;
  margin: 0 auto;
  padding: 130px 32px;
}

.demo-content h1 {
  max-width: 780px;
  margin: 0 0 20px;
  font-size: clamp(42px, 7vw, 82px);
  line-height: .98;
  letter-spacing: -4px;
}

.demo-content>p:last-child {
  max-width: 600px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

@keyframes searchIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

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

@media (max-width: 1250px) {
  .topbar {
    padding: 0 22px;
    min-height: 88px;
  }

  .service-btn {
    padding-inline: 7px;
    font-size: 12px;
  }

  .service-nav {
    gap: 0;
  }
}

@media (max-width: 900px) {
  .header-row-2 .service-nav {
    display: none !important;
  }

  .mobile-services {
    display: block;
  }

  .search-trigger {
    width: clamp(190px, 35vw, 300px);
  }

  .topbar {
    justify-content: space-between;
  }

  .search-panel {
    padding-inline: 22px;
  }
}

@media (max-width: 600px) {
  .topbar {
    min-height: 68px;
    padding: 0 15px;
  }

  .brand-name {
    font-size: 16px;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
  }

  .search-trigger,
  .menu-trigger {
    height: 40px;
  }

  .search-trigger {
    width: min(48vw, 260px);
    padding: 0 12px;
  }

  .search-trigger::after {
    font-size: 11px;
  }

  .search-panel {
    padding: 0 15px 15px;
  }

  .side-menu {
    padding: 26px 22px;
  }

  .demo-content {
    padding: 90px 20px;
  }

  .demo-content h1 {
    letter-spacing: -2.5px;
  }
}


/* Language + theme controls */
.header-tools {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: clamp(220px, 20vw, 330px)
}

.utility-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  min-height: 27px
}

.language-control,
.theme-toggle {
  height: 28px;
  border: 1px solid #d9e6f5;
  border-radius: 9px;
  /* background: #f5f9ff; */
  color: #52657d;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 16px 9px;
  font: 500 11px/1 "DM Sans", Arial, sans-serif
}

.language-control {
  cursor: pointer
}

.language-control select {
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer
}

.language-control span {
  color: var(--blue-strong)
}

.theme-toggle {
  cursor: pointer;
  transition: .2s ease
}

.theme-toggle:hover,
.language-control:hover {
  background: #eaf3ff;
  border-color: #bdd4ef;
}

.theme-icon {
  font-size: 15px
}

.header-actions {
  width: 100%;
  justify-content: flex-end
}

.search-trigger {
  width: 100%
}

/* =========================================================
   BUSINESS HERO
   All classes are scoped with .bizhero-
   ========================================================= */

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 135deg;
  inherits: false;
}

.bizhero {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: calc(-1 * var(--header-h));
  /* Push content down so it isn’t hidden under the header */
  padding-top: calc(var(--header-h) + 40px);
  /* Grow upward to fill the viewport; bottom stays ~where content ends */
  min-height: 100vh;
  box-sizing: border-box;

    /* 2. Replace 135deg with your new custom variable */
     background:
        radial-gradient(
            circle at 75% 30%,
            rgba(218, 239, 255, 0.5),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(182, 231, 212, 0.38),
            transparent 25%
        ),
        linear-gradient(
            var(--gradient-angle), /* This changes dynamically */
            #edf6ff 0%,
            #d6e6f4 55%,
            #d8fff6 100%
        ); 

    color: #172033;
    
    /* 3. Attach the infinite rotation animation */
    /* animation: rotateGradient 15s linear infinite; */
}

/* 4. Define the 360-degree rotation keyframes */
/* @keyframes rotateGradient {
  0% {
    --gradient-angle: 135deg;
  }
  100% {
    --gradient-angle: 495deg; 
  }
} */


/* Main wrapper */

.bizhero-container {
    width: min(1380px, calc(100% - 80px));
    min-height: calc(100vh - var(--header-h) - 40px);

    margin: 0 auto;
    padding: 0px 0 70px;

    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    align-items: center;
    gap: 55px;
}


/* =========================
   LEFT CONTENT
   ========================= */

.bizhero-content {
    position: relative;
    z-index: 2;
}


.bizhero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 8px 14px;

    background: rgba(255, 255, 255, 0.78);
    border: 1px solid #d9e9f8;
    border-radius: 100px;

    color: #4f7197;

    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;

    box-shadow: 0 8px 25px rgba(65, 111, 157, 0.06);
}


.bizhero-badge-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #65b997;
    box-shadow: 0 0 0 4px rgba(101, 185, 151, 0.12);
}


.bizhero-title {
    max-width: 680px;

    margin: 22px 0 18px;

    font-size: 40px;
    line-height: 1.04;
    letter-spacing: -2.8px;
    font-weight: 750;
}


.bizhero-title span {
    display: inline;

    color: rgb(54, 118, 207)
}


.bizhero-description {
    max-width: 600px;

    margin: 0;

    color: #667891;

    font-size: 16px;
    line-height: 1.75;
}


/* =========================
   BUTTONS
   ========================= */

.bizhero-actions {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 29px;
}


.bizhero-primary-btn,
.quotation-btn {
    min-height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;

    padding: 0 21px;

    border-radius: 12px;

    font-size: 13px;
    font-weight: 650;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.bizhero-primary-btn {
    background: #4c83c1;
    color: #ffffff;

    box-shadow:
        0 10px 25px rgba(76, 131, 193, 0.22);
}

.quotation-btn{
  background: #4c83c1;
    color: #ffffff;

    box-shadow:
        0 10px 25px rgba(76, 131, 193, 0.22);
}


.bizhero-primary-btn span {
    font-size: 18px;
    transition: transform 0.2s ease;
}


.bizhero-primary-btn:hover,
.quotation-btn:hover{
    transform: translateY(-2px);

    box-shadow:
        0 14px 30px rgba(76, 131, 193, 0.28);
}


.bizhero-primary-btn:hover span {
    transform: translateX(3px);
}


.bizhero-secondary-btn {
    background: rgba(255, 255, 255, 0.75);

    color: #41698f;

    border: 1px solid #d4e4f4;
}


.bizhero-secondary-btn:hover {
    transform: translateY(-2px);

    background: #ffffff;
}


/* =========================
   SERVICE SHORTCUTS
   ========================= */

.bizhero-services {
    margin-top: 42px;
}


.bizhero-services-label {
    margin: 0 0 13px;

    color: #73859b;

    font-size: 11px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 1.2px;
}


.bizhero-service-grid {
    max-width: 680px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 9px;
}


.bizhero-service-card {
    min-height: 67px;

    display: grid;
    grid-template-columns: 38px 1fr auto;
    align-items: center;
    gap: 25px;

    padding: 10px 13px;

    background: rgba(255, 255, 255, 0.72);

    border: 1px solid #afceed;
    border-radius: 13px;

    text-decoration: none;

    box-shadow: 0 5px 20px rgba(56, 97, 136, 0.035);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.bizhero-service-card:hover {
    transform: translateY(-3px);

    background: #ffffff;

    border-color: #bcd5ef;

    box-shadow:
        0 12px 28px rgba(56, 97, 136, 0.09);
}


.bizhero-service-icon {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background:inherit;
    
    color: #4c83c1;

    font-size: 15px;
    font-weight: 700;
}


.bizhero-service-card strong {
    display: block;

    color: #27384d;

    font-size: 16px;
    line-height: 1.3;
}


.bizhero-service-card small {
    display: block;

    margin-top: 3px;

    color: #8493a6;

    font-size: 10px;
}


.bizhero-arrow {
    color: #87a8ca;

    font-size: 15px;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


.bizhero-service-card:hover .bizhero-arrow {
    color: #4c83c1;
    transform: translate(2px, -2px);
}


/* =========================
   RIGHT VISUAL
   ========================= */

.bizhero-visual {
    position: relative;
    isolation: isolate;
    min-height: 560px;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================
   HERO BACKGROUND ORBS
========================================== */
/* Container */

.bizhero-bg-orbs {
    position: absolute;
    inset: -80px;

    z-index: -1;

    pointer-events: none;

    overflow: hidden;
}


/* Common orb */

.bizhero-orb {
    position: absolute;

    display: block;

    border-radius: 50%;

    filter: blur(45px);

    opacity: 0.45;

    will-change: transform;

    animation:
        bizheroOrbFloat 9s ease-in-out infinite;
}


/* Large pastel blue orb */

.bizhero-orb-1 {
    width: 260px;
    height: 260px;

    top: 50px;
    right: 60px;

    background: rgba(174, 215, 246, 0.55);

    animation-delay: 0s;
}


/* Mint orb */

.bizhero-orb-2 {
    width: 180px;
    height: 180px;

    left: 40px;
    bottom: 70px;

    background: rgba(190, 231, 216, 0.45);

    animation-delay: -3s;
}


/* Light lavender orb */

.bizhero-orb-3 {
    width: 150px;
    height: 150px;

    right: 30px;
    bottom: 30px;

    background: rgba(207, 204, 244, 0.38);

    filter: blur(50px);

    animation-delay: -5s;
}


/* Very subtle blue orb */

.bizhero-orb-4 {
    width: 110px;
    height: 110px;

    left: 180px;
    top: 80px;

    background: rgba(190, 224, 250, 0.42);

    filter: blur(38px);

    animation-delay: -7s;
}


/* ==========================================
   SOFT ABSTRACT SHAPES
========================================== */

.bizhero-soft-shape {
    position: absolute;

    display: block;

    background: rgba(196, 224, 247, 0.419);

    border: 1px solid rgba(177, 210, 237, 0.425);

    filter: blur(1px);

    backdrop-filter: blur(4px);

    -webkit-backdrop-filter: blur(4px);

    animation:
        bizheroShapeFloat 11s ease-in-out infinite;
}


/* Organic blob */

.bizhero-soft-shape-1 {

    width: 180px;
    height: 100px;

    top: 150px;
    left: 40px;

    border-radius:
        70% 30% 50% 50% /
        40% 60% 40% 60%;

    transform: rotate(-25deg);

    animation-delay: -2s;
}


/* Rounded pill */

.bizhero-soft-shape-2 {

    width: 190px;
    height: 65px;

    right: 40px;
    bottom: 120px;

    border-radius: 100px;

    transform: rotate(35deg);

    background: rgba(180, 220, 247, 0.18);

    animation-delay: -6s;
}


/* ==========================================
   ORB ANIMATION
========================================== */

@keyframes bizheroOrbFloat {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    33% {
        transform:
            translate3d(12px, -15px, 0)
            scale(1.04);
    }

    66% {
        transform:
            translate3d(-10px, 10px, 0)
            scale(0.97);
    }

}


@keyframes bizheroShapeFloat {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(-25deg);
    }

    50% {
        transform:
            translate3d(15px, -12px, 0)
            rotate(-18deg);
    }

}

.bizhero-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(3px);

    pointer-events: none;
}


.bizhero-glow-one {
    width: 290px;
    height: 290px;

    right: 5%;
    top: 12%;

    background: rgba(180, 216, 248, 0.48);
}


.bizhero-glow-two {
    width: 190px;
    height: 190px;

    left: 8%;
    bottom: 10%;

    background: rgba(194, 232, 218, 0.38);
}


/* Main image/card */

.bizhero-image-card {
    position: relative;
    z-index: 2;

    width: min(530px, 90%);

    padding: 9px;

    background: rgba(255, 255, 255, 0.7);

    border: 1px solid rgba(255, 255, 255, 0.9);

    border-radius: 28px;

    box-shadow:
        0 30px 70px rgba(59, 105, 148, 0.15);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transform: rotate(1deg);

    transition: transform 0.35s ease;
}


.bizhero-image-card:hover {
    transform: rotate(0deg) translateY(-5px);
}


.bizhero-image-header {
    height: 28px;

    display: flex;
    align-items: center;

    gap: 5px;

    padding-left: 9px;
}


.bizhero-window-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #c6d9ed;
}


.bizhero-illustration {
    width: 100%;
    height: auto;

    display: block;

    border-radius: 21px;
}


/* =========================
   FLOATING CARDS
   ========================= */

.bizhero-floating-card {
    position: absolute;
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 12px 15px;

    background: rgba(255, 255, 255, 0.9);

    border: 1px solid rgba(218, 232, 246, 0.9);

    border-radius: 13px;

    box-shadow:
        0 15px 35px rgba(51, 92, 129, 0.12);

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    animation: bizhero-float 4s ease-in-out infinite;
}


.bizhero-floating-top {
    top: 65px;
    right: 1%;
}


.bizhero-floating-bottom {
    bottom: 68px;
    left: 2%;

    animation-delay: -1.7s;
}


.bizhero-floating-icon,
.bizhero-rating {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: #e2f4ec;

    color: #43836b;

    font-size: 14px;
    font-weight: 700;
}


.bizhero-rating {
    background: #eaf3ff;
    color: #4c83c1;
}


.bizhero-floating-card strong {
    display: block;

    color: #2c3c50;

    font-size: 11px;
}


.bizhero-floating-card small {
    display: block;

    margin-top: 3px;

    color: #8493a6;

    font-size: 9px;
}


@keyframes bizhero-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}


/* =========================
   DARK MODE
   ========================= */

body.dark-mode .bizhero {
    background:inherit;
    color: #edf4ff;
}


body.dark-mode .bizhero-badge,
body.dark-mode .bizhero-service-card,
body.dark-mode .bizhero-secondary-btn,
body.dark-mode .bizhero-floating-card {
    background: rgba(24, 34, 53, 0.76);

    border-color: #2d4059;
}


body.dark-mode .bizhero-badge {
    color: #a8c8e9;
}


body.dark-mode .bizhero-title {
    color: #edf4ff;
}


body.dark-mode .bizhero-title span {
    color: #9fc8ff;
}


body.dark-mode .bizhero-description,
body.dark-mode .bizhero-services-label {
    color: #9eafc4;
}


body.dark-mode .bizhero-secondary-btn {
    color: #b8d7f8;
}


body.dark-mode .bizhero-secondary-btn:hover,
body.dark-mode .bizhero-service-card:hover {
    background: #1d2b40;
}


body.dark-mode .bizhero-service-card strong,
body.dark-mode .bizhero-floating-card strong {
    color: #e8f1fc;
}


body.dark-mode .bizhero-service-card small,
body.dark-mode .bizhero-floating-card small {
    color: #8fa2ba;
}


body.dark-mode .bizhero-service-icon {
    background: rgba(189, 214, 255, 0.659);
    color: #9fc8ff;
}


body.dark-mode .bizhero-image-card {
    background: rgba(24, 34, 53, 0.72);

    border-color: #2c3d55;
}


body.dark-mode .bizhero-illustration {
    opacity: 0.93;
}

/* body.dark-mode .toll-free{
    color: white;
} */

/* =========================
   TABLET
   ========================= */

@media (max-width: 1230px) {

    /* Hide desktop monitor & visual graphics at hero section below 1230px */
    .bizhero-visual,
    .bizhero-monitor,
    .bizhero-monitor-frame,
    .bizhero-chat-screen,
    .bizhero-character-wrapper,
    .bizhero-bg-orbs,
    .bizhero-orb,
    .bizhero-soft-shape,
    .bizhero-glow,
    .bizhero-floating-card,
    .bizhero-image-card {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
    }

    .bizhero-container {
        width: min(920px, calc(100% - 40px)) !important;
        max-width: 920px !important;
        grid-template-columns: 1fr !important;
        margin: 0 auto !important;
        padding: 40px 0 60px !important;
        gap: 0 !important;
        min-height: auto !important;
        text-align: center !important;
    }

    .bizhero-content {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .bizhero-badge {
        margin: 0 auto 10px !important;
    }

    .bizhero-title,
    .bizhero-description {
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .bizhero-actions {
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .bizhero-services {
        width: 100% !important;
        max-width: 680px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .bizhero-services-label {
        text-align: center !important;
    }

    .bizhero-service-grid {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        max-width: 680px !important;
        justify-content: center !important;
        text-align: left !important;
    }

}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 650px) {

    .bizhero-container {
        width: calc(100% - 30px);

        padding: 45px 0 55px;

        gap: 25px;
    }


    .bizhero-title {
        margin-top: 17px;

        font-size: clamp(37px, 11vw, 52px);

        letter-spacing: -1.8px;
    }


    .bizhero-description {
        font-size: 14px;
        line-height: 1.65;
    }


    .bizhero-actions {
        flex-direction: column;

        width: 100%;
    }


    .bizhero-primary-btn,
    .bizhero-secondary-btn {
        width: 100%;
    }


    .bizhero-services {
        margin-top: 32px;
    }


    .bizhero-service-grid {
        grid-template-columns: 1fr;
    }


    .bizhero-service-card {
        min-height: 62px;
    }


    .bizhero-image-card {
        width: 100%;

        border-radius: 20px;
    }


    .bizhero-floating-top {
        top: 5px;
        right: -3px;
    }


    .bizhero-floating-bottom {
        bottom: 5px;
        left: -3px;
    }


    .bizhero-floating-card {
        padding: 9px 11px;
    }


    .bizhero-floating-icon,
    .bizhero-rating {
        width: 29px;
        height: 29px;
    }

}


@media (max-width: 400px) {

    .bizhero-floating-card small {
        display: none;
    }


    .bizhero-floating-card {
        padding: 7px 9px;
    }

}

html.dark-mode body,
body.dark-mode {
  --bg: #101827;
  --white: #182235;
  --text: #edf4ff;
  --muted: #a8b6c9;
  --line: #2b3a51;
  --blue: #203b5d;
  --blue-strong: #9fc8ff;
  --lavender: #2a3150;
  --mint: #1f443c;
  --cream: #213b59;
  background: radial-gradient(circle at 75% 30%, rgb(37 64 104 / 75%), transparent 28%), radial-gradient(circle at 15% 80%, rgb(59 48 88 / 65%), transparent 25%), linear-gradient(var(--gradient-angle), rgb(25 36 51) 0%, rgb(37 64 104 / 75%) 55%, rgb(59 48 88 / 65%) 100%);
      }

body.dark-mode .site-header {
  background: #121f2f;
  /* border-color: var(--line) */
}

body.dark-mode .dropdown-menu,
body.dark-mode .sub-dropdown,
body.dark-mode .search-form,
body.dark-mode .search-trigger,
body.dark-mode .menu-trigger,
body.dark-mode .theme-toggle,
body.dark-mode .side-menu {
  background: var(--white);
  border-color: var(--line);
  color: var(--text)
}

body.dark-mode .dropdown-menu a,
body.dark-mode .dropdown-menu button,
body.dark-mode .service-btn a,
body.dark-mode .secondary-nav a,
body.dark-mode .toll-free,
body.dark-mode .search-form input,
body.dark-mode .search-suggestions button {
  color: var(--text)
}

body.dark-mode .mobile-service,
body.dark-mode .mobile-service-link {
  border-bottom-color: var(--line);
}

body.dark-mode .dropdown-menu a:hover{
  color: var(--white);
}

body.dark-mode .nav-dropdown:hover .service-btn a{
     color: #3b78c6;
}

body.dark-mode .dropdown-icon {
    filter: invert(1);
}

body.dark-mode .nav-dropdown:hover .dropdown-icon {
    /* filter: brightness(1) invert(0); */
}

body.dark-mode .menu-overlay {
  background: rgba(0, 0, 0, .52)
}

body.dark-mode .site-header.scrolled {
    background: rgba(16, 24, 39, 0.72);
    border-bottom: 1px solid rgba(100, 125, 160, 0.35);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.language-toast {
  position: fixed;
  left: 50%;
  top: 105px;
  z-index: 2000;
  transform: translate(-50%, -10px);
  padding: 9px 14px;
  border: 1px solid #cfe0f5;
  border-radius: 10px;
  background: var(--white);
  color: var(--text);
  box-shadow: 0 12px 30px rgba(23, 32, 51, .12);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: .2s ease
}

.language-toast.show {
  opacity: 1;
  transform: translate(-50%, 0)
}

@media(max-width:1050px) {
  .header-tools {
    min-width: 0;
    flex: 1;
    max-width: 330px
  }
}

@media(max-width:600px) {
  .header-tools {
    max-width: none
  }

  .theme-label {
    display: none
  }

  .language-control,
  .theme-toggle {
    height: 25px;
    padding: 0 7px;
    font-size: 10px
  }
}
/* ==========================================
   HERO VISUAL
========================================== */

.bizhero-visual {
    position: relative;

    width: 100%;
    min-height: 570px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: visible;
}


/* ==========================================
   CHARACTER
========================================== */

.bizhero-character-wrapper {
    position: absolute;

        left: -55px;
    bottom: -94px;

    width: 570px;

    z-index: 2;

    animation: bizheroCharacterFloat 5s ease-in-out infinite;
}


.bizhero-character-image {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


@keyframes bizheroCharacterFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}


/* ==========================================
   TYPING CARD
========================================== */

.bizhero-typing-card {
    position: absolute;

    z-index: 5;

    top: 45px;
    right: 5px;

    width: 340px;

    padding: 22px;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.88);

    border: 1px solid rgba(198, 220, 240, 0.9);

    box-shadow:
        0 25px 60px rgba(56, 101, 143, 0.15);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    animation: bizheroCardFloat 4s ease-in-out infinite;
}


@keyframes bizheroCardFloat {

    0%,
    100% {
        transform: translateY(0) rotate(1deg);
    }

    50% {
        transform: translateY(-8px) rotate(1deg);
    }

}


/* ==========================================
   CARD HEADER
========================================== */

.bizhero-typing-header {

    display: flex;
    align-items: center;

    gap: 8px;

    color: #71859b;

    font-size: 11px;
    font-weight: 650;
}


.bizhero-status-dot {

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #6bbd9b;

    box-shadow:
        0 0 0 4px rgba(107, 189, 155, 0.12);
}


/* ==========================================
   TYPING CONTENT
========================================== */

.bizhero-typing-label {

    margin: 22px 0 5px;

    color: #8292a5;

    font-size: 12px;
}


.bizhero-typing-line {

    min-height: 35px;

    color: #4c83c1;

    font-size: 22px;
    font-weight: 750;

    line-height: 1.35;
}


.bizhero-cursor {

    display: inline-block;

    width: 2px;
    height: 22px;

    margin-left: 4px;

    vertical-align: -3px;

    background: #4c83c1;

    animation: bizheroCursorBlink 0.75s step-end infinite;
}


@keyframes bizheroCursorBlink {

    50% {
        opacity: 0;
    }

}


/* ==========================================
   BOTTOM TEXT
========================================== */

.bizhero-typing-bottom {

    display: flex;
    align-items: center;

    gap: 8px;

    margin-top: 18px;
    padding-top: 14px;

    border-top: 1px solid #e5edf5;

    color: #78899b;

    font-size: 10px;
}


.bizhero-typing-bottom span {

    width: 20px;
    height: 20px;

    display: grid;
    place-items: center;

    border-radius: 6px;

    background: #e2f3eb;

    color: #4c9277;

    font-size: 10px;
}


/* ==========================================
   DECORATIONS
========================================== */

.bizhero-decoration {

    position: absolute;

    z-index: 6;

    color: #75a9d9;

    animation: bizheroSparkle 3s ease-in-out infinite;
}


.bizhero-decoration-one {

    top: 110px;
    left: 40px;

    font-size: 24px;
}


.bizhero-decoration-two {

    right: 25px;
    bottom: 95px;

    font-size: 16px;

    animation-delay: -1.5s;
}


@keyframes bizheroSparkle {

    0%,
    100% {
        opacity: .35;
        transform: scale(.8) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.15) rotate(15deg);
    }

}

body.dark-mode .bizhero-typing-card {

    background: rgba(19, 31, 48, 0.88);

    border-color: rgba(80, 110, 140, 0.45);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.28);
}


body.dark-mode .bizhero-typing-header {

    color: #a5b7ca;
}


body.dark-mode .bizhero-typing-label {

    color: #8ea1b7;
}


body.dark-mode .bizhero-typing-line {

    color: #9fc8ff;
}


body.dark-mode .bizhero-cursor {

    background: #9fc8ff;
}


body.dark-mode .bizhero-typing-bottom {

    color: #8fa2b8;

    border-top-color: #2b3d53;
}


body.dark-mode .bizhero-decoration {

    color: #8ebdf0;
}

body.dark-mode .bizhero-orb-1 {
    background: rgba(69, 130, 183, 0.28);
    opacity: 0.55;
}

body.dark-mode .bizhero-orb-2 {
    background: rgba(77, 155, 132, 0.20);
    opacity: 0.5;
}

body.dark-mode .bizhero-orb-3 {
    background: rgba(111, 103, 180, 0.20);
    opacity: 0.45;
}

body.dark-mode .bizhero-orb-4 {
    background: rgba(74, 143, 199, 0.22);
    opacity: 0.5;
}

body.dark-mode .bizhero-soft-shape {
    background: rgba(91, 143, 191, 0.10);
    border-color: rgba(119, 166, 207, 0.12);
}
/* Theme toggle: two-phase circular reveal. Phase 1 covers the viewport
   with a circle expanding from the toggle button (top-right) out to the
   farthest corner (bottom-left) — the real page underneath is untouched
   during this phase. Only once fully covered does JS swap the actual
   theme, then phase 2 shrinks the circle back to reveal it. Background
   color and transition timing are both set inline by script.js per-phase,
   since the overlay must show the TARGET theme's color before that theme
   exists on <body>. */
.theme-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  background: var(--bg);
  clip-path: circle(0px at 100% 0%);
  will-change: clip-path
}

@media(prefers-reduced-motion:reduce) {
  .theme-transition-overlay {
    transition: none;
    display: none
  }
}

/* ===== Corporate Mart service dropdown final styling ===== */
.service-btn {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

.mega-dropdown .dropdown-item > :is(a, button),
.dropdown-menu .dropdown-item > :is(a, button) {
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.45;
}

.mega-dropdown .sub-dropdown a,
.sub-dropdown a {
    font-size: 14px !important;
    font-weight: 600;
    line-height: 1.45;
}

.mega-dropdown { width: 260px; }
.sub-dropdown { width: 245px; }

.mega-dropdown .dropdown-item:hover > :is(a, button),
.mega-dropdown .dropdown-item.active > :is(a, button) {
    background: #eaf5ff;
    color: #1477bd;
}

.mega-dropdown .sub-dropdown a:hover {
    background: #f0f8ff;
    color: #1477bd;
}

/* ===== Dark theme ===== */
.dark .mega-dropdown,
body.dark .mega-dropdown,
html.dark .mega-dropdown {
    background: #101d2d;
    border-color: #263d55;
    box-shadow: 0 20px 45px rgba(0,0,0,.42);
}



.dark .mega-dropdown .dropdown-item > :is(a, button),
body.dark .mega-dropdown .dropdown-item > :is(a, button),
html.dark .mega-dropdown .dropdown-item > :is(a, button) {
    color: #d7e5f2;
    background: transparent;
}

.dark .mega-dropdown .dropdown-item:hover > :is(a, button),
.dark .mega-dropdown .dropdown-item.active > :is(a, button),
body.dark .mega-dropdown .dropdown-item:hover > :is(a, button),
body.dark .mega-dropdown .dropdown-item.active > :is(a, button),
html.dark .mega-dropdown .dropdown-item:hover > :is(a, button),
html.dark .mega-dropdown .dropdown-item.active > :is(a, button) {
    color: #9bd5ff;
    background: rgba(120,195,255,.13);
}

.dark .sub-dropdown,
body.dark .sub-dropdown,
html.dark .sub-dropdown {
    background: #101d2d;
    border-color: #263d55;
    box-shadow: 0 20px 45px rgba(0,0,0,.45);
}

.dark .sub-dropdown a,
body.dark .sub-dropdown a,
html.dark .sub-dropdown a {
    color: #cbdbea;
    background: transparent;
}

.dark .sub-dropdown a:hover,
body.dark .sub-dropdown a:hover,
html.dark .sub-dropdown a:hover {
    color: #9bd5ff;
    background: rgba(120,195,255,.10);
}

.dark .submenu-arrow,
body.dark .submenu-arrow,
html.dark .submenu-arrow {
    color: #7890a6;
}

.dark .dropdown-item:hover .submenu-arrow,
.dark .dropdown-item.active .submenu-arrow,
body.dark .dropdown-item:hover .submenu-arrow,
body.dark .dropdown-item.active .submenu-arrow,
html.dark .dropdown-item:hover .submenu-arrow,
html.dark .dropdown-item.active .submenu-arrow {
    color: #9bd5ff;
}

.dark .service-btn,
body.dark .service-btn,
html.dark .service-btn {
    color: #dcecff;
}

.dark .service-btn:hover,
body.dark .service-btn:hover,
html.dark .service-btn:hover {
    color: #9bd5ff;
}

.dark .service-btn .dropdown-icon,
body.dark .service-btn .dropdown-icon,
html.dark .service-btn .dropdown-icon {
    filter: brightness(0) invert(1);
    opacity: .78;
}

@media (max-width: 900px) {
    .mega-dropdown,
    .sub-dropdown { width: 100%; }
    .service-btn { font-size: 14px !important; }
}

/* ========== INDIA / MSME MAP SECTION ========== */
.india-msme-section {
  padding: 72px 0 80px;
  background: #c3e3ff7f;
  position: relative;
  overflow: hidden;
}

.india-msme-section .cr-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

.india-msme-heading {
  text-align: center;
  margin-bottom: 40px;
}

.india-msme-heading .cr-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-strong, #3b78c6);
  margin-bottom: 10px;
}

.india-msme-heading h2 {
  font-size: clamp(26px, 3.2vw, 36px);
  color: var(--text, #172033);
  margin: 0 0 12px;
  line-height: 1.25;
}

.india-msme-heading p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted, #64748b);
  max-width: 620px;
  margin: 0 auto;
}

.india-msme-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.85fr);
  gap: 40px 48px;
  align-items: center;
}

.india-map-wrap {
  position: relative;
  background: var(--white, #ffffff);
  border: 1px solid var(--line, #e8edf4);
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(31, 41, 55, 0.08);
  padding: 20px 16px 28px;
  overflow: hidden;
}

.india-map-wrap svg,
.india-map-wrap object,
.india-map-img {
  width: 100%;
  height: auto;
  max-height: 520px;
  display: block;
  margin: 0 auto;
}

.india-map-svg {
  width: 100%;
  height: auto;
  max-height: 520px;
}

.india-map-svg path {
  fill: #c5d9e8;
  stroke: #ffffff;
  stroke-width: 0.6;
  transition: fill 0.25s ease, filter 0.25s ease;
  cursor: pointer;
}

.india-map-svg path:hover,
.india-map-svg path.is-active {
  fill: var(--blue-strong, #3b78c6);
  filter: drop-shadow(0 2px 6px rgba(59, 120, 198, 0.35));
}

.india-map-tooltip {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  padding: 8px 12px;
  background: #172033;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -120%);
  transition: opacity 0.15s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.india-map-tooltip.is-visible {
  opacity: 1;
}

.india-msme-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.india-stat-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  background: #ffffff;
  border: 1px solid rgba(180, 205, 245, 0.6);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.india-stat-card:hover {
  transform: translateY(-4px);
  border-color: #bcd5f8;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
}

.india-stat-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #172b4d;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
}

.india-stat-card strong {
  display: block;
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 2px;
  line-height: 1.2;
}

.india-stat-card span {
  font-size: 13.5px;
  color: #334155;
  font-weight: 600;
  line-height: 1.4;
}

.india-msme-cta {
  margin-top: 8px;
  text-align: left;
}

.india-msme-cta .cr-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 900px) {
  .india-msme-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .india-msme-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .india-msme-cta {
    grid-column: 1 / -1;
    text-align: center;
  }
}

@media (max-width: 520px) {
  .india-msme-stats {
    grid-template-columns: 1fr;
  }

  .india-map-wrap {
    padding: 12px 8px 20px;
  }
}

/* ========== INDIA / MSME MAP – DARK MODE ========== */
body.dark-mode .india-msme-section {
  background: #0f172a;
}

body.dark-mode .india-msme-heading .cr-eyebrow {
  color: var(--blue-strong, #9fc8ff);
}

body.dark-mode .india-msme-heading h2 {
  color: var(--text, #edf4ff);
}

body.dark-mode .india-msme-heading p {
  color: var(--muted, #a8b6c9);
}

body.dark-mode .india-map-wrap {
  background: #dbe6fb;
  border-color: var(--line, #2b3a51);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

body.dark-mode .india-map-svg path {
  fill: #334155;
  stroke: #1e293b;
}

body.dark-mode .india-map-svg path:hover,
body.dark-mode .india-map-svg path.is-active {
  fill: #5eb0e8;
  filter: drop-shadow(0 2px 8px rgba(94, 176, 232, 0.4));
}

body.dark-mode .india-map-tooltip {
  background: #edf4ff;
  color: #101827;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

body.dark-mode .india-stat-card {
  background: #dbe6fb;
  border-color: rgba(180, 205, 245, 0.6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

body.dark-mode .india-stat-card:hover {
  transform: translateY(-4px);
  border-color: #bcd5f8;
  box-shadow: 0 14px 36px rgba(186, 215, 255, 0.4), 0 0 25px rgba(255, 255, 255, 0.25);
}

body.dark-mode .india-stat-icon {
  background: #172b4d;
  color: #ffffff;
}

body.dark-mode .india-stat-card strong,
body.dark-mode .india-stat-card .india-data-value {
  color: #0f172a;
}

body.dark-mode .india-stat-card span {
  color: #334155;
}

/* ========== HERO MONITOR + CHAT ========== */
.bizhero-monitor {
  position: relative;
  width: min(100%, 570px);
  margin: 0 auto;
  z-index: 3;
}

.bizhero-monitor-frame {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.08));
}

.bizhero-monitor-frame.bizhero-monitor-dark {
  display: none;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.5));
}

body.dark-mode .bizhero-monitor-frame.bizhero-monitor-light {
  display: none;
}

body.dark-mode .bizhero-monitor-frame.bizhero-monitor-dark {
  display: block;
  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.5));
}

/* Screen area — tune these % if the image crop differs */
.bizhero-chat-screen {
  position: absolute;
  z-index: 2;
  left: 17.5%;
    right: -21%;
    top: 12.2%;
    bottom: 25%;
  background: linear-gradient(160deg, #f0f6fc 0%, #e4eef8 100%);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 10px 12px 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.bizhero-chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 650;
  color: #5a7188;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(120, 150, 180, 0.2);
}

.bizhero-chat-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4caf7a;
  box-shadow: 0 0 0 3px rgba(76, 175, 122, 0.2);
}

.bizhero-chat-messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  justify-content: flex-end;
}

.bizhero-chat-bubble {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 500;
  position: relative;
  animation: chatBubbleIn 0.35s ease;
}

.bizhero-chat-bubble.is-hidden {
  display: none;
}

.bizhero-chat-in {
  align-self: flex-start;
  background: #ffffff;
  color: #2c3c50;
  border: 1px solid rgba(180, 200, 220, 0.5);
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 12px rgba(50, 80, 120, 0.08);
}

.bizhero-chat-out {
  align-self: flex-end;
  background: #3b78c6;
  color: #fff;
  border-bottom-left-radius: 4px;
  box-shadow: 0 4px 14px rgba(59, 120, 198, 0.3);
}

.bizhero-chat-cursor {
  display: inline-block;
  width: 2px;
  height: 13px;
  margin-left: 2px;
  vertical-align: -2px;
  background: currentColor;
  animation: bizheroCursorBlink 0.75s step-end infinite;
}

.bizhero-chat-cursor.is-done {
  display: none;
}

@keyframes chatBubbleIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dark mode */
body.dark-mode .bizhero-chat-screen {
  background: linear-gradient(160deg, #152338 0%, #1a2a40 100%);
  box-shadow: inset 0 0 0 1px rgba(100, 130, 160, 0.2);
}

body.dark-mode .bizhero-chat-header {
  color: #9eb3c9;
  border-bottom-color: rgba(100, 130, 160, 0.25);
}

body.dark-mode .bizhero-chat-in {
  background: #243447;
  color: #e2ecf7;
  border-color: rgba(100, 130, 160, 0.3);
}

body.dark-mode .bizhero-chat-out {
  background: #4a8fd4;
  box-shadow: 0 4px 14px rgba(74, 143, 212, 0.35);
}

body.dark-mode .bizhero-monitor-frame {
  /* filter:brightness(1) invert(0.7); */
}

@media (max-width: 1050px) {
  .bizhero-monitor {
    width: min(100%, 400px);
  }
}

@media (max-width: 650px) {
  .bizhero-monitor {
    width: min(100%, 320px);
  }

  .bizhero-chat-bubble {
    font-size: 11.5px;
    padding: 8px 10px;
  }
}

/* Chat rows + avatars */
.bizhero-chat-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 100%;
  animation: chatBubbleIn 0.35s ease;
}

.bizhero-chat-row.is-hidden {
  display: none;
}

.bizhero-chat-row-in {
  align-self: flex-end;
  flex-direction: row;
}

.bizhero-chat-row-out {
  align-self: flex-start;
}

.bizhero-chat-avatar {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: block;
}

.bizhero-chat-avatar-user {
  background: linear-gradient(145deg, #7eb6e8, #3b78c6);
  box-shadow: 0 0 0 2px rgba(59, 120, 198, 0.2);
}

.bizhero-chat-avatar-agent {
  background: linear-gradient(145deg, #6bc9a0, #3d9b72);
  box-shadow: 0 0 0 2px rgba(61, 155, 114, 0.2);
}

/* Bubble inside row — remove old max-width constraints if needed */
.bizhero-chat-row .bizhero-chat-bubble {
  max-width: calc(100% - 30px);
}

.bizhero-chat-with-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.bizhero-chat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  padding: 6px 12px;
  border-radius: 8px;
  background: #fff;
  color: #2c5f9e;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.bizhero-chat-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}

.bizhero-chat-btn.is-hidden {
  display: none;
}

/* Dark mode avatars + button */
body.dark-mode .bizhero-chat-avatar-user {
  background: linear-gradient(145deg, #6aa8e0, #4a8fd4);
  box-shadow: 0 0 0 2px rgba(74, 143, 212, 0.3);
}

body.dark-mode .bizhero-chat-avatar-agent {
  background: linear-gradient(145deg, #5db892, #3d9b72);
  box-shadow: 0 0 0 2px rgba(61, 155, 114, 0.3);
}

body.dark-mode .bizhero-chat-btn {
  background: #e8f2fc;
  color: #1e4a7a;
}

/* ========== TESTIMONIALS CAROUSEL ========== */
.tm-section {
  padding: 72px 0 80px;
  background: #c3e3ff7f;
}

.tm-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

.tm-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.tm-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-strong, #3b78c6);
  margin-bottom: 8px;
}

.tm-intro h2 {
  margin: 0 0 8px;
  font-size: clamp(24px, 3vw, 32px);
  color: var(--text, #172033);
  line-height: 1.25;
}

.tm-intro p {
  margin: 0;
  max-width: 480px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted, #64748b);
}

.tm-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.tm-tabs {
  display: inline-flex;
  padding: 4px;
  border-radius: 12px;
  background: var(--white, #fff);
  border: 1px solid var(--line, #e8edf4);
}

.tm-tab {
  border: 0;
  background: transparent;
  padding: 10px 18px;
  border-radius: 9px;
  font: 600 13px/1 "DM Sans", Arial, sans-serif;
  color: var(--muted, #64748b);
  cursor: pointer;
  transition: 0.2s ease;
}

.tm-tab.is-on {
  background: var(--blue, #d8eaff);
  color: var(--blue-strong, #3b78c6);
}

.tm-arrows {
  display: flex;
  gap: 8px;
}

.tm-arrow {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line, #e8edf4);
  background: var(--white, #fff);
  font-size: 18px;
  color: var(--text, #172033);
  cursor: pointer;
  transition: 0.2s ease;
}

.tm-arrow:hover {
  border-color: #b9d2f0;
  color: var(--blue-strong, #3b78c6);
  transform: translateY(-2px);
}

/* Carousel viewport + rail */
.tm-mode[hidden] {
  display: none !important;
}

.tm-viewport {
  overflow: hidden;
  width: 100%;
}

#tmModeVideo .tm-viewport {
  /* max-width: 780px; */
  margin: 0 auto;
}

.tm-rail {
  display: flex;
  gap: 20px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.tm-card {
  flex: 0 0 auto;
  width: min(320px, 82vw);
  background: var(--white, #fff);
  border: 1px solid var(--line, #e8edf4);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tm-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
}

.tm-card-review {
  flex: 0 0 calc((100% - 40px) / 3);
  width: calc((100% - 40px) / 3);
  max-width: calc((100% - 40px) / 3);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #ffffff;
  border: 1px solid rgba(180, 205, 245, 0.6);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04);
}

@media (max-width: 991px) {
  .tm-card-review {
    flex: 0 0 calc((100% - 20px) / 2);
    width: calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
  }
}

@media (max-width: 639px) {
  .tm-card-review {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
}

.tm-card-review:hover {
  transform: translateY(-4px);
  border-color: #bcd5f8;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
}

.tm-card-review .tm-stars {
  color: #eab308;
  letter-spacing: 1px;
  font-size: 15px;
}

.tm-card-review .tm-quote {
  color: #0f172a;
  font-size: 14.5px;
  line-height: 1.6;
  font-weight: 500;
}

.tm-card-review .tm-person {
  border-top: 1px solid rgba(148, 175, 215, 0.5);
}

.tm-card-review .tm-avatar {
  background: #172b4d;
  color: #ffffff;
}

.tm-card-review .tm-person strong {
  color: #0f172a;
}

.tm-card-review .tm-person small {
  color: #475569;
}

.tm-card.tm-card-video {
  flex: 0 0 calc((97% - 40px) / 4);
  width: calc((100% - 40px) / 3);
  max-width: calc((100% - 40px) / 3);
  border-radius: 18px;
  background: var(--white, #ffffff);
  border: 1px solid var(--line, rgba(180, 205, 245, 0.6));
  display: flex;
  flex-direction: column;
}

@media (max-width: 991px) {
  .tm-card.tm-card-video {
    flex: 0 0 calc((100% - 20px) / 2);
    width: calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
  }
}

@media (max-width: 639px) {
  .tm-card.tm-card-video {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
}

body.dark-mode .tm-card.tm-card-video {
  background: var(--white, #182235);
  border-color: var(--line, #2b3a51);
}

.tm-card-video:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.06);
}

.tm-thumb {
  position: relative;
  aspect-ratio: 9 / 16;
  background: #0b1329;
  border-radius: 17px 17px 0 0;
  overflow: hidden;
}

.tm-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.98;
  display: block;
  transition: transform 0.35s ease;
}

.tm-card-video:hover .tm-thumb img {
  transform: scale(1.04);
}

.tm-thumb video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
  background: #000;
}

.tm-thumb iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.tm-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: #1676bb;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  z-index: 2;
}

.tm-play:hover {
  transform: translate(-50%, -50%) scale(1.1);
  background: #ffffff;
  color: #0d5a94;
}

.tm-card-body {
  padding: 12px 14px 14px;
  background: transparent;
}

.tm-card-body h3 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.tm-card-body p {
  margin: 0;
  font-size: 12px;
  color: var(--muted, #64748b);
}

.tm-stars {
  color: #f5a623;
  letter-spacing: 1px;
  font-size: 14px;
}

.tm-quote {
  margin: 0;
  flex: 1;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text, #172033);
}

.tm-person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line, #e8edf4);
}

.tm-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--blue, #d8eaff);
  color: var(--blue-strong, #3b78c6);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

.tm-person strong {
  display: block;
  font-size: 14px;
  color: var(--text, #172033);
}

.tm-person small {
  display: block;
  font-size: 12.5px;
  color: var(--muted, #64748b);
}

.tm-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.tm-dots button {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: #c5d4e4;
  cursor: pointer;
  transition: 0.2s ease;
}

.tm-dots button.is-on {
  width: 22px;
  border-radius: 999px;
  background: var(--blue-strong, #3b78c6);
}

/* Dark */
body.dark-mode .tm-section { background: #0f172a; }
body.dark-mode .tm-intro h2,
body.dark-mode .tm-card-body h3,
body.dark-mode .tm-quote,
body.dark-mode .tm-person strong { color: var(--text, #edf4ff); }
body.dark-mode .tm-intro p,
body.dark-mode .tm-card-body p,
body.dark-mode .tm-person small { color: var(--muted, #a8b6c9); }
body.dark-mode .tm-tabs,
body.dark-mode .tm-arrow,
body.dark-mode .tm-card {
  background: var(--white, #182235);
  border-color: var(--line, #2b3a51);
}
body.dark-mode .tm-tab { color: var(--muted, #a8b6c9); }
body.dark-mode .tm-tab.is-on {
  background: var(--blue, #203b5d);
  color: var(--blue-strong, #9fc8ff);
}
body.dark-mode .tm-avatar {
  background: var(--blue, #203b5d);
  color: var(--blue-strong, #9fc8ff);
}
body.dark-mode .tm-person { border-top-color: var(--line, #2b3a51); }
body.dark-mode .tm-dots button { background: #3d4f66; }
body.dark-mode .tm-dots button.is-on { background: var(--blue-strong, #9fc8ff); }

body.dark-mode .tm-card-review {
  background: #dbe6fb !important;
  border-color: rgba(180, 205, 245, 0.6) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25) !important;
}

body.dark-mode .tm-card-review:hover {
  transform: translateY(-4px) !important;
  border-color: #bcd5f8 !important;
  box-shadow: 0 14px 36px rgba(186, 215, 255, 0.4), 0 0 25px rgba(255, 255, 255, 0.25) !important;
}

body.dark-mode .tm-card-review .tm-stars {
  color: #eab308 !important;
}

body.dark-mode .tm-card-review .tm-quote {
  color: #0f172a !important;
}

body.dark-mode .tm-card-review .tm-person {
  border-top-color: rgba(148, 175, 215, 0.5) !important;
}

body.dark-mode .tm-card-review .tm-avatar {
  background: #172b4d !important;
  color: #ffffff !important;
}

body.dark-mode .tm-card-review .tm-person strong {
  color: #0f172a !important;
}

body.dark-mode .tm-card-review .tm-person small {
  color: #475569 !important;
}

/* ========== PLANS ========== */
.plans-section {
  padding: 72px 0 88px;
  background: var(--bg, #f8fafc);
}

.plans-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

.plans-heading {
  text-align: center;
  margin-bottom: 40px;
}

.plans-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-strong, #3b78c6);
  margin-bottom: 10px;
}

.plans-heading h2 {
  margin: 0 0 10px;
  font-size: clamp(26px, 3.2vw, 34px);
  color: var(--text, #172033);
  line-height: 1.25;
}

.plans-heading p {
  margin: 0 auto;
  max-width: 520px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted, #64748b);
}

/* Plan Category Tabs (Visual twin of Approach categories) */
.plans-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 36px;
}

.plans-cat {
  border: 1px solid var(--line, #e8edf4);
  background: var(--white, #fff);
  color: var(--muted, #64748b);
  font: 600 13.5px/1 "DM Sans", Arial, sans-serif;
  padding: 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.plans-cat:hover {
  border-color: #b9d2f0;
  color: var(--blue-strong, #3b78c6);
}

.plans-cat.is-on {
  background: var(--blue-strong, #3b78c6);
  border-color: var(--blue-strong, #3b78c6);
  color: #fff;
  box-shadow: 0 8px 20px rgba(59, 120, 198, 0.25);
}

.plans-panel {
  display: none;
}

.plans-panel.is-on {
  display: block;
  animation: plansFade 0.35s ease;
}

.plans-panel[hidden] {
  display: none !important;
}

@keyframes plansFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.plan-subtitle {
  font-size: 13.5px;
  font-weight: 700;
  color: #1d4ed8;
  margin: 0 0 6px;
  line-height: 1.4;
}

.plan-desc {
  font-size: 13px;
  color: #475569;
  margin: 0 0 16px;
  line-height: 1.45;
}

.plan-price-old {
  text-decoration: line-through;
  font-size: 16px;
  color: #64748b;
  font-weight: 600;
  margin-right: 6px;
  display: inline-block;
  opacity: 0.85;
}

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

.plan-card {
  display: flex;
  flex-direction: column;
  padding: 28px 24px 26px;
  background: #dbe6fb;
  border: 1px solid rgba(180, 205, 245, 0.6);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  min-height: 420px;
}

.plan-card:hover {
  transform: translateY(-6px);
  border-color: #bcd5f8;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
}

.plan-card-featured {
  border: 2px solid #2563eb;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.22), 0 2px 8px rgba(37, 99, 235, 0.1);
  position: relative;
}

.plan-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.02em;
  background: #172b4d;
  color: #ffffff;
  margin-bottom: 14px;
}

.plan-badge-hot {
  background: #15803d;
  color: #ffffff;
}

.plan-title {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 800;
  color: #0f172a;
}

.plan-price {
  margin: 0 0 18px;
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.5px;
}

.plan-price span {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}

.plan-offers {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  flex: 1;
}

.plan-offers li {
  position: relative;
  padding: 8px 0 8px 22px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #1e293b;
  border-bottom: 1px solid rgba(148, 175, 215, 0.5);
}

.plan-offers li:last-child {
  border-bottom: 0;
}

.plan-offers li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 8px;
  color: #1d4ed8;
  font-weight: 800;
  font-size: 13px;
}

/* Limit visible features to first 5 by default across all plans */
.plan-offers li:nth-child(n+6) {
  display: none;
}

/* When expanded, smoothly reveal remaining points */
.plan-card.is-expanded .plan-offers li:nth-child(n+6) {
  display: list-item;
  animation: planOfferFade 0.25s ease;
}

@keyframes planOfferFade {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Toggle Dropdown & Collapse Button */
.plan-toggle-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  margin-top: 2px;
  margin-bottom: 18px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px dashed rgba(37, 99, 235, 0.35);
  border-radius: 8px;
  color: #1d4ed8;
  font: 600 12.5px/1 "DM Sans", Arial, sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

.plan-toggle-more:hover {
  background: rgba(37, 99, 235, 0.16);
  border-color: #1d4ed8;
  color: #1e40af;
}

.plan-toggle-icon {
  font-size: 9px;
  transition: transform 0.2s ease;
}

body.dark-mode .plan-toggle-more {
  background: inherit;
  border-color: rgba(37, 99, 235, 0.4);
  color: #1d4ed8;
}

body.dark-mode .plan-toggle-more:hover {
  background: rgba(37, 99, 235, 0.22);
  border-color: #1d4ed8;
}

.plan-cta {
  width: 100%;
  margin-top: auto;
  padding: 13px 16px;
  border: 0;
  border-radius: 12px;
  background: #1d4ed8;
  color: #fff;
  font: 700 14px/1 "DM Sans", Arial, sans-serif;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.plan-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(59, 120, 198, 0.3);
  background: #2f6bb5;
}

.plan-card-featured .plan-cta {
  background: #1f7a4d;
}

.plan-card-featured .plan-cta:hover {
  background: #196640;
  box-shadow: 0 10px 24px rgba(31, 122, 77, 0.3);
}

/* Modal */
.plan-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.plan-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.plan-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}

.plan-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  max-height: min(90vh, 640px);
  overflow-y: auto;
  padding: 28px 26px 24px;
  background: var(--white, #fff);
  border: 1px solid var(--line, #e8edf4);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.25s ease;
}

.plan-modal.is-open .plan-modal-dialog {
  transform: translateY(0) scale(1);
}

.plan-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted, #64748b);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.plan-modal-close:hover {
  background: var(--blue, #d8eaff);
  color: var(--blue-strong, #3b78c6);
}

.plan-modal-header {
  margin-bottom: 20px;
  padding-right: 28px;
}

.plan-modal-header h2 {
  margin: 0 0 6px;
  font-size: 22px;
  color: var(--text, #172033);
}

.plan-modal-header p {
  margin: 0;
  font-size: 14px;
  color: var(--muted, #64748b);
  line-height: 1.5;
}

.plan-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.plan-field {
  margin-bottom: 14px;
}

.plan-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text, #172033);
}

.plan-field label span {
  font-weight: 500;
  color: var(--muted, #64748b);
}

.plan-field input,
.plan-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line, #e8edf4);
  border-radius: 11px;
  background: var(--bg, #f8fafc);
  color: var(--text, #172033);
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.plan-field input:focus,
.plan-field textarea:focus {
  border-color: #b9d2f0;
  box-shadow: 0 0 0 3px rgba(59, 120, 198, 0.15);
}

.plan-field input[readonly] {
  background: var(--blue, #d8eaff);
  color: var(--blue-strong, #3b78c6);
  font-weight: 650;
  cursor: default;
}

.plan-submit {
  width: 100%;
  margin-top: 4px;
  padding: 13px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--blue-strong, #3b78c6);
  color: #fff;
  font: 650 14px/1 "DM Sans", Arial, sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.plan-submit:hover {
  background: #2f6bb5;
}

.plan-form-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted, #64748b);
  text-align: center;
  line-height: 1.45;
}

/* Dark mode */
body.dark-mode .plans-section {
  background: #122238;
}

body.dark-mode .plans-heading h2,
body.dark-mode .plan-modal-header h2 {
  color: var(--text, #edf4ff);
}

body.dark-mode .plans-heading p,
body.dark-mode .plan-modal-header p {
  color: var(--muted, #a8b6c9);
}

body.dark-mode .plan-card {
  background: #dbe6fb !important;
  border-color: rgba(180, 205, 245, 0.6) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .plan-card:hover {
  transform: translateY(-6px) !important;
  border-color: #bcd5f8 !important;
  box-shadow: 0 16px 45px rgba(186, 215, 255, 0.45), 0 0 30px rgba(255, 255, 255, 0.3) !important;
}

body.dark-mode .plan-card-featured {
  border: 2px solid #2563eb !important;
  box-shadow: 0 14px 40px rgba(37, 99, 235, 0.3), 0 0 25px rgba(255, 255, 255, 0.25) !important;
}

body.dark-mode .plan-title {
  color: #0f172a !important;
}

body.dark-mode .plan-price {
  color: #0f172a !important;
}

body.dark-mode .plan-price span {
  color: #475569 !important;
}

body.dark-mode .plan-offers li {
  color: #1e293b !important;
  border-bottom-color: rgba(148, 175, 215, 0.5) !important;
}

body.dark-mode .plan-offers li::before {
  color: #1d4ed8 !important;
}

body.dark-mode .plan-badge {
  background: #172b4d !important;
  color: #ffffff !important;
}

body.dark-mode .plan-badge-hot {
  background: #15803d !important;
  color: #ffffff !important;
}

body.dark-mode .plan-cta {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}

body.dark-mode .plan-card-featured .plan-cta {
  background: #16a34a !important;
  color: #ffffff !important;
}

body.dark-mode .plan-modal-dialog {
  background: var(--white, #182235);
  border-color: var(--line, #2b3a51);
}

body.dark-mode .plan-field input,
body.dark-mode .plan-field textarea {
  background: #101827;
  border-color: var(--line, #2b3a51);
  color: var(--text, #edf4ff);
}

body.dark-mode .plan-field input[readonly] {
  background: var(--blue, #203b5d);
  color: var(--blue-strong, #9fc8ff);
}

body.dark-mode .plan-badge {
  background: var(--blue, #203b5d);
  color: var(--blue-strong, #9fc8ff);
}

body.dark-mode .plans-cat {
  background: var(--white, #182235);
  border-color: var(--line, #2b3a51);
  color: var(--muted, #a8b6c9);
}

body.dark-mode .plans-cat:hover {
  color: var(--blue-strong, #9fc8ff);
  border-color: #3d5a7a;
}

body.dark-mode .plans-cat.is-on {
  background: var(--blue-strong, #3b78c6);
  border-color: var(--blue-strong, #3b78c6);
  color: #fff;
}

body.dark-mode .plan-subtitle {
  color: #1d4ed8 !important;
}

body.dark-mode .plan-desc {
  color: #334155 !important;
}

body.dark-mode .plan-price-old {
  color: #64748b !important;
}

/* =====================================================
   CUSTOMIZED PLAN CTA & MODAL
===================================================== */
.plans-custom-action {
  text-align: center;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.plans-custom-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 420px;
  margin: 0 auto 16px;
  position: relative;
}

.plans-custom-divider::before,
.plans-custom-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line, #e2e8f0);
}

.plans-custom-divider span {
  padding: 0 14px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.1em;
  color: var(--muted, #64748b);
  background: transparent;
  text-transform: uppercase;
}

.plans-custom-subtitle {
  margin: 0 0 18px;
  font-size: 15px;
  color: var(--muted, #64748b);
  font-weight: 500;
}

.plans-custom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 34px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #1d4ed8 0%, #3b78c6 100%);
  color: #ffffff;
  font: 700 15px/1 "DM Sans", Arial, sans-serif;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.plans-custom-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.38);
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
}

.plans-custom-btn:active {
  transform: translateY(0);
}

.plans-custom-btn svg {
  flex-shrink: 0;
}

/* Custom Plan Modal Specifics */
.custom-plan-dialog {
  width: min(560px, 100%) !important;
  max-height: min(92vh, 720px) !important;
}

.custom-services-select-field {
  margin-bottom: 16px;
}

.custom-services-count {
  font-size: 11.5px;
  font-weight: 650;
  color: var(--blue-strong, #3b78c6);
  margin-left: 6px;
}

.custom-search-container {
  position: relative;
  margin-bottom: 10px;
}

.custom-search-bar {
  position: relative;
  display: flex;
  align-items: center;
}

.custom-search-icon {
  position: absolute;
  left: 12px;
  color: var(--muted, #64748b);
  pointer-events: none;
}

.custom-search-bar input {
  padding-left: 36px !important;
  padding-right: 36px !important;
}

.custom-search-clear-btn {
  position: absolute;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--muted, #64748b);
  cursor: pointer;
  padding: 4px;
}

.custom-search-clear-btn:hover {
  color: var(--text, #172033);
}

.custom-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 220px;
  overflow-y: auto;
  background: var(--white, #ffffff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
  z-index: 100;
}

.custom-search-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  transition: background 0.15s ease;
  font-size: 13px;
  color: var(--text, #172033);
}

.custom-search-result-item:last-child {
  border-bottom: none;
}

.custom-search-result-item:hover,
.custom-search-result-item.is-selected {
  background: rgba(59, 120, 198, 0.08);
  color: var(--blue-strong, #1d4ed8);
}

.custom-result-cat {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted, #64748b);
  background: var(--bg, #f1f5f9);
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
  margin-left: 8px;
}

.custom-quick-tags-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.custom-quick-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, #64748b);
}

.custom-quick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.custom-quick-btn {
  background: var(--bg, #f1f5f9);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted, #475569);
  cursor: pointer;
  transition: all 0.15s ease;
}

.custom-quick-btn:hover {
  background: var(--blue, #d8eaff);
  color: var(--blue-strong, #1d4ed8);
  border-color: #bcd5f8;
}

.custom-selected-box {
  min-height: 52px;
  padding: 8px 10px;
  border: 1px dashed var(--line, #cbd5e1);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.8);
}

.custom-empty-hint {
  font-size: 12px;
  color: var(--muted, #94a3b8);
  text-align: center;
  padding: 8px 4px;
}

.custom-selected-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.custom-service-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eaf2fd;
  border: 1px solid #c2dbfc;
  color: #1e40af;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 8px;
  line-height: 1.2;
}

.custom-chip-remove {
  background: transparent;
  border: none;
  font-size: 14px;
  line-height: 1;
  color: #1e40af;
  cursor: pointer;
  padding: 0 2px;
  border-radius: 4px;
}

.custom-chip-remove:hover {
  background: rgba(30, 64, 175, 0.15);
  color: #dc2626;
}

.custom-services-error {
  font-size: 12px;
  color: #dc2626;
  margin-top: 5px;
  font-weight: 600;
}

/* Dark mode overrides for customized plan */
body.dark-mode .plans-custom-divider::before,
body.dark-mode .plans-custom-divider::after {
  background: rgba(255, 255, 255, 0.12);
}

body.dark-mode .plans-custom-divider span,
body.dark-mode .plans-custom-subtitle {
  color: var(--muted, #a8b6c9);
}

body.dark-mode .plans-custom-btn {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.4);
}

body.dark-mode .custom-search-results {
  background: #182235;
  border-color: #2b3a51;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

body.dark-mode .custom-search-result-item {
  color: #edf4ff;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .custom-search-result-item:hover,
body.dark-mode .custom-search-result-item.is-selected {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}

body.dark-mode .custom-result-cat {
  background: #101827;
  color: #94a3b8;
}

body.dark-mode .custom-quick-btn {
  background: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}

body.dark-mode .custom-quick-btn:hover {
  background: #1e3a8a;
  color: #bfdbfe;
  border-color: #3b82f6;
}

body.dark-mode .custom-selected-box {
  background: #111827;
  border-color: #374151;
}

body.dark-mode .custom-service-chip {
  background: #1e3a8a;
  border-color: #3b82f6;
  color: #e0e7ff;
}

body.dark-mode .custom-chip-remove {
  color: #e0e7ff;
}

body.dark-mode .custom-chip-remove:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fca5a5;
}

@media (max-width: 900px) {
  .plans-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }

  .plan-card {
    min-height: 0;
  }
}

@media (max-width: 520px) {
  .plan-form-row {
    grid-template-columns: 1fr;
  }
}

/* ========== OUR APPROACH ========== */
.approach-section {
  padding: 72px 0 88px;
  background: var(--bg, #f8fafc);
}

.approach-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

.approach-heading {
  text-align: center;
  margin-bottom: 40px;
}

.approach-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-strong, #3b78c6);
  margin-bottom: 10px;
}

.approach-heading h2 {
  margin: 0 0 12px;
  font-size: clamp(26px, 3.2vw, 34px);
  color: var(--text, #172033);
  line-height: 1.25;
}

.approach-heading p {
  margin: 0 auto;
  max-width: 560px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted, #64748b);
}

.approach-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.approach-card {
  display: flex;
  flex-direction: column;
  padding: 22px 20px 20px;
  background: #c3e3ff7f;
  border: 1px solid rgba(180, 205, 245, 0.6);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  min-height: 180px;
}

.approach-card:hover {
  transform: translateY(-5px);
  border-color: #bcd5f8;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
}

.approach-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #172b4d;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 14px;
}

.approach-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 750;
  color: #0f172a;
  line-height: 1.3;
}

.approach-card p {
  margin: 0 0 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #334155;
  flex: 1;
}

.approach-link {
  font-size: 13px;
  font-weight: 700;
  color: #1d4ed8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.approach-card:hover .approach-link span {
  transform: translateX(3px);
}

.approach-link span {
  display: inline-block;
  transition: transform 0.2s ease;
  color: #1d4ed8;
}

.approach-footer {
  text-align: center;
  margin-top: 36px;
}

.approach-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 12px;
  background: var(--blue-strong, #3b78c6);
  color: #fff;
  font: 650 14px/1 "DM Sans", Arial, sans-serif;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.approach-view-all:hover {
  transform: translateY(-2px);
  background: #2f6bb5;
  box-shadow: 0 12px 28px rgba(59, 120, 198, 0.28);
}

/* Dark mode */
body.dark-mode .approach-section {
  background: #122238;
}

body.dark-mode .approach-heading h2 {
  color: var(--text, #edf4ff);
}

body.dark-mode .approach-heading p {
  color: var(--muted, #a8b6c9);
}

body.dark-mode .approach-card h3 {
  color: #0f172a !important;
}

body.dark-mode .approach-card p {
  color: #334155 !important;
}

body.dark-mode .approach-card {
  background: #dbe6fb !important;
  border-color: rgba(180, 205, 245, 0.6) !important;
}

body.dark-mode .approach-card:hover {
  border-color: #bcd5f8 !important;
  box-shadow: 0 14px 36px rgba(186, 215, 255, 0.4), 0 0 25px rgba(255, 255, 255, 0.3) !important;
}

body.dark-mode .approach-icon {
  background: #172b4d !important;
  color: #ffffff !important;
}

body.dark-mode .approach-link,
body.dark-mode .approach-link span {
  color: #1d4ed8 !important;
}

@media (max-width: 1000px) {
  .approach-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

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

/* Category tabs */
.approach-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 32px;
}

.approach-cat {
  border: 1px solid var(--line, #e8edf4);
  background: #c3e3ff7f;
  color: var(--muted, #64748b);
  font: 600 13px/1 "DM Sans", Arial, sans-serif;
  padding: 11px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.approach-cat:hover {
  border-color: #b9d2f0;
  color: var(--blue-strong, #3b78c6);
}

.approach-cat.is-on {
  background: var(--blue-strong, #3b78c6);
  border-color: var(--blue-strong, #3b78c6);
  color: #fff;
  box-shadow: 0 8px 20px rgba(59, 120, 198, 0.25);
}

.approach-panel {
  display: none;
}

.approach-panel.is-on {
  display: block;
  animation: approachFade 0.3s ease;
}

.approach-panel[hidden] {
  display: none !important;
}

@keyframes approachFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* reuse .approach-grid, .approach-card, etc. from before */

body.dark-mode .approach-cat {
  background: var(--white, #182235);
  border-color: var(--line, #2b3a51);
  color: var(--muted, #a8b6c9);
}

body.dark-mode .approach-cat:hover {
  color: var(--blue-strong, #9fc8ff);
  border-color: #3d5a7a;
}

body.dark-mode .approach-cat.is-on {
  background: var(--blue-strong, #3b78c6);
  border-color: var(--blue-strong, #3b78c6);
  color: #fff;
}

/* ========== WHY US (Scroll-linked horizontal sliding cards) ========== */
.why-section {
  position: relative;
  width: 100%;
  background: var(--bg, #f8fafc);
  box-sizing: border-box;
}

.why-pin-wrap {
  position: relative;
  height: calc(100vh + 1400px);
}

.why-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
  padding: 40px 0 20px;
}

/* Soft edge fade so sliding cards don't clip harshly at screen edges */
.why-sticky::before,
.why-sticky::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  z-index: 5;
  pointer-events: none;
}

.why-sticky::before {
  left: 0;
  background: linear-gradient(to right, var(--bg, #f8fafc) 0%, transparent 100%);
}

.why-sticky::after {
  right: 0;
  background: linear-gradient(to left, var(--bg, #f8fafc) 0%, transparent 100%);
}

.why-heading {
  text-align: center;
  margin-bottom: 24px;
  padding: 0 20px;
  box-sizing: border-box;
  z-index: 3;
}

.why-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-strong, #3b78c6);
  margin-bottom: 8px;
}

.why-heading h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 2.8vw, 32px);
  color: var(--text, #172033);
  line-height: 1.25;
}

.why-heading p {
  margin: 0 auto;
  max-width: 580px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted, #64748b);
}

.why-progress {
  width: min(560px, 70vw);
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: rgba(180, 205, 245, 0.45);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  z-index: 3;
}

.why-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue-strong, #3b78c6), #1b4f91);
  box-shadow: 0 0 12px rgba(59, 120, 198, 0.45);
  transition: width 0.06s linear;
}

.why-counter {
  margin-bottom: 24px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--muted, #64748b);
  font-variant-numeric: tabular-nums;
  transition: color 0.25s ease;
  z-index: 3;
}

.why-track {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 20px;
  width: 70%;
  will-change: transform;
  z-index: 3;
}

.why-card {
  flex: 0 0 auto;
  width: 310px;
  padding: 24px 22px;
  background: #dbe6fb;
  border: 1px solid rgba(180, 205, 245, 0.6);
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(15, 23, 42, 0.03);
  position: relative;
  transform: scale(0.88) translateY(8px);
  opacity: 0.42;
  filter: saturate(0.7);
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.35s ease;
  will-change: transform, opacity;
  cursor: pointer;
  user-select: none;
}

.why-card.is-active {
  transform: scale(1.06) translateY(-8px);
  opacity: 1;
  filter: saturate(1);
  border-color: var(--blue-strong, #3b78c6);
  box-shadow:
    0 4px 14px rgba(15, 23, 42, 0.06),
    0 20px 48px rgba(59, 120, 198, 0.28);
}

.why-card.is-near {
  opacity: 0.72;
  filter: saturate(0.85);
  transform: scale(0.95) translateY(2px);
}

.why-card:hover {
  border-color: #bcd5f8;
}

.why-card.is-active:hover {
  border-color: var(--blue-strong, #3b78c6);
}

.why-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #172b4d;
  color: #ffffff;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 16px;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.why-card.is-active .why-icon {
  background: var(--blue-strong, #3b78c6);
  box-shadow: 0 0 16px rgba(59, 120, 198, 0.5);
  transform: scale(1.08);
}

.why-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 750;
  color: #0f172a;
}

.why-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #334155;
}

/* ========== OUR PROCESS (Matched to How We Work section from About Us) ========== */
.process-section {
  width: 100%;
  padding: 80px 0 92px;
  background: #f0f7ff;
  box-sizing: border-box;
}

.process-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.process-heading {
  text-align: center;
  margin-bottom: 52px;
}

.process-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 15px;
  border-radius: 999px;
  background: rgba(59, 120, 198, 0.12);
  color: var(--blue-strong, #3b78c6);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.process-heading h2 {
  margin: 0 0 12px;
  font-size: clamp(26px, 3.2vw, 36px);
  color: var(--text, #172033);
  line-height: 1.25;
  font-weight: 750;
}

.process-heading p {
  margin: 0 auto;
  max-width: 560px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted, #64748b);
}

.process-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.process-line {
  position: absolute;
  top: 26px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: rgba(180, 205, 245, 0.85);
  z-index: 1;
}

.process-step {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 10px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.process-step:hover {
  transform: translateY(-4px);
}

.process-num {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin: 0 auto 22px;
  border-radius: 50%;
  border: 1px solid rgba(180, 205, 245, 0.85);
  background: #ffffff;
  color: var(--blue-strong, #3b78c6);
  font-size: 13px;
  font-weight: 800;
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.process-step:hover .process-num {
  border-color: var(--blue-strong, #3b78c6);
  box-shadow: 0 0 0 6px rgba(59, 120, 198, 0.16);
  transform: scale(1.04);
}

.process-step h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 750;
  color: var(--text, #0f172a);
}

.process-step p {
  margin: 0 auto;
  max-width: 240px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted, #64748b);
}

.process-cta-wrap {
  text-align: center;
  margin-top: 36px;
}

.process-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 12px;
  background: var(--blue-strong, #3b78c6);
  color: #fff;
  font: 650 14px/1 "DM Sans", Arial, sans-serif;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.process-cta:hover {
  transform: translateY(-2px);
  background: #2f6bb5;
  box-shadow: 0 12px 28px rgba(59, 120, 198, 0.28);
}

/* Dark mode */
body.dark-mode .why-section {
  background: rgb(18, 34, 56);
}

body.dark-mode .why-sticky::before {
  background: linear-gradient(to right, rgb(18, 34, 56) 0%, transparent 100%);
}

body.dark-mode .why-sticky::after {
  background: linear-gradient(to left, rgb(18, 34, 56) 0%, transparent 100%);
}

body.dark-mode .why-progress {
  background: rgba(255, 255, 255, 0.12);
}

body.dark-mode .why-progress-bar {
  background: linear-gradient(90deg, #5c9df5, #3b78c6);
  box-shadow: 0 0 14px rgba(92, 157, 245, 0.55);
}

body.dark-mode .why-counter {
  color: #94a3b8;
}

body.dark-mode .process-section {
  background: #0b1220;
}

body.dark-mode .why-heading h2,
body.dark-mode .process-heading h2 {
  color: var(--text, #edf4ff);
}

body.dark-mode .why-heading p,
body.dark-mode .process-heading p {
  color: var(--muted, #a8b6c9);
}

body.dark-mode .process-eyebrow {
  background: rgba(92, 157, 245, 0.15);
  color: #5c9df5;
}

body.dark-mode .process-line {
  background: rgba(255, 255, 255, 0.12);
}

body.dark-mode .why-card h3 {
  color: #0f172a !important;
}

body.dark-mode .why-card p {
  color: #334155 !important;
}

body.dark-mode .why-card {
  background: #dbe6fb !important;
  border-color: rgba(180, 205, 245, 0.6) !important;
}

body.dark-mode .why-card:hover {
  border-color: #bcd5f8 !important;
  box-shadow: 0 14px 36px rgba(186, 215, 255, 0.4), 0 0 25px rgba(255, 255, 255, 0.3) !important;
}

body.dark-mode .why-card.is-active {
  border-color: #5c9df5 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3), 0 22px 52px rgba(59, 120, 198, 0.42) !important;
}

body.dark-mode .why-card.is-active .why-icon {
  background: #3b78c6 !important;
  box-shadow: 0 0 18px rgba(92, 157, 245, 0.6) !important;
}

body.dark-mode .why-icon {
  background: #172b4d !important;
  color: #ffffff !important;
}

body.dark-mode .process-step {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.dark-mode .process-num {
  background: #131f37 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: #5c9df5 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.dark-mode .process-step:hover .process-num {
  border-color: #5c9df5 !important;
  box-shadow: 0 0 0 6px rgba(92, 157, 245, 0.22) !important;
}

body.dark-mode .process-step h3 {
  color: #edf4ff !important;
}

body.dark-mode .process-step p {
  color: #94a3b8 !important;
}

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .why-pin-wrap {
    height: auto !important;
  }

  .why-sticky {
    position: static;
    height: auto;
    display: block;
    padding: 60px 0 40px;
    overflow: visible;
  }

  .why-sticky::before,
  .why-sticky::after,
  .why-progress,
  .why-counter {
    display: none;
  }

  .why-track {
    width: 100%;
    transform: none !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 10px 24px 28px;
    box-sizing: border-box;
  }

  .why-card,
  .why-card.is-active,
  .why-card.is-near {
    scroll-snap-align: center;
    width: 280px;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
  }
}

@media (max-width: 900px) {
  .process-timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: 36px 20px;
  }
  .process-line {
    display: none;
  }
}

@media (max-width: 560px) {
  .process-timeline {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ==========================================================================
   CONSULTATION CTA & LEAD FORM SECTION (AFTER PROCESS, BEFORE DISCLAIMER)
   ========================================================================== */
.home-lead-cta-section {
  position: relative;
  width: 100%;
  background: linear-gradient(135deg, #f0f6ff 0%, #e9f2fd 50%, #f4f8fe 100%);
  border-top: 1px solid rgba(175, 206, 237, 0.6);
  border-bottom: 1px solid rgba(175, 206, 237, 0.6);
  overflow: hidden;
  padding: 80px 0;
}

body.dark-mode .home-lead-cta-section {
  background: linear-gradient(145deg, #090e17 0%, #0d1627 50%, #0a111e 100%);
  border-top-color: rgba(255, 255, 255, 0.08);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.home-lead-cta-bg-glow {
  position: absolute;
  top: -120px;
  right: -80px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

body.dark-mode .home-lead-cta-bg-glow {
  background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0) 70%);
}

.home-lead-cta-container {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

.home-lead-cta-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 52px;
  align-items: center;
}

/* Left Column */
.home-lead-cta-content {
  display: flex;
  flex-direction: column;
}

.home-lead-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.09);
  color: #2563eb;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  margin-bottom: 18px;
  border: 1px solid rgba(37, 99, 235, 0.2);
  align-self: flex-start;
}

body.dark-mode .home-lead-eyebrow {
  background: rgba(92, 157, 245, 0.14);
  color: #5c9df5;
  border-color: rgba(92, 157, 245, 0.28);
}

.home-lead-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
  animation: ctaPulseDot 2s infinite ease-in-out;
}

body.dark-mode .home-lead-pulse-dot {
  background: #5c9df5;
  box-shadow: 0 0 0 3px rgba(92, 157, 245, 0.3);
}

@keyframes ctaPulseDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

.home-lead-title {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 850;
  line-height: 1.22;
  color: var(--text, #0f172a);
  margin: 0 0 16px;
  letter-spacing: -0.5px;
}

body.dark-mode .home-lead-title {
  color: #edf4ff;
}

.home-lead-subtitle {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--muted, #64748b);
  margin: 0 0 32px;
  max-width: 560px;
}

body.dark-mode .home-lead-subtitle {
  color: #94a3b8;
}

/* Feature Benefits List */
.home-lead-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px;
  margin-bottom: 34px;
}

.home-lead-feat-item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.home-lead-feat-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  border: 1px solid rgba(37, 99, 235, 0.18);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}

body.dark-mode .home-lead-feat-icon {
  background: rgba(92, 157, 245, 0.15);
  color: #5c9df5;
  border-color: rgba(92, 157, 245, 0.25);
}

.home-lead-feat-item strong {
  display: block;
  font-size: 14.5px;
  font-weight: 750;
  color: var(--text, #1e293b);
  margin-bottom: 2px;
  line-height: 1.35;
}

body.dark-mode .home-lead-feat-item strong {
  color: #f1f5f9;
}

.home-lead-feat-item span {
  display: block;
  font-size: 12.5px;
  color: var(--muted, #64748b);
  line-height: 1.45;
}

body.dark-mode .home-lead-feat-item span {
  color: #8fa2ba;
}

/* Direct Contact Bar */
.home-lead-contact-strip {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 22px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(175, 206, 237, 0.7);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(56, 97, 136, 0.05);
}

body.dark-mode .home-lead-contact-strip {
  background: rgba(20, 30, 48, 0.7);
  border-color: rgba(45, 64, 89, 0.8);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
}

.home-lead-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.home-lead-contact-icon {
  font-size: 20px;
}

.home-lead-contact-item .contact-lbl {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

body.dark-mode .home-lead-contact-item .contact-lbl {
  color: #8fa2ba;
}

.home-lead-contact-item .contact-val {
  display: block;
  font-size: 14.5px;
  font-weight: 750;
  color: #1e40af;
  text-decoration: none;
  transition: color 0.2s ease;
}

.home-lead-contact-item .contact-val:hover {
  color: #2563eb;
  text-decoration: underline;
}

body.dark-mode .home-lead-contact-item .contact-val {
  color: #60a5fa;
}

body.dark-mode .home-lead-contact-item .contact-val:hover {
  color: #93c5fd;
}

.home-lead-contact-divider {
  width: 1px;
  height: 34px;
  background: rgba(175, 206, 237, 0.8);
}

body.dark-mode .home-lead-contact-divider {
  background: rgba(255, 255, 255, 0.12);
}

/* Right Column: Form Card */
.home-lead-cta-form-wrapper {
  position: relative;
}

.home-lead-form-card {
  background: #ffffff;
  border: 1px solid rgba(175, 206, 237, 0.85);
  border-radius: 20px;
  padding: 34px 30px;
  box-shadow: 0 16px 42px rgba(56, 97, 136, 0.08), 0 2px 8px rgba(0, 0, 0, 0.02);
  position: relative;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

body.dark-mode .home-lead-form-card {
  background: #141d2e;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
}

.home-lead-form-header {
  margin-bottom: 20px;
}

.home-form-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #2563eb;
  margin-bottom: 6px;
  text-transform: uppercase;
}

body.dark-mode .home-form-eyebrow {
  color: #60a5fa;
}

.home-lead-form-header h3 {
  font-size: 21px;
  font-weight: 800;
  color: var(--text, #0f172a);
  margin: 0 0 6px;
  letter-spacing: -0.3px;
}

body.dark-mode .home-lead-form-header h3 {
  color: #ffffff;
}

.home-lead-form-header p {
  font-size: 13px;
  color: var(--muted, #64748b);
  margin: 0;
  line-height: 1.45;
}

body.dark-mode .home-lead-form-header p {
  color: #94a3b8;
}

/* Home Lead Form Specific Inputs */
.home-cta-form .lead-field {
  margin-bottom: 13px;
}

.home-cta-form .lead-field input,
.home-cta-form .lead-field select {
  font-size: 14.5px;
  padding: 11.5px 14px;
}

.home-cta-form .lead-submit {
  margin-top: 8px;
  padding: 13.5px 18px;
  font-size: 15px;
  font-weight: 750;
  border-radius: 12px;
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #3b82f6 100%);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.28);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.home-cta-form .lead-submit:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 10px 26px rgba(37, 99, 235, 0.38);
}

.home-cta-form .lead-submit:active {
  transform: translateY(0);
}

/* Responsive Breakpoints */
@media (max-width: 992px) {
  .home-lead-cta-section {
    padding: 60px 0;
  }
  .home-lead-cta-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .home-lead-cta-content {
    text-align: left;
  }
  .home-lead-title {
    max-width: 100%;
  }
  .home-lead-subtitle {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .home-lead-cta-section {
    padding: 48px 0;
  }
  .home-lead-features {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .home-lead-contact-strip {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .home-lead-contact-divider {
    display: none;
  }
  .home-lead-form-card {
    padding: 24px 18px;
  }
}

/* ========== SITE DISCLAIMER & PAYMENT NOTICE (INDEX) ========== */
.site-disclaimer-section {
  width: 100%;
  background: #f8fafc;
  /* border-top: 1px solid #e2e8f0; */
  /* border-bottom: 1px solid #0f172a; */
  padding: 38px 0 34px;
  box-sizing: border-box;
}

body.dark-mode .site-disclaimer-section {
  background: #0f172a;
  /* border-top-color: #1e293b;
  border-bottom-color: rgb(18, 34, 56); */
}

.site-disclaimer-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.site-disclaimer-block {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 22px 26px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

body.dark-mode .site-disclaimer-block {
  background: #131f33;
  border-color: #1e2f47;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.site-disclaimer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.site-disclaimer-icon {
  color: #0284c7;
  flex-shrink: 0;
}

.site-disclaimer-icon.payment-icon {
  color: #d97706;
}

body.dark-mode .site-disclaimer-icon {
  color: #38bdf8;
}

body.dark-mode .site-disclaimer-icon.payment-icon {
  color: #fbbf24;
}

.site-disclaimer-title {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: 0.3px;
  margin: 0;
  text-transform: uppercase;
}

body.dark-mode .site-disclaimer-title {
  color: #f1f5f9;
}

.site-disclaimer-text {
  font-size: 13.5px;
  line-height: 1.7;
  color: #475569;
  margin: 0;
  text-align: justify;
}

body.dark-mode .site-disclaimer-text {
  color: #94a3b8;
}

@media (max-width: 768px) {
  .site-disclaimer-section {
    padding: 28px 0 24px;
  }
  .site-disclaimer-block {
    padding: 18px 20px;
  }
  .site-disclaimer-text {
    font-size: 13px;
    line-height: 1.65;
    text-align: left;
  }
}

/* ========== FOOTER ========== */
.site-footer,
footer.site-footer,
.site-footer.reveal,
footer.site-footer.reveal {
  width: 100%;
  background: #0f172a;
  color: #a8b6c9;
  padding: 56px 0 0;
  box-sizing: border-box;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

body.dark-mode .site-footer{
  background-color: rgb(18, 34, 56);
}

.footer-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 36px 28px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-brand p {
  margin: 14px 0 18px;
  font-size: 14px;
  line-height: 1.65;
  max-width: 280px;
  color: #a8b6c9;
}

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

.footer-social {
  display: flex;
  gap: 10px;
      margin-top: 50px;
    padding-left: 15px;
}

.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #ffffff !important;
  font-size: 11.5px;
  font-weight: 750;
  text-transform: uppercase;
  text-decoration: none;
  display: grid;
  place-items: center;
  border: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.25s cubic-bezier(0.2, 0, 0, 1);
}

.footer-social a:hover {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

.footer-social a[aria-label="LinkedIn"] {
  background: #0a66c2 !important;
}

.footer-social a[aria-label="Instagram"] {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
}

.footer-social a[aria-label="Facebook"] {
  background: #1877f2 !important;
}

.footer-social a[aria-label="YouTube"] {
  background: #ff0000 !important;
}

/* Visitor Count Badge Card */
.footer-visitor-card {
  margin-top: 18px;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  width: fit-content;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transition: all 0.25s ease;
  margin-left: 15px;
}

.footer-visitor-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

.visitor-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.visitor-card-header .visitor-icon {
  color: #38bdf8;
  stroke: #38bdf8;
  flex-shrink: 0;
}

.visitor-counter-display {
  display: flex;
  align-items: center;
  min-height: 24px;
}

.visitor-digit-grid {
  display: inline-flex;
  align-items: center;
  gap: 2.5px;
  background: rgba(0, 0, 0, 0.35);
  padding: 3px 4px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.visitor-digit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 20px;
  padding: 0 3px;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 4px;
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, 'Roboto Mono', monospace;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  letter-spacing: 0;
  user-select: none;
  transition: all 0.2s ease;
}

body.dark-mode .visitor-digit-grid {
  background: rgba(0, 0, 0, 0.55);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .visitor-digit {
  background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
  color: #38bdf8;
  border-color: rgba(56, 189, 248, 0.35);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.dark-mode .footer-visitor-card {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(255, 255, 255, 0.09);
}

.footer-col h4 {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #edf4ff;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-col li {
  margin-bottom: 10px;
}

.footer-col a {
  color: #a8b6c9;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: #9fc8ff;
}

.footer-contact li {
  margin-bottom: 14px;
}

.footer-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7c94;
  margin-bottom: 3px;
}

.footer-contact address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
  color: #a8b6c9;
}

.footer-contact span:not(.footer-label) {
  font-size: 14px;
  color: #a8b6c9;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 0 24px;
}

.footer-bottom p {
  margin: 0;
  font-size: 13px;
  color: #6b7c94;
}

.footer-legal {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.footer-legal a {
  font-size: 13px;
  color: #6b7c94;
  text-decoration: none;
}

.footer-legal a:hover {
  color: #9fc8ff;
}

/* Light footer if page is not dark-heavy — optional override
   Keep dark footer for contrast under light sections */

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

@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ========== STATS STRIP ========== */
.stats-section {
  width: 100%;
  padding: 48px 0;
  background: linear-gradient(135deg, #1a3a5c 0%, #2f6bb5 55%, #3b78c6 100%);
  box-sizing: border-box;
}

.stats-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.stats-card {
  text-align: center;
  padding: 28px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  transition: transform 0.25s ease, background 0.25s ease;
}

.stats-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.16);
}

.stats-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin-bottom: 8px;
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.5px;
}

.stats-prefix {
  font-size: 0.7em;
  font-weight: 700;
  opacity: 0.95;
}

.stats-num {
  font-variant-numeric: tabular-nums;
}

.stats-label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.02em;
}

/* Optional light variant if you prefer soft bg instead of blue
.stats-section.stats-light {
  background: #f0f6fc;
}
.stats-section.stats-light .stats-card {
  background: var(--white, #fff);
  border-color: var(--line, #e8edf4);
  box-shadow: 0 10px 28px rgba(31, 41, 55, 0.06);
}
.stats-section.stats-light .stats-value { color: var(--blue-strong, #3b78c6); }
.stats-section.stats-light .stats-label { color: var(--muted, #64748b); }
*/

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

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

/* ========== SCROLL REVEAL ========== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Footer must never be hidden or delayed by scroll reveal */
.site-footer,
.site-footer.reveal,
footer.site-footer,
footer.site-footer.reveal {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Optional variants */
.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition:
    opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger children (cards in a grid) */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.19s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.26s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.33s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.40s; }
.reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.47s; }
.reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 0.54s; }

.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ========== LEAD MODAL ========== */
.lead-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.lead-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.lead-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(4px);
}

.lead-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  max-height: min(90vh, 620px);
  overflow-y: auto;
  padding: 28px 26px 24px;
  background: var(--white, #fff);
  border: 1px solid var(--line, #e8edf4);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.25s ease;
}

.lead-modal.is-open .lead-modal-dialog {
  transform: translateY(0) scale(1);
}

.lead-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted, #64748b);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.lead-modal-close:hover {
  background: var(--blue, #d8eaff);
  color: var(--blue-strong, #3b78c6);
}

.lead-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-strong, #3b78c6);
  margin-bottom: 8px;
}

.lead-modal-header {
  margin-bottom: 20px;
  padding-right: 28px;
}

.lead-modal-header h2 {
  margin: 0 0 6px;
  font-size: 22px;
  color: var(--text, #172033);
}

.lead-modal-header p {
  margin: 0;
  font-size: 14px;
  color: var(--muted, #64748b);
  line-height: 1.5;
}

.lead-field {
  margin-bottom: 14px;
}

.lead-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text, #172033);
}

.lead-field input,
.lead-field select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line, #e8edf4);
  border-radius: 11px;
  background: var(--bg, #f8fafc);
  color: var(--text, #172033);
  font: inherit;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lead-field input:focus,
.lead-field select:focus {
  border-color: #b9d2f0;
  box-shadow: 0 0 0 3px rgba(59, 120, 198, 0.15);
}

.lead-field select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.lead-submit {
  width: 100%;
  margin-top: 6px;
  padding: 13px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--blue-strong, #3b78c6);
  color: #fff;
  font: 650 14px/1 "DM Sans", Arial, sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.lead-submit:hover {
  background: #2f6bb5;
}

.lead-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--muted, #64748b);
  text-align: center;
  line-height: 1.45;
}

/* Form Success Notification Box (Hidden by default, shown upon successful submission) */
.cr-form-success,
.form-success-msg {
  display: none;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(46, 133, 90, 0.12);
  border: 1px solid rgba(46, 133, 90, 0.3);
  color: #246e49;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  animation: crFadeIn 0.3s ease;
}

body.dark-mode .cr-form-success,
body.dark-mode .form-success-msg {
  background: rgba(52, 199, 130, 0.15);
  border-color: rgba(52, 199, 130, 0.35);
  color: #4ade80;
}

.cr-form-success.show,
.form-success-msg.show {
  display: block !important;
}

@keyframes crFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Desktop only: hide trigger behaviour note — modal works on all sizes;
   if you want modal only on desktop, use media query in JS below */

body.dark-mode .lead-modal-dialog {
  background: var(--white, #182235);
  border-color: var(--line, #2b3a51);
}

body.dark-mode .lead-modal-header h2,
body.dark-mode .lead-field label {
  color: var(--text, #edf4ff);
}

body.dark-mode .lead-modal-header p,
body.dark-mode .lead-note {
  color: var(--muted, #a8b6c9);
}

body.dark-mode .lead-field input,
body.dark-mode .lead-field select {
  background: #101827;
  border-color: var(--line, #2b3a51);
  color: var(--text, #edf4ff);
}

/* ========== DUAL ON-LOAD POPUP MODAL (SIDE BY SIDE + SINGLE CLOSE) ========== */
.dual-popup-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.dual-popup-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.dual-popup-wrapper {
  position: relative;
  z-index: 2;
  max-width: 900px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.dual-popup-modal.is-open .dual-popup-wrapper {
  transform: translateY(0) scale(1);
}

/* Single Unified Close Button for Both Popups */
.dual-popup-close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0b1329;
  border: 2px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  z-index: 20;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.dual-popup-close:hover {
  background: #ef4444;
  border-color: #ef4444;
  transform: scale(1.08) rotate(90deg);
}

/* ========== UNIFIED SINGLE ON-LOAD POPUP CARD ========== */
.dual-popup-grid {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 0; /* Pure single card - zero gap */
  width: 85%;
  max-width: 890px;
  max-height: min(92vh, 670px);
  overflow-y: auto; /* Single unified scrollbar for the entire card */
  overflow-x: hidden;
  box-sizing: border-box;
  background: linear-gradient(155deg, #091a36 0%, #0f274e 45%, #193f77 100%) !important;
  border: 1.5px solid rgba(147, 197, 253, 0.35);
  border-radius: 24px;
  box-shadow: 0 25px 70px rgba(2, 6, 23, 0.75), 0 0 45px rgba(37, 99, 235, 0.25);
  scrollbar-width: thin;
  scrollbar-color: rgba(147, 197, 253, 0.35) transparent;
}

.dual-popup-grid::-webkit-scrollbar {
  width: 6px;
}
.dual-popup-grid::-webkit-scrollbar-track {
  background: transparent;
}
.dual-popup-grid::-webkit-scrollbar-thumb {
  background: rgba(147, 197, 253, 0.35);
  border-radius: 999px;
}

/* Identical Dimensions & Transparent Background for Both Columns of the Single Card */
.dual-popup-grid .funding-poster-dialog.portrait-poster,
.dual-popup-grid .lead-modal-dialog,
body.dark-mode .dual-popup-grid .lead-modal-dialog {
  flex: 1 1 50%;
  max-width: 50%;
  width: 50%;
  margin: 0;
  padding: 30px 28px 26px 28px;
  background: transparent !important; /* Seamless single card background */
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-height: none !important; /* One scroll only - parent scrolls */
  overflow: visible !important; /* Disable independent scrolling */
  box-sizing: border-box;
  transform: none !important;
  transition: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #ffffff;
}

/* Subtle Vertical Divider between Left (Poster) and Right (Form) inside the Single Card */
.dual-popup-grid .funding-poster-dialog.portrait-poster {
  position: relative;
  /* border-right: 1px solid rgba(147, 197, 253, 0.18) !important; */
}

/* Hide internal separate close buttons */
.dual-popup-grid .lead-modal-close,
.dual-popup-grid .funding-poster-close {
  display: none !important;
}

/* Symmetrical Eyebrow Pill Badges for Both Columns */
.funding-poster-badge,
.dual-popup-grid .lead-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #fbbf24;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
  width: fit-content;
}

.funding-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fbbf24;
  box-shadow: 0 0 8px #fbbf24;
  animation: pulseGlow 1.8s infinite;
}

/* Symmetrical Headers for Both Columns */
.funding-poster-title,
.dual-popup-grid .lead-modal-header h2 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.34;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.funding-poster-desc,
.dual-popup-grid .lead-modal-header p {
  margin: 0 0 16px;
  font-size: 13.5px;
  color: #cbd5e1;
  line-height: 1.5;
}

/* Left Column: 3 Highlights Stacked */
.portrait-poster .funding-poster-highlights {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 20px;
}

.portrait-poster .funding-highlight-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  text-align: left;
  backdrop-filter: blur(10px);
}

.portrait-poster .fhc-value {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #38bdf8;
  margin-bottom: 0;
  white-space: nowrap;
  min-width: 90px;
}

.portrait-poster .fhc-label {
  display: block;
  font-size: 11.5px;
  color: #cbd5e1;
  line-height: 1.35;
  font-weight: 500;
  text-align: right;
}

/* Right Column: Form Fields Styled in Glass Dark Theme */
.dual-popup-grid .lead-field {
  margin-bottom: 10px;
}

.dual-popup-grid .lead-field label {
  display: block;
  margin-bottom: 4px;
  font-size: 11.5px;
  font-weight: 650;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dual-popup-grid .lead-field input,
.dual-popup-grid .lead-field select {
  width: 100%;
  padding: 9.5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  font: inherit;
  font-size: 13.5px;
  outline: none;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.dual-popup-grid .lead-field input::placeholder {
  color: #94a3b8;
}

.dual-popup-grid .lead-field input:focus,
.dual-popup-grid .lead-field select:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

.dual-popup-grid .lead-field select {
  background-color: rgba(255, 255, 255, 0.07);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2338bdf8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  appearance: none;
  -webkit-appearance: none;
}

.dual-popup-grid .lead-field select option {
  background: #0f274e;
  color: #ffffff;
}

/* Symmetrical Bottom CTA Buttons for Both Columns */
.funding-poster-cta,
.dual-popup-grid .lead-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  padding: 0 20px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #0b1727 !important;
  font: 800 14.5px/1 "DM Sans", Arial, sans-serif;
  text-decoration: none;
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.38);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  box-sizing: border-box;
}

.dual-popup-grid .lead-submit {
  margin-top: 10px;
}

/* Submit Row with WhatsApp Square Button */
.lead-submit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
}

.lead-submit-row .lead-submit,
.dual-popup-grid .lead-submit-row .lead-submit {
  flex: 1;
  width: auto;
  margin-top: 0 !important;
  height: 48px;
  padding: 0 16px;
  white-space: nowrap;
}

.lead-whatsapp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  background: #25d366;
  color: #ffffff !important;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}

.lead-whatsapp-btn:hover {
  transform: translateY(-2px);
  background: #20ba59;
  box-shadow: 0 12px 26px rgba(37, 211, 102, 0.5);
  color: #ffffff !important;
}

.lead-whatsapp-btn:active {
  transform: translateY(0);
}

.funding-poster-cta:hover,
.dual-popup-grid .lead-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(245, 158, 11, 0.5);
  filter: brightness(1.05);
}

.funding-poster-cta:active,
.dual-popup-grid .lead-submit:active {
  transform: translateY(0);
}

.dual-popup-grid .lead-note {
  color: #94a3b8;
  font-size: 11px;
  text-align: center;
  margin-top: 8px;
  margin-bottom: 0;
}

.dual-popup-grid .cr-form-success {
  background: rgba(16, 185, 129, 0.18);
  border: 1px solid #10b981;
  color: #6ee7b7;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  margin-top: 10px;
}

/* Dual Popup Tabs (Mobile Segmented Switcher) - Hidden by default on Desktop */
.dual-popup-tabs {
  display: none !important;
}

.poster-mobile-switch-hint,
.lead-mobile-switch-hint {
  display: none !important;
}

/* Mode: Lead Only (e.g. Chat Trigger, Quotation, Floating Lead Button) */
.lead-modal.lead-only .dual-popup-wrapper {
  max-width: 440px;
}

.lead-modal.lead-only .portrait-poster {
  display: none !important;
}

.lead-modal.lead-only .dual-popup-grid {
  max-width: 440px;
}

.lead-modal.lead-only .lead-modal-dialog {
  flex: 1 1 100%;
  max-width: 100%;
}

.lead-modal.lead-only .dual-popup-tabs {
  display: none !important;
}

/* Mobile & Tablet Responsiveness (< 881px) */
@media (max-width: 880px) {
  .dual-popup-wrapper {
    width: 92vw;
    max-width: 430px;
    margin: auto;
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .dual-popup-close {
    top: -12px;
    right: -4px;
    width: 34px;
    height: 34px;
    font-size: 19px;
    z-index: 25;
  }

  /* Segmented iOS / Glass Pill Tab Switcher */
  .dual-popup-tabs {
    display: flex !important;
    align-items: center;
    justify-content: stretch;
    background: rgba(10, 25, 47, 0.88);
    border: 1px solid rgba(147, 197, 253, 0.28);
    border-radius: 999px;
    padding: 4px;
    margin: 0 0 10px 0;
    backdrop-filter: blur(12px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    z-index: 10;
  }

  .dual-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 999px;
    color: #94a3b8;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 750;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }

  .dual-tab-btn .dual-tab-icon {
    font-size: 13px;
    line-height: 1;
  }

  .dual-tab-btn.active {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    box-shadow: 0 3px 12px rgba(37, 99, 235, 0.45);
  }

  .dual-tab-btn:not(.active):hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.05);
  }

  .dual-popup-grid {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-height: calc(88vh - 54px);
    border-radius: 20px;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Mobile Tab Display Switching */
  .dual-popup-grid:not([data-active-tab="lead"]) #fundingPosterModal {
    display: flex !important;
  }

  .dual-popup-grid:not([data-active-tab="lead"]) #leadModalCard,
  .dual-popup-grid:not([data-active-tab="lead"]) #onLoadLeadModalCard {
    display: none !important;
  }

  .dual-popup-grid[data-active-tab="lead"] #fundingPosterModal {
    display: none !important;
  }

  .dual-popup-grid[data-active-tab="lead"] #leadModalCard,
  .dual-popup-grid[data-active-tab="lead"] #onLoadLeadModalCard {
    display: flex !important;
  }

  /* When lead-only mode is active (e.g. quote / chat consultation) */
  .lead-modal.lead-only .dual-popup-tabs {
    display: none !important;
  }

  .lead-modal.lead-only #fundingPosterModal {
    display: none !important;
  }

  .lead-modal.lead-only #leadModalCard,
  .lead-modal.lead-only #onLoadLeadModalCard {
    display: flex !important;
  }

  /* Mobile Card Internal Dimensions & Padding */
  .dual-popup-grid .funding-poster-dialog.portrait-poster,
  .dual-popup-grid .lead-modal-dialog {
    max-width: 100% !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    padding: 22px 18px 18px 18px !important;
    border: none !important;
    box-sizing: border-box;
    animation: fadeInDualTab 0.22s ease-out;
  }

  @keyframes fadeInDualTab {
    from {
      opacity: 0;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Streamlined Poster Elements on Mobile */
  .funding-poster-badge,
  .dual-popup-grid .lead-eyebrow {
    font-size: 10.5px;
    padding: 3px 10px;
    margin-bottom: 8px;
    gap: 5px;
  }

  .funding-poster-title,
  .dual-popup-grid .lead-modal-header h2 {
    font-size: 17.5px;
    line-height: 1.32;
    margin-bottom: 6px;
  }

  .funding-poster-desc,
  .dual-popup-grid .lead-modal-header p {
    font-size: 12px;
    line-height: 1.45;
    margin-bottom: 12px;
    color: #94a3b8;
  }

  .portrait-poster .funding-poster-highlights {
    gap: 7px;
    margin-bottom: 16px;
  }

  .portrait-poster .funding-highlight-card {
    padding: 7px 11px;
    gap: 10px;
    border-radius: 10px;
  }

  .portrait-poster .fhc-value {
    font-size: 14.5px;
    min-width: 78px;
  }

  .portrait-poster .fhc-label {
    font-size: 11px;
    line-height: 1.3;
  }

  .funding-poster-cta,
  .dual-popup-grid .lead-submit {
    height: 44px;
    font-size: 13.5px;
    border-radius: 10px;
  }

  .dual-popup-grid .lead-submit {
    margin-top: 6px;
  }

  .lead-submit-row {
    margin-top: 6px;
    gap: 8px;
  }

  .lead-submit-row .lead-submit,
  .dual-popup-grid .lead-submit-row .lead-submit {
    height: 44px;
    font-size: 13.5px;
    border-radius: 10px;
    padding: 0 10px;
  }

  .lead-whatsapp-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
  }

  /* Streamlined Form Fields on Mobile */
  .dual-popup-grid .lead-field {
    margin-bottom: 8px;
  }

  .dual-popup-grid .lead-field label {
    font-size: 11px;
    margin-bottom: 3px;
  }

  .dual-popup-grid .lead-field input,
  .dual-popup-grid .lead-field select {
    padding: 8px 11px;
    font-size: 13px;
    border-radius: 9px;
  }

  /* Mobile Interactive Switch Links Between Tabs */
  .poster-mobile-switch-hint,
  .lead-mobile-switch-hint {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 11.5px;
    color: #94a3b8;
  }

  .poster-switch-link {
    background: none;
    border: none;
    color: #38bdf8;
    font-size: 11.5px;
    font-weight: 700;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
  }

  .poster-switch-link:hover,
  .poster-switch-link:focus {
    color: #7dd3fc;
  }
}

/* ========== CIRCULAR FLOATING LEAD BUTTON ========== */
.floating-lead-btn {
  position: fixed;
  bottom: 26px;
  right: 26px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #3b82f6 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9990;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
  animation: pulseGlow 2.5s infinite;
}

.floating-lead-btn:hover {
  transform: scale(1.08) translateY(-3px);
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.6);
}

.floating-lead-btn:active {
  transform: scale(0.95);
}

.floating-lead-pulse {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 10px;
  height: 10px;
  background: #22c55e;
  border: 2px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
}

.floating-lead-tooltip {
  position: absolute;
  right: calc(100% + 12px);
  background: #0f172a;
  color: #ffffff;
  font-size: 12px;
  font-weight: 650;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.floating-lead-btn:hover .floating-lead-tooltip {
  opacity: 1;
  transform: translateX(0);
}

@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.55); }
  70% { box-shadow: 0 0 0 14px rgba(37, 99, 235, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

@media (max-width: 600px) {
  .funding-poster-highlights {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .funding-poster-title {
    font-size: 20px;
  }

  .floating-lead-btn {
    bottom: 20px;
    right: 20px;
    width: 52px;
    height: 52px;
  }

  .floating-lead-tooltip {
    display: none;
  }
}

.search-form {
  width: 100%;
  box-sizing: border-box;
}

.search-suggestions {
  width: 100%;              /* same width as search form */
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 12px;
  display: flex;
  flex-direction: column;   /* Popular on top, results below */
  gap: 12px;
}

.search-popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.search-popular span {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #64748b);
  margin-right: 2px;
}

.search-popular button {
  border: 1px solid var(--line, #e8edf4);
  background: var(--white, #fff);
  color: var(--text, #172033);
  font: 600 12px/1 "DM Sans", Arial, sans-serif;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.search-popular button:hover {
  border-color: #b9d2f0;
  background: var(--blue, #d8eaff);
  color: var(--blue-strong, #3b78c6);
}

/* Results list — full width of search bar, under Popular */
.search-results {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--white, #fff);
  border: 1px solid var(--line, #e8edf4);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(31, 41, 55, 0.1);
  max-height: min(300px, 45vh);
  overflow-y: auto;
}

.search-results[hidden] {
  display: none !important;
}

.search-result-item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}

.search-result-item:hover,
.search-result-item.is-active {
  background: var(--blue, #d8eaff);
}

.search-result-title {
  display: block;
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text, #172033);
  line-height: 1.3;
}

.search-result-cat {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--muted, #64748b);
}

.search-empty {
  padding: 14px 12px;
  font-size: 13px;
  color: var(--muted, #64748b);
  text-align: center;
}

/* Dark mode */
body.dark-mode .search-popular button {
  background: var(--white, #182235);
  border-color: var(--line, #2b3a51);
  color: var(--text, #edf4ff);
}

body.dark-mode .search-popular button:hover {
  background: var(--blue, #203b5d);
  border-color: #3d5a7a;
  color: var(--blue-strong, #9fc8ff);
}

body.dark-mode .search-results {
  background: var(--white, #182235);
  border-color: var(--line, #2b3a51);
}

body.dark-mode .search-result-item:hover,
body.dark-mode .search-result-item.is-active {
  background: var(--blue, #203b5d);
}

body.dark-mode .search-result-title {
  color: var(--text, #edf4ff);
}

body.dark-mode .search-result-cat,
body.dark-mode .search-empty {
  color: var(--muted, #a8b6c9);
}

.bizhero {
  position: relative;
  overflow: hidden;
  top: 0;
  /* keep your existing padding/layout */
}

/* Background image layer */
.bizhero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/icons/pexels-art-by-andia-1063290491-20580802.jpg"); /* your path */
  background-size: cover;
  background-position: center bottom; /* building sits lower; sky fills top */
  background-repeat: no-repeat;
  opacity: 0.6; /* low opacity — try 0.08–0.18 */
  pointer-events: none;
}

/* Soft fade so text stays readable */
.bizhero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    105deg,
    rgba(248, 250, 252, 0.75) 20%,
    rgba(248, 250, 252, 0.45) 110%
  );
  opacity: 0.9;
  pointer-events: none;
}

/* Content above background */
.bizhero-container {
  position: relative;
  z-index: 1;
}

body.dark-mode .bizhero::before {
  opacity: 0.5;
}

body.dark-mode .bizhero::after {
  background: linear-gradient(
    105deg,
    rgba(15, 23, 42, 0.92) 0%,
    rgba(15, 23, 42, 0.8) 45%,
    rgba(15, 23, 42, 0.55) 100%
  );
}


/* =========================================================
   3-ROW HEADER (refactored)
========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background 0.3s ease,
    backdrop-filter 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.site-header.scrolled {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 30px rgba(50, 90, 130, 0.08);
  border-bottom-color: rgba(190, 210, 235, 0.65);
}

body.dark-mode .site-header.scrolled {
  background: rgba(16, 26, 41, 0.9);
}

.header-row {
  width: 100%;
}

.header-row-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
}

/* Row 1 */
.header-row-1 {
  /* border-bottom: 1px solid rgba(190, 210, 235, 0.35); */
  background: rgba(248, 250, 252, 0.65);
}

.header-row-1 .header-row-inner {
  min-height: var(--header-row1-h);
  justify-content: end;
}

.header-iso {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  padding: 4px 0;
  transition: opacity 0.2s ease;
}

.header-iso:hover {
  opacity: 0.85;
}

.header-iso-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

.header-utils {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.header-row-1 .toll-free {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #17364f;
  text-decoration: none;
  white-space: nowrap;
  border-right: 1px solid #d9e3eb;
  padding-right: 12px;
}

.header-row-1 .toll-free .toll-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: inherit;
}

.header-row-1 .toll-free .toll-icon svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: currentColor;
}

body.dark-mode .header-row-1 .toll-free .toll-icon,
body.dark-mode .header-row-1 .toll-free .toll-icon svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.header-row-1 .toll-free .toll-content {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.header-row-1 .toll-free small {
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
}

.header-row-1 .toll-free strong {
  font-size: 13px;
  font-weight: 700;
  color: inherit;
}

.header-row-1 .toll-free:hover {
  color: var(--blue-strong);
}

.header-row-1 .language-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  border: 1px solid color-mix(in srgb, var(--text, #edf4ff) 18%, transparent)
}

.header-row-1 .language-control select,
.header-row-1 .lang-select {
  /* border: 1px solid var(--line); */
  background: var(--white);
  color: var(--text);
  font: 650 12px/1 "DM Sans", Arial, sans-serif;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}

.header-row-1 .theme-toggle {
  height: 34px;
  min-width: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 650;
  color: var(--text);
}

.header-row-1 .theme-toggle:hover,.language-control:hover {
  background: var(--blue);
  border-color: #b9d2f0;
}



/* Row 2: logo left | services + hamburger right */
.header-row-2 .header-row-inner.topbar {
  min-height: var(--header-row2-h, 72px);
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.header-row-2 .brand {
  flex: 0 0 auto;
  margin-right: auto;
  min-width: 0;
}

.header-row-2 .navbar-logo {
  display: block;
  height: 48px;
  width: auto;
  max-width: min(220px, 40vw);
  object-fit: contain;
}

.header-row-2 .service-nav {
  flex: 0 1 auto;
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 2px;
  min-width: 0;
  max-width: none;
  overflow: visible !important; /* required for dropdowns */
  position: relative;
  z-index: 50;
}

.header-row-2 .nav-dropdown {
  position: relative;
  z-index: 51;
}

.header-row-2 .mega-dropdown,
.header-row-2 .dropdown-menu {
  z-index: 1200;
}

.header-row-2 .service-btn {
  font-size: 14px;
  padding: 10px 8px;
  white-space: nowrap;
}

.header-row-2 .header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: 8px;
}

/* Row 3 — always-visible search */
.header-row-3 {
  padding: 0 0 12px;
}

.header-search-wrap {
  flex-direction: column;
  align-items: stretch;
  padding: 0 32px;
  gap: 0;
  position: relative;
  box-sizing: border-box;
}

.header-search-inline {
  width: 100%;
  max-width: 100%;
  height: 48px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  align-self: flex-end;
  gap: 12px;
  padding: 0 16px;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--text, #172033) 16%, transparent) !important;
  border-radius: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-sizing: border-box;
}

.header-search-inline:focus-within {
  border-color: #b9d2f0;
  box-shadow: 0 0 0 3px rgba(59, 120, 198, 0.12);
  background: var(--white);
}

.header-search-inline svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
}

.header-search-inline input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.header-search-inline input::placeholder {
  color: #94a3b8;
}

.header-row-3 .search-suggestions {
  position: absolute;
  top: 100%;
  z-index: 1200;
  margin-top: 6px;
  display: none;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
  background: var(--white, #ffffff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
  padding: 12px 16px;
}

.header-row-3 .search-suggestions.is-open {
  display: flex;
}

.header-row-3 .search-popular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.header-row-3 .search-results {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line, #e2e8f0);
  border-radius: 0;
  box-shadow: none;
  max-height: min(300px, 45vh);
  overflow-y: auto;
}

.header-row-3 .search-results[hidden] {
  display: none !important;
}

/* ISO lightbox (shared pattern) */
.si-cert-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.si-cert-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.si-cert-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 30, 0.75);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.si-cert-lightbox-dialog {
  position: relative;
  z-index: 1;
  width: min(70vw, 900px);
  max-width: 70vw;
  max-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.96);
  transition: transform 0.25s ease;
}

.si-cert-lightbox.is-open .si-cert-lightbox-dialog {
  transform: scale(1);
}

.si-cert-lightbox-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  background: #fff;
  transform: none !important;
}

.si-cert-lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #172033;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

body.dark-mode .header-row-1 {
  background: rgba(16, 26, 41, 0.55);
  border-bottom-color: rgba(43, 58, 81, 0.6);
}

body.dark-mode .header-row-1 .toll-free {
  color: var(--text, #edf4ff);
  border-right-color: var(--line, #2b3a51);
}



body.dark-mode .header-row-1 .language-control select,
body.dark-mode .header-row-1 .theme-toggle,
body.dark-mode .header-search-inline {
  background: var(--white, #182235);
  border-color: var(--line, #2b3a51);
  color: var(--text, #edf4ff);
}

body.dark-mode .header-row-3 .search-suggestions {
  background: #142032;
  border-color: rgba(159, 200, 255, 0.18);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
}

body.dark-mode .header-row-3 .search-results {
  background: transparent;
  border-color: rgba(159, 200, 255, 0.15);
}

@media (max-width: 1200px) {
  .header-row-2 .service-btn {
    font-size: 13px;
    padding: 9px 6px;
  }
}

@media (max-width: 900px) {
  .header-iso-label {
    display: none;
  }
  .header-row-2 .service-nav {
    display: none !important;
  }
  .header-row-2 .brand {
    margin-right: auto;
  }
}

@media (max-width: 700px) {
  .header-row-inner {
    padding: 0 16px;
  }
  .header-row-2 .header-row-inner.topbar {
    padding: 0 16px;
  }
  .header-row-2 .navbar-logo {
    height: 40px;
    max-width: 160px;
  }
  .header-row-1 .toll-free strong {
    font-size: 12px;
  }
  .header-row-1 .theme-label {
    display: none;
  }
}


/* === Force row-2 layout (overrides legacy .topbar / .service-nav) === */
.header-row-2 .topbar {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.header-row-2 .brand {
  order: 0;
  margin-right: auto !important;
  flex: 0 0 auto !important;
}

.header-row-2 .service-nav {
  order: 1;
  flex: 0 1 auto !important;
  justify-content: flex-end !important;
  margin-left: 0 !important;
}

.header-row-2 .header-actions {
  order: 2;
  flex: 0 0 auto !important;
  margin-left: 24px !important;
  display: flex !important;
  align-items: center;
  gap: 12px !important;
}


/* === Service nav visible + dropdowns work === */
.header-row-2 .service-nav {
  display: flex !important;
  overflow: visible !important;
  max-width: none !important;
  position: relative;
  z-index: 100;
}

.header-row-2 .nav-dropdown:hover > .mega-dropdown,
.header-row-2 .nav-dropdown:hover > .dropdown-menu,
.header-row-2 .nav-dropdown.active > .mega-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
  z-index: 1300 !important;
}

.header-row-2 .mega-dropdown,
.header-row-2 .dropdown-menu {
  z-index: 1300;
}

@media (max-width: 900px) {
  .header-row-2 .service-nav {
    display: none !important;
  }
}

.kavach-section {
  --kavach-duration: 28s; /* full rotation; 7 pods → pulse every duration/7 */
  padding: 64px 20px 72px;
  background: radial-gradient(ellipse at 50% 30%, #1a3a6e 0%, #0b1730 55%, #070e1c 100%);
  color: #e8f1ff;
  overflow: hidden;
}

.kavach-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.kavach-logo {
  margin: 0;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #fff;
}
.kavach-logo span { color: #5eb0ff; }

.kavach-tagline {
  margin: 8px 0 28px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9bb8d9;
}

.kavach-stage {
  position: relative;
  width: min(520px, 92vw);
  aspect-ratio: 1;
  margin: 0 auto 28px;
}

/* Ring rotates continuously */
.kavach-ring {
  position: absolute;
  inset: 0;
  animation: kavachSpin var(--kavach-duration) linear infinite;
}

@keyframes kavachSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Counter-rotate pod faces so text stays upright */
.kavach-pod {
  --angle: calc(var(--i) * (360deg / 7));
  position: absolute;
  left: 50%;
  top: 50%;
  width: 118px;
  margin: -52px 0 0 -59px;
  transform:
    rotate(var(--angle))
    translateY(-210px)
    rotate(calc(-1 * var(--angle)));
}

.kavach-pod-inner {
  background: linear-gradient(160deg, #1e4a8c, #163a6e);
  border: 1px solid rgba(120, 180, 255, 0.35);
  border-radius: 16px;
  padding: 10px 8px;
  box-shadow: 0 8px 24px rgba(0, 40, 100, 0.45);
  animation: kavachCounterSpin var(--kavach-duration) linear infinite;
}

/* Keep labels readable while ring spins */
@keyframes kavachCounterSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* Simpler upright text: counter-spin on inner only relative to pod */
.kavach-pod-inner {
  animation: none;
}
.kavach-pod {
  transform:
    rotate(var(--angle))
    translateY(-210px);
}
.kavach-pod-inner {
  transform: rotate(calc(-1 * var(--angle)));
  animation: kavachPodUpright var(--kavach-duration) linear infinite;
}
@keyframes kavachPodUpright {
  from { transform: rotate(calc(-1 * var(--angle))); }
  to   { transform: rotate(calc(-1 * var(--angle) - 360deg)); }
}

.kavach-pod-icon { font-size: 20px; display: block; margin-bottom: 4px; }
.kavach-pod-inner strong {
  display: block;
  font-size: 11px;
  line-height: 1.25;
  color: #fff;
}
.kavach-pod-inner small {
  display: block;
  margin-top: 3px;
  font-size: 9px;
  color: #a8c4e8;
  line-height: 1.3;
}

/* Center shield */
.kavach-core {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  pointer-events: none;
}

/* Shield silhouette */
.kavach-shield {
  width: min(200px, 44vw);
  height: min(230px, 50vw);
  position: relative;
  filter: drop-shadow(0 12px 28px rgba(30, 100, 220, 0.45));
}

.kavach-shield-face {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 18px 36px;
  box-sizing: border-box;
  text-align: center;

  /* Classic shield path */
  clip-path: polygon(
    50% 0%,
    95% 8%,
    100% 38%,
    78% 78%,
    50% 100%,
    22% 78%,
    0% 38%,
    5% 8%
  );

  background:
    radial-gradient(circle at 40% 28%, #3b82f6 0%, #1d4ed8 42%, #0f2d6b 75%, #0a1c42 100%);
  border: 0;
  box-shadow: inset 0 0 0 3px rgba(160, 200, 255, 0.35);
}

/* Soft metallic rim via pseudo */
.kavach-shield::before {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -1;
  clip-path: polygon(
    50% 0%,
    95% 8%,
    100% 38%,
    78% 78%,
    50% 100%,
    22% 78%,
    0% 38%,
    5% 8%
  );
  background: linear-gradient(145deg, #9ec5ff, #3b6eb5 40%, #1a3a6e);
  opacity: 0.95;
}

.kavach-check {
  font-size: clamp(36px, 8vw, 48px);
  font-weight: 900;
  line-height: 1;
  color: #3b9bff; /* blue */
  text-shadow: 0 0 18px rgba(59, 155, 255, 0.75);
  transition:
    color 0.45s ease,
    text-shadow 0.45s ease,
    transform 0.45s ease;
  will-change: color, transform;
}

/* Green state */
.kavach-check.is-green {
  color: #22c55e;
  text-shadow: 0 0 22px rgba(34, 197, 94, 0.9);
  transform: scale(1.12);
}

.kavach-core-title {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fff;
}

.kavach-core-sub {
  margin-top: 4px;
  font-size: 9px;
  line-height: 1.35;
  color: #a8c4e8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kavach-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  font-size: 13px;
  font-weight: 650;
  color: #b8d0f0;
}

@media (max-width: 560px) {
  .kavach-pod { width: 96px; margin-left: -48px; }
  .kavach-pod { transform: rotate(var(--angle)) translateY(-155px); }
  .kavach-pod-inner strong { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .kavach-ring,
  .kavach-pod-inner {
    animation: none;
  }
}
/* =========================================================
   ROW 2 HEADER — logo | centered navigation | hamburger
   ========================================================= */

.header-row-2 .header-row-inner.topbar {
  min-height: var(--header-row2-h, 72px);
  display: grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 32px;
  gap: 24px;
  box-sizing: border-box;
}

.header-row-2 .brand {
  grid-column: 1;
  justify-self: start;
  margin: 0 !important;
  flex: none !important;
}

.header-row-2 .navbar-logo {
  display: block;
  /* width: auto;
  height: 48px; */
  max-width: min(273px, 22vw);
  object-fit: contain;
}

.header-row-2 .service-nav {
  grid-column: 2;
  justify-self: center;
  display: flex !important;
  align-items: center;
  justify-content: center !important;
  flex-wrap: nowrap;
  gap: 2px;
  min-width: max-content;
  max-width: none !important;
  margin: 0 !important;
  overflow: visible !important;
}

.header-row-2 .header-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0 !important;
  flex: none !important;
}

.header-row-2 .menu-trigger {
  width: 46px;
  height: 46px;
  padding: 10px;
}

.header-row-2 .service-btn {
  font-size: 14px;
  padding: 10px 9px;
}

@media (max-width: 1200px) {
  .header-row-2 .header-row-inner.topbar {
    padding: 0 20px;
    gap: 12px;
  }

  .header-row-2 .navbar-logo {
    max-width: 190px;
  }

  .header-row-2 .service-btn {
    font-size: 13px;
    padding-left: 6px;
    padding-right: 6px;
  }
}

@media (max-width: 900px) {
  .header-row-2 .header-row-inner.topbar {
    grid-template-columns: 1fr auto;
    padding: 0 16px;
  }

  .header-row-2 .brand {
    grid-column: 1;
  }

  .header-row-2 .service-nav {
    display: none !important;
  }

  .header-row-2 .header-actions {
    grid-column: 2;
  }

  .header-row-2 .navbar-logo {
    height: 40px;
    max-width: 160px;
  }
}

/* =========================================================
   PREMIUM / MINIMAL ROW 2 — corporate navigation refinement
   ========================================================= */
.header-row-2 {
  background: #fff;
  /* border-top: 1px solid rgba(15, 23, 42, .06);
  border-bottom: 1px solid rgba(15, 23, 42, .08); */
  box-shadow: 0 4px 18px rgba(15, 23, 42, .045);
}

.header-row-2 .header-row-inner.topbar {
  min-height: 76px;
  max-width: 1680px;
  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
  padding: 0 36px;
  gap: 32px;
}

.header-row-2 .brand {
  position: relative;
}

.header-row-2 .navbar-logo {
  height: 50px;
  /* max-width: 220px; */
  transition: opacity .2s ease, transform .2s ease;
}

.header-row-2 .brand:hover .navbar-logo {
  opacity: .9;
}

.header-row-2 .service-nav {
  gap: 2px;
  height: 100%;
}

.header-row-2 .service-nav > li {
  height: 100%;
  display: flex;
  align-items: center;
}

.header-row-2 .service-btn {
  position: relative;
  height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 7px;
  border-radius: 7px;
  color: #334155;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  background: transparent;
  transition: color .2s ease, background-color .2s ease;
}

.header-row-2 .service-btn::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
  opacity: .75;
}

.header-row-2 .service-btn:hover,
.header-row-2 .service-btn:focus-visible {
  color: #0f172a;
  background: rgba(15, 23, 42, .045);
}

.header-row-2 .service-btn:hover::after,
.header-row-2 .service-btn:focus-visible::after {
  transform: scaleX(1);
}

.header-row-2 .header-actions {
  gap: 10px;
}

.header-row-2 .menu-trigger {
  width: 42px;
  height: 42px;
  padding: 0;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  border: 1px solid rgba(15, 23, 42, .14);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .045);
  cursor: pointer;
  flex-shrink: 0;
  visibility: visible !important;
  opacity: 1 !important;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.header-row-2 .menu-trigger span {
  display: block !important;
  width: 20px !important;
  height: 2px !important;
  border-radius: 2px !important;
  background: var(--text, #172033) !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  transition: transform .2s ease, opacity .2s ease, background-color .2s ease !important;
}

body.dark-mode .header-row-2 .menu-trigger {
  background: #1a2a40;
  border-color: rgba(159, 200, 255, 0.22);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

body.dark-mode .header-row-2 .menu-trigger span {
  background: var(--text, #edf4ff) !important;
}

.header-row-2 .menu-trigger:hover,
.header-row-2 .menu-trigger:focus-visible {
  border-color: rgba(15, 23, 42, .24);
  background: #f8fafc;
  box-shadow: 0 5px 14px rgba(15, 23, 42, .08);
  transform: translateY(-1px);
}

@media (max-width: 1536px) {
  .header-row-2 .header-row-inner.topbar {
    padding: 0 28px;
    gap: 20px;
  }

  .header-row-2 .service-btn {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 16px;
    gap: 4px;
  }
}

@media (max-width: 1380px) {
  .header-row-2 .header-row-inner.topbar {
    padding: 0 24px;
    gap: 16px;
  }

  .header-row-2 .service-btn {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 13px;
    gap: 4px;
  }
}

@media (max-width: 1220px) {
  .header-row-2 .header-row-inner.topbar {
    padding: 0 18px;
    gap: 12px;
  }

  .header-row-2 .service-btn {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 12px;
    gap: 4px;
  }
}

@media (max-width: 1050px) {
  .header-row-2 .header-row-inner.topbar {
    grid-template-columns: minmax(160px, 1fr) auto minmax(130px, 1fr);
    gap: 10px;
    padding: 0 18px;
  }

  .header-row-2 .navbar-logo {
    max-width: 185px;
  }

  .header-row-2 .service-btn {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 11.5px;
  }
}

@media (max-width: 900px) {
  .header-row-2 {
    box-shadow: 0 3px 14px rgba(15, 23, 42, .05);
  }

  .header-row-2 .header-row-inner.topbar {
    min-height: 68px;
    grid-template-columns: 1fr auto;
    padding: 0 16px;
  }

  .header-row-2 .navbar-logo {
    height: 40px;
    max-width: 160px;
  }
}

/* =========================================================
   HEADER — transparent rows + theme-aware typography
   ========================================================= */
.header-row-1,
.header-row-2,
.header-row-3 {
  background: transparent !important;
  box-shadow: none !important;
}

.header-row-1,
.header-row-2 {
  border-color: color-mix(in srgb, var(--text, #172033) 12%, transparent) !important;
}

/* Keep header text driven by the active theme instead of fixed colors. */
.header-row-1,
.header-row-2,
.header-row-3,
.header-row-1 a,
.header-row-2 a,
.header-row-3 a,
.header-row-1 button,
.header-row-2 button,
.header-row-3 button,
.header-row-1 label,
.header-row-2 label,
.header-row-3 label {
  color: var(--text, #172033);
}

.header-row-1 .header-iso,
.header-row-1 .language-control,
.header-row-1 .toll-free,
.header-row-2 .service-btn {
  color: var(--text, #172033) !important;
}

.header-row-1 .toll-free small,
.header-row-3 .search-hint,
.header-row-3 .search-placeholder {
  color: var(--muted, #64748b) !important;
}

.header-row-2 .service-btn:hover,
.header-row-2 .service-btn:focus-visible,
.header-row-1 .toll-free:hover,
.header-row-1 .header-iso:hover {
  color: var(--blue-strong, #245ea8) !important;
}

.header-row-1 .language-control select,
.header-row-1 .lang-select,
.header-row-1 .theme-toggle,
.header-row-2 .menu-trigger{
  background: transparent !important;
  color: var(--text, #172033) !important;
  border-color: color-mix(in srgb, var(--text, #172033) 16%, transparent) !important;
}

.header-row-3 .header-search-inline input,
.header-row-3 .header-search-inline input::placeholder {
  color: var(--text, #172033);
}

.header-row-3 .header-search-inline input::placeholder {
  opacity: .62;
}

/* .header-row-1 .theme-toggle:hover,
.header-row-2 .menu-trigger:hover,
.header-row-2 .menu-trigger:focus-visible {
  background: color-mix(in srgb, var(--text, #172033) 5%, transparent) !important;
} */

/* Dark theme: preserve contrast while remaining transparent. */
body.dark-mode .header-row-1,
body.dark-mode .header-row-2,
body.dark-mode .header-row-3 {
  background: transparent !important;
}

body.dark-mode .header-row-1,
body.dark-mode .header-row-2 {
  border-color: color-mix(in srgb, var(--text, #edf4ff) 14%, transparent) !important;
}

body.dark-mode .header-iso-img{
  filter: invert(1);
}

body.dark-mode .header-row-1 .toll-free,
body.dark-mode .header-row-1 .header-iso,
body.dark-mode .header-row-1 .language-control,
body.dark-mode .header-row-2 .service-btn,
body.dark-mode .header-row-3,
body.dark-mode .header-row-1 button,
body.dark-mode .header-row-2 button {
  color: var(--text, #edf4ff) !important;
}

body.dark-mode .header-row-1 .toll-free small,
body.dark-mode .header-row-3 .search-hint,
body.dark-mode .header-row-3 .search-placeholder {
  color: var(--muted, #9fb0c7) !important;
}

body.dark-mode .header-row-2 .service-btn:hover,
body.dark-mode .header-row-2 .service-btn:focus-visible,
body.dark-mode .header-row-1 .toll-free:hover,
body.dark-mode .header-row-1 .header-iso:hover {
  color: var(--blue-strong, #8bb8ef) !important;
}

body.dark-mode .header-row-1 .language-control select,
body.dark-mode .header-row-1 .lang-select,
body.dark-mode .header-row-1 .theme-toggle,
body.dark-mode .header-row-2 .menu-trigger
 {
  background: transparent !important;
  color: var(--text, #edf4ff) !important;
  border-color: color-mix(in srgb, var(--text, #edf4ff) 18%, transparent) !important;
}

body.dark-mode .header-row-3 .header-search-inline{
  background-color: white;
  color: #0f172a;
  border-color: color-mix(in srgb, var(--text, #edf4ff) 18%, transparent) !important;
}

body.dark-mode .header-row-3 .header-search-inline input,
body.dark-mode .header-row-3 .header-search-inline input::placeholder {
  color: #0f172a;
}

/* =========================================================
   ROW 2 — logo | services beside logo | actions at far right
   ========================================================= */
@media (min-width: 992px) {
  .header-row-2 .header-row-inner.topbar {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center;
    column-gap: 16px;
  }

  .header-row-2 .brand {
    grid-column: 1 !important;
  }

  .header-row-2 .service-nav {
    grid-column: 2 !important;
    display: flex !important;
    justify-self: end;
    justify-content: flex-start !important;
    min-width: 0;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .header-row-2 .header-actions {
    grid-column: 3 !important;
    justify-self: end !important;
  }
}

@media (max-width: 1280px) and (min-width: 901px) {
  .header-row-2 .header-row-inner.topbar {
    column-gap: 10px !important;
    padding-inline: 16px !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }

  .header-row-2 .brand {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    min-width: 120px !important;
    max-width: 180px !important;
  }

  .header-row-2 .navbar-logo {
    display: block !important;
    height: 42px !important;
    width: auto !important;
    max-width: 180px !important;
    object-fit: contain !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .header-row-2 .service-nav {
    display: flex !important;
    visibility: visible !important;
    gap: 0 !important;
    min-width: 0 !important;
  }

  .header-row-2 .service-btn {
    padding-inline: 5px !important;
    font-size: 11.5px !important;
    gap: 3px !important;
  }

  .header-row-2 .header-actions {
    grid-column: 3 !important;
    justify-self: end !important;
    display: flex !important;
    flex-shrink: 0 !important;
    margin-left: 6px !important;
  }
}

/* =========================================================
   No horizontal page scroll
========================================================= */
html {
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}
body {
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
  position: relative;
}

/* =========================================================
   End nav items (e.g. Digital): mega + sub open left, under button
========================================================= */
.header-row-2 .service-nav > .nav-dropdown:last-child .mega-dropdown,
.header-row-2 .service-nav > .nav-dropdown:last-child .dropdown-menu,
.nav-dropdown.align-end .mega-dropdown,
.nav-dropdown.align-end .dropdown-menu {
  left: auto !important;
  right: 0 !important;
  transform-origin: top right;
}

/* Submenus of end items open to the LEFT of the mega panel */
.header-row-2 .service-nav > .nav-dropdown:last-child .sub-dropdown,
.nav-dropdown.align-end .sub-dropdown {
  left: auto !important;
  right: calc(100% + 6px) !important;
  transform: translateX(-7px);
}

.header-row-2 .service-nav > .nav-dropdown:last-child .dropdown-item:hover > .sub-dropdown,
.header-row-2 .service-nav > .nav-dropdown:last-child .dropdown-item.active > .sub-dropdown,
.nav-dropdown.align-end .dropdown-item:hover > .sub-dropdown,
.nav-dropdown.align-end .dropdown-item.active > .sub-dropdown {
  transform: translateX(0);
}

/* Keep float social inside viewport */
.social-float {
  right: max(8px, env(safe-area-inset-right));
  max-width: 48px;
}


/* =========================================================
   ROW 2: sticky via position:fixed when .is-stuck
   (avoids overflow/display:contents breaking position:sticky)
========================================================= */
.site-header,
.site-header.scrolled {
  display: block;
  position: relative;
  z-index: 1000;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-bottom-color: transparent !important;
}

body.dark-mode .site-header,
body.dark-mode .site-header.scrolled {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: #262a4ea1;
  box-shadow: none !important;
  border-bottom-color: transparent !important;
}

.header-row-2 {
  position: relative;
  z-index: 1001;
  width: 100%;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  /* border-bottom: 1px solid transparent; */
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

/* Pinned for the rest of the page */
.header-row-2.is-stuck {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) saturate(2.15) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.15) !important;
  box-shadow: 0 8px 30px rgba(50, 90, 130, 0.08) !important;
  border-bottom: 1px solid rgba(190, 210, 235, 0.55) !important;
}

body.dark-mode .header-row-2.is-stuck {
  background: rgba(16, 26, 41, 0.5) !important;
  backdrop-filter: blur(10px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.1) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28) !important;
  border-bottom: 1px solid rgba(43, 58, 81, 0.7) !important;
}

/* Prevents layout jump when row2 becomes fixed */
.header-row-2-spacer {
  display: none;
  width: 100%;
  pointer-events: none;
}
.header-row-2-spacer.is-active {
  display: block;
}

.header-row-2 .mega-dropdown,
.header-row-2 .dropdown-menu,
.header-row-2 .sub-dropdown {
  z-index: 1100;
}

/* Legacy sticky side social float completely removed */
.social-float,
#socialFloat {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* =========================================================
   FLOATING WHATSAPP BUTTON (BOTTOM LEFT CORNER)
========================================================= */
.floating-whatsapp-btn {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4), 0 3px 8px rgba(0, 0, 0, 0.15);
  z-index: 9998;
  text-decoration: none !important;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, filter 0.2s ease;
  user-select: none;
}

.floating-whatsapp-btn svg {
  width: 32px;
  height: 32px;
  fill: #ffffff !important;
  color: #ffffff !important;
  transition: transform 0.25s ease;
}

/* Subtle continuous ripple pulse */
.floating-whatsapp-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.65);
  animation: waPulseWave 2.4s infinite cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}

@keyframes waPulseWave {
  0% {
    transform: scale(0.96);
    opacity: 0.9;
  }
  70% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

.floating-whatsapp-btn:hover {
  transform: scale(1.08) translateY(-2px);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.55), 0 4px 12px rgba(0, 0, 0, 0.2);
  filter: brightness(1.05);
}

.floating-whatsapp-btn:hover svg {
  transform: scale(1.06);
}

.floating-whatsapp-btn:active {
  transform: scale(0.96);
}

/* Tooltip / Label on Hover */
.floating-whatsapp-tooltip {
  position: absolute;
  left: calc(100% + 12px);
  background: #111827;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.floating-whatsapp-tooltip::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent #111827 transparent transparent;
}

.floating-whatsapp-btn:hover .floating-whatsapp-tooltip {
  opacity: 1;
  transform: translateX(0);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .floating-whatsapp-btn {
    bottom: 20px;
    left: 18px;
    width: 52px;
    height: 52px;
  }
  .floating-whatsapp-btn svg {
    width: 28px;
    height: 28px;
  }
  .floating-whatsapp-tooltip {
    display: none;
  }
}

/* =========================================================
   MEGA PANEL DROPDOWN (sidebar + multi-column links)
   Layout only — uses existing theme colors
========================================================= */
/* All mega panels share one anchor point (Trademarks / middle nav) via JS */
.header-row-2 .service-nav {
  position: relative;
}

.mega-panel-dropdown {
  position: static;
}

.mega-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; /* JS sets final left to match Trademarks */
  right: auto;
  z-index: 1400;
  width: min(920px, calc(100vw - 48px));
  max-width: calc(100vw - 32px);
  background: var(--white, #fff);
  border: 1px solid var(--line, #e8edf4);
  border-radius: 16px;
  box-shadow: 0 22px 60px rgba(23, 52, 90, 0.16);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  overflow: hidden;
}

.mega-panel-dropdown:hover > .mega-panel,
.mega-panel-dropdown.active > .mega-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.mega-panel-body {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 280px;
}

.mega-panel-side {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: #f4f8fc;
  border-right: 1px solid var(--line, #e8edf4);
}

.mega-side-item {
  display: grid;
  grid-template-columns: 1fr 14px;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text, #172033);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.mega-side-item.mega-side-direct {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding: 10px 12px;
  background: rgba(22, 118, 187, 0.05);
  border: 1px dashed rgba(22, 118, 187, 0.32);
  border-radius: 9px;
  color: var(--blue-strong, #1676bb);
  font-weight: 700;
  transition: all 0.2s ease;
}

.mega-side-item.mega-side-direct:hover {
  background: rgba(22, 118, 187, 0.12);
  border-color: rgba(22, 118, 187, 0.65);
  transform: translateX(3px);
  color: #0b57d0;
}

.mega-side-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2.5px 6.5px;
  border-radius: 5px;
  background: rgba(22, 118, 187, 0.12);
  color: #1676bb;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.mega-side-item:hover {
  background: rgba(59, 120, 198, 0.08);
  color: var(--blue-strong, #3b78c6);
}

.mega-side-item.is-active {
  background: #fff;
  color: var(--blue-strong, #3b78c6);
  box-shadow: 0 1px 0 rgba(59, 120, 198, 0.12);
  outline: 1px solid rgba(59, 120, 198, 0.18);
}

.mega-side-icon {
  font-size: 15px;
  line-height: 1;
  text-align: center;
}

.mega-side-arrow {
  color: #94a3b8;
  font-size: 16px;
}

.mega-side-item.is-active .mega-side-arrow {
  color: var(--blue-strong, #3b78c6);
}

.mega-panel-main {
  padding: 18px 22px 16px;
}

.mega-panel-pane[hidden] {
  display: none !important;
}

.mega-panel-title {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line, #e8edf4);
  font-size: 15px;
  font-weight: 700;
  color: var(--blue-strong, #3b78c6);
}

.mega-panel-title span {
  opacity: 0.55;
}

.mega-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 18px;
}

.mega-panel-grid a {
  display: block;
  padding: 9px 4px;
  color: var(--text, #172033);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}

.mega-panel-grid a:hover {
  color: var(--blue-strong, #3b78c6);
  background: rgba(59, 120, 198, 0.06);
}

.mega-panel-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  background: #f0f7f4;
  border-top: 1px solid #d7ebe3;
}

.mega-panel-footer-text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #3d5a4c;
}

.mega-panel-footer-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.mega-panel-footer-cta {
  flex-shrink: 0;
  color: var(--blue-strong, #3b78c6);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.mega-panel-footer-cta:hover {
  text-decoration: underline;
}

body.dark-mode .mega-panel {
  background: #152033;
  border-color: #2b3a51;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.4);
}

body.dark-mode .mega-panel-side {
  background: #101a29;
  border-color: #2b3a51;
}

body.dark-mode .mega-side-item {
  color: #dbe7f6;
}

body.dark-mode .mega-side-item:hover {
  background: rgba(139, 184, 239, 0.1);
  color: #8bb8ef;
}

body.dark-mode .mega-side-item.is-active {
  background: #1a2a40;
  color: #8bb8ef;
  outline-color: rgba(139, 184, 239, 0.25);
}

body.dark-mode .mega-side-item.mega-side-direct {
  background: rgba(139, 184, 239, 0.08);
  border-color: rgba(139, 184, 239, 0.32);
  color: #8bb8ef;
}

body.dark-mode .mega-side-item.mega-side-direct:hover {
  background: rgba(139, 184, 239, 0.16);
  border-color: rgba(139, 184, 239, 0.65);
  color: #b9d6fb;
}

body.dark-mode .mega-side-badge {
  background: rgba(139, 184, 239, 0.18);
  color: #8bb8ef;
}

body.dark-mode .mega-panel-title {
  color: #8bb8ef;
  border-color: #2b3a51;
}

body.dark-mode .mega-panel-grid a {
  color: #dbe7f6;
}

body.dark-mode .mega-panel-grid a:hover {
  color: #8bb8ef;
  background: rgba(139, 184, 239, 0.08);
}

body.dark-mode .mega-panel-footer {
  background: #13241c;
  border-color: #243a30;
}

body.dark-mode .mega-panel-footer-text {
  color: #b7d4c6;
}

body.dark-mode .mega-panel-footer-icon {
  background: #1a2a40;
}

body.dark-mode .mega-panel-footer-cta {
  color: #8bb8ef;
}

@media (max-width: 900px) {
  .mega-panel {
    display: none; /* mobile uses side menu */
  }
}

@media (max-width: 1100px) {
  .mega-panel-body {
    grid-template-columns: 210px 1fr;
  }
  .mega-panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


a.mega-panel-title {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}
a.mega-panel-title:hover {
  text-decoration: underline;
}
.mega-panel-empty {
  grid-column: 1 / -1;
  color: var(--muted, #64748b);
  font-size: 13px;
  padding: 8px 0;
}

/* align-end: same shared anchor as other panels (JS) */
.mega-panel-dropdown.align-end .mega-panel {
  left: 0;
  right: auto;
}


/* =========================================================
   MEGA PANEL — fixed slot under Trademarks (all menus)
========================================================= */
.header-row-2 .service-nav {
  position: relative;
  z-index: 1200;
}

.header-row-2 .mega-panel-dropdown {
  position: static !important;
}

.header-row-2 .mega-panel {
  position: fixed !important;
  z-index: 5000 !important;
  max-width: calc(100vw - 32px) !important;
  margin: 0 !important;
  transform: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.header-row-2 .mega-panel::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
}

.header-row-2 .mega-panel-dropdown:hover > .mega-panel,
.header-row-2 .mega-panel-dropdown.is-open > .mega-panel {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}


/* =========================================================
   Need Help dropdown (between toll-free and language)
========================================================= */
.help-control {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.help-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--text, #edf4ff) 18%, transparent);
  border-radius: 8px;
  background: transparent;
  color: var(--text, #172033);
  font: 650 12px/1 "DM Sans", Arial, sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.help-toggle:hover,
.help-control.is-open .help-toggle {
  background: rgba(59, 120, 198, 0.08);
  border-color: #b9d2f0;
  color: var(--blue-strong, #3b78c6);
}

.header-brochure-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--text, #edf4ff) 18%, transparent);
  border-radius: 8px;
  background: transparent;
  color: var(--text, #172033);
  font: 650 12px/1 "DM Sans", Arial, sans-serif;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.header-brochure-btn:hover {
  background: rgba(59, 120, 198, 0.08);
  border-color: #b9d2f0;
  color: var(--blue-strong, #3b78c6);
}

.header-brochure-btn svg {
  width: 14px;
  height: 14px;
  color: var(--blue-strong, #3b78c6);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.header-brochure-btn:hover svg {
  transform: translateY(1px);
}

body.dark-mode .header-brochure-btn {
  color: var(--text, #edf4ff);
  border-color: color-mix(in srgb, var(--text, #edf4ff) 18%, transparent);
}

body.dark-mode .header-brochure-btn:hover {
  background: rgba(139, 184, 239, 0.12);
  border-color: rgba(139, 184, 239, 0.35);
  color: #8bb8ef;
}

body.dark-mode .header-brochure-btn svg {
  color: #8bb8ef;
}

.help-chevron {
  font-size: 10px;
  opacity: 0.75;
  transition: transform 0.2s ease;
}

.help-control.is-open .help-chevron {
  transform: rotate(180deg);
}

.help-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 148px;
  padding: 6px;
  background: var(--white, #fff);
  border: 1px solid var(--line, #e8edf4);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(23, 52, 90, 0.14);
  z-index: 1300;
}

.help-menu[hidden] {
  display: none !important;
}

.help-menu-item {
  display: block;
  padding: 9px 12px;
  border-radius: 7px;
  color: var(--text, #172033);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}

.help-menu-item:hover {
  background: rgba(59, 120, 198, 0.1);
  color: var(--blue-strong, #3b78c6);
}

body.dark-mode .help-toggle {
  color: var(--text, #edf4ff);
  border-color: color-mix(in srgb, var(--text, #edf4ff) 18%, transparent);
}

body.dark-mode .help-toggle:hover,
body.dark-mode .help-control.is-open .help-toggle {
  background: rgba(139, 184, 239, 0.12);
  color: #8bb8ef;
}

body.dark-mode .help-menu {
  background: #152033;
  border-color: #2b3a51;
}

body.dark-mode .help-menu-item {
  color: #dbe7f6;
}

body.dark-mode .help-menu-item:hover {
  background: rgba(139, 184, 239, 0.12);
  color: #8bb8ef;
}

/* Match header-utils spacing */
.header-utils {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* =========================================================
   MOBILE RESPONSIVENESS & ZERO-OVERFLOW GLOBAL FIXES
   ========================================================= */

/* Mobile & Small Tablet Devices (<= 900px) */
@media (max-width: 900px) {
  .header-row-2 .header-row-inner.topbar {
    display: grid !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 58px !important;
    padding: 0 16px !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .header-row-2 .brand {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    min-width: 120px !important;
    max-width: 220px !important;
    margin: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .header-row-2 .navbar-logo {
    display: block !important;
    height: clamp(34px, 5.5vw, 44px) !important;
    width: auto !important;
    min-width: 115px !important;
    max-width: 200px !important;
    object-fit: contain !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Desktop nav hidden on mobile/small tablet */
  .header-row-2 .service-nav {
    display: none !important;
  }

  .header-row-2 .header-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    z-index: 10 !important;
  }

  .header-row-2 .menu-trigger {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border: 1px solid rgba(15, 23, 42, .14) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, .05) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body.dark-mode .header-row-2 .menu-trigger {
    background: rgba(26, 42, 64, 0.95) !important;
    border-color: rgba(159, 200, 255, 0.22) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  }

  .header-row-2 .menu-trigger span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    border-radius: 2px !important;
    background: var(--text, #172033) !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  body.dark-mode .header-row-2 .menu-trigger span {
    background: var(--text, #edf4ff) !important;
  }

  /* Mega panels strictly hidden on mobile/tablet to avoid overflow */
  .header-row-2 .mega-panel,
  .mega-panel {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
  }

  /* ROW 3: Full width search bar on mobile & tablet with 16px padding */
  .header-row-3 {
    padding: 0 0 8px !important;
    width: 100% !important;
  }

  .header-row-3 .header-row-inner,
  .header-row-3 .header-search-wrap {
    padding: 0 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .header-search-inline {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    align-self: stretch !important;
  }

  .header-row-3 .search-suggestions {
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

/* Mobile Devices (<= 768px) */
@media (max-width: 768px) {
  /* ROW 1: Compact, zero-overflow utility toolbar */
  .header-row-1 {
    width: 100% !important;
    position: relative !important;
    z-index: 1005 !important;
  }

  .header-row-1 .header-row-inner {
    padding: 5px 14px !important;
    min-height: 38px !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .header-iso:empty,
  #isoCertTrigger:empty {
    display: none !important;
  }

  .header-utils {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .header-row-1 .toll-free {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    border-right: none !important;
    padding-right: 0 !important;
    font-size: 11.5px !important;
    flex-shrink: 0 !important;
  }

  .header-row-1 .toll-free small {
    display: none !important;
  }

  .header-row-1 .toll-free strong {
    font-size: 11.5px !important;
    font-weight: 700 !important;
  }

  .header-row-1 .toll-icon {
    font-size: 13px !important;
  }

  .help-control {
    position: relative !important;
    flex-shrink: 0 !important;
  }

  .help-control .help-toggle {
    height: 30px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    gap: 4px !important;
  }

  .header-brochure-btn {
    height: 30px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    gap: 4px !important;
  }

  .header-brochure-btn svg {
    width: 12px !important;
    height: 12px !important;
  }

  .help-menu {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    right: 0 !important;
    min-width: 135px !important;
    z-index: 9999 !important;
  }

  .header-row-1 .language-control {
    gap: 4px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  .header-row-1 .language-control select,
  .header-row-1 .lang-select {
    height: 30px !important;
    padding: 2px 4px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }

  .header-row-1 .theme-toggle {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    justify-content: center !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
  }

  .header-row-1 .theme-label {
    display: none !important;
  }

  .header-row-1 .theme-icon {
    font-size: 14px !important;
    margin: 0 !important;
  }

  /* ROW 3: Streamlined inline search with horizontally scrollable popular pills */
  .header-row-3 {
    padding: 0 0 8px !important;
    width: 100% !important;
  }

  .header-row-3 .header-row-inner {
    padding: 0 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .header-search-inline {
    height: 42px !important;
    padding: 0 12px !important;
    gap: 8px !important;
    border-radius: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .header-search-inline input {
    font-size: 14px !important;
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 !important;
  }

  .header-row-3 .search-suggestions {
    left: 14px !important;
    right: 14px !important;
    width: auto !important;
    max-width: none !important;
    margin-top: 6px !important;
    gap: 6px !important;
    padding: 10px 12px !important;
  }

  .header-row-3 .search-popular {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 6px !important;
    padding: 2px 0 4px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .header-row-3 .search-popular::-webkit-scrollbar {
    display: none !important;
  }

  .header-row-3 .search-popular span {
    flex: 0 0 auto !important;
    font-size: 11px !important;
    margin-right: 2px !important;
    color: var(--muted, #64748b) !important;
  }

  .header-row-3 .search-popular button {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 11px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
  }

  .header-row-3 .search-results {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Completely hide side floating social links on mobile */
  .social-float,
  #socialFloat,
  .social-float-toggle,
  .social-float-list,
  .social-float-panel {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Completely hide desktop monitor & visual graphics at hero section on mobile */
  .bizhero-visual,
  .bizhero-monitor,
  .bizhero-monitor-frame,
  .bizhero-chat-screen,
  .bizhero-character-wrapper,
  .bizhero-bg-orbs,
  .bizhero-orb,
  .bizhero-soft-shape,
  .bizhero-glow,
  .bizhero-floating-card,
  .bizhero-image-card {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
  }

  .bizhero-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 30px 16px 45px !important;
    box-sizing: border-box !important;
    grid-template-columns: 1fr !important;
  }

  .bizhero-content {
    max-width: 100% !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  .bizhero-title {
    font-size: clamp(28px, 8.5vw, 42px) !important;
    letter-spacing: -1.2px !important;
    margin-top: 10px !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  .bizhero-description {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 auto 24px !important;
    max-width: 100% !important;
  }

  .bizhero-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .bizhero-primary-btn,
  .bizhero-secondary-btn {
    width: 100% !important;
    max-width: 320px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .bizhero-services {
    margin-top: 24px !important;
    width: 100% !important;
  }

  .bizhero-service-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    gap: 10px !important;
  }

  /* =========================================================
     UNIVERSAL SUBPAGE RESPONSIVE CONTAINMENT (All 139 pages)
     ========================================================= */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .si-layout,
  .cr-layout,
  .pvt-layout,
  .llp-layout,
  .opc-layout,
  .prop-layout,
  .fcra-layout,
  .trust-layout,
  .documents-layout,
  .india-msme-layout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
  }

  .si-side-nav,
  .cr-side-nav,
  .pvt-side-nav,
  .llp-side-nav,
  .opc-side-nav,
  .prop-side-nav,
  .fcra-side-nav,
  .trust-side-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .si-layout > main,
  .si-layout main,
  .cr-layout > main,
  .cr-layout main,
  .pvt-layout > main,
  .llp-layout > main,
  .company-page,
  .startup-page,
  .trust-page {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Universal trust rows on mobile: fluid grid, text wrapping, zero blowout */
  .si-trust-row,
  .cr-trust-row,
  .pvt-trust-row,
  .llp-trust-row,
  .opc-trust-row,
  .prop-trust-row,
  .fcra-trust-row,
  .trust-trust-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 20px !important;
    padding-top: 16px !important;
  }

  .si-trust-row div,
  .cr-trust-row div,
  .pvt-trust-row div,
  .llp-trust-row div,
  .opc-trust-row div,
  .prop-trust-row div,
  .fcra-trust-row div,
  .trust-trust-row div {
    min-width: 0 !important;
    text-align: center !important;
  }

  .si-trust-row strong,
  .cr-trust-row strong,
  .pvt-trust-row strong,
  .llp-trust-row strong,
  .opc-trust-row strong,
  .prop-trust-row strong,
  .fcra-trust-row strong,
  .trust-trust-row strong {
    font-size: 13.5px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .si-trust-row span,
  .cr-trust-row span,
  .pvt-trust-row span,
  .llp-trust-row span,
  .opc-trust-row span,
  .prop-trust-row span,
  .fcra-trust-row span,
  .trust-trust-row span {
    font-size: 10px !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* Universal hero grids on subpages: single column, no minmax blowout */
  .si-hero-grid,
  .cr-hero-grid,
  .pvt-hero-grid,
  .llp-hero-grid,
  .opc-hero-grid,
  .prop-hero-grid,
  .fcra-hero-grid,
  .trust-hero-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .si-hero-content,
  .cr-hero-content,
  .pvt-hero-content,
  .llp-hero-content,
  .opc-hero-content,
  .prop-hero-content,
  .fcra-hero-content,
  .trust-hero-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .si-hero,
  .cr-hero,
  .pvt-hero,
  .llp-hero,
  .opc-hero,
  .prop-hero,
  .fcra-hero,
  .trust-hero,
  .about-hero,
  .blog-hero,
  .faq-hero,
  .fund-hero {
    min-height: auto !important;
    padding: 35px 0 45px !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .si-hero h1,
  .cr-hero h1,
  .pvt-hero h1,
  .llp-hero h1,
  .opc-hero h1,
  .prop-hero h1,
  .fcra-hero h1,
  .trust-hero h1 {
    font-size: clamp(26px, 7.5vw, 38px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.8px !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    margin: 10px 0 14px !important;
  }

  .si-hero-description,
  .cr-hero-description,
  .trust-hero-description {
    font-size: 14px !important;
    line-height: 1.6 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    margin-bottom: 18px !important;
  }

  .si-hero-actions,
  .cr-hero-actions,
  .llp-hero-actions,
  .trust-hero-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .si-hero-actions .cr-btn,
  .si-hero-actions a,
  .cr-hero-actions .cr-btn,
  .cr-hero-actions a,
  .llp-hero-actions .cr-btn,
  .llp-hero-actions a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Universal container width constraint on mobile */
  .cr-container,
  .si-container,
  .trust-container,
  .cr-faq-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  /* Universal table scrolling */
  .si-table-wrap,
  .cr-table-wrap,
  .pvt-table-wrap,
  .llp-table-wrap,
  .opc-table-wrap,
  .trust-table-wrap {
    overflow-x: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  /* Universal grids to single column */
  .si-feature-grid,
  .si-facts-grid,
  .si-doc-grid,
  .cr-type-grid,
  .cr-service-grid,
  .cr-benefits-grid,
  .cr-why-grid,
  .cr-process,
  .trust-facts-grid,
  .trust-benefit-grid,
  .trust-doc-grid,
  .trust-why-grid,
  .opc-facts-grid,
  .opc-benefit-grid,
  .opc-doc-grid,
  .opc-why-grid,
  .opc-why-strip {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .si-split,
  .cr-split,
  .trust-split {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Form & Consultation Cards */
  .si-consult-flip,
  .si-consult-flip.is-flipped,
  .si-consult-card,
  .cr-consult-card,
  .llp-consult-card,
  .opc-consult-card,
  .trust-consult-card {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  .si-consult-card,
  .cr-consult-card,
  .llp-consult-card,
  .opc-consult-card,
  .trust-consult-card {
    padding: 20px 14px !important;
  }

  .si-card-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }

  .si-card-badge {
    max-width: calc(100% - 90px) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Universal background orbs containment */
  .si-shape-one,
  .si-shape-two,
  .si-shape-three,
  .opc-final-orb,
  .trust-final-orb,
  .si-card-glow,
  .trust-card-glow,
  .opc-hero:before,
  .opc-hero:after {
    max-width: 80vw !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .opc-final-content h2,
  .si-split h2,
  .cr-section h2 {
    font-size: clamp(24px, 7vw, 34px) !important;
    letter-spacing: -1px !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
}

/* Compact Mobile (< 440px): Ultra-safe spacing */
@media (max-width: 440px) {
  .header-row-1 .header-row-inner {
    padding: 3px 10px !important;
    gap: 4px !important;
  }

  .header-utils {
    gap: 5px !important;
    justify-content: space-between !important;
  }

  .header-row-1 .toll-free strong {
    font-size: 11px !important;
  }

  .help-control .help-toggle {
    padding: 0 6px !important;
    font-size: 10.5px !important;
  }

  .header-brochure-btn {
    padding: 0 6px !important;
    font-size: 10.5px !important;
  }

  .header-row-1 .language-control select,
  .header-row-1 .lang-select {
    padding: 2px 3px !important;
    font-size: 10.5px !important;
  }

  .header-row-2 .header-row-inner.topbar {
    padding: 0 12px !important;
    min-height: 52px !important;
  }

  .header-row-2 .brand {
    min-width: 100px !important;
    max-width: 150px !important;
  }

  .header-row-2 .navbar-logo {
    height: 34px !important;
    min-width: 100px !important;
    max-width: 145px !important;
  }

  .header-row-2 .menu-trigger {
    width: 38px !important;
    height: 38px !important;
    padding: 8px !important;
  }

  .header-row-3 .header-row-inner {
    padding: 0 12px !important;
  }

  .header-search-inline {
    height: 40px !important;
    padding: 0 10px !important;
  }

  .si-trust-row,
  .cr-trust-row,
  .pvt-trust-row,
  .llp-trust-row,
  .opc-trust-row,
  .prop-trust-row,
  .fcra-trust-row,
  .trust-trust-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
}

/* Side Menu Overlay & Drawer Layering Safety */
.menu-overlay {
  z-index: 9998 !important;
}

.side-menu {
  z-index: 9999 !important;
  width: min(380px, 86vw) !important;
  max-width: 86vw !important;
  height: 100dvh !important;
  box-sizing: border-box !important;
}

@media (max-width: 480px) {
  .side-menu {
    padding: 20px 16px !important;
    width: 88vw !important;
  }

  .side-menu-header {
    padding-bottom: 14px !important;
  }

  .side-menu h2 {
    font-size: 20px !important;
  }

  .secondary-nav a {
    padding: 10px 8px !important;
    font-size: 13px !important;
  }

  .mobile-service button,
  .mobile-service-link a {
    padding: 11px 8px !important;
    font-size: 13px !important;
  }
}

/* =========================================================
   CANONICAL STICKY SIDE NAVIGATION (STARTUP INDIA PATTERN)
========================================================= */
@media (min-width: 1025px) {
  .si-layout,
  .llp-layout,
  .pvt-layout,
  .prop-layout,
  .fcra-layout,
  .trust-layout {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .si-layout > main,
  .llp-layout > main,
  .pvt-layout > main,
  .prop-layout > main,
  .fcra-layout > main,
  .trust-layout > main {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .si-side-nav,
  .llp-side-nav,
  .pvt-side-nav,
  .opc-side-nav,
  .prop-side-nav,
  .fcra-side-nav,
  .trust-side-nav {
    position: sticky !important;
    top: 125px !important;
    width: 240px !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
    padding: 30px !important;
    background: transparent !important;
    box-sizing: border-box !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 50 !important;
    display: block !important;
  }

  .si-side-nav-title,
  .llp-side-nav-title,
  .pvt-side-nav-title,
  .opc-side-nav-title,
  .prop-side-nav-title,
  .fcra-side-nav-title,
  .trust-side-nav-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--cr-muted, #8ca0b3) !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  .si-side-nav nav,
  .llp-side-nav nav,
  .pvt-side-nav nav,
  .opc-side-nav nav,
  .prop-side-nav nav,
  .fcra-side-nav nav,
  .trust-side-nav nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .si-side-nav a,
  .llp-side-nav a,
  .pvt-side-nav a,
  .opc-side-nav a,
  .prop-side-nav a,
  .fcra-side-nav a,
  .trust-side-nav a,
  .si-side-nav nav a,
  .llp-side-nav nav a,
  .pvt-side-nav nav a,
  .opc-side-nav nav a,
  .prop-side-nav nav a,
  .fcra-side-nav nav a,
  .trust-side-nav nav a {
    display: flex !important;
    align-items: center !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: var(--cr-text-soft, #65798d) !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
    transform: none !important;
    box-shadow: none !important;
  }

  .si-side-nav a span,
  .llp-side-nav a span,
  .pvt-side-nav a span,
  .opc-side-nav a span,
  .prop-side-nav a span,
  .fcra-side-nav a span,
  .trust-side-nav a span,
  .si-side-nav nav a span,
  .llp-side-nav nav a span,
  .pvt-side-nav nav a span,
  .opc-side-nav nav a span,
  .prop-side-nav nav a span,
  .fcra-side-nav nav a span,
  .trust-side-nav nav a span {
    display: inline-block !important;
    width: 24px !important;
    min-width: 24px !important;
    font-size: 10px !important;
    color: var(--cr-muted, #8ca0b3) !important;
    font-family: monospace !important;
    font-weight: 400 !important;
    transition: color 0.2s ease !important;
  }

  .si-side-nav a:hover,
  .llp-side-nav a:hover,
  .pvt-side-nav a:hover,
  .opc-side-nav a:hover,
  .prop-side-nav a:hover,
  .fcra-side-nav a:hover,
  .trust-side-nav a:hover,
  .si-side-nav nav a:hover,
  .llp-side-nav nav a:hover,
  .pvt-side-nav nav a:hover,
  .opc-side-nav nav a:hover,
  .prop-side-nav nav a:hover,
  .fcra-side-nav nav a:hover,
  .trust-side-nav nav a:hover {
    color: var(--si-accent, var(--cr-blue-dark, #3b78c6)) !important;
    background: transparent !important;
    transform: none !important;
  }

  .si-side-nav a.active,
  .llp-side-nav a.active,
  .pvt-side-nav a.active,
  .opc-side-nav a.active,
  .prop-side-nav a.active,
  .fcra-side-nav a.active,
  .trust-side-nav a.active,
  .si-side-nav nav a.active,
  .llp-side-nav nav a.active,
  .pvt-side-nav nav a.active,
  .opc-side-nav nav a.active,
  .prop-side-nav nav a.active,
  .fcra-side-nav nav a.active,
  .trust-side-nav nav a.active {
    color: var(--si-accent-dark, var(--cr-blue-dark, #3b78c6)) !important;
    font-weight: 600 !important;
    background: transparent !important;
  }

  .si-side-nav a.active:before,
  .llp-side-nav a.active:before,
  .pvt-side-nav a.active:before,
  .opc-side-nav a.active:before,
  .prop-side-nav a.active:before,
  .fcra-side-nav a.active:before,
  .trust-side-nav a.active:before,
  .si-side-nav nav a.active:before,
  .llp-side-nav nav a.active:before,
  .pvt-side-nav nav a.active:before,
  .opc-side-nav nav a.active:before,
  .prop-side-nav nav a.active:before,
  .fcra-side-nav nav a.active:before,
  .trust-side-nav nav a.active:before {
    display: none !important;
    content: none !important;
  }

  .si-side-nav a.active span,
  .llp-side-nav a.active span,
  .pvt-side-nav a.active span,
  .opc-side-nav a.active span,
  .prop-side-nav a.active span,
  .fcra-side-nav a.active span,
  .trust-side-nav a.active span,
  .si-side-nav nav a.active span,
  .llp-side-nav nav a.active span,
  .pvt-side-nav nav a.active span,
  .opc-side-nav nav a.active span,
  .prop-side-nav nav a.active span,
  .fcra-side-nav nav a.active span,
  .trust-side-nav nav a.active span {
    color: var(--si-accent, var(--cr-blue, #3b78c6)) !important;
  }

  .si-side-cta,
  .llp-side-cta,
  .pvt-side-cta,
  .opc-side-cta,
  .prop-side-cta,
  .fcra-side-cta,
  .trust-side-cta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 25px !important;
    padding-top: 20px !important;
    border-top: 1px solid var(--cr-border, #dce8f2) !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--cr-text, #172b3f) !important;
    text-decoration: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .si-side-cta b,
  .llp-side-cta b,
  .pvt-side-cta b,
  .opc-side-cta b,
  .prop-side-cta b,
  .fcra-side-cta b,
  .trust-side-cta b {
    color: var(--si-accent, var(--cr-blue, #3b78c6)) !important;
    font-size: 16px !important;
  }
}

body.dark-mode .si-side-nav a:hover,
body.dark-mode .llp-side-nav a:hover,
body.dark-mode .pvt-side-nav a:hover,
body.dark-mode .opc-side-nav a:hover,
body.dark-mode .prop-side-nav a:hover,
body.dark-mode .fcra-side-nav a:hover,
body.dark-mode .trust-side-nav a:hover,
body.dark-mode .si-side-nav a.active,
body.dark-mode .llp-side-nav a.active,
body.dark-mode .pvt-side-nav a.active,
body.dark-mode .opc-side-nav a.active,
body.dark-mode .prop-side-nav a.active,
body.dark-mode .fcra-side-nav a.active,
body.dark-mode .trust-side-nav a.active {
  color: var(--cr-blue, #9fcaff) !important;
}

body.dark-mode .si-side-nav a.active span,
body.dark-mode .llp-side-nav a.active span,
body.dark-mode .pvt-side-nav a.active span,
body.dark-mode .opc-side-nav a.active span,
body.dark-mode .prop-side-nav a.active span,
body.dark-mode .fcra-side-nav a.active span,
body.dark-mode .trust-side-nav a.active span {
  color: var(--cr-blue, #9fcaff) !important;
}

body.dark-mode .si-side-cta,
body.dark-mode .llp-side-cta,
body.dark-mode .pvt-side-cta,
body.dark-mode .opc-side-cta,
body.dark-mode .prop-side-cta,
body.dark-mode .fcra-side-cta,
body.dark-mode .trust-side-cta {
  border-top-color: var(--cr-border, rgba(255, 255, 255, 0.1)) !important;
  color: var(--cr-text, #e2e8f0) !important;
}

section[id] {
  scroll-margin-top: 130px;
}



/* =========================================================
   INDIA MAP — HOVER DATA CARD SUPPORT
   ========================================================= */
.india-stat-card strong {
  overflow-wrap: anywhere;
}

.india-stat-card .india-data-value {
  font-size: 18px;
}

@media (max-width: 520px) {
  .india-stat-card strong {
    font-size: 20px;
  }
}

/* =========================================================
   CORPORATE MART - QUOTATION
========================================================= */

.quotation-open-btn {
    border: 0;
    padding: 13px 22px;
    border-radius: 10px;
    background: #2f80ed;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: .25s ease;
}

.quotation-open-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(47, 128, 237, .25);
}


/* =========================================================
   FORM MODAL
========================================================= */

.quotation-modal,
.quotation-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
}

.quotation-modal.is-open,
.quotation-preview-modal.is-open {
    display: block;
}


.quotation-modal-overlay,
.quotation-preview-overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 15, 30, .65);
    backdrop-filter: blur(8px);
}


/* =========================================================
   MODAL BOX
========================================================= */

.quotation-modal-box {
    position: relative;
    width: min(720px, calc(100% - 30px));
    max-height: calc(100vh - 40px);
    overflow-y: auto;

    margin: 20px auto;

    background: #fff;
    border-radius: 22px;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .25);

    animation: quotationModalIn .25s ease;
}

@keyframes quotationModalIn {

    from {
        opacity: 0;
        transform: translateY(20px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


/* =========================================================
   HEADER
========================================================= */

.quotation-modal-header,
.quotation-preview-header {

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    padding: 26px 28px;

    border-bottom: 1px solid #e8eef7;
}

.quotation-eyebrow {

    display: block;

    margin-bottom: 5px;

    color: #2f80ed;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.quotation-modal-header h2,
.quotation-preview-header h2 {

    margin: 0;

    color: #162235;

    font-size: 24px;
}

.quotation-modal-header p {

    margin: 7px 0 0;

    color: #718096;

    font-size: 13px;
}


.quotation-close-btn {

    width: 38px;
    height: 38px;

    border: 0;
    border-radius: 50%;

    background: #f1f5fa;

    color: #526174;

    font-size: 25px;

    cursor: pointer;

    transition: .2s ease;
}

.quotation-close-btn:hover {

    background: #e5edf8;

    transform: rotate(90deg);
}


/* =========================================================
   FORM
========================================================= */

.quotation-form {

    padding: 28px;
}

.quotation-section-title {

    margin: 10px 0 16px;

    color: #26364d;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: .3px;
}

.quotation-section-title:not(:first-child) {

    margin-top: 30px;

}


.quotation-form-grid {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 17px;

}


.quotation-field {

    display: flex;

    flex-direction: column;

    gap: 7px;
}

.quotation-field.quotation-full {

    grid-column: 1 / -1;
}


.quotation-field label {

    color: #40516a;

    font-size: 12px;

    font-weight: 700;
}


.quotation-field input,
.quotation-field select,
.quotation-field textarea {

    width: 100%;

    box-sizing: border-box;

    border: 1px solid #dbe4f0;

    border-radius: 9px;

    padding: 12px 13px;

    background: #fafdff;

    color: #172338;

    font-family: inherit;

    font-size: 13px;

    outline: none;

    transition: .2s ease;
}

.quotation-field select {
    cursor: pointer;
    appearance: auto;
}


.quotation-field textarea {

    resize: vertical;

    min-height: 75px;
}


.quotation-field input:focus,
.quotation-field select:focus,
.quotation-field textarea:focus {

    border-color: #2f80ed;

    box-shadow:
        0 0 0 3px rgba(47, 128, 237, .10);

    background: #fff;
}


/* =========================================================
   CALCULATION
========================================================= */

.quotation-calculation {

    margin-top: 25px;

    border: 1px solid #e1e9f3;

    border-radius: 13px;

    overflow: hidden;

    background: #f8fbff;
}

.quotation-calculation > div {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 13px 16px;

    border-bottom: 1px solid #e5edf6;

    font-size: 13px;
}

.quotation-calculation > div:last-child {

    border-bottom: 0;
}

.quotation-calculation span {

    color: #66768b;
}

.quotation-calculation strong {

    color: #26364d;
}


.quotation-calculation
.quotation-grand-total {

    background: #2f80ed;

    color: #fff;
}

.quotation-calculation
.quotation-grand-total span,
.quotation-calculation
.quotation-grand-total strong {

    color: #fff;
}

.quotation-grand-total strong {

    font-size: 17px;
}


/* =========================================================
   FORM BUTTONS
========================================================= */

.quotation-form-actions,
.quotation-preview-actions {

    display: flex;

    justify-content: flex-end;

    gap: 10px;

    margin-top: 25px;
}

.quotation-primary-btn,
.quotation-secondary-btn {

    border: 0;

    border-radius: 9px;

    padding: 12px 18px;

    font-family: inherit;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    transition: .2s ease;
}


.quotation-primary-btn {

    background: #2f80ed;

    color: #fff;
}

.quotation-primary-btn:hover {

    background: #1769d0;

    transform: translateY(-1px);
}


.quotation-secondary-btn {

    background: #edf3f9;

    color: #40516a;
}

.quotation-secondary-btn:hover {

    background: #dfe9f4;
}


/* =========================================================
   PREVIEW
========================================================= */

.quotation-preview-box {

    position: relative;

    width: min(1050px, calc(100% - 30px));

    height: calc(100vh - 40px);

    margin: 20px auto;

    background: #f1f5f9;

    border-radius: 20px;

    overflow: hidden;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .3);

    display: flex;

    flex-direction: column;
}


.quotation-preview-content {

    flex: 1;

    overflow: auto;

    padding: 25px;

    display: flex;

    justify-content: center;

    align-items: flex-start;
}


/* =========================================================
   DYNAMIC SERVICE ITEMS LIST
========================================================= */

.quotation-services-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.quotation-service-item {
    background: #f8fbff;
    border: 1px solid #e2eaf5;
    border-radius: 12px;
    padding: 16px;
    position: relative;
    transition: border-color .2s ease, background .2s ease;
}

.quotation-service-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.service-item-number {
    font-size: 11px;
    font-weight: 800;
    color: #2f80ed;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.item-price-preview {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 600;
}

.item-unit-price {
    color: #64748b;
    background: rgba(100, 116, 139, .10);
    padding: 2px 8px;
    border-radius: 6px;
}

.item-line-total {
    color: #1d4ed8;
    background: rgba(37, 99, 235, .10);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 700;
}

.quotation-service-grid {
    display: grid;
    grid-template-columns: 1fr 130px 130px;
    gap: 12px;
}

.item-discount-input {
    text-align: right;
    font-weight: 600;
}

.item-price-display {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #1e293b;
    font-weight: 700;
    text-align: right;
    cursor: default;
    user-select: none;
    font-family: inherit;
    font-size: 13.5px;
}

.item-price-display:focus {
    outline: none;
    border-color: #cbd5e1;
    box-shadow: none;
}

.quotation-service-selector-wrap {
    position: relative;
    width: 100%;
}

.quotation-other-search-wrap {
    margin-top: 8px;
    position: relative;
}

.quotation-search-bar-inner {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1.5px solid #2f80ed;
    border-radius: 8px;
    padding: 0 8px;
    box-shadow: 0 2px 10px rgba(47, 128, 237, 0.12);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.quotation-search-bar-inner:focus-within {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.quotation-search-icon {
    color: #2f80ed;
    flex-shrink: 0;
    margin-right: 8px;
}

.quotation-other-search-input {
    flex: 1;
    min-width: 0;
    height: 38px;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 13px !important;
    color: #1e293b !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.quotation-search-switch-back-btn {
    flex-shrink: 0;
    border: none;
    background: rgba(47, 128, 237, 0.1);
    color: #2f80ed;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    margin-left: 6px;
    transition: background .15s ease, color .15s ease;
}

.quotation-search-switch-back-btn:hover {
    background: #2f80ed;
    color: #ffffff;
}

.quotation-suggestions-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    max-height: 220px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.quotation-suggestion-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    transition: background .12s ease;
}

.quotation-suggestion-item:last-child {
    border-bottom: none;
}

.quotation-suggestion-item:hover,
.quotation-suggestion-item.is-highlighted {
    background: #eff6ff;
}

.quotation-suggestion-info {
    flex: 1;
    min-width: 0;
    padding-right: 10px;
}

.quotation-suggestion-name {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quotation-suggestion-cat {
    font-size: 11px;
    color: #64748b;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quotation-suggestion-price {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 700;
    color: #15803d;
    background: rgba(22, 163, 74, 0.1);
    padding: 3px 8px;
    border-radius: 6px;
}

.quotation-suggestion-empty {
    padding: 14px;
    text-align: center;
    font-size: 12px;
    color: #64748b;
}

.quotation-search-highlight {
    background: #fef08a;
    color: #854d0e;
    font-weight: 700;
    padding: 0 1px;
    border-radius: 2px;
}

.quotation-service-select-field select {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.quotation-remove-service-btn {
    border: 0;
    background: rgba(239, 68, 68, .1);
    color: #ef4444;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: .15s ease;
}

.quotation-remove-service-btn:hover {
    background: #ef4444;
    color: #fff;
}

.quotation-add-service-btn {
    border: 1px dashed #2f80ed;
    background: rgba(47, 128, 237, .06);
    color: #2f80ed;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.quotation-add-service-btn:hover {
    background: #2f80ed;
    color: #fff;
}


/* =========================================================
   AUTHENTIC EXCEL QUOTATION SHEET PREVIEW
   Exact visual twin of downloaded QUOTATION.xlsx
========================================================= */

.quotation-sheet-preview.excel-doc-sheet {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    background: #ffffff;
    color: #000000;
    border: 2px solid #000000;
    border-radius: 0;
    box-shadow: 0 14px 40px rgba(0, 0, 0, .14);
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, "Segoe UI", Calibri, sans-serif;
    line-height: 1.4;
    overflow: hidden;
}

.excel-header-title {
    text-align: center;
    font-size: 32px !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    color: #000000;
    padding: 12px 16px 8px;
    letter-spacing: 1px;
}

.excel-top-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 20px 14px;
}

.excel-top-logo .qs-logo {
    height: 48px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    margin: 0;
    display: block;
}

.excel-top-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #000000;
}

.excel-teal-banner {
    background: #388195;
    color: #ffffff;
    font-weight: 700;
    border-top: 1.5px solid #000000;
    border-bottom: 1.5px solid #000000;
    box-sizing: border-box;
}

.excel-bill-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13.5px;
    padding: 6px 18px;
    letter-spacing: .5px;
}

.excel-bill-to-text {
    font-weight: 700;
}

.excel-quotation-no-text {
    font-weight: 700;
    letter-spacing: .5px;
    white-space: nowrap;
}

.excel-customer-details {
    padding: 12px 18px;
    font-size: 13px;
    color: #000000;
    line-height: 1.65;
}

.excel-cust-address {
    margin-bottom: 4px;
    min-height: 20px;
    white-space: pre-line;
}

.excel-cust-state,
.excel-cust-gst {
    margin-top: 4px;
}

.excel-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-top: 1.5px solid #000000;
    border-bottom: 1.5px solid #000000;
    margin: 0;
    box-sizing: border-box;
}

.excel-table th,
.excel-table td {
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: break-word;
}

.excel-table th {
    background: #388195;
    color: #ffffff;
    font-size: 12px;
    font-weight: 750;
    letter-spacing: .5px;
    padding: 8px 10px;
    border: 1px solid #000000;
}

.excel-table .col-qty {
    width: 15%;
    max-width: 15%;
    text-align: center;
}

.excel-table .col-desc {
    width: 55%;
    max-width: 55%;
    text-align: left;
    padding-left: 14px;
    padding-right: 10px;
}

.excel-table .col-amount {
    width: 30%;
    max-width: 30%;
    text-align: center;
}

.excel-item-row td {
    padding: 7px 12px;
    font-size: 12.5px;
    color: #000000;
    border-left: 1.5px solid #000000;
    border-right: 1.5px solid #000000;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.excel-empty-row td {
    height: 24px;
}

.excel-total-row td {
    border-top: 1.5px solid #000000 !important;
    border-bottom: 1.5px solid #000000 !important;
    padding: 6px 12px;
}

.excel-border-cell {
    border-left: 1.5px solid #000000;
    border-right: 1.5px solid #000000;
}

.excel-total-label,
.excel-total-val {
    background: #388195 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-align: center !important;
    border: 1px solid #000000 !important;
    box-sizing: border-box;
}

.excel-gst-row td,
.excel-round-row td {
    padding: 6px 12px;
    font-size: 12px;
    border-left: 1.5px solid #000000;
    border-right: 1.5px solid #000000;
    color: #000000;
    box-sizing: border-box;
}

.excel-gst-label,
.excel-round-label {
    text-align: right;
    padding-right: 24px !important;
    font-weight: 600;
    box-sizing: border-box;
}

.excel-gst-val,
.excel-round-val {
    text-align: center;
    box-sizing: border-box;
}

.excel-grand-row td {
    background: #388195 !important;
    color: #ffffff !important;
    font-weight: 850 !important;
    font-size: 14px !important;
    padding: 8px 12px;
    border-top: 1.5px solid #000000 !important;
    border-bottom: 1.5px solid #000000 !important;
    border-left: 1.5px solid #000000 !important;
    border-right: 1.5px solid #000000 !important;
    box-sizing: border-box;
}

.excel-grand-label {
    text-align: right;
    padding-right: 24px !important;
    letter-spacing: .5px;
    box-sizing: border-box;
}

.excel-grand-val {
    text-align: center;
    box-sizing: border-box;
}

.excel-company-section {
    padding: 14px 18px 8px;
    font-size: 12px;
    color: #000000;
    line-height: 1.55;
}

.excel-comp-name {
    font-weight: 800;
    font-size: 12.5px;
    margin-bottom: 3px;
}

.excel-comp-spacer {
    height: 6px;
}

.excel-upi-line {
    color: #0b57d0;
    font-weight: 500;
}

.excel-bottom-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 6px 20px 16px;
}

.excel-qr-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.excel-qr-img {
    width: 195px;
    height: 195px;
    border: 1.5px solid #000000;
    padding: 4px;
    background: #ffffff;
    display: block;
    box-sizing: border-box;
}

.excel-signatory-box {
    text-align: right;
    font-size: 12px;
    color: #000000;
}

.excel-for-comp {
    font-size: 12px;
}

.excel-sign-space {
    height: 48px;
}

.excel-auth-sign {
    font-weight: 700;
}

.excel-footer-banner {
    text-align: center;
    font-size: 12px;
    padding: 8px 16px;
    letter-spacing: .3px;
    border-bottom: none;
}

.qs-note {
    margin-top: 20px;
    text-align: center;
    font-size: 11.5px;
    color: #64748b;
    font-style: italic;
}


/* =========================================================
   THEME WISE: DARK MODE SUPPORT FOR MODALS
========================================================= */

body.dark-mode .quotation-modal-box {
    background: #142032;
    border: 1px solid rgba(159, 200, 255, .18);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .65);
    color: #edf4ff;
}

body.dark-mode .quotation-preview-box {
    background: #101927;
    border: 1px solid rgba(159, 200, 255, .18);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
    color: #edf4ff;
}

body.dark-mode .quotation-modal-header,
body.dark-mode .quotation-preview-header {
    border-bottom-color: rgba(159, 200, 255, .14);
}

body.dark-mode .quotation-modal-header h2,
body.dark-mode .quotation-preview-header h2 {
    color: #edf4ff;
}

body.dark-mode .quotation-modal-header p {
    color: #94a3b8;
}

body.dark-mode .quotation-close-btn {
    background: rgba(255, 255, 255, .08);
    color: #cbd5e1;
}

body.dark-mode .quotation-close-btn:hover {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

body.dark-mode .quotation-section-title {
    color: #9fc8ff;
}

body.dark-mode .quotation-service-item {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(159, 200, 255, .14);
}

body.dark-mode .service-item-number {
    color: #9fc8ff;
}

body.dark-mode .quotation-field label {
    color: #cbd5e1;
}

body.dark-mode .quotation-field input,
body.dark-mode .quotation-field select,
body.dark-mode .quotation-field textarea {
    background: #182438;
    border: 1px solid rgba(159, 200, 255, .18);
    color: #edf4ff;
}

body.dark-mode .quotation-field select optgroup,
body.dark-mode .quotation-field select option {
    background: #152236;
    color: #edf4ff;
}

body.dark-mode .quotation-field input:focus,
body.dark-mode .quotation-field select:focus,
body.dark-mode .quotation-field textarea:focus {
    background: #1c2b42;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .2);
}

body.dark-mode .item-unit-price {
    color: #94a3b8;
    background: rgba(148, 163, 184, .12);
}

body.dark-mode .item-line-total {
    color: #60a5fa;
    background: rgba(96, 165, 250, .15);
}

body.dark-mode .item-price-display {
    background: #111a29;
    border-color: rgba(159, 200, 255, 0.18);
    color: #60a5fa;
}

body.dark-mode .item-price-display:focus {
    border-color: rgba(159, 200, 255, 0.18);
    box-shadow: none;
}

body.dark-mode .quotation-search-bar-inner {
    background: #182438;
    border-color: #3b82f6;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

body.dark-mode .quotation-search-bar-inner:focus-within {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
}

body.dark-mode .quotation-search-icon {
    color: #60a5fa;
}

body.dark-mode .quotation-other-search-input {
    color: #edf4ff !important;
}

body.dark-mode .quotation-search-switch-back-btn {
    background: rgba(59, 130, 246, 0.15);
    color: #9fc8ff;
}

body.dark-mode .quotation-search-switch-back-btn:hover {
    background: #3b82f6;
    color: #ffffff;
}

body.dark-mode .quotation-suggestions-dropdown {
    background: #152236;
    border-color: rgba(159, 200, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

body.dark-mode .quotation-suggestion-item {
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .quotation-suggestion-item:hover,
body.dark-mode .quotation-suggestion-item.is-highlighted {
    background: rgba(59, 130, 246, 0.16);
}

body.dark-mode .quotation-suggestion-name {
    color: #edf4ff;
}

body.dark-mode .quotation-suggestion-cat {
    color: #94a3b8;
}

body.dark-mode .quotation-suggestion-price {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.12);
}

body.dark-mode .quotation-suggestion-empty {
    color: #94a3b8;
}

body.dark-mode .quotation-search-highlight {
    background: rgba(250, 204, 21, 0.35);
    color: #fef08a;
}

body.dark-mode .quotation-calculation {
    background: #152338;
    border: 1px solid rgba(159, 200, 255, .18);
}

body.dark-mode .quotation-calculation > div {
    border-bottom-color: rgba(159, 200, 255, .12);
}

body.dark-mode .quotation-calculation span {
    color: #94a3b8;
}

body.dark-mode .quotation-calculation strong {
    color: #edf4ff;
}

body.dark-mode .quotation-secondary-btn {
    background: rgba(255, 255, 255, .08);
    color: #edf4ff;
}

body.dark-mode .quotation-secondary-btn:hover {
    background: rgba(255, 255, 255, .15);
}

body.dark-mode .quotation-preview-content {
    background: #090e17;
}

body.dark-mode .quotation-sheet-preview.excel-doc-sheet {
    background: #152236;
    color: #edf4ff;
    border-color: rgba(159, 200, 255, .3);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .6);
}

body.dark-mode .excel-header-title {
    color: #edf4ff;
    font-size: 32px !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
}

body.dark-mode .excel-top-date {
    color: #cbd5e1;
}

body.dark-mode .excel-teal-banner {
    background: #2b6d80;
    border-color: rgba(159, 200, 255, .25);
}

body.dark-mode .excel-customer-details {
    color: #edf4ff;
}

body.dark-mode .excel-table {
    border-color: rgba(159, 200, 255, .25);
}

body.dark-mode .excel-table th {
    background: #2b6d80;
    border-color: rgba(159, 200, 255, .25);
}

body.dark-mode .excel-item-row td {
    color: #edf4ff;
    border-color: rgba(159, 200, 255, .25);
}

body.dark-mode .excel-total-row td,
body.dark-mode .excel-grand-row td {
    background: #2b6d80 !important;
    border-color: rgba(159, 200, 255, .25) !important;
}

body.dark-mode .excel-gst-row td,
body.dark-mode .excel-round-row td {
    color: #edf4ff;
    border-color: rgba(159, 200, 255, .25);
}

body.dark-mode .excel-company-section {
    color: #edf4ff;
}

body.dark-mode .excel-upi-line {
    color: #60a5fa;
}

body.dark-mode .excel-signatory-box {
    color: #edf4ff;
}

/* =========================================================
   PDF EXPORT OVERRIDES (ALWAYS CLEAN WHITE PAPER LIGHT THEME)
========================================================= */
.pdf-export-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: -9999 !important;
    pointer-events: none !important;
    width: 780px !important;
    background: #ffffff !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.pdf-export-container .quotation-sheet-preview.excel-doc-sheet,
body.dark-mode .pdf-export-container .quotation-sheet-preview.excel-doc-sheet,
.quotation-sheet-preview.excel-doc-sheet.pdf-export-mode,
body.dark-mode .quotation-sheet-preview.excel-doc-sheet.pdf-export-mode {
    width: 780px !important;
    min-width: 780px !important;
    max-width: 780px !important;
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    box-shadow: none !important;
    font-family: Arial, "Segoe UI", Calibri, sans-serif !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    overflow: visible !important;
}

.pdf-export-container .excel-header-title,
body.dark-mode .pdf-export-container .excel-header-title {
    font-size: 32px !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    color: #000000 !important;
    text-align: center !important;
    padding: 12px 16px 8px !important;
}

.pdf-export-container .excel-top-meta,
body.dark-mode .pdf-export-container .excel-top-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 6px 20px 14px !important;
}

.pdf-export-container .excel-top-logo .qs-logo,
body.dark-mode .pdf-export-container .excel-top-logo .qs-logo {
    height: 48px !important;
    width: auto !important;
    max-width: 220px !important;
    object-fit: contain !important;
    margin: 0 !important;
    display: block !important;
}

.pdf-export-container .excel-top-date,
body.dark-mode .pdf-export-container .excel-top-date {
    color: #000000 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.pdf-export-container .excel-teal-banner,
body.dark-mode .pdf-export-container .excel-teal-banner {
    background: #388195 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-top: 1.5px solid #000000 !important;
    border-bottom: 1.5px solid #000000 !important;
    box-sizing: border-box !important;
}

.pdf-export-container .excel-bill-banner,
body.dark-mode .pdf-export-container .excel-bill-banner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 13.5px !important;
    padding: 6px 18px !important;
    letter-spacing: .5px !important;
    background: #388195 !important;
    color: #ffffff !important;
}

.pdf-export-container .excel-bill-to-text,
body.dark-mode .pdf-export-container .excel-bill-to-text,
.pdf-export-container .excel-quotation-no-text,
body.dark-mode .pdf-export-container .excel-quotation-no-text {
    font-weight: 700 !important;
    color: #ffffff !important;
}

.pdf-export-container .excel-quotation-no-text,
body.dark-mode .pdf-export-container .excel-quotation-no-text {
    white-space: nowrap !important;
    letter-spacing: .5px !important;
}

.pdf-export-container .excel-customer-details,
body.dark-mode .pdf-export-container .excel-customer-details {
    color: #000000 !important;
    padding: 12px 18px !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
}

.pdf-export-container .excel-cust-line,
body.dark-mode .pdf-export-container .excel-cust-line {
    color: #000000 !important;
}

.pdf-export-container .excel-cust-line strong,
body.dark-mode .pdf-export-container .excel-cust-line strong {
    color: #000000 !important;
}

.pdf-export-container .excel-table,
body.dark-mode .pdf-export-container .excel-table {
    border-collapse: collapse !important;
    border-top: 1.5px solid #000000 !important;
    border-bottom: 1.5px solid #000000 !important;
    width: 100% !important;
    table-layout: fixed !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.pdf-export-container .excel-table th,
body.dark-mode .pdf-export-container .excel-table th {
    background: #388195 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    letter-spacing: .5px !important;
    padding: 8px 10px !important;
    border: 1px solid #000000 !important;
}

.pdf-export-container .excel-item-row td,
body.dark-mode .pdf-export-container .excel-item-row td {
    color: #000000 !important;
    font-size: 12.5px !important;
    padding: 7px 12px !important;
    border-left: 1.5px solid #000000 !important;
    border-right: 1.5px solid #000000 !important;
    border-top: 1px solid transparent !important;
    border-bottom: 1px solid transparent !important;
}

.pdf-export-container .excel-total-row td,
body.dark-mode .pdf-export-container .excel-total-row td {
    border-top: 1.5px solid #000000 !important;
    border-bottom: 1.5px solid #000000 !important;
    padding: 6px 12px !important;
}

.pdf-export-container .excel-total-label,
.pdf-export-container .excel-total-val,
.pdf-export-container .excel-grand-label,
.pdf-export-container .excel-grand-val,
body.dark-mode .pdf-export-container .excel-total-label,
body.dark-mode .pdf-export-container .excel-total-val,
body.dark-mode .pdf-export-container .excel-grand-label,
body.dark-mode .pdf-export-container .excel-grand-val {
    background: #388195 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    text-align: center !important;
    border: 1px solid #000000 !important;
    box-sizing: border-box !important;
}

.pdf-export-container .excel-gst-row td,
.pdf-export-container .excel-round-row td,
body.dark-mode .pdf-export-container .excel-gst-row td,
body.dark-mode .pdf-export-container .excel-round-row td {
    color: #000000 !important;
    border-left: 1.5px solid #000000 !important;
    border-right: 1.5px solid #000000 !important;
}

.pdf-export-container .excel-company-section,
body.dark-mode .pdf-export-container .excel-company-section {
    color: #000000 !important;
    padding: 14px 18px 8px !important;
}

.pdf-export-container .excel-comp-name,
body.dark-mode .pdf-export-container .excel-comp-name {
    font-weight: 800 !important;
    font-size: 13px !important;
    color: #000000 !important;
}

.pdf-export-container .excel-comp-line,
body.dark-mode .pdf-export-container .excel-comp-line {
    font-size: 12px !important;
    color: #000000 !important;
}

.pdf-export-container .excel-upi-line,
body.dark-mode .pdf-export-container .excel-upi-line {
    color: #1e3a8a !important;
    font-weight: 700 !important;
}

.pdf-export-container .excel-bottom-meta,
body.dark-mode .pdf-export-container .excel-bottom-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    padding: 6px 20px 14px !important;
}

.pdf-export-container .excel-qr-img,
body.dark-mode .pdf-export-container .excel-qr-img {
    width: 195px !important;
    height: 195px !important;
    object-fit: contain !important;
    display: block !important;
    border: 1.5px solid #000000 !important;
    padding: 4px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

.pdf-export-container .excel-signatory-box,
body.dark-mode .pdf-export-container .excel-signatory-box {
    text-align: right !important;
    color: #000000 !important;
}

.pdf-export-container .excel-for-comp,
body.dark-mode .pdf-export-container .excel-for-comp {
    font-size: 12px !important;
    color: #000000 !important;
}

.pdf-export-container .excel-for-comp strong,
body.dark-mode .pdf-export-container .excel-for-comp strong {
    color: #000000 !important;
}

.pdf-export-container .excel-sign-space,
body.dark-mode .pdf-export-container .excel-sign-space {
    height: 48px !important;
}

.pdf-export-container .excel-auth-sign,
body.dark-mode .pdf-export-container .excel-auth-sign {
    font-size: 12px !important;
    font-weight: 700 !important;
    border-top: 1px solid #000000 !important;
    display: inline-block !important;
    padding-top: 4px !important;
    color: #000000 !important;
}

.pdf-export-container .excel-footer-banner,
body.dark-mode .pdf-export-container .excel-footer-banner {
    background: #388195 !important;
    color: #ffffff !important;
    text-align: center !important;
    font-size: 12.5px !important;
    padding: 6px 16px !important;
    border-top: 1.5px solid #000000 !important;
    border-bottom: 1.5px solid #000000 !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 650px) {

    .quotation-form-grid {
        grid-template-columns: 1fr;
    }

    .quotation-service-grid {
        grid-template-columns: 1fr 1fr;
    }

    .quotation-service-select-field {
        grid-column: 1 / -1;
    }

    .quotation-field.quotation-full {
        grid-column: auto;
    }

    .quotation-modal-header,
    .quotation-preview-header {
        padding: 20px;
    }

    .quotation-form {
        padding: 20px;
    }

    .quotation-form-actions,
    .quotation-preview-actions {
        flex-direction: column;
    }

    .quotation-primary-btn,
    .quotation-secondary-btn {
        width: 100%;
    }

    .quotation-sheet-preview {
        padding: 20px 16px;
    }

    .qs-header {
        flex-direction: column;
        gap: 12px;
    }

    .qs-meta {
        text-align: left;
    }

    .qs-footer {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .qs-signature {
        text-align: left;
    }

    .qs-signature .qs-sign-line {
        margin: 24px 0 6px 0;
    }

    .qs-table th,
    .qs-table td {
        padding: 8px 6px;
        font-size: 11.5px;
    }

}

/* ==========================================================================
   CLIENT PORTAL HIGHLIGHTED CTA BUTTON & HEADER LINKS
   ========================================================================== */
.portal-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px 0 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #4f46e5 100%);
  color: #ffffff !important;
  font: 700 13px/1 "DM Sans", Arial, sans-serif;
  letter-spacing: 0.2px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35), 0 1px 2px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  z-index: 1;
}

.portal-cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-20deg);
  animation: portalShimmer 3.5s infinite ease-in-out;
  pointer-events: none;
}

@keyframes portalShimmer {
  0%, 65% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}

.portal-cta-btn:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 50%, #6366f1 100%);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.5), 0 2px 4px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff !important;
}

.portal-cta-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

.portal-cta-pulse {
  width: 8px;
  height: 8px;
  background-color: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: portalPulse 2s infinite;
  flex-shrink: 0;
}

@keyframes portalPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.portal-cta-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
}

.portal-cta-text {
  font-weight: 700;
  color: #ffffff;
}

.portal-cta-badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Header Row 1 Highlighted Client Portal Button */
.portal-cta-row1,
.header-portal-toplink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px 0 9px;
  border-radius: 9px;
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #4f46e5 100%);
  color: #ffffff !important;
  font: 700 12px/1 "DM Sans", Arial, sans-serif;
  letter-spacing: 0.2px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 3px 12px rgba(37, 99, 235, 0.38), 0 1px 2px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  z-index: 1;
}

.portal-cta-row1::before,
.header-portal-toplink::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: skewX(-20deg);
  animation: portalShimmer 3.5s infinite ease-in-out;
  pointer-events: none;
}

.portal-cta-row1:hover,
.header-portal-toplink:hover {
  transform: translateY(-1.5px);
  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 50%, #6366f1 100%);
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.55), 0 2px 4px rgba(0, 0, 0, 0.15);
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff !important;
}

.portal-cta-row1:active,
.header-portal-toplink:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4);
}

.portal-cta-row1 .portal-cta-pulse {
  width: 7px;
  height: 7px;
}

.portal-cta-row1 .portal-cta-icon {
  width: 14px;
  height: 14px;
}

.portal-cta-row1 .portal-cta-text {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff !important;
}

.portal-cta-row1 .portal-cta-badge {
  font-size: 9.5px;
  padding: 1.5px 6px;
  border-radius: 999px;
  line-height: 1.2;
}

body.dark-mode .portal-cta-row1,
body.dark-mode .header-portal-toplink {
  border-color: rgba(147, 197, 253, 0.4);
  box-shadow: 0 3px 14px rgba(59, 130, 246, 0.45), 0 0 16px rgba(37, 99, 235, 0.25);
}

@media (max-width: 640px) {
  .portal-cta-row1 {
    height: 30px;
    padding: 0 8px 0 7px;
    font-size: 11px;
    gap: 5px;
    border-radius: 7px;
  }
  .portal-cta-row1 .portal-cta-text {
    font-size: 11px;
  }
  .portal-cta-row1 .portal-cta-badge {
    display: none;
  }
}

/* Mobile Side-Menu Portal Card */
.mobile-portal-banner {
  margin: 14px 16px 16px;
}

.mobile-portal-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
  color: #ffffff !important;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mobile-portal-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.45);
}

.mobile-portal-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.mobile-portal-icon svg {
  stroke: #ffffff;
}

.mobile-portal-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.mobile-portal-title {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}

.mobile-portal-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.82);
}

.mobile-portal-arrow {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
}

@media (max-width: 600px) {
  .portal-cta-badge {
    display: none;
  }
  .portal-cta-btn {
    height: 38px;
    padding: 0 10px;
    font-size: 12px;
    gap: 6px;
  }
}

/* Mobile Side-Menu Brochure Card (Only visible when screen width <= 430px) */
.mobile-brochure-banner {
  display: none !important;
  margin: 0 16px 16px;
}

.mobile-brochure-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #0f172a !important;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.mobile-brochure-btn:hover {
  transform: translateY(-1.5px);
  background: #f1f5f9;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.mobile-brochure-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.mobile-brochure-icon svg {
  stroke: #2563eb;
}

.mobile-brochure-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.mobile-brochure-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
}

.mobile-brochure-sub {
  font-size: 11px;
  color: #64748b;
}

.mobile-brochure-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  background: #2563eb;
  color: #ffffff;
  white-space: nowrap;
}

body.dark-mode .mobile-brochure-btn {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f1f5f9 !important;
}

body.dark-mode .mobile-brochure-btn:hover {
  background: rgba(51, 65, 85, 0.95);
}

body.dark-mode .mobile-brochure-title {
  color: #f1f5f9;
}

body.dark-mode .mobile-brochure-sub {
  color: #94a3b8;
}

body.dark-mode .mobile-brochure-icon {
  background: rgba(37, 99, 235, 0.25);
}

body.dark-mode .mobile-brochure-icon svg {
  stroke: #60a5fa;
}

/* Screen width < 430px: Move brochure from header to side menu so theme toggle & client portal will not overflow */
@media (max-width: 430px) {
  .header-brochure-btn,
  #headerBrochureBtn {
    display: none !important;
  }

  .mobile-brochure-banner {
    display: block !important;
  }

  .header-row-1 .header-row-inner {
    padding: 3px 8px !important;
    gap: 4px !important;
    overflow: visible !important;
  }

  .header-utils {
    gap: 5px !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    width: auto !important;
  }

  .header-row-1 .toll-free {
    margin-right: auto !important;
  }

  .portal-cta-row1 {
    height: 30px !important;
    padding: 0 8px 0 7px !important;
    font-size: 11px !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
  }

  .portal-cta-row1 .portal-cta-text {
    font-size: 11px !important;
  }

  .portal-cta-row1 .portal-cta-badge {
    display: none !important;
  }

  .header-row-1 .theme-toggle {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    justify-content: center !important;
  }
}

/* =====================================================
   CORPORATEMART MOBILE APP PROMOTION SECTION
   Placed under Pan-India Reach Section
===================================================== */
.app-promo-section {
  position: relative;
  padding: 50px 0 92px;
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f1fd 45%, #fffbf2 100%);
  overflow: hidden;
  border-top: 1px solid rgba(195, 227, 255, 0.6);
  border-bottom: 1px solid rgba(195, 227, 255, 0.6);
}

body.dark-mode .app-promo-section {
  background: linear-gradient(135deg, #091322 0%, #0d1b32 45%, #141b2a 100%);
  border-top-color: rgba(30, 58, 138, 0.35);
  border-bottom-color: rgba(30, 58, 138, 0.35);
}

.app-promo-container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

.app-promo-grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  align-items: center;
  gap: 44px;
}

/* Eyebrow Badge */
.app-promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(37, 99, 235, 0.25);
  color: #1d4ed8;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

body.dark-mode .app-promo-badge {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.3);
  color: #38bdf8;
}

.app-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 10px #2563eb;
  animation: appBadgePulse 2s infinite;
}

body.dark-mode .app-badge-dot {
  background: #38bdf8;
  box-shadow: 0 0 10px #38bdf8;
}

@keyframes appBadgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* Headings */
.app-promo-title {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 850;
  line-height: 1;
  color: var(--text, #0f172a);
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}

body.dark-mode .app-promo-title {
  color: #ffffff;
}

.app-title-highlight {
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.dark-mode .app-title-highlight {
  background: linear-gradient(135deg, #60a5fa 0%, #38bdf8 50%, #f59e0b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.app-promo-desc {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted, #475569);
  margin: 0 0 24px;
  max-width: 560px;
}

body.dark-mode .app-promo-desc {
  color: #94a3b8;
}

/* Feature Highlights */
.app-promo-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.app-feature-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(226, 232, 240, 0.95);
  backdrop-filter: blur(8px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.app-feature-card:hover {
  transform: translateX(4px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

body.dark-mode .app-feature-card {
  background: rgba(15, 23, 42, 0.65);
  border-color: rgba(51, 65, 85, 0.75);
}

body.dark-mode .app-feature-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.app-feature-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--icon-accent, #2563eb) 12%, transparent);
  color: var(--icon-accent, #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.app-feature-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.app-feature-text strong {
  font-size: 14px;
  font-weight: 750;
  color: var(--text, #0f172a);
}

body.dark-mode .app-feature-text strong {
  color: #f1f5f9;
}

.app-feature-text span {
  font-size: 12.5px;
  color: #64748b;
}

body.dark-mode .app-feature-text span {
  color: #94a3b8;
}

/* CTA Buttons */
.app-promo-cta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.app-promo-primary-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.app-promo-primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.45);
  filter: brightness(1.05);
}

.app-promo-secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #cbd5e1;
  color: #0f172a !important;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

body.dark-mode .app-promo-secondary-btn {
  background: rgba(30, 41, 59, 0.7);
  border-color: #334155;
  color: #f1f5f9 !important;
}

.app-promo-secondary-btn:hover {
  background: #ffffff;
  border-color: #94a3b8;
  transform: translateY(-2px);
}

body.dark-mode .app-promo-secondary-btn:hover {
  background: #1e293b;
  border-color: #475569;
}

/* =====================================================
   IN-APP STYLE PWA INSTALLATION BANNER (PORTAL PWA)
===================================================== */
.portal-pwa-suggest-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.95));
  border: 1px solid rgba(37, 99, 235, 0.3);
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  backdrop-filter: blur(10px);
  margin-top: 10px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.portal-pwa-suggest-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.16);
  border-color: #2563eb;
}

body.dark-mode .portal-pwa-suggest-banner {
  background: linear-gradient(135deg, #0e1a30, #142442);
  border-color: rgba(56, 189, 248, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 20px rgba(37, 99, 235, 0.2);
}

.portal-pwa-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.portal-pwa-icon-box.portal-pwa-icon-box-app {
  background: transparent;
  padding: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

body.dark-mode .portal-pwa-icon-box.portal-pwa-icon-box-app {
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.portal-pwa-suggest-text {
  flex: 1;
  min-width: 0;
}

.portal-pwa-suggest-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.25;
  margin-bottom: 2px;
}

body.dark-mode .portal-pwa-suggest-text strong {
  color: #38bdf8;
}

.portal-pwa-suggest-text span {
  display: block;
  font-size: 11.5px;
  color: #64748b;
  line-height: 1.35;
}

body.dark-mode .portal-pwa-suggest-text span {
  color: #94a3b8;
}

.portal-pwa-suggest-actions {
  flex-shrink: 0;
}

.portal-pwa-btn-install {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #2563eb;
  color: #ffffff;
  border: none;
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 750;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.portal-pwa-btn-install:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.45);
}

/* Secondary CTA Install Button in Row */
.app-promo-secondary-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  background: #ffffff;
  color: #0f172a;
  font-weight: 750;
  font-size: 14px;
  border: 1px solid #cbd5e1;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.app-promo-secondary-btn:hover {
  background: #f8fafc;
  border-color: #2563eb;
  color: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.15);
}

body.dark-mode .app-promo-secondary-btn {
  background: #1e293b;
  border-color: #334155;
  color: #f1f5f9;
}

body.dark-mode .app-promo-secondary-btn:hover {
  background: #283548;
  border-color: #38bdf8;
  color: #38bdf8;
}

/* Toast Notifications for PWA install feedback */
.cm-toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.cm-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 650;
  color: #ffffff;
  background: #0f172a;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: auto;
  animation: cmToastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  max-width: 380px;
}

.cm-toast-success {
  background: linear-gradient(135deg, #065f46 0%, #047857 100%);
  border-color: #10b981;
}

.cm-toast-info {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  border-color: #38bdf8;
}

.cm-toast-icon {
  font-weight: 800;
  font-size: 15px;
}

.cm-toast.hide {
  animation: cmToastOut 0.3s ease forwards;
}

@keyframes cmToastIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes cmToastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(15px) scale(0.95); }
}

/* =====================================================
   RIGHT COLUMN: 3D SMARTPHONE MOCKUP
===================================================== */
.app-promo-mockup-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1400px;
  perspective-origin: center center;
  padding: 24px 0 36px;
}

.phone-ambient-glow {
  position: absolute;
  width: 400px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 185, 140, 0.3) 0%, rgba(37, 99, 235, 0.16) 45%, transparent 75%);
  filter: blur(55px);
  z-index: 1;
  pointer-events: none;
}

/* Floating Accent Badges */
.phone-floating-pill {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
  backdrop-filter: blur(12px);
  font-size: 11.5px;
  font-weight: 750;
  color: #0f172a;
  animation: phonePillFloat 3.5s ease-in-out infinite alternate;
  pointer-events: none;
}

body.dark-mode .phone-floating-pill {
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(51, 65, 85, 0.9);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
  color: #f8fafc;
}

.float-top-left {
  top: 25px;
  left: -28px;
  animation-delay: 0s;
}

.float-bottom-right {
  bottom: 45px;
  right: -24px;
  animation-delay: 1.5s;
}

@keyframes phonePillFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

.pill-dot.emerald {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}

.pill-icon {
  font-size: 12px;
}

/* Smartphone 3D Mockup Container (Using User Template) */
.phone-mockup-wrapper-inner {
  position: relative;
  z-index: 3;
  width: 330px;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  filter: 
    drop-shadow(20px 28px 42px rgba(15, 23, 42, 0.28))
    drop-shadow(35px 55px 80px rgba(0, 0, 0, 0.18));
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease;
  will-change: transform;
}

body.dark-mode .phone-mockup-wrapper-inner {
  filter: 
    drop-shadow(20px 28px 45px rgba(0, 0, 0, 0.6))
    drop-shadow(35px 55px 85px rgba(37, 99, 235, 0.18));
}

.app-promo-mockup-wrapper:hover .phone-mockup-wrapper-inner {
  transform: translateY(-8px) scale(1.025);
  filter: 
    drop-shadow(25px 36px 52px rgba(15, 23, 42, 0.32))
    drop-shadow(45px 68px 98px rgba(0, 0, 0, 0.24));
}

.phone-mockup-device-img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: auto;
}

.phone-mockup-device-img.dark-only {
  display: none;
}

body.dark-mode .phone-mockup-device-img.light-only {
  display: none;
}

body.dark-mode .phone-mockup-device-img.dark-only {
  display: block;
}

/* Responsive Media Queries */
@media (max-width: 991px) {
  .app-promo-grid {
    grid-template-columns: 1fr;
    gap: 46px;
    text-align: center;
  }

  .app-promo-desc {
    margin-left: auto;
    margin-right: auto;
  }

  .app-promo-features {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  .app-promo-cta-row {
    justify-content: center;
  }

  .portal-pwa-suggest-banner {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }

  .phone-mockup-wrapper-inner {
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .app-promo-section {
    padding: 56px 0 64px;
    overflow: hidden;
  }

  .app-promo-mockup-wrapper {
    padding: 16px 0 28px;
    overflow: visible;
  }

  .phone-mockup-wrapper-inner {
    width: 270px;
  }

  .float-top-left {
    top: 10px;
    left: -10px;
  }

  .float-bottom-right {
    bottom: 25px;
    right: -10px;
  }

  .app-promo-cta-row {
    flex-direction: column;
    width: 100%;
  }

  .app-promo-primary-btn,
  .app-promo-secondary-btn {
    width: 100%;
    justify-content: center;
  }

  .portal-pwa-suggest-banner {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 16px 14px;
  }

  .portal-pwa-suggest-actions,
  .portal-pwa-btn-install {
    width: 100%;
    justify-content: center;
  }
}

/* Hide Sample Certificate Button on all consultation forms */
#showCertificateBtn,
.si-flip-front .si-flip-btn,
.si-consult-card .si-flip-btn {
  display: none !important;
}