/* =========================================================
   SOMTECH SERVICES — FINAL VISUAL POLISH
   Safe override layer: does NOT change form/backend logic.
   ========================================================= */

:root{
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-7:32px;
  --sp-8:40px;
  --sp-9:56px;
  --sp-10:72px;
  --sp-11:96px;
  --text-main:#f5f7fb;
  --text-body:#b8c1d4;
  --text-muted:#7f8ba3;
  --line:rgba(148,163,184,.16);
}

/* ---------- GLOBAL TYPOGRAPHY ---------- */
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  overflow-x:hidden;
  color:var(--text-body);
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{
  color:var(--text-main);
  font-family:'Space Grotesk',Inter,system-ui,sans-serif;
  letter-spacing:-.025em;
  line-height:1.12;
  margin-top:0;
}
p{color:var(--text-body);line-height:1.7}
a{color:inherit}
img{max-width:100%;height:auto}

/* ---------- CONTAINER / SECTION RHYTHM ---------- */
.wrap{
  width:min(1180px,calc(100% - 40px));
  margin-inline:auto;
}
.sec-pad{
  padding-top:clamp(72px,8vw,112px)!important;
  padding-bottom:clamp(72px,8vw,112px)!important;
}
.sec-head{
  max-width:820px;
  margin-bottom:42px!important;
}
.sec-head.center{text-align:center}
.sec-head h2{
  font-size:clamp(30px,4vw,48px);
  margin:10px 0 16px;
}
.sec-head p{
  max-width:760px;
  margin:0;
  font-size:15.5px;
}
.sec-head.center p{margin-inline:auto}
.eyebrow{
  font-family:'JetBrains Mono',monospace!important;
  font-size:11px!important;
  font-weight:500;
  letter-spacing:.18em;
  line-height:1.4;
  color:#22d3ee!important;
  text-transform:uppercase;
}

/* ---------- HERO ---------- */
.hero{
  min-height:760px;
  overflow:hidden;
}
.hero-inner{gap:clamp(40px,6vw,90px)!important}
.hero h1{
  font-size:clamp(44px,6vw,76px)!important;
  line-height:.98!important;
  max-width:760px;
  margin:18px 0 22px!important;
}
.hero .lead{
  max-width:690px;
  font-size:clamp(16px,1.5vw,18px)!important;
  line-height:1.75!important;
  color:#aeb8cb!important;
}
.hero-mini{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px!important;
  margin-top:32px!important;
}
.hero-mini>div{
  min-width:0;
  padding:15px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.025);
}
.hero-mini .num{display:block;font-size:22px!important}
.hero-mini .lbl{display:block;margin-top:3px;color:var(--text-muted)!important;font-size:11px!important}

/* ---------- TRUST STRIP: no duplicate-looking giant text ---------- */
.trust-strip{padding:0 0 42px!important}
.trust-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
}
.trust-item{
  min-width:0;
  padding:18px 20px!important;
}
.trust-item strong{
  font-family:'Space Grotesk',sans-serif;
  font-size:20px!important;
  line-height:1.15;
}
.trust-item span{
  margin-top:5px!important;
  color:var(--text-muted)!important;
  font-size:12px!important;
  line-height:1.45!important;
}

/* ---------- WHY CARDS ---------- */
.why-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
}
.why-card{
  min-width:0;
  padding:28px!important;
}
.why-card h3{font-size:18px!important;margin-bottom:10px!important}
.why-card p{font-size:13.5px!important;line-height:1.7!important;margin:0}

/* ---------- SERVICES ---------- */
.svc-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
}
.svc-card{
  min-width:0;
  overflow:hidden;
  padding:26px!important;
}
.svc-card h3{font-size:20px!important;margin:10px 0 10px!important}
.svc-card p{font-size:13.5px!important;line-height:1.7!important;margin:0 0 16px!important}
.svc-tags{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  margin-top:14px!important;
}
.svc-tags span{
  font-size:10px!important;
  line-height:1.3!important;
  padding:5px 8px!important;
  white-space:normal!important;
}

