/* X SecureTech — Sections 3 to 5 only. Frozen navbar and video hero CSS untouched. */
.xs-mission, .xs-about, .xs-itsm { color:#081e3b; }
.xs-content { width:min(1420px, calc(100% - 8%)); margin-inline:auto; }
.xs-mission { display:grid; place-items:center; position:relative; isolation:isolate; min-height:106px; padding:15px 26px; text-align:center; background:linear-gradient(108deg,#075ba8 0%,#148bd1 54%,#62cffa 100%); overflow:hidden; }
.xs-mission::before { content:""; position:absolute; inset:-200% -10%; opacity:.15; z-index:-1; background:repeating-radial-gradient(circle at 75% 50%,transparent 0 46px,#fff 47px 48px,transparent 49px 89px); }
.xs-mission h2 { font:800 clamp(19px,2.36vw,34px)/1.23 var(--display); letter-spacing:-.035em; margin:0; color:white; text-shadow:0 2px 14px #092f5938; }
.xs-mission h2 span { display:block; }
.xs-about { padding:clamp(36px,5.1vw,74px) 0; background:radial-gradient(circle at 89% 13%,#d6f4ff 0,transparent 39%),linear-gradient(145deg,#fff 40%,#f0faff 100%); }
.xs-about-grid { display:grid; grid-template-columns:minmax(0,0.95fr) minmax(0,1.13fr); align-items:center; gap:clamp(24px,4.2vw,68px); }
.xs-about-copy { min-width:0; }
.xs-about-title { margin:0 0 24px; font:800 clamp(41px,4.05vw,65px)/.98 var(--display); letter-spacing:-.06em; color:#1573cf; }
.xs-about-title span,.xs-about-title strong { display:block; }
.xs-about-title span { font-size:.71em; font-weight:780; -webkit-text-stroke:1.7px #1386e0; color:transparent; letter-spacing:-.045em; }
.xs-about-title strong { font-weight:850; }
.xs-about-copy p:not(.xs-promise) { color:#11151c; margin:0 0 12px; font:500 clamp(13.5px,1.02vw,16px)/1.57 var(--font); }
.xs-about-copy p b { font-weight:800; }
.xs-about-copy .xs-promise { border-left:4px solid #5dbfff; padding:0 0 0 13px; margin:17px 0 19px; font:italic 800 clamp(21px,2.0vw,31px)/1.22 var(--display); letter-spacing:-.025em; color:#0e4b9f; }
.xs-btn { display:inline-flex; gap:13px; align-items:center; justify-content:center; min-height:47px; padding:11px 21px; border-radius:8px; font:800 13.5px/1.3 var(--font); text-decoration:none; white-space:nowrap; transition:transform .22s, background .22s, box-shadow .22s; cursor:pointer; }
.xs-btn:hover { transform:translateY(-2px); }
.xs-btn:focus-visible { outline:3px solid #0759b9; outline-offset:4px; }
.xs-btn-primary { color:white; background:linear-gradient(120deg,#0b9edc,#0762e3); border:1px solid #0777dc; box-shadow:0 9px 20px #1187cc29; }
.xs-btn-primary:hover { box-shadow:0 15px 29px #1187cc36; }
.xs-btn-outline { color:#0d54a6; border:1.5px solid #1c85ff; background:rgba(255,255,255,.84); }
.xs-btn-outline:hover { background:#ebf8ff; }
.xs-about-actions,.xs-itsm-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }

.xs-about-visual { position:relative; margin:0; border-radius:31px; filter:drop-shadow(0 20px 32px #0c91d627); overflow:hidden; }
.xs-about-slider { position:relative; overflow:hidden; border-radius:31px; background:linear-gradient(135deg,#d7f0ff,#eef9ff); }
.xs-about-track { display:flex; width:300%; transform:translate3d(0,0,0); transition:transform 1.15s cubic-bezier(.22,.72,.25,1); will-change:transform; }
.xs-about-slide { flex:0 0 33.333333%; min-width:0; }
.xs-about-slide img { display:block; width:100%; height:auto; min-height:420px; border-radius:31px; object-fit:cover; object-position:center; }
.xs-about-slide.is-active img { filter:saturate(1.03) contrast(1.02); }
.xs-about-visual::after { content:""; position:absolute; inset:auto 0 0; height:28%; background:linear-gradient(180deg,transparent 0%,rgba(9,33,69,.08) 100%); pointer-events:none; }

.xs-itsm { padding:clamp(36px,4vw,58px) 0 clamp(44px,5vw,70px); background:linear-gradient(130deg,#f2faff,#e6f6ff 52%,#f7fcff); }
.xs-itsm-intro { max-width:920px; margin-bottom:23px; }
.xs-eyebrow { display:inline-flex; align-items:center; gap:13px; font:800 11px/1.4 var(--font); letter-spacing:.28em; color:#0878ce; }
.xs-eyebrow span { width:33px; height:2px; background:#147cdb; }
.xs-itsm-intro h2 { color:#061c3c; margin:10px 0 12px; font:850 clamp(32px,3.5vw,56px)/1.02 var(--display); letter-spacing:-.052em; }
.xs-itsm-intro h2 em { color:#167ed8; font-style:normal; }
.xs-itsm-intro p { max-width:680px; margin:0; color:#52728e; font:500 clamp(14px,1.1vw,17px)/1.5 var(--font); }
.xs-itsm-panel { display:grid; grid-template-columns:minmax(0,1.36fr) minmax(0,1fr); align-items:center; gap:clamp(18px,3.1vw,48px); border:1px solid #b7e5ff; border-radius:26px; padding:clamp(18px,2.2vw,32px); background:linear-gradient(110deg,#c9edff 0%,#eaf8ff 43%,#f5fcff 100%); box-shadow:0 16px 38px #449cc414; overflow:hidden; }
.xs-itsm-media { position:relative; min-width:0; }
.xs-itsm-media img { display:block; width:100%; height:auto; object-fit:contain; filter:drop-shadow(0 10px 13px #215a7f28); }
/* Status overlays are deliberately aligned to the visible indicator dots in the approved image.
   These are presentation-only effects: the dashboard numbers remain illustrative, not live data. */
.xs-led { position:absolute; z-index:1; pointer-events:none; width:clamp(6px,.62vw,9px); aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%); }
.xs-led::before { content:""; position:absolute; inset:-55%; border-radius:50%; opacity:.75; }
.xs-led-live { left:48.3%; top:31.8%; background:#02ce65; box-shadow:0 0 3px 2px #eafff0,0 0 10px 3px #00cc6677; animation:xsLiveStatus 2.4s ease-in-out infinite; }
.xs-led-live::before { box-shadow:0 0 0 1px #00c86c55,0 0 8px 3px #00dd6566; }
.xs-led-alert { left:61.4%; top:30.6%; background:#ff353a; box-shadow:0 0 4px 2px #ffdde0,0 0 13px 5px #ff343473; animation:xsAlertStatus 1.8s ease-in-out infinite; }
.xs-led-alert::before { box-shadow:0 0 0 1px #ff3c4266,0 0 10px 4px #ff202077; }
@keyframes xsLiveStatus {
  0%,100% { opacity:.75; box-shadow:0 0 3px 2px #eafff0,0 0 7px 2px #00cc6666; }
  50% { opacity:1; box-shadow:0 0 5px 3px #eafff0,0 0 14px 6px #00dd65a8; }
}
@keyframes xsAlertStatus {
  0%,100% { opacity:.7; box-shadow:0 0 3px 2px #ffe5e5,0 0 6px 2px #ff353570; }
  50% { opacity:1; box-shadow:0 0 5px 3px #ffd5d5,0 0 16px 7px #ff2626c4; }
}
.xs-itsm-copy { min-width:0; }
.xs-itsm-copy h3 { margin:0 0 17px; font:850 clamp(25px,2.65vw,41px)/1.1 var(--display); letter-spacing:-.051em; color:#062248; }
.xs-itsm-copy p { margin:0 0 19px; color:#55728c; font:500 clamp(13.5px,1vw,16px)/1.58 var(--font); }
.xs-feature-grid { list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:0 0 21px; padding:0; }
.xs-feature-grid li { display:flex; gap:10px; align-items:center; min-height:46px; padding:10px 11px; border-radius:10px; border:1px solid #cce7fa; background:#fff; color:#16375d; font:750 clamp(11px,.88vw,13px)/1.25 var(--font); }
.xs-feature-icon { display:grid; place-items:center; flex:0 0 24px; width:24px; height:24px; border-radius:7px; color:#0e86e9; background:#e7f6ff; font-size:17px; font-weight:900; }
.xs-btn-link { border:0; color:#0773c8; background:transparent; padding-left:5px; padding-right:0; }
.xs-btn-link:hover { color:#004a96; text-decoration:underline; }
@media(max-width:1080px) { .xs-about-grid { gap:32px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .xs-itsm-panel { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:20px; } .xs-feature-grid li { padding:8px 7px; } }
@media(max-width:830px) { .xs-about-grid { grid-template-columns:1fr; gap:25px; } .xs-about-visual { max-width:680px; margin:auto; } .xs-about-slide img { min-height:340px; } .xs-about { padding:46px 0; } .xs-itsm-panel { grid-template-columns:1fr; gap:12px; } .xs-itsm-media { max-width:720px; margin:auto; } .xs-itsm-copy { padding:0 6px 8px; } .xs-itsm-copy h3 br { display:none; } }
@media(max-width:530px) { .xs-content { width:calc(100% - 28px); } .xs-mission { min-height:104px; padding:14px 13px; } .xs-mission h2 { font-size:clamp(18px,4.5vw,25px); } .xs-about-title { font-size:45px; margin-bottom:18px; } .xs-about-slide img { min-height:260px; border-radius:22px; } .xs-about-slider,.xs-about-visual { border-radius:22px; } .xs-about-copy p:not(.xs-promise) { font-size:14px; line-height:1.61; } .xs-about-copy .xs-promise { font-size:22px; } .xs-btn { padding:11px 13px; min-height:44px; font-size:12px; } .xs-about-actions { gap:8px; } .xs-itsm-intro h2 { font-size:clamp(33px,8vw,44px); } .xs-itsm-panel { padding:12px; border-radius:16px; } .xs-feature-grid { gap:7px; } .xs-feature-grid li { font-size:11px; gap:5px; padding:7px 5px; } .xs-feature-icon { width:20px; flex-basis:20px; height:20px; font-size:14px; } .xs-itsm-actions { gap:5px; } .xs-btn-link { font-size:11px; } }
@media(prefers-reduced-motion:reduce){.xs-led{animation:none}}

/* Gap 1: preserve crisp images, but cap the desktop About frame to balance copy. */
@media (min-width:831px) {
  .xs-about-grid { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(22px,3.2vw,48px); }
  .xs-about-visual { width:100%; max-width:540px; justify-self:end; }
  .xs-about-slide img { height:clamp(310px,32vw,410px); min-height:0; object-fit:cover; }
}
@media (max-width:830px) { .xs-about-slide img { height:auto; aspect-ratio: 4 / 3; min-height:0; object-fit:cover; } }