/* ==========================================================================
   SHLDR — Healthcare at Doorstep · Pre-launch landing page
   Design tokens: Flare Coral #FF6A3D · Signal Blue #2454FF
   Signature motif: the doorway arch — "healthcare at your doorstep",
   carried through as a real elliptical arch treatment on every media panel,
   not just the logomark.
   ========================================================================== */

:root{
  /* --- color --- */
  --bg:#FFFFFF;
  --bg-warm:#EEF1F8;
  --surface:#F7F8FB;
  --ink:#10192B;
  --ink-soft:#4E5C74;
  --ink-faint:#8B96AA;
  --line:#E2E6EE;
  --line-strong:#CDD4E0;

  --blue:#2454FF;
  --blue-deep:#132C8C;
  --blue-tint:#E9EEFF;
  --orange:#FF6A3D;
  --orange-deep:#D8431E;
  --orange-tint:#FFEAE0;
  --maroon:#7A2418;

  --gradient-brand: linear-gradient(135deg, #FF6A3D 0%, #FF3D71 50%, #2454FF 100%);

  /* --- type --- */
  --font-display:'Fraunces', 'Inter', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  /* --- layout --- */
  --container:1180px;
  --header-h:76px;
  --radius-sm:12px;
  --radius-md:16px;
  --radius-lg:28px;
  --shadow-sm: 0 2px 10px rgba(16,25,43,0.06);
  --shadow-md: 0 14px 34px rgba(16,25,43,0.10);
  --shadow-lg: 0 26px 64px rgba(16,25,43,0.16);
  --ease: cubic-bezier(.22,.9,.32,1);
}

/* ================= RESET ================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 12px);}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
button{font-family:inherit; cursor:pointer;}
input,textarea,button{font-family:inherit; font-size:1rem;}
h1,h2,h3,h4,h5{font-family:var(--font-display); margin:0; font-weight:600; letter-spacing:-0.005em;}
p{margin:0;}
.icon{width:1.15em; height:1.15em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;}
svg use[href^="#icon-"]{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

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

:focus-visible{outline:2.5px solid var(--blue); outline-offset:3px; border-radius:4px;}

/* ================= LAYOUT HELPERS ================= */
.section{ padding:84px 0; }
.section-inner{ max-width:var(--container); margin:0 auto; padding:0 32px; }

.section-head{ max-width:640px; margin:0 0 44px; }
.section-title{ font-size:clamp(1.9rem,3.4vw,2.6rem); margin-top:14px; line-height:1.15; }
.section-lede{ margin-top:16px; font-size:1.08rem; color:var(--ink-soft); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:0.76rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--orange-deep); font-weight:500;
}
.eyebrow::before{content:''; width:16px; height:1.5px; background:var(--orange); display:inline-block;}
.eyebrow-light{ color:#FFD9B8; }
.eyebrow-light::before{ background:#FFD9B8; }

.tag-mono{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.12em; color:var(--blue-deep);
  background:var(--blue-tint); padding:6px 12px; border-radius:8px; display:inline-block;
}

/* ================= REVEAL ANIMATION ================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ================= BUTTONS ================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:14px; font-weight:600; font-size:0.96rem;
  border:1.5px solid transparent; transition:transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap;
}
.btn .icon{ width:1.05em; height:1.05em; }
.btn-primary{ background:var(--blue); color:#fff; box-shadow:0 8px 20px rgba(36,84,255,0.28); }
.btn-primary:hover{ background:var(--blue-deep); transform:translateY(-2px); box-shadow:0 12px 26px rgba(36,84,255,0.34); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--line-strong); }
.btn-outline:hover{ border-color:var(--orange); color:var(--orange-deep); transform:translateY(-2px); }
.btn-ghost{ background:var(--orange-tint); color:var(--orange-deep); }
.btn-ghost:hover{ background:var(--orange); color:#fff; }
.btn-sm{ padding:10px 18px; font-size:0.86rem; border-radius:11px; }
.btn-full{ width:100%; }
.btn-primary-light{ background:#fff; color:var(--blue-deep); box-shadow:0 10px 26px rgba(0,0,0,0.18); transition:background .3s var(--ease), color .3s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.btn-primary-light:hover{ background:var(--blue); color:#fff; box-shadow:0 12px 28px rgba(36,84,255,0.32); }
.btn-outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,0.4); }
.btn-outline-light:disabled{ cursor:default; opacity:0.85; }
.btn-text-light{ color:#fff; font-weight:600; font-size:0.95rem; border-bottom:1.5px solid rgba(255,255,255,0.5); padding-bottom:2px; }

.tag-soon{
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase;
  background:var(--orange); color:#fff; padding:2px 8px; border-radius:100px; margin-left:2px;
}

/* ================= HEADER ================= */
/* ============ NAV SHELL — full width, flush, no outer radius ============ */
.sh-nav{
  position:sticky;
  top:0;
  z-index:100;
  width:100%;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  border-bottom:1px solid rgba(10,20,40,.10);
  transition:box-shadow .4s cubic-bezier(.22,1,.36,1), border-color .4s cubic-bezier(.22,1,.36,1);
 
}
.sh-nav.is-scrolled{
  box-shadow:
    0 18px 40px -22px rgba(10,20,40,.28),
    0 24px 60px -34px rgba(246,130,30,.28),
    0 24px 60px -34px rgba(42,87,166,.26);
  border-color:rgba(10,20,40,.14);
}

.sh-nav__inner{
  max-width:1360px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  /* gap:20px; */
  padding:14px 32px;
  transition:padding .4s cubic-bezier(.22,1,.36,1);
}
/* .sh-nav.is-scrolled .sh-nav__inner{ padding:10px 32px; } */

/* ---- Brand ---- */
.sh-nav__brand{ display:flex; align-items:center; flex-shrink:0; text-decoration:none; }
.sh-nav__logo{ height:54px; width:auto; display:block; }

/* ---- Tabs — square, no radius on the wrapper or the active highlight ---- */
.sh-nav__tabs{
  position:relative;
  display:flex;
  align-items:center;
  gap:2px;
  padding:5px;
  border-radius:50px;
  background:rgba(10,20,40,.045);
  border:1px solid rgba(10,20,40,.08);
  flex-shrink:0;
  width:max-content;
}
.sh-nav__tab-highlight{
  position:absolute;
  top:4px; left:4px;
  height:calc(100% - 8px);
  width:0;
  border-radius:50px;
  background:#fff;
  box-shadow:0 6px 16px -6px rgba(10,20,40,.22), 0 0 0 1px rgba(10,20,40,.04);
  transition:transform .42s cubic-bezier(.22,1,.36,1), width .42s cubic-bezier(.22,1,.36,1);
  padding:3px !important;
}
.sh-nav__tab{
  position:relative; z-index:1;
  border:none; background:transparent; cursor:pointer;
  font-family:'Inter',sans-serif;
  font-size:14px; font-weight:600;
  padding:9px 18px;
  border-radius:0px;
  color:rgba(10,20,40,.56);
  transition:color .3s ease;
  white-space:nowrap;
}
.sh-nav__tab:hover{ color:#0A1428; }
.sh-nav__tab.is-active{
  background:linear-gradient(135deg, #F6821E, #2A57A6);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ---- Right cluster ---- */
.sh-nav__right{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.sh-nav__divider{ width:1px; height:22px; background:rgba(10,20,40,.10); }

/* ---- Search — always visible, not a toggle ---- */
.sh-nav__search{
  display:flex;
  align-items:center;
  gap:9px;
  height:40px;
  padding:0 14px;
  border-radius:10px;
  border:1px solid rgba(10,20,40,.10);
  background:rgba(10,20,40,.03);
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
  width:220px;
}
.sh-nav__search svg{ width:16px; height:16px; color:rgba(10,20,40,.56); flex-shrink:0; }
.sh-nav__search:focus-within{
  background:#fff;
  border-color:rgba(42,87,166,.4);
  box-shadow:0 0 0 4px rgba(42,87,166,.09);
}
.sh-nav__search:focus-within svg{ color:#3d75f0; }
.sh-nav__search input{
  flex:1;
  min-width:0;
  border:none;
  outline:none;
  background:transparent;
  font-family:'Inter',sans-serif;
  font-size:13.5px;
  color:#f88132;
}
.sh-nav__search input::placeholder{ color:rgba(10,20,40,.4); }

/* ---- Social cluster ---- */
.sh-nav__social{ display:flex; align-items:center; gap:6px; }
.sh-nav__social a{
  width:36px; height:36px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  color:rgba(10,20,40,.56);
  border:1px solid rgba(10,20,40,.10);
  background:rgba(10,20,40,.02);
  transition:color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease;
}
.sh-nav__social a svg{ width:16px; height:16px; }
.sh-nav__social a:hover{ color:#fff; transform:translateY(-2px); border-color:transparent; }
.sh-nav__social a.sh-whatsapp:hover{ background:linear-gradient(135deg,#25D366,#128C4A); }
.sh-nav__social a.sh-instagram:hover{ background:linear-gradient(135deg, #F6821E, #C1338D, #2A57A6); }
.sh-nav__social a.sh-facebook:hover{ background:linear-gradient(135deg, #2A57A6, #132E5C); }

/* ---- CTA ---- */
.sh-nav__cta{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 20px;
  border-radius:40px;
  background:linear-gradient(100deg, #F8791E, #3374C3);
  color:#fff;
  font-size:14px;
  font-weight:650;
  text-decoration:none;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 10px 22px -8px rgba(42,87,166,.5);
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1);
  white-space:nowrap;
  flex-shrink:0;
}
.sh-nav__cta:hover{ transform:translateY(-1px); box-shadow:0 14px 28px -8px rgba(42,87,166,.6); }
.sh-nav__cta::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.sh-nav__cta:hover::before{ transform:translateX(120%); }
.sh-nav__cta svg{ width:15px; height:15px; flex-shrink:0; }
.sh-nav__cta--block{ justify-content:center; width:100%; }

/* ---- Mobile toggle ---- */
.sh-nav__toggle{
  display:none;
  width:40px; height:40px;
  border-radius:10px;
  border:1px solid rgba(10,20,40,.10);
  background:#fff;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
  cursor:pointer; flex-shrink:0;
}
.sh-nav__toggle span{
  width:18px; height:2px; background:#0A1428; border-radius:2px;
  transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
.sh-nav__toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.sh-nav__toggle.is-open span:nth-child(2){ opacity:0; }
.sh-nav__toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ============ MOBILE PANEL ============ */
.sh-nav__mobile{
  position:fixed; inset:0; z-index:99;
  background:rgba(10,20,40,.3);
  backdrop-filter:blur(4px);
  opacity:0; pointer-events:none;
  transition:opacity .35s ease;
}
.sh-nav__mobile.is-open{ opacity:1; pointer-events:auto; }

.sh-nav__mobile-panel{
  position:absolute; top:0; right:0; height:100%;
  width:min(380px, 88vw);
  background:#ffffff;
  box-shadow:-24px 0 60px -20px rgba(10,20,40,.35);
  padding:28px 26px 32px;
  display:flex; flex-direction:column; gap:6px;
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
  overflow-y:auto;
}
.sh-nav__mobile.is-open .sh-nav__mobile-panel{ transform:translateX(0); }

/* Search sits first and is always visible on mobile too */
.sh-nav__mobile-search{
  display:flex; align-items:center; gap:10px;
  padding:0 14px;
  height:46px;
  border-radius:10px;
  border:1px solid rgba(10,20,40,.10);
  background:rgba(10,20,40,.03);
  margin-bottom:22px;
}
.sh-nav__mobile-search svg{ width:17px; height:17px; color:rgba(10,20,40,.56); flex-shrink:0; }
.sh-nav__mobile-search input{
  border:none; outline:none; background:transparent; flex:1;
  font-family:'Inter',sans-serif; font-size:14px; color:#0A1428;
}
.sh-nav__mobile-search:focus-within{
  background:#fff;
  border-color:rgba(42,87,166,.4);
  box-shadow:0 0 0 4px rgba(42,87,166,.09);
}

.sh-nav__mobile-link{
  font-family:'Fraunces',serif; font-size:23px; font-weight:600;
  color:#0A1428; text-decoration:none;
  padding:12px 4px; border-bottom:1px solid rgba(10,20,40,.10);
  opacity:0; transform:translateY(10px);
  transition:opacity .4s ease, transform .4s ease;
}
.sh-nav__mobile.is-open .sh-nav__mobile-link{ opacity:1; transform:translateY(0); }
.sh-nav__mobile.is-open .sh-nav__mobile-link:nth-child(2){ transition-delay:.08s; }
.sh-nav__mobile.is-open .sh-nav__mobile-link:nth-child(3){ transition-delay:.14s; }
.sh-nav__mobile.is-open .sh-nav__mobile-link:nth-child(4){ transition-delay:.2s; }
.sh-nav__mobile.is-open .sh-nav__mobile-link:nth-child(5){ transition-delay:.26s; }

.sh-nav__mobile-social{ display:flex; gap:8px; margin:20px 0 22px; }
.sh-nav__mobile-social a{
  width:38px; height:38px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(10,20,40,.10);
  color:rgba(10,20,40,.56);
  transition:color .25s ease, background .25s ease, border-color .25s ease;
}
.sh-nav__mobile-social a svg{ width:16px; height:16px; }
.sh-nav__mobile-social a:hover{ color:#fff; border-color:transparent; }
.sh-nav__mobile-social a.sh-whatsapp:hover{ background:linear-gradient(135deg,#25D366,#128C4A); }
.sh-nav__mobile-social a.sh-instagram:hover{ background:linear-gradient(135deg, #F6821E, #C1338D, #2A57A6); }
.sh-nav__mobile-social a.sh-facebook:hover{ background:linear-gradient(135deg, #2A57A6, #132E5C); }

.sh-nav__mobile-foot{ margin-top:auto; }

/* ============ RESPONSIVE ============
   Desktop nav (tabs + search + CTA) stays visible through tablet sizes;
   only true phone widths collapse to the hamburger menu.
============================================================== */

@media (max-width: 1180px){
  .sh-nav__social{ display:none; }
  .sh-nav__divider{ display:none; }
}

@media (max-width: 900px){
  .sh-nav__search{ width:170px; }
  .sh-nav__tab{ padding:9px 14px; }
  .sh-nav__inner{ gap:14px; }
}

@media (max-width: 680px){
  .sh-nav__tabs,
  .sh-nav__search{ display:none; }
  .sh-nav__toggle{ display:flex; }
}

@media (max-width: 480px){
  .sh-nav__inner{ padding:12px 18px; }
  .sh-nav.is-scrolled .sh-nav__inner{ padding:9px 18px; }
  .sh-nav__logo{ height:28px; }
  .sh-nav__cta span{ display:none; }
  .sh-nav__cta{ padding:11px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}


/* ================= HERO IMAGE SLIDER ================= */
.hero{
  position:relative; overflow:hidden;
  height:92vh; min-height:600px; max-height:760px;
}
.hero-slides{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity 1.2s var(--ease), visibility 0s linear 1.2s;
}
.hero-slide.is-active{ opacity:1; visibility:visible; transition:opacity 1.2s var(--ease); }
.hero-slide svg{ width:100%; height:100%; display:block; }
.hero-slide img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(100deg, rgba(20,15,12,0.86) 0%, rgba(20,15,12,0.6) 34%, rgba(20,15,12,0.18) 60%, rgba(20,15,12,0.05) 78%);
}
.hero-scrim::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,15,12,0.5) 0%, transparent 30%);
}
.hero-overlay{
  position:relative; z-index:2; height:100%; display:flex; align-items:center;
  max-width:var(--container); margin:0 auto; padding:0 32px;
}
.hero-overlay-inner{ max-width:600px; }
.eyebrow-pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:0.78rem; letter-spacing:0.06em;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.35); color:#FFD9B8;
  padding:8px 16px; border-radius:100px; backdrop-filter:blur(6px);
}
.pulse-dot{ width:7px; height:7px; border-radius:50%; background:var(--orange); position:relative; }
.pulse-dot::after{
  content:''; position:absolute; inset:-4px; border-radius:50%; border:1.5px solid var(--orange);
  animation:pulseRing 2s var(--ease) infinite;
}
@keyframes pulseRing{ 0%{ transform:scale(0.6); opacity:1;} 100%{ transform:scale(2.2); opacity:0;} }

.hero-title{ font-size:clamp(2.6rem,5vw,3.9rem); font-weight:600; letter-spacing:-0.01em; line-height:1.08; margin:22px 0 20px; color:#fff; }
.hero-sub{ font-size:1.1rem; color:rgba(255,255,255,0.82); max-width:520px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.hero-trust{ margin-top:44px; }
.hero-trust-icons{ display:flex; gap:12px; }
.mini-arch{
  width:40px; height:40px; border-radius:50% 50% 8px 8px;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.3);
  display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.85);
  transition:transform .3s var(--ease), background .3s var(--ease); backdrop-filter:blur(6px);
}
.mini-arch:hover{ transform:translateY(-4px); background:rgba(255,255,255,0.2); }
.hero-trust-label{ margin-top:14px; font-size:0.86rem; color:rgba(255,255,255,0.6); font-family:var(--font-mono); letter-spacing:0.02em; }

/* slider controls */
.hero-controls{ position:absolute; z-index:3; left:0; right:0; bottom:28px; display:flex; align-items:center; justify-content:center; gap:22px; }
.hero-dots{ display:flex; gap:9px; }
.hero-dot{
  width:8px; height:8px; padding:0; border-radius:100px; background:rgba(255,255,255,0.4); border:none;
  cursor:pointer; transition:all .35s var(--ease);
}
.hero-dot.is-active{ width:28px; background:#fff; }
.hero-arrows{ position:absolute; z-index:3; top:50%; left:0; right:0; transform:translateY(-50%); display:flex; justify-content:space-between; padding:0 20px; pointer-events:none; }
.hero-arrow-btn{
  pointer-events:auto; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,0.35);
  background:rgba(20,15,12,0.3); color:#fff; display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(6px); transition:background .25s var(--ease);
}
.hero-arrow-btn:hover{ background:rgba(20,15,12,0.55); }
.hero-slide-label{
  position:absolute; z-index:3; right:32px; bottom:32px; text-align:right;
  font-family:var(--font-mono); font-size:0.78rem; color:rgba(255,255,255,0.75); letter-spacing:0.04em;
}
.hero-slide-label span{ display:block; color:#fff; font-size:0.9rem; font-weight:500; margin-top:2px; }

/* ================= TRUST BAR ================= */
.trust-bar{
    width: 100%;
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(16,27,61,0.09), 0 8px 20px -14px rgba(16,27,61,0.15);
    font-family: 'Segoe UI', ui-sans-serif, system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  }

  .trust-bar-top-line{
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #7C2D12 0%, #F97316 45%, #2563EB 100%);
  }

  .trust-bar-inner{
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    padding: 6px clamp(16px, 4vw, 40px);
  }

  .trust-item{
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px clamp(14px, 2.2vw, 26px);
    color: #101B3D;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .1px;
    white-space: nowrap;
    border-left: 2px solid rgba(61, 38, 16, 0.09);
    transition: background .28s ease;
  }
  .trust-item:first-child{ border-left: none; }

  .trust-item .icon-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 50%;
    transition: box-shadow .3s ease, transform .3s ease, background .3s ease;
  }

  .trust-item .icon{
    width: 17px;
    height: 17px;
    fill: none;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .3s ease;
  }

  /* blue accent items */
  .trust-item.accent-blue .icon-badge{
    background: rgba(37,99,235,0.10);
    box-shadow: inset 0 0 0 1px rgba(37,99,235,0.22);
  }
  .trust-item.accent-blue .icon{ stroke: #2563EB; }
  .trust-item.accent-blue:hover,
  .trust-item.accent-blue:focus-within{ background: rgba(37,99,235,0.10); }
  .trust-item.accent-blue:hover .icon-badge,
  .trust-item.accent-blue:focus-within .icon-badge{
    background: #2563EB;
    box-shadow: 0 0 0 7px rgba(37,99,235,0.10), 0 8px 16px -6px rgba(37,99,235,0.25);
    transform: scale(1.07);
  }
  .trust-item.accent-blue:hover .icon,
  .trust-item.accent-blue:focus-within .icon{ stroke: #ffffff; }

  /* orange accent items */
  .trust-item.accent-orange .icon-badge{
    background: rgba(249,115,22,0.12);
    box-shadow: inset 0 0 0 1px rgba(249,115,22,0.25);
  }
  .trust-item.accent-orange .icon{ stroke: #F97316; }
  .trust-item.accent-orange:hover,
  .trust-item.accent-orange:focus-within{ background: rgba(249,115,22,0.12); }
  .trust-item.accent-orange:hover .icon-badge,
  .trust-item.accent-orange:focus-within .icon-badge{
    background: #F97316;
    box-shadow: 0 0 0 7px rgba(249,115,22,0.12), 0 8px 16px -6px rgba(249,115,22,0.28);
    transform: scale(1.07);
  }
  .trust-item.accent-orange:hover .icon,
  .trust-item.accent-orange:focus-within .icon{ stroke: #ffffff; }

  /* brown accent items */
  .trust-item.accent-brown .icon-badge{
    background: rgba(124,45,18,0.10);
    box-shadow: inset 0 0 0 1px rgba(124,45,18,0.22);
  }
  .trust-item.accent-brown .icon{ stroke: #7C2D12; }
  .trust-item.accent-brown:hover,
  .trust-item.accent-brown:focus-within{ background: rgba(124,45,18,0.10); }
  .trust-item.accent-brown:hover .icon-badge,
  .trust-item.accent-brown:focus-within .icon-badge{
    background: #7C2D12;
    box-shadow: 0 0 0 7px rgba(124,45,18,0.10), 0 8px 16px -6px rgba(124,45,18,0.25);
    transform: scale(1.07);
  }
  .trust-item.accent-brown:hover .icon,
  .trust-item.accent-brown:focus-within .icon{ stroke: #ffffff; }

  .trust-item:focus-visible{ outline: 2px solid #2563EB; outline-offset: -2px; }

  /* ===== responsive ===== */

  @media (min-width: 1400px){
    .trust-item{ padding-top: 24px; padding-bottom: 24px; }
  }

  /* tablet: wraps to two per row, no cropping */
  @media (max-width: 980px){
    .trust-bar-inner{ justify-content: center; }
    .trust-item{
      flex: 1 1 44%;
      justify-content: center;
      border-left: none;
      border-bottom: 1px solid rgba(16,27,61,0.09);
    }
    .trust-item:nth-child(odd){ border-right: 1px solid rgba(16,27,61,0.09); }
    .trust-item:nth-last-child(1):nth-child(odd){ border-right: none; }
  }

  /* mobile: one item per row, stacked top to bottom */
  @media (max-width: 640px){
    .trust-bar-inner{ flex-direction: column; padding: 4px 18px; }
    .trust-item{
      width: 100%;
      flex: 1 1 auto;
      justify-content: flex-start;
      padding: 16px 4px;
      border: none !important;
      border-bottom: 1px solid rgba(16,27,61,0.09) !important;
      white-space: normal;
      font-size: 14px;
    }
    .trust-item:last-child{ border-bottom: none !important; }
    .trust-item .icon-badge{ width: 34px; height: 34px; }
    .trust-item .icon{ width: 16px; height: 16px; }
  }

  @media (prefers-reduced-motion: reduce){
    .trust-item{ transition: none; }
  }
/* ================= HOW IT WORKS ================= */
.shx-how{
  position:relative;
  padding:100px 32px 120px;
  background:
    radial-gradient(700px 360px at 12% 0%, rgba(246,130,30,.07), transparent 60%),
    radial-gradient(700px 360px at 88% 100%, rgba(42,87,166,.07), transparent 60%),
    #FBF7F1;
  overflow:hidden;
}

.shx-how__inner{ max-width:1360px; margin:0 auto; }

/* ---- Header ---- */
.shx-how__head{ max-width:640px; margin:0 auto 100px; text-align:center; }

.shx-how__eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#D9660A; margin-bottom:18px;
}
.shx-how__eyebrow-dot{
  width:7px; height:7px; border-radius:50%; background:#F6821E;
  box-shadow:0 0 0 0 rgba(246,130,30,.5);
  animation:shx-how-pulse-dot 1.8s infinite;
}
@keyframes shx-how-pulse-dot{
  0%{ box-shadow:0 0 0 0 rgba(246,130,30,.45); }
  70%{ box-shadow:0 0 0 7px rgba(246,130,30,0); }
  100%{ box-shadow:0 0 0 0 rgba(246,130,30,0); }
}

.shx-how__title{
  font-family:'Fraunces',serif; font-weight:600;
  font-size:clamp(28px, 3.4vw, 42px); line-height:1.16; letter-spacing:-.01em;
  color:#0A1428; margin:0 0 14px;
}
.shx-how__lede{ font-size:15.5px; line-height:1.7; color:rgba(10,20,40,.58); margin:0; }

/* ---- Rail ---- */
.shx-how__rail{ position:relative; }

/* the curved line sits behind the icons, sweeping through each one's actual center */
.shx-how__midline{
  position:absolute;
  display:block;
  top:0;
  left:12.5%;
  width:75%;
  height:110px;
  z-index:0;
  overflow:visible;
}

.shx-how__nodes{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}

.shx-how__node{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.shx-how__node.is-low{ transform:translateY(52px); }
.shx-how__node.is-high{ transform:translateY(0); }

.shx-how__icon-wrap{
  position:relative;
  margin-bottom:22px;
}

/* vertical stub connecting each icon to the shared midline —
   fixed length (26px) works for every viewport since the stagger is fixed */
.shx-how__stub{
  display:none;
}

.shx-how__icon{
  position:relative;
  width:58px; height:58px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  border:2px solid rgba(10,20,40,.10);
  color:#2A57A6;
  box-shadow:0 14px 30px -14px rgba(10,20,40,.32);
  transition:background .4s ease, border-color .4s ease, color .4s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.shx-how__icon svg{ width:23px; height:23px; }

/* ---- Card ---- */
.shx-how__card{
  position:relative;
  width:100%;
  background:#fff;
  border:1px solid rgba(10,20,40,.08);
  border-radius:18px;
  padding:24px 22px 24px;
  box-shadow:0 20px 40px -26px rgba(10,20,40,.22);
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1), border-color .4s ease;
}

/* small, clean corner badge instead of an oversized overlapping numeral */
.shx-how__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;
  height:26px;
  padding:0 8px;
  margin-bottom:12px;
  border-radius:999px;
  background:linear-gradient(135deg, #F6821E, #2A57A6);
  color:#fff;
  font-family:'Inter',sans-serif;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.02em;
}

.shx-how__node-title{
  font-family:'Inter',sans-serif;
  font-size:16px; font-weight:700; color:#0A1428;
  margin:0 0 8px;
}
.shx-how__node-text{
  font-size:13.5px; line-height:1.6; color:rgba(10,20,40,.56); margin:0;
}

/* ---- Hover ---- */
.shx-how__node:hover .shx-how__icon{
  background:linear-gradient(135deg, #F6821E, #2A57A6);
  border-color:transparent;
  color:#fff;
  transform:scale(1.08);
}
.shx-how__node:hover .shx-how__card{
  transform:translateY(-8px);
  box-shadow:0 30px 56px -24px rgba(10,20,40,.3);
  border-color:rgba(42,87,166,.25);
}
.shx-how__node:hover .shx-how__num{
  transform:scale(1.06);
}

/* ============ RESPONSIVE ============
   Below 900px: staircase collapses into a simple vertical timeline
============================================================== */
@media (max-width: 900px){
  .shx-how__midline{ display:none; }
  .shx-how__stub{ display:none; }

  .shx-how__nodes{
    grid-template-columns:1fr;
    gap:0;
    position:relative;
    padding-left:30px;
  }
  .shx-how__nodes::before{
    content:"";
    position:absolute;
    left:5px; top:10px; bottom:10px;
    width:2px;
    background:linear-gradient(180deg, #F6821E, #2A57A6);
    border-radius:2px;
    opacity:.5;
  }

  .shx-how__node{
    flex-direction:row;
    align-items:flex-start;
    text-align:left;
    gap:18px;
    transform:none !important;
    margin-bottom:24px;
    position:relative;
  }
  .shx-how__node:last-child{ margin-bottom:0; }

  .shx-how__node::before{
    content:"";
    position:absolute;
    left:-30px; top:8px;
    width:12px; height:12px;
    border-radius:50%;
    background:#fff;
    border:2.5px solid #2A57A6;
    box-shadow:0 0 0 4px rgba(42,87,166,.12);
  }

  .shx-how__icon-wrap{ margin-bottom:0; flex-shrink:0; }
}

@media (max-width: 560px){
  .shx-how{ padding:72px 20px 84px; }
  .shx-how__head{ margin-bottom:56px; text-align:left; }
  .shx-how__icon{ width:50px; height:50px; }
  .shx-how__icon svg{ width:20px; height:20px; }
  .shx-how__card{ padding:20px 18px 20px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ================= ABOUT ================= */
.about-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; }
.about-copy p{ color:var(--ink-soft); margin-bottom:18px; font-size:1.03rem; }
.about-lead-media{ margin-top:26px; border-radius:50% 50% var(--radius-sm) var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-sm); }
.about-lead-media img{ width:100%; height:260px; object-fit:cover; display:block; }
.pillar-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.pillar-chip{
  display:inline-flex; align-items:center; gap:8px; font-size:0.88rem; font-weight:500;
  background:#fff; border:1px solid var(--line-strong); padding:10px 16px; border-radius:100px; color:var(--ink);
}
.pillar-chip .icon{ color:var(--orange); width:1em; height:1em; }

/* ================= SERVICE CARDS ================= */
.service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.service-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-md);
  padding:34px 28px; transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.service-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; }
.service-icon{
  width:56px; height:56px; border-radius:50% 50% 10px 10px;
  display:flex; align-items:center; justify-content:center; margin-bottom:22px;
}
.service-icon .icon{ width:26px; height:26px; }
.svc-orange{ background:var(--orange-tint); color:var(--orange-deep); }
.svc-blue{ background:var(--blue-tint); color:var(--blue-deep); }
.service-card h3{ font-size:1.22rem; margin-bottom:10px; }
.service-card p{ color:var(--ink-soft); font-size:0.95rem; margin-bottom:20px; }
.learn-more{ display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:0.9rem; color:var(--blue); }
.learn-more .icon{ width:1em; height:1em; transition:transform .25s var(--ease); }
.learn-more:hover .icon{ transform:translateX(4px); }

/* ================= WHY CHOOSE (media + row list) ================= */
.why-grid{ display:grid; grid-template-columns:0.86fr 1.14fr; gap:60px; align-items:center; }
.why-media{ position:relative; }
.why-media-frame{ border-radius:var(--radius-lg); overflow:hidden;}
.why-media-frame img{ width:100%; height:540px; object-fit:cover; display:block; }
/* ===========================
   Floating Premium Badge Card
=========================== */
.why-badge{
    position: relative;
    z-index: 5;

    margin-top: 26px;
    padding: 18px 22px;

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

    background: #ffffff;
    border-radius: 20px;

    /* Premium floating effect */
    border: 2px solid rgba(15,23,42,.06);

    

    overflow: hidden;

    transition: all .35s ease;
}

/* Small highlight on top */
.why-badge::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.95),
        transparent
    );
}

/* Soft bottom glow */
.why-badge::after{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    bottom:-16px;
    height:26px;

    background:rgba(15,23,42,.08);
    filter:blur(18px);
    border-radius:50%;
    z-index:-1;
}

/* Hover */
.why-badge:hover{
    transform:translateY(-4px);
    border-radius:24px;
color:red;
    
}
.why-badge-icon{
  width:44px; height:44px; border-radius:12px; background:var(--orange-tint); color:var(--orange-deep);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.why-badge-icon .icon{ width: 32px; height:32px; }
.why-badge strong{ display:block; font-family:var(--font-display); font-size:0.98rem; color:var(--ink); }
.why-badge span{ display:block; font-size:0.82rem; color:var(--ink-soft); margin-top:2px; }

.why-list{ display:flex; flex-direction:column; }
.why-row{ display:flex; align-items:flex-start; gap:16px; padding:19px 0; border-bottom:1px solid var(--line); }
.why-row:first-child{ padding-top:0; }
.why-row:last-child{ border-bottom:none; padding-bottom:0; }
.why-row-icon{
  width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.why-row-icon .icon{ width:22px; height:22px; }
.why-row:nth-child(odd) .why-row-icon{ background:var(--orange-tint); color:var(--orange-deep); }
.why-row:nth-child(even) .why-row-icon{ background:var(--blue-tint); color:var(--blue-deep); }
.why-row h4{ font-size:1.02rem; margin-bottom:4px; }
.why-row p{ font-size:0.9rem; color:var(--ink-soft); }

/* ================= ECOSYSTEM ================= */
.ecosystem-diagram{ display:flex; justify-content:center; }
.ecosystem-svg{ width:100%; max-width:600px; height:auto; }
.eco-node{ fill:#fff; stroke-width:1.5; }
.eco-node-orange{ stroke:var(--orange); }
.eco-node-blue{ stroke:var(--blue); }
.eco-label{ font-family:var(--font-mono); font-size:11px; fill:var(--ink-soft); letter-spacing:0.02em; }
.eco-lines-pulse{ animation:ecoDash 20s linear infinite; opacity:0.7; }
@keyframes ecoDash{ to{ stroke-dashoffset:-400; } }
.ecosystem-svg g[transform]:not(:first-child) { transition:transform .3s var(--ease); }

/* ================= PLATFORM FEATURES (premium bento) ================= */

/* ================= NOTIFY FORM (used in Download App section) ================= */
.notify-form{ display:flex; gap:10px; max-width:420px; margin:36px auto 0; flex-wrap:wrap; justify-content:center; }
.notify-form input{
  flex:1; min-width:220px; padding:14px 18px; border-radius:100px; border:1.5px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.08); color:#fff;
}
.notify-form input::placeholder{ color:rgba(255,255,255,0.5); }
.download-copy .notify-form{ margin:24px 0 0; justify-content:flex-start; }
.download-copy .notify-form input{
  border:1.5px solid var(--line-strong); background:#fff; color:var(--ink);
}
.download-copy .notify-form input::placeholder{ color:var(--ink-faint); }
.notify-message{ color:#BFE3C8; font-size:0.9rem; margin-top:14px; min-height:1.2em; }
.download-copy .notify-message{ color:var(--blue-deep); }

/* ================= AUDIENCE ================= */
.shx-aud{
  padding:90px 32px;
  background:white;
}

.shx-aud__inner{ max-width:1360px; margin:0 auto; }

/* ---- Header row ---- */
.shx-aud__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:28px;
  margin-bottom:44px;
  flex-wrap:wrap;
}

.shx-aud__pill{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:13px;
  font-weight:650;
  color:#0A1428;
  margin-bottom:16px;
}

.shx-aud__pill-track{
  position:relative;
  width:30px; height:16px;
  border-radius:999px;
  background:linear-gradient(135deg, #F6821E, #2A57A6);
  flex-shrink:0;
}
.shx-aud__pill-knob{
  position:absolute;
  top:2px; right:2px;
  width:12px; height:12px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.25);
}

.shx-aud__title{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:clamp(28px, 3.2vw, 40px);
  line-height:1.18;
  letter-spacing:-.01em;
  color:#0A1428;
  margin:0;
  max-width:640px;
}

.shx-aud__cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 22px;
  border-radius:999px;
  background:linear-gradient(135deg, #F8791E, #3374C3);
  color:#fff;
  font-size:13.5px;
  font-weight:650;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 10px 22px -10px rgba(42,87,166,.5);
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s cubic-bezier(.22,1,.36,1);
}
.shx-aud__cta svg{ width:15px; height:15px; }
.shx-aud__cta:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(42,87,166,.6); }

/* ---- Grid ---- */
.shx-aud__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}

.shx-aud__card{
  position:relative;
  padding:28px 24px 26px;
  border-radius:20px;
  overflow:hidden;
  cursor:default;
  transition:background .4s cubic-bezier(.22,1,.36,1), border-color .4s ease, transform .35s cubic-bezier(.22,1,.36,1);
}

/* single soft-orange base card */
.shx-aud__card{
    background:linear-gradient(
        145deg,
        #ffffff 0%,
        #FFFAF5 30%,
        #FFEEDC 65%,
        #FFDFB8 100%
    );

    border:1px solid rgba(248,121,30,.16);

    box-shadow:
        0 12px 30px rgba(248,121,30,.08),
        inset 0 1px 0 rgba(255,255,255,.9);
}
.shx-aud__card-title{
  font-family:'Inter',sans-serif;
  font-size:16.5px;
  font-weight:700;
  color:#0A1428;
  margin:18px 0 8px;
  transition:color .4s ease;
}
.shx-aud__card-text{
  font-size:13.5px;
  line-height:1.55;
  color:rgba(10,20,40,.56);
  margin:0;
  transition:color .4s ease;
}

.shx-aud__card-top{ display:flex; align-items:flex-start; justify-content:space-between; }

.shx-aud__icon{
  width:44px; height:44px;
  border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(248,121,30,.14);
  color:#D9660F;
  transition:background .4s ease, color .4s ease;
}
.shx-aud__icon svg{ width:20px; height:20px; }

.shx-aud__corner{
  width:32px; height:32px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(10,20,40,.12);
  color:rgba(10,20,40,.45);
  transition:transform .4s cubic-bezier(.22,1,.36,1), background .4s ease, color .4s ease, border-color .4s ease;
}
.shx-aud__corner svg{ width:14px; height:14px; }

/* ===============================
   ALL CARDS: SINGLE SOFT-ORANGE BASE
   SOFT ORANGE -> BLUE ON HOVER
================================== */

.shx-aud__card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 60px rgba(51,116,195,.18);
}

.shx-aud__card:hover{

    background:linear-gradient(
        135deg,
        #3374C3 0%,
        #5B97E8 45%,
        #1D58A8 100%
    );

    border-color:transparent;

}

.shx-aud__card:hover .shx-aud__card-title{

    color:#fff;

}

.shx-aud__card:hover .shx-aud__card-text{

    color:rgba(255,255,255,.82);

}

.shx-aud__card:hover .shx-aud__icon{

    background:#ffffff22;
    backdrop-filter:blur(8px);
    color:#fff;

}

.shx-aud__card:hover .shx-aud__corner{

    background:#fff;
    color:#3374C3;
    border-color:#fff;

}


  /* ================= FAQ ================= */
  .pulse-faq{
    padding:100px 24px;
    background:#F4F5F9;
  }

  .pulse-inner{ max-width:820px; margin:0 auto; }

  /* ---------- TOP ---------- */
  .pulse-top{ margin-bottom:40px; }

  .pulse-eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono', monospace;
    font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
    color:#D9660A; margin-bottom:16px;
  }
  .pulse-eyebrow::before{
    content:""; width:14px; height:2px; background:#D9660A;
  }

  .pulse-title{
    font-family:'Fraunces', serif; font-optical-sizing:auto; font-weight:600;
    font-size:clamp(30px, 4vw, 42px); line-height:1.15; letter-spacing:-0.01em;
    margin:0; color:#0A1428;
  }

  /* ---------- LIST ---------- */
  .pulse-list{ display:flex; flex-direction:column; gap:14px; }

  .pulse-item{
    background:#ffffff;
    border:1px solid rgba(10,20,40,.08);
    border-radius:16px;
    box-shadow:0 2px 8px rgba(10,20,40,.04);
  }
  .pulse-item::-webkit-details-marker{ display:none; }

  .pulse-trigger{
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:22px 26px;
    -webkit-tap-highlight-color:transparent;
  }
  .pulse-trigger::marker{ content:""; }

  .pulse-question{
    font-family:'Fraunces', serif; font-weight:600;
    font-size:17px; letter-spacing:-0.01em;
    color:#0A1428;
  }

  .pulse-chevron{
    flex-shrink:0; width:18px; height:18px;
    color:rgba(10,20,40,.4);
    transition:transform .25s ease, color .25s ease;
  }
  .pulse-item[open] .pulse-chevron{ transform:rotate(180deg); color:#F97316; }

  .pulse-answer-wrap{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .3s ease;
  }
  .pulse-item[open] .pulse-answer-wrap{ grid-template-rows:1fr; }
  .pulse-answer-inner{ overflow:hidden; }

  .pulse-answer{
    margin:0;
    padding:0 26px 22px;
    font-size:14.5px; line-height:1.7;
    color:rgba(10,20,40,.6);
  }

  @media (max-width:640px){
    .pulse-faq{ padding:64px 16px; }
    .pulse-trigger{ padding:18px 18px; }
    .pulse-question{ font-size:15.5px; }
    .pulse-answer{ padding:0 18px 18px; }
  }

  @media (prefers-reduced-motion: reduce){
    .pulse-answer-wrap, .pulse-chevron{ transition:none; }
  }


  /* ---------- CTA BANNER ---------- */
  .pulse-cta{
    margin-top:28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    padding:32px 36px;
    border-radius:22px;
    background:linear-gradient(120deg, rgba(249,115,22,.09), rgba(249,115,22,.02));
    border:1px solid rgba(249,115,22,.22);
  }
  .pulse-cta h3{
    font-family:'Fraunces', serif; font-weight:600; font-size:21px;
    margin:0 0 6px; color:#0A1428;
  }
  .pulse-cta p{ margin:0; font-size:14px; color:rgba(10,20,40,.58); }
  .pulse-cta-btn{
    flex-shrink:0;
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 22px;
    background:#F97316;
    color:#ffffff;
    font-weight:700; font-size:14px;
    border-radius:12px;
    text-decoration:none;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
    box-shadow:0 14px 30px -12px rgba(249,115,22,.45);
  }
  .pulse-cta-btn:hover{ transform:translateY(-2px); background:#D9660A; box-shadow:0 18px 36px -12px rgba(249,115,22,.55); }
  .pulse-cta-btn svg{ width:16px; height:16px; }

  /* ---------- RESPONSIVE ---------- */
 /* ================= RESPONSIVE ================= */

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

@media (max-width: 640px){
  /* Audience section */
  .shx-aud{
    padding:56px 20px;
  }
  .shx-aud__head{
    align-items:flex-start;
    margin-bottom:32px;
  }
  .shx-aud__title{
    max-width:100%;
    font-size:clamp(24px, 7vw, 30px);
  }
  .shx-aud__cta{
    width:100%;
    justify-content:center;
    white-space:normal;
    text-align:center;
  }
  .shx-aud__grid{
    grid-template-columns:1fr;
    gap:14px;
  }
  .shx-aud__card{
    padding:22px 20px 20px;
  }
  .shx-aud__card:hover{
    transform:none; /* stops the lift-hover from "sticking" after a tap on touch screens */
  }
  .shx-aud__icon{
    width:40px; height:40px; border-radius:11px;
  }
  .shx-aud__icon svg{
    width:18px; height:18px;
  }
  .shx-aud__card-title{
    font-size:15.5px;
    margin:14px 0 6px;
  }
  .shx-aud__card-text{
    font-size:13px;
  }
  .shx-aud__corner{
    width:28px; height:28px;
  }
  .shx-aud__corner svg{
    width:12px; height:12px;
  }

  /* FAQ section */
  .pulse-title{
    font-size:clamp(24px, 7vw, 32px);
  }
  .pulse-top{
    margin-bottom:28px;
  }
}

@media (max-width: 380px){
  .shx-aud__grid{
    gap:10px;
  }
  .shx-aud__card{
    padding:18px 16px 16px;
  }
}

  /* ---------- CTA BANNER ---------- */
  .pulse-cta{
    margin-top:28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    padding:32px 36px;
    border-radius:22px;
    background:linear-gradient(120deg, rgba(249,115,22,.09), rgba(249,115,22,.02));
    border:1px solid rgba(249,115,22,.22);
  }
  .pulse-cta h3{
    font-family:'Fraunces', serif; font-weight:600; font-size:21px;
    margin:0 0 6px; color:#0A1428;
  }
  .pulse-cta p{ margin:0; font-size:14px; color:rgba(10,20,40,.58); }
  .pulse-cta-btn{
    flex-shrink:0;
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 22px;
    background:#F97316;
    color:#ffffff;
    font-weight:700; font-size:14px;
    border-radius:12px;
    text-decoration:none;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
    box-shadow:0 14px 30px -12px rgba(249,115,22,.45);
  }
  .pulse-cta-btn:hover{ transform:translateY(-2px); background:#D9660A; box-shadow:0 18px 36px -12px rgba(249,115,22,.55); }
  .pulse-cta-btn svg{ width:16px; height:16px; }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:640px){
    .pulse-faq{ padding:80px 16px; }
    .pulse-top{ flex-direction:column; align-items:flex-start; }
    .pulse-rail{ left:26px; }
    .pulse-node{ left:21px; }
    .pulse-trigger{ padding:19px 18px 19px 52px; gap:10px; }
    .pulse-item:not(:first-of-type) .pulse-trigger::after{ left:52px; right:18px; }
    .pulse-question{ font-size:15.5px; }
    .pulse-sig{ min-width:0; display:none; }
    .pulse-answer{ padding:0 18px 22px 52px; }
    .pulse-answer-inner::before{ left:27px; }
    .pulse-cta{ flex-direction:column; align-items:flex-start; padding:26px; }
  }

  @media (prefers-reduced-motion: reduce){
    .pulse-rail, .status-dot{ animation:none; }
    .pulse-answer-wrap, .pulse-chevron, .pulse-node{ transition:none; }
  }

/* ================= CONTACT ================= */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.social-row{ display:flex; gap:12px; }
.social-icon{
  width:42px; height:42px; border-radius:30%; border:none;
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:all .25s var(--ease); flex-shrink:0;
}
.social-icon .icon{ width:22px; height:22px; }
.social-icon:hover{ transform:translateY(-3px); filter:brightness(1.08); box-shadow:0 10px 22px rgba(0,0,0,.22); }

.social-whatsapp{ background:linear-gradient(135deg, #5BD066 0%, #1FAF38 100%); }
.social-whatsapp .icon{ fill:currentColor; stroke:none; }

.social-instagram{
  background:linear-gradient(135deg, #4f5bd5 0%, #962fbf 30%, #d62976 55%, #fa7e1e 80%, #feda75 100%);
}

.social-facebook{ background:linear-gradient(135deg, #6482D0 0%, #3B5998 100%); }
.social-facebook .icon{ fill:currentColor; stroke:none; }

.contact-form{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:36px; }
.form-row{ margin-bottom:18px; display:flex; flex-direction:column; gap:8px; }
.form-row label{ font-size:0.86rem; font-weight:600; color:var(--ink); }
.form-row input, .form-row textarea{
  padding:13px 16px; border-radius:10px; border:1.5px solid var(--line-strong); background:#fff; resize:vertical;
  transition:border-color .2s var(--ease);
}
.form-row input:focus, .form-row textarea:focus{ border-color:var(--blue); outline:none; }
.form-message{ margin-top:14px; font-size:0.9rem; color:var(--blue-deep); min-height:1.2em; }








/* ================= FOOTER ================= */
.site-footer{ background:linear-gradient(160deg, #14213B 0%, #10192B 55%, #0B1120 100%); color:rgba(255,255,255,0.72); padding:72px 0 0; }
.footer-inner{
  max-width:var(--container); margin:0 auto; padding:0 32px 56px;
  display:grid; grid-template-columns:1.5fr 0.85fr 0.95fr 0.95fr 1fr; gap:32px;
}
.footer-brand .brand-word{ color:#fff; }
.footer-brand .brand-arch{ stroke:var(--orange); }
.footer-brand p{ margin-top:16px; font-size:0.92rem; line-height:1.7; color:rgba(255,255,255,0.55); max-width:280px; }
.footer-col{ display:flex; flex-direction:column; gap:12px; }
.footer-col h5{ color:#fff; font-size:0.86rem; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:6px; font-family:var(--font-mono); font-weight:500; }
.footer-col a, .footer-col span{ font-size:0.92rem; color:rgba(255,255,255,0.6); transition:color .2s var(--ease); }
.footer-col a:hover{ color:var(--orange); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1); padding:24px 32px; max-width:var(--container); margin:0 auto;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-size:0.84rem; color:rgba(255,255,255,0.45);
}
.footer-legal{ display:flex; gap:22px; }
.footer-legal a:hover{ color:#fff; }

/* ================= BACK TO TOP ================= */
.back-to-top{
  position:fixed; bottom:28px; right:28px; z-index:90;
  width:50px; height:50px; border-radius:50%; border:none;
  background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md); opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all .3s var(--ease);
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--blue); }

/* ==========================================================================
   PAGE HERO (interior pages: About, Services, Contact, Legal, etc.)
   ========================================================================== */
.page-hero{
  padding:calc(var(--header-h) + 56px) 0 64px;
  position:relative; overflow:hidden;
  background:var(--bg-warm);
}
.page-hero::before{
  content:''; position:absolute; top:-120px; right:-120px; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(36,84,255,0.12), transparent 65%);
}
.page-hero::after{
  content:''; position:absolute; bottom:-160px; left:-100px; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,106,61,0.12), transparent 65%);
}
.page-hero-inner{ position:relative; max-width:var(--container); margin:0 auto; padding:0 32px; }
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:0.86rem; color:var(--ink-faint); margin-bottom:22px; font-family:var(--font-mono); }
.breadcrumb a{ color:var(--ink-soft); transition:color .2s var(--ease); }
.breadcrumb a:hover{ color:var(--orange-deep); }
.page-hero-title{ font-size:clamp(2.1rem,4.2vw,3.1rem); line-height:1.12; max-width:760px; }
.page-hero-lede{ margin-top:18px; font-size:1.1rem; color:var(--ink-soft); max-width:620px; }

/* ================= CTA BANNER (reusable) ================= */
.cta-banner{
  background:linear-gradient(160deg, #14213B 0%, #10192B 55%, #0B1120 100%);
  border-radius:64px 64px var(--radius-lg) var(--radius-lg); padding:64px 56px; text-align:center; position:relative; overflow:hidden;
}
.cta-banner::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 15% 20%, rgba(255,106,61,0.22), transparent 45%),
             radial-gradient(circle at 85% 80%, rgba(36,84,255,0.3), transparent 50%);
}
.cta-banner-inner{ position:relative; max-width:600px; margin:0 auto; }
.cta-banner h2{ color:#fff; font-size:clamp(1.7rem,3vw,2.3rem); line-height:1.2; }
.cta-banner p{ color:rgba(255,255,255,0.75); margin-top:14px; font-size:1.03rem; }
.cta-banner-actions{ display:flex; gap:14px; justify-content:center; margin-top:30px; flex-wrap:wrap; }

/* ================= VALUES GRID ================= */
.values-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.value-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:30px 26px;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.value-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.value-icon{
  width:52px; height:52px; border-radius:50% 50% 10px 10px; display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.value-icon .icon{ width:24px; height:24px; }
.value-card h4{ font-size:1.08rem; margin-bottom:8px; }
.value-card p{ font-size:0.92rem; color:var(--ink-soft); }


/* ================ Mission & Vision ================= */

 /* Section Canvas */
  .shldr-section {
    position: relative;
    padding:  24px;
    background-color: var(--bg-white);
    background-image: 
      radial-gradient(ellipse 60% 40% at 20% 10%, var(--brand-orange-glow), transparent 70%),
      radial-gradient(ellipse 60% 40% at 80% 90%, var(--brand-blue-glow), transparent 70%),
      linear-gradient(to right, rgba(226, 232, 240, 0.3) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(226, 232, 240, 0.3) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 36px 36px, 36px 36px;
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }

  /* Header Section */
  .section-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto clamp(48px, 7vw, 80px);
  }

  .brand-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    background: var(--bg-subtle);
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
  }

  .badge-tag-orange {
    background: var(--brand-orange);
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: 0.05em;
  }

  .badge-tag-blue {
    background: var(--brand-blue);
    color: #FFFFFF;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: 0.05em;
  }

  .badge-text {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 0 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .section-title {
    font-family: var(--font-heading);
    font-size: clamp(34px, 5vw, 56px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
  }

  .title-shl {
    color: var(--brand-orange);
  }

  .title-dr {
    color: var(--brand-blue);
  }

  /* Cards Grid */
  .cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: stretch;
  }

  .card {
    background: #FFFFFF;
    border-radius: 28px;
    padding: clamp(32px, 4vw, 48px);
    position: relative;
    border: 2px solid #F1F5F9;
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.05);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(40px);
  }

  .card.in-view {
    opacity: 1;
    transform: translateY(0);
  }

  /* Vision Card Styling (Orange Accent) */
  .card-vision {
    border-top: 6px solid var(--brand-orange);
  }

  .card-vision:hover {
    border-color: var(--brand-orange);
    box-shadow: 0 20px 40px -15px var(--brand-orange-glow), 0 0 0 1px var(--brand-orange-border);
    transform: translateY(-8px);
  }

  /* Mission Card Styling (Blue Accent) */
  .card-mission {
    border-top: 6px solid var(--brand-blue);
  }

  .card-mission:hover {
    border-color: var(--brand-blue);
    box-shadow: 0 20px 40px -15px var(--brand-blue-glow), 0 0 0 1px var(--brand-blue-border);
    transform: translateY(-8px);
  }

  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
  }

  .card-icon-box {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
  }

  .card-vision .card-icon-box {
    background: var(--brand-orange-light);
    color: var(--brand-orange);
  }

  .card-mission .card-icon-box {
    background: var(--brand-blue-light);
    color: var(--brand-blue);
  }

  .card:hover .card-icon-box {
    transform: scale(1.1) rotate(-3deg);
  }

  .card-pill {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 12px;
  }

  .card-vision .card-pill {
    background: var(--brand-orange-light);
    color: var(--brand-orange);
  }

  .card-mission .card-pill {
    background: var(--brand-blue-light);
    color: var(--brand-blue);
  }

  .card h3 {
    font-family: var(--font-heading);
    font-size: clamp(26px, 2.8vw, 34px);
    font-weight: 700;
    margin: 0 0 16px 0;
    color: var(--text-primary);
    letter-spacing: -0.01em;
  }

  .card p {
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.75;
    color: var(--text-secondary);
    margin: 0;
    font-weight: 450;
  }

  .card-footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .footer-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
  }

  .card-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }

  .card-vision .card-indicator { background: var(--brand-orange); }
  .card-mission .card-indicator { background: var(--brand-blue); }

  /* Responsive Adjustments */
  @media (max-width: 868px) {
    .cards-grid {
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .shldr-section {
      padding: 60px 20px;
    }

    .card {
      padding: 30px;
    }
  }

    :root {
    /* Brand Colors extracted from SHLDR Logo */
    --brand-orange: #FF6600;
    --brand-orange-light: #FFF2E8;
    --brand-orange-border: rgba(255, 102, 0, 0.25);
    --brand-orange-glow: rgba(255, 102, 0, 0.12);

    --brand-blue: #2B78E4;
    --brand-blue-light: #EEF5FF;
    --brand-blue-border: rgba(43, 120, 228, 0.25);
    --brand-blue-glow: rgba(43, 120, 228, 0.12);

    /* Clean White Theme Variables */
    --bg-white: #FFFFFF;
    --bg-subtle: #F8FAFC;
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #94A3B8;

    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Plus Jakarta Sans', sans-serif;
  }


/* ================= FUTURE GOALS / TIMELINE ================= */
.goals-timeline{ display:flex; flex-direction:column; gap:0; max-width:760px; margin:0 auto; }
.goal-item{ display:grid; grid-template-columns:56px 1fr; gap:24px; padding-bottom:40px; position:relative; }
.goal-item:last-child{ padding-bottom:0; }
.goal-marker{
  width:56px; height:56px; border-radius:50%; background:#fff; border:1.5px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; color:var(--orange-deep); position:relative; z-index:1; flex-shrink:0;
}
.goal-item:not(:last-child)::before{
  content:''; position:absolute; left:27px; top:56px; bottom:0; width:1.5px; background:var(--line-strong);
}
.goal-content h4{ font-size:1.08rem; margin-bottom:6px; padding-top:12px; }
.goal-content p{ font-size:0.95rem; color:var(--ink-soft); }

/* ================= ECOSYSTEM (compact, for About page) ================= */
.ecosystem-compact{ display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap; }
.eco-compact-node{
  display:flex; flex-direction:column; align-items:center; gap:10px; width:110px; text-align:center;
}
.eco-compact-icon{
  width:56px; height:56px; border-radius:50% 50% 10px 10px; display:flex; align-items:center; justify-content:center;
}
.eco-compact-icon .icon{ width:24px; height:24px; }
.eco-compact-label{ font-size:0.82rem; color:var(--ink-soft); font-weight:500; }
.eco-compact-connector{ width:36px; height:1.5px; background:var(--line-strong); margin-top:-30px; flex-shrink:0; }
.eco-compact-core{
  width:88px; height:88px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:0.95rem; flex-shrink:0; margin-top:-30px;
}

/* ================= SERVICES PAGE — DETAIL CARD ================= */
.services-list{ display:flex; flex-direction:column; gap:28px; }
.service-detail-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  scroll-margin-top:100px; overflow:hidden;
}

/* ---- Chapter 1: full-width hero image ---- */
.svcd-hero{ width:100%; aspect-ratio:21/9; position:relative; }
.svcd-hero .status{
  position:absolute; top:18px; right:18px; z-index:1;
  background:rgba(255,255,255,0.92); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:var(--shadow-sm);
  padding:11px 20px; font-size:14px; gap:9px;
}
.svcd-hero .status::before{ width:9px; height:9px; }
.svcd-hero .status.live{ color:#15803D; }
.svcd-hero .status.soon{ color:#EA580C; }
.svcd-hero img{ width:100%; height:100%; object-fit:cover; object-position:center 5%; display:block; }

.svcd-body{ padding:36px 40px 40px; }
.svcd-head{ display:flex; align-items:center; gap:20px; margin-bottom:22px; flex-wrap:wrap; }
.svcd-icon{
  width:56px; height:56px; border-radius:50% 50% 12px 12px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.svcd-icon .icon{ width:26px; height:26px; }
.svcd-head h2{ font-size:1.4rem; }
.svcd-tagline{ font-size:0.92rem; color:var(--ink-faint); margin-top:4px; }
.svcd-desc{ font-size:1rem; color:var(--ink-soft); margin-bottom:28px; }

.svcd-features h5, .svcd-benefits-text h5{
  font-family:var(--font-mono); font-size:0.76rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:14px;
}
/* Key Features sits in a full-width row with nothing beside it, so a
   single column of short one-line bullets leaves a dead zone on the
   right — real multi-column text is the fix, not more padding. */
.svcd-features ul{ columns:2; column-gap:32px; }
.svcd-features li{ break-inside:avoid; margin-bottom:14px; }
.svcd-benefits-text ul{ display:flex; flex-direction:column; gap:12px; }
.svcd-benefits-text li{ margin-bottom:0; }
.svcd-features li, .svcd-benefits-text li{ display:flex; align-items:flex-start; gap:10px; font-size:0.96rem; }
.svcd-features li .icon, .svcd-benefits-text li .icon{ width:1.1em; height:1.1em; flex-shrink:0; margin-top:0.15em; }
.svcd-features li .icon{ color:var(--blue); }
.svcd-benefits-text li .icon{ color:var(--orange); }

/* ---- Chapter 2: small image + benefits, in a soft tinted panel so any
   space the short benefit list doesn't fill still reads as deliberate
   card padding rather than a leftover gap. Capped to a sensible max-width
   — without this, the panel (a block element) stretches to the full card
   width on large screens regardless of what the grid columns need, so the
   "leftover" space just reappears after the columns instead of inside
   them. Capping the container is what actually bounds it. ---- */
.svcd-second-row{ display:flex; flex-wrap:wrap; gap:24px; margin-top:32px; align-items:stretch; }
.svcd-benefits-row{
  display:grid; grid-template-columns:1fr 280px; gap:36px; align-items:center;
  max-width:760px; flex:2 1 460px;
  background:var(--surface); border-radius:var(--radius-md); padding:28px;
}
.svcd-benefits-media{ order:2; border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:1/1; box-shadow:var(--shadow-sm); }
.svcd-benefits-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.svcd-benefits-text{ order:1; }

/* Fills the space beside the (intentionally width-capped) benefits panel
   with real content instead of stretching the panel back into the empty
   space it was just fixed to avoid. */
.svcd-highlight{
  flex:1 1 240px; min-width:0;
  background:var(--blue-tint); border-left:3px solid var(--blue);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  padding:28px; display:flex; flex-direction:column; justify-content:center;
}
.svcd-highlight-icon{
  width:42px; height:42px; border-radius:11px; background:#fff; color:var(--blue-deep);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px; box-shadow:var(--shadow-sm); flex-shrink:0;
}
.svcd-highlight-icon .icon{ width:20px; height:20px; }
.svcd-highlight h5{
  font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--blue-deep);
  margin-bottom:10px;
}
.svcd-highlight p{ font-size:0.94rem; color:var(--ink); line-height:1.7; }

/* Alternates the image to the left on every other card, so the whole
   services list doesn't repeat the identical arrangement six times.
   Grid auto-placement assigns items to track order by order-modified
   sequence, so the column *sizes* have to swap along with the order —
   otherwise the now-first-placed image lands in the 1fr track instead
   of staying a fixed 280px, and the text gets squeezed into 280px. */
.svcd-benefits-row.media-left{ grid-template-columns:280px 1fr; }
.svcd-benefits-row.media-left .svcd-benefits-media{ order:1; }
.svcd-benefits-row.media-left .svcd-benefits-text{ order:2; }



/* ================= CONTACT PAGE ================= */
.contact-info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:56px; }
.contact-info-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:30px 26px; text-align:center;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.contact-info-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.contact-info-icon{
  width:52px; height:52px; border-radius:50%; background:var(--blue-tint); color:var(--blue-deep);
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
}
.contact-info-card h4{ font-size:1.02rem; margin-bottom:8px; }
.contact-info-card p, .contact-info-card a{ font-size:0.94rem; color:var(--ink-soft); }
.contact-info-card a:hover{ color:var(--blue); }

.contact-layout{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.map-placeholder{
  border-radius:50% 50% var(--radius-md) var(--radius-md); overflow:hidden; border:1px solid var(--line);
  aspect-ratio:4/3.4; position:relative;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--surface);
}
.map-placeholder-pin{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-100%);
  display:flex; flex-direction:column; align-items:center;
}
.map-placeholder-pin .icon{ width:38px; height:38px; color:var(--orange); filter:drop-shadow(0 6px 10px rgba(255,106,61,0.35)); }
.map-placeholder-label{
  position:absolute; bottom:18px; left:18px; right:18px;
  background:rgba(255,255,255,0.92); backdrop-filter:blur(6px); border-radius:12px; padding:14px 18px;
  font-size:0.86rem; color:var(--ink-soft); border:1px solid var(--line);
}
.social-row-lg{ display:flex; gap:14px; margin-top:24px; }

/* ================= DOWNLOAD APP SECTION ================= */
 .dl-section{
    position:relative;
    padding:100px 24px;
    overflow:hidden;
    isolation:isolate;
    background:#FCFAF7;
  }

  .dl-glow{ position:absolute; border-radius:50%; filter:blur(100px); z-index:0; pointer-events:none; }
  .dl-glow-sun{ width:560px; height:560px; top:-220px; right:-160px; background:radial-gradient(circle, rgba(249,115,22,.14), transparent 70%); }
  .dl-glow-mint{ width:460px; height:460px; bottom:-200px; left:-160px; background:radial-gradient(circle, rgba(37,99,235,.09), transparent 70%); }

  .dl-inner{ position:relative; z-index:1; max-width:1220px; margin:0 auto; }
  .dl-grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:56px;
    align-items:center;
  }

  /* ---------- COPY ---------- */
  .dl-top-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
  .dl-eyebrow{
    display:inline-flex; align-items:center; gap:9px;
    font-family:'IBM Plex Mono',monospace;
    font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
    color:#D9660A;
  }
  .dl-eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:#F97316; box-shadow:0 0 0 4px rgba(249,115,22,.18); }

  .dl-status-pill{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'IBM Plex Mono',monospace;
    font-size:11px; letter-spacing:.08em; text-transform:uppercase;
    color:rgba(11,27,58,.6);
    padding:9px 15px;
    border:1px solid rgba(11,27,58,.1);
    border-radius:999px;
    background:#ffffff;
    box-shadow:0 6px 16px -10px rgba(11,27,58,.18);
    white-space:nowrap;
  }
  .dl-status-pill .dot{ width:6px; height:6px; border-radius:50%; background:#F97316; animation:blink 1.8s ease-in-out infinite; flex-shrink:0; }
  @keyframes blink{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(249,115,22,.4); } 50%{ opacity:.5; box-shadow:0 0 0 5px rgba(249,115,22,0); } }

  .dl-title{
    font-family:'Fraunces',serif; font-optical-sizing:auto; font-weight:600;
    font-size:clamp(30px, 3.8vw, 47px); line-height:1.15; letter-spacing:-0.01em;
    margin:0 0 18px; color:#0B1B3A;
  }
  .dl-title em{ font-style:italic; color:#D9660A; font-weight:500; }
  .dl-lede{ font-size:15.5px; line-height:1.7; color:rgba(11,27,58,.6); max-width:460px; margin:0 0 30px; }

  .dl-badges{ display:flex; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
  .dl-badge{
    position:relative;
    display:flex; align-items:center; gap:12px;
    padding:13px 20px 13px 16px;
    background:#0B1B3A;
    border:1px solid rgba(11,27,58,.1);
    border-radius:14px;
    cursor:not-allowed;
    color:#fff;
    box-shadow:0 14px 28px -16px rgba(11,27,58,.4);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .dl-badge:hover{ transform:translateY(-3px); box-shadow:0 20px 36px -18px rgba(11,27,58,.5); }
  .dl-badge-ribbon{
    position:absolute; top:-9px; right:-8px;
    background:#F97316; color:#fff;
    font-family:'IBM Plex Mono',monospace;
    font-size:9.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
    padding:3px 8px; border-radius:999px;
    box-shadow:0 4px 10px -2px rgba(249,115,22,.55);
  }
  .dl-badge-icon{ width:24px; height:24px; flex-shrink:0; }
  .dl-badge-icon svg{ width:100%; height:100%; display:block; }
  .dl-badge-icon img{ width:100%; height:100%; display:block; object-fit:contain; }
  .dl-badge-text{ display:flex; flex-direction:column; line-height:1.25; text-align:left; }
  .dl-badge-text small{ font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.55); }
  .dl-badge-text span{ font-family:'Fraunces',serif; font-weight:600; font-size:15px; color:#fff; }

  .dl-mobile-note{
    display:inline-flex; align-items:center; gap:7px;
    font-size:12.5px; font-weight:600; color:rgba(11,27,58,.5);
    margin:0 0 28px;
  }
  .dl-mobile-note svg{ width:14px; height:14px; color:#F97316; flex-shrink:0; }

  .dl-form-block{ max-width:440px; }
  .dl-note{ font-size:13.5px; color:rgba(11,27,58,.6); margin:0 0 14px; line-height:1.55; }
  .dl-form{
    display:flex; align-items:center; gap:6px;
    padding:6px;
    background:#ffffff;
    border:1px solid rgba(11,27,58,.1);
    border-radius:999px;
    box-shadow:0 10px 24px -18px rgba(11,27,58,.2);
    transition:box-shadow .25s ease, border-color .25s ease;
  }
  .dl-form:focus-within{ border-color:#F97316; box-shadow:0 0 0 4px rgba(249,115,22,.14); }
  .dl-form input{ flex:1; min-width:0; border:none; outline:none; background:transparent; padding:11px 14px; font-family:'Inter',sans-serif; font-size:14.5px; color:#0B1B3A; }
  .dl-form input::placeholder{ color:rgba(11,27,58,.35); }
  .dl-form button{
    flex-shrink:0; border:none; cursor:pointer;
    background:#F97316; color:#fff; font-weight:600; font-size:14px;
    padding:12px 22px; border-radius:999px;
    transition:background .2s ease, transform .2s ease;
    white-space:nowrap;
  }
  .dl-form button:hover{ background:#D9660A; transform:translateY(-1px); }
  .dl-form-message{ min-height:20px; margin:10px 0 0 18px; font-size:13px; color:#1a8f4c; font-weight:600; }
  .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

  /* ============ VISUAL — one unified card, services sit beside the phone ============ */
  .dl-visual-card{
    position:relative;
    max-width:680px;
    margin:0 auto;
    background:linear-gradient(180deg, #FFFFFF 0%, #FFF7EF 100%);
    border:1px solid rgba(11,27,58,.06);
    border-radius:32px;
    padding:50px 38px 36px;
    box-shadow:0 50px 90px -40px rgba(11,27,58,.2);
    display:flex;
    flex-direction:column;
    align-items:center;
    overflow:hidden;
  }

  .dl-rays{
    position:absolute;
    top:190px; left:32%;
    width:480px; height:480px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:repeating-conic-gradient(from 0deg, rgba(249,115,22,.10) 0deg 3deg, transparent 3deg 16deg);
    -webkit-mask-image:radial-gradient(circle, black 38%, transparent 70%);
    mask-image:radial-gradient(circle, black 38%, transparent 70%);
    animation:raySpin 50s linear infinite;
    z-index:0;
    pointer-events:none;
  }
  @keyframes raySpin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

  /* phone + services sit side by side, horizontally, as one row */
  .dl-showcase{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:34px;
    width:100%;
  }

  .dl-phone-wrap{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    flex-shrink:0;
  }

  /* docked notification badge — anchored to the phone corner */
  .dl-notif{
    position:absolute;
    top:-16px; right:-36px;
    z-index:4;
    display:flex; align-items:center; gap:9px;
    background:#F97316;
    padding:10px 15px; border-radius:15px;
    box-shadow:0 16px 30px -10px rgba(249,115,22,.6), 0 0 0 4px #FFF7EF;
    max-width:200px;
  }
  .dl-notif svg{ width:17px; height:17px; flex-shrink:0; color:#fff; }
  .dl-notif-text strong{ display:block; font-size:11px; color:#fff; line-height:1.3; }
  .dl-notif-text span{ font-size:9.5px; opacity:.85; color:#fff; }

  .dl-phone{
    position:relative;
    z-index:2;
    width:236px; height:480px;
    background:#0B1B3A;
    border-radius:40px;
    padding:10px;
    box-shadow:0 44px 80px -26px rgba(11,27,58,.44);
    flex-shrink:0;
  }
  .dl-phone::before{
    content:"";
    position:absolute; top:23px; left:50%; transform:translateX(-50%);
    width:58px; height:7px; border-radius:4px;
    background:rgba(255,255,255,.25);
    z-index:5;
  }

  .dl-screen{
    position:relative;
    width:100%; height:100%;
    background:#ffffff;
    border-radius:31px;
    padding:36px 17px 17px;
    display:flex; flex-direction:column;
    color:#0B1B3A;
    overflow:hidden;
    border:1px solid rgba(11,27,58,.05);
  }

  .scr-status{ display:flex; justify-content:space-between; align-items:center; font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:rgba(11,27,58,.4); margin-bottom:16px; }
  .tag-soon{ background:#F97316; color:#fff; padding:2px 8px; border-radius:999px; font-size:9px; letter-spacing:.05em; text-transform:uppercase; }
  .scr-greet{ font-family:'Fraunces',serif; font-weight:600; font-size:17px; margin-bottom:15px; color:#0B1B3A; }
  .scr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
  .scr-tile{
    aspect-ratio:1;
    border-radius:13px;
    display:flex; align-items:center; justify-content:center;
  }
  .scr-tile svg{ width:21px; height:21px; display:block; }
  .scr-tile.t-orange{ background:rgba(249,115,22,.11); }
  .scr-tile.t-blue{ background:rgba(37,99,235,.10); }

  /* grounding shadow beneath the phone */
  .dl-phone-floor{
    width:155px; height:22px;
    margin-top:14px;
    border-radius:50%;
    background:radial-gradient(ellipse, rgba(11,27,58,.16), transparent 72%);
    filter:blur(1px);
  }

  /* services — vertical stack of HORIZONTAL rows, sitting beside the phone */
  .dl-services-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    width:100%;
    max-width:220px;
  }
  .service-row{
    display:flex;
    align-items:center;
    gap:12px;
    background:#ffffff;
    border:1px solid rgba(11,27,58,.08);
    border-radius:14px;
    padding:9px 14px 9px 9px;
    box-shadow:0 14px 26px -20px rgba(11,27,58,.28);
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .service-row:hover{ transform:translateX(4px); box-shadow:0 16px 30px -18px rgba(11,27,58,.32); }
  .service-node{
    width:34px; height:34px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .service-node.t-orange{ background:rgba(249,115,22,.12); }
  .service-node.t-blue{ background:rgba(37,99,235,.11); }
  .service-node svg{ width:16px; height:16px; display:block; }
  .service-row span{ font-size:13px; font-weight:600; color:#0B1B3A; white-space:nowrap; }

  .dl-card-divider{
    width:100%;
    max-width:440px;
    height:1px;
    background:rgba(11,27,58,.08);
    margin:30px 0 24px;
    position:relative;
    z-index:2;
  }

  /* QR row — final element in the card */
  .dl-qr{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    gap:20px;
    background:#ffffff;
    border:1px solid rgba(11,27,58,.08);
    padding:22px 26px;
    border-radius:22px;
    box-shadow:0 28px 56px -30px rgba(11,27,58,.26);
    width:100%;
    max-width:400px;
  }
  .dl-qr-frame{ position:relative; width:100px; height:100px; flex-shrink:0; }
  .dl-qr-frame svg{ width:100%; height:100%; display:block; }
  .dl-qr-corner{ position:absolute; width:20px; height:20px; border:3px solid #F97316; opacity:.9; animation:cornerPulse 2.4s ease-in-out infinite; }
  .dl-qr-corner.tl{ top:-6px; left:-6px; border-right:none; border-bottom:none; border-top-left-radius:5px; }
  .dl-qr-corner.tr{ top:-6px; right:-6px; border-left:none; border-bottom:none; border-top-right-radius:5px; }
  .dl-qr-corner.bl{ bottom:-6px; left:-6px; border-right:none; border-top:none; border-bottom-left-radius:5px; animation-delay:.4s; }
  .dl-qr-corner.br{ bottom:-6px; right:-6px; border-left:none; border-top:none; border-bottom-right-radius:5px; animation-delay:.4s; }
  @keyframes cornerPulse{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
  .dl-qr span{ font-size:13.5px; line-height:1.45; color:rgba(11,27,58,.6); }
  .dl-qr strong{ display:block; font-size:16px; color:#0B1B3A; margin-bottom:4px; font-family:'Fraunces',serif; }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:1100px){
    .dl-grid{ grid-template-columns:1fr; gap:64px; }
    .dl-lede{ max-width:560px; }
  }

  /* below this, phone + services no longer fit side by side comfortably — stack them, still centered */
  @media (max-width:720px){
    .dl-section{ padding:80px 16px; }
    .dl-top-row{ gap:12px; }
    .dl-visual-card{ padding:44px 22px 30px; border-radius:28px; max-width:420px; }
    .dl-showcase{ flex-direction:column; gap:30px; }
    .dl-services-list{ max-width:280px; }
    .dl-phone{ width:220px; height:448px; }
    .dl-rays{ width:420px; height:420px; left:50%; }
    .dl-qr{ max-width:340px; padding:20px 22px; gap:16px; }
    .dl-qr-frame{ width:88px; height:88px; }
  }
  @media (max-width:460px){
    .dl-badges{ flex-direction:column; }
    .dl-badge{ width:100%; }
    .dl-visual-card{ max-width:340px; padding:38px 18px 26px; }
    .dl-phone{ width:196px; height:398px; }
    .dl-notif{ right:-8px; max-width:170px; }
    .dl-qr{ max-width:280px; padding:16px 18px; gap:12px; }
    .dl-qr-frame{ width:72px; height:72px; }
  }
  @media (max-width:380px){
    .dl-form{ flex-wrap:wrap; border-radius:20px; }
    .dl-form input, .dl-form button{ width:100%; }
    .dl-rays{ display:none; }
    .dl-notif{ position:static; margin-bottom:16px; box-shadow:0 14px 26px -10px rgba(249,115,22,.6); }
    .dl-phone{ width:180px; height:366px; }
  }

  @media (prefers-reduced-motion: reduce){
    .dl-rays, .dl-qr-corner, .dl-status-pill .dot{ animation:none; }
  }

/* ================= LEGAL PAGES ================= */
.legal-layout{ display:grid; grid-template-columns:260px 1fr; gap:56px; align-items:start; }
.legal-toc{
  position:sticky; top:calc(var(--header-h) + 24px); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:22px;
}
.legal-toc h5{
  font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:14px;
}
.legal-toc ol{ counter-reset:toc; display:flex; flex-direction:column; gap:2px; list-style:none; padding-left:0; margin:0; }
.legal-toc li{ counter-increment:toc; list-style:none; }
.legal-toc a{
  display:flex; gap:8px; font-size:0.88rem; color:var(--ink-soft); padding:8px 10px; border-radius:8px;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.legal-toc a::before{ content:counter(toc,decimal-leading-zero); font-family:var(--font-mono); color:var(--ink-faint); font-size:0.8em; }
.legal-toc a:hover{ background:var(--bg-warm); color:var(--orange-deep); }

.legal-content{ max-width:740px; }
.legal-meta{
  display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:0.8rem; color:var(--ink-faint);
  margin-bottom:36px; padding-bottom:24px; border-bottom:1px solid var(--line);
}
.legal-callout{
  background:var(--blue-tint); border-left:3px solid var(--blue); border-radius:0 12px 12px 0;
  padding:18px 22px; font-size:0.94rem; color:var(--blue-deep); margin:20px 0 32px;
}
.legal-callout.warn{ background:var(--orange-tint); border-left-color:var(--orange); color:var(--orange-deep); }
.legal-callout:has(> svg){ display:flex; align-items:flex-start; gap:10px; }
.legal-callout:has(> svg) svg{ margin-top:0.2em; }
.legal-section{ margin-bottom:44px; scroll-margin-top:100px; }
.legal-section h2{
  font-size:1.35rem; margin-bottom:16px; padding-top:4px; display:flex; align-items:baseline; gap:10px;
}
.legal-section h2 .legal-num{ font-family:var(--font-mono); font-size:0.85rem; color:var(--orange); }
.legal-section h3{ font-size:1.05rem; margin:22px 0 10px; }
.legal-section p{ color:var(--ink-soft); font-size:0.98rem; line-height:1.75; margin-bottom:14px; }
.legal-section ul, .legal-section ol.legal-list{ display:flex; flex-direction:column; gap:10px; margin:14px 0 18px; padding-left:22px; }
.legal-section ul{ list-style:disc; }
.legal-section ol.legal-list{ list-style:decimal; }
.legal-section li{ color:var(--ink-soft); font-size:0.97rem; line-height:1.65; }
.legal-section li::marker{ color:var(--orange); }
.legal-section strong{ color:var(--ink); }
.legal-back-top{ display:inline-flex; align-items:center; gap:6px; font-size:0.86rem; color:var(--ink-faint); margin-top:8px; }

/* ================= SECTION DIVIDER (utility) ================= */
.divider-line{ height:1px; background:var(--line); border:none; margin:0; }

/* ==========================================================================
   MARGIN DECORATION — oversized watermark type (hero) + ambient floating
   medical iconography (margins). Markup is injected by animations.js
   (initWatermark / initFloatingIcons) so it stays in this one shared file
   instead of being duplicated across all 7 pages. See that file for the
   generation logic; this is just the visual styling for what it inserts.
   ========================================================================== */

/* ---- Watermark type — huge, faint brand mark bleeding off the hero edge ---- */
.hero-watermark{
  position:absolute; top:50%; right:-3%;
  transform:translateY(-50%);
  font-family:var(--font-display); font-weight:700; letter-spacing:-0.03em;
  line-height:1; white-space:nowrap; pointer-events:none; user-select:none;
  font-size:clamp(7rem, 19vw, 19rem);
}
.hero-watermark-dark{ z-index:1; color:rgba(255,255,255,0.06); }
.hero-watermark-light{ z-index:-1; color:rgba(16,25,43,0.05); }
.page-hero .hero-watermark{ font-size:clamp(4.5rem, 13vw, 10.5rem); top:58%; right:-2%; }

@media (max-width:920px){
  .hero-watermark{ display:none; }
}

/* ---- Ambient floating medical iconography ---- */
/* The layer itself must be explicitly positioned+zero-height: its icon
   children are position:absolute with a large computed `top` (their
   section's position in the full document), so without this rule the
   unstyled layer defaults to position:static and those large top values
   anchor against the whole page instead of collapsing back to content. */
.float-icon-layer{ position:absolute; top:0; left:0; width:100%; height:0; overflow:visible; pointer-events:none; z-index:0; }
.float-icon{
  position:absolute; width:34px; height:34px;
  pointer-events:none; opacity:0.16; will-change:transform;
}
.float-icon-left{ left:28px; }
.float-icon-right{ right:28px; }
.float-icon-bob{
  width:100%; height:100%;
  animation:floatBob 7.5s ease-in-out infinite;
}
.float-icon:nth-of-type(3n+2) .float-icon-bob{ animation-duration:9s; animation-delay:-2.4s; }
.float-icon:nth-of-type(3n) .float-icon-bob{ animation-duration:6.4s; animation-delay:-4.6s; }
.float-icon-svg{
  width:100%; height:100%; fill:none; stroke:var(--orange);
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.float-icon:nth-of-type(even) .float-icon-svg{ stroke:var(--blue); }

@keyframes floatBob{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-16px) rotate(4deg); }
}
@media (max-width:1300px){
  .float-icon{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .float-icon-bob{ animation:none; }
}

@media (max-width:1080px){
  .why-grid{ grid-template-columns:1fr; gap:36px; }
  .why-media-frame img{ height:340px; }
  .pfeature-grid{ grid-template-columns:repeat(3,1fr); grid-auto-rows:140px; }
  .pfeature-card.pf-large{ grid-column:span 3; grid-row:span 2; }
  .audience-grid{ grid-template-columns:repeat(2,1fr); }
  .values-grid{ grid-template-columns:repeat(2,1fr); }
  .legal-layout{ grid-template-columns:220px 1fr; gap:36px; }
  .svcd-benefits-row{ grid-template-columns:1fr 220px; gap:22px; padding:22px; max-width:600px; }
  .svcd-benefits-row.media-left{ grid-template-columns:220px 1fr; }
}

@media (max-width:920px){
  .hero{ height:86vh; min-height:560px; }
  .hero-overlay-inner{ max-width:100%; }
  .about-grid{ grid-template-columns:1fr; gap:36px; }
  .service-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-inner{ grid-template-columns:1fr 1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
  .vm-grid{ grid-template-columns:1fr; }
  .contact-info-grid{ grid-template-columns:1fr; }
  .contact-layout{ grid-template-columns:1fr; gap:32px; }
  .download-grid{ grid-template-columns:1fr; gap:40px; }
  .download-visual{ order:-1; }
  .legal-layout{ grid-template-columns:1fr; }
  .legal-toc{ position:static; }
  .svcd-cols{ grid-template-columns:1fr; gap:20px; }
}

@media (max-width:760px){
  .main-nav{
    position:fixed; top:var(--header-h); left:0; right:0; height:calc(100vh - var(--header-h)); z-index:99;
    background:#fff; flex-direction:column; align-items:flex-start; gap:4px;
    padding:24px 32px; transform:translateX(100%); transition:transform .35s var(--ease);
    overflow-y:auto;
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav .nav-link{ width:100%; padding:14px 0; border-bottom:1px solid var(--line); border-radius:0; font-size:1.05rem; }
  .main-nav .nav-link:hover{ background:none; }
  .nav-toggle{ display:flex; }
  .header-cta{ display:none; }
  .section{ padding:72px 0; }
  .section-inner{ padding:0 22px; }
  .hero{ height:auto; min-height:0; max-height:none; padding:96px 0 64px; }
  .hero-scrim{ background:linear-gradient(180deg, rgba(20,15,12,0.35) 0%, rgba(20,15,12,0.78) 55%, rgba(20,15,12,0.9) 100%); }
  .hero-overlay{ padding:0 22px; align-items:flex-end; min-height:520px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ justify-content:center; }
  .hero-trust-icons{ flex-wrap:wrap; }
  .hero-arrows{ display:none; }
  .hero-slide-label{ display:none; }
  .hero-controls{ bottom:18px; }
  .service-grid{ grid-template-columns:1fr; }
  .why-media-frame img{ height:220px; }
  .why-badge{ margin-top:14px; }
  .pfeature-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:132px; }
  .pfeature-card.pf-large{ grid-column:span 2; grid-row:span 2; }
  .audience-grid{ grid-template-columns:1fr; }
  .footer-inner{ grid-template-columns:1fr; padding-bottom:36px; }
  .footer-bottom{ flex-direction:column; text-align:center; }
  .contact-form{ padding:26px; }
  .back-to-top{ right:18px; bottom:18px; width:44px; height:44px; }
  .page-hero{ padding:calc(var(--header-h) + 36px) 0 44px; }
  .values-grid{ grid-template-columns:1fr; }
  .cta-banner{ padding:44px 26px; }
  .service-detail-card{ border-radius:var(--radius-md); }
  .svcd-hero{ aspect-ratio:16/9; }
  .svcd-body{ padding:22px; }
  .svcd-features ul{ columns:1; }
  .svcd-second-row{ margin-top:24px; gap:16px; }
  .svcd-benefits-row, .svcd-benefits-row.media-left{ grid-template-columns:1fr; gap:16px; padding:20px; }
  .svcd-highlight{ border-left:none; border-top:3px solid var(--blue); border-radius:var(--radius-md); padding:22px; }
  .svcd-benefits-media, .svcd-benefits-row.media-left .svcd-benefits-media{ order:-1; aspect-ratio:16/9; max-width:none; }
  .svcd-benefits-row.media-left .svcd-benefits-text{ order:1; }
  .svcd-head{ gap:14px; }
  .ecosystem-compact{ gap:12px; }
  .eco-compact-connector{ display:none; }
  .eco-compact-core{ margin-top:0; order:-1; flex-basis:100%; }
  .app-badges{ flex-direction:column; align-items:stretch; }
  .download-visual{ flex-direction:column; }
  .trust-bar-inner{ justify-content:flex-start; gap:16px 22px; padding:20px 22px; }
  .trust-item{ font-size:0.84rem; }
}


/* =====================================================
   ABOUT V2
===================================================== */

.about-v2{
    position:relative;
    overflow:hidden;
    padding:120px 0;
    background:
    radial-gradient(circle at top right,
    rgba(36,84,255,.08),
    transparent 45%),

    radial-gradient(circle at bottom left,
    rgba(255,106,61,.08),
    transparent 45%),

    #ffffff;
}

/* floating background */

.about-v2::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    background:rgba(36,84,255,.05);
    border-radius:50%;
    filter:blur(70px);
    top:-180px;
    right:-120px;
    animation:aboutFloat 12s ease-in-out infinite;
}

.about-v2::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    background:rgba(255,106,61,.06);

    border-radius:50%;

    filter:blur(60px);

    bottom:-140px;

    left:-120px;

    animation:aboutFloat 15s ease-in-out infinite reverse;

}

.about-top{

    text-align:center;

    max-width:760px;

    margin:auto;

    margin-bottom:80px;

    position:relative;

    z-index:2;

}

.about-title{

    font-size:clamp(42px,5vw,64px);

    line-height:1.1;

    margin:20px 0;

}

.about-subtitle{

    color:#667085;

    font-size:18px;

    line-height:1.9;

}

.about-content{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

    align-items:stretch;

    position:relative;

    z-index:2;

}

/* image */

.about-visual{

    height:100%;

}

.about-image-card{

    position:relative;

    overflow:hidden;

    border-radius:36px;

    box-shadow:0 35px 90px rgba(0,0,0,.14);

    height:100%;

}

.about-image-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    transition:1s;

}

.about-image-card:hover img{

    transform:scale(1.08);

}

.gradient-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
    rgba(16,25,43,.55),
    transparent);

}

/* Floating service cards */

.service-badge{

    position:absolute;

    display:flex;

    align-items:center;

    gap:15px;

    padding:15px 22px;

    border-radius:18px;

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(20px);

    box-shadow:0 20px 45px rgba(0,0,0,.08);

    animation:floating 4s ease-in-out infinite;

    transition:.35s;

}

.service-badge:hover{

    transform:translateY(-6px);

}

.service-badge strong{

    display:block;

    font-size:15px;

}

.service-badge span{

    color:#777;

    font-size:13px;

}

.service-badge .icon{

    width:24px;

    height:24px;

    color:var(--blue);

}

/* positions */

.badge-1{

    top:40px;

    left:-35px;

}

.badge-2{

    top:290px;

    right:-30px;

    animation-delay:.8s;

}

.badge-3{

    bottom:120px;

    left:-30px;

    animation-delay:1.4s;

}

.badge-4{

    bottom:30px;

    right:-20px;

    animation-delay:2s;

}

/* right */

.about-info{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.glass-card{

    display:flex;

    gap:22px;

    align-items:flex-start;

    padding:28px;

    border-radius:24px;

    background:rgba(255,255,255,.78);

    backdrop-filter:blur(25px);

    border:1px solid rgba(255,255,255,.6);

    box-shadow:0 25px 50px rgba(0,0,0,.06);

    transition:.35s;

}

.glass-card:hover{

    transform:translateY(-8px);

    box-shadow:0 30px 60px rgba(36,84,255,.12);

}

.glass-icon{

    width:65px;

    height:65px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:28px;

    flex-shrink:0;

    background:linear-gradient(135deg,
    var(--blue),
    var(--orange));

}

.glass-icon .icon{

    width:30px;

    height:30px;

}

.glass-card h3{

    margin-bottom:10px;

    font-size:22px;

}

.glass-card p{

    color:#667085;

    line-height:1.8;

}

/* statistics */

.about-stats{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:18px;

}

.stat-box{

    background:#fff;

    border-radius:22px;

    padding:25px;

    text-align:center;

    box-shadow:0 15px 35px rgba(0,0,0,.05);

    transition:.35s;

}

.stat-box:hover{

    transform:translateY(-8px);

}

.stat-box h3{

    font-size:36px;

    color:var(--blue);

    margin-bottom:8px;

}

.stat-box span{

    color:#777;

    font-size:14px;

}

/* animations */

@keyframes floating{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

@keyframes aboutFloat{

    0%,100%{

        transform:translate(0,0);

    }

    50%{

        transform:translate(30px,-30px);

    }

}

/* responsive */

@media(max-width:992px){

.about-content{

grid-template-columns:1fr;

}

.about-visual{

margin-bottom:60px;

height:auto;

}

.about-image-card{

height:auto;

}

.about-image-card img{

height:auto;

object-fit:initial;

}

.service-badge{

position:relative;

left:0!important;

right:0!important;

top:0!important;

bottom:0!important;

margin:12px 0;

}

.about-stats{

grid-template-columns:1fr;

}

}

/* ==========================================================
   SERVICES V2 - PART 2A
========================================================== */

.services-v2{
    position:relative;
    overflow:hidden;
    padding:120px 0;
    background:
        radial-gradient(circle at top right,
        rgba(37,99,235,.08),
        transparent 42%),

        radial-gradient(circle at bottom left,
        rgba(249,115,22,.08),
        transparent 42%),

        #fff;
}

.services-v2::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:rgba(37,99,235,.06);

    filter:blur(90px);

    top:-220px;

    right:-180px;

    animation:ecosystemBlob 14s ease-in-out infinite;

}

.services-v2::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:rgba(249,115,22,.06);

    filter:blur(90px);

    left:-160px;

    bottom:-160px;

    animation:ecosystemBlob 18s ease-in-out infinite reverse;

}

/* ===================================== */

.ecosystem-circle{

    position:relative;

    width:860px;

    height:860px;

    max-width:100%;

    margin:90px auto 0;

    z-index:2;

}

/* ===================================== */

.ecosystem-center{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:420px;

    height:420px;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* ===================================== */

.center-ring{

    position:absolute;

    border-radius:50%;

    border:1px dashed rgba(37,99,235,.15);

}

.ring-one{

    width:180px;

    height:180px;

    animation:ringRotate 20s linear infinite;

}

.ring-two{

    width:280px;

    height:280px;

    animation:ringRotateReverse 26s linear infinite;

}

.ring-three{

    width:390px;

    height:390px;

    animation:ringRotate 34s linear infinite;

}

/* ===================================== */

.center-logo{

    position:relative;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(255,255,255,.85);

    backdrop-filter:blur(24px);

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    box-shadow:

        0 20px 60px rgba(0,0,0,.08),

        0 0 0 12px rgba(255,255,255,.4);

    z-index:10;

    transition:.45s;

}

.center-logo:hover{

    transform:translateY(-8px) scale(1.03);

    box-shadow:

        0 35px 80px rgba(37,99,235,.18);

}

.center-logo img{

    width:72px;

    margin-bottom:12px;

}

.center-logo h3{

    margin:0;

    font-size:28px;

    color:#2563EB;

    font-weight:700;

}

.center-logo p{

    margin-top:8px;

    color:#64748b;

    font-size:14px;

    line-height:1.6;

}

/* ===================================== */

/* ---------- Orbit positioning ---------- */

.eco-orbit-group{

    position:absolute;

    inset:0;

}

.eco-orbit{

    position:absolute;

    top:50%;

    left:50%;

    width:260px;

    transform:
        translate(-50%,-50%)
        rotate(var(--angle))
        translateX(320px)
        rotate(calc(-1 * var(--angle)));

}

/* ===================================== */

.eco-card{

    position:relative;

    display:flex;

    flex-direction:row;

    align-items:center;

    text-align:left;

    gap:14px;

    padding:18px 20px;

    border-radius:20px;

    background:rgba(255,255,255,.9);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.65);

    box-shadow:
        0 15px 40px rgba(15,23,42,.06);

    overflow:hidden;

    isolation:isolate;

    transition:
        transform .4s var(--ease),
        box-shadow .4s var(--ease),
        border-color .4s var(--ease),
        background .4s var(--ease);

}

.eco-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(135deg,
        rgba(37,99,235,.05),
        rgba(249,115,22,.05));

    opacity:0;

    transition:opacity .4s var(--ease);

}

.eco-card:hover::before{

    opacity:1;

}

.eco-card::after{

    content:"";

    position:absolute;

    top:0;

    left:30px;

    right:30px;

    height:5px;

    border-radius:0 0 20px 20px;

    background:linear-gradient(
        to right,
        #2563EB,
        #F97316
    );

    transform:scaleX(0);

    transform-origin:center;

    transition:transform .4s var(--ease);

}

.eco-card:hover::after{

    transform:scaleX(1);

}

.eco-content{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:6px;

    min-width:0;

}

.eco-card:hover,
.eco-card.eco-show:hover{

    transform:translateY(-8px);

    border-color:rgba(37,99,235,.2);

    background:rgba(255,255,255,.96);

    box-shadow:
        0 25px 60px rgba(37,99,235,.12),
        0 10px 20px rgba(0,0,0,.05);

}

/* ==========================================================
   SERVICES V2 - PART 2B
   Cards, Icons, Status, Typography & Hover
==========================================================*/

/* ---------- Icon ---------- */

.eco-icon{
    width:56px;
    height:56px;
    min-width:56px;

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

    border-radius:16px;

    color:#fff;

    position:relative;

    overflow:hidden;

    transition:transform .45s var(--ease-spring);
}

.eco-icon::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(255,255,255,.15);

    transform:translateY(100%);

    transition:transform .4s var(--ease);

}

.eco-card:hover .eco-icon::before{

    transform:translateY(0);

}

.eco-card:hover .eco-icon{

    transform:rotate(-6deg) scale(1.1);

}

.eco-icon.svc-orange{

    background:linear-gradient(
    135deg,
    #F97316,
    #FB923C
    );

}

.eco-icon.svc-blue{

    background:linear-gradient(
    135deg,
    #2563EB,
    #3B82F6
    );

}

.eco-icon .icon{

    width:24px;

    height:24px;

}

/* ---------- Title ---------- */

.eco-card h3{

    margin:0;

    font-size:19px;

    font-weight:700;

    color:#0f172a;

    transition:color .35s var(--ease);

}

.eco-card:hover h3{

    color:#2563EB;

}

/* ---------- Status ---------- */

.status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:7px 14px;

    border-radius:50px;

    font-size:12px;

    font-weight:700;

    letter-spacing:.4px;

    text-transform:uppercase;

    transition:transform .35s var(--ease);

}

.eco-card:hover .status{

    transform:translateY(-2px);

}

.status::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

}

.live{

    background:#ECFDF3;

    color:#15803D;

}

.live::before{

    background:#22C55E;

    box-shadow:0 0 12px #22C55E;

}

.soon{

    background:#FFF7ED;

    color:#EA580C;

}

.soon::before{

    background:#F97316;

    box-shadow:0 0 10px #FB923C;

}

/* ---------- Explore link ---------- */

.eco-card a{

    position:relative;

    display:inline-flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

    color:#2563EB;

    font-weight:700;

    font-size:14px;

    transition:gap .35s var(--ease);

}

.eco-card:hover a{

    gap:14px;

}

.eco-card a .icon{

    width:16px;

    height:16px;

    transition:transform .35s var(--ease);

}

.eco-card:hover a .icon{

    transform:translateX(6px);

}

.eco-card a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0;

    height:2px;

    background:#2563EB;

    transition:width .35s var(--ease);

}

.eco-card:hover a::after{

    width:100%;

}

/* Logo image */

.center-logo img{

    transition:.4s;

}

.center-logo:hover img{

    transform:rotate(-5deg) scale(1.08);

}

/* Rings glow */

.center-ring{

    transition:.4s;

}

.ecosystem-circle:hover .ring-one{

    border-color:rgba(37,99,235,.4);

}

.ecosystem-circle:hover .ring-two{

    border-color:rgba(249,115,22,.35);

}

.ecosystem-circle:hover .ring-three{

    border-color:rgba(37,99,235,.25);

}

/* ==========================================================
   SERVICES V2 - PART 2D
   Responsive & Final Polish
==========================================================*/

/* ---------- Cursor ---------- */

.eco-card,
.center-logo{
    cursor:pointer;
}

/* ---------- Section title ---------- */

.services-v2 .section-title{

    max-width:700px;
    margin-inline:auto;
    line-height:1.15;

}

.services-v2 .section-lede{

    max-width:760px;
    margin-inline:auto;
    color:#64748B;

}

/* ---------- Better spacing ---------- */

.services-v2 .section-head{

    margin-bottom:40px;

}

/* ---------- Focus ---------- */

.eco-card a:focus-visible{

    outline:3px solid #2563EB;
    outline-offset:6px;
    border-radius:8px;

}

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

@media (max-width:1100px){

.ecosystem-circle{

    width:auto;
    height:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:50px;

}

.ecosystem-center{

    position:static;
    transform:none;
    width:340px;
    height:340px;
    margin:0 auto;

}

.ring-three{

    width:320px;
    height:320px;

}

.ring-two{

    width:240px;
    height:240px;

}

.ring-one{

    width:170px;
    height:170px;

}

.center-logo{

    width:150px;
    height:150px;

}

.center-logo img{

    width:58px;

}

.eco-orbit-group{

    position:static;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
    width:100%;
    max-width:640px;
    margin:0 auto;

}

.eco-orbit{

    position:static;
    width:auto;
    transform:none;

}

}

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

@media (max-width:768px){

.services-v2{

    padding:90px 0;

}

.eco-card{

    padding:22px;
    gap:18px;
    border-radius:22px;
    min-height:auto;

}

.eco-icon{

    width:60px;
    height:60px;
    min-width:60px;

}

.eco-icon .icon{

    width:28px;
    height:28px;

}

.eco-card h3{

    font-size:18px;

}

.status{

    font-size:11px;
    padding:6px 12px;

}

.ecosystem-center{

    width:280px;
    height:280px;

}

.center-logo{

    width:135px;
    height:135px;

}

.center-logo img{

    width:52px;

}

.center-logo h3{

    font-size:22px;

}

.center-logo p{

    display:none;

}

.ring-three{

    width:280px;
    height:280px;

}

.ring-two{

    width:205px;
    height:205px;

}

.ring-one{

    width:145px;
    height:145px;

}

}

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

@media (max-width:480px){

.services-v2{

    padding:70px 0;

}

.eco-icon{

    margin-bottom:6px;

}

.ecosystem-circle{

    gap:35px;

}

.eco-orbit-group{

    grid-template-columns:1fr;
    max-width:320px;

}

.center-logo{

    width:120px;
    height:120px;

}

.center-logo img{

    width:46px;

}

.center-logo h3{

    font-size:18px;

}

.status{

    margin-bottom:8px;

}

}

/* ==========================================================
   REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion:reduce){

.center-logo,
.center-ring,
.eco-card,
.services-v2::before,
.services-v2::after{

    animation:none !important;

}

*{

    scroll-behavior:auto;

}

}

/* ========================================= */

.eco-ripple{

position:absolute;

border-radius:50%;

background:rgba(37,99,235,.15);

transform:scale(0);

animation:ripple .7s ease;

pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(3);

opacity:0;

}

}

.eco-card{

opacity:0;

transform:translateY(40px);

}

.eco-card.eco-show{

opacity:1;

transform:translateY(0);

transition:

opacity .6s ease,

transform .6s ease;

}

/* ==========================================================================
   ABOUT PAGE REDESIGN — scoped additions
   (.vm-card, .goal-item/.goal-marker, .about-stats are only ever rendered
   on about.html today, so these are safe to extend directly.)
   ========================================================================== */
.vm-card{ transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.vm-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.vm-card-icon{ transition:transform .35s var(--ease-spring); }
.vm-card:hover .vm-card-icon{ transform:scale(1.08) rotate(-4deg); }

.goal-marker{ transition:transform .3s var(--ease-spring), border-color .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease); }
.goal-item:hover .goal-marker{ transform:translateY(-3px) scale(1.05); border-color:var(--orange); color:var(--orange-deep); box-shadow:var(--shadow-sm); }

.eco-compact-icon{ transition:transform .35s var(--ease-spring), box-shadow .3s var(--ease); }
.eco-compact-node:hover .eco-compact-icon{ transform:translateY(-4px) scale(1.06); box-shadow:var(--shadow-sm); }

/* Vertical rhythm helper — keeps .about-stats (shared with the homepage
   teaser) from needing its own margin baked in, since that section relies
   on its parent's flex `gap` for spacing instead. */
.about-stats-band{ margin-top:52px; }

/* Quick "why" list reused from the homepage's .why-row pattern, standing
   alone here (no .why-media companion) inside the About intro copy. */
.why-list-standalone{ margin-top:32px; }

/* ==========================================================================
   SERVICES PAGE REDESIGN — scoped additions
   ========================================================================== */

/* ---------- Service tabs (click-to-switch service explorer) ---------- */
.svc-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px; }
.svc-tab{
  display:inline-flex; align-items:center; gap:10px; padding:10px 18px 10px 10px;
  border-radius:100px; border:1.5px solid var(--line-strong); background:#fff;
  font-weight:600; font-size:0.92rem; color:var(--ink-soft);
  transition:border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.svc-tab:hover{ border-color:var(--blue); color:var(--blue-deep); transform:translateY(-2px); }
.svc-tab-icon{
  width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:background .25s var(--ease), color .25s var(--ease);
}
.svc-tab-icon .icon{ width:15px; height:15px; }
.svc-tab-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.svc-tab-dot.is-live{ background:#22C55E; }
.svc-tab-dot.is-soon{ background:var(--orange); }
.svc-tab.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; box-shadow:var(--shadow-sm); }
.svc-tab.is-active .svc-tab-icon.svc-orange, .svc-tab.is-active .svc-tab-icon.svc-blue{ background:rgba(255,255,255,0.16); color:#fff; }

/* ---------- Panel switching (progressive enhancement) ---------- */
/* Base state (no JS, or before script.js runs): every panel stays visible
   and stacked, exactly like a normal list — nothing here is required for
   the content to work. */
.svc-panels.js-enhanced .service-detail-card{ display:none; }
.svc-panels.js-enhanced .service-detail-card.is-active{ display:block; animation:svcPanelIn .45s var(--ease); }
@keyframes svcPanelIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }

@media (max-width:640px){
  .svc-tabs{ flex-wrap:nowrap; overflow-x:auto; gap:8px; scrollbar-width:none; padding-bottom:4px; margin:0 -22px 28px; padding-left:22px; padding-right:22px; }
  .svc-tabs::-webkit-scrollbar{ display:none; }
  .svc-tab{ flex-shrink:0; }
}

.shx-eco{
    position:relative;
    padding:110px 32px 130px;
    background:
      radial-gradient(1000px 500px at 50% 0%, rgba(246,130,30,.07), transparent 60%),
      #FCFAF7;
    overflow:hidden;
  }

  .shx-eco__inner{ max-width:1400px; margin:0 auto; }

  /* ---- Header ---- */
  .shx-eco__head{ max-width:660px; margin:0 auto 72px; text-align:center; }

  .shx-eco__eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    color:#D9660A; margin-bottom:18px;
  }
  .shx-eco__eyebrow-dot{
    width:7px; height:7px; border-radius:50%; background:#F6821E;
    box-shadow:0 0 0 0 rgba(246,130,30,.5);
    animation:shx-eco-pulse 1.8s infinite;
  }
  @keyframes shx-eco-pulse{
    0%{ box-shadow:0 0 0 0 rgba(246,130,30,.45); }
    70%{ box-shadow:0 0 0 7px rgba(246,130,30,0); }
    100%{ box-shadow:0 0 0 0 rgba(246,130,30,0); }
  }

  .shx-eco__title{
    font-family:'Fraunces',serif; font-weight:600;
    font-size:clamp(30px, 3.8vw, 46px); line-height:1.16; letter-spacing:-.01em;
    color:#0A1428; margin:0 0 16px;
  }
  .shx-eco__lede{ font-size:16px; line-height:1.7; color:rgba(10,20,40,.58); margin:0; }

  /* ============ RADIAL HUB (desktop / large tablet only, >=1025px) ============ */

  /* hub-outer reserves fixed, generous top/bottom padding so satellite cards
     NEVER collide with the header above — this is the core fix. Do not shrink
     the "+ 560px" buffer below ~500px or top/bottom cards can clip content again. */
  .shx-eco__hub-outer{
    position:relative;
    width:100%;
    max-width:860px;
    margin:0 auto;
    --r: clamp(160px, 15vw, 220px);
    padding: calc((var(--r) * 2 + 560px - var(--r) * 2) / 2) 0; /* = 280px, kept as a formula for clarity */
  }

  .shx-eco__ring-area{
    position:relative;
    width:100%;
    aspect-ratio:1 / 1;
    max-width:calc(var(--r) * 2);
    margin:0 auto;
  }

  .shx-eco__ring{
    position:absolute;
    top:50%; left:50%;
    border-radius:50%;
    border:1px dashed rgba(10,20,40,.16);
    pointer-events:none;
    transform:translate(-50%, -50%);
  }
  .shx-eco__ring--1{
    width:52.5%; height:52.5%;
    animation:shx-eco-spin 60s linear infinite;
  }
  .shx-eco__ring--2{
    width:77.5%; height:77.5%;
    border-style:dotted;
    animation:shx-eco-spin 90s linear infinite reverse;
  }
  .shx-eco__ring--3{ width:100%; height:100%; border-color:rgba(10,20,40,.09); }
  @keyframes shx-eco-spin{ from{ transform:translate(-50%,-50%) rotate(0deg); } to{ transform:translate(-50%,-50%) rotate(360deg); } }

  .shx-eco__hub.is-paused .shx-eco__ring{ animation-play-state:paused; }

  /* Wave ripples — expanding, fading rings radiating out from the hub,
     layered behind the static dotted rings above. */
  .shx-eco__ring-area::before,
  .shx-eco__ring-area::after{
    content:'';
    position:absolute;
    top:50%; left:50%;
    width:52.5%; height:52.5%;
    border-radius:50%;
    border:2px solid rgba(249,115,22,.75);
    transform:translate(-50%, -50%) scale(1);
    opacity:0;
    pointer-events:none;
    z-index:0;
    animation:shx-eco-wave 4s ease-out infinite;
  }
  .shx-eco__ring-area::after{
    border-color:rgba(46,112,194,.7);
    animation-delay:2s;
  }
  @keyframes shx-eco-wave{
    0%{ transform:translate(-50%, -50%) scale(1); opacity:.85; }
    100%{ transform:translate(-50%, -50%) scale(1.95); opacity:0; }
  }
  .shx-eco__hub.is-paused .shx-eco__ring-area::before,
  .shx-eco__hub.is-paused .shx-eco__ring-area::after{
    animation-play-state:paused;
  }

  .shx-eco__core{
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%, -50%);
    z-index:3;
    width:clamp(110px, 11vw, 150px);
    height:clamp(110px, 11vw, 150px);
    border-radius:50%;
    background:#fff;
    border:1px solid rgba(10,20,40,.08);
    box-shadow:0 34px 68px -20px rgba(10,20,40,.3);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-align:center;
    padding:16px;
  }
  .shx-eco__core-mark{ width:clamp(32px, 3.8vw, 44px); height:clamp(32px, 3.8vw, 44px); }
  .shx-eco__core-mark svg{ width:100%; height:100%; }
  .shx-eco__core-logo{ width:60%; height:auto; margin:0 auto; }
  .shx-eco__core-text{
    font-size:clamp(10px, 1vw, 12px);
    font-weight:650;
    line-height:1.35;
    color:rgba(10,20,40,.62);
    margin:0;
  }

  .shx-eco__spokes{ position:absolute; inset:0; z-index:2; }
  .shx-eco__spoke{ position:absolute; top:50%; left:50%; width:0; height:0; }

  .shx-eco__connector{
    position:absolute;
    top:0; left:0;
    width:2px;
    height:clamp(28px, 3.4vw, 48px);
    background:linear-gradient(180deg, rgba(42,87,166,.5), rgba(246,130,30,.15));
    transform-origin:top center;
    overflow:hidden;
  }
  /* let the blurred glow bleed past the thin line while hovered */
  .shx-eco__spoke:hover .shx-eco__connector{
    overflow:visible;
  }
  .shx-eco__connector::after{
    content:'';
    position:absolute;
    left:-2px; top:-100%;
    width:6px; height:100%;
    border-radius:3px;
    background:linear-gradient(180deg, transparent, #F6821E 45%, #2E70C2 65%, transparent);
    filter:blur(2.5px);
    box-shadow:0 0 10px 3px rgba(246,130,30,.55), 0 0 16px 5px rgba(46,112,194,.4);
    opacity:0;
    transition:opacity .3s ease;
  }
  .shx-eco__spoke:hover .shx-eco__connector::after{
    opacity:1;
    animation:shx-eco-connector-pulse 1.1s ease-in-out infinite;
  }
  @keyframes shx-eco-connector-pulse{
    0%{ top:-100%; }
    100%{ top:100%; }
  }

  .shx-eco__node{
    position:absolute;
    width:clamp(160px, 15vw, 200px);
    min-height:176px;
    background:#fff;
    border:1px solid rgba(10,20,40,.08);
    border-radius:20px;
    padding:clamp(14px, 1.4vw, 18px) clamp(13px, 1.3vw, 16px) 14px;
    text-align:center;
    box-shadow:0 22px 44px -22px rgba(10,20,40,.26);
    transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .4s ease;
  }

  /* ---- Fixed hexagon positions for the 6 spokes ---- */
  .shx-eco__spoke:nth-child(1) .shx-eco__connector{ transform:rotate(0deg); }
  .shx-eco__spoke:nth-child(1) .shx-eco__node{
    top:calc(-1 * var(--r) - 28px); left:50%;
    transform:translate(-50%, -100%);
  }

  .shx-eco__spoke:nth-child(2) .shx-eco__connector{ transform:rotate(60deg); }
  .shx-eco__spoke:nth-child(2) .shx-eco__node{
    top:calc(-1 * var(--r) * 0.5 - 24px); left:calc(var(--r) * 0.866);
    transform:translate(0, -100%);
  }

  .shx-eco__spoke:nth-child(3) .shx-eco__connector{ transform:rotate(120deg); }
  .shx-eco__spoke:nth-child(3) .shx-eco__node{
    top:calc(var(--r) * 0.5 + 24px); left:calc(var(--r) * 0.866);
    transform:translate(0, 0);
  }

  .shx-eco__spoke:nth-child(4) .shx-eco__connector{ transform:rotate(180deg); }
  .shx-eco__spoke:nth-child(4) .shx-eco__node{
    top:calc(var(--r) + 28px); left:50%;
    transform:translate(-50%, 0);
  }

  .shx-eco__spoke:nth-child(5) .shx-eco__connector{ transform:rotate(240deg); }
  .shx-eco__spoke:nth-child(5) .shx-eco__node{
    top:calc(var(--r) * 0.5 + 24px); left:calc(-1 * var(--r) * 0.866);
    transform:translate(-100%, 0);
  }

  .shx-eco__spoke:nth-child(6) .shx-eco__connector{ transform:rotate(300deg); }
  .shx-eco__spoke:nth-child(6) .shx-eco__node{
    top:calc(-1 * var(--r) * 0.5 - 24px); left:calc(-1 * var(--r) * 0.866);
    transform:translate(-100%, -100%);
  }

  /* ---- Card contents ---- */

  /* Inner wrapper carries the idle float animation, kept separate from
     .shx-eco__node's own transform (which handles fixed hex placement +
     the hover lift) so the two transforms never fight each other. */
  .shx-eco__node-float{
    position:relative;
    animation:shx-eco-float 4.6s ease-in-out infinite;
  }
  @keyframes shx-eco-float{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-6px); }
  }
  /* Desync each card's float cycle so they never bob in lockstep */
  .shx-eco__spoke:nth-child(1) .shx-eco__node-float{ animation-duration:4.2s; animation-delay:0s; }
  .shx-eco__spoke:nth-child(2) .shx-eco__node-float{ animation-duration:5.1s; animation-delay:.5s; }
  .shx-eco__spoke:nth-child(3) .shx-eco__node-float{ animation-duration:4.5s; animation-delay:1s; }
  .shx-eco__spoke:nth-child(4) .shx-eco__node-float{ animation-duration:4.9s; animation-delay:.25s; }
  .shx-eco__spoke:nth-child(5) .shx-eco__node-float{ animation-duration:4.3s; animation-delay:.75s; }
  .shx-eco__spoke:nth-child(6) .shx-eco__node-float{ animation-duration:5.0s; animation-delay:1.3s; }

  /* Pause the idle float while hovered so it doesn't fight the hover lift */
  .shx-eco__node:hover .shx-eco__node-float{ animation-play-state:paused; }

  .shx-eco__node-glow{
    position:absolute;
    top:2px; left:50%;
    width:70px; height:70px;
    transform:translate(-50%, 0) scale(.55);
    border-radius:50%;
    opacity:0;
    pointer-events:none;
    z-index:0;
    transition:opacity .4s ease, transform .45s cubic-bezier(.22,1,.36,1);
  }
  .shx-eco__node-glow--orange{ background:radial-gradient(circle, rgba(249,115,22,.4), transparent 70%); }
  .shx-eco__node-glow--blue{ background:radial-gradient(circle, rgba(46,112,194,.4), transparent 70%); }
  .shx-eco__node:hover .shx-eco__node-glow,
  .shx-eco__gcard:hover .shx-eco__node-glow{
    opacity:1;
    transform:translate(-50%, 0) scale(1);
  }

  .shx-eco__node-icon{
    position:relative; z-index:1;
    width:clamp(42px, 3.8vw, 50px);
    height:clamp(42px, 3.8vw, 50px);
    margin:0 auto 12px;
    border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    box-shadow:0 10px 22px -8px rgba(10,20,40,.35);
    transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
  }
  .shx-eco__node-icon svg{ width:56%; height:56%; }
  .shx-eco__node-icon--orange{ background:linear-gradient(135deg, #F97316, #E2600A); }
  .shx-eco__node-icon--blue{ background:linear-gradient(135deg, #2E70C2, #1E4F8F); }

  /* Icon reacts a beat after the card lifts — two-layer hover */
  .shx-eco__node:hover .shx-eco__node-icon,
  .shx-eco__gcard:hover .shx-eco__node-icon{
    transform:scale(1.12) rotate(-6deg);
    transition-delay:.06s;
    box-shadow:0 14px 26px -8px rgba(10,20,40,.4);
  }

  .shx-eco__status{
    position:relative; z-index:1;
    display:inline-flex; align-items:center; gap:6px;
    font-size:11px; font-weight:700; letter-spacing:.02em;
    margin-bottom:7px;
  }
  .shx-eco__status--live{ color:#1a8f4c; }
  .shx-eco__status--soon{ color:rgba(10,20,40,.42); }
  .shx-eco__status-dot{
    width:6px; height:6px; border-radius:50%; background:#22c55e;
    box-shadow:0 0 0 0 rgba(34,197,94,.5);
    animation:shx-eco-live 1.8s infinite;
  }
  @keyframes shx-eco-live{
    0%{ box-shadow:0 0 0 0 rgba(34,197,94,.45); }
    70%{ box-shadow:0 0 0 6px rgba(34,197,94,0); }
    100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
  }

  .shx-eco__node-title{
    position:relative; z-index:1;
    font-size:clamp(14px, 1.05vw, 16px);
    font-weight:700; color:#0A1428;
    margin:0 0 9px;
    line-height:1.3;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .shx-eco__node-link{
    position:relative; z-index:1;
    display:inline-flex; align-items:center; gap:6px;
    font-size:12.5px; font-weight:650;
    color:#2A57A6;
    text-decoration:none;
  }
  .shx-eco__node-link svg{ width:13px; height:13px; transition:transform .3s ease; }
  .shx-eco__node-link:hover svg{ transform:translateX(3px); }

  .shx-eco__node--soon{ opacity:.85; }

  /* hover lift, matched to each node's fixed base transform */
  .shx-eco__spoke:nth-child(1) .shx-eco__node:hover{ transform:translate(-50%, -100%) translateY(-8px) scale(1.025); }
  .shx-eco__spoke:nth-child(2) .shx-eco__node:hover{ transform:translate(0, -100%) translateY(-8px) scale(1.025); }
  .shx-eco__spoke:nth-child(3) .shx-eco__node:hover{ transform:translate(0, 0) translateY(-8px) scale(1.025); }
  .shx-eco__spoke:nth-child(4) .shx-eco__node:hover{ transform:translate(-50%, 0) translateY(-8px) scale(1.025); }
  .shx-eco__spoke:nth-child(5) .shx-eco__node:hover{ transform:translate(-100%, 0) translateY(-8px) scale(1.025); }
  .shx-eco__spoke:nth-child(6) .shx-eco__node:hover{ transform:translate(-100%, -100%) translateY(-8px) scale(1.025); }

  .shx-eco__node:hover{
    box-shadow:0 38px 70px -20px rgba(10,20,40,.4);
    border-color:rgba(42,87,166,.28);
    z-index:5;
  }

  /* ============ MOBILE / TABLET GRID (<1025px — clean cut-off, hub never renders half-broken) ============ */
  .shx-eco__grid{ display:none; }

  @media (max-width: 1024px){
    .shx-eco__hub-outer{ display:none; }

    .shx-eco__grid{
      display:grid;
      grid-template-columns:repeat(2, 1fr);
      gap:16px;
    }

    .shx-eco__gcard{
      position:relative;
      background:#fff;
      border:1px solid rgba(10,20,40,.08);
      border-radius:18px;
      padding:24px 18px 20px;
      text-align:center;
      box-shadow:0 16px 32px -22px rgba(10,20,40,.22);
      transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1);
    }
    .shx-eco__gcard .shx-eco__node-icon{ box-shadow:none; }
    .shx-eco__gcard:hover{ transform:translateY(-8px) scale(1.02); box-shadow:0 26px 48px -18px rgba(10,20,40,.3); }
    .shx-eco__gcard--soon{ opacity:.85; }

    /* Same desynced idle float used on the desktop hub, applied to the
       inner wrapper so it doesn't fight the card's own hover transform. */
    .shx-eco__gcard .shx-eco__node-float{ animation:shx-eco-float 4.6s ease-in-out infinite; }
    .shx-eco__gcard:hover .shx-eco__node-float{ animation-play-state:paused; }
    .shx-eco__gcard:nth-child(1) .shx-eco__node-float{ animation-duration:4.2s; animation-delay:0s; }
    .shx-eco__gcard:nth-child(2) .shx-eco__node-float{ animation-duration:5.1s; animation-delay:.4s; }
    .shx-eco__gcard:nth-child(3) .shx-eco__node-float{ animation-duration:4.5s; animation-delay:.8s; }
    .shx-eco__gcard:nth-child(4) .shx-eco__node-float{ animation-duration:4.9s; animation-delay:.2s; }
    .shx-eco__gcard:nth-child(5) .shx-eco__node-float{ animation-duration:4.3s; animation-delay:.6s; }
    .shx-eco__gcard:nth-child(6) .shx-eco__node-float{ animation-duration:5.0s; animation-delay:1s; }
  }

  @media (max-width: 640px){
    .shx-eco{ padding:84px 20px 100px; }
    .shx-eco__head{ margin-bottom:48px; text-align:left; }
  }

  @media (max-width: 520px){
    .shx-eco__grid{ grid-template-columns:1fr; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  }




  /* ---------------Statatics about page------------ */
  .shldr-stats{
  position:relative;
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  overflow:hidden;
  background:var(--bg);
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  isolation:isolate;
}

.shldr-stats::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius:inherit;
  padding:2px;
  background:linear-gradient(120deg, transparent, rgba(30,100,216,.35), transparent, rgba(244,121,32,.35), transparent);
  background-size:300% 300%;
  animation:shldrBorderMove 7s linear infinite;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  pointer-events:none;
  z-index:3;
}

.shldr-stat-card{
  position:relative;
  z-index:1;
  padding:22px 18px;
  text-align:center;
  transition:transform .35s ease, box-shadow .35s ease;
  opacity:0;
  transform:translateY(24px);
}
.shldr-stat-card.shldr-active{ opacity:1; transform:translateY(0); transition:opacity .6s ease, transform .6s ease; }
.shldr-stat-card:not(:last-child){ border-right:1px solid var(--border); }
.shldr-stat-card:hover{ transform:translateY(-4px); }

.shldr-stat-card:nth-child(1){ background: linear-gradient(165deg, rgba(30,100,216,.07), rgba(30,100,216,0) 65%); }
.shldr-stat-card:nth-child(2){ background: linear-gradient(165deg, rgba(15,35,70,.045), rgba(15,35,70,0) 65%); }
.shldr-stat-card:nth-child(3){ background: linear-gradient(165deg, rgba(244,121,32,.08), rgba(244,121,32,0) 65%); }

.shldr-stat-icon{
  width:38px; height:38px;
  margin:0 auto 10px;
  border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .35s ease;
}
.shldr-stat-card:nth-child(1) .shldr-stat-icon{ background:linear-gradient(135deg, rgba(30,100,216,.16), rgba(30,100,216,.05)); border:1px solid rgba(30,100,216,.20); }
.shldr-stat-card:nth-child(2) .shldr-stat-icon{ background:linear-gradient(135deg, rgba(15,35,70,.12), rgba(15,35,70,.04)); border:1px solid rgba(15,35,70,.16); }
.shldr-stat-card:nth-child(3) .shldr-stat-icon{ background:linear-gradient(135deg, rgba(244,121,32,.18), rgba(244,121,32,.05)); border:1px solid rgba(244,121,32,.22); }
.shldr-stat-card:hover .shldr-stat-icon{ transform:rotate(-6deg) scale(1.06); }

.shldr-stat-icon svg{ width:17px; height:17px; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.shldr-stat-card:nth-child(1) .shldr-stat-icon svg{ stroke:var(--primary); }
.shldr-stat-card:nth-child(2) .shldr-stat-icon svg{ stroke:var(--text); }
.shldr-stat-card:nth-child(3) .shldr-stat-icon svg{ stroke:var(--secondary); }

.shldr-stat-number{
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight:700;
  font-family:"Fraunces",serif;
  color:var(--text);
  line-height:1;
  letter-spacing:-0.5px;
  margin-bottom:6px;
  display:flex; align-items:flex-end; justify-content:center; gap:1px;
}
.shldr-stat-card:nth-child(1) .shldr-stat-number{ color:var(--primary); }
.shldr-stat-card:nth-child(3) .shldr-stat-number{ color:var(--secondary); }
.shldr-stat-percent{ font-size:.55em; font-weight:600; padding-bottom:.14em; }

.shldr-stat-title{
  font-size:13px;
  font-weight:650;
  color:var(--text);
  margin-bottom:3px;
  letter-spacing:-.01em;
}

.shldr-stat-desc{
  font-size:11px;
  line-height:1.55;
  color:var(--muted);
  max-width:200px;
  margin:0 auto;
}

.shldr-stat-line{
  width:32px; height:3px; border-radius:20px;
  margin:10px auto 0;
  background:linear-gradient(90deg, var(--primary), var(--secondary));
  transform:scaleX(.4);
  transition:.4s;
}
.shldr-stat-card:hover .shldr-stat-line{ transform:scaleX(1); }

@media(max-width:820px){
  .shldr-stats{ grid-template-columns:1fr; }
  .shldr-stat-card{ padding:18px 20px; }
  .shldr-stat-card:not(:last-child){ border-right:none; border-bottom:1px solid var(--border); }
}

@media (prefers-reduced-motion: reduce){
  .shldr-stats::before{ animation:none; }
  .shldr-stat-card{ transition:none; opacity:1; transform:none; }
}

@keyframes shldrBorderMove{
  0%{ background-position:0% 50%; }
  100%{ background-position:300% 50%; }
}


/* Our Values section  */

/* =========================================================
     SCOPED & ISOLATED PREMIA DESIGN (--shldr-val-)
     ========================================================= */
  .shldr-val-section {
    --shldr-orange: #FF6600;
    --shldr-orange-glow: rgba(255, 102, 0, 0.25);
    --shldr-orange-card-bg: linear-gradient(145deg, #FFF8F3 0%, #FFEFE3 100%);
    --shldr-orange-border: rgba(255, 102, 0, 0.35);

    --shldr-blue: #2B78E4;
    --shldr-blue-glow: rgba(43, 120, 228, 0.25);
    --shldr-blue-card-bg: linear-gradient(145deg, #F3F7FE 0%, #E3EEFF 100%);
    --shldr-blue-border: rgba(43, 120, 228, 0.35);

    --shldr-dark: #081220;
    --shldr-body-text: #334155;
    
    --shldr-font-head: 'Sora', sans-serif;
    --shldr-font-body: 'Plus Jakarta Sans', sans-serif;

    background-color: #F8FAFC;
    background-image: 
      radial-gradient(circle at 15% 15%, rgba(255, 102, 0, 0.08) 0%, transparent 45%),
      radial-gradient(circle at 85% 85%, rgba(43, 120, 228, 0.08) 0%, transparent 45%);
    padding:24px;
    font-family: var(--shldr-font-body);
    color: var(--shldr-dark);
    position: relative;
    overflow: hidden;
  }

  .shldr-val-section * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .shldr-val-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }

  /* Header Box */
  .shldr-val-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto clamp(48px, 6vw, 72px);
  }

  .shldr-val-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 18px;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 999px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);
    margin-bottom: 20px;
  }

  .shldr-val-badge-dots {
    display: flex;
    gap: 4px;
  }

  .shldr-val-dot-o { width: 8px; height: 8px; border-radius: 50%; background: var(--shldr-orange); }
  .shldr-val-dot-b { width: 8px; height: 8px; border-radius: 50%; background: var(--shldr-blue); }

  .shldr-val-badge-text {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--shldr-dark);
  }

  .shldr-val-title {
    font-family: var(--shldr-font-head);
    font-size: clamp(32px, 4.5vw, 52px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--shldr-dark);
  }

  /* Grid Layout */
  .shldr-val-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }

  /* Premium Card Base (NO WHITE BACKGROUND) */
  .shldr-val-card {
    border-radius: 28px;
    padding: clamp(32px, 3.5vw, 40px);
    position: relative;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(35px);
    cursor: pointer;
  }

  .shldr-val-card.in-view {
    opacity: 1;
    transform: translateY(0);
  }

  /* Orange Premium Card Variant */
  .shldr-val-card.card-orange {
    background: var(--shldr-orange-card-bg);
    border: 1.5px solid rgba(255, 102, 0, 0.18);
    box-shadow: 0 15px 35px -10px rgba(255, 102, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  .shldr-val-card.card-orange:hover {
    border-color: var(--shldr-orange-border);
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 25px 50px -12px var(--shldr-orange-glow), inset 0 1px 0 #FFFFFF;
  }

  /* Blue Premium Card Variant */
  .shldr-val-card.card-blue {
    background: var(--shldr-blue-card-bg);
    border: 1.5px solid rgba(43, 120, 228, 0.18);
    box-shadow: 0 15px 35px -10px rgba(43, 120, 228, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  .shldr-val-card.card-blue:hover {
    border-color: var(--shldr-blue-border);
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 25px 50px -12px var(--shldr-blue-glow), inset 0 1px 0 #FFFFFF;
  }

  /* Top Glowing Border Accent Line */
  .shldr-val-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 30px;
    right: 30px;
    height: 4px;
    border-radius: 0 0 8px 8px;
    transition: all 0.4s ease;
  }

  .card-orange::before { background: var(--shldr-orange); }
  .card-blue::before { background: var(--shldr-blue); }

  .shldr-val-card:hover::before {
    left: 15px;
    right: 15px;
    height: 5px;
  }

  /* Floating 3D Icon Box */
  .shldr-val-icon {
    width: 62px;
    height: 62px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .card-orange .shldr-val-icon {
    background: var(--shldr-orange);
    color: #FFFFFF;
    box-shadow: 0 12px 25px -6px var(--shldr-orange-glow);
  }

  .card-blue .shldr-val-icon {
    background: var(--shldr-blue);
    color: #FFFFFF;
    box-shadow: 0 12px 25px -6px var(--shldr-blue-glow);
  }

  .shldr-val-card:hover .shldr-val-icon {
    transform: scale(1.12) rotate(-5deg);
  }

  /* Card Typography */
  .shldr-val-card h4 {
    font-family: var(--shldr-font-head);
    font-size: clamp(21px, 1.8vw, 24px);
    font-weight: 700;
    color: var(--shldr-dark);
    margin-bottom: 14px;
    letter-spacing: -0.01em;
  }

  .shldr-val-card p {
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--shldr-body-text);
    font-weight: 500;
  }

  /* Card Footer Info */
  .shldr-val-footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .shldr-val-tag {
    font-family: var(--shldr-font-head);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .card-orange .shldr-val-tag { color: var(--shldr-orange); }
  .card-blue .shldr-val-tag { color: var(--shldr-blue); }

  .shldr-val-index {
    font-family: var(--shldr-font-head);
    font-size: 13px;
    font-weight: 800;
    color: #94A3B8;
  }

  /* Responsive Layout */
  @media (max-width: 1024px) {
    .shldr-val-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }
  }

  @media (max-width: 640px) {
    .shldr-val-grid {
      grid-template-columns: 1fr;
    }

    .shldr-val-section {
      padding: 55px 18px;
    }

    .shldr-val-card {
      padding: 28px;
    }
  }

  /* =========================================================
     SCOPED STYLES - WHY SHLDR SECTION (--shldr-why-)
     ========================================================= */
  .shldr-why-section {
    --sw-orange: #FF6600;
    --sw-orange-light: #FFF5ED;
    --sw-orange-border: rgba(255, 102, 0, 0.25);

    --sw-blue: #2B78E4;
    --sw-blue-light: #EEF4FF;
    --sw-blue-border: rgba(43, 120, 228, 0.25);

    --sw-dark: #081220;
    --sw-body: #475569;
    --sw-bg: #FAFCFF;

    --sw-font-head: 'Sora', sans-serif;
    --sw-font-body: 'Plus Jakarta Sans', sans-serif;

    background-color: var(--sw-bg);
    padding: 30px;
    font-family: var(--sw-font-body);
    color: var(--sw-dark);
    position: relative;
    overflow: hidden;
  }

  .shldr-why-section * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .shldr-why-container {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
  }

  /* LEFT COLUMN STYLING */
  .shldr-why-left {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .shldr-why-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 100px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    width: fit-content;
  }

  .shldr-why-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sw-orange);
    box-shadow: 0 0 8px var(--sw-orange);
  }

  .shldr-why-badge-text {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sw-dark);
  }

  .shldr-why-title {
    font-family: var(--sw-font-head);
    font-size: clamp(32px, 4.2vw, 48px);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
    color: var(--sw-dark);
  }

  .shldr-why-lede {
    font-size: 17px;
    line-height: 1.6;
    color: var(--sw-body);
    font-weight: 500;
  }

  /* Image Box in Left Column */
  .shldr-why-img-wrapper {
    position: relative;
    margin-top: 10px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px -15px rgba(8, 18, 32, 0.12);
    border: 1px solid rgba(226, 232, 240, 0.8);
    background: #FFFFFF;
  }

  .shldr-why-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .shldr-why-img-wrapper:hover img {
    transform: scale(1.03);
  }

  /* Floating Overlay Card on Image */
  .shldr-why-img-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 12px 20px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  }

  .shldr-why-img-badge-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sw-orange);
    color: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .shldr-why-img-badge-text h5 {
    font-family: var(--sw-font-head);
    font-size: 14px;
    font-weight: 700;
    color: var(--sw-dark);
  }

  .shldr-why-img-badge-text p {
    font-size: 12px;
    color: var(--sw-body);
  }

  /* RIGHT COLUMN - CARDS LIST */
  .shldr-why-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .shldr-why-card {
    border-radius: 20px;
    padding: 24px 28px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    border: 1.5px solid transparent;
  }

  /* Orange Card Variation */
  .shldr-why-card.theme-orange {
    background: linear-gradient(135deg, #FFF9F5 0%, #FFF0E5 100%);
    border-color: rgba(255, 102, 0, 0.12);
  }

  .shldr-why-card.theme-orange:hover {
    border-color: var(--sw-orange-border);
    transform: translateX(8px);
    box-shadow: 0 15px 30px -10px rgba(255, 102, 0, 0.15);
  }

  /* Blue Card Variation */
  .shldr-why-card.theme-blue {
    background: linear-gradient(135deg, #F5F8FE 0%, #E8F0FE 100%);
    border-color: rgba(43, 120, 228, 0.12);
  }

  .shldr-why-card.theme-blue:hover {
    border-color: var(--sw-blue-border);
    transform: translateX(8px);
    box-shadow: 0 15px 30px -10px rgba(43, 120, 228, 0.15);
  }

  /* Icon Containers */
  .shldr-why-icon-box {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
  }

  .theme-orange .shldr-why-icon-box {
    background: var(--sw-orange);
    color: #FFFFFF;
    box-shadow: 0 8px 18px rgba(255, 102, 0, 0.25);
  }

  .theme-blue .shldr-why-icon-box {
    background: var(--sw-blue);
    color: #FFFFFF;
    box-shadow: 0 8px 18px rgba(43, 120, 228, 0.25);
  }

  .shldr-why-card:hover .shldr-why-icon-box {
    transform: scale(1.1) rotate(-4deg);
  }

  /* Card Content */
  .shldr-why-card-content h4 {
    font-family: var(--sw-font-head);
    font-size: 19px;
    font-weight: 700;
    color: var(--sw-dark);
    margin-bottom: 8px;
    line-height: 1.3;
  }

  .shldr-why-card-content p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--sw-body);
    font-weight: 500;
  }

  /* RESPONSIVE LAYOUT RULES */
  @media (max-width: 992px) {
    .shldr-why-container {
      grid-template-columns: 1fr;
      gap: 48px;
    }

    .shldr-why-card:hover {
      transform: translateY(-4px);
    }
  }

  @media (max-width: 640px) {
    .shldr-why-section {
      padding: 50px 18px;
    }

    .shldr-why-card {
      padding: 20px;
      flex-direction: column;
      gap: 16px;
    }
  }

   /* =========================================================
     SCOPED PROCESS TRACK LAYOUT (--shldr-prc-)
     ========================================================= */
  .shldr-prc-section {
    --sp-blue: #2B78E4;
    --sp-blue-light: #EEF4FF;
    --sp-orange: #FF6600;
    --sp-orange-light: #FFF5ED;
    --sp-dark: #081220;
    --sp-body: #64748B;
    --sp-bg: #FFFFFF;

    --sp-font-head: 'Sora', sans-serif;
    --sp-font-body: 'Plus Jakarta Sans', sans-serif;

    background-color: var(--sp-bg);
     padding: 30px;
    font-family: var(--sp-font-body);
    color: var(--sp-dark);
    position: relative;
    overflow: hidden;
  }

  .shldr-prc-section * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .shldr-prc-container {
    max-width: 1280px;
    margin: 0 auto;
  }

  /* Section Header */
  .shldr-prc-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(40px, 6vw, 64px);
  }

  .shldr-prc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 18px;
    background: var(--sp-blue-light);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sp-blue);
    margin-bottom: 16px;
  }

  .shldr-prc-title {
    font-family: var(--sp-font-head);
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--sp-dark);
    margin-bottom: 14px;
  }

  .shldr-prc-title span {
    color: var(--sp-blue);
  }

  .shldr-prc-lede {
    font-size: 16px;
    line-height: 1.6;
    color: var(--sp-body);
  }

  /* DESKTOP PROCESS TRACK (Single Line) */
  .shldr-prc-track-wrapper {
    position: relative;
    padding: 40px 0 20px;
  }

  .shldr-prc-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    position: relative;
    z-index: 2;
  }

  /* Connecting Dashed/Solid Line behind icons */
  .shldr-prc-line {
    position: absolute;
    top: 92px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: #E2E8F0;
    z-index: 1;
  }

  .shldr-prc-line-active {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--sp-blue), var(--sp-orange));
    opacity: 0.6;
  }

  /* Individual Step Node */
  .shldr-prc-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 2;
    cursor: pointer;
  }

  /* Icon Badge Container */
  .shldr-prc-icon-badge {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .shldr-prc-step.theme-blue .shldr-prc-icon-badge {
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
    color: #FFFFFF;
    box-shadow: 0 10px 25px rgba(43, 120, 228, 0.3);
  }

  .shldr-prc-step.theme-orange .shldr-prc-icon-badge {
    background: linear-gradient(135deg, #FF7A1A 0%, #E65C00 100%);
    color: #FFFFFF;
    box-shadow: 0 10px 25px rgba(255, 102, 0, 0.3);
  }

  .shldr-prc-step:hover .shldr-prc-icon-badge {
    transform: translateY(-8px) scale(1.08);
  }

  /* Number Overlay Bubble (01, 02, etc.) */
  .shldr-prc-num {
    position: absolute;
    top: 0;
    right: -4px;
    width: 28px;
    height: 28px;
    background: #0F172A;
    color: #FFFFFF;
    border-radius: 50%;
    font-family: var(--sp-font-head);
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  }

  .shldr-prc-step-title {
    font-family: var(--sp-font-head);
    font-size: 16px;
    font-weight: 700;
    color: var(--sp-dark);
    margin-bottom: 6px;
  }

  .shldr-prc-step-desc {
    font-size: 13px;
    line-height: 1.4;
    color: var(--sp-body);
    font-weight: 500;
  }

  /* MOBILE AUTO SCROLLING 2-LINE TRACK */
  .shldr-prc-mobile-slider {
    display: none;
  }

  @media (max-width: 1024px) {
    .shldr-prc-track-wrapper {
      display: none;
    }

    /* Enable Mobile 2-Row Layout */
    .shldr-prc-mobile-slider {
      display: flex;
      flex-direction: column;
      gap: 16px;
      overflow: hidden;
      padding: 10px 0;
      mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
      -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    }

    .shldr-prc-row {
      display: flex;
      gap: 16px;
      width: max-content;
    }

    .shldr-prc-row.row-1 {
      animation: autoScrollLeft 18s linear infinite;
    }

    .shldr-prc-row.row-2 {
      animation: autoScrollRight 18s linear infinite;
    }

    @keyframes autoScrollLeft {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    @keyframes autoScrollRight {
      0% { transform: translateX(-50%); }
      100% { transform: translateX(0); }
    }

    /* Compact Mobile Card */
    .shldr-prc-mob-card {
      background: #FAFCFF;
      border: 1.5px solid #E2E8F0;
      border-radius: 16px;
      padding: 14px 18px;
      display: flex;
      align-items: center;
      gap: 14px;
      width: 250px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    }

    .shldr-prc-mob-badge {
      position: relative;
      width: 46px;
      height: 46px;
      min-width: 46px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFF;
    }

    .shldr-prc-mob-card.theme-blue .shldr-prc-mob-badge {
      background: var(--sp-blue);
    }

    .shldr-prc-mob-card.theme-orange .shldr-prc-mob-badge {
      background: var(--sp-orange);
    }

    .shldr-prc-mob-num {
      position: absolute;
      top: -2px;
      right: -2px;
      width: 18px;
      height: 18px;
      background: #081220;
      color: #FFF;
      border-radius: 50%;
      font-size: 9px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .shldr-prc-mob-info h4 {
      font-family: var(--sp-font-head);
      font-size: 14px;
      font-weight: 700;
      color: var(--sp-dark);
    }

    .shldr-prc-mob-info p {
      font-size: 11px;
      color: var(--sp-body);
    }
  }

   /* =========================================================
     SHLDR BRAND ULTIMATE ISOLATED COMPONENT (--shldr-v5-)
     ========================================================= */

  .shldr-v5-root-section {
    /* Exact Logo Branding Colors */
    --shldr-orange: #FF6600;
    --shldr-blue: #2B78E4;
    --shldr-orange-light: rgba(255, 102, 0, 0.08);
    --shldr-blue-light: rgba(43, 120, 228, 0.08);
    
    --shldr-dark: #081220;
    --shldr-body: #475569;
    --shldr-bg: #F8FAFC;
    --shldr-card-bg: #FFFFFF;
    --shldr-border: #E2E8F0;

    /* SHLDR Dual-Color Brand Gradients */
    --shldr-brand-grad: linear-gradient(135deg, #FF6600 0%, #2B78E4 100%);
    --shldr-brand-glow: linear-gradient(135deg, rgba(255, 102, 0, 0.2) 0%, rgba(43, 120, 228, 0.2) 100%);

    --shldr-font-head: 'Sora', sans-serif;
    --shldr-font-body: 'Plus Jakarta Sans', sans-serif;

    background-color: var(--shldr-bg);
    padding: clamp(40px, 6vw, 80px) 20px;
    font-family: var(--shldr-font-body);
    color: var(--shldr-dark);
    position: relative;
    overflow: hidden;

    margin-top: -30px !important;
    margin-bottom: -30px !important;
  }

  .shldr-v5-root-section * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .shldr-v5-main-container {
    max-width: 1220px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }

  /* MAIN GRID LAYOUT */
  .shldr-v5-split-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 36px;
    align-items: stretch;
  }

  /* LEFT SIDE WRAPPER */
  .shldr-v5-left-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  /* 2x2 CONTACT CARDS GRID */
  .shldr-v5-contact-2x2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .shldr-v5-contact-card {
    background: var(--shldr-card-bg);
    border: 1.5px solid var(--shldr-border);
    border-radius: 20px;
    padding: 22px 18px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);

    /* Pure Motion Animation Transition */
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
    will-change: transform, box-shadow;
  }

  /* Hover Action: ONLY Motion Animation & Elevation, NO Color Swap */
  .shldr-v5-contact-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
  }

  /* Icons: Default Gradient Filled */
  .shldr-v5-icon-bubble {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--shldr-brand-grad);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    box-shadow: 0 6px 16px rgba(255, 102, 0, 0.22);

    /* Smooth Micro scale animation on hover */
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .shldr-v5-contact-card:hover .shldr-v5-icon-bubble {
    transform: scale(1.08);
  }

  .shldr-v5-card-head {
    font-family: var(--shldr-font-head);
    font-size: 15px;
    font-weight: 700;
    color: var(--shldr-dark);
    margin-bottom: 4px;
  }

  .shldr-v5-card-link,
  .shldr-v5-card-text {
    font-size: 13.5px;
    color: var(--shldr-body);
    font-weight: 600;
    text-decoration: none;
  }

  /* CREATIVE ADVANCED MAP CONTAINER */
  .shldr-v5-map-card-box {
    background: var(--shldr-card-bg);
    border: 1.5px solid var(--shldr-border);
    border-radius: 20px;
    padding: 10px;
    height: 100%;
    min-height: 230px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
  }

  .shldr-v5-map-card-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
  }

  .shldr-v5-map-inner-wrapper {
    width: 100%;
    height: 100%;
    min-height: 210px;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
  }

  .shldr-v5-map-inner-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }

  /* Map Badge Overlay */
  .shldr-v5-map-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    background: rgba(8, 18, 32, 0.88);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 10px 14px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #FFFFFF;
    font-size: 12.5px;
    pointer-events: none;
  }

  .shldr-v5-map-badge-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .shldr-v5-pulse-dot {
    width: 8px;
    height: 8px;
    background: #25D366;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    animation: shldrPulseDot 1.8s infinite;
  }

  @keyframes shldrPulseDot {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
  }

  /* RIGHT SIDE FORM PANEL */
  .shldr-v5-form-panel {
    background: var(--shldr-card-bg);
    border: 1.5px solid var(--shldr-border);
    border-radius: 24px;
    padding: clamp(26px, 3.8vw, 42px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .shldr-v5-brand-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--shldr-orange-light) 0%, var(--shldr-blue-light) 100%);
    color: var(--shldr-orange);
    padding: 6px 14px;
    border-radius: 100px;
    width: fit-content;
    margin-bottom: 12px;
    border: 1px solid rgba(255, 102, 0, 0.2);
  }

  .shldr-v5-form-title {
    font-family: var(--shldr-font-head);
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    color: var(--shldr-dark);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
  }

  .shldr-v5-form-desc {
    font-size: 14px;
    color: var(--shldr-body);
    margin-bottom: 24px;
    line-height: 1.5;
  }

  /* 6 SERVICES SELECTION SECTION */
  .shldr-v5-services-label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--shldr-dark);
    margin-bottom: 12px;
    display: block;
  }

  .shldr-v5-services-chips-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 22px;
  }

  .shldr-v5-service-chip {
    position: relative;
  }

  .shldr-v5-service-chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  .shldr-v5-chip-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #F8FAFC;
    border: 1.5px solid var(--shldr-border);
    border-radius: 100px;
    cursor: pointer;
    user-select: none;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  }

  /* Chip Hover Animation Only */
  .shldr-v5-chip-content:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }

  .shldr-v5-chip-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: rgba(255, 102, 0, 0.1);
    color: var(--shldr-orange);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .shldr-v5-chip-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--shldr-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .shldr-v5-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-left: auto;
  }

  .shldr-v5-status-dot.green { background: #10B981; }
  .shldr-v5-status-dot.orange { background: #FF6600; }

  /* Checked Service State */
  .shldr-v5-service-chip input[type="checkbox"]:checked + .shldr-v5-chip-content {
    background: var(--shldr-card-bg);
    border-color: var(--shldr-blue);
    box-shadow: 0 4px 12px rgba(43, 120, 228, 0.15);
  }

  .shldr-v5-service-chip input[type="checkbox"]:checked + .shldr-v5-chip-content .shldr-v5-chip-icon {
    background: var(--shldr-blue);
    color: #FFFFFF;
  }

  /* FORM INPUT FIELDS */
  .shldr-v5-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .shldr-v5-input-box {
    position: relative;
  }

  .shldr-v5-input-box input,
  .shldr-v5-input-box textarea {
    width: 100%;
    padding: 15px 16px;
    font-family: var(--shldr-font-body);
    font-size: 14.5px;
    color: var(--shldr-dark);
    background: #F8FAFC;
    border: 1.5px solid var(--shldr-border);
    border-radius: 12px;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
  }

  .shldr-v5-input-box textarea {
    resize: vertical;
    min-height: 100px;
  }

  .shldr-v5-input-box label {
    position: absolute;
    left: 16px;
    top: 15px;
    font-size: 14px;
    color: #94A3B8;
    pointer-events: none;
    transition: all 0.2s ease;
  }

  .shldr-v5-input-box input:focus ~ label,
  .shldr-v5-input-box input:not(:placeholder-shown) ~ label,
  .shldr-v5-input-box textarea:focus ~ label,
  .shldr-v5-input-box textarea:not(:placeholder-shown) ~ label {
    top: -10px;
    left: 12px;
    font-size: 11px;
    font-weight: 800;
    color: var(--shldr-orange);
    background: #FFFFFF;
    padding: 0 5px;
    border-radius: 4px;
  }

  .shldr-v5-input-box input:focus,
  .shldr-v5-input-box textarea:focus {
    background: #FFFFFF;
    border-color: var(--shldr-orange);
    box-shadow: 0 0 0 4px rgba(255, 102, 0, 0.12);
  }

  .shldr-v5-phone-wrap {
    display: flex;
    align-items: center;
  }

  .shldr-v5-phone-prefix {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 700;
    color: var(--shldr-dark);
    pointer-events: none;
    z-index: 2;
  }

  .shldr-v5-phone-input {
    padding-left: 48px !important;
  }

  .shldr-v5-err-msg {
    font-size: 11.5px;
    color: #EF4444;
    margin-top: 4px;
    display: none;
    font-weight: 600;
  }

  /* SUBMIT BUTTON WITH SHLDR LOGO GRADIENT & MOTION ANIMATION ONLY */
  .shldr-v5-btn-submit {
    width: 100%;
    padding: 16px;
    background: var(--shldr-brand-grad);
    color: #FFFFFF;
    border: none;
    border-radius: 12px;
    font-family: var(--shldr-font-head);
    font-size: 15.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 22px rgba(255, 102, 0, 0.28);
    margin-top: 6px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  }

  /* Button Hover Animation */
  .shldr-v5-btn-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(43, 120, 228, 0.35);
  }

  /* =========================================================
     RESPONSIVE DESIGN (MOBILE: OKATI KINDA OKATI)
     ========================================================= */

  @media (max-width: 992px) {
    .shldr-v5-split-grid {
      grid-template-columns: 1fr;
      gap: 28px;
    }

    .shldr-v5-services-chips-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 600px) {
    .shldr-v5-root-section {
      padding: 30px 14px;
    }

    .shldr-v5-contact-2x2 {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    .shldr-v5-services-chips-grid {
      grid-template-columns: 1fr;
      gap: 8px;
    }

    .shldr-v5-form-panel {
      padding: 22px 16px;
    }

    .shldr-v5-chip-content {
      padding: 8px 12px;
    }

    .shldr-v5-map-card-box {
      min-height: 200px;
    }
  }

  /* ---------statics -------- */
   /* =========================================================
     SHLDR PREMIUM COMPACT IMPACT MODULE (--shldr-impact-)
     ========================================================= */

  .shldr-impact-section {
    --shldr-orange: #FF6600;
    --shldr-blue: #2B78E4;
    --shldr-dark: #0F172A;
    --shldr-body: #64748B;
    --shldr-bg: #F8FAFC;
    
    --shldr-font-head: 'Sora', sans-serif;
    --shldr-font-body: 'Plus Jakarta Sans', sans-serif;

    background-color: var(--shldr-bg);
    padding: clamp(24px, 3.5vw, 40px) 16px;
    font-family: var(--shldr-font-body);
    width: 100%;
    box-sizing: border-box;
  }

  .shldr-impact-section * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  .shldr-impact-container {
    max-width: 1080px; /* Reduced max width for compact look */
    margin: 0 auto;
  }

  /* 3-COLUMN COMPACT GRID */
  .shldr-impact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px; /* Reduced gap */
    align-items: stretch;
  }

  /* INDIVIDUAL PREMIUM CARD */
  .shldr-impact-card {
    background: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 18px;
    padding: 22px 18px; /* Compact Padding */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
    
    /* Smooth Motion */
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, box-shadow;
  }

  /* Subtle Premium Top Gradient Bar */
  .shldr-impact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3.5px;
    opacity: 0.85;
    transition: opacity 0.3s ease;
  }

  .shldr-impact-card:nth-child(1)::before {
    background: linear-gradient(90deg, #2B78E4 0%, #60A5FA 100%);
  }
  .shldr-impact-card:nth-child(2)::before {
    background: linear-gradient(90deg, #10B981 0%, #34D399 100%);
  }
  .shldr-impact-card:nth-child(3)::before {
    background: linear-gradient(90deg, #FF6600 0%, #F59E0B 100%);
  }

  /* Premium Hover Elevation & Glow */
  .shldr-impact-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    border-color: rgba(203, 213, 225, 0.8);
  }

  .shldr-impact-card:hover::before {
    opacity: 1;
  }

  /* GLOWING ICON BUBBLE (COMPACT) */
  .shldr-impact-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    position: relative;
    color: #FFFFFF;
  }

  /* Vibrant Dual Gradients per Card */
  .shldr-impact-card:nth-child(1) .shldr-impact-icon-box {
    background: linear-gradient(135deg, #2B78E4 0%, #1D4ED8 100%);
    box-shadow: 0 6px 14px rgba(43, 120, 228, 0.28);
  }

  .shldr-impact-card:nth-child(2) .shldr-impact-icon-box {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    box-shadow: 0 6px 14px rgba(16, 185, 129, 0.28);
  }

  .shldr-impact-card:nth-child(3) .shldr-impact-icon-box {
    background: linear-gradient(135deg, #FF6600 0%, #EA580C 100%);
    box-shadow: 0 6px 14px rgba(255, 102, 0, 0.28);
  }

  .shldr-impact-icon-box svg {
    width: 20px;
    height: 20px;
    stroke: #FFFFFF;
    display: block;
    transition: transform 0.3s ease;
  }

  .shldr-impact-card:hover .shldr-impact-icon-box svg {
    transform: scale(1.1);
  }

  /* COMPACT GRADIENT TYPOGRAPHY */
  .shldr-impact-number-wrap {
    font-family: var(--shldr-font-head);
    font-size: clamp(30px, 3.2vw, 38px); /* Reduced Size */
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 6px;
    letter-spacing: -0.03em;
  }

  /* Vibrant Number Gradients */
  .shldr-impact-card:nth-child(1) .shldr-impact-number-wrap {
    background: linear-gradient(135deg, #0F172A 30%, #2B78E4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .shldr-impact-card:nth-child(2) .shldr-impact-number-wrap {
    background: linear-gradient(135deg, #0F172A 30%, #10B981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .shldr-impact-card:nth-child(3) .shldr-impact-number-wrap {
    background: linear-gradient(135deg, #0F172A 30%, #FF6600 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .shldr-impact-suffix {
    font-size: 0.8em;
  }

  /* TITLE & DESCRIPTION (COMPACT) */
  .shldr-impact-title {
    font-family: var(--shldr-font-head);
    font-size: 15px; /* Reduced Font Size */
    font-weight: 700;
    color: var(--shldr-dark);
    margin-bottom: 6px;
  }

  .shldr-impact-desc {
    font-size: 12.5px; /* Reduced Font Size */
    color: var(--shldr-body);
    line-height: 1.45;
    max-width: 270px;
  }

  /* Modern Glassy Pill Divider */
  .shldr-impact-bottom-line {
    width: 28px;
    height: 3px;
    background: #F1F5F9;
    margin-top: 12px;
    border-radius: 10px;
    transition: width 0.3s ease, background 0.3s ease;
  }

  .shldr-impact-card:hover .shldr-impact-bottom-line {
    width: 44px;
    background: var(--shldr-orange);
  }

  /* =========================================================
     RESPONSIVE BREAKPOINTS (MOBILE: OKATI KINDA OKATI)
     ========================================================= */

  @media (max-width: 868px) {
    .shldr-impact-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }
  }

  @media (max-width: 580px) {
    .shldr-impact-grid {
      grid-template-columns: 1fr; /* OKATI KINDA OKATI MOBILE LO */
      gap: 12px;
    }

    .shldr-impact-card {
      padding: 18px 14px;
    }
  }

  /* -------------------------nav----------------------- */

  /* Reset & Base Variables */
:root {
  --primary-orange: #f26522;
  --primary-blue: #3b71ca;
  --text-dark: #333333;
  --text-muted: #666666;
  --bg-white: #ffffff;
  --bg-light: #f5f6f8;
  --border-light: #e2e8f0;
  --transition-speed: 0.3s;
}



/* Header Container */
.app-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--bg-white);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  z-index: 1000;
}

.app-header__container {
  max-width: 1350px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  gap: 15px;
}

/* Logo */
.app-header__logo-wrapper {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.app-header__logo-img {
  height: 42px;
  width: auto;
  object-fit: contain;
}

/* Center Pill Navigation */
.app-header__menu-pill {
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 50px;
  padding: 4px;
}

.app-header__menu-item {
  position: relative;
  z-index: 2;
  border: none;
  background: transparent;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 40px;
  transition: color var(--transition-speed) ease;
}

.app-header__menu-item.is-active,
.app-header__menu-item:hover {
  color: var(--primary-orange);
}

.app-header__menu-item.is-active {
  background: var(--bg-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Dynamic Hover Pill Highlight */
.app-header__pill-highlight {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  background: var(--bg-white);
  border-radius: 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  z-index: 1;
}

/* Right Side Utilities */
.app-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Search Box */
.app-header__search-box {
  display: flex;
  align-items: center;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 6px 12px;
  gap: 8px;
  width: 220px;
  transition: border-color var(--transition-speed);
}

.app-header__search-box:focus-within {
  border-color: var(--primary-orange);
  background: #fff;
}

.app-header__search-box svg {
  width: 16px;
  height: 16px;
  stroke: #888;
  flex-shrink: 0;
}

.app-header__search-box input {
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  width: 100%;
  color: var(--text-dark);
}

.app-header__v-divider {
  width: 1px;
  height: 24px;
  background-color: var(--border-light);
  margin: 0 4px;
}

/* Social Buttons */
.app-header__social-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-header__social-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  text-decoration: none;
  transition: all var(--transition-speed);
}

.app-header__social-btn svg {
  width: 16px;
  height: 16px;
}

.app-header__social-btn:hover {
  border-color: var(--primary-orange);
  color: var(--primary-orange);
  transform: translateY(-2px);
}

/* Original brand colors */
.app-header__social-btn--wa{
  background:#25D366;
  border-color:#25D366;
  color:#fff;
}
.app-header__social-btn--wa:hover{
  background:#1EBE5B;
  border-color:#1EBE5B;
  color:#fff;
}

.app-header__social-btn--insta{
  background:linear-gradient(45deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);
  border-color:transparent;
  color:#fff;
}
.app-header__social-btn--insta:hover{
  filter:brightness(1.08);
  border-color:transparent;
  color:#fff;
  transform:translateY(-2px);
}

.app-header__social-btn--fb{
  background:#1877F2;
  border-color:#1877F2;
  color:#fff;
}
.app-header__social-btn--fb:hover{
  background:#0F63D6;
  border-color:#0F63D6;
  color:#fff;
}

/* Action CTA Button */
.app-header__action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--primary-orange), var(--primary-blue));
  color: #fff;
  padding: 10px 20px;
  border-radius: 30px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(242, 101, 34, 0.25);
  transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.app-header__action-btn svg {
  width: 16px;
  height: 16px;
}

.app-header__action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(242, 101, 34, 0.35);
}

/* Hamburger Toggle */
.app-header__hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
}

.app-header__hamburger span {
  width: 100%;
  height: 2px;
  background-color: var(--text-dark);
  border-radius: 2px;
  transition: all var(--transition-speed);
}

.app-header__hamburger.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.app-header__hamburger.is-open span:nth-child(2) {
  opacity: 0;
}

.app-header__hamburger.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile Drawer Overlay & Panel */
.app-header__mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-speed) ease, visibility var(--transition-speed) ease;
}

.app-header__mobile-drawer.is-active {
  opacity: 1;
  visibility: visible;
}

.app-header__drawer-panel {
  position: absolute;
  top: 0;
  right: -100%;
  width: 280px;
  height: 100%;
  background: var(--bg-white);
  padding: 80px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: right var(--transition-speed) ease;
  box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
}

.app-header__mobile-drawer.is-active .app-header__drawer-panel {
  right: 0;
}

.app-header__drawer-search {
  display: flex;
  align-items: center;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 8px 12px;
  gap: 8px;
}

.app-header__drawer-search svg {
  width: 16px;
  height: 16px;
  stroke: #888;
}

.app-header__drawer-search input {
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  font-size: 14px;
}

.app-header__drawer-link {
  text-decoration: none;
  color: var(--text-dark);
  font-size: 16px;
  font-weight: 600;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}

.app-header__drawer-social {
  display: flex;
  gap: 12px;
  margin-top: 10px;
}

.app-header__drawer-footer {
  margin-top: auto;
}

.app-header__action-btn--full {
  width: 100%;
  justify-content: center;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

@media (max-width: 1024px) {
  .app-header__search-box {
    width: 160px;
  }
  
  .app-header__menu-item {
    padding: 8px 12px;
    font-size: 13px;
  }
}

@media (max-width: 880px) {
  .app-header__menu-pill,
  .app-header__search-box,
  .app-header__v-divider,
  .app-header__social-group,
  .app-header__actions .app-header__action-btn {
    display: none;
  }

  .app-header__hamburger {
    display: flex;
  }
}

/* gallery */

/* Gallery Section Base Styling */
.app-gallery {
  padding: 80px 20px;
  background-color: #f8fafc;
}

.app-gallery__container {
  max-width: 1350px;
  margin: 0 auto;
}

/* Header Elements */
.app-gallery__header {
  text-align: center;
  max-width: 650px;
  margin: 0 auto 40px auto;
}

.app-gallery__subtitle {
  color: var(--primary-orange, #f26522);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: block;
  margin-bottom: 8px;
}

.app-gallery__title {
  color: #1e293b;
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 12px;
  line-height: 1.2;
}

.app-gallery__description {
  color: #64748b;
  font-size: 16px;
  line-height: 1.6;
}

/* Category Filter Buttons */
.app-gallery__filters {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}

.app-gallery__filter-btn {
  background-color: #ffffff;
  color: #64748b;
  border: 1px solid #e2e8f0;
  padding: 10px 24px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.app-gallery__filter-btn:hover,
.app-gallery__filter-btn.is-active {
  background-color: var(--primary-orange, #f26522);
  color: #ffffff;
  border-color: var(--primary-orange, #f26522);
  box-shadow: 0 4px 12px rgba(242, 101, 34, 0.25);
}

/* Responsive Grid Layout */
.app-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.app-gallery__item {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.app-gallery__item.is-hidden {
  display: none;
}

/* Image Wrapper & Hover Effects */
.app-gallery__image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 4:3 Aspect Ratio */
  overflow: hidden;
  background-color: #e2e8f0;
}

.app-gallery__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.app-gallery__item:hover .app-gallery__image {
  transform: scale(1.08);
}

/* Overlay Design */
.app-gallery__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.app-gallery__item:hover .app-gallery__overlay {
  opacity: 1;
}

.app-gallery__tag {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.app-gallery__item-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.app-gallery__location {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Tablets (Portrait) */
@media (max-width: 992px) {
  .app-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .app-gallery__title {
    font-size: 30px;
  }
}

/* Mobile Devices */
@media (max-width: 600px) {
  .app-gallery {
    padding: 50px 16px;
  }

  .app-gallery__grid {
    grid-template-columns: 1fr; /* Single column on mobile */
    gap: 16px;
  }

  .app-gallery__title {
    font-size: 24px;
  }

  .app-gallery__filters {
    gap: 8px;
  }

  .app-gallery__filter-btn {
    padding: 8px 16px;
    font-size: 13px;
  }

  /* Keep metadata visible on mobile tap/hover touch */
  .app-gallery__overlay {
    opacity: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 80%);
  }
}

/* favicon */
/* =====================================
   SHLDR Premium Preloader
===================================== */

.shldr-preloader{
    position:fixed;
    inset:0;
    width:100%;
    height:100vh;

    background:#ffffff;

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

    z-index:99999;

    transition:opacity .6s ease,
               visibility .6s ease;
}

.shldr-loader-box{
    position:relative;

    width:130px;
    height:130px;

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

.shldr-loader-ring{

    position:absolute;

    width:110px;
    height:110px;

    border-radius:50%;

    border:5px solid rgba(33,150,243,.12);

    border-top:5px solid #ff7a00;
    border-right:5px solid #3d7be0;

    animation:shldrSpin 1s linear infinite;

    box-shadow:
    0 0 25px rgba(61,123,224,.15);
}

.shldr-loader-logo{

    width:78px;
    height:78px;

    border-radius:18px;

    background:#ffffff;

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

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

    animation:shldrPulse 2s infinite;
}

.shldr-loader-logo img{

    width:64px;

    height:auto;

    object-fit:contain;
}

@keyframes shldrSpin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

@keyframes shldrPulse{

    0%{

        transform:scale(1);
    }

    50%{

        transform:scale(1.08);
    }

    100%{

        transform:scale(1);
    }
}

/* Hide Preloader */

.shldr-preloader.hide{

    opacity:0;

    visibility:hidden;

    pointer-events:none;
}