:root{
  --bg0:#070B14;
  --text:#EAF0FF;
  --muted:rgba(234,240,255,.82);

  --accent:#00BBD4;

  --phoneBlue1:#4C6FFF;
  --phoneBlue2:#6B8CFF;
  --sun:#FFD24D;

  --l-bg:#F6FAFF;
  --l-text:#071226;
  --l-muted:rgba(7,18,38,.92);
  --l-border:rgba(7,18,38,.10);

  --sectionBg:#FFFFFF;
  --sectionBorder:rgba(7,18,38,.10);

  --navH: 78px;

  --wx-accent:#00BBD4;
  --wx-ink:#071226;
  --wx-muted:rgba(7,18,38,.90);
  --wx-card:#ffffff;
  --wx-border:rgba(7,18,38,.10);
  --wx-bg:#F6FAFF;
}

*{ box-sizing:border-box; }

html, body{
  height:100%;
  width:100%;
  overflow-x:hidden; /* hard stop for the right-side gap */
  background: #fff;
  background-color: #fff;
}

/* Hide page scrollbar visuals while keeping scroll behavior */
html{ scrollbar-width: none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width: 0;
  height: 0;
}

body{
  margin:0;
  font-family: "Poppins", sans-serif;
  color: var(--text);
  transition: background .25s ease, color .25s ease;
  padding-top: var(--navH);
  overflow-x:hidden; /* prevent horizontal overflow */
}

/* Make media never exceed viewport width */
img, video, canvas{
  max-width:100%;
  height:auto;
  display:block;
}

svg{ max-width:100%; }

/* crisp accordion transitions */
.acc-panel{ max-height:0; overflow:hidden; transition:max-height .22s ease; }

/* Global reveal-on-scroll */
[data-reveal]:not(section):not(footer),
[data-stagger] > *{
  opacity: 0;
  transform: translateY(14px);
  filter: blur(2px);
  transition: opacity 1.15s cubic-bezier(.22,1,.36,1), transform 1.15s cubic-bezier(.22,1,.36,1), filter 1.15s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform, filter;
}
[data-reveal]:not(section):not(footer).is-in,
[data-stagger] > *.is-in{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce){
  [data-reveal]:not(section):not(footer),
[data-stagger] > *{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ================================
   NO VERTICAL (INNER) SCROLLING
   (page scroll only)
   ================================ */
#custom-web-design,
#custom-web-design *{
  overflow: visible !important;
  overflow-y: visible !important;
  max-height: none !important;
  height: auto !important;
}
#custom-web-design .timeline{
  overflow: visible !important;
  overflow-y: visible !important;
  max-height: none !important;
  height: auto !important;
}
#custom-web-design .sticky-left{
  position: sticky;
  top: calc(var(--navH) + 12px);
  align-self: start;
}
#custom-web-design.sticky-split{
  overflow: visible !important;
}
#custom-web-design{
  scroll-snap-type: none !important;
  scroll-margin-top: calc(var(--navH) + 12px);
}

/* ================================
   COMMON WRAPPER WIDTHS (more reliable)
   prevents mobile gaps caused by calc(100% - 80px)
   ================================ */
.topbar .inner,
.content,
.section-like-ref .wrap,
.sticky-split .wrap,
.tech .wrap,
.wx-pricing .wrap,
.wx-blue-inner{
  width:100%;
  max-width:1320px;
  margin:0 auto;
  padding-left: clamp(14px, 4vw, 40px);
  padding-right: clamp(14px, 4vw, 40px);
}

/* ================================
   NAVBAR
   ================================ */
.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  padding: 14px 0;
  transition: padding .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease, backdrop-filter .22s ease;
  border-bottom: 1px solid #000;
  background: #000;
  backdrop-filter: none;
  box-shadow: 0 16px 50px rgba(0,0,0,.35);
}

.topbar.is-sticky{
  padding: 8px 0;
  background: #000;
  border-bottom-color: #000;
  box-shadow: 0 20px 60px rgba(0,0,0,.42);
}

.topbar .inner{
  display:grid;
  grid-template-columns: 270px 1fr 250px;
  align-items:center;
  gap: 12px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  text-decoration:none;
  color: var(--text);
  white-space:nowrap;
}

.brand img{
  width: 150px;
  height:auto;
  display:block;
  filter: drop-shadow(0 14px 40px rgba(0,0,0,.35));
  transition: width .22s ease, transform .22s ease;
}

.topbar.is-sticky .brand img{
  width: 130px;
  transform: translateY(-1px);
}

.nav{
  display:flex;
  justify-content:center;
  gap: 14px;
  align-items:center;
}

