/* ✅ HORIZONTAL SCROLL FIX (NO DESIGN CHANGE) */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

/* =========================================================
   HEADER CSS (Scoped)
   Scope wrapper required: <div class="site-header"> ... </div>
   ========================================================= */

.site-header{
  overflow-x: clip;

  --orange:#ff3b12;
  --navBlue:#0b0f3b;
  --text:#111827;
  --border:#e9e9e9;

  --accent1:#FF4B2B;
  --accent2:#FF416C;

  --shadow:0 18px 50px rgba(0,0,0,.12);
  --shadow-soft:0 10px 25px rgba(0,0,0,.10);
  --shadow-float:0 16px 40px rgba(0,0,0,.14);

  --container:1200px;

  --r12:12px;
  --r14:14px;
  --r18:18px;

  --ease:cubic-bezier(.2,.8,.2,1);
  --ease2:cubic-bezier(.16,1,.3,1);

  --focus: 0 0 0 3px rgba(255,59,18,.22);

  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  position:relative;
  z-index:20000;
}

/* Scoped reset */
.site-header *{ box-sizing:border-box; }
.site-header a{ color:inherit; text-decoration:none; }
.site-header img{ display:block; max-width:100%; height:auto; }
.site-header .container{ max-width:var(--container); margin:0 auto; padding:0 16px; }

.site-header,
.site-header header,
.site-header section,
.site-header .container,
.site-header .row,
.site-header .desk-bar,
.site-header .desk-navwrap,
.site-header .desk-nav{
  overflow: visible !important;
}

