/* Dynamic homepage layer: every selector stays inside the body-only .st-home. */
.st-home { --sh-ink: #101f3c; --sh-muted: #50617c; --sh-border: #dce5f2; overflow: clip; }
.st-home .sh-section { position: relative; padding: 104px 0; }
.st-home .sh-section > .container { position: relative; z-index: 1; }
.st-home h2 { font-size: clamp(32px, 3.6vw, 50px); letter-spacing: -1.8px; }
.st-home h2 span { color: #345bce; }
.st-home .sh-eyebrow { letter-spacing: 2.2px; }
.st-home .sh-eyebrow::before { width: 30px; background: #00877d; }
.st-home .sh-tint { background: #f3f6fc; }
.st-home .sh-intro { background: radial-gradient(ellipse at 90% 20%, #e0e7ff, transparent 55%), radial-gradient(ellipse at 5% 80%, #e6f9f5, transparent 50%), #fff; }
.st-home .sh-intro::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(#8da2c5 1px, transparent 1px); background-size: 26px 26px; opacity: .15; pointer-events: none; }

/* ---------- ambient background blobs ---------- */
.st-home .sh-tint::before {
  content: ''; position: absolute; top: -120px; right: -120px; width: 380px; height: 380px;
  background: radial-gradient(circle at 30% 30%, #c9dff7 0%, rgba(124,150,212,0) 70%);
  border-radius: 50%; opacity: .65; pointer-events: none; z-index: 0;
  animation: sh-drift-a 18s ease-in-out infinite alternate;
}
.st-home .sh-tint::after {
  content: ''; position: absolute; bottom: -90px; left: -90px; width: 280px; height: 280px;
  background: radial-gradient(circle at 70% 70%, #bfe9e0 0%, rgba(107,201,179,0) 70%);
  border-radius: 50%; opacity: .55; pointer-events: none; z-index: 0;
  animation: sh-drift-b 22s ease-in-out infinite alternate;
}
@keyframes sh-drift-a { to { transform: translate(40px, -30px) scale(1.12); } }
@keyframes sh-drift-b { to { transform: translate(-30px, 25px) scale(1.08); } }

/* ---------- reveal / stagger animation system ---------- */
.st-home [data-sh-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .55s ease-out, transform .55s ease-out; transition-delay: var(--sh-delay, 0s); }
.st-home [data-sh-reveal].sh-visible, .st-home [data-sh-reveal]:not(.sh-reveal) { opacity: 1; transform: translateY(0); }
.st-home .sh-reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s ease-out, transform .55s ease-out; transition-delay: var(--sh-delay, 0s); }
.st-home .sh-reveal.sh-visible { opacity: 1; transform: translateY(0); }

/* ---------- gradient shift for capabilities strip ---------- */
@keyframes sh-gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---------- trust strip marquee scroll ---------- */
@keyframes sh-scroll-trust { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ---------- CTA button pulse glow ---------- */
@keyframes sh-cta-pulse { 0%, 100% { box-shadow: 0 8px 22px rgba(52, 91, 206, 0.25); } 50% { box-shadow: 0 8px 35px rgba(52, 91, 206, 0.45); } }

/* ---------- AI floating particles ---------- */
@keyframes aiFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(15px, -20px) scale(1.1); } 50% { transform: translate(-10px, 15px) scale(1); } 75% { transform: translate(20px, 10px) scale(1.15); } }

/* ---------- capability strip ---------- */
.st-home .sh-capabilities { background: #101f3c; color: #eef4ff; border: 0; padding: 26px 0; }
.st-home .sh-capability-row i, .st-home .sh-capability-row a { color: #94e5da; }
.st-home .sh-label { color: #fff; font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; }
.st-home .sh-line { flex: 1; height: 1px; background: linear-gradient(90deg, #35518580, #7fd1c4 40%, #35518580); margin: 0 18px; }
.st-home .sh-capability-row a {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; transition: background .25s, color .25s, transform .25s;
}
.st-home .sh-capability-row a:hover { background: #1c2f52; color: #bff5e8; transform: translateY(-2px); }

/* ---------- buttons: theme-aware animated gradient + sheen sweep ---------- */
.st-home .sh-button {
  position: relative; overflow: hidden; border: 0;
  background: linear-gradient(110deg, #0057d9, #5745cb, #00877d, #0057d9);
  background-size: 280% 100%;
  animation: sh-cta-flow 9s ease-in-out infinite;
  box-shadow: 0 8px 22px #254ccb24;
  transition: transform .25s, box-shadow .25s, filter .25s;
}
.st-home .sh-button::after {
  content: ''; position: absolute; top: 0; left: -75%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .65s ease; pointer-events: none;
}
.st-home .sh-button:hover {
  /* home.css sets a solid hover background; re-declare the gradient so the flow survives hover. */
  background-image: linear-gradient(110deg, #0047b4, #4332b2, #00695f, #0047b4);
  background-size: 280% 100%;
  filter: brightness(1.08); box-shadow: 0 12px 30px #254ccb42; transform: translateY(-2px);
}
.st-home .sh-button:hover::after { left: 135%; }
.st-home .sh-button:focus-visible { outline: 3px solid #19b49a; outline-offset: 3px; }
/* Dark sections get the teal accent variant that matches their palette. */
.st-home .sh-dark .sh-button, .st-home .sh-cta .sh-button {
  background: linear-gradient(110deg, #345bce, #19b49a, #7ee7ce, #345bce);
  background-size: 280% 100%;
  box-shadow: 0 8px 22px rgba(25, 180, 154, .28);
}
.st-home .sh-dark .sh-button:hover, .st-home .sh-cta .sh-button:hover {
  background-image: linear-gradient(110deg, #2849b0, #149c82, #7ee7ce, #2849b0);
  background-size: 280% 100%;
  box-shadow: 0 12px 30px rgba(25, 180, 154, .4);
}
.st-home .sh-text-link { color: #345bce; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .25s, color .25s; }
.st-home .sh-text-link:hover { color: #2a48a0; border-bottom-color: #2a48a0; }
.st-home .sh-dark .sh-text-link { color: #7ee7ce; }
.st-home .sh-dark .sh-text-link:hover { color: #fff; border-bottom-color: #7ee7ce; }
.st-home .sh-text-link span { transition: transform .25s; }
.st-home .sh-text-link:hover span { transform: translateX(3px); }
.st-home .sh-cta { background: #101f3c; color: #eef4ff; overflow: hidden; }
@keyframes sh-cta-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---------- jump nav ---------- */
.st-home .sh-jump { background: #fff; border: 0; }
.st-home .sh-jump a {
  color: #3a4867; text-decoration: none; padding: 4px 0; font-weight: 500; position: relative;
  transition: color .25s, transform .25s;
}
.st-home .sh-jump a:hover { color: #345bce; transform: translateX(4px); }
.st-home .sh-jump a::after {
  content: ''; position: absolute; bottom: 5px; left: 0; width: 100%; height: 2px;
  background: #345bce; transform: scaleX(0); transform-origin: left; transition: transform .25s;
}

/* ---------- goals studio (animated orbital scene) ---------- */
.st-home .sh-goals { border-radius: 26px; box-shadow: 0 25px 70px #273e6c18; padding: 24px; }
.st-home .sh-goals > a { transition: padding .25s, background .25s; border-radius: 10px; }
.st-home .sh-goals > a:hover { background: #f2f6ff; padding-left: 10px; padding-right: 10px; text-decoration: none; }
.st-home .sh-studio { background: radial-gradient(ellipse at 50% 30%, #253e6a, #101c33 75%); color: #c5d6ed; border-radius: 18px; padding: 18px; margin-bottom: 24px; overflow: hidden; }
.st-home .sh-studio-top, .st-home .sh-studio-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 10px; letter-spacing: 1px; }
.st-home .sh-studio-top > span:first-child { display: flex; gap: 5px; }
.st-home .sh-studio-top i { width: 6px; height: 6px; border-radius: 50%; background: #6f84a6; }
.st-home .sh-studio-top i:first-child { background: #8de6ce; }
.st-home .sh-studio-scene { position: relative; height: 248px; display: grid; place-items: center; }
.st-home .sh-studio-core { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 126px; height: 126px; border: 1px solid #7fbbef80; border-radius: 32px; background: linear-gradient(140deg, #3064a9, #30316e); box-shadow: 0 0 50px #5d7ee33b, inset 0 0 25px #729be838; }
.st-home .sh-studio-core > i { font-size: 38px; color: #b6f7e6; }
.st-home .sh-studio-core > span { font-size: 8px; letter-spacing: 1px; margin-top: 16px; }
.st-home .sh-studio-orbit { position: absolute; width: 222px; height: 222px; border: 1px dashed #738fc254; border-radius: 50%; animation: sh-orbit 32s linear infinite; }
.st-home .sh-studio-orbit::after { content: ''; position: absolute; width: 7px; height: 7px; top: 27px; left: 27px; background: #87e8d0; border-radius: 50%; box-shadow: 0 0 16px #87e8d0; }
.st-home .sh-studio-orbit-two { width: 290px; height: 290px; animation-direction: reverse; opacity: .5; }
.st-home .sh-studio-node { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 24px; background: #101c33f2; border: 1px solid #5b76a6; color: #dbe7f8; font-size: 11px; white-space: nowrap; transition: transform .4s, box-shadow .4s, border-color .4s; }
.st-home .sh-studio-node i { color: #9de6d1; }
.st-home .sh-studio-node.sh-node-one { top: 18px; left: 50%; transform: translateX(-50%); }
.st-home .sh-studio-node.sh-node-two { top: 50%; right: 14px; transform: translateY(-50%); }
.st-home .sh-studio-node.sh-node-three { bottom: 18px; left: 50%; transform: translateX(-50%); }
.st-home .sh-studio-node.sh-node-four { top: 50%; left: 14px; transform: translateY(-50%); }
.st-home .sh-studio-node:hover { transform: translateX(-50%) scale(1.06); box-shadow: 0 0 22px #345bce66; border-color: #8fb6e6; }
.st-home .sh-studio-node.sh-node-two:hover, .st-home .sh-studio-node.sh-node-four:hover { transform: translateY(-50%) scale(1.06); }
.st-home .sh-studio-signal { display: flex; gap: 7px; align-items: center; }
.st-home .sh-studio-signal i { width: 5px; height: 5px; border-radius: 50%; background: #6f84a6; animation: sh-signal 1.8s ease-in-out infinite; transform-origin: center; }
.st-home .sh-studio-signal i:nth-child(2n) { background: #8de6ce; }
.st-home .sh-goals-note { margin-top: 14px; font-size: 13px; color: #50617c; }
@keyframes sh-orbit { to { transform: rotate(360deg); } }
@keyframes sh-signal { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.4); } }

.st-home .sh-jump a:hover::after { transform: scaleX(1); }


/* ---------- trust split ---------- */
.st-home .sh-trust-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.st-home .sh-trust-strip { display: flex; flex-wrap: wrap; gap: 14px; }
.st-home .sh-trust-strip > span { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 999px; border: 1px solid #dce5f2; background: #fff; font-size: 13px; color: #3a4867; transition: transform .25s, box-shadow .25s, border-color .25s; }
.st-home .sh-trust-strip > span:hover { transform: translateY(-2px); box-shadow: 0 8px 20px #273e6c18; border-color: #9bb2d6; }
.st-home .sh-trust-strip i { color: #345bce; }
.st-home .sh-trust-list { list-style: none; padding: 0; margin: 0; }
.st-home .sh-trust-list > li { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px dashed #dce5f2; align-items: flex-start; }
.st-home .sh-trust-list > li:last-child { border-bottom: 0; }
.st-home .sh-trust-list .sh-trust-num { flex: 0 0 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(110deg, #e7f0ff, #dce5f2); color: #345bce; font-weight: 700; }
.st-home .sh-trust-list p { margin: 0; color: #3a4867; }
.st-home .sh-trust-list strong { display: block; color: #101f3c; }

/* ---------- services grid ---------- */
.st-home #home-services .sh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 36px; }
.st-home .sh-service { position: relative; padding: 26px; border-radius: 20px; background: #fff; border: 1px solid #e7eef8; transition: transform .3s, box-shadow .3s, border-color .3s; overflow: hidden; }
.st-home .sh-service::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #0057d9, #19b49a, #345bce); transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.st-home .sh-service:hover { transform: translateY(-4px); box-shadow: 0 18px 40px #142d5c12; border-color: #b9cbf2; }
.st-home .sh-service:hover::before { transform: scaleX(1); }
.st-home .sh-service-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(140deg, #e7f0ff, #dce5f2); color: #345bce; margin-bottom: 16px; transition: transform .3s, background .3s; }
.st-home .sh-service:hover .sh-service-icon { transform: scale(1.05); background: linear-gradient(140deg, #dce5f2, #c4d4ea); }
.st-home .sh-service h3 { margin: 0 0 8px; color: #101f3c; }
.st-home .sh-service p { margin: 0; color: #50617c; font-size: 14.5px; line-height: 1.6; }
.st-home .sh-service .sh-service-link { display: inline-block; margin-top: 12px; color: #345bce; font-weight: 600; text-decoration: none; font-size: 14px; }
.st-home .sh-service .sh-service-link::after { content: '→'; margin-left: 6px; transition: transform .25s; }
.st-home .sh-service .sh-service-link:hover::after { transform: translateX(4px); }

/* ---------- solutions ---------- */
.st-home #home-solutions .sh-soln-list { display: grid; grid-template-columns: 1fr; gap: 18px; }
.st-home .sh-solution { display: flex; gap: 18px; padding: 22px; border-radius: 18px; background: #fff; border: 1px solid #e7eef8; transition: transform .3s, box-shadow .3s, border-color .3s; }
.st-home .sh-solution:hover { transform: translateY(-3px); box-shadow: 0 16px 36px #142d5c12; border-color: #b9cbf2; }
.st-home .sh-solution-icon { flex: 0 0 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(140deg, #e7f0ff, #dce5f2); color: #345bce; }
.st-home .sh-solution h3 { margin: 0 0 4px; color: #101f3c; font-size: 17px; }
.st-home .sh-solution p { margin: 0; color: #50617c; font-size: 14px; line-height: 1.55; }
.st-home .sh-solution img { width: 100%; max-width: 120px; border-radius: 10px; object-fit: cover; transition: transform .35s; }
.st-home .sh-solution:hover img { transform: scale(1.06); }

/* ---------- industries ---------- */
.st-home #home-industries .sh-industry-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.st-home .sh-industry { position: relative; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid #e7eef8; display: flex; gap: 18px; align-items: flex-start; transition: transform .3s, box-shadow .3s, border-color .3s; }
.st-home .sh-industry:hover { transform: translateY(-3px); box-shadow: 0 16px 36px #142d5c12; border-color: #b9cbf2; }
.st-home .sh-industry-num { flex: 0 0 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(110deg, #345bce, #19b49a); color: #fff; font-weight: 700; font-size: 18px; transition: transform .3s; }
.st-home .sh-industry:hover .sh-industry-num { transform: scale(1.08) rotate(-3deg); }
.st-home .sh-industry h3 { margin: 0 0 4px; color: #101f3c; }

/* ---------- animated industry gradient borders ---------- */
.st-home .sh-industry::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 18px;
  background: linear-gradient(135deg, #345bce22, #19b49a22, #345bce22);
  z-index: -1;
  opacity: 0;
  transition: opacity .3s;
}
.st-home .sh-industry:hover::before {
  opacity: 0.6;
}

/* ---------- animated hover glow on service cards ---------- */
.st-home .sh-service {
  position: relative;
}
.st-home .sh-service::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 0%, #345bce1a, transparent 70%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.st-home .sh-service:hover::after {
  opacity: 1;
}

.st-home .sh-industry p { margin: 0; color: #50617c; font-size: 14px; line-height: 1.55; }

.st-home .sh-trust-lede { font-size: 18px; line-height: 1.6; color: #3a4867; }

/* ============================================================
   ADDITIONAL PREMIUM ENHANCEMENTS
   ============================================================ */

@keyframes sh-fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes sh-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes sh-glow-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

@keyframes sh-drift-alt {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(20px, -10px) rotate(5deg); }
  100% { transform: translate(-10px, 20px) rotate(-3deg); }
}

/* Shimmer sweep on service cards */
.st-home .sh-service::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(52, 91, 206, 0.05), transparent);
  animation: sh-shimmer 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* Ambient floating orb */
.st-home .sh-section::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 91, 206, 0.06) 0%, rgba(52, 91, 206, 0) 70%);
  pointer-events: none;
  animation: sh-glow-pulse 8s ease-in-out infinite;
  z-index: 0;
}

/* Staggered card entrance animations */
.st-home .sh-service,
.st-home .sh-solution,
.st-home .sh-industry,
.st-home .sh-why-card,
.st-home .st-tech-card,
.st-home .sh-electronics-card,
.st-home .sh-work-card,
.st-home .sh-ai-card,
.st-home .sh-engage-card,
.st-home .sh-guide {
  animation: sh-fade-in-up 0.6s ease-out both;
}

/* Staggered delays */
.st-home .sh-grid-four .sh-service:nth-child(2),
.st-home .sh-grid-two .sh-solution:nth-child(2),
.st-home .sh-industry-grid .sh-industry:nth-child(2),
.st-home .sh-why-grid .sh-why-card:nth-child(2) { animation-delay: 0.08s; }
.st-home .sh-grid-four .sh-service:nth-child(3),
.st-home .sh-grid-two .sh-solution:nth-child(3),
.st-home .sh-industry-grid .sh-industry:nth-child(3),
.st-home .sh-why-grid .sh-why-card:nth-child(3) { animation-delay: 0.16s; }
.st-home .sh-grid-four .sh-service:nth-child(4),
.st-home .sh-grid-two .sh-solution:nth-child(4),
.st-home .sh-industry-grid .sh-industry:nth-child(4),
.st-home .sh-why-grid .sh-why-card:nth-child(4) { animation-delay: 0.24s; }

/* Tech card hover */
.st-home .st-tech-card {
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.st-home .st-tech-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(52, 91, 206, 0.12);
  border-color: #b9cbf2;
}

/* Engage card hover */
.st-home .sh-engage-card {
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.st-home .sh-engage-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(25, 180, 154, 0.12);
}

/* Work card hover */
.st-home .sh-work-card {
  transition: transform .3s, box-shadow .3s;
}
.st-home .sh-work-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0, 87, 217, 0.1);
}

/* AI card hover glow */
.st-home .sh-ai-card {
  position: relative;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.st-home .sh-ai-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 0%, rgba(0, 135, 125, 0.08), transparent 70%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.st-home .sh-ai-card:hover::after { opacity: 1; }
.st-home .sh-ai-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 135, 125, 0.15);
}

/* Resource card hover */
.st-home .sh-resource {
  transition: transform .3s, box-shadow .3s;
}
.st-home .sh-resource:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(52, 91, 206, 0.1);
}

/* Resource cards: one reveal system, with stable padded hover surfaces. */
.st-home #home-resources .sh-guide {
  position: relative;
  padding: 30px;
  border: 1px solid var(--sh-border);
  border-radius: 20px;
  background: linear-gradient(145deg, #fff 55%, #edf5ff);
  box-shadow: 0 6px 20px #142d5c08;
  animation: none;
  transition: opacity .55s ease-out, transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.st-home #home-resources .sh-guide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 30px;
  right: 30px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, #345bce, #19b49a);
  transform: scaleX(.25);
  transform-origin: left;
  transition: transform .35s ease;
  pointer-events: none;
}
.st-home #home-resources .sh-guide h3 { margin-top: 18px; }
.st-home #home-resources .sh-guide a { padding-top: 12px; }
.st-home #home-resources .sh-guide a span { display: inline-block; transition: transform .3s ease; }
.st-home #home-resources .sh-guide:focus-within { border-color: #345bce; box-shadow: 0 16px 36px #142d5c14; }
.st-home #home-resources .sh-guide:focus-within::before { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .st-home #home-resources .sh-guide:hover { transform: translateY(-6px); border-color: #8ba8e4; box-shadow: 0 18px 38px #142d5c18; }
  .st-home #home-resources .sh-guide:hover::before { transform: scaleX(1); }
  .st-home #home-resources .sh-guide:hover a span { transform: translateX(4px); }
}
@media (max-width: 575px) {
  .st-home #home-resources .sh-guide { padding: 24px; }
}

/* Contact floating gradient */
.st-home .sh-contact {
  position: relative;
  overflow: hidden;
}
.st-home .sh-contact::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(52, 91, 206, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  animation: sh-drift-alt 20s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

/* Resource icon hover */
.st-home .sh-resource-icon {
  transition: transform .3s, background .3s;
}
.st-home .sh-resource:hover .sh-resource-icon {
  transform: scale(1.08);
}

/* Process step hover */
.st-home .sh-process-step {
  transition: transform .3s;
}
.st-home .sh-process-step:hover {
  transform: translateX(4px);
}

/* FAQ details hover */
.st-home .sh-faq details {
  transition: background .2s;
}
.st-home .sh-faq details[open] {
  background: #f8faff;
}

/* Solution card shimmer */
.st-home .sh-solution::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(52, 91, 206, 0.04), transparent);
  animation: sh-shimmer 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Responsive: disable card animations on mobile */
@media (max-width: 991px) {
  .st-home .sh-service,
  .st-home .sh-solution,
  .st-home .sh-industry,
  .st-home .sh-why-card,
  .st-home .st-tech-card,
  .st-home .sh-electronics-card,
  .st-home .sh-work-card,
  .st-home .sh-ai-card,
  .st-home .sh-engage-card,
  .st-home .sh-guide {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Layout repairs for the homepage's actual card markup. */
.st-home .sh-split, .st-home .sh-trust-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); }
.st-home .sh-split > *, .st-home .sh-trust-split > *, .st-home .sh-grid > * { min-width: 0; }
.st-home .sh-label { color: #345bce; }
.st-home .sh-capabilities .sh-label, .st-home .sh-dark .sh-label { color: #fff; }
.st-home .sh-goals > a > span:nth-child(2) { min-width: 0; }
.st-home .sh-trust-cards { display: grid; gap: 16px; list-style: none; padding: 0; margin: 0; }
.st-home .sh-trust-cards li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 6px 18px; padding: 24px; background: #fff; border: 1px solid var(--sh-border); border-radius: 18px; box-shadow: 0 12px 32px #273e6c08; }
.st-home .sh-trust-cards i { grid-row: span 2; display: grid; place-items: center; align-self: start; width: 48px; height: 48px; border-radius: 12px; color: #345bce; background: #edf4ff; font-size: 21px; }
.st-home .sh-trust-cards strong { line-height: 1.4; }
.st-home .sh-trust-cards li > span { grid-column: 2; color: var(--sh-muted); font-size: 14px; line-height: 1.6; }
.st-home #home-services .sh-card { border-radius: 20px; background: linear-gradient(155deg, #f4f8ff, #fff 45%); }
.st-home #home-services .sh-card:hover { border-color: #345bce; }
.st-home .sh-solution { position: relative; flex-direction: column; gap: 0; padding: 0; }
.st-home .sh-image-wrap { position: relative; flex: none; height: 220px; display: grid; place-items: center; padding: 28px; background: linear-gradient(135deg, #eaf1ff, #edf9f5); }
.st-home .sh-solution .sh-image-wrap img { display: block; width: 100%; height: 100%; max-width: none; min-height: 0; object-fit: contain; }
.st-home .sh-solution-body { gap: 16px; padding: 26px; }
.st-home .sh-solution h3 { font-size: 21px; line-height: 1.35; margin: 0; }
.st-home .sh-solution p { line-height: 1.75; }
.st-home .sh-work-tag { position: absolute; bottom: 12px; left: 16px; padding: 4px 12px; border-radius: 999px; color: #fff; background: #101f3c; font-size: 11px; font-weight: 700; }
/* Industries: modern tile design */
.st-home .sh-industry { flex-direction: column; align-items: flex-start; gap: 12px; height: 100%; border-radius: 18px; box-shadow: 0 6px 20px rgba(26, 54, 93, 0.05); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.st-home .sh-industry:hover { transform: translateY(-5px); border-color: #CFE0FA; box-shadow: 0 18px 40px rgba(52, 91, 206, 0.14); text-decoration: none; }
.st-home .sh-industry > i { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: linear-gradient(135deg, #eaf2ff, #e2fbf4); color: #2b56c4; font-size: 20px; transition: transform .3s ease; }
.st-home .sh-industry:hover > i { transform: translateY(-2px) scale(1.05); }
.st-home .sh-industry h3 { margin: 0; font-size: 17px; }
.st-home .sh-industry p { margin: 0; }
.st-home .sh-industry > span { margin-top: auto; padding-top: 8px; font-size: 12.5px; color: #1a56db; transition: letter-spacing .3s ease; }
.st-home .sh-industry:hover > span { letter-spacing: .3px; }
.st-home .sh-electronics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.st-home .sh-electronics-card { padding: 22px; background: #fff; border: 1px solid var(--sh-border); border-radius: 18px; }
.st-home .sh-electronics-card img { width: 56px; height: 56px; object-fit: contain; }
.st-home .sh-electronics-card h3 { font-size: 17px; }
.st-home .sh-electronics-card p { font-size: 14px; margin: 0; }
/* Technology section: fixed intro (left) and independently scrolling tiles (right) on wide screens */
.st-home .sh-tech-split { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.st-home .sh-tech-intro { position: sticky; top: 96px; }
.st-home .sh-tech-panel { display: flex; flex-direction: column; gap: 18px; max-height: calc(100vh - 140px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 14px 18px 4px; scrollbar-width: thin; scrollbar-color: #b9cdf3 transparent; }
.st-home .sh-tech-panel::-webkit-scrollbar { width: 6px; }
.st-home .sh-tech-panel::-webkit-scrollbar-thumb { background: #b9cdf3; border-radius: 999px; }
.st-home .sh-tech-cat { background: #fff; border: 1px solid var(--sh-border); border-radius: 18px; padding: 22px; }
.st-home .sh-tech-cat-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.st-home .sh-tech-cat-head h3 { margin: 0; font-size: 16.5px; }
.st-home .sh-tech-dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #0057d9, #19b49a); flex: 0 0 auto; }
.st-home .sh-tech-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; padding: 0; margin: 0; list-style: none; }
.st-home .sh-tech-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 14px 8px 12px; border-radius: 14px; background: #f3f6fc; color: var(--sh-ink); font-size: 12px; font-weight: 600; text-align: center; line-height: 1.35; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.st-home .sh-tech-tile:hover { transform: translateY(-4px); background: #fff; box-shadow: 0 14px 30px rgba(52, 91, 206, 0.16); }
.st-home .sh-tech-tile img { width: 38px; height: 38px; object-fit: contain; }
@media (max-width: 991px) {
  .st-home .sh-split, .st-home .sh-trust-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .st-home .sh-tech-split { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .st-home .sh-tech-intro { position: static; }
  .st-home .sh-tech-panel { max-height: none; overflow: visible; padding: 0; }
  .st-home .sh-section { padding: 64px 0; }
}
@media (max-width: 575px) {
  .st-home .sh-section { padding: 48px 0; }
  .st-home .sh-tech-tiles { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
  .st-home .sh-electronics-grid { grid-template-columns: minmax(0, 1fr); }
  .st-home .sh-goals { padding: 18px; }
  .st-home .sh-studio { padding: 12px; }
  .st-home .sh-studio-core { width: 96px; height: 96px; }
  .st-home .sh-trust-cards li { padding: 18px; gap: 6px 12px; }
}
/* ---------- Engagement models: sticky intro + stacked modern cards ---------- */
.st-home .sh-engage-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.st-home .sh-engage-intro { position: sticky; top: 104px; display: block; margin-bottom: 0; }
.st-home .sh-engage-panel { display: grid; gap: 16px; }
.st-home .sh-engage-panel .sh-card { height: 100%; }
.st-home .sh-engage-panel .sh-card::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 999px; background: linear-gradient(180deg, #0057d9, #19b49a); opacity: 0; transition: opacity .3s ease; }
.st-home .sh-engage-panel .sh-card:hover::after { opacity: 1; }
@media (max-width: 991px) {
  .st-home .sh-engage-split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .st-home .sh-engage-intro { position: static; }
}
/* Coordinated ambient backgrounds, contained behind each section's content. */
/* Coordinated ambient backgrounds, contained behind each section's content. */
.st-home .sh-section { isolation: isolate; overflow: hidden; }
.st-home .sh-section::before, .st-home .sh-section::after {
  content: '';
  position: absolute;
  inset: auto;
  width: min(60vw, 560px);
  height: min(60vw, 560px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: .65;
  background: radial-gradient(circle, #c9dfff 0%, #c9dfff00 70%);
  animation: sh-section-drift 20s ease-in-out infinite alternate;
}
.st-home .sh-section::before { top: -180px; right: -120px; }
.st-home .sh-section::after { bottom: -200px; left: -120px; background: radial-gradient(circle, #c6f0e5 0%, #c6f0e500 70%); animation-duration: 26s; animation-direction: alternate-reverse; }
.st-home .sh-section:nth-of-type(even)::before { animation-delay: -10s; }
.st-home .sh-section:nth-of-type(3n)::after { animation-delay: -13s; }
.st-home .sh-dark::before, .st-home .sh-dark::after { opacity: .12; }
@keyframes sh-section-drift {
  from { transform: translate3d(0, 0, 0) scale(.9); }
  to { transform: translate3d(50px, 35px, 0) scale(1.12); }
}
@media (max-width: 575px) {
  .st-home .sh-section::before, .st-home .sh-section::after { width: 320px; height: 320px; opacity: .4; }
  .st-home .sh-dark::before, .st-home .sh-dark::after { opacity: .1; }
}
/* Vector artwork remains visible without JavaScript; only decoration moves. */
.st-home .sh-section { --sh-vector: url('../img/home-vector-mesh.svg'); }
.st-home .sh-section:nth-of-type(3n + 2) { --sh-vector: url('../img/home-vector-waves.svg'); }
.st-home .sh-section:nth-of-type(3n) { --sh-vector: url('../img/home-vector-hex.svg'); }
.st-home .sh-section:nth-of-type(5n + 4) { --sh-vector: url('../img/home-vector-circuits.svg'); }
.st-home .sh-section:nth-of-type(8n + 6) { --sh-vector: url('../img/home-vector-orbits.svg'); }
.st-home .sh-section:nth-of-type(7n + 3) { --sh-vector: url('../img/home-vector-flow.svg'); }
.st-home .sh-section::after {
  inset: auto -110px -140px auto;
  width: clamp(360px, 55vw, 760px);
  height: clamp(360px, 55vw, 760px);
  border-radius: 0;
  background: var(--sh-vector) center / contain no-repeat;
  opacity: .3;
  animation: sh-art-pan 22s ease-in-out infinite;
  transform: translate3d(var(--sh-art-x, 0px), calc(var(--sh-art-y, 0px) + var(--sh-art-scroll, 0px)), 0);
  transition: transform .35s ease-out;
}
@keyframes sh-art-pan {
  0%, 100% { background-position: 50% 40%; }
  50% { background-position: 48% 60%; }
}
.st-home .sh-section:nth-of-type(even)::after { right: auto; left: -130px; }
.st-home .sh-dark::after { opacity: .25; filter: brightness(1.8); }
@media (max-width: 575px) {
  .st-home .sh-section::after { opacity: .16; bottom: -100px; }
}
.st-home.sh-motion-paused .sh-section::after { transform: none; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .st-home .sh-section::after { transform: none; animation: none; }
}
/* The motion toggle and OS preference must also cover decorative animations. */
.st-home.sh-motion-paused *, .st-home.sh-motion-paused *::before, .st-home.sh-motion-paused *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .st-home *, .st-home *::before, .st-home *::after { animation: none !important; transition: none !important; }
}

/* ---------- contact section: animated gradient canvas + gradient headline ---------- */
.st-home .sh-contact {
  background: linear-gradient(120deg, #edf4ff, #eefaf5, #e7ecff, #dff5ef, #edf4ff);
  background-size: 300% 100%;
  animation: sh-cta-flow 16s ease-in-out infinite;
}
.st-home .sh-contact h2 span {
  background: linear-gradient(90deg, #345bce, #19b49a, #345bce);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sh-cta-flow 7s ease-in-out infinite;
}
.st-home .sh-next { position: relative; overflow: hidden; }
.st-home .sh-next::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #0057d9, #5745cb, #00877d, #0057d9);
  background-size: 200% 100%;
  animation: sh-cta-flow 6s linear infinite;
}

/* ---------- mail modal: scoped to the homepage, outside its main element ---------- */
.sh-home-page #mailModal .surfy-card { position: relative; }
.sh-home-page #mailModal .surfy-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 2;
  background: linear-gradient(90deg, #0057d9, #5745cb, #00877d, #0057d9);
  background-size: 300% 100%;
  animation: sh-cta-flow 7s linear infinite;
}
.sh-home-page #mailModal .surfy-side {
  background: linear-gradient(160deg, #101f3c, #234899, #4332a0, #00695f, #101f3c);
  background-size: 320% 100%;
  animation: sh-cta-flow 13s ease-in-out infinite;
}
.sh-home-page #mailModal .surfy-head {
  background: linear-gradient(120deg, #edf4ff, #eefaf5, #e7ecff, #edf4ff);
  background-size: 300% 100%; animation: sh-cta-flow 16s ease-in-out infinite;
}
.sh-home-page #mailModal .surfy-side h4 { font-size: 20px; line-height: 1.35; }
.sh-home-page #mailModal .surfy-perks li { padding: 10px; border-radius: 12px; background: #ffffff12; }
.sh-home-page #mailModal .surfy-trust { border-left: 3px solid #00877d; }
.sh-home-page #mailModal .surfy-x:focus-visible { outline: 3px solid #00877d; outline-offset: 2px; }

/* ---------- motion toggle: designed pill with live state ---------- */
.st-home .sh-motion-control {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 20px 9px 15px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; line-height: 1;
  transition: background .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.st-home .sh-motion-control::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px;
  background: #7ee7ce; box-shadow: 0 0 0 4px rgba(126,231,206,.22);
  animation: sh-live-dot 2.2s ease-in-out infinite;
}
.st-home .sh-motion-control:hover {
  background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5);
  transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.st-home .sh-motion-control:focus-visible { outline: 3px solid #7ee7ce; outline-offset: 3px; }
.st-home .sh-motion-control[aria-pressed="true"] {
  background: rgba(126,231,206,.14); border-color: rgba(126,231,206,.55); color: #bff5e8;
}
.st-home .sh-motion-control[aria-pressed="true"]::before {
  background: #ffb56b; box-shadow: 0 0 0 4px rgba(255,181,107,.22); animation: none;
}
@keyframes sh-live-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(126,231,206,.22); }
  50% { box-shadow: 0 0 0 7px rgba(126,231,206,.08); }
}


/* Shared treatment for hero and modal actions; retain readable white labels. */
.sh-home-page #owl-demo .btn,
.sh-home-page #mailModal .surfy-submit {
  position: relative; overflow: hidden; border: 1px solid #ffffff30; border-radius: 12px;
  color: #fff; background: linear-gradient(110deg, #0047b4, #4332b2, #00695f, #0047b4);
  background-size: 280% 100%; animation: sh-cta-flow 9s ease-in-out infinite;
  box-shadow: 0 8px 22px #254ccb24; transition: transform .25s, box-shadow .25s;
}
.sh-home-page #owl-demo .btn:hover,
.sh-home-page #mailModal .surfy-submit:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 30px #254ccb42; }
.sh-home-page #owl-demo .btn:focus-visible,
.sh-home-page #mailModal .surfy-submit:focus-visible,
.sh-home-page #mailModal .surfy-reset:focus-visible { outline: 3px solid #00877d; outline-offset: 3px; }
.sh-home-page #mailModal .surfy-reset {
  color: #234899; border-color: #b9cfdf;
  background: linear-gradient(110deg, #edf4ff, #eefaf5, #e7ecff, #edf4ff);
  background-size: 280% 100%; animation: sh-cta-flow 9s ease-in-out infinite;
}
.sh-home-page #mailModal .surfy-pill input:checked + span { background: #234899; }
.sh-home-page #mailModal .surfy-pill input:focus-visible + span { outline: 3px solid #00877d; outline-offset: 2px; }
.st-home .sh-dark .sh-button, .st-home .sh-cta .sh-button,
.st-home .sh-dark .sh-button:hover, .st-home .sh-cta .sh-button:hover {
  background-image: linear-gradient(110deg, #234899, #00695f, #4332a0, #234899); color: #fff;
}
/* Homepage hero: scoped to avoid changing banners on service pages. */
.sh-home-page #owl-demo .owl-height { height: auto !important; min-height: 0; max-height: none; }
.sh-home-page #owl-demo .vc-parent,
.sh-home-page #owl-demo .vc-child { display: block; height: auto; min-height: 0; }
.sh-home-page #owl-demo .top-banner { height: auto; min-height: 720px; max-height: none; }
.sh-home-page #owl-demo .top-banner .st-hero-content {
  margin: 0 auto; padding: 190px 5vw 80px; text-align: left;
}
.sh-home-page #owl-demo .st-hero-copy { width: 52%; max-width: 620px; }
.sh-home-page #owl-demo .st-hero-eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0 0 22px;
  color: #a9efdf; font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
}
.sh-home-page #owl-demo .st-hero-eyebrow > span {
  width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: #7ee7ce;
  box-shadow: 0 0 0 5px #7ee7ce18;
}
.sh-home-page #owl-demo .st-hero-title {
  margin: 0 0 22px; color: #fff; font-size: clamp(32px, 3.7vw, 54px);
  font-weight: 800; line-height: 1.18; letter-spacing: -1.8px;
}
.sh-home-page #owl-demo .st-hero-typed { display: block; min-height: 1.18em; white-space: nowrap; }
.sh-home-page #owl-demo #typed3 {
  color: #7ee7ce !important; font-size: inherit; font-weight: inherit !important; text-shadow: none;
}
.sh-home-page #owl-demo .typed-cursor { color: #7ee7ce; font-weight: 400; }
.sh-home-page #owl-demo .st-hero-description {
  max-width: 510px; margin: 0 0 24px; color: #c5d3eb; font-size: 16px; line-height: 1.8;
}
.sh-home-page #owl-demo .st-hero-highlights {
  display: flex; flex-wrap: wrap; gap: 10px 18px; list-style: none; margin: 0 0 30px; padding: 0;
}
.sh-home-page #owl-demo .st-hero-highlights li { color: #eaf2ff; font-size: 12px; font-weight: 600; }
.sh-home-page #owl-demo .st-hero-highlights i { color: #7ee7ce; margin-right: 6px; font-size: 10px; }
.sh-home-page #owl-demo .st-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.sh-home-page #owl-demo .st-hero-actions .st-hero-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 54px; margin: 0 !important; padding: 15px 22px; border-radius: 10px;
  font-size: 13px; font-weight: 700; line-height: 1.5; white-space: normal;
  text-decoration: none; animation: none; isolation: isolate;
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sh-home-page #owl-demo .st-hero-cta-primary {
  background: linear-gradient(110deg, #7ee7ce, #a1e9ff); color: #09233a; border-color: transparent;
  box-shadow: 0 8px 24px #7ee7ce24;
}
.sh-home-page #owl-demo .st-hero-cta-secondary {
  background: #ffffff08; color: #eef6ff; border-color: #9cb5d966; box-shadow: none;
}
.sh-home-page #owl-demo .st-hero-cta::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, #ffffff55 50%, transparent 75%);
  transform: translateX(-110%); transition: transform .55s ease;
}
.sh-home-page #owl-demo .st-hero-cta i { transition: transform .25s ease; }
.sh-home-page #owl-demo .st-hero-cta:hover { transform: translateY(-3px); }
.sh-home-page #owl-demo .st-hero-cta-primary:hover { color: #09233a; box-shadow: 0 14px 30px #7ee7ce38; }
.sh-home-page #owl-demo .st-hero-cta-secondary:hover { color: #09233a; background: #eef6ff; border-color: #eef6ff; }
.sh-home-page #owl-demo .st-hero-cta:hover::before { transform: translateX(110%); }
.sh-home-page #owl-demo .st-hero-cta:hover i { transform: translateX(4px); }
.sh-home-page #owl-demo .st-hero-cta:focus-visible { outline: 3px solid #a1e9ff; outline-offset: 4px; }
.sh-home-page #owl-demo .st-hero-cta:active { transform: translateY(0); }
.sh-home-page #owl-demo .st-hero-note { margin: 16px 0 0; color: #a5b9d8; font-size: 12px; line-height: 1.6; }
@media (max-width: 1199px) {
  .sh-home-page #owl-demo .top-banner { min-height: 680px; }
  .sh-home-page #owl-demo .st-hero-title { font-size: 36px; letter-spacing: -1.2px; }
}
@media (max-width: 991px) {
  .sh-home-page #owl-demo .st-hero-copy { width: 100%; max-width: 620px; }
  .sh-home-page #owl-demo .top-banner { min-height: 620px; }
  .sh-home-page #owl-demo .top-banner .st-hero-content { padding: 160px 6vw 70px; }
}
@media (max-width: 767px) {
  .sh-home-page #owl-demo .top-banner { min-height: 0; }
  .sh-home-page #owl-demo .top-banner .st-hero-content { padding: 120px 24px 64px; }
  .sh-home-page #owl-demo .st-hero-title { font-size: clamp(26px, 6.5vw, 40px); letter-spacing: -1px; }
  .sh-home-page #owl-demo .st-hero-description { font-size: 14px; }
  .sh-home-page #owl-demo .st-hero-eyebrow { font-size: 10px; letter-spacing: 1px; }
}
@media (max-width: 420px) {
  .sh-home-page #owl-demo .st-hero-actions { flex-direction: column; }
  .sh-home-page #owl-demo .st-hero-cta { width: 100%; }
}
/* The external modal and hero must obey the same pause state as main content. */
html.sh-motion-paused .sh-home-page *,
html.sh-motion-paused .sh-home-page *::before,
html.sh-motion-paused .sh-home-page *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .sh-home-page *, .sh-home-page *::before, .sh-home-page *::after { animation: none !important; transition: none !important; }
}

/* Mobile-only polish: keep shared header, hero, footer and desktop untouched. */
@media (max-width: 575px) {
  .st-home .container { padding-inline: 20px; }
  .st-home .sh-section { padding-block: 44px; }
  .st-home h2 { font-size: clamp(28px, 7.5vw, 34px); letter-spacing: -.8px; }
  .st-home .sh-eyebrow { font-size: 11px; letter-spacing: 1.5px; }
  .st-home .sh-heading { margin-bottom: 26px; }
  .st-home .sh-heading > p { margin-bottom: 0; }
  .st-home .sh-split, .st-home .sh-trust-split, .st-home .sh-tech-split,
  .st-home .sh-engage-split, .st-home .sh-faq-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .st-home .sh-tech-intro, .st-home .sh-engage-intro { position: static; }
  .st-home .sh-tech-panel { min-width: 0; max-height: none; overflow: visible; padding: 0; }
  .st-home .sh-grid, .st-home #home-services .sh-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .st-home .sh-card, .st-home .sh-electronics-card, .st-home .sh-solution-body,
  .st-home #home-resources .sh-guide { padding: 22px; }
  .st-home .sh-card h3 { padding-right: 22px; }
  .st-home .sh-image-wrap { height: 180px; padding: 20px; }
  .st-home .sh-tech-cat { padding: 16px; }
  .st-home .sh-tech-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .st-home .sh-tech-tile { min-width: 0; overflow-wrap: anywhere; padding: 14px 8px; }
  .st-home .sh-tech-cat-head h3 { min-width: 0; }
  .st-home .sh-trust-cards li { grid-template-columns: 40px minmax(0, 1fr); padding: 16px; gap: 6px 12px; }
  .st-home .sh-trust-cards i { width: 40px; height: 40px; font-size: 18px; }

  .st-home .sh-capability-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .st-home .sh-capability-row > a { justify-self: start; padding-inline: 0; }
  .st-home .sh-motion-control { justify-self: start; min-height: 44px; max-width: 100%; padding: 12px 16px; letter-spacing: .6px; line-height: 1.4; text-align: left; }
  .st-home .sh-jump .container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; padding-block: 12px; }
  .st-home .sh-jump a { min-width: 0; min-height: 44px; }
  .st-home .sh-actions { gap: 16px; margin-top: 24px; }
  .st-home .sh-button { max-width: 100%; white-space: normal; text-align: center; padding-inline: 16px; }
  .st-home .sh-cta-pulse-host { width: 100%; }
  .st-home .sh-contact { padding: 24px 16px; }
  .st-home .sh-next { padding: 20px; }

  /* Place the studio nodes in corners rather than over the central mark. */
  .st-home .sh-studio-top, .st-home .sh-studio-bottom { gap: 8px; letter-spacing: .4px; }
  .st-home .sh-studio-top > span:first-child, .st-home .sh-studio-signal { flex-shrink: 0; }
  .st-home .sh-studio-top > span:last-child { text-align: right; }
  .st-home .sh-studio-scene { height: 230px; }
  .st-home .sh-studio-orbit { width: 180px; height: 180px; }
  .st-home .sh-studio-orbit-two { width: 210px; height: 210px; }
  .st-home .sh-studio-node { padding: 7px 9px; font-size: 10px; }
  .st-home .sh-studio-node.sh-node-one { top: 12px; left: 0; transform: none; }
  .st-home .sh-studio-node.sh-node-two { top: 12px; right: 0; transform: none; }
  .st-home .sh-studio-node.sh-node-three { bottom: 12px; left: 0; transform: none; }
  .st-home .sh-studio-node.sh-node-four { top: auto; bottom: 12px; left: auto; right: 0; transform: none; }

  /* Reuse the desktop artwork throughout tall, single-column sections. */
  .st-home .sh-section::before { width: 320px; height: 320px; top: 0; right: -40px; opacity: .4; }
  .st-home .sh-contact::before { width: 200px; height: 200px; top: 0; right: 0; }
}

@media (max-width: 991px) {
  .st-home .sh-section::after,
  .st-home .sh-section:nth-of-type(even)::after {
    inset: -40px -5%;
    width: 110%;
    height: auto;
    background-size: min(100vw, 520px) min(100vw, 520px);
    background-repeat: repeat-y;
    opacity: .3;
    animation-name: sh-art-pan-mobile;
  }
  .st-home .sh-dark::after { opacity: .25; }
}
@keyframes sh-art-pan-mobile {
  0%, 100% { background-position: 50% 0; }
  50% { background-position: 48% 24px; }
}

/* Observer-driven entrances must win over legacy load animations/card rules. */
.st-home .sh-reveal {
  animation: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s ease-out, transform .55s ease-out;
  transition-delay: var(--sh-delay, 0s);
}
.st-home .sh-reveal.sh-visible { opacity: 1; transform: translateY(0); }

/* Engagement scroll stack: clip artwork without creating a scrolling ancestor. */
html:has(> .sh-home-page) { overflow-x: clip; }
.st-home #home-engage { overflow: clip; }
.st-home .sh-engage-split > * { min-width: 0; }
.st-home .sh-engage-intro { top: 128px; align-self: start; }
.st-home .sh-engage-panel { position: relative; gap: 24px; padding-bottom: 72px; }
.st-home .sh-engage-panel > .sh-card {
  position: sticky;
  top: 128px;
  height: auto;
  min-width: 0;
  z-index: 1;
  background: #fff;
  box-shadow: 0 12px 32px #142d5c12;
  /* Keep reveal transforms from shifting the sticky resting position. */
  transform: none;
}
.st-home .sh-engage-panel > .sh-card:nth-child(2) { top: 144px; z-index: 2; }
.st-home .sh-engage-panel > .sh-card:nth-child(3) { top: 160px; z-index: 3; }
@media (max-width: 991px) {
  .st-home .sh-engage-intro { position: static; }
}
/* Keep stacking on typical laptop viewports; use normal flow only on very short
   screens where the card plus its sticky offset cannot comfortably fit. */
@media (max-height: 559px), (prefers-reduced-motion: reduce) {
  .st-home .sh-engage-intro, .st-home .sh-engage-panel > .sh-card { position: static; }
  .st-home .sh-engage-panel { padding-bottom: 0; }
}
html.sh-motion-paused .st-home .sh-engage-intro,
html.sh-motion-paused .st-home .sh-engage-panel > .sh-card { position: static; }
html.sh-motion-paused .st-home .sh-engage-panel { padding-bottom: 0; }