/* ---------- SERVICE HUB: FIX LEFT CLIPPING / TEXT COLLISION ---------- */
.service-hub-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
.hub-card{
  box-sizing:border-box!important;
  min-width:0!important;
  width:100%!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:16px!important;
  row-gap:7px!important;
  padding:20px 22px!important;
  border-radius:17px!important;
  text-decoration:none!important;
}
.hub-card b{
  min-width:0;
  display:block;
  color:#f5f7fb!important;
  font-family:'Space Grotesk',Inter,sans-serif!important;
  font-size:14.5px!important;
  font-weight:700!important;
  line-height:1.3!important;
  overflow-wrap:anywhere;
}
.hub-card span{
  min-width:0;
  display:block;
  grid-column:1/2;
  color:#8f9ab0!important;
  font-size:12px!important;
  line-height:1.5!important;
  overflow-wrap:anywhere;
}
.hub-card:not(span){color:inherit}
.hub-card::after{
  content:"→";
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
  color:#22d3ee;
  font-size:18px;
  transition:transform .2s ease;
}
.hub-card:hover::after{transform:translateX(4px)}

/* ---------- PILLARS ---------- */
.pillars{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
}
.pillar{
  min-width:0;
  padding:28px!important;
}
.pillar h3{font-size:19px!important;margin:14px 0 9px!important}
.pillar p{font-size:13.5px!important;line-height:1.7!important}

/* ---------- PRICING ---------- */
.pricing-grid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:14px!important;
  align-items:stretch!important;
}
.price-card{
  min-width:0;
  padding:25px!important;
  display:flex!important;
  flex-direction:column!important;
}
.price-card h4{
  font-size:17px!important;
  line-height:1.25!important;
  min-height:43px;
}
.price-card .amt{
  margin:14px 0 20px!important;
  font-family:'Space Grotesk',sans-serif!important;
  font-size:29px!important;
  line-height:1.1!important;
}
.price-card .amt span{
  display:block!important;
  margin-top:5px!important;
  color:#7f8ba3!important;
  font-family:'Inter',sans-serif!important;
  font-size:10px!important;
  font-weight:500!important;
}
.price-card ul{
  flex:1;
  margin:0 0 24px!important;
  padding:0!important;
}
.price-card li{
  display:flex!important;
  align-items:flex-start!important;
  gap:8px!important;
  margin:0 0 11px!important;
  color:#aeb8cb!important;
  font-size:12px!important;
  line-height:1.5!important;
}
.price-card .btn{margin-top:auto!important}

/* ---------- PROCESS ---------- */
.process-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:18px!important;
}
.process-card,.step-card{
  min-width:0;
  padding:25px!important;
}
.process-card h4,.step-card h4{font-size:18px!important;margin:9px 0!important}
.process-card p,.step-card p{font-size:13px!important;line-height:1.65!important}