@media (prefers-reduced-motion: reduce){
  .site-header *{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* KEYFRAMES */
@keyframes shFadeUp{ 0%{opacity:0;transform:translateY(10px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes shSlideDown{ 0%{opacity:0;transform:translateY(-10px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes shGlowPulse{ 0%,100%{box-shadow:0 10px 24px rgba(11,15,59,.18);transform:translateY(0)} 50%{box-shadow:0 14px 32px rgba(255,65,108,.18);transform:translateY(-1px)} }
@keyframes shShine{ 0%{transform:translateX(-120%) skewX(-12deg);opacity:0} 35%{opacity:.35} 100%{transform:translateX(220%) skewX(-12deg);opacity:0} }
@keyframes shMobilePanel{ 0%{opacity:0;transform:translateY(-10px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes shMarquee{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* =========================================================
   DESKTOP HEADER
   ========================================================= */
.site-header .desk-header{ display:block; position:relative; z-index:20000; }

.site-header .desk-top{
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  color:#fff;
  border-top:3px solid #101124;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  animation: shSlideDown .55s var(--ease2) both;
  z-index:20000;
}
.site-header .desk-top::before{
  content:"";
  position:absolute;
  inset:-60px -80px auto auto;
  width:220px;height:220px;
  background: radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 60%);
  filter: blur(2px);
  opacity:.55;
  pointer-events:none;
}
.site-header .desk-top::after{
  content:"";
  position:absolute;
  left:-30%;
  top:0;
  width:60%;
  height:100%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.12), rgba(255,255,255,0));
  transform: skewX(-12deg);
  animation: shShine 6s var(--ease) infinite;
  pointer-events:none;
  opacity:.15;
}

.site-header .desk-top .row{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:12px 0;
}
.site-header .desk-top .blk{
  flex:1;min-width:220px;
  display:flex;align-items:center;gap:12px;
  padding-right:16px;border-right:1px dashed rgba(255,255,255,.35);
}
.site-header .desk-top .blk:last-child{ border-right:none;padding-right:0; }
.site-header .desk-top .blk-center{ justify-content:center; }
.site-header .desk-top .blk-right{ justify-content:flex-end; }

.site-header .desk-top .title{
  font-family:"Oswald",sans-serif;
  line-height:1.05;
  letter-spacing:.6px;
}
.site-header .desk-top .title small{ display:block;font-size:12px;opacity:.96; }
.site-header .desk-top .title .big{
  display:block;font-size:34px;font-weight:800;color:#ffd24d;
  text-shadow:0 2px 12px rgba(0,0,0,.18);
}
.site-header .desk-top .title .sub{ display:block;font-size:11px;opacity:.95;letter-spacing:1px; }

.site-header .no1{ display:flex;align-items:center;gap:12px;font-family:"Oswald",sans-serif; }
.site-header .no1 b{ display:block;font-size:22px;line-height:1.05; }
.site-header .no1 i{ font-style:italic;opacity:.95; }

.site-header .no1-badge{
  width:64px;height:64px;display:grid;place-items:center;
  border-radius:var(--r14);
  background:rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.site-header .no1-badge:hover{ transform: translateY(-1px) rotate(-1deg); background:rgba(255,255,255,.16); }
.site-header .no1-badge span{ font-family:"Oswald",sans-serif;font-weight:900;font-size:28px;line-height:1; }

.site-header .consult{ display:flex;align-items:center;gap:12px;font-family:"Oswald",sans-serif; }
.site-header .consult .ic{
  width:44px;height:44px;border-radius:var(--r12);
  display:grid;place-items:center;
  background:rgba(255,255,255,.15);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  transition: transform .2s var(--ease);
}
.site-header .consult:hover .ic{ transform: translateY(-1px); }
.site-header .consult .label{ font-size:18px;font-weight:800; }
.site-header .consult .ph{ display:block;font-size:20px;font-weight:800;letter-spacing:.3px; }

.site-header .desk-bar{
  background:#fff;
  border-bottom:1px solid var(--border);
  animation: shFadeUp .55s var(--ease2) both;
  animation-delay:.08s;
  position:relative;
  z-index:20000;
  overflow:visible;
}
.site-header .desk-bar .row{
  display:flex;align-items:center;gap:18px;padding:10px 0;
  overflow:visible;
}

.site-header .desk-brand{ display:flex;align-items:center;gap:12px;min-width:240px; }
.site-header .desk-brand img{ width:240px;max-width:240px;object-fit:contain; }

.site-header .desk-follow{
  display:flex;align-items:center;gap:12px;color:#444;
  border-left:1px dashed #ddd;padding-left:16px;
}
.site-header .desk-follow .lbl{ font-size:14px;color:#555; }

.site-header .desk-social{ display:flex;gap:8px; }
.site-header .desk-social a{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  transition: transform .18s var(--ease), filter .18s var(--ease);
}
.site-header .desk-social a:hover{ transform: translateY(-2px);filter:brightness(1.07); }
.site-header .desk-social a.fb{ background:#1877f2; }
.site-header .desk-social a.ig{ background:#e1306c; }
.site-header .desk-social a.yt{ background:#ff0000; }

.site-header .desk-navwrap{ margin-left:auto;display:flex;align-items:center;gap:18px; overflow:visible; }

.site-header .desk-nav{
  display:flex;align-items:center;gap:14px;font-size:14px;
  overflow:visible;
}
.site-header .desk-nav > a,
.site-header .desk-nav .dd > a{
  padding:10px 12px;border-radius:12px;
  display:flex;align-items:center;gap:6px;
  transition: background .16s var(--ease), transform .16s var(--ease);
  white-space:nowrap;position:relative;
}
.site-header .desk-nav a.active{ color:#ff3b5f; }
.site-header .desk-nav > a:hover,
.site-header .desk-nav .dd > a:hover{ background:rgba(0,0,0,.04);transform:translateY(-1px); }
.site-header .desk-nav a:focus-visible,
.site-header .desk-nav .dd > a:focus-visible{ outline:none;box-shadow:var(--focus); }

.site-header .dd{ position:relative; z-index:30001; }

@media (min-width: 768px){
  .site-header .dd::after{
    content:"";
    position:absolute;
    left:0;right:0;
    top:100%;
    height:14px;
    background:transparent;
  }
}

.site-header .dd-menu{
  position:absolute;
  left:0;
  top:calc(100% + 6px);
  min-width:320px;
  max-height: min(72vh, 520px);
  overflow:auto;
  scrollbar-gutter: stable;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(0,0,0,.06);
  border-radius:var(--r14);
  padding:10px;
  display:none;
  box-shadow: var(--shadow);
  z-index:40000;
  transform: translateY(8px) scale(.98);
  opacity:0;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
  backdrop-filter: blur(10px);
}
.site-header .dd:hover .dd-menu,
.site-header .dd:focus-within .dd-menu{ display:block;opacity:1;transform:translateY(0) scale(1); }

.site-header .dd-menu::before{
  content:"";
  position:absolute;
  top:-8px;left:22px;
  width:16px;height:16px;
  background:rgba(255,255,255,.96);
  border-left:1px solid rgba(0,0,0,.06);
  border-top:1px solid rgba(0,0,0,.06);
  transform: rotate(45deg);
}
.site-header .dd.dd-right .dd-menu{ left:auto;right:0; }
.site-header .dd.dd-right .dd-menu::before{ left:auto;right:22px; }

.site-header .dd-menu ul{ list-style:none;margin:0;padding:0; }
.site-header .dd-menu a{
  display:flex;align-items:center;gap:10px;
  padding:12px 12px;border-radius:12px;
  font-weight:700;color:#111827;
  transition: background .15s var(--ease), transform .12s var(--ease);
}
.site-header .dd-menu a::before{
  content:"";
  width:7px;height:7px;border-radius:999px;
  background:rgba(255,59,18,.35);
  flex:0 0 7px;
}
.site-header .dd-menu a:hover{
  background: linear-gradient(90deg, rgba(255,75,43,.12), rgba(255,65,108,.10));
  transform: translateX(3px);
}

.site-header .desk-cta{
  background:var(--navBlue);
  color:#fff;
  padding:10px 16px;
  border-radius:999px;
  font-weight:900;
  white-space:nowrap;
  position:relative;
  box-shadow:0 10px 24px rgba(11,15,59,.18);
  transition: transform .16s var(--ease), filter .16s var(--ease);
}
.site-header .desk-cta:hover{ transform: translateY(-1px);filter:brightness(1.06); }
.site-header .desk-cta::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 20%, rgba(255,65,108,.22), rgba(255,75,43,0) 55%);
  opacity:.55;
  pointer-events:none;
  filter: blur(6px);
}
@media (prefers-reduced-motion: no-preference){
  .site-header .desk-cta{ animation: shGlowPulse 2.6s var(--ease) infinite;animation-delay:1.4s; }
}

@media (min-width: 768px){
  .site-header .desk-bar.is-fixed{
    position:fixed;
    top:0;left:0;right:0;
    z-index:35000;
    box-shadow: var(--shadow-soft);
  }
}

/* =========================================================
   MOBILE HEADER
   ========================================================= */
.site-header .m-header{ display:none; }

@media (max-width: 767px){
  .site-header .m-header{
    position: sticky;
    top: 0;
    z-index: 35000;
    animation: shSlideDown .5s var(--ease2) both;
    background:#fff;
  }
}

.site-header .m-topbar{
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  height:48px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 10px;
  overflow:hidden;
  box-shadow:0 10px 22px rgba(0,0,0,.08);
  position:relative;
}

.site-header .m-topbar::after{
  content:"";
  position:absolute;
  left:-30%;
  top:0;
  width:60%;
  height:100%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.12), rgba(255,255,255,0));
  transform: skewX(-12deg);
  animation: shShine 6.5s var(--ease) infinite;
  opacity:.12;
  pointer-events:none;
}

.site-header .m-toggle{
  width:36px;height:36px;border:none;cursor:pointer;
  background:#fff;border-radius:12px;
  display:grid;place-items:center;
  flex:0 0 36px;
  transition: transform .16s var(--ease);
}
.site-header .m-toggle:active{ transform: scale(.98); }
.site-header .m-toggle i{ color:#b0005a;font-size:20px; }

.site-header .m-call{
  width:36px;height:36px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.18);
  color:#fff;
  flex:0 0 36px;
  transition: transform .16s var(--ease), filter .16s var(--ease);
}

.site-header .m-slider{
  flex:1;
  min-width:0;
  color:#fff;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  letter-spacing:.2px;
}
.site-header .m-slider .marquee{
  display:flex;
  width:max-content;
  align-items:center;
  gap:28px;
  animation: shMarquee 12s linear infinite;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce){
  .site-header .m-slider .marquee{ animation:none; }
}

.site-header .m-midbar{
  background:#fff;
  border-bottom:1px solid var(--border);
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.site-header .m-midbar .row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding:10px 0;
}
.site-header .m-brand img{
  width:210px;
  max-width:72vw;
  height:auto;
  object-fit:contain;
}

/* ===== MOBILE PANEL ENHANCED ===== */
.site-header .m-panel{
  display:none;
  background:#fff;
  border-top:1px solid #f2f2f2;
  padding:10px 12px 16px;
}
.site-header .m-panel.open{
  display:block;
  animation: shMobilePanel .22s var(--ease2) both;
}

.site-header .m-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}

.site-header .m-list > li{
  list-style:none;
}

.site-header .m-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:54px;
  padding:14px 16px;
  border-radius:16px;
  background:#fff;
  border:1px solid #ededed;
  color:#111827;
  font-size:16px;
  font-weight:700;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}

.site-header .m-link.active{
  color:#ff3b5f;
  border-color:rgba(255,65,108,.26);
  background:linear-gradient(180deg,#fff,#fff7fa);
}

.site-header .m-accordion{
  border:1px solid #ededed;
  border-radius:18px;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
  overflow:hidden;
}

.site-header .m-acc-btn{
  width:100%;
  border:none;
  background:#fff;
  color:#111827;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:56px;
  padding:16px;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  text-align:left;
}

.site-header .m-acc-btn .left{
  display:flex;
  align-items:center;
  gap:12px;
}

.site-header .m-acc-btn .left i{
  width:18px;
  text-align:center;
  color:#ff416c;
}

.site-header .m-acc-btn .chev{
  font-size:14px;
  color:#6b7280;
  transition:transform .22s ease;
}

.site-header .m-accordion.open .m-acc-btn{
  background:linear-gradient(180deg,#fff,#fff8fb);
  border-bottom:1px solid #f1f1f1;
}

.site-header .m-accordion.open .m-acc-btn .chev{
  transform:rotate(180deg);
}

.site-header .m-sub{
  display:none;
  padding:8px 10px 12px;
  background:#fffafc;
}

.site-header .m-accordion.open .m-sub{
  display:block;
}

.site-header .m-sub a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  margin:6px 0;
  border-radius:12px;
  font-size:15px;
  font-weight:600;
  color:#253041;
  background:#fff;
  border:1px solid #f0e8ec;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}

.site-header .m-sub a::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  flex:0 0 7px;
}

.site-header .m-sub a:hover,
.site-header .m-sub a:active{
  transform:translateX(2px);
  background:#fff7fa;
  border-color:#ffd3df;
}

.site-header .m-cta-wrap{
  padding:14px 0 2px;
  display:grid;
  gap:10px;
}

.site-header .m-cta{
  display:inline-block;
  background:var(--navBlue);
  color:#fff;
  padding:13px 18px;
  border-radius:999px;
  font-weight:900;
  text-align:center;
  box-shadow:0 10px 24px rgba(11,15,59,.18);
}
.site-header .m-cta-outline{
  display:inline-block;
  background:#fff;
  color:var(--navBlue);
  padding:12px 18px;
  border-radius:999px;
  font-weight:900;
  text-align:center;
  border:2px solid rgba(11,15,59,.14);
}

/* Breakpoints */
@media (max-width: 991px){
  .site-header .desk-top .row{ flex-direction:column;align-items:stretch; }
  .site-header .desk-top .blk{
    border-right:none;
    border-bottom:1px dashed rgba(255,255,255,.35);
    padding-right:0;
    padding-bottom:10px;
  }
  .site-header .desk-top .blk:last-child{ border-bottom:none;padding-bottom:0; }
}

@media (max-width: 767px){
  .site-header .desk-header{ display:none; }
  .site-header .m-header{ display:block; }
  .site-header .container{ padding:0 12px; }
}

@media (hover: none) and (pointer: coarse){
  .site-header .desk-header{ display:none !important; }
  .site-header .m-header{ display:block !important; }
}

/* =========================================================
   ENHANCED HEADER SCROLL EFFECTS
   ADD THIS AT THE END OF YOUR CURRENT CSS
   ========================================================= */

/* smoother animation */
.site-header .desk-top,
.site-header .desk-bar,
.site-header .m-topbar,
.site-header .m-midbar{
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    opacity .28s cubic-bezier(.2,.8,.2,1),
    box-shadow .28s cubic-bezier(.2,.8,.2,1),
    background .28s cubic-bezier(.2,.8,.2,1);
}

/* =========================
   DESKTOP SCROLL STATE
   desk-top disappears
   desk-bar becomes fixed
   ========================= */
.site-header .desk-header{
  position: relative;
}

.site-header .desk-top{
  transform: translateY(0);
  opacity: 1;
  will-change: transform, opacity;
}

.site-header .desk-header.desktop-scrolled .desk-top{
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  margin-bottom: -88px; /* adjust if your top strip height changes */
}

.site-header .desk-bar{
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.site-header .desk-bar.is-fixed{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 35000;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
  border-bottom: 1px solid rgba(0,0,0,.06);
  animation: shSlideDown .28s var(--ease2) both;
}

.site-header .desk-bar.is-fixed::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background: linear-gradient(90deg, rgba(255,75,43,.15), rgba(255,65,108,.22), rgba(255,75,43,.15));
}

/* desktop nav enhanced look */
.site-header .desk-nav > a,
.site-header .desk-nav .dd > a{
  font-weight: 700;
}

.site-header .desk-nav > a:hover,
.site-header .desk-nav .dd > a:hover{
  background: linear-gradient(180deg, rgba(255,75,43,.08), rgba(255,65,108,.06));
  box-shadow: inset 0 0 0 1px rgba(255,75,43,.08);
}

.site-header .desk-brand img{
  transition: transform .25s var(--ease);
}

.site-header .desk-brand a:hover img{
  transform: scale(1.02);
}

/* =========================
   MOBILE SCROLL STATE
   m-topbar disappears
   m-midbar stays fixed feel
   ========================= */
@media (max-width: 767px){

  .site-header .m-header{
    position: sticky;
    top: 0;
    z-index: 35000;
    background: #fff;
  }

  .site-header .m-topbar{
    transform: translateY(0);
    opacity: 1;
    will-change: transform, opacity;
  }

  .site-header .m-header.mobile-scrolled .m-topbar{
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    margin-bottom: -48px; /* same as topbar height */
  }

  .site-header .m-midbar{
    position: relative;
    z-index: 2;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .site-header .m-header.mobile-scrolled .m-midbar{
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
    border-bottom: 1px solid rgba(0,0,0,.06);
  }

  .site-header .m-brand img{
    transition: transform .25s var(--ease);
  }

  .site-header .m-brand a:hover img{
    transform: scale(1.02);
  }

  .site-header .m-toggle,
  .site-header .m-call{
    box-shadow: 0 8px 18px rgba(0,0,0,.10);
  }

  .site-header .m-panel{
    box-shadow: 0 18px 40px rgba(0,0,0,.10);
    border-radius: 0 0 18px 18px;
  }
}