.nav a{
  position: relative;
  text-decoration:none;
  font-weight: 700;
  font-size: 14px;
  font-family: "Poppins", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 6px;
  white-space:nowrap;
  background-image: linear-gradient(90deg, #7fdbff 50%, #ffffff 50%);
  background-size: 220% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  transition: background-position .6s ease;
}
.nav-services-trigger{
  position: relative;
  font-weight: 700;
  font-size: 14px;
  font-family: "Poppins", sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 6px;
  white-space: nowrap;
  cursor: default;
  background-image: linear-gradient(90deg, #7fdbff 50%, #ffffff 50%);
  background-size: 220% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  transition: background-position .6s ease;
}

.nav a::after,
.nav-services-trigger::after{
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 4px;
  height: 2px;
  background: #7fdbff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s ease;
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(127,219,255,.55);
}

.nav a:hover,
.nav-services-trigger:hover{
  background-position: 0 0;
}

.nav a:hover::after,
.nav-services-trigger:hover::after{
  transform: scaleX(1);
}

.nav-item-services{
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nav-item-services::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
}

.services-menu{
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 280px;
  background: #000;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(0,0,0,.45);
  padding: 10px;
  display: grid;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, visibility .16s ease;
  z-index: 10020;
}

.services-menu a{
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgba(234,240,255,.94);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.services-menu a:hover{
  color: #67d4ff;
  background: rgba(56,189,248,.16);
}

.nav-item-services:hover .services-menu,
.nav-item-services:focus-within .services-menu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.actions{
  display:flex;
  justify-content:flex-end;
  gap: 12px;
  align-items:center;
}

.pill{
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display:grid;
  place-items:center;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: transform .15s ease;
}

.pill:hover{ transform: translateY(-1px); }

.pill.phone{
  background: linear-gradient(135deg, var(--phoneBlue1), var(--phoneBlue2));
  border: none;
  box-shadow: 0 10px 30px rgba(76,111,255,.45);
}

.quote{
  height:44px;
  padding: 0 18px;
  border-radius:999px;
  border:2px solid rgba(0,187,212,.85);
  background-image: linear-gradient(90deg, #7fdbff 50%, #ffffff 50%);
  background-size: 220% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  text-decoration:none;
  display:flex;
  align-items:center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 0 0 999px rgba(0,0,0,.18);
  transition: background-position .6s ease, transform .2s ease, box-shadow .4s ease, border-color .4s ease;
}

.quote:hover{
  background-position: 0 0;
  transform: translateY(-1px);
  border-color: #7fdbff;
  box-shadow:
    inset 0 0 0 999px rgba(0,0,0,.18),
    0 10px 28px rgba(127,219,255,.40),
    0 0 22px rgba(127,219,255,.35);
}

.quote::before{ content: none; }
.quote::after{ content: none; }

.quote::after{
  content: "";
  position: absolute;
  width: 72px;
  height: 72px;
  left: calc(var(--quote-light-x, 50%) - 36px);
  top: calc(var(--quote-light-y, 50%) - 36px);
  background: radial-gradient(circle, rgba(255,255,255,.28), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.quote.is-lit{
  box-shadow: 0 0 0 1px rgba(0,187,212,.16) inset, 0 0 16px rgba(56,189,248,.30);
}

.quote.is-lit::after{
  opacity: 1;
}

.quote.wx-shine::before{
  animation: none;
}

@keyframes quoteShine{
  0%{ left: -150%; opacity: 0; }
  18%{ opacity: .9; }
  100%{ left: 175%; opacity: 0; }
}

/* Theme toggle */
.mode{
  width:36px; height:36px;
  border-radius:999px;
  border:2px solid var(--sun);
  background: rgba(255,210,77,.14);
  box-shadow: 0 8px 24px rgba(255,210,77,.35);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  color: var(--sun);
}

/* Disable theme-toggle control site-wide */
.mode{
  display: none !important;
}

.mode:hover{ transform: translateY(-1px); }
.mode svg{ width:18px; height:18px; }
.mode svg *{ fill: currentColor; stroke: currentColor; }

/* ================================
   HERO
   ================================ */
.hero{
  position:relative;
  min-height: calc(100vh - var(--navH));
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(7,11,20,.38), rgba(7,11,20,.68)),
    url("webxnest_background.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
  z-index:0;
  filter: brightness(1.12) contrast(1.06) saturate(1.08);
  transition: opacity .25s ease, filter .25s ease;
}

.hero::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.12);
  z-index:1;
  pointer-events:none;
  transition: opacity .25s ease;
}

#particles-js{
  position:absolute; inset:0;
  z-index:2;
  opacity:.42;
  pointer-events:none;
  transition: opacity .25s ease;
}

/* Global: remove decorative dot/particle layers site-wide */
#particles-js,
#wxParticles,
.visual .dots{
  display: none !important;
}

/* Also remove CSS-only floating blue dot/glow layers */
.wxp-noise,
.wxp-lines,
.wxp-glow,
.wxp-glow-a,
.wxp-glow-b,
.wxp-glow-c{
  display: none !important;
}

.content{
  position:relative;
  z-index:3;
  flex:1;
  display:flex;
  flex-direction:column;
}

.hero-main{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px 0 70px;
}

.hero-grid{
  width:100%;
  max-width: 1260px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.06fr .94fr;
  gap: 58px;
  align-items:center;
}

/* LEFT */
.hero-left{
  text-align:left;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  animation: fadeUp .65s ease both;
}

.hero-title{
  margin: 0 0 12px;
  font-size: clamp(38px, 3.1vw, 60px);
  font-weight: 950;
  line-height: 1.06;
  color:#fff;
  text-shadow: 0 18px 55px rgba(0,0,0,.55);
}

.hero-title .price{
  color: var(--accent);
  font-weight: 950;
  filter: drop-shadow(0 12px 24px rgba(0,187,212,.25));
}

.hero-sub{
  margin: 0 0 18px;
  max-width: 690px;
  color: rgba(255,255,255,.92);
  font-size: 18px;
  line-height: 1.85;
  font-weight: 600;
  text-shadow: 0 14px 40px rgba(0,0,0,.45);
}

.hero-check-grid{
  width:100%;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 36px;
  margin: 18px 0 24px;
}

.hero-check{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 850;
  color: rgba(255,255,255,.95);
  font-size: 15.5px;
  line-height: 1.3;
  text-shadow: 0 10px 28px rgba(0,0,0,.40);
}

.hero-check svg{
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 10px 18px rgba(0,187,212,.25));
}

.hero-ctas{
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.hero-btn{
  height: 52px;
  padding: 0 20px;
  border-radius: 14px;
  border: 1px solid rgba(0,187,212,.35);
  background: linear-gradient(180deg, rgba(0,187,212,1), rgba(0,187,212,.90));
  color:#071226;
  font-weight: 950;
  letter-spacing: .02em;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 22px 60px rgba(0,187,212,.22), 0 18px 55px rgba(0,0,0,.25);
  position:relative;
  overflow:hidden;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  animation: wxFlash 4.4s ease-in-out infinite;
}

.hero-btn::before{
  content:"";
  position:absolute;
  inset:-50% auto -50% -70%;
  width: 70%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  opacity: 0;
  animation: wxShine 4.4s ease-in-out infinite;
}

.hero-btn::after{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,.30);
  opacity: 0;
  transform: scale(.96);
  animation: wxRing 4.4s ease-in-out infinite;
}

.hero-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 28px 75px rgba(0,187,212,.30), 0 18px 55px rgba(0,0,0,.28);
}

.hero-phone{
  height: 52px;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,.96);
  font-weight: 950;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  box-shadow: 0 18px 55px rgba(0,0,0,.30);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.hero-phone:hover{
  transform: translateY(-2px);
  border-color: rgba(0,187,212,.35);
  background: rgba(0,187,212,.10);
}

.hero-flag-svg{
  width: 22px;
  height: 16px;
  border-radius: 4px;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  flex: 0 0 auto;
  overflow:hidden;
}

.hero-rating-img{
  margin-top: 14px;
  height: 46px;
  width: auto;
  opacity: .96;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,.35));
  user-select:none;
  -webkit-user-drag:none;
}

