/* ═══════════════════════════════════════════════════════════════
   STELLAR DESIGN — GLOBAL STYLESHEET
   Shared across all pages. Page-specific overrides stay inline.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. FONT FACE ──────────────────────────────────────────── */
@font-face {
  font-family: 'Poppins';
  src: url('/contentsd/Poppins-Bold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('/contentsd/Poppins-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ── 2. RESET & BASE ────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100vh;
  overflow: hidden;
}

body {
  font-family: 'Poppins', -apple-system, sans-serif;
  background: #0E1E26;
  color: #fff;
}

canvas { display: block; }

a { text-decoration: none; }

h1 {
  font-size: 54px;
  line-height: 62px;
  font-family: 'Poppins', sans-serif;
  color: #fff;
}
h2, h3 {
  font-family: 'Poppins', sans-serif;
  color: #fff;
}
p {
  font-size: 14px;
  line-height: 18px;
  font-family: 'Poppins', sans-serif;
  color: #00ffff;
  margin-top: 12px;
  margin-bottom: 12px;
}

/* ── 3. FOUC PREVENTION ─────────────────────────────────────── */
.js-fouc {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.js-fouc-ready .js-fouc {
  opacity: 1;
}


/* ── 6. HEADER ──────────────────────────────────────────────── */
.stick-head {
  position: fixed;
  width: 100vw;
  height: 16vh;
  z-index: 99;
  display: flex;
  align-items: flex-start;
  background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%);
}
@media (min-width: 768px) {
  .stick-head { justify-content: center; }
}
.stick-head img {
  height: 14vh;
  padding-top: 2vh;
  padding-left: 5vh;
  padding-right: 5vh;
  width: auto;
  margin: 0 auto;
  transition: 0.3s ease;
}
.stick-head.scrolled img {
  height: 12.5vh;
  padding-bottom: 1.5vh;
}

/* ── 7. SNAP SCROLL ─────────────────────────────────────────── */
.sn-scr-body {
  position: relative;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  z-index: 1;
  scroll-behavior: smooth;
}
.sn-scr-body section {
  height: 80vh;
  scroll-snap-align: center;
  z-index: 1;
}

/* ── 8. DESKTOP DOCK NAV ───────────────────────────────────── */
.dock-body {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(110px);
  z-index: 50;
  transition: none;
}
.dock-body.active {
  transform: translateX(-50%) translateY(0);
}
.dock {
  background: rgba(20, 20, 20, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 10px 14px;
  display: flex;
  gap: 6px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04);
}
.dock-items {
  display: flex;
  gap: 6px;
  pointer-events: none;
}
.dock-item {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
  position: relative;
  color: rgba(255,255,255,0.8);
}
.dock-item:hover {
  transform: scale(1.18) translateY(-4px);
  background: #0d5d80;
}
.dock-item.ex-ac {
  background: #0d5d80;
}
.divider {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  align-self: center;
  margin: 0 4px;
  flex-shrink: 0;
}
.tooltip {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 20, 0.95);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 11px;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.dock-item:hover .tooltip { opacity: 1; }

/* ── 9. MOBILE BURGER + DRAWER ──────────────────────────────── */
.burger {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100;
  width: 44px;
  height: 44px;
  background: rgba(20, 20, 20, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
}
.burger:active { background: rgba(255,255,255,0.1); }
.burger svg { color: #fff; }

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  pointer-events: none;
  transition: background 0.3s ease;
  z-index: 10;
}
.overlay.open { background: rgba(0,0,0,0.55); pointer-events: all; }

.drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 240px;
  background: #0d0d0d;
  border-left: 1.5px solid #00ffff;
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-header {
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(0,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer-logo { display: flex; align-items: center; gap: 8px; }
.drawer-logo-mark {
  width: 32px; height: 32px;
  background: #00ffff;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.drawer-logo-mark svg { color: #000; }
.drawer-logo-text { color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0.03em; }
.close-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: 6px;
  transition: background 0.15s;
}
.close-btn:active { background: rgba(255,255,255,0.1); }
.close-btn svg { color: rgba(255,255,255,0.5); }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 12px; }
.section-label {
  font-size: 10px; color: rgba(0,255,255,0.5);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 10px; padding-left: 4px;
}
.nav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.nav-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 12px 6px 10px;
  background: #1a1a1a;
  border: 1px solid rgba(0,255,255,0.15); border-radius: 14px;
  cursor: pointer; transition: all 0.15s;
  user-select: none; -webkit-tap-highlight-color: transparent;
  position: relative;
}
.nav-item:active { transform: scale(0.94); background: #222; }
.nav-item.active { background: #001f1f; border-color: #00ffff; }
.nav-item.active .ni-icon { background: #00ffff; }
.nav-item.active .ni-icon svg { color: #000; }
.nav-item.active .ni-label { color: #00ffff; }
.ni-icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: #242424;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.ni-icon svg { color: #00ffff; }
.ni-label {
  font-size: 10px; color: rgba(255,255,255,0.7);
  text-align: center; line-height: 1.3;
}
.mob-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 4px 0 14px; }
.cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cta-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 12px 6px 10px; border-radius: 14px;
  cursor: pointer; transition: all 0.15s;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.cta-item:active { transform: scale(0.94); }
.cta-booking { background: #f5f5f5; border: 1px solid #ddd; }
.cta-booking .ni-label { color: #333; }
.cta-booking .ni-icon { background: #fff; border: 1px solid #eee; }
.cta-wa { background: #1a3d28; border: 1px solid #25d366; }
.cta-wa .ni-icon { background: #25d366; }
.cta-wa .ni-label { color: #25d366; }
.cta-email { background: #0d1a40; border: 1px solid #1C54EE; }
.cta-email .ni-icon { background: #1C54EE; }
.cta-email .ni-label { color: #7aa4f7; }
.cta-shopify { background: #1a1a1a; border: 1px solid rgba(149,191,70,0.3); opacity: 0.5; cursor: not-allowed; }
.cta-shopify .ni-icon { background: #fff; }
.cta-shopify .ni-label { color: rgba(255,255,255,0.4); }
.badge-nav {
  position: absolute; top: 8px; right: 8px;
  width: 8px; height: 8px;
  background: #ff3b30; border-radius: 50%;
  border: 1.5px solid #0d0d0d;
}

.drawer, .burger { display: none; }
@media (max-width: 768px) {
  .drawer, .burger { display: flex; }
}

/* ── 10. SECTION PADDING SYSTEM ─────────────────────────────── */
.section-padding {
  padding: 80px 8%;
}
@media (max-width: 768px) {
  .section-padding {
    padding: 52px 6%;
  }
}

/* ── 11. HERO SECTION ───────────────────────────────────────── */
.hero-sec {
  height: 100vh !important;
  width: 100vw;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: row;
}

@media (min-width: 1000px) {
  .hero-sec {
    gap:32px;
  }
}

.hero-left {
  padding-left: 3vw;
  padding-right: 32px;
  padding-bottom: 7vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  position: relative;
}
.hero-sec h1 {
  font-size: 48px;
  line-height: 54px;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  text-align: left;
}
.hero-p {
  font-size: 14px;
  line-height: 18px;
  font-family: 'Poppins', sans-serif;
  color: #00ffff;
  margin-top: 12px;
  margin-bottom: 12px;
  text-align: left;
}
.shopify-badges {
  height: 12vh; width: auto;
  display: flex; justify-content: flex-start;
  align-items: center; flex-direction: row; gap: 2vw;
}
.bdge1 { height: 8vh; width: auto; }
.bdge2 { height: 14vh; width: auto; }
.img-4x-trust {
  height: 46px; width: 46px;
  border-radius: 100%;
  box-shadow: rgba(0,0,0,0.5) 0px 0px 10px;
}
.img-mrg { margin-left: -17px; }
.trust-hero-cont {
  display: flex; flex-direction: row;
  align-items: center; gap: 14px;
}
.div-mgs-trust { display: flex; flex-direction: row; }
.hero-p-trust {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  text-shadow: black 0px 0 10px;
  font-size: 14px;
  line-height: 18px;
  color: rgba(255,255,255,0.75);
  margin-top: 6px;
  margin-bottom: 6px;
}
.hero-p-trust span { color: #fff; }

/* ── 12. DEVICE MOCKUPS ──────────────────────────────────────── */
.hero-devices {
  position: relative;
  width: 100%; height: 90vh;
  display: flex; align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  padding: 16px 5vh 7vh 16px;
}
.device-browser {
  position: relative; width: 95%;
  border-radius: 12px; background: #111;
  box-shadow: 0 32px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.07);
  overflow: hidden;
  opacity: 1; filter: blur(0px);
  transition: opacity 0.6s ease, filter 0.6s ease, transform 0.4s ease, box-shadow 0.4s ease;
  pointer-events: auto;
  flex-shrink: 0;
  z-index: 1;
}
.device-browser.animate { opacity: 1; filter: blur(0px); }
.browser-bar {
  height: 34px; background: #1c1c1c;
  display: flex; align-items: center; gap: 6px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.browser-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.bd-red    { background: #ff5f57; }
.bd-yellow { background: #febc2e; }
.bd-green  { background: #28c840; }
.browser-url {
  flex: 1; height: 18px;
  background: rgba(255,255,255,0.07); border-radius: 5px;
  margin-left: 10px; font-size: 9px; font-family: 'Poppins', sans-serif;
  color: rgba(255,255,255,0.35);
  display: flex; align-items: center; padding: 0 8px; gap: 5px; overflow: hidden;
}
.browser-url-icon { font-size: 8px; }
.browser-screen {
  width: 100%; aspect-ratio: 7/4;
  overflow: hidden; position: relative; background: #000;
}
.browser-screen img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  display: block; transition: opacity 0.5s ease;
}
.browser-screen img.fading { opacity: 0; }
.reload-bar { display: none; }

.device-phone {
  position: absolute; width: 22%;
  border-radius: 18px; background: #080808;
  box-shadow: 0 40px 70px rgba(0,0,0,0.8), 0 0 0 3px #1e1e1e,
              0 0 0 4px rgba(255,255,255,0.06), inset 0 1px 0 rgba(255,255,255,0.07);
  left: 0%; bottom: 20%;
  overflow: visible; display: flex;
  flex-direction: column; align-items: center;
  padding: 4px;
  opacity: 1; filter: blur(0px);
  transition: opacity 0.6s ease 0.2s, filter 0.6s ease 0.2s, transform 0.4s ease, box-shadow 0.4s ease;
  z-index: 2; pointer-events: auto;
}
.device-phone.animate { opacity: 1; filter: blur(0px); }
.phone-btn-vol-up, .phone-btn-vol-down, .phone-btn-power {
  position: absolute; background: #2a2a2a; border-radius: 2px;
}
.phone-btn-vol-up  { left: -4px; top: 20%; width: 4px; height: 7%; }
.phone-btn-vol-down { left: -4px; top: 30%; width: 4px; height: 7%; }
.phone-btn-power    { right: -4px; top: 24%; width: 4px; height: 10%; }
.phone-inner {
  width: 100%; height: 100%; border-radius: 16px;
  overflow: hidden; display: flex;
  justify-content: flex-end; flex-direction: column; background: #000;
}
.phone-screen {
  width: 100%; flex: 1; position: relative;
  overflow: hidden; aspect-ratio: 1/2;
}
.phone-screen img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  display: block; transition: opacity 0.5s ease;
}
.phone-screen img.fading { opacity: 0; }
.phone-dynamic-island {
  position: absolute; top: 3.5%; left: 50%;
  transform: translateX(-50%);
  width: 28%; height: 4%; background: #000;
  border-radius: 20px; z-index: 15;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05);
}
.reload-overlay {
  position: absolute; inset: 0;
  background: white; z-index: 20;
  opacity: 0; pointer-events: none;
}
.phone-home-bar {
  width: 32%; height: 3px;
  background: rgba(255,255,255,0.8); border-radius: 3px;
  margin: 6px auto 7px; flex-shrink: 0;
  position: absolute; align-self: center;
}
#browser-img, #phone-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top; z-index: 2;
}

/* ── 13. WAVE TRANSITIONS ───────────────────────────────────── */
.trns-nrm {
  width: 100vw; height: 15vw !important;
  margin-bottom: -1px; pointer-events: none !important;
  scroll-snap-align: none !important;
  margin-top: -17vh;
}
.trns-reverse {
  width: 100vw; height: 15vw !important;
  margin-top: -1px; pointer-events: none !important;
  scroll-snap-align: none !important;
}
.trns-cyan { width: 100vw; height: 10vw; color: #08668e; }

/* ── 14. SECTION WRAPS ──────────────────────────────────────── */
.section-wrap-1 { position: relative; }
.section-wrap-1::before {
  height: 50%; top: 0; width: 100%; content: '';
  position: absolute; z-index: -1;
  background: linear-gradient(20deg, rgb(11,66,90) 0%, rgb(14,30,38) 50%);
}
.section-wrap-1::after {
  height: 50%; top: 50%; width: 100%; content: '';
  position: absolute; z-index: -1;
  background: linear-gradient(160deg, rgb(11,66,90) 0%, rgb(14,30,38) 50%);
}
.section-wrap-2 { position: relative; }
.section-wrap-2::before {
  height: 50%; top: 0; width: 100%; content: '';
  position: absolute; z-index: -1;
  background: linear-gradient(20deg, rgb(11,66,90) 0%, rgb(8,102,142) 50%);
}
.section-wrap-2::after {
  height: 50%; top: 50%; width: 100%; content: '';
  position: absolute; z-index: -1;
  background: linear-gradient(160deg, rgb(11,66,90) 0%, rgb(8,102,142) 50%);
}
.section-wrap-3 { position: relative; background-color: rgb(14,30,38); }
.orb {
  position: absolute; border-radius: 50%; aspect-ratio: 1;
  filter: blur(60px); pointer-events: none; z-index: 0;
}
.orb-1 {
  width: 30%; top: 5%; left: 3%;
  background: radial-gradient(circle, rgb(11,66,90) 0%, transparent 70%);
  opacity: 0.55;
}
.orb-2 {
  width: 30%; bottom: 5%; right: 3%;
  background: radial-gradient(circle, rgb(11,66,90) 0%, transparent 70%);
  opacity: 0.55;
}

/* ── 15. HIGHLIGHT BUTTON ───────────────────────────────────── */
.highlight-btn {
  border-radius: 50px;
  cursor: pointer;
  background-color: rgba(0,0,0,0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 2px solid #00ffff;
  color: white !important;
  font-size: 16px;
  font-family: 'poppins', sans-serif;
  font-weight:500;
  transition: 0.3s ease-in-out;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  padding: 12px 46px;
}
.highlight-btn:hover {
  background-color: #00ffff !important;
  border-color: #00ffff;
  color: #000 !important;
  padding: 12px 56px;
}
.btn-arrow {
  width: 18px; height: 18px;
  transition: transform 0.25s ease;
}
.highlight-btn:hover .btn-arrow { transform: translateX(4px); }

/* Secondary email CTA button */
.secondary-btn {
  border-radius: 50px;
  cursor: pointer;
  background-color: transparent;
  border: 1.5px solid rgba(0,255,255,0.35);
  color: rgba(255,255,255,0.7) !important;
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
  transition: 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 28px;
  text-decoration: none;
}
.secondary-btn:hover {
  background-color: rgba(0,255,255,0.08);
  border-color: rgba(0,255,255,0.7);
  color: #fff !important;
}
.secondary-btn svg {
  width: 15px; height: 15px; flex-shrink: 0;
  transition: transform 0.2s ease;
}
.secondary-btn:hover svg { transform: translateX(2px); }

/* ── 16. WMUD / FEATURE SECTIONS ────────────────────────────── */
.wmud-section {
  width: 100vw; height: 80vh;
  background: #0E1E26;
  font-family: 'Poppins', sans-serif;
}
.wmud-section .device-phone {
  opacity: 1; filter: none;
  right: 0; left: auto;  bottom: 0%;
}
.sec1-inner {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}
.hero-block {
  padding: 36px 8% 28px;
  border-bottom: 1px solid #00ffff12;
}
.wmud-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  color: #00ffff; margin-bottom: 14px;
}
.wmud-eyebrow::before, .wmud-eyebrow::after {
  content: ''; display: block;
  width: 20px; height: 1px; background: #00ffff;
}
.hero-block h2 {
  font-size: clamp(20px, 3vw, 42px);
  font-weight: 800; color: #fff;
  line-height: 1.1; letter-spacing: -.5px;
}
.hero-block h2 em { font-style: normal; color: #00ffff; }
.hero-block .hero-sub {
  font-size: clamp(11px, 1vw, 13px);
  color: #ffffff55; margin-top: 10px;
  font-weight: 300; letter-spacing: .4px;
}
.feature-row {
  flex: 1; display: flex; align-items: center;
  width: 100%; height: 100%;
  min-height: 0; position: relative;
}
.feature-row.reverse { flex-direction: row-reverse; }
.feat-text {
  flex: 0 0 50%; padding: 32px 7%;
  display: flex; flex-direction: column;
  justify-content: center;
  position: relative; z-index: 1;
}
.feat-eyebrow {
  display: flex; align-items: center;
  gap: 10px; margin-bottom: 14px;
}
.feat-eyebrow::before {
  content: ''; width: 24px; height: 2px;
  background: #00ffff; flex-shrink: 0;
}
.feat-eyebrow span {
  font-size: 9px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase; color: #00ffff;
}
.feat-text h3 {
  font-size: clamp(18px, 2.2vw, 34px);
  font-weight: 800; color: #fff;
  line-height: 1.15; letter-spacing: -.3px;
  margin-bottom: 14px;
  text-shadow: 0 0 10px rgba(0,0,0,.25);
}
.feat-text h3 span { color: #00ffff; }
.feat-text p {
  font-size: clamp(12px, 1vw, 14px);
  color: #ffffffaa; line-height: 1.8; font-weight: 300;
}
.feat-text p strong { color: #fff; font-weight: 500; }
.big-num {
  position: absolute; right: 6%; bottom: 8px;
  font-size: clamp(60px, 8vw, 100px);
  font-weight: 900; color: #00ffff07;
  line-height: 1; pointer-events: none; user-select: none;
  letter-spacing: -4px; z-index: 0;
}
.feat-browser {
  flex: 0 0 50%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 4%; position: relative; z-index: 1;
}
.wmud-section .device-browser {
  width: 100%; border-radius: 10px; background: #111;
  box-shadow: 0 24px 48px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.07);
  overflow: hidden; opacity: 1; filter: none;
}
.wmud-section .browser-bar {
  height: 30px; background: #1c1c1c;
  display: flex; align-items: center; gap: 6px; padding: 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0;
}
.wmud-section .browser-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.wmud-section .browser-url {
  flex: 1; height: 16px;
  background: rgba(255,255,255,.07); border-radius: 4px;
  margin-left: 8px; font-size: 8px; font-family: 'Poppins', sans-serif;
  color: rgba(255,255,255,.35);
  display: flex; align-items: center; padding: 0 7px; gap: 4px; overflow: hidden;
}
.wmud-section .browser-screen {
  width: 100%; aspect-ratio: 16/9;
  overflow: hidden; position: relative; background: #06111a;
}
.wmud-section .browser-screen video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.wmud-section h1, .wmud-section h2 {
  text-shadow: 0px 0px 10px rgba(0,0,0,0.4);
}
.wrapper-part-wmud { width: 100%; height: 100%; position: relative; }

/* ── 17. SHARED SECTION HEADERS (conv-section style) ────────── */
.conv-section {
  width: 100%; padding: 80px 8%;
  position: relative; overflow: hidden;
}
.conv-section-header { text-align: center; margin-bottom: 60px; }
.conv-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  color: #00ffff; margin-bottom: 14px;
}
.conv-eyebrow::before, .conv-eyebrow::after {
  content: ''; width: 20px; height: 1px; background: #00ffff;
}
.conv-section-header h2 {
  font-size: clamp(24px, 3vw, 44px); font-weight: 800; color: #fff;
  line-height: 1.15; letter-spacing: -.3px;
  text-shadow: 0 0 10px rgba(0,0,0,.4);
}
.conv-section-header h2 span { color: #00ffff; }
.conv-section-header p {
  font-size: clamp(12px, 1vw, 14px);
  color: rgba(255,255,255,0.45);
  max-width: 600px; margin: 12px auto 0;
  font-weight: 300; line-height: 1.7;
}

/* ── 18. SHARED SD-SEC STYLE ────────────────────────────────── */
.sd-sec { width: 100%; padding: 72px 10%; position: relative; }
.sd-sec + .sd-sec { border-top: 1px solid rgba(0,255,255,0.07); }
.sd-inner { margin: 0 auto; }
.sd-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 10px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: #00ffff; margin-bottom: 14px;
}
.sd-eyebrow::before, .sd-eyebrow::after { content: ''; width: 20px; height: 1px; background: #00ffff; }
.sd-h2 {
  font-size: clamp(24px, 2.8vw, 40px); font-weight: 800; color: #fff;
  line-height: 1.12; letter-spacing: -.3px;
  text-shadow: 0 0 10px rgba(0,0,0,.4);
}
.sd-h2 span { color: #00ffff; }
.sd-p { font-size: clamp(12px,1vw,14px); color: rgba(255,255,255,.55); line-height: 1.8; font-weight: 300; }
.sd-p strong { color: #fff; font-weight: 500; }

/* ── 19. BROWSER MOCKUP (brow-style for SD sections) ────────── */
.brow { background: #111; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.07); }
.brow-bar {
  height: 30px; background: #1c1c1c;
  display: flex; align-items: center; gap: 6px; padding: 0 12px;
  border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0;
}
.bd { width: 9px; height: 9px; border-radius: 50%; }
.bd-r { background: #ff5f57; }
.bd-y { background: #febc2e; }
.bd-g { background: #28c840; }
.brow-url {
  flex: 1; height: 16px;
  background: rgba(255,255,255,.07); border-radius: 4px;
  margin-left: 8px; font-size: 8px; color: rgba(255,255,255,.3);
  display: flex; align-items: center; padding: 0 8px; gap: 4px; overflow: hidden;
}
.brow-body { aspect-ratio: 2/1; overflow: hidden; background: #06111a; }
.brow-body img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── 20. CALENDLY SECTION ───────────────────────────────────── */
.cale-sec {
  position: relative; background: transparent;
  scroll-snap-align: center;
  display: flex; flex-direction: column;
  height: auto;
}
.calendly-inline-widget {
  min-width: 320px; height: 700px; min-height: 700px;
  overflow: hidden; z-index: 1;
}
.calendly-trust-bar {
  display: flex; align-items: center; gap: 20px;
  align-self: center; z-index: 3;
}
.ctb-avatars { display: flex; flex-shrink: 0; }
.ctb-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: #00ffff;
  font-family: 'Poppins', sans-serif;
  z-index: var(--i);
  background: rgba(255,255,255,0.05);
  box-shadow: rgba(0,0,0,0.5) 0px 0px 10px;
}
.ctb-avatar + .ctb-avatar { margin-left: -12px; }
.ctb-divider { width: 1px; height: 36px; background: rgba(255,255,255,0.1); flex-shrink: 0; }
.ctb-headline {
  font-family: 'Poppins', sans-serif;
  font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.9); margin: 0; line-height: 1.4;
}
.ctb-accent { color: #00ffff; }
.ctb-sub { font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.5); }

/* Email CTA beneath calendly */
.cale-email-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 0 32px;
  z-index: 2;
}
.cale-email-cta .cale-alt-label {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (min-width: 768px) and (max-width: 1600px) {
  .calendly-trust-bar { margin-top: -40px; }
}
@media (max-width: 768px) {
  .calendly-inline-widget iframe { border-radius: 14px; }
  .cale-sec { height: auto !important; padding: 32px 24px; }
  .cale-mob { display: block; }
  .cale-des { display: none; }
  .ctb-avatars { width: 40%; }
  .ctb-divider { display: none; }
  .calendly-trust-bar { margin-top: 12px; }
}

/* ── 21. FAQ SECTION ────────────────────────────────────────── */
.faq-section {
  font-family: 'Poppins', sans-serif; height: 80vh;
  min-height: 480px; display: flex; overflow: hidden;
}
.faq-left {
  width: 50%; display: flex; flex-direction: column;
  padding: clamp(1.5rem,3vw,3rem); overflow: hidden;
  border-right: 1px solid rgba(0,255,255,0.1);
}
.faq-label {
  font-size: 11px; font-weight: 600; letter-spacing: 3px;
  color: #00ffff; text-transform: uppercase; margin-bottom: 0.6rem;
}
.faq-title {
  font-size: clamp(1.4rem,2.5vw,2.2rem); font-weight: 700;
  color: #fff; line-height: 1.2; margin-bottom: 0.4rem;
  text-shadow: 0 0 10px rgba(0,0,0,.25);
}
.faq-title span { color: #00ffff; }
.faq-subtitle {
  font-size: clamp(0.75rem,1vw,0.88rem); color: rgba(255,255,255,0.4);
  font-weight: 300; margin-bottom: clamp(1rem,2vh,1.5rem); line-height: 1.5;
}
.faq-list { display: flex; flex-direction: column; gap: 8px; overflow: hidden; flex: 1; }
.faq-item {
  background: linear-gradient(135deg,rgba(0,0,0,.45) 25%, rgba(0,0,0,.35) 75%);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0,255,255,0.12); border-radius: 10px;
  overflow: hidden; cursor: pointer;
  transition: border-color 0.25s, background 0.25s; flex-shrink: 0;
}
.faq-item:hover { border-color: rgba(0,255,255,0.35); }
.faq-item.active { border-color: rgba(0,255,255,0.5); }
.faq-question {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px; gap: 10px;
}
.faq-question-text {
  font-size: clamp(0.76rem,1vw,0.86rem);
  font-weight: 500; color: #fff; line-height: 1.35;
}
.faq-icon {
  width: 20px; height: 20px; min-width: 20px; border-radius: 50%;
  border: 1.5px solid rgba(0,255,255,0.4);
  display: flex; align-items: center; justify-content: center;
}
.faq-icon svg {
  width: 10px; height: 10px; fill: none; stroke: #00ffff;
  stroke-width: 2; transition: transform 0.3s;
}
.faq-item.active .faq-icon { background: rgba(0,255,255,0.15); border-color: #00ffff; }
.faq-item.active .faq-icon svg { transform: rotate(45deg); }
.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s ease, padding 0.3s ease;
  padding: 0 clamp(0.9rem,1.5vw,1.1rem);
  font-size: clamp(0.7rem,0.92vw,0.8rem);
  color: rgba(255,255,255,0.55); line-height: 1.65; font-weight: 300;
}
.faq-answer span { color: #fff; }
.faq-item.active .faq-answer {
  max-height: 120px;
  padding: 0 clamp(0.9rem,1.5vw,1.1rem) clamp(0.6rem,1.2vh,0.85rem);
}
.faq-right {
  width: 50%; display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  padding: clamp(1.5rem,3vw,3rem); overflow: hidden;
}
.right-label {
  font-size: 11px; font-weight: 600; letter-spacing: 3px;
  color: #00ffff; text-transform: uppercase; margin-bottom: 0.75rem;
}
.right-heading {
  font-size: clamp(18px, 2.5vw, 42px); font-weight: 700;
  color: #fff; line-height: 1.15; margin-bottom: 1.1rem;
  text-shadow: 0 0 10px rgba(0,0,0,.25);
}
.right-heading span { color: #00ffff; }
.right-body {
  font-size: clamp(12px, 1vw, 14px);
  color: #ffffffaa; font-weight: 300; line-height: 1.8; margin-bottom: 12px;
}
.right-body span { color: #fff; }
.highlight-btn.light-btn { background: rgba(8,102,142,0.6); }
.faq-section .highlight-btn { background-color: rgba(0,0,0,0.4); }
@media(max-width:680px){
  .faq-section { flex-direction: column; height: auto; min-height: unset; }
  .faq-left, .faq-right { width: 100%; }
  .faq-left { border-right: none; border-bottom: 1px solid rgba(0,255,255,0.1); }
}

/* ── 22. FOOTER ─────────────────────────────────────────────── */
.footer-root {
  font-family: 'Poppins', sans-serif; width: 100%; color: #fff;
  scroll-snap-align: end !important; height: auto !important;
  background: linear-gradient(10deg, #0B425A 0%, #08668e 50%);
  display: flex;
  flex-direction: column; 
}
.footer-main {
  padding: 60px 48px 40px;
  display: grid; grid-template-columns: 1.6fr 1fr 1.4fr; gap: 48px;
  max-width: 1600px;
  align-self: center;
  width: 100%;
}
.footer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.footer-logo img { height: clamp(60px, 8vw, 100px); width: auto; }
.footer-tagline {
  font-size: 13px; color: rgba(255,255,255,0.65);
  line-height: 1.7; max-width: 280px; margin-bottom: 12px;
}
.trust-badges { display: flex; gap: 10px; margin-top: 12px; height: 80px; }
.badge { display: flex; align-items: center; gap: 7px; border-radius: 8px; font-size: 11px; font-weight: 500; color: #00ffff; }
.footer-root .bdge1 { height: 70%; width: auto; }
.footer-root .bdge2 { height: 100%; width: auto; }
.nav-col h4, .contact-col h4 {
  font-size: 11px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: rgba(255,255,255,0.4); margin: 0 0 20px;
}
.nav-col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.nav-col ul li a {
  font-size: 14px; color: rgba(255,255,255,0.75);
  transition: color 0.2s; display: flex; align-items: center; gap: 6px;
}
.nav-col ul li a:hover { color: #00ffff; }
.nav-col ul li a::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(0,255,255,0.5); flex-shrink: 0; transition: background 0.2s;
}
.nav-col ul li a:hover::before { background: #00ffff; }
.contact-info { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.contact-row { display: flex; align-items: center; gap: 10px; }
.contact-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.contact-icon svg { color: #00ffff; }
.contact-label { font-size: 11px; color: rgba(255,255,255,0.35); margin-bottom: 1px; }
.contact-value { font-size: 13px; color: rgba(255,255,255,0.8); font-weight: 500; }
.footer-bottom {
  background: #08668e; padding: 14px 48px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-bottom p { color: rgba(255,255,255,0.35); font-size: 12px; margin: 0; }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { font-size: 12px; color: rgba(255,255,255,0.35); transition: color 0.2s; }
.footer-legal a:hover { color: #00ffff; }
@media (max-width: 768px) {
  .footer-main { grid-template-columns: 1fr; gap: 32px; padding: 40px 24px 32px; }
  .footer-bottom { flex-direction: column; gap: 12px; padding: 16px 24px; text-align: center; }
}

/* ── 23. PARTICLES ───────────────────────────────────────────── */
#particles-js1 {
  position: absolute; inset: 0;
  width: 160vh; height: 80vh;
  z-index: 0; pointer-events: none;
  transform: translateX(47vw);
}

/* ── 24. STATS COUNTER (cs4) ─────────────────────────────────── */
.cs4-stats {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 16px 0 8px;
}
.cs4-stat {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  flex: 1; min-width: 0;
}
.cs4-val {
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 900; font-family: 'Poppins', sans-serif;
  white-space: nowrap; flex-shrink: 0;
}
.cs4-stat-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cs4-stat-title { font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; }
.cs4-stat-sub { font-size: 10px; color: rgba(255,255,255,0.4); line-height: 1.4; font-weight: 300; }


/* ── 26. MOBILE RESPONSIVE ───────────────────────────────────── */
@media (max-width: 768px) {
  .highlight-btn { font-size: 14px; padding: 12px 28px; justify-content: center; }
  .highlight-btn:hover { padding: 12px 28px;}
  .hero-sec {
    padding-top: 4vh; padding-bottom: 4vh;
    flex-direction: column-reverse;
    justify-content: flex-start;
    height: 100vh !important; gap: 24px;
  }
  .hero-sec .device-phone { display: none; }
  .hero-sec .device-browser { width: 100%; }
  .hero-left { padding: 0 5vw 0; width: 100%; height: auto; margin-bottom: 15vh; }
  .hero-sec h1 { font-size: 26px; line-height: 34px; }
  .hero-p { font-size: 12px; line-height: 17px; margin-top: 8px; margin-bottom: 8px; }
  .shopify-badges { height: 7vh; gap: 5vw; }
  .bdge1 { height: 4.5vh; }
  .bdge2 { height: 8vh; }
  .sec-2 { padding-bottom: 5vh; height: auto !important; }
  .wmud-section { height: auto; min-height: 60vh; }
  .feature-row, .feature-row.reverse { flex-direction: column; }
  .feat-browser, .feat-text { flex: 0 0 auto; width: 100%; }
  .feat-browser { height: 40%; }
  .sd-sec { padding: 52px 20px; }
  .conv-section { padding: 56px 6%; }
}

/* ── 27. HORIZONTAL SCROLL (sec-3 themes) ───────────────────── */
.h-snap {
  position: relative; z-index: 1;
  display: flex; height: 100%; overflow: visible; gap: 20vw;
}
.h-snap::-webkit-scrollbar { display: none; }
.h-snap { scrollbar-width: none; }
.h-slide {
  flex: 0 0 100vw; height: 100%;
  scroll-snap-align: start; display: flex;
}
@media (max-width: 768px) {
  .h-snap { gap: 10vw; scroll-snap-type: x mandatory; }
  .h-slide { flex: 0 0 100vw; padding-left: 6vw; padding-right: 6vw; gap: 32px; }
  .h-slide .device-browser { width: 100%; }
  .h-slide .device-phone { display: none; }
}




.sn-scr-body {
  width: 100vw;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  align-items: center;
  }

  .sn-scr-body section {
    max-width: 1600px;
    width: 100vw;
  }


  .section-wrap-1,
  .section-wrap-2,
  .slides-div {
    width: 100vw;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }


  .trns-nrm {
    z-index: 1;
  }

  .hero-sec {
    max-width: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .footer-root {
    max-width: none !important;
  }

  .hero-sec .he-inner{
    max-width: 1600px;
    width: 100vw;

    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: row;
    height: 100vh;
  }


  .hero-left, .hero-devices {
    max-width: 800px;
  }












  /* reveal animations */

  .reveal,
.reveal-lft,
.reveal-rgt,
.reveal-dl-1,
.reveal-dl-2,
.reveal-dl-3,
.reveal-dl-4,
.reveal-dl-5,
.reveal-dl-6,
.reveal-dl-7,
.reveal-dl-8 {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* slide up */
.reveal,
.reveal-dl-1,
.reveal-dl-2,
.reveal-dl-3,
.reveal-dl-4,
.reveal-dl-5,
.reveal-dl-6,
.reveal-dl-7,
.reveal-dl-8 {
  transform: translateY(40px);
}

/* slide in from left */
.reveal-lft {
  transform: translateX(-40px);
}

/* slide in from right */
.reveal-rgt {
  transform: translateX(40px);
}

/* triggered state */
.reveal.visible,
.reveal-lft.visible,
.reveal-rgt.visible,
.reveal-dl-1.visible,
.reveal-dl-2.visible,
.reveal-dl-3.visible,
.reveal-dl-4.visible,
.reveal-dl-5.visible,
.reveal-dl-6.visible,
.reveal-dl-7.visible,
.reveal-dl-8.visible {
  opacity: 1;
  transform: translate(0, 0);
}


.reveal-rgt, .reveal-lft {
  transition-delay: 0.3s;
  }

/* ===== MOBILE OPTIMIZATION (max-width: 768px) — START =====
   Site-wide mobile pass. Rules are scoped to a single
   @media (max-width: 768px) query. !important is used where a page's
   own embedded <style> block (which loads after this stylesheet in the
   DOM) declares the same selector without a matching mobile override —
   without it, the later inline rule would win and the fix would be
   silently ignored on mobile. Desktop styles (>768px) are untouched. */
@media (max-width: 768px) {

  /* ── 1. GLOBAL NAV — remove the desktop dock nav ──────────────
     The floating bottom "dock" (13 icons + dividers, ~800px of
     unwrapped flex content) has no mobile treatment anywhere in the
     codebase, so on phones it renders far wider than the viewport,
     overlapping content and duplicating the burger/drawer menu, which
     already provides the same links + CTAs in a mobile-friendly grid.
     Affects: every page that includes the dock (all except
     pdp-audit-index, which doesn't use it). */
  .dock-body {
    display: none !important;
  }

  /* ── 2. GLOBAL NAV — drawer close button touch target ─────────
     30×30px is below the ~44px recommended minimum tap target. */
  .close-btn {
    width: 44px !important;
    height: 44px !important;
  }

  /* ── 3. FAQ SECTION — close the 681–768px stacking gap ────────
     The existing stacked layout only engages at max-width:680px,
     so a phone/small-tablet viewport between 681–768px still gets
     the two-column 50/50 split. Reinforcing the same stack at 768px
     closes that gap. Affects 13 of 14 pages. */
  .faq-section {
    flex-direction: column !important;
    height: auto !important;
    min-height: unset !important;
  }
  .faq-left,
  .faq-right {
    width: 100% !important;
  }
  .faq-left {
    border-right: none !important;
    border-bottom: 1px solid rgba(0,255,255,0.1) !important;
  }

  /* ── 4. IMAGES — safety net for unscaled images ───────────────
     Several <img> tags across the site (case-study screenshots,
     device-mockup screens, etc.) carry large fixed width/height
     HTML attributes. Most sit inside containers that already force
     width:100%, but this is a low-specificity fallback so any image
     that DOESN'T have a matching rule can't force horizontal scroll. */
  img {
    max-width: 100%;
    height: auto;
  }

  /* ── 5. ROI / REVENUE CALCULATOR WIDGET — bigger tap target ───
     .cur-btn (EUR/USD toggle) is ~27px tall, under the ~44px comfort
     minimum for a tap target. Widget is shared across most pages. */
  .cur-btn {
    padding: 12px 24px !important;
  }

  /* ── 6. LANDING PAGE — close layout-row stacking gap ───────────
     Existing stack only engages at max-width:680px; between 681–768px
     the two-column comparison grid stays side-by-side and gets cramped. */
  .layout-row {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* ── 7. LANDING PAGE — conv-grid single column on mobile ──────
     Grid drops to 2 columns at max-width:900px and only reaches a
     single column at max-width:600px, so 601–768px shows 2 cramped
     columns. Force single column for the full mobile range. */
  .conv-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── 8. AGB / IMPRINT — more reading room on narrow screens ───
     3rem/2rem padding leaves very little text width on a 320–375px
     phone; tighten it without touching desktop. */
  .policy-wrap,
  .imprint-wrap {
    padding: 2.5rem 1.25rem !important;
  }

  /* ── 9. PDP AUDIT TOOL — footer link row wraps instead of
     overflowing ──────────────────────────────────────────────────
     .app-footer lays out 6 links + separators in a single
     non-wrapping flex row with 24px gaps; on a phone this pushes the
     page wider than the viewport. */
  .app-footer {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
    column-gap: 14px !important;
    padding: 20px 20px !important;
  }
  .app-header {
    padding: 16px 20px !important;
  }

  /* ── 10. PDP AUDIT TOOL — long product URL no longer overflows ─
     .results-url-bar has no width cap or truncation, unlike the
     matching .loading-url pill, so a long Shopify product URL can
     force the page wider than the screen. */
  .results-url-bar {
    max-width: 100%;
    box-sizing: border-box;
  }
  #results-url-text {
    display: inline-block;
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }

  /* ── 11. PDP AUDIT TOOL — reinforce its own 700px breakpoint ───
     The page's single responsive block is written at
     max-width:700px, leaving a 701–768px gap where the audit
     results layout is untreated. Re-applying the same fixes at
     768px closes that gap so results/loading states below 768px are
     consistently handled. */
  #state-initial,
  #state-loading,
  #state-results {
    padding: 90px 20px 40px !important;
  }
  .scores-sub-row {
    gap: 20px !important;
  }
  .cr-uplift-card {
    gap: 16px !important;
  }
  .cr-range {
    margin-left: 0 !important;
    text-align: left !important;
  }
  .subsection-cards {
    grid-template-columns: 1fr !important;
  }
  .roi-calc-card {
    flex-direction: column !important;
  }
  .roi-inputs {
    border-right: none !important;
    border-bottom: 1px solid rgba(0,255,255,0.1) !important;
  }
  .roi-results.open {
    padding: 20px 18px !important;
  }

  /* ── 12. PDP AUDIT TOOL — larger tap targets on small CTAs ─────
     .criteria-gate-btn (~29px) and .new-audit-btn (~28px) are below
     the ~44px comfort minimum for a tap target. */
  .criteria-gate-btn {
    padding: 12px 32px !important;
  }
  .new-audit-btn {
    padding: 11px 18px !important;
  }
}
/* ===== MOBILE OPTIMIZATION — END ===== */


/* ===== MOBILE OPTIMIZATION — ROUND 2 (max-width: 768px) — START =====
   Follow-up pass. Root causes this round were mostly page-embedded
   <style> blocks (which load after this stylesheet and win ties on
   equal specificity) either fighting the intended mobile rule outright,
   or simply missing one line that every other page already has.
   !important is used the same way as in Round 1: to guarantee these
   fixes win regardless of where a conflicting declaration sits in the
   page's own markup. Desktop (>768px) is untouched. */
@media (max-width: 768px) {

  /* ── 1. GENERAL — burger menu not tappable ─────────────────────
     Root cause: every page's own <style> block redeclares .burger
     with `position: absolute` (no `top`) and, in a later block,
     shrinks it to 36x36 with no `position`/`z-index`. Both come after
     global.css in the DOM and win ties at equal specificity, so the
     button silently drifts off its intended fixed top-right anchor
     and shrinks below a comfortable tap size. Forcing the full
     positioning + size back guarantees a stable, reachable 44x44
     target regardless of what the page's own styles do. */
  .burger {
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 150 !important;
    pointer-events: auto !important;
  }

  /* ── 2. GENERAL — footer layout broken ─────────────────────────
     Root cause: global.css's existing mobile footer rule targets
     `.footer-bottom` / `.footer-legal`, but every page's actual
     footer markup uses `.footer-bar` / `.footer-bar-left` /
     `.footer-bar-right` instead — the selector never matched, so the
     bottom bar never got its mobile stacking. Targeting the class
     that's actually in the HTML. */
  .footer-bar {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
    padding: 16px 24px !important;
  }
  .footer-bar-right {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
  }

  /* ── 3. SHARED HERO — device mockup column collapses ───────────
     Root cause: `.hero-devices` is 50% width on desktop on every
     page that uses the hero-left/hero-devices split (case studies,
     design, conversion, portfolio, landing). Every page's mobile
     block resets padding/height for `.hero-devices` but never resets
     width, so the mockup column stays pinned at half-width next to
     a now-full-width text column — squeezed and visually broken.
     One shared fix for every page using this pattern. */
  .hero-devices {
    width: 100% !important;
  }

  /* ── 4. SHARED CALCULATOR WIDGET (.cr-root) ─────────────────────
     4a. `.cr-card` stacks to a column on every page except
     landing-index, which is missing this one declaration from its
     otherwise-identical "Calculator" mobile block — reinstating it
     for consistency (harmless no-op on pages that already have it).
     4b. `.cr-inputs` still shows its desktop divider as a
     border-right once the card is a single column; flipping it to
     border-bottom matches the working pattern already used on the
     PDP audit tool's `.roi-inputs`.
     4c. `.cr-root` carries `min-height: 80vh` from desktop with no
     mobile reset, leaving a large empty gap under the calculator on
     pages where it's a standalone section (e.g. portfolio) — this is
     part of the "too much padding" issue on those pages. */
  .cr-card {
    flex-direction: column !important;
  }
  .cr-inputs {
    border-right: none !important;
    border-bottom: 1px solid rgba(0,255,255,0.1) !important;
  }
  .cr-root {
    min-height: 0 !important;
  }

  /* ── 5. SHARED STAT CARDS (.cs4-stat) — text overflow ───────────
     Root cause: `.cs4-stat-title` is `white-space: nowrap` with no
     mobile override anywhere in the codebase. Inside a shrinking flex
     card this forces labels like "Bounce Rate Reduction" or "Average
     Order Value" to spill past the card edge instead of wrapping.
     Affects the hero stat row on every page and, more severely, the
     case-study preview cards on case-studies-index.html (see #8). */
  .cs4-stat-title {
    white-space: normal !important;
  }

  /* ── 6. SHARED SECTION-WRAP BACKGROUND — gradient not filling ──
     Root cause: `.section-wrap-1` / `.section-wrap-2` paint their
     gradient via ::before/::after pseudo-elements sized with
     `height: 50%`. That percentage only resolves against a parent
     with an explicit (non-auto) height. On desktop the wrapped
     section has a fixed vh height so it works; several sections
     switch to `height: auto !important` on mobile (e.g. landing's
     TL;DR `.sec-2`, and `.cr-root` wrapping the calculator on
     portfolio), which makes the wrapper's own height content-driven
     — at that point `height: 50%` on the pseudo-elements no longer
     resolves and the gradient collapses, leaving a plain gap under
     the fold. Fix: give the wrapper itself a real background (which
     always covers its own box regardless of height) and retire the
     fragile pseudo-elements on mobile only. */
  .section-wrap-1,
  .section-wrap-2 {
    position: relative;
  }
  .section-wrap-1 {
    background: linear-gradient(180deg, rgb(11,66,90) 0%, rgb(14,30,38) 100%) !important;
    background: #0E1E26 !important;
  }
  .section-wrap-2 {
    background: linear-gradient(180deg, rgb(11,66,90) 0%, rgb(8,102,142) 100%) !important;
    background: #08668e !important;
  }
  .section-wrap-1::before,
  .section-wrap-1::after,
  .section-wrap-2::before,
  .section-wrap-2::after {
    display: none !important;
  }
  /* landing's TL;DR section additionally forces its own
     `background: transparent !important` inline in the page, which
     beats a same-specificity rule from this stylesheet regardless of
     !important — so this needs a more specific selector to win. */
  .section-wrap-2 .sec-2 {
    background: linear-gradient(180deg, rgb(11,66,90) 0%, rgb(8,102,142) 100%) ;
    background: #08668e !important;
  }

  /* ── 7. SHARED WMUD SECTIONS — excess padding ───────────────────
     Root cause: every "what makes us different" section carries an
     inline `style="padding: 64px"` (or `64px 0` / `32px 0`) directly
     in the HTML on case-study-lts/losa/lumenap, design-index and
     conversion-index. The pages' own stylesheets try to reduce this
     with plain `#id { padding-bottom: 5vh }` rules, but an inline
     style always outranks an ID selector unless the stylesheet rule
     is !important — so the reduction never actually applied, and the
     64px outer padding stacks on top of the already-adjusted 20-32px
     inner padding on `.feat-text`/`.feat-browser`, roughly doubling
     the edge spacing on a phone screen. !important is required here
     specifically to beat the inline style. */
  .wmud-section {
    padding: 24px 0 !important;
  }
  /* landing's "Steps" section is a text-only variant (.wmud-3) that
     also carries a permanent `min-height: 60vh` per step; with six
     short text-only steps stacked, that's ~360vh of mostly empty
     space. Dropping the floor lets each step size to its own short
     content instead. */
  .wmud-3.wmud-section {
    min-height: 0 !important;
  }

  /* ── 8. CASE-STUDIES-INDEX — metric cards overflow ──────────────
     `.csx-root .cs4-stat` is a fixed 33.3%-width, 3-across row on
     ALL viewports (no mobile override existed at all) — on a phone
     that's roughly 100-110px per card, nowhere near enough for
     "Bounce Rate Reduction" or "Average Order Value" on one line.
     Stacking to one stat per row (icon-value left, label right)
     keeps everything readable and inside the card. */
  .csx-root .cs4-stats {
    flex-direction: column !important;
    width: 100% !important;
  }
  .csx-root .cs4-stat {
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
  }
  .csx-root .cs4-stat-text {
    align-items: flex-start !important;
    text-align: left !important;
  }
  .csx-root .cs4-stat-title,
  .csx-root .cs4-stat-sub {
    text-align: left !important;
  }

  /* ── 9. PORTFOLIO / CAROUSEL — defensive overflow guard ─────────
     `.h-snap` is `overflow: visible` on desktop (needed so slides
     aren't clipped mid-transition); confirming it's actually
     scrollable/clipped on mobile rather than just relying on the
     outer scroll body's clip. */
  .h-snap {
    overflow-x: hidden !important;
  }

  /* ── 10. LANDING PAGE — hero wrapper (.he-inner) ────────────────
     Root cause: landing's hero nests `.hero-left`/`.hero-devices`
     inside an extra `.he-inner` flex wrapper that only landing-index
     uses. `.hero-sec` itself correctly switches to
     `flex-direction: column-reverse` on mobile, but `.he-inner` — the
     ACTUAL flex parent of the two hero children — has no mobile rule
     anywhere in the codebase and stays `flex-direction: row`, so the
     text and device mockup remain squeezed side by side instead of
     stacking. */
  .hero-sec .he-inner {
    flex-direction: column-reverse !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
  }

  /* ── 11. CALCULATOR PAGE (calc-index.html) — hero/card ──────────
     Root cause: this page embeds the full calculator directly inside
     `.hero-sec` (unlike every other page, where it's a separate
     section) — so the hero has to fit a heading + paragraph + trust
     row AND a full calculator card into a rigid `height: 100vh`.
     That's far more content than the "text + device image" hero
     the 100vh rule was designed for, so it overflows/clips. Letting
     this specific hero grow past 100vh (matching how the PDP audit
     tool never constrains its calculator to a fixed viewport height)
     fixes it without touching the standard hero on every other page. */
  .hero-sec:has(.cr-inner) {
    height: auto !important;
    padding-top: 90px !important;
    padding-bottom: 40px !important;

    max-height: none !important;
  min-height: none !important;
  }
}
/* ===== MOBILE OPTIMIZATION — ROUND 2 — END ===== */


/* ===== MOBILE OPTIMIZATION — ROUND 3 (max-width: 768px) — START =====
   Second follow-up pass. Two of these fixes are specificity mismatches:
   a page's own "mobile fix" used a selector with LOWER specificity than
   the desktop rule it was trying to override, so — media query or
   not — the desktop rule kept winning outright, before source order or
   !important ever come into play. The fix in both cases is matching (or
   exceeding) the desktop selector's specificity, not just adding
   !important. Desktop (>768px) is untouched. */
@media (max-width: 768px) {

  /* ── 1. CALCULATOR WIDGET — still cramped vs. the PDP audit tool ─
     Re-examined against `.roi-calc-section`/`.roi-calc-card` on the
     PDP audit tool. Two concrete gaps versus that reference:
     a) `.cr-root` and `.cr-inner` both carry their own horizontal
        padding, so the two stack (roughly 7vw combined) before the
        card's own internal padding even starts — the PDP audit card
        only pads once. Cut `.cr-inner`'s own padding at mobile so
        `.cr-root`'s padding is the only outer padding, matching a
        single-padding-layer card like the reference.
     b) `.currency-toggle` has no `flex-wrap`, so its three buttons
        (EUR/GBP/USD) have no fallback if they don't quite fit the
        narrower stacked card — added a wrap fallback. */
  .cr-inner {
    padding: 0 !important;
    gap: 20px !important;
  }
  .currency-toggle {
    flex-wrap: wrap !important;
  }

  /* ── 2. CALCULATOR PAGE (calc-index.html) hero — same widget,
     needs its own horizontal padding since it has no `.cr-root`
     wrapper (the calculator sits directly in `.hero-sec` on this
     page only) — without it, rule 1 above would leave this specific
     instance completely edge-to-edge. */
  .hero-sec:has(.cr-inner) .cr-inner {
    padding: 0 4vw !important;
    height: auto !important;
  }

  /* ── 3. CASE STUDY HERO (LTS / LOSA / LUMENAP) — specificity
     mismatch left the "before/after" browser stack unfixed ──────
     Desktop rule is `.hero-sec .s4-browser-stack { position: absolute;
     top: 50%; transform: translateY(-50%) }` (2 classes). The
     page's own "mobile fix" only wrote `.s4-browser-stack { position:
     static }` (1 class) — lower specificity than the desktop rule it
     was meant to replace, so the desktop rule kept winning outright
     regardless of viewport or source order, and the two stacked
     browser mockups stayed pinned/centered via absolute positioning
     inside a container that's now full width — never actually
     collapsing into normal document flow. Matching the desktop
     selector fixes it for real. Also simplifying the floating
     "before/after" badge image on top of the stack, since with the
     stack now properly flowing, its complex absolute + transform
     positioning has no reliable anchor left. */
  .hero-sec .s4-browser-stack {
    position: static !important;
    top: auto !important;
    transform: none !important;
  }
  .hero-devices .overlay-img {
    display: none !important;
  }

  /* ── 4. PORTFOLIO — slides-div (project showcase panels) ────────
     `.slide-1/2/3` are pinned to a fixed `height: 70vh !important`
     with no mobile override anywhere in the page. On mobile each
     slide's text+image stack vertically (via the existing `.h-slide`
     mobile rule), which needs far more than 70vh once stacked — the
     content overflows past its own colored background box, which is
     what reads as "background not filling." Needs to match the
     desktop rule's specificity (2 classes) to actually win. */
  .slides-div .slide-1,
  .slides-div .slide-2,
  .slides-div .slide-3 {
    height: auto !important;
    max-height: none !important;
    z-index: 1;
  }

  /* ── 5. SLIDES-DIV — background parity with section-wrap-1/2 ────
     Same wrapper role as `.section-wrap-1`/`.section-wrap-2` (Round 2,
     item 6) on case-study-lts/losa/lumenap, design-index,
     conversion-index and portfolio, just under a different class
     name. Its background is a direct gradient rather than the
     fragile ::before/::after percentage-height trick, so it isn't
     exposed to that exact bug — but reinforcing it here guarantees
     it can't be blanked out by anything else on the page, the same
     safety margin the other two wrappers now have. */
  .slides-div {
    position: relative;
    background: linear-gradient(180deg, #08668e 0%, #0B425A 50%, #08668e 100%);
    background: #08668e !important;
    gap: 64px;
    }

    .scroll-root {
      padding-top:15vh !important;
    }

    .cf-root {
      padding-top:15vh !important;
    }

    .cr-inputs.shrink { flex: 0.75 !important; }
}
/* ===== MOBILE OPTIMIZATION — ROUND 3 — END ===== */