/* Homepage showcase: the text stays readable while only the image tiles flip. */
#top .hero-content{width:100%;max-width:1150px;position:relative;z-index:2;text-align:center}
#top .hero-title{margin:24px 0 32px;font-size:clamp(30px,4.8vw,62px);line-height:1.08;letter-spacing:-.04em;font-weight:650;text-wrap:balance}
#featured-systems{--sx-panel:#101b2e;--sx-line:#263752;--sx-text:#edf3ff;--sx-muted:#a1b1ca;--sx-accent:#76b6ff;color:var(--sx-text);text-align:left}
#featured-systems [hidden]{display:none!important}
#featured-systems button,#featured-systems a{font-family:inherit;-webkit-tap-highlight-color:transparent}
#featured-systems button{cursor:pointer}
#featured-systems button:focus-visible,#featured-systems a:focus-visible{outline:3px solid var(--sx-accent);outline-offset:4px}
#featured-systems .sx-banner{border:1px solid var(--sx-line);border-radius:17px;overflow:hidden;background:var(--sx-panel)}
#featured-systems .sx-slide{display:grid;grid-template-columns:.85fr 1.15fr;min-height:370px}
#featured-systems .sx-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:32px;min-width:0}
#featured-systems .sx-category{font-size:11px;letter-spacing:.14em;color:var(--sx-accent);margin:0 0 16px;text-transform:uppercase}
#featured-systems .sx-title{font-size:clamp(26px,3.1vw,38px);font-weight:600;letter-spacing:-.035em;line-height:1.12;margin:0 0 16px;color:var(--sx-text);max-width:18ch;text-wrap:balance}
#featured-systems .sx-description{font-size:15px;line-height:1.6;color:var(--sx-muted);margin:0 0 24px;max-width:34ch;min-height:72px}
#featured-systems .sx-detail{display:inline-flex;align-items:center;gap:16px;color:var(--sx-text);font-size:14px;font-weight:550;border-bottom:1px solid #718aa9;padding:8px 0;min-height:44px}
#featured-systems .sx-gallery{position:relative;min-width:0;min-height:370px;height:100%;isolation:isolate;touch-action:pan-y;overflow:hidden;background:#eaf0f8}
#featured-systems .sx-scene{position:absolute;inset:0;width:100%;height:100%;background:radial-gradient(ellipse at 60% 20%,#fff 0%,#f4f7fb 48%,#e4edf8 100%);overflow:hidden;color:#314765}
#featured-systems .sx-scene:not([data-photo=true])::before{content:'';position:absolute;left:12%;right:12%;bottom:30px;height:18px;background:#1b36542e;border-radius:50%;filter:blur(15px)}
#featured-systems .sx-scene img{position:absolute;display:block;object-fit:contain}
#featured-systems .sx-scene .sx-installed{inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
#featured-systems .sx-scene[data-kind=terminal] .sx-installed{object-position:70% center}
#featured-systems .sx-scene .sx-phone{height:86%;width:auto;max-width:43%;top:4%;border:4px solid #182230;border-radius:17px;background:#eef0f2;box-shadow:0 12px 24px #172a4136;object-fit:contain}
#featured-systems .sx-scene .sx-phone.sx-left{left:14%;transform:rotate(-5deg)}
#featured-systems .sx-scene .sx-phone.sx-right{right:13%;top:7%;transform:rotate(5deg)}
#featured-systems .sx-scene .sx-browser{width:84%;height:auto;top:17%;left:8%;border:5px solid #25344a;border-top-width:13px;border-radius:9px;box-shadow:0 12px 30px #172a412e}
#featured-systems .sx-scene .sx-phone.sx-overlay{right:8%;top:17%;height:73%;max-width:32%;transform:rotate(5deg)}
#featured-systems .sx-provenance{position:absolute;bottom:9px;left:12px;right:12px;text-align:center;font-size:11px;font-weight:450;letter-spacing:.01em;color:#445b78;z-index:1}
#featured-systems .sx-scene:not([data-photo=true]) .sx-provenance{width:fit-content;max-width:calc(100% - 24px);margin:0 auto;padding:4px 8px;border-radius:4px;background:#f4f7fbf2}
#featured-systems .sx-scene[data-photo=true] .sx-provenance{bottom:0;left:0;right:0;padding:26px 14px 12px;text-align:left;color:#fff;background:linear-gradient(transparent,#071323b8)}
#featured-systems .sx-tiles{position:absolute;inset:0;pointer-events:none;z-index:2}
#featured-systems .sx-tile{position:absolute;perspective:700px}
#featured-systems .sx-turn{position:absolute;inset:0;transform-style:preserve-3d}
#featured-systems .sx-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#eaf0f8}
#featured-systems .sx-face.sx-back{transform:rotateY(180deg)}
#featured-systems .sx-controls{display:flex;align-items:center;gap:10px;padding:10px 20px;border-top:1px solid var(--sx-line)}
#featured-systems .sx-counter{font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--sx-muted);margin-right:auto}
#featured-systems .sx-control{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0;color:var(--sx-text);background:#18263c;border:1px solid #31435e;border-radius:50%}
#featured-systems svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
#featured-systems .sx-control:hover{background:#253955}
#featured-systems .sx-categories{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin-top:18px;border-bottom:1px solid var(--sx-line)}
#featured-systems .sx-choice{display:flex;align-items:center;justify-content:center;gap:9px;border:0;border-bottom:2px solid transparent;background:transparent;padding:14px 5px;min-height:48px;color:var(--sx-muted);font-size:14px;font-weight:500;white-space:nowrap}
#featured-systems .sx-choice[aria-pressed=true]{color:var(--sx-text);border-bottom-color:var(--sx-accent)}
#featured-systems .sx-choice:hover{color:var(--sx-text)}
#featured-systems .sx-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:22px;font-size:14px;color:var(--sx-muted)}
#featured-systems .sx-consult{display:inline-flex;align-items:center;gap:18px;background:#3472e3;color:#fff;border-radius:9px;padding:13px 18px;font-size:14px;font-weight:550;min-height:46px}
#featured-systems .sx-consult:hover{background:#2563d7;color:#fff}
#featured-systems .sx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:700px){
  #top{padding:106px 18px 60px!important;min-height:0!important}
  #top .hero-title{font-size:clamp(30px,6.4vw,43px);margin:24px 0 28px;line-height:1.12}
  #top .hero-eyebrow{font-size:9px!important;letter-spacing:.12em!important;padding:9px 12px!important;gap:8px!important;max-width:100%}
  #featured-systems .sx-slide{display:flex;flex-direction:column-reverse}
  #featured-systems .sx-gallery{height:clamp(250px,70vw,350px);min-height:0;flex:none}
  #featured-systems .sx-copy{padding:24px;min-height:252px}
  #featured-systems .sx-category{margin-bottom:10px;font-size:10px}
  #featured-systems .sx-title{font-size:28px;margin-bottom:12px}
  #featured-systems .sx-description{font-size:14px;min-height:45px;max-width:35ch;margin-bottom:14px}
  #featured-systems .sx-detail{font-size:13px}
  #featured-systems .sx-controls{gap:10px;padding:10px 14px}
  #featured-systems .sx-categories{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:13px}
  #featured-systems .sx-choice{font-size:12px;gap:6px;padding:12px 1px;min-height:48px}
  #featured-systems .sx-choice svg{width:16px;height:16px}
  #featured-systems .sx-foot{flex-wrap:wrap;padding-top:20px;gap:14px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){#featured-systems .sx-turn{transform:none!important}}