/* RIGHT FORM */
.hero-form{
  width: 100%;
  max-width: 600px;
  margin-left:auto;
  border-radius: 24px;
  padding: 26px 26px 22px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(0,187,212,.18));
  box-shadow: 0 30px 95px rgba(0,0,0,.36);
  backdrop-filter: blur(10px);
  font-family: "Poppins", sans-serif;
  animation: popIn .75s ease .08s both;
}

.hero-form .cap{
  font-weight: 950;
  letter-spacing: .18em;
  font-size: 12px;
  color: rgba(7,18,38,.92);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.hero-form h3{
  margin: 0 0 16px;
  font-size: 30px;
  line-height: 1.06;
  font-weight: 950;
  color: #071226;
}

.hero-form .row{
  display:flex;
  flex-direction:column;
  gap: 13px;
}

.hero-form input,
.hero-form textarea{
  width:100%;
  border-radius: 12px;
  border: 1px solid rgba(7,18,38,.12);
  background: rgba(255,255,255,.96);
  padding: 15px 15px;
  font-size: 15px;
  font-weight: 650;
  color: #071226;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  font-family: inherit;
}

.hero-form textarea{
  min-height: 160px;
  resize: vertical;
}

.hero-form input:focus,
.hero-form textarea:focus{
  border-color: rgba(0,187,212,.55);
  box-shadow: 0 0 0 4px rgba(0,187,212,.14);
}

.hero-form button{
  margin-top: 6px;
  height: 54px;
  border-radius: 12px;
  border: 0;
  cursor:pointer;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(0,187,212,1), rgba(0,187,212,.88));
  color: #071226;
  box-shadow: 0 22px 62px rgba(0,187,212,.20);
  position:relative;
  overflow:hidden;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
  animation: wxFlash 4.4s ease-in-out infinite;
}

.hero-form button::before{
  content:"";
  position:absolute;
  inset:-50% auto -50% -70%;
  width: 70%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  opacity: 0;
  animation: wxShine 4.4s ease-in-out infinite;
}

.hero-form button::after{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,.30);
  opacity: 0;
  transform: scale(.96);
  animation: wxRing 4.4s ease-in-out infinite;
}

.hero-form button:hover{
  transform: translateY(-2px);
  filter: brightness(1.02);
  box-shadow: 0 28px 75px rgba(0,187,212,.26);
}

/* ================================
   SHARED TYPO / UNDERLINE
   ================================ */
.kicker{
  color: var(--accent);
  font-weight: 900;
  letter-spacing:.22em;
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 12px;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.title{
  font-size: clamp(34px, 2.9vw, 56px);
  font-weight: 900;
  line-height: 1.07;
  margin:0 0 12px;
  text-shadow: 0 10px 40px rgba(0,0,0,.45);
}

.desc{
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.75;
  max-width: 640px;
  margin:0;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.underline{
  width: 140px;
  height: 3px;
  background: var(--accent);
  border-radius: 999px;
  margin: 18px 0 0;
  box-shadow: 0 12px 30px rgba(0,187,212,.14);
}

/* ================================
   SECTION 2 (WEBXNEST LIGHT BLUE)
   ================================ */
.section-like-ref{
  position: relative;
  padding: 90px 0;
  background: #CFEFFF;
  overflow: hidden;
  transition: background .25s ease, color .25s ease;
}

.section-like-ref .grid{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 44px;
  align-items:center;
}

.section-like-ref .header-left{
  text-align:left;
  margin-bottom: 18px;
}

.section-like-ref .eyebrow{
  color: var(--accent);
  font-weight: 900;
  letter-spacing:.22em;
  font-size: 11px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.section-like-ref h2{
  margin:0;
  color:#071226;
  font-size: clamp(28px, 2.4vw, 44px);
  font-weight: 900;
  line-height: 1.12;
}

.section-like-ref .copy{
  color: rgba(7,18,38,.92);
  font-size: 17.5px;
  line-height: 1.9;
  max-width: 720px;
}
.section-like-ref .copy p{ margin: 0 0 16px; }

/* Visual cards */
.visual{
  position:relative;
  min-height: 420px;
  overflow:hidden; /* prevents absolute children from causing horizontal overflow */
}

.visual .card-img{
  position:absolute;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid var(--sectionBorder);
  background: rgba(255,255,255,.65);
  box-shadow: 0 18px 50px rgba(7,18,38,.14);
}

.visual .card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.visual .img-a{
  width: 72%;
  height: 280px;
  left: 0;
  top: 0;
}

.visual .img-b{
  width: 50%;
  height: 290px;
  right: 0;
  top: 110px;
}

.visual .dots{
  position:absolute;
  right: 0;
  top: -18px;
  width: 150px;
  height: 110px;
  background-image: radial-gradient(rgba(0,187,212,.65) 1.5px, transparent 1.5px);
  background-size: 12px 12px;
  opacity:.35;
  pointer-events:none;
}

.visual .hatch{
  position:absolute;
  left: 38px;
  bottom: 18px;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(0,187,212,.85) 0px,
      rgba(0,187,212,.85) 3px,
      transparent 3px,
      transparent 10px
    );
  opacity:.20;
  pointer-events:none;
}

.visual::before{
  content:"";
  position:absolute;
  inset: -40px;
  background:
    radial-gradient(circle at 25% 20%, rgba(0,187,212,.10), transparent 55%),
    radial-gradient(circle at 85% 70%, rgba(0,187,212,.06), transparent 55%);
  pointer-events:none;
}

/* ================================
   STICKY SPLIT
   ================================ */
.sticky-split{
  position:relative;
  background: var(--sectionBg);
  padding: 20px 0 110px;
  overflow: hidden; /* prevents any stray pixel overflow from timeline */
}

.sticky-split .grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 56px;
  align-items:start;
}

.sticky-left{
  position: sticky;
  top: calc(var(--navH) + 12px);
  align-self: start;
  padding-right: 10px;
}

.sticky-left .eyebrow{
  color: var(--accent);
  font-weight: 900;
  letter-spacing: .22em;
  font-size: 11px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.sticky-left h2{
  margin: 0 0 14px;
  color:#071226;
  font-size: clamp(34px, 3.1vw, 54px);
  line-height: 1.06;
  font-weight: 900;
}

.sticky-left .sub{
  margin: 0 0 22px;
  color: rgba(7,18,38,.90);
  font-size: 15.5px;
  line-height: 1.9;
  max-width: 620px;
}

.sticky-left .body{
  color: rgba(7,18,38,.80);
  font-size: 15.5px;
  line-height: 1.95;
  max-width: 660px;
}
.sticky-left .body p{ margin: 0 0 16px; }

.timeline{
  position:relative;
  padding-left: 28px;
}

.timeline::before{
  content:"";
  position:absolute;
  left: 13px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: rgba(7,18,38,.14);
  border-radius: 999px;
}

.t-item{ position:relative; padding: 0 0 34px; }
.t-item:last-child{ padding-bottom: 0; }

.t-badge{
  position:absolute;
  left: -2px;
  top: 2px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #0B0F18;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
  display:grid;
  place-items:center;
}

.t-badge svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.t-card{
  margin-left: 34px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--sectionBorder);
  box-shadow: 0 18px 44px rgba(7,18,38,.06);
  padding: 22px 22px 20px;
}

.t-card h3{
  margin: 0 0 8px;
  color:#071226;
  font-size: 24px;
  line-height: 1.15;
  font-weight: 900;
}

.t-card p{
  margin: 0;
  color: rgba(7,18,38,.90);
  font-size: 15.5px;
  line-height: 1.9;
}

.sticky-split::before{
  content: none;
}

/* ================================
   TECH CARDS SECTION
   ================================ */
.tech{
  position:relative;
  padding: 90px 0 110px;
  background: var(--sectionBg);
  overflow:hidden;
}

.tech .head{
  text-align:center;
  max-width: 980px;
  margin: 0 auto 40px;
}

.tech .eyebrow{
  color: var(--accent);
  font-weight: 900;
  letter-spacing:.26em;
  font-size: 11px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.tech h2{
  margin:0 0 14px;
  color:#071226;
  font-size: clamp(32px, 3.2vw, 56px);
  line-height: 1.08;
  font-weight: 900;
}

.tech .sub{
  margin: 0 auto;
  color: rgba(7,18,38,.90);
  font-size: 15.5px;
  line-height: 1.9;
  max-width: 860px;
}

.tech .underline{ margin: 18px auto 0; }

.tech-grid{
  margin-top: 54px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.tech-grid > *{ height: 100%; }

.tech-card{
  border: 1px solid var(--sectionBorder);
  border-radius: 16px;
  background: #fff;
  overflow:hidden;
  box-shadow: 0 18px 44px rgba(7,18,38,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tech-card .body{ flex: 1; display: flex; flex-direction: column; }

.tech-card:hover{
  transform: translateY(-3px);
  border-color: rgba(0,187,212,.30);
  box-shadow: 0 22px 55px rgba(7,18,38,.10);
}

.tech-card .img{ height: 160px; padding: 14px; }

.tech-card .img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  display:block;
}

.tech-card .body{ padding: 18px 18px 22px; }

.tech-card h3{
  margin: 0 0 14px;
  color: rgba(7,18,38,.88);
  font-size: 14px;
  font-weight: 800;
  letter-spacing:.01em;
}

.tech-list{
  list-style:none;
  padding: 0;
  margin: 0;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.tech-list li{
  position:relative;
  padding-left: 18px;
  color: rgba(7,18,38,.80);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
}

.tech-list li::before{
  content:"";
  position:absolute;
  left: 2px;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: 1.8px solid rgba(7,18,38,.40);
  background: transparent;
  transform: translateY(-50%);
}

.tech::before{
  content: none;
}

/* ================================
   WX BLUE BAND / IMAGE
   Removed 100vw trick (causes mobile overflow/gap)
   ================================ */
.wx-blue-banner{ background:#fff; }

.wx-blue-image{
  width: min(960px, 100%);
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(7,18,38,.14);
}
.wx-blue-image img{
  width:100%;
  height:220px;
  object-fit: cover;
  display:block;
}

/* FIXED: was width:100vw + margin-left trick */
.wx-blue-band{
  width:100%;
  margin-left: 0;
  margin-top: -36px;
  background: #00BBD4;
  overflow:hidden;
}

.wx-blue-inner{
  padding: 56px 0 60px;
}

.wx-blue-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 44px;
  align-items:start;
}

.wx-blue-title{
  margin:0;
  color:#ffffff;
  font-weight:900;
  line-height:1.08;
  font-size: clamp(28px, 2.6vw, 44px);
}

.wx-blue-copy{
  color: rgba(255,255,255,.92);
  font-size: 15.5px;
  line-height: 1.9;
  max-width: 560px;
}
.wx-blue-copy p{ margin:0 0 14px; }
.wx-blue-copy p:last-child{ margin-bottom:0; }

/* ================================
   GOOGLE REVIEWS CAROUSEL
   ================================ */
.wx-google-carousel{
  background:#ffffff;
  padding:90px 0 110px;
  overflow:hidden; /* prevent overflow */
}

.wx-carousel-head{
  text-align:center;
  margin-bottom:42px;
}

.wx-carousel-head span{
  display:block;
  font-size:12px;
  letter-spacing:.18em;
  font-weight:700;
  color:#00BBD4;
  margin-bottom:8px;
}

.wx-carousel-head h2{
  margin:0;
  font-size:clamp(30px,3vw,48px);
  font-weight:900;
  color:#071226;
}

.wx-title-underline{
  width:120px;
  height:3px;
  background:#00BBD4;
  margin:16px auto 0;
  border-radius:999px;
}

.wx-carousel-wrapper{
  position:relative;
  max-width:1320px;
  margin:0 auto;
  overflow:hidden; /* already good */
  padding-left: clamp(14px, 4vw, 40px);
  padding-right: clamp(14px, 4vw, 40px);
}

.wx-carousel-track{
  display:flex;
  align-items:stretch;
  transition:transform .45s ease;
  will-change: transform;
}

.wx-review-card{
  min-width:360px;
  margin:0 13px;
  background:#ffffff;
  border:1px solid rgba(7,18,38,.10);
  border-radius:16px;
  padding:22px;
  box-shadow:0 16px 40px rgba(7,18,38,.06);
  display:flex;
  flex-direction:column;
}

.wx-review-card strong{
  display:block;
  font-size:15px;
  font-weight:700;
  color:#071226;
}

.wx-review-card span{
  display:block;
  font-size:13px;
  color:rgba(7,18,38,.82);
  margin-bottom:10px;
}

.wx-review-card p{
  font-size:14.8px;
  line-height:1.7;
  color:rgba(7,18,38,.92);
  margin:0 0 18px;
}

.wx-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:auto;
  padding-top:12px;
}

.wx-bottom img{ height:22px; display:block; }

.wx-stars{
  display:flex;
  align-items:center;
  gap:4px;
}

.wx-stars svg{
  width:16px;
  height:16px;
  fill:#FABB05;
  display:block;
}

.wx-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:42px;
  height:42px;
  border-radius:50%;
  border:none;
  background:#ffffff;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
  font-size:26px;
  font-weight:600;
  cursor:pointer;
  z-index:10;
}
.wx-arrow.left{ left:12px; }
.wx-arrow.right{ right:12px; }
.wx-arrow:hover{ background:#f6f9ff; }

/* ================================
   GLOBAL READABILITY OVERRIDES
   ================================ */
[class*="text-slate-500"]{ color:#111827 !important; }
[class*="text-slate-600"]{ color:#0f172a !important; }
[class*="text-slate-700"]{ color:#0b1220 !important; }
[class*="text-slate-800"]{ color:#090f1a !important; }
[class*="text-gray-500"]{ color:#111827 !important; }
[class*="text-gray-600"]{ color:#0f172a !important; }
[class*="text-gray-700"]{ color:#0b1220 !important; }

[class*="text-[12px]"]{ font-size: 15.5px !important; }
[class*="text-[12.5px]"]{ font-size: 16px !important; }
[class*="text-[13px]"]{ font-size: 16.5px !important; }
[class*="text-[13.5px]"]{ font-size: 17px !important; }
[class*="text-[14px]"]{ font-size: 17.5px !important; }

/* Footer trust badges: force a clean checkmark icon regardless of file encoding */
footer .inline-flex.h-4.w-4.items-center.justify-center.rounded-full.bg-brand-500{
  font-size: 0 !important;
  position: relative;
}
footer .inline-flex.h-4.w-4.items-center.justify-center.rounded-full.bg-brand-500::before{
  content: "\2713";
  font-size: 11px;
  line-height: 1;
  color: #fff;
}

/* Footer left column: logo + award + rotating service text */
.wx-footer-award{
  width: 100%;
  display: flex;
  justify-content: center;
}
@media (min-width: 1024px){
  .wx-footer-award{ justify-content: flex-start; }
}
.wx-footer-award img{
  height: 120px;
  width: auto;
  object-fit: contain;
  display: block;
}
@media (min-width: 640px){
  .wx-footer-award img{ height: 140px; }
}

/* ================================
   PRICING
   ================================ */
.wx-pricing{
  position:relative;
  padding: 96px 0 110px;
  background: #FFFFFF;
  overflow:hidden;
}

.wx-pricing::before{
  content:"";
  position:absolute;
  inset:-220px;
  background:
    radial-gradient(circle at 20% 20%, rgba(0,187,212,.10), transparent 55%),
    radial-gradient(circle at 85% 65%, rgba(0,187,212,.08), transparent 58%),
    repeating-linear-gradient(
      135deg,
      rgba(7,18,38,.06) 0px,
      rgba(7,18,38,.06) 3px,
      transparent 3px,
      transparent 18px
    );
  opacity: 1;
  pointer-events:none;
}

.wx-pricing::after{
  content:"";
  position:absolute;
  right:-120px;
  bottom:-120px;
  width: 340px;
  height: 340px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgba(0,187,212,.16), transparent 62%);
  pointer-events:none;
}

.wx-pricing .wrap{
  position:relative;
  z-index: 1;
}

.wx-pricing .head{
  text-align:center;
  max-width: 880px;
  margin: 0 auto 44px;
}

.wx-pricing .head h2{
  margin:0 0 10px;
  color: var(--wx-ink);
  font-size: clamp(30px, 3vw, 52px);
  font-weight: 900;
  letter-spacing: -.01em;
}

.wx-pricing .head p{
  margin:0;
  color: rgba(7,18,38,.88);
  font-size: 15.5px;
  line-height: 1.9;
}

.wx-pricing .underline{
  width: 140px;
  height: 3px;
  background: var(--wx-accent);
  border-radius: 999px;
  margin: 18px auto 0;
  box-shadow: 0 12px 30px rgba(0,187,212,.18);
}

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

/* prevents pricing cards from forcing overflow on small screens */
.wx-pack{
  min-width: 0;
  background: var(--wx-card);
  border: 1px solid var(--wx-border);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(7,18,38,.06);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height: 640px;
  position:relative;
}

.wx-pack:hover{
  border-color: rgba(0,187,212,.30);
  box-shadow: 0 26px 80px rgba(7,18,38,.10);
  transform: translateY(-2px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.wx-pack .pad{ padding: 28px 26px 18px; }

.wx-pack .title{
  margin: 0;
  text-align:center;
  font-weight: 900;
  color: var(--wx-ink);
  font-size: 20px;
  line-height: 1.25;
  text-shadow: none;
}

.wx-pack .strike{
  text-align:center;
  margin: 10px 0 0;
  color: rgba(7,18,38,.82);
  font-weight: 800;
  text-decoration: line-through;
}

.wx-pack .price{
  text-align:center;
  margin: 10px 0 0;
  font-size: 26px;
  font-weight: 950;
  color: var(--wx-accent);
}

.wx-pack.featured{
  border-color: rgba(0,187,212,.35);
  box-shadow: 0 26px 86px rgba(0,187,212,.10), 0 22px 70px rgba(7,18,38,.08);
}

.wx-pack .tag{
  position:absolute;
  top: 14px;
  right: 14px;
  background: rgba(0,187,212,.12);
  border: 1px solid rgba(0,187,212,.25);
  color: var(--wx-accent);
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 999px;
}

.wx-pack .features{ padding: 0 26px 10px; }

.wx-feat-scroll{
  margin-top: 18px;
  max-height: 220px;
  overflow:auto;
  padding-right: 10px;
}

.wx-feat-scroll::-webkit-scrollbar{ width: 10px; }
.wx-feat-scroll::-webkit-scrollbar-track{
  background: rgba(7,18,38,.06);
  border-radius: 999px;
}
.wx-feat-scroll::-webkit-scrollbar-thumb{
  background: rgba(0,187,212,.85);
  border-radius: 999px;
  border: 2px solid rgba(246,250,255,.9);
}

.wx-features{
  list-style:none;
  padding: 0;
  margin: 0;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.wx-features li{
  position:relative;
  padding-left: 22px;
  color: rgba(7,18,38,.92);
  font-weight: 650;
  font-size: 14.6px;
  line-height: 1.5;
}

.wx-features li::before{
  content:"";
  position:absolute;
  left: 0;
  top: .72em;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(0,187,212,1), rgba(0,187,212,.65));
  box-shadow: 0 10px 26px rgba(0,187,212,.18);
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.3 6.7a1 1 0 0 1 0 1.4l-10 10a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.4l4.3 4.3 9.3-9.3a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.3 6.7a1 1 0 0 1 0 1.4l-10 10a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.4l4.3 4.3 9.3-9.3a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.wx-pack .footer{
  margin-top:auto;
  padding: 18px 22px 22px;
  background: rgba(246,250,255,.65);
  border-top: 1px solid rgba(7,18,38,.07);
  text-align:center;
}

.wx-pack .deal{
  margin: 0 0 14px;
  font-weight: 900;
  color: rgba(7,18,38,.82);
  font-size: 12.5px;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.wx-btn{
  display:block;
  width: 100%;
  height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(0,187,212,.30);
  background: linear-gradient(180deg, rgba(0,187,212,1), rgba(0,187,212,.90));
  color: #fff;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration:none;
  line-height: 52px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,187,212,.22);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  animation: wxFlash 4.4s ease-in-out infinite;
}

.wx-btn::before{
  content:"";
  position:absolute;
  inset:-40% auto -40% -60%;
  width: 60%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  opacity: 0;
  animation: wxShine 4.4s ease-in-out infinite;
}

.wx-btn::after{
  content:"";
  position:absolute;
  inset:-12px;
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,.35);
  opacity: 0;
  transform: scale(.96);
  animation: wxRing 4.4s ease-in-out infinite;
}

.wx-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 60px rgba(0,187,212,.30);
}

.wx-pack .call{
  margin: 14px 0 0;
  font-weight: 900;
  color: rgba(7,18,38,.88);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.4;
}

.wx-pack .call span{
  display:block;
  font-size: 12px;
  color: rgba(7,18,38,.88);
  font-weight: 800;
  letter-spacing: .03em;
}

/* ================================
   CLIENT LOGO MARQUEE (logos bar)
   ================================ */
@keyframes slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.logos{
  position: relative;
  overflow: hidden;
  padding: 70px 0;
  background: #fff;
}

.logos::before,
.logos::after{
  content: "";
  position: absolute;
  top: 0;
  width: 180px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.logos::before{
  left: 0;
  background: linear-gradient(to left, rgba(255,255,255,0), #fff);
}

.logos::after{
  right: 0;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff);
}

.logos-track{
  display: flex;
  width: max-content;
  animation: slide 32s linear infinite;
  will-change: transform;
}

.logos:hover .logos-track{
  animation-play-state: paused;
}

.logos-slide{
  display: flex;
  align-items: center;
  gap: 90px;
  padding-right: 90px;
  flex-shrink: 0;
}

.logos-slide img{
  height: 76px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
  opacity: 1;
  transition: opacity .3s ease, filter .3s ease, transform .3s ease;
  transform-origin: center;
  display: block;
  align-self: center;
}

/* Optical normalization */
.l-kabaian { transform: scale(1.18); }
.l-mdm     { transform: scale(1.22); }
.l-warsaw  { transform: scale(1.10); }
.l-makethetime { transform: scale(1.00); }
.l-questtel    { transform: scale(1.02); }
.l-cornerstone { transform: scale(1.05); }
.l-vzatisi     { transform: scale(1.08); }

/* ================================
   LIGHT MODE
   ================================ */
body.lightmode{
  background: var(--l-bg);
  color: var(--l-text);
}

body.lightmode .nav a{ color: #ffffff; }
body.lightmode .brand{ color: var(--l-text); }
body.lightmode .nav-services-trigger{ color: #ffffff; }

body.lightmode .topbar{
  background: #000;
  border-bottom-color: #000;
  box-shadow: 0 16px 45px rgba(7,18,38,.12);
}
body.lightmode .topbar.is-sticky{
  background: #000;
  border-bottom-color: #000;
  box-shadow: 0 18px 50px rgba(7,18,38,.14);
}

body.lightmode .services-menu{
  background: #000;
  border-color: rgba(255,255,255,.20);
}
body.lightmode .services-menu a{
  color: rgba(234,240,255,.94);
}

body.lightmode .quote{
  color: var(--l-text);
  background: rgba(255,255,255,.55);
}

body.lightmode .pill{
  border-color: var(--l-border);
  background: rgba(255,255,255,.65);
  box-shadow: 0 10px 30px rgba(7,18,38,.10);
}

body.lightmode .desc{ color: var(--l-muted); text-shadow:none; }
body.lightmode .title,
body.lightmode .kicker{ text-shadow:none; }

body.lightmode .hero::before{
  filter: saturate(1.05) brightness(1.08);
  opacity: .55;
}
body.lightmode .hero::after{ opacity: .12; }
body.lightmode #particles-js{ opacity: .26; }

body.lightmode .mode{
  color: rgba(7,18,38,.85);
  border-color: rgba(7,18,38,.20);
  background: rgba(7,18,38,.06);
  box-shadow: 0 8px 24px rgba(7,18,38,.12);
}

/* ================================
   ANIMATIONS (single source of truth)
   ================================ */
@keyframes fadeUp{ from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
@keyframes popIn{ from{opacity:0;transform:translateY(18px) scale(.985)} to{opacity:1;transform:translateY(0) scale(1)} }

@keyframes wxFlash{
  0%, 60% { filter: brightness(1); }
  70% { filter: brightness(1.10); }
  80% { filter: brightness(1); }
  90% { filter: brightness(1.08); }
  100% { filter: brightness(1); }
}
@keyframes wxShine{
  0%, 62% { transform: skewX(-18deg) translateX(0); opacity: 0; }
  70% { opacity: .95; }
  85% { transform: skewX(-18deg) translateX(340%); opacity: 0; }
  100% { opacity: 0; }
}
@keyframes wxRing{
  0%, 64% { opacity: 0; transform: scale(.96); }
  76% { opacity: .45; transform: scale(1); }
  90% { opacity: 0; transform: scale(1.03); }
  100% { opacity: 0; }
}

/* ================================
   RESPONSIVE
   ================================ */
@media (max-width: 1100px){
  .tech-grid{ grid-template-columns: repeat(2, 1fr); }
  .wx-pack-grid{ grid-template-columns: 1fr; }
  .wx-pack{ min-height: unset; }
  .wx-feat-scroll{ max-height: 240px; }
}

@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; gap: 26px; max-width: 860px; }
  .hero-form{ margin-left: 0; max-width: 100%; }
  .hero-check-grid{ grid-template-columns: 1fr; }

  .sticky-split .grid{ grid-template-columns: 1fr; gap: 28px; }
  .sticky-left{ position: relative; top: auto; }
  .timeline{ padding-left: 20px; }
  .timeline::before{ left: 9px; }
  .t-badge{ left: -6px; }
  .t-card{ margin-left: 30px; }

  .wx-blue-grid{ grid-template-columns: 1fr; gap: 18px; }

  .logos{ padding: 52px 0; }
  .logos-slide{ gap: 56px; padding-right: 56px; }
  .logos-slide img{ height: 58px; max-width: 260px; }
}

@media (max-width: 920px){
  .topbar .inner{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand actions"
      "nav nav";
  }
  .brand{ grid-area: brand; }
  .actions{ grid-area: actions; }
  .nav{
    grid-area: nav;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap: 10px 16px;
  }

  .section-like-ref .grid{ grid-template-columns: 1fr; }
  .visual{ min-height: 460px; margin-top: 14px; }
  .visual .img-a{ width: 78%; }
  .visual .img-b{ width: 56%; top: 150px; }

  .tech-grid{ grid-template-columns: 1fr; }
  .tech-card .img{ height: 175px; }

  /* Carousel better on mobile */
  .wx-review-card{ min-width:320px; }
}

@media (max-width: 640px){
  .wx-review-card{ min-width:280px; }
}

@media (max-width: 520px){
  .brand img{ width: 118px; }
  .topbar.is-sticky .brand img{ width: 110px; }

  .section-like-ref{ padding: 70px 0; }

  .sticky-split{ padding: 60px 0 90px; }

  .visual{ min-height: 440px; }
  .visual .img-a{ width: 86%; height: 260px; }
  .visual .img-b{ width: 68%; height: 260px; top: 165px; }

  .tech{ padding: 70px 0 90px; }

  .t-card h3{ font-size: 22px; }

  .wx-blue-image img{ height:180px; }

  .wx-pricing{ padding: 76px 0 90px; }
}

/* ================================
   RESPONSIVE NAV (stunning mobile)
   ================================ */
.menu-btn{
  display:none;
  width:46px; height:46px;
  border-radius:999px;
  border:1px solid rgba(56,189,248,.55);
  background: radial-gradient(circle at 28% 22%, rgba(255,255,255,.14), rgba(255,255,255,.04) 52%), #000;
  box-shadow: 0 10px 28px rgba(0,0,0,.42), 0 0 0 1px rgba(56,189,248,.20) inset;
  cursor:pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.menu-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(56,189,248,.9);
  box-shadow: 0 12px 32px rgba(0,0,0,.48), 0 0 0 1px rgba(56,189,248,.34) inset;
}
.menu-btn:active{ transform: translateY(0px) scale(.99); }

.menu-ico{
  display:block;
  width:18px; height:2px;
  margin: 0 auto;
  position:relative;
  border-radius:999px;
  background: rgba(234,240,255,.96);
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
  transition: background .2s ease, transform .22s ease;
}

.menu-ico::before,
.menu-ico::after{
  content:"";
  position:absolute; left:0; right:0;
  height:2px;
  border-radius:999px;
  background: rgba(234,240,255,.95);
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
  transition: transform .22s ease, top .22s ease, opacity .22s ease;
}
.menu-ico::before{ top:-6px; }
.menu-ico::after{ top:6px; }

.nav-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  z-index: 10030;
  opacity:0;
  transition: opacity .22s ease;
}

.mobile-nav{
  position:fixed;
  top:0; right:0;
  height:100vh;
  width: min(420px, 92vw);
  z-index: 10040;
  transform: translateX(105%);
  transition: transform .26s cubic-bezier(.2,.8,.2,1);
  border-left: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(7,11,20,.92), rgba(7,11,20,.80));
  backdrop-filter: blur(14px);
  box-shadow: -30px 0 90px rgba(0,0,0,.55);
  padding: 18px 18px 16px;
  display:flex;
  flex-direction:column;
}

.mobile-nav__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.mobile-nav__brand img{
  width: 140px;
  height:auto;
  display:block;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.35));
}
.mobile-close{
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(234,240,255,.95);
  font-size: 26px;
  line-height: 0;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .15s ease, background .2s ease;
}
.mobile-close:hover{ transform: translateY(-1px); }

.mobile-nav__links{
  padding: 14px 0 10px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.mobile-nav__links a{
  text-decoration:none;
  color: rgba(234,240,255,.94);
  font-weight: 900;
  letter-spacing: .01em;
  font-size: 16px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
}
.mobile-nav__links a:hover{
  background: rgba(0,187,212,.10);
  border-color: rgba(0,187,212,.22);
  color: #fff;
  transform: translateX(2px);
}

.mobile-nav__cta{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding-top: 12px;
}
.mobile-cta{
  height: 52px;
  border-radius: 16px;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12.5px;
}
.mobile-cta.primary{
  background: linear-gradient(180deg, rgba(0,187,212,1), rgba(0,187,212,.88));
  color:#071226;
  box-shadow: 0 22px 62px rgba(0,187,212,.20);
}
.mobile-cta.ghost{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(234,240,255,.95);
}
.mobile-cta:hover{ transform: translateY(-1px); }

.mobile-nav__hint{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(234,240,255,.70);
  font-weight: 650;
  font-size: 12.5px;
  line-height: 1.5;
}

.nav-open .nav-overlay{ opacity:1; }
.nav-open .mobile-nav{ transform: translateX(0%); }

.nav-open .menu-ico::before{
  top:0;
  transform: rotate(45deg);
}
.nav-open .menu-ico::after{
  top:0;
  transform: rotate(-45deg);
}
.nav-open .menu-ico{
  background: transparent;
}

@media (max-width: 920px){
  .nav{ display:none; }
  .menu-btn{ display:grid; place-items:center; }

  .topbar .inner{
    grid-template-columns: 1fr auto;
    align-items:center;
    gap: 12px;
  }

  .brand img{ width: 130px; }
  .topbar.is-sticky .brand img{ width: 118px; }

  .actions{ gap: 10px; }
  .mode{ display:none !important; }
  .pill.phone{
    display:grid !important;
    place-items:center;
  }
  .quote{ display:none; }
}

@media (max-width: 520px){
  .pill.phone{
    display:grid !important;
    width:42px;
    height:42px;
  }
  .brand img{ width: 118px; }
  .topbar.is-sticky .brand img{ width: 110px; }
}




/* ================================
   UNIFIED: WHY + CONTACT SECTIONS
   ================================ */
.wx-section.wx-soft .wx-kicker,
.wx-section.wx-soft .gd-rightTitle{
  position: relative;
  z-index: 1;
}

.wx-whyList,
.gd-checklist{
  margin-top: 18px !important;
  display: grid !important;
  gap: 16px !important;
}

.wx-whyItem,
.gd-check{
  display: grid !important;
  grid-template-columns: 56px 1fr !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(7,18,38,.10) !important;
  background: rgba(255,255,255,.95) !important;
}

.wx-whyIcon,
.gd-checkIcon{
  width: 52px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  background: transparent !important;
}

.wx-whyIcon svg,
.gd-checkIcon svg{
  width: 34px !important;
  height: 34px !important;
  display: block !important;
}

.wx-whyItem b,
.gd-check b{
  display: block !important;
  margin-bottom: 4px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #071226 !important;
}

.wx-whyItem p,
.gd-check p{
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: rgba(7,18,38,.90) !important;
}

section#contact{
  background: #ffffff !important;
}

section#contact .rounded-2xl.bg-white{
  border: 1px solid rgba(7,18,38,.10) !important;
  background: #ffffff !important;
}

section#contact .text-4xl,
section#contact .text-2xl,
section#contact .sm\:text-3xl{
  color: #071226 !important;
}

@media (min-width: 1024px){
  section#contact .lg\:col-span-7{
    position: sticky;
    top: calc(var(--navH) + 20px);
    align-self: start;
  }
}

/* ================================
   GLOBAL TYPOGRAPHY SOFTENING
   ================================ */
html, body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


h1, h2, h3, h4, h5, h6{
  font-weight: 700 !important;
}

b, strong{
  font-weight: 600 !important;
}

.font-black{ font-weight: 700 !important; }
.font-extrabold{ font-weight: 700 !important; }
.font-bold{ font-weight: 600 !important; }
.font-semibold{ font-weight: 500 !important; }

.quote,
.mobile-cta,
.hero-btn,
.hero-check,
.hero-phone,
.pill,
button{
  font-weight: 700 !important;
}