@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: Inter, sans-serif; color: #082b69; background: #fff; overflow-x: hidden; }
a { text-decoration: none; }
img { max-width: 100%; display: block; }

/* HEADER */
.main-header { width: 100%; height: 64px; background: #f4f6fc; border-bottom: 1px solid #dfe2e8; position: relative; z-index: 1000; }
.header-container { width: 100%; max-width: 1380px; height: 100%; margin: auto; padding: 0 24px; display: flex; align-items: center; }
.brand-logo { flex-shrink: 0; display: flex; align-items: center; }
.brand-logo img { width: auto; height: 70px; }
.navbar { height: 100%; margin-left: auto; display: flex; align-items: center; gap: 30px; }
.nav-item { height: 100%; position: relative; display: flex; align-items: center; }
.nav-link, .dropdown-btn { border: 0; background: transparent; color: #082b69; font-weight: 600; font-size: 14px; font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.cert-link { font-size: 20px; font-weight: 700; }
.arrow { width: 7px; height: 7px; border-right: 1.5px solid #082b69; border-bottom: 1.5px solid #082b69; transform: rotate(45deg); margin: -4px 0 0 3px; transition: .2s; }
.dropdown-btn.active .arrow { transform: rotate(225deg); margin-top: 4px; }
.contact-btn { width: 130px; height: 42px; border-radius: 25px; background: #062b70; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; transition: .2s; }
.contact-btn:hover { background: #ffbf00; color: #062b70; }

/* DROPDOWNS */
.mega-dropdown { position: absolute; top: 100%; left: 50%; width: 700px; padding: 24px; background: #fff; border-radius: 0 0 20px 20px; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 25px; box-shadow: 0 8px 25px rgba(0,0,0,.08); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, 8px); transition: .2s; z-index: 9999; }
.mega-dropdown.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.dropdown-column { width: 100%; }
.dropdown-column h3 { color: #17468e; font-size: 11px; margin-bottom: 10px; }
.dropdown-column .dropdown-subhead { color: #111; font-size: 13px; font-weight: 700; margin: -2px 0 10px; }
.dropdown-option { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin-bottom: 5px; border-radius: 10px; color: #082b69; transition: .2s; }
.dropdown-option:hover { background: #f1f4f9; transform: translateX(2px); }
.option-icon { width: 36px; min-width: 36px; height: 36px; border-radius: 8px; background: #edf0f5; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.option-icon img { width: 25px; height: 25px; object-fit: contain; }
.dropdown-option strong { display: block; color: #062b70; font-size: 13px; margin-bottom: 2px; }
.dropdown-option span { display: block; color: #606d82; font-size: 10px; font-weight: 600; }

/* ===== MYSTERY SHOPPING — SUBMENU (In bank / In retail / In restaurant) ===== */

.dropdown-option.has-submenu {
    position: relative;
    cursor: pointer;
}

.submenu-arrow {
    margin-left: auto;
    font-size: 16px;
    color: #606d82;
    transition: transform .2s ease;
    flex-shrink: 0;
}

.dropdown-option.has-submenu.open .submenu-arrow {
    transform: rotate(90deg);
    color: #062b70;
}

.submenu-flyout {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 10px;
    width: 190px;
    background: #fff;
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(6px);
    transition: .2s;
    z-index: 10000;
}

.submenu-flyout.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.submenu-link {
    display: block;
    padding: 9px 12px;
    border-radius: 10px;
    color: #082b69;
    font-size: 13px;
    font-weight: 600;
    transition: .2s;
}

.submenu-link:hover {
    background: #f1f4f9;
    transform: translateX(2px);
}

/* Mobile: flyout ko right side ki bajaye niche stack kar do */
@media (max-width: 700px) {
    .submenu-flyout {
        position: static;
        left: auto;
        top: auto;
        margin: 6px 0 6px 46px;
        width: auto;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        box-shadow: none;
        border: 1px solid #e1e5eb;
        display: none;
    }
    .submenu-flyout.show {
        display: block;
    }
}
/* LOGIN */
.login-dropdown { position: absolute; top: 100%; right: 0; width: 310px; padding: 20px 24px; background: #fff; border-radius: 0 0 20px 20px; box-shadow: 0 8px 25px rgba(0,0,0,.08); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: .2s; z-index: 9999; }
.login-dropdown.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.login-option { width: 100%; display: flex; align-items: center; gap: 30px; padding: 7px; margin-bottom: 5px; border-radius: 10px; transition: .2s; }
.login-option:hover { background: #f1f4f9; }
.login-logo { width: 36px; min-width: 36px; height: 36px; border-radius: 8px; background: #edf0f5; display: flex; align-items: center; justify-content: center; }
.login-logo img { width: 25px; height: 25px; object-fit: contain; }
.login-option strong { display: block; color: #062b70; font-size: 13px; margin-bottom: 2px; }
.login-option span { display: block; color: #606d82; font-size: 10px; font-weight: 600; }

@media (max-width: 1000px) { .navbar { gap: 18px; } .nav-link, .dropdown-btn { font-size: 14px; } .contact-btn { width: 110px; height: 38px; font-size: 14px; } .mega-dropdown { width: 620px; } }
@media (max-width: 700px) { .main-header { height: auto; } .header-container { padding: 12px 18px; flex-direction: column; align-items: flex-start; gap: 12px; } .navbar { width: 100%; height: auto; margin-left: 0; flex-wrap: wrap; gap: 12px; } .mega-dropdown { position: fixed; top: 64px; left: 10px; width: calc(100% - 20px); max-height: 75vh; overflow-y: auto; grid-template-columns: 1fr !important; transform: translateY(8px); } .mega-dropdown.show { transform: translateY(0); } .login-dropdown { position: fixed; top: 64px; left: 10px; right: auto; width: calc(100% - 20px); } }

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { font-family: 'Inter', sans-serif; color: var(--blue-deep); background: var(--ice); overflow-x: hidden; }

h1, h2, h3 { font-family: 'Sora', sans-serif; font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

em { font-style: normal; }

:root {
    --navy-deep: #061436;
    --navy: #0b2154;
    --gold: #ffc000;
    --gold-soft: #ffcd33;
    --ink: #ffffff;
    --ink-dim: rgba(255,255,255,0.72);
    --green: #2dd97a;
}

/* ================= HERO: Orbiting Word Sphere ================= */
.hero-section{
    position:relative; min-height:86vh; display:flex; align-items:center; justify-content:center;
    text-align:center; overflow:hidden;
    background:
        linear-gradient(105deg, rgba(6,45,120,0.55) 0%, rgba(18,59,136,0.42) 42%, rgba(85,93,99,0.32) 78%, rgba(119,118,76,0.32) 100%),
        radial-gradient(1100px 700px at 50% 50%, var(--navy) 0%, var(--navy-deep) 62%, #010a29 100%);
    color:#fff;
    padding:70px 24px;
}
.hero-visual{
    position:relative; flex:0 1 620px; max-width:620px; width:100%;
    padding-left:48px;
}
.orbit-stage{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    perspective:1400px; z-index:1;
}
.sphere{
    position:relative; width:10px; height:10px; transform-style:preserve-3d;
    animation:sphereSpin 34s linear infinite;
}
@keyframes sphereSpin{ from{transform:rotateY(0) rotateX(8deg);} to{transform:rotateY(360deg) rotateX(8deg);} }
.chip{
    position:absolute; top:50%; left:50%; transform-style:preserve-3d;
    padding:7px 14px; border-radius:100px; white-space:nowrap;
    font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.09em; text-transform:uppercase;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16);
    color:rgba(255,255,255,0.85); backdrop-filter:blur(3px);
    margin:-14px 0 0 -40px;
}
.chip.gold{ color:var(--gold-soft); border-color:rgba(255,213,79,0.45); background:rgba(255,192,0,0.08); }

.orbit-rings{ position:absolute; inset:0; z-index:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.orbit-rings svg{ opacity:0.16; animation:ringSpin 60s linear infinite; }
@keyframes ringSpin{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,192,0,0.08); border: 1px solid rgba(255,192,0,0.45); color: var(--gold-soft); font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: 0.03em; padding: 9px 18px 9px 14px; border-radius: 999px; margin-bottom: 30px; }
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(255,192,0,0.18); }

.hero-flex{
    position:relative; z-index:2; width:100%; max-width:1280px;
    display:flex; align-items:center; justify-content:space-between; gap:60px;
}

.spot-wrap{ position:relative; z-index:2; max-width:620px; padding:0; text-align:left; }
.spot-eyebrow{ display:inline-flex; margin-bottom:20px; }
.spot-text{ position:relative; min-height:190px; display:flex; align-items:center; justify-content:flex-start; }
.spot-slide{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:flex-start;
    text-align:left;
    opacity:0; transform:scale(0.92) rotateX(8deg); filter:blur(10px);
    transition:opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1), filter 1s ease;
    pointer-events:none;
}
.spot-slide.active{ position:relative; opacity:1; transform:scale(1) rotateX(0); filter:blur(0); pointer-events:auto; }

.spot-dots{ position:relative; z-index:2; display:flex; gap:9px; justify-content:flex-start; margin-top:26px; }
.spot-dots span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.25); transition:background .3s, transform .3s; }
.spot-dots span.on{ background:var(--gold-soft); transform:scale(1.3); }

/* HERO ACTION BUTTONS (right side) */
.hero-actions{
    position:relative; z-index:2; flex-shrink:0; width:300px;
    display:flex; flex-direction:column; gap:16px;
}

.hero-action-btn{
    position:relative; overflow:hidden;
    display:flex; align-items:center; gap:14px;
    background:linear-gradient(155deg, rgba(255,255,255,0.07), rgba(255,255,255,0.015));
    border:1px solid rgba(255,255,255,0.14);
    border-radius:18px; padding:16px 16px; text-align:left; cursor:pointer;
    color:#fff; font-family:inherit; backdrop-filter:blur(8px);
    transition:transform .3s cubic-bezier(.2,.8,.3,1), border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.hero-action-btn::before{
    content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
    background:radial-gradient(140px 90px at 0% 50%, var(--btn-accent, var(--gold)) 0%, transparent 72%);
    transition:opacity .35s ease;
}
.hero-action-btn:hover::before{ opacity:.18; }
.hero-action-btn:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,0.3); box-shadow:0 16px 32px -8px rgba(0,0,0,0.4); }

.hero-action-btn.active{
    border-color:var(--btn-accent, var(--gold));
    background:linear-gradient(155deg, rgba(255,255,255,0.11), rgba(255,255,255,0.02));
    box-shadow:0 16px 34px -8px var(--btn-accent-shadow, rgba(255,192,0,0.35));
}

.hero-action-btn[data-filter="cx"]{ --btn-accent:#ffc000; --btn-accent-shadow:rgba(255,192,0,0.4); }
.hero-action-btn[data-filter="web"]{ --btn-accent:#3ba7ff; --btn-accent-shadow:rgba(59,167,255,0.4); }
.hero-action-btn[data-filter="digital"]{ --btn-accent:#2dd97a; --btn-accent-shadow:rgba(45,217,122,0.4); }

.hab-icon{
    position:relative; z-index:1;
    width:44px; height:44px; border-radius:13px; background:rgba(255,255,255,0.08);
    display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0;
    transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.hero-action-btn:hover .hab-icon{ transform:scale(1.07); }
.hero-action-btn.active .hab-icon{ background:var(--btn-accent); box-shadow:0 8px 18px -4px var(--btn-accent-shadow); }

.hab-text{ position:relative; z-index:1; flex:1; min-width:0; }
.hab-text strong{ display:block; font-family:'Sora',sans-serif; font-size:14.5px; font-weight:600; color:#fff; margin-bottom:3px; }
.hab-text small{ display:block; font-size:11.5px; color:rgba(255,255,255,0.58); font-weight:500; line-height:1.3; }

.hab-arrow{
    position:relative; z-index:1; flex-shrink:0;
    font-size:15px; color:rgba(255,255,255,0.3);
    transform:translateX(-6px); opacity:0;
    transition:transform .3s ease, opacity .3s ease, color .3s ease;
}
.hero-action-btn:hover .hab-arrow,
.hero-action-btn.active .hab-arrow{
    opacity:1; transform:translateX(0); color:var(--btn-accent);
}

@media(prefers-reduced-motion: reduce){
    .sphere, .orbit-rings svg{ animation:none; }
}
@media(max-width:720px){ .chip{ font-size:10px; padding:5px 10px; } }
@media(max-width:900px){
    .hero-flex{ flex-direction:column; align-items:flex-start; gap:36px; }
    .hero-visual{ max-width:100%; flex:1 1 100%; padding-left:0; }
    .spot-wrap{ text-align:left; max-width:100%; }
    .hero-actions{ width:100%; gap:10px; }
    .hero-action-btn{ padding:11px 12px; border-radius:14px; gap:10px; }
    .hab-icon{ width:34px; height:34px; border-radius:10px; font-size:15px; }
    .hab-text strong{ font-size:12.5px; margin-bottom:1px; }
    .hab-text small{ font-size:10px; }
}
@media(max-width:600px){ .hero-section{ min-height:auto; padding:90px 20px 60px; } }
@media(max-width:700px){
    .orbit-rings, .orbit-stage{ display:none !important; }
}


h1 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.9rem, 4.4vw, 3.5rem);
    line-height: 1.16;
    letter-spacing: .01em;
    text-transform: uppercase;
    background: linear-gradient( 100deg, #fff 30%, #FFD54F 45%, #fff 60% );
    background-size: 260% 100%;
    background-position: 120% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: sweep 3.2s ease-in-out infinite;
}

h1 em { font-style: normal; }

.achievement-section {
    width: 100%;
    padding: 0 30px;
    position: relative;
    z-index: 3;
    margin-top: -80px;
}

.achievement-bar {
    width: 75%;
    max-width: 1100px;
    margin: 0 auto;
    background: #fff;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid #dfe2e8;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(4, 35, 91, .10);
}

.achievement-item {
    min-height: 70px;
    padding: 15px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-right: 1px solid #e1e5eb;
}

.achievement-item:last-child { border-right: 0; }

.achievement-number {
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
    color: #ffb800;
    margin-bottom: 9px;
}

.achievement-item:nth-child(3) .achievement-number { color: #062c70; }

.achievement-item p { margin: 0; font-size: 12px; line-height: 1.4; color: #486080; }

.member-item { padding: 18px 28px; }

.member-image-placeholder {
    width: 70%;
    max-width: 205px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.member-image-placeholder img { width: 100%; height: auto; object-fit: contain; }

.what-we-do { width: 100%; background: #f5f7fc; padding: 78px 30px 82px; }

.what-we-do-container { max-width: 1380px; margin: 0 auto; }

.what-label {
    color: #ffb800;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 5px;
    margin-bottom: 18px;
}

.testimonials {
  --navy: #0B1F45;
  --navy-2: #12294f;
  --gold: #F5A623;
  --ink: #1F2937;
  --muted: #64748B;
  --card: #FFFFFF;
  --line: #E6EAF0;
  background: #F7F8FB;
  padding: 88px 24px;
}

.testimonials__inner {
  max-width: 1180px;
  margin: 0 auto;
}

.testimonials__head {
  max-width: 560px;
  margin-bottom: 48px;
}

.testimonials__head h2 {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 12px;
  line-height: 1.2;
}

.testimonials__head p {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

.testimonials__track-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
}

.testimonials__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 8px 4px 16px;
  flex: 1;
  scrollbar-width: none;
}
.testimonials__track::-webkit-scrollbar { display: none; }

.t-card {
  scroll-snap-align: start;
  flex: 0 0 min(560px, 90vw);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  box-shadow: 0 1px 2px rgba(11,31,69,0.04);
  min-height: 320px;
}

.t-sq {
  width: 50%;
  flex-shrink: 0;
  
}

.t-sq--pic {
  position: relative;
  overflow: hidden;
  background: #e9edf3;
}
#no-photo-card {
  width: 0%;
  flex-shrink: 0;
}
.t-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
}

.t-sq--text {
  width: auto;
  flex: 1 1 auto;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--card);
}

.t-quote-mark {
  font-family: Georgia, serif;
  font-size: 36px;
  line-height: 1;
  color: var(--gold);
  display: block;
  margin-bottom: 6px;
}

.t-text {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 16px;
}

.t-name {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.t-role {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}

.t-nav {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--navy);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.t-nav:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.t-nav:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

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

.t-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, width 0.15s ease;
}
.t-dot.is-active { background: var(--gold); width: 20px; border-radius: 4px; }

/* ===== TESTIMONIALS: tablet — cards a bit narrower, side-by-side kept ===== */
@media (max-width: 900px) {
  .testimonials { padding: 64px 20px; }
  .testimonials__head h2 { font-size: 28px; }
  .t-card { min-height: 280px; }
  .t-sq--pic { min-width: 130px; }
}

/* ===== TESTIMONIALS: mobile — stack photo on top, text below (fixes squished layout) ===== */
@media (max-width: 640px) {
  .testimonials { padding: 56px 16px; }
  .testimonials__head h2 { font-size: 26px; }
  .t-nav { display: none; }

  .t-card {
    flex-direction: column;
    min-height: 0;
    flex-basis: 88vw;
  }
  .t-sq {
    width: 100% !important;
  }
  .t-sq--pic {
    height: 240px;
    min-width: 0;
  }
  #no-photo-card {
    display: none;
  }
  .t-sq--text {
    padding: 20px 18px 22px;
  }
  .t-text { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .testimonials__track { scroll-behavior: auto; }
}

.what-label span { margin-right: 10px; }

.what-we-do h2 {
    margin: 0;
    color: #062d72;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -1.5px;
}

.what-we-do p {
    max-width: 900px;
    margin: 18px 0 0;
    color: #536d90;
    font-size: 15px;
    line-height: 1.45;
}

.services-section {
    width: 100%;
    background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
    padding: 70px 0 90px;
    position: relative;
    overflow: hidden;
}
.services-section::before{
    content:"";
    position:absolute; inset:0;
    background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity:.5;
    pointer-events:none;
}
.services-section > * { position: relative; z-index: 1; max-width: 1380px; margin-left: auto; margin-right: auto; padding-left: 30px; padding-right: 30px; box-sizing: border-box; }

.service-buttons { display: flex; gap: 14px; margin-bottom: 30px; }

.service-btn {
    width: 300px;
    min-height: 78px;
    background: #fff;
    border: 1px solid #dce2ec;
    border-radius: 15px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    cursor: pointer;
    text-align: left;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.service-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,45,100,.10); }

.service-btn.active { border: 2px solid #1646a8; box-shadow: 0 8px 22px rgba(0,60,150,.13); }

.button-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #edf1f7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 12px;
    flex-shrink: 0;
}

.button-text h3 { font-size: 15px; font-weight: 500; color: #003b82; margin-bottom: 4px; }

.button-text p { font-size: 12px; line-height: 1.3; color: #536987; }

.services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

.service-card {
    background: #fff;
    border: 1px solid #dce2ec;
    border-radius: 18px;
    min-height: 250px;
    min-width: 0;
    padding: 28px 25px;
    position: relative;
    scroll-margin-top: 100px;
    transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease, border-color .3s ease;
}

.card-icon {
    width: 44px;
    height: 44px;
    background: #1649ad;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    margin-bottom: 15px;
}

.service-card h3 { font-size: 17px; font-weight: 500; color: #003b82; margin-bottom: 8px; }

.service-card p { font-size: 14px; line-height: 1.4; color: #536987; margin-bottom: 16px; }

.view-details {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #f2a900;
    font-size: 12px;
    font-weight: 600;
    transition: gap .25s ease;
}

.view-details:hover { gap: 11px; }

.service-card.highlight { transform: translateY(-6px); border-color: #1649ad; box-shadow: 0 13px 30px rgba(22,73,173,.16); opacity: 1; }

.service-card.dim { opacity: .45; transform: scale(.985); }

.products-section {
    width: 100%;
    background: #f4f6fd;
    padding: 64px 30px 80px;
    scroll-margin-top: 90px;
    box-sizing: border-box;
}

.products-section.pulse-highlight .products-block{ animation: productsPulse 1.5s ease; }
@keyframes productsPulse{
    0%   { box-shadow: 0 0 0 0 rgba(255,192,0,0); }
    30%  { box-shadow: 0 0 0 10px rgba(255,192,0,0.16); }
    100% { box-shadow: 0 0 0 0 rgba(255,192,0,0); }
}

.products-block {
    position: relative;
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    background: radial-gradient(circle at 88% 6%, rgba(58,110,220,0.22) 0%, transparent 45%), linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 55%, #14285a 100%);
    border-radius: 28px;
    padding: 48px 48px 56px;
    box-sizing: border-box;
    overflow: hidden;
    transition: box-shadow .3s ease;
}
.products-block::before{
    content:"";
    position:absolute; inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity:.6;
    pointer-events:none;
}
.products-block > * { position: relative; z-index: 1; }

.products-intro { max-width: 900px; margin-bottom: 42px; }

.products-label {
    color: #ffcd33;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 17px;
}

.products-intro h1 {
    color: #fff;
    font-size: 38px;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -1.5px;
    margin-bottom: 18px;
}

.products-intro p { color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.45; max-width: 850px; }

.products-grid {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.product-card {
    width: 100%;
    min-height: 285px;
    background: #fff;
    border: 1px solid #dce2ec;
    border-radius: 18px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    transition: transform .3s ease, box-shadow .3s ease;
}

.product-image {
    width: 58px;
    height: 58px;
    background: #1950bb;
    border-radius: 12px;
    margin-bottom: 18px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image img { width: 100%; height: 100%; object-fit: contain; }

.product-card h2 { color: #062e72; font-size: 18px; font-weight: 400; margin-bottom: 9px; }

.product-card p { color: #50698c; font-size: 13px; line-height: 1.45; margin-bottom: 16px; }

.product-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #f3aa00;
    font-size: 13px;
    font-weight: 600;
}

.product-link span { font-size: 17px; transition: transform .2s ease; }

.product-link:hover span { transform: translateX(4px); }

.product-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,45,100,.10); }

.certificate { width: 100%; padding: 0 30px 38px; background: #f4f6fd; }

.certificate-card {
    width: 100%;
    max-width: 1380px;
    min-height: 320px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #dfe2e9;
    border-radius: 22px;
    display: flex;
    align-items: center;
    gap: 44px;
    padding: 42px 48px;
}

.certificate-badge {
    width: 140px;
    height: 140px;
    min-width: 140px;
    border-radius: 50%;
    background: linear-gradient(145deg,#ffbd0b,#ffd13f);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    box-shadow: 0 20px 32px rgba(190,150,20,.22);
}

.certificate-content { flex: 1; }

.certificate-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffb600;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 4px;
}

.certificate-label::before { content: ''; width: 20px; height: 2px; background: #ffb600; }

.certificate-content h1, .certificate-content h2 {
    margin: 0 0 16px;
    color: #002b70;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.15;
}

.certificate-content p {
    margin: 0 0 12px;
    color: #52617a;
    font-size: 14px;
    line-height: 1.45;
    max-width: 1000px;
}

.certificate-content strong { color: #002b70; }

.reviews {
    width: min(1380px, 100%);
    margin: 20px auto 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffb600;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 4px;
}

.reviews span { width: 20px; height: 2px; background: #ffb600; }

.contact-section { width: 100%; padding: 0 30px 30px; background: #f4f6fd; }

.contact-container {
    width: 100%;
    max-width: 1380px;
    min-height: 0;
    margin: 0 auto;
    padding: 40px 60px;
    border-radius: 28px;
    background: linear-gradient(105deg,#062d78 0%,#123b88 42%,#555d63 78%,#77764c 100%);
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    color: #fff;
}

.contact-content { width: 100%; }

.contact-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    color: #ffbd00;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 5px;
}

.contact-label span { width: 20px; height: 2px; background: #ffbd00; }

.contact-content h2 {
    max-width: 650px;
    margin: 0 0 17px;
    color: #fff;
    font-size: 34px;
    font-weight: 400;
    line-height: 1.08;
}

.contact-content p {
    max-width: 620px;
    margin: 0;
    color: #dce3f2;
    font-size: 15px;
    line-height: 1.45;
}

.contact-details { width: 100%; padding-top: 2px; }

.contact-item { display: grid; grid-template-columns: 72px 1fr; gap: 15px; margin-bottom: 22px; }

.contact-title {
    color: #ffbd00;
    font-family: monospace;
    font-size: 11px;
    font-weight: 700;
    padding-top: 2px;
}

.contact-item p, .contact-item a {
    margin: 0;
    color: #fff;
    font-size: 14px;
    line-height: 1.45;
    text-decoration: none;
}

.contact-item a { width: fit-content; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 2px; }

.contact-item a:hover { border-bottom-color: #fff; }

.privacy-section { width: 100%; padding: 0 30px 30px; background: #f4f6fd; }

.privacy-container {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 40px 60px;
    border-radius: 28px;
    background: linear-gradient(120deg,#0a1830 0%,#16254a 45%,#1f2f57 75%,#2b3a63 100%);
    color: #fff;
}

.privacy-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    color: #ffbd00;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 5px;
}

.privacy-label span { width: 20px; height: 2px; background: #ffbd00; }

.privacy-container > p.privacy-intro {
    max-width: 820px;
    margin: 17px 0 0;
    color: #dce3f2;
    font-size: 15px;
    line-height: 1.55;
}

.privacy-grid {
    margin-top: 34px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 60px;
}

.privacy-block h3 {
    color: #ffbd00;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
}

.privacy-block p {
    color: #dce3f2;
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

.privacy-block ul {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.privacy-block ul li {
    position: relative;
    padding-left: 18px;
    color: #dce3f2;
    font-size: 14px;
    line-height: 1.6;
}

.privacy-block ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffbd00;
}

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

@media (max-width: 640px) {
    .privacy-section { padding: 0 16px 24px; }
    .privacy-container { padding: 24px 18px; border-radius: 20px; }
}

.contact-socials {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    margin-left: 87px;
}

.social-icon {
    position: relative;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    transition: .3s ease;
}

.social-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.social-icon span { display: none; }

.social-icon:hover { background: #ffbd00; border-color: #ffbd00; transform: translateY(-3px); }

@keyframes sweep {
    0% {
        background-position: 130% 0;
    }

    55% {
        background-position: -30% 0;
    }

    100% {
        background-position: -30% 0;
    }
}

section {
    display: column;
    align-items: flex-start;
    gap: 12px;
}

    .navbar { width: 100%; height: auto; flex-wrap: wrap; gap: 12px; }
    .mega-dropdown {
        position: fixed;
        top: 64px;
        left: 10px;
        width: calc(100% - 20px);
        max-height: 75vh;
        overflow-y: auto;
        grid-template-columns: 1fr;
        transform: translateY(8px);
    }
    .mega-dropdown.show { transform: translateY(0); }
    .login-dropdown {
        position: fixed;
        top: 64px;
        left: 10px;
        right: auto;
        width: calc(100% - 20px);
    }


@media (max-width: 720px) {
    h1 { font-size: 1.8rem; }
}

/* =========================================================
   FOOTER
   ========================================================= */

.footer {
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 45px 30px 0;
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
    color: rgba(255,255,255,.68);
    overflow: hidden;
}

.footer-main {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 0 20px;
    display: grid;
    grid-template-columns: 1.8fr 1.25fr 1.25fr 1.25fr;
    gap: 42px;
}

.footer-brand {
    padding-left: 5px;
}

.footer-logo {
    display: inline-block;
    margin-bottom: 20px;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -1px;
}

.footer-logo span {
    color: #ffb900;
}

.footer-brand p {
    max-width: 360px;
    margin: 0;
    color: rgba(255,255,255,.62);
    font-size: 14px;
    line-height: 1.45;
}

.footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-column h3 {
    margin: 3px 0 20px;
    color: #ffcd33;
    font-family: monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.footer-column a {
    width: fit-content;
    margin-bottom: 11px;
    color: rgba(255,255,255,.68);
    font-size: 13px;
    line-height: 1.35;
    text-decoration: none;
    transition: color 0.25s ease;
}

.footer-column a:hover {
    color: #ffb900;
}

.footer-bottom {
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    padding: 16px 0 0;
    border-top: 1px solid rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.footer-bottom p {
    margin: 0;
    padding: 0;
    color: rgba(255,255,255,.5);
    font-size: 12px;
    line-height: 1.4;
}

@media (max-width: 1000px) {
    .footer {
        padding: 35px 25px 0;
    }

    .footer-main {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 30px;
        padding-bottom: 20px;
    }
}

@media (max-width: 760px) {
    .footer {
        padding: 30px 20px 0;
    }

    .footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 28px 24px;
        padding-bottom: 20px;
    }

    .footer-brand {
        grid-column: 1 / -1;
        padding-left: 0;
    }

    .footer-bottom {
        padding-top: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .footer {
        padding: 25px 18px 0;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 22px;
        padding-bottom: 18px;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-logo {
        margin-bottom: 15px;
        font-size: 21px;
    }

    .footer-brand p {
        font-size: 13px;
    }

    .footer-column h3 {
        margin-bottom: 14px;
    }

    .footer-column a {
        margin-bottom: 9px;
    }

    .footer-bottom {
        padding-top: 4px;
        gap: 6px;
    }

    .footer-bottom p {
        font-size: 11px;
    }
}
/* ===== FINAL HEADER FIX ===== */

.main-header {
    position: relative !important;
    width: 100% !important;
}

.header-container {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 34px !important;
}

.brand-logo {
    position: absolute !important;
    left: 34px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.navbar {
    position: absolute !important;
    right: 34px !important;
    top: 0 !important;

    width: auto !important;
    height: 64px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;

    gap: 30px !important;
}

.nav-item {
    height: 64px !important;
    width: auto !important;

    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

.nav-link,
.dropdown-btn {
    display: flex !important;
    align-items: center !important;

    width: auto !important;

    white-space: nowrap !important;
}


/* CONTACT */

.contact-btn {
    width: 140px !important;
    height: 42px !important;

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

    flex-shrink: 0 !important;
}


/* SERVICES / PRODUCTS DROPDOWN */

.mega-dropdown {
    position: absolute !important;

    top: 64px !important;
    left: 50% !important;

    width: 700px !important;

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

    padding: 24px !important;

    transform: translateX(-50%) translateY(8px) !important;
}

.mega-dropdown.show {
    transform: translateX(-50%) translateY(0) !important;
}


/* LOGIN */

.login-dropdown {
    position: absolute !important;

    top: 64px !important;
    right: 0 !important;
    left: auto !important;

    width: 310px !important;
}


/* MOBILE */

@media (max-width: 700px) {

    .header-container {
        position: relative !important;
        min-height: 64px !important;
    }

    .brand-logo {
        position: static !important;
        transform: none !important;
    }

    .navbar {
        position: static !important;

        width: 100% !important;
        height: auto !important;

        margin: 12px 0 0 !important;

        display: flex !important;
        flex-wrap: wrap !important;
    }

    .mega-dropdown {
        position: fixed !important;

        top: 64px !important;
        left: 10px !important;

        width: calc(100% - 20px) !important;

        grid-template-columns: 1fr !important;

        transform: translateY(8px) !important;
    }

    .mega-dropdown.show {
        transform: translateY(0) !important;
    }
}
/* ===== ACHIEVEMENT BAR: stack on mobile ===== */
@media(max-width:700px){
    .achievement-section{ padding:0 16px; margin-top:-50px; }
    .achievement-bar{ width:100%; grid-template-columns:1fr; border-radius:18px; }
    .achievement-item{ padding:16px; border-right:0; border-bottom:1px solid #e1e5eb; min-height:auto; }
    .achievement-item:last-child{ border-bottom:0; }
    .achievement-number{ font-size:24px; margin-bottom:6px; }
    .member-item{ padding:16px 24px; }
    .member-image-placeholder{ width:55%; }
}

/* ===== CERTIFICATE / TRUST CARD: stack on mobile ===== */
@media(max-width:900px){
    .certificate{ padding:0 16px 30px; }
    .certificate-card{ flex-direction:column; align-items:flex-start; gap:18px; padding:28px 22px; min-height:auto; text-align:left; }
    .certificate-badge{ width:96px; height:96px; min-width:96px; font-size:12px; }
    .certificate-content h1, .certificate-content h2{ font-size:22px; margin-bottom:10px; }
    .certificate-content p{ font-size:13px; }
}
@media(max-width:420px){
    .certificate-card{ padding:22px 18px; }
    .certificate-badge{ width:80px; height:80px; min-width:80px; font-size:10.5px; }
    .certificate-content h1, .certificate-content h2{ font-size:19px; }
}

/* ===== CTA / CONTACT SECTION: stack on mobile/tablet ===== */
@media (max-width: 900px) {
    .contact-section { padding: 0 16px 24px; }
    .contact-container {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 30px 24px;
        border-radius: 22px;
    }
    .contact-content h2 { font-size: 26px; }
    .contact-content p { font-size: 13.5px; }
    .contact-socials { margin-left: 0; }
}
@media (max-width: 420px) {
    .contact-container { padding: 24px 18px; }
    .contact-content h2 { font-size: 22px; }
    .contact-item { grid-template-columns: 56px 1fr; gap: 10px; }
    .contact-title { font-size: 10px; }
    .contact-item p, .contact-item a { font-size: 12.5px; }
    .social-icon { width: 40px; height: 40px; }
}

/* ===== PRODUCT CARDS (Syncrowise/Trakset): resize for mobile/tablet ===== */
@media (max-width: 900px) {
    .products-section { padding: 44px 16px 50px; }
    .products-block { padding: 30px 20px 34px; border-radius: 22px; }
    .products-intro { margin-bottom: 26px; }
    .products-intro h1 { font-size: 26px; letter-spacing: -1px; }
    .products-intro p { font-size: 13px; }
    .products-grid { gap: 12px; }
    .product-card { min-height: 0; padding: 18px 16px; }
    .product-image { width: 42px; height: 42px; border-radius: 10px; margin-bottom: 12px; }
    .product-image img { width: 60%; height: 60%; }
    .product-card h2 { font-size: 15px; margin-bottom: 6px; }
    .product-card p { font-size: 11.5px; line-height: 1.4; margin-bottom: 10px; }
    .product-link { font-size: 11px; margin-top: 4px; }
}
@media (max-width: 420px) {
    .product-card { padding: 14px 12px; }
    .product-card h2 { font-size: 13.5px; }
    .product-card p { font-size: 10.5px; }
    .product-image { width: 36px; height: 36px; }
}

/* ===== SERVICES CARDS: 2-per-row on mobile/tablet (fixes horizontal overflow) ===== */
@media (max-width: 900px) {
    .services-section > * { padding-left: 18px; padding-right: 18px; }
    .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .service-card { min-height: auto; padding: 18px 15px; }
    .card-icon { width: 36px; height: 36px; font-size: 16px; margin-bottom: 10px; }
    .service-card h3 { font-size: 14.5px; margin-bottom: 6px; }
    .service-card p { font-size: 11.5px; line-height: 1.4; margin-bottom: 12px; }
    .view-details { font-size: 11px; }
}
@media (max-width: 420px) {
    .services-grid { gap: 10px; }
    .service-card { padding: 14px 11px; }
    .service-card h3 { font-size: 13px; }
    .service-card p { font-size: 10.5px; }
}

/* ===== MOBILE NAV (HAMBURGER + OFF-CANVAS) — added for mobile/tablet responsiveness ===== */
.hamburger-btn{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:34px;
    height:34px;
    border:0;
    background:transparent;
    cursor:pointer;
    padding:0;
    flex-shrink:0;
}
.hamburger-btn span{
    display:block;
    width:100%;
    height:2px;
    border-radius:2px;
    background:#082b69;
    transition:.25s ease;
}
.hamburger-btn.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger-btn.active span:nth-child(2){ opacity:0; }
.hamburger-btn.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(8,25,60,.5);
    /* Must stay BELOW .main-header's stacking context (z-index:1000) so the
       fixed off-canvas .navbar (which lives inside that context) still shows
       on top of it. Using a higher value here used to hide the mobile menu
       behind this overlay. */
    z-index:900;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s ease,visibility .25s ease;
}
.nav-backdrop.show{ opacity:1; visibility:visible; pointer-events:auto; }

@media (max-width:900px){
    .hamburger-btn{ display:flex; }

    .header-container{
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        justify-content:space-between !important;
        padding:0 16px !important;
    }

    .brand-logo img{ height:42px !important; }

    .navbar{
        position:fixed !important;
        top:0 !important;
        right:-340px !important;
        left:auto !important;
        bottom:auto !important;
        width:min(82vw,320px) !important;
        height:100vh !important;
        max-height:none !important;
        margin:0 !important;
        background:#fff !important;
        flex-direction:column !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
        flex-wrap:nowrap !important;
        gap:0 !important;
        padding:90px 22px 30px !important;
        overflow-y:auto !important;
        box-shadow:-10px 0 35px rgba(8,20,50,.22);
        transition:right .3s ease;
        z-index:20000 !important;
    }
    .navbar.mobile-open{ right:0 !important; }

    .navbar .nav-item{
        position:static !important;
        width:100% !important;
        height:auto !important;
        display:block !important;
    }

    .navbar .nav-link,
    .navbar .dropdown-btn{
        width:100% !important;
        justify-content:space-between !important;
        padding:15px 2px !important;
        border-bottom:1px solid #eef1f6;
        font-size:15px !important;
    }

    .navbar .mega-dropdown,
    .navbar .login-dropdown{
        /* Closed by default: position:static pulls these into the normal
           document flow inside the off-canvas panel, so without display:none
           the hidden (opacity:0) block still reserves its full height and
           leaves a blank gap between menu items. */
        display:none !important;
        position:static !important;
        top:auto !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        transform:none !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        width:100% !important;
        max-width:100% !important;
        max-height:none !important;
        box-shadow:none !important;
        border:0 !important;
        padding:4px 0 12px 12px !important;
        grid-template-columns:1fr !important;
        margin:0 !important;
    }

    .navbar .mega-dropdown.show{
        display:grid !important;
    }
    .navbar .login-dropdown.show{
        display:block !important;
    }

    .navbar .submenu-flyout{
        position:static !important;
        left:auto !important;
        top:auto !important;
        margin:6px 0 6px 20px !important;
        width:auto !important;
        box-shadow:none !important;
        border:1px solid #e1e5eb;
    }

    .navbar .contact-btn{
        width:100% !important;
        margin-top:16px;
    }
}

@media (max-width:480px){
    .brand-logo img{ height:36px !important; }
}

@media (max-width:380px){
    .navbar{ width:88vw !important; }
} 


/* ================= SECTION EYEBROWS ================= */
.section-eyebrow{
    display:flex; align-items:center; gap:10px;
    color:#ffb600; font-size:11px; font-weight:600;
    letter-spacing:5px; text-transform:uppercase;
    margin-bottom:22px;
}
.section-eyebrow::before{ content:''; width:20px; height:2px; background:#ffb600; flex-shrink:0; }
.section-eyebrow--spaced{ margin-top:64px; }
.testimonials > .testimonials__inner > .section-eyebrow{ color:#e29a00; }
.testimonials > .testimonials__inner > .section-eyebrow::before{ background:#e29a00; }
@media (max-width:900px){
    .section-eyebrow{ font-size:10px; letter-spacing:4px; margin-bottom:16px; }
    .section-eyebrow--spaced{ margin-top:44px; }
}

/* ================= NAV SPREAD (desktop) ================= */
@media (min-width:901px){
    .navbar{
        right: clamp(34px, 4.5vw, 76px) !important;
        gap: clamp(26px, 3vw, 44px) !important;
    }
}

.products-block > .section-eyebrow{ max-width:1000px; margin-left:auto; margin-right:auto; }

/* ===== COPYRIGHT WATERMARK BANNER (remove after full payment) ===== */
.wm-banner{
    position:sticky; top:0; left:0; width:100%; z-index:100000;
    background:#062b70; color:#fff; text-align:center;
    font-family:'Inter',Arial,sans-serif; font-size:12px; font-weight:600;
    letter-spacing:.3px; line-height:1.4; padding:9px 14px;
    box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.wm-banner strong{ color:#ffc000; }
@media (max-width:600px){ .wm-banner{ font-size:10.5px; padding:8px 10px; } }