/* ---------- PORTFOLIO / CASE STUDIES ---------- */
.case-grid,.case-detail-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:20px!important;
}
.case-card,.case-detail{
  min-width:0;
  overflow:hidden;
  padding:26px!important;
}
.case-row{
  display:flex!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:10px 0!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;
}
.case-row b{flex:0 0 68px;color:#f5f7fb!important}
.case-row span{min-width:0;text-align:right;color:#9aa6bb!important;overflow-wrap:anywhere}
.case-result{margin-top:18px!important;line-height:1.5!important}

/* ---------- INDUSTRIES ---------- */
.industries-grid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:10px!important;
}
.ind-chip{
  min-width:0;
  padding:13px 12px!important;
  text-align:center;
  color:#aeb8cb!important;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.018);
  font-size:12px!important;
  line-height:1.35!important;
}

/* ---------- LOCAL SEO ---------- */
.local-links{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
}
.local-link{
  min-width:0;
  padding:20px!important;
}
.local-link b{font-size:14px!important;line-height:1.35!important}
.local-link span{display:block;margin-top:6px;color:#8995aa!important;font-size:12px!important;line-height:1.5!important}

/* ---------- TESTIMONIALS ---------- */
.t-card{
  padding:30px!important;
}
.t-card .quote{
  color:#c0c8d7!important;
  font-size:16px!important;
  line-height:1.75!important;
  margin:14px 0 22px!important;
}
.t-who b{color:#f5f7fb!important}
.t-who span{color:#7f8ba3!important}

/* ---------- FAQ ---------- */
.faq-item{border-bottom:1px solid rgba(255,255,255,.08)!important}
.faq-q{
  padding:20px 0!important;
  gap:20px!important;
}
.faq-q h4{
  font-size:16px!important;
  line-height:1.4!important;
  margin:0!important;
}
.faq-a p{
  max-width:820px;
  padding:0 0 20px!important;
  color:#aeb8cb!important;
  font-size:14px!important;
  line-height:1.75!important;
}

/* ---------- CONTACT FORM ---------- */
.contact-grid{
  display:grid!important;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)!important;
  gap:28px!important;
  align-items:start!important;
}
.contact-form{
  min-width:0;
  padding:30px!important;
}
.contact-form label{
  display:block!important;
  margin:0 0 7px!important;
  color:#9aa6bb!important;
  font-size:12px!important;
  line-height:1.4!important;
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  color:#f5f7fb!important;
  background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(148,163,184,.18)!important;
  border-radius:13px!important;
  font-family:'Inter',sans-serif!important;
  font-size:14px!important;
  line-height:1.4!important;
  outline:none!important;
  transition:border-color .2s,box-shadow .2s,background .2s!important;
}
.contact-form input,
.contact-form select{height:52px!important;padding:0 15px!important}
.contact-form textarea{
  min-height:132px!important;
  padding:14px 15px!important;
  resize:vertical!important;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border-color:rgba(34,211,238,.65)!important;
  box-shadow:0 0 0 3px rgba(34,211,238,.08),0 0 24px rgba(34,211,238,.08)!important;
  background:rgba(255,255,255,.045)!important;
}
.contact-form select{
  color-scheme:dark!important;
  appearance:auto!important;
}
.contact-form select option{
  background:#0b101a!important;
  color:#f5f7fb!important;
}
.contact-form select option:checked{
  background:#2563eb!important;
  color:#fff!important;
}
.contact-form .btn{
  min-height:52px!important;
  margin-top:14px!important;
}
.form-note{
  margin-top:10px!important;
  color:#77849a!important;
  font-size:11px!important;
  line-height:1.55!important;
}
.form-msg{
  margin-top:14px!important;
  padding:14px 16px!important;
  border:1px solid rgba(34,211,238,.25)!important;
  border-radius:13px!important;
  background:rgba(34,211,238,.055)!important;
  color:#b8f5ff!important;
  line-height:1.55!important;
}

/* ---------- FOOTER ---------- */
.foot-grid{
  display:grid!important;
  grid-template-columns:1.5fr repeat(3,1fr)!important;
  gap:35px!important;
}
.foot-col{min-width:0}
.foot-col h5{color:#f5f7fb!important;margin-bottom:13px!important}
.foot-col a{display:block;margin:8px 0;color:#8b96aa!important;font-size:12.5px!important}
.foot-col a:hover{color:#22d3ee!important}

/* ---------- MOBILE / TABLET ---------- */
@media(max-width:1100px){
  .pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .svc-grid,.case-grid,.case-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .industries-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:900px){
  .wrap{width:min(100% - 32px,760px)}
  .hero{min-height:auto}
  .hero-inner{grid-template-columns:1fr!important}
  .hero-visual{display:none!important}
  .trust-grid,.why-grid,.pillars,.local-links{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .process-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .contact-grid{grid-template-columns:1fr!important}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:680px){
  .wrap{width:calc(100% - 28px)}
  .sec-pad{padding-top:62px!important;padding-bottom:62px!important}
  .sec-head{margin-bottom:30px!important}
  .sec-head h2{font-size:30px!important}
  .hero{padding-top:130px!important}
  .hero h1{font-size:42px!important}
  .hero-mini{grid-template-columns:1fr!important}
  .trust-grid,.why-grid,.pillars,.svc-grid,.service-hub-grid,
  .pricing-grid,.process-grid,.case-grid,.case-detail-grid,
  .local-links,.industries-grid{grid-template-columns:1fr!important}
  .hub-card{padding:18px!important}
  .industries-grid{gap:8px!important}
  .ind-chip{padding:11px 9px!important}
  .contact-form{padding:22px!important}
  .foot-grid{grid-template-columns:1fr!important}
}

/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* SomTech footer social icons */
.sx-social{margin-top:22px}
.sx-social-label{display:block;margin-bottom:11px;color:#aab6c8;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.sx-social-icons{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sx-social-icon{width:38px;height:38px;border:1px solid rgba(64,211,255,.24);border-radius:12px;display:inline-flex!important;align-items:center;justify-content:center;background:rgba(8,18,42,.72);color:#7edcff!important;box-shadow:inset 0 0 16px rgba(0,140,255,.07),0 5px 18px rgba(0,0,0,.18);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,color .22s ease,background .22s ease}
.sx-social-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sx-social-icon[data-social="facebook"] svg,.sx-social-icon[data-social="linkedin"] svg,.sx-social-icon[data-social="x"] svg{fill:currentColor;stroke:none}
.sx-social-icon:hover{transform:translateY(-3px);border-color:rgba(34,211,238,.72);color:#fff!important;background:rgba(8,35,68,.92);box-shadow:0 0 22px rgba(0,174,255,.2)}
@media(max-width:600px){.sx-social{margin-top:18px}.sx-social-icons{gap:8px}.sx-social-icon{width:36px;height:36px;border-radius:11px}}

/* ==========================================================
   HERO TILE LAYOUT — refined animated 4-pillar arrangement
   ========================================================== */
.sx-visual .sx-card{
  min-width:235px;
  max-width:270px;
  padding:11px 14px;
  gap:10px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(5,12,32,.88),rgba(8,16,38,.62));
  box-shadow:0 16px 38px rgba(0,0,0,.38), inset 0 0 18px rgba(255,255,255,.025);
  backdrop-filter:blur(16px);
}
.sx-visual .sx-card strong{font-size:12px;letter-spacing:.025em}
.sx-visual .sx-card small{font-size:9px;margin-top:4px;opacity:.9}
.sx-visual .sx-icon{width:34px;height:34px;border-radius:9px;font-size:18px;flex:0 0 auto}

/* Desktop: four cards frame the central animated visual without competing with it. */
@media(min-width:1201px){
  .sx-visual .sx-ai{left:0;top:82px;animation:sxTileA 5.2s ease-in-out infinite}
  .sx-visual .sx-auto{right:0;top:180px;animation:sxTileB 5.7s ease-in-out infinite}
  .sx-visual .sx-dev{left:2%;bottom:72px;animation:sxTileC 5.5s ease-in-out infinite}
  .sx-visual .sx-growth{right:1%;bottom:42px;animation:sxTileD 6s ease-in-out infinite}
}
@media(min-width:901px) and (max-width:1200px){
  .sx-visual .sx-card{min-width:205px;max-width:235px;padding:10px 12px}
  .sx-visual .sx-card strong{font-size:11px}
  .sx-visual .sx-card small{font-size:8px}
  .sx-visual .sx-ai{left:0;top:70px;animation:sxTileA 5.2s ease-in-out infinite}
  .sx-visual .sx-auto{right:0;top:135px;animation:sxTileB 5.7s ease-in-out infinite}
  .sx-visual .sx-dev{left:0;bottom:55px;animation:sxTileC 5.5s ease-in-out infinite}
  .sx-visual .sx-growth{right:0;bottom:28px;animation:sxTileD 6s ease-in-out infinite}
}

/* Make the hero headline a little smaller and more premium. */
@media(min-width:1201px){.sx-copy h1{font-size:56px!important;line-height:1.06!important;max-width:600px!important}}
@media(min-width:901px) and (max-width:1200px){.sx-copy h1{font-size:clamp(46px,4.8vw,56px)!important;line-height:1.07!important}}

@keyframes sxTileA{0%,100%{transform:translate3d(0,0,0) rotate(-.4deg)}50%{transform:translate3d(5px,-9px,0) rotate(.4deg)}}
@keyframes sxTileB{0%,100%{transform:translate3d(0,0,0) rotate(.4deg)}50%{transform:translate3d(-6px,-7px,0) rotate(-.4deg)}}
@keyframes sxTileC{0%,100%{transform:translate3d(0,0,0) rotate(.35deg)}50%{transform:translate3d(5px,7px,0) rotate(-.35deg)}}
@keyframes sxTileD{0%,100%{transform:translate3d(0,0,0) rotate(-.35deg)}50%{transform:translate3d(-5px,8px,0) rotate(.35deg)}}

/* Mobile: cards become compact floating badges around the visual. */
@media(max-width:600px){
  .sx-visual .sx-card{max-width:154px;min-width:0;padding:7px 8px;gap:6px;border-radius:11px}
  .sx-visual .sx-card strong{font-size:8px;line-height:1.1}
  .sx-visual .sx-card small{font-size:6px;margin-top:3px}
  .sx-visual .sx-icon{width:25px;height:25px;border-radius:7px;font-size:13px}
  .sx-visual .sx-ai{left:-3px;top:8px;animation:sxTileA 5s ease-in-out infinite}
  .sx-visual .sx-auto{right:-3px;top:118px;animation:sxTileB 5.4s ease-in-out infinite}
  .sx-visual .sx-dev{left:-3px;bottom:2px;animation:sxTileC 5.2s ease-in-out infinite}
  .sx-visual .sx-growth{right:-3px;bottom:2px;animation:sxTileD 5.8s ease-in-out infinite}
}
@media(max-width:390px){
  .sx-visual .sx-card{max-width:142px;padding:6px 7px}
  .sx-visual .sx-card strong{font-size:7px}
  .sx-visual .sx-card small{font-size:5.5px}
  .sx-visual .sx-icon{width:23px;height:23px;font-size:12px}
}


/* FINAL HERO CORNER LOCK — cards sit on the four corners of the actual hero video */
@media(min-width:901px){
  .sx-visual .sx-card{min-width:220px;max-width:250px;z-index:18;}
  .sx-visual .sx-ai{left:calc(50% - 255px);right:auto;top:150px;}
  .sx-visual .sx-auto{right:calc(50% - 255px);left:auto;top:150px;}
  .sx-visual .sx-dev{left:calc(50% - 255px);right:auto;top:495px;bottom:auto;}
  .sx-visual .sx-growth{right:calc(50% - 255px);left:auto;top:495px;bottom:auto;}
}
@media(min-width:1201px){
  .sx-visual .sx-ai,.sx-visual .sx-dev{left:calc(50% - 300px);} 
  .sx-visual .sx-auto,.sx-visual .sx-growth{right:calc(50% - 300px);} 
  .sx-visual .sx-ai,.sx-visual .sx-auto{top:138px;}
  .sx-visual .sx-dev,.sx-visual .sx-growth{top:515px;}
}
@media(max-width:900px){
  .sx-visual .sx-card{min-width:0;max-width:150px;padding:7px 9px;}
  .sx-visual .sx-ai{left:2px;right:auto;top:92px;}
  .sx-visual .sx-auto{right:2px;left:auto;top:92px;}
  .sx-visual .sx-dev{left:2px;right:auto;top:310px;bottom:auto;}
  .sx-visual .sx-growth{right:2px;left:auto;top:310px;bottom:auto;}
}
@media(max-width:600px){
  .sx-visual .sx-card{max-width:132px;}
  .sx-visual .sx-ai{top:66px;} .sx-visual .sx-auto{top:66px;}
  .sx-visual .sx-dev{top:250px;} .sx-visual .sx-growth{top:250px;}
}

/* Public review quality layer */
.review-card.is-featured{border-color:rgba(34,211,238,.48);box-shadow:0 18px 45px rgba(14,165,233,.12),inset 0 0 24px rgba(34,211,238,.035)}
.review-reply{margin:12px 0;padding:10px 12px;border-left:2px solid rgba(34,211,238,.55);border-radius:0 10px 10px 0;background:rgba(34,211,238,.055)}
.review-reply b{display:block;font-size:11px;color:#67e8f9;margin-bottom:3px}.review-reply span{display:block;font-size:12px;line-height:1.55;color:#cbd5e1}
@media(max-width:600px){.review-reply{padding:9px 10px}.review-reply span{font-size:11px}}

/* ==========================================================
   HERO SERVICE TILES — small neon glassmorphism around pendant
   ========================================================== */
.sx-visual .sx-service-tile{
  position:absolute; z-index:19; display:flex; align-items:center; gap:8px;
  width:150px; min-height:46px; padding:8px 10px; box-sizing:border-box;
  border:1px solid rgba(120,225,255,.34); border-radius:12px;
  background:linear-gradient(135deg,rgba(10,22,48,.72),rgba(19,13,48,.48));
  box-shadow:0 10px 28px rgba(0,0,0,.34),inset 0 0 18px rgba(255,255,255,.045),0 0 16px rgba(34,211,238,.10);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  pointer-events:none; overflow:hidden;
  animation:sxServiceFloat 5.5s ease-in-out infinite;
}
.sx-visual .sx-service-tile:before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.12) 48%,transparent 72%);transform:translateX(-120%);animation:sxGlassSweep 5s ease-in-out infinite;}
.sx-visual .sx-service-tile:after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid transparent;background:linear-gradient(135deg,rgba(34,211,238,.28),rgba(168,85,247,.12),rgba(251,191,36,.2)) border-box;mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:.65;}
.sx-visual .sx-service-tile>span{position:relative;z-index:2;}
.sx-visual .sx-service-tile>span:last-child{display:flex;flex-direction:column;min-width:0;}
.sx-visual .sx-tile-icon{width:25px;height:25px;display:grid;place-items:center;flex:0 0 25px;border-radius:8px;font-size:13px;font-weight:800;color:#e9feff;background:linear-gradient(135deg,rgba(34,211,238,.28),rgba(139,92,246,.26));border:1px solid rgba(103,232,249,.34);box-shadow:0 0 12px rgba(34,211,238,.18),inset 0 0 8px rgba(255,255,255,.08);}
.sx-visual .sx-service-tile strong{font-size:9.5px;line-height:1.15;letter-spacing:.02em;color:#f7fbff;white-space:nowrap;}
.sx-visual .sx-service-tile small{font-size:6.5px;line-height:1.3;margin-top:3px;color:rgba(205,220,238,.72);white-space:nowrap;}
.sx-visual .sx-tile-left{left:calc(50% - 285px);}
.sx-visual .sx-tile-right{right:calc(50% - 285px);}
.sx-visual .sx-tile-web{top:42px;animation-delay:-1.2s;}
.sx-visual .sx-tile-ai{top:102px;animation-delay:-3.5s;}
.sx-visual .sx-tile-auto{top:42px;animation-delay:-2.4s;}
.sx-visual .sx-tile-dm{top:102px;animation-delay:-4.4s;}
@keyframes sxServiceFloat{0%,100%{transform:translate3d(0,0,0) rotate(-.6deg)}50%{transform:translate3d(4px,-6px,0) rotate(.5deg)}}
@keyframes sxGlassSweep{0%,55%,100%{transform:translateX(-120%);opacity:0}65%{opacity:.8}82%{transform:translateX(120%);opacity:.15}}
@media(min-width:901px) and (max-width:1200px){
 .sx-visual .sx-service-tile{width:132px;min-height:42px;padding:7px 8px;gap:6px}
 .sx-visual .sx-tile-left{left:calc(50% - 245px)} .sx-visual .sx-tile-right{right:calc(50% - 245px)}
 .sx-visual .sx-service-tile strong{font-size:8.5px}.sx-visual .sx-service-tile small{font-size:5.8px}.sx-visual .sx-tile-icon{width:22px;height:22px;flex-basis:22px;font-size:11px}
}
@media(max-width:900px){.sx-visual .sx-service-tile{display:none}}

/* ==========================================================
   FINAL VISUAL GROUP NUDGE — video + orbit + pedestal
   Move only the lower artwork group upward while keeping the
   pendant/light and green indicator fixed in place.
   ========================================================== */
.sx-visual > .sx-hero-video{top:162px!important;}
.sx-visual > .sx-o1{top:197px!important;}
.sx-visual > .sx-o2{top:211px!important;}
.sx-visual > .sx-o3{top:225px!important;}
.sx-visual > .sx-pedestal{bottom:132px!important;}

@media (max-width:1200px) and (min-width:901px){
  .sx-visual > .sx-hero-video{top:152px!important;}
  .sx-visual > .sx-o1{top:187px!important;}
  .sx-visual > .sx-o2{top:201px!important;}
  .sx-visual > .sx-o3{top:215px!important;}
  .sx-visual > .sx-pedestal{bottom:110px!important;}
}

@media (max-width:900px){
  .sx-visual > .sx-hero-video{top:126px!important;}
  .sx-visual > .sx-o1{top:165px!important;}
  .sx-visual > .sx-o2{top:179px!important;}
  .sx-visual > .sx-o3{top:193px!important;}
  .sx-visual > .sx-pedestal{bottom:104px!important;}
}

@media (max-width:600px){
  .sx-visual > .sx-hero-video{top:88px!important;}
  .sx-visual > .sx-o1{top:134px!important;}
  .sx-visual > .sx-o2{top:147px!important;}
  .sx-visual > .sx-o3{top:160px!important;}
  .sx-visual > .sx-pedestal{bottom:92px!important;}
}

@media (max-width:390px){
  .sx-visual > .sx-hero-video{top:78px!important;}
  .sx-visual > .sx-o1{top:124px!important;}
  .sx-visual > .sx-o2{top:137px!important;}
  .sx-visual > .sx-o3{top:150px!important;}
  .sx-visual > .sx-pedestal{bottom:86px!important;}
}

/* ==========================================================
   HERO FINAL COORDINATED GROUP — video / orbit / pendant
   Green indicator kept ~2 text-line heights from video edge.
   Single authoritative override for the visual group.
   ========================================================== */
.sx-visual > .sx-pendant{top:-25px!important;}
.sx-visual > .sx-hero-video{top:155px!important;}
.sx-visual > .sx-o1{top:190px!important;}
.sx-visual > .sx-o2{top:204px!important;}
.sx-visual > .sx-o3{top:218px!important;}
.sx-visual > .sx-pedestal{bottom:132px!important;}

@media (max-width:1200px) and (min-width:901px){
  .sx-visual > .sx-pendant{top:-20px!important;}
  .sx-visual > .sx-hero-video{top:145px!important;}
  .sx-visual > .sx-o1{top:180px!important;}
  .sx-visual > .sx-o2{top:194px!important;}
  .sx-visual > .sx-o3{top:208px!important;}
  .sx-visual > .sx-pedestal{bottom:110px!important;}
}

@media (max-width:900px){
  .sx-visual > .sx-pendant{top:-35px!important;}
  .sx-visual > .sx-hero-video{top:145px!important;}
  .sx-visual > .sx-o1{top:165px!important;}
  .sx-visual > .sx-o2{top:179px!important;}
  .sx-visual > .sx-o3{top:193px!important;}
  .sx-visual > .sx-pedestal{bottom:104px!important;}
}

@media (max-width:600px){
  .sx-visual > .sx-pendant{top:-35px!important;}
  .sx-visual > .sx-hero-video{top:145px!important;width:100%!important;max-width:100%!important;}
  .sx-visual > .sx-o1{top:165px!important;width:360px!important;height:140px!important;}
  .sx-visual > .sx-o2{top:178px!important;width:305px!important;height:119px!important;}
  .sx-visual > .sx-o3{top:191px!important;width:250px!important;height:97px!important;}
  .sx-visual > .sx-pedestal{bottom:92px!important;}
}

@media (max-width:390px){
  .sx-visual > .sx-hero-video{top:140px!important;}
  .sx-visual > .sx-o1{top:160px!important;}
  .sx-visual > .sx-o2{top:173px!important;}
  .sx-visual > .sx-o3{top:186px!important;}
  .sx-visual > .sx-pedestal{bottom:86px!important;}
}