/* SYBER X FORTRESS — homepage services section (#activities).
   Scoped to .sxf-hs. No JavaScript: selection uses native radios and :has().
   Every swap happens inside fixed grid cells, so selecting never changes the section's height or scroll position. */

.sxf-hs{
  --hs-ink:#0a2440;--hs-muted:#5b6f82;--hs-line:#dfe7ef;--hs-card:#fff;--hs-sel:#0a5fc2;--hs-sel-bg:#f1f7ff;
  --hs-cy:#20cbed;--hs-navy:#061629;
  position:relative;color:var(--hs-ink);font:inherit;
}
.sxf-hs *,.sxf-hs *::before,.sxf-hs *::after{box-sizing:border-box}
.sxf-hs__wrap{max-width:1200px;margin:0 auto;padding:96px 24px}

/* Heading */
.sxf-hs__head{max-width:720px;margin:0 0 40px}
.sxf-hs__eyebrow{margin:0 0 12px;color:var(--hs-sel);font-size:14px;font-weight:700;letter-spacing:.02em}
.sxf-hs__title{margin:0 0 14px;font-size:40px;line-height:1.25;font-weight:800;color:var(--hs-ink)}
.sxf-hs__intro{margin:0;font-size:18px;line-height:1.8;color:var(--hs-muted)}

/* Layout: options beside one stage; both columns share one height */
.sxf-hs__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:stretch}
.sxf-hs__side{display:flex;flex-direction:column;gap:24px;min-width:0}
.sxf-hs__nav{display:flex;flex-direction:column;gap:10px;flex:1}

/* Option: the radio covers its own card, so focusing it never scrolls the page */
.sxf-hs__opt{position:relative;flex:1;display:flex}
.sxf-hs__input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:2}
.sxf-hs__label{
  flex:1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  padding:16px 20px;border:1px solid var(--hs-line);border-radius:16px;background:var(--hs-card);
  transition:border-color .25s,background-color .25s,box-shadow .25s,transform .25s;
}
.sxf-hs__num{font-size:13px;font-weight:800;color:#5f7388;font-variant-numeric:tabular-nums;letter-spacing:.04em;transition:color .25s}
.sxf-hs__text{display:flex;flex-direction:column;gap:4px;min-width:0}
.sxf-hs__name{font-size:18px;font-weight:800;line-height:1.35;color:var(--hs-ink);transition:color .25s}
.sxf-hs__q{font-size:14px;line-height:1.6;color:var(--hs-muted)}
.sxf-hs__count{font-size:12px;font-weight:700;color:var(--hs-muted);background:#eef3f8;border-radius:999px;padding:5px 10px;white-space:nowrap;transition:background-color .25s,color .25s}

.sxf-hs__opt:hover .sxf-hs__label{border-color:#b9cde0;box-shadow:0 6px 18px rgba(10,36,64,.06)}
.sxf-hs__input:checked + .sxf-hs__label{
  border-color:var(--hs-sel);background:var(--hs-sel-bg);
  box-shadow:inset 0 0 0 1px var(--hs-sel),0 10px 28px rgba(10,95,194,.12);
}
.sxf-hs__input:checked + .sxf-hs__label .sxf-hs__num{color:var(--hs-sel)}
.sxf-hs__input:checked + .sxf-hs__label .sxf-hs__name{color:var(--hs-sel)}
.sxf-hs__input:checked + .sxf-hs__label .sxf-hs__count{background:var(--hs-sel);color:#fff}
.sxf-hs__input:focus-visible + .sxf-hs__label{outline:3px solid var(--hs-cy);outline-offset:3px}

/* Footer of the options column: close to the options, never orphaned */
.sxf-hs__foot{display:flex;flex-direction:column;gap:8px;padding-inline:4px}
.sxf-hs__all{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:800;color:var(--hs-sel);text-decoration:none;padding:10px 18px;border:1px solid var(--hs-sel);border-radius:12px;transition:background-color .2s,color .2s}
.sxf-hs__all:hover{background:var(--hs-sel);color:#fff}
.sxf-hs__all:focus-visible,.sxf-hs__quiet a:focus-visible,.sxf-hs__svc:focus-visible{outline:3px solid var(--hs-cy);outline-offset:3px}
.sxf-hs__quiet{margin:0;font-size:14px;line-height:1.8;color:var(--hs-muted)}
.sxf-hs__quiet a{color:var(--hs-ink);text-decoration:underline;text-underline-offset:3px}

/* Stage: its height comes from the options column, so selecting never changes the section's height */
.sxf-hs__stage{
  position:relative;min-width:0;min-height:640px;overflow:hidden;border-radius:24px;
  background:radial-gradient(120% 80% at 50% 30%,#0e3a62 0%,#08223b 55%,var(--hs-navy) 100%);
  box-shadow:0 24px 60px rgba(6,22,41,.22);
}
.sxf-hs__scene{position:absolute;inset:0;display:grid;padding:44px 16px 0}
.sxf-hs__scene::before{ /* HUD corners */
  content:"";position:absolute;inset:16px;pointer-events:none;z-index:1;
  background:
    linear-gradient(var(--hs-cy),var(--hs-cy)) top left/18px 1.5px,linear-gradient(var(--hs-cy),var(--hs-cy)) top left/1.5px 18px,
    linear-gradient(var(--hs-cy),var(--hs-cy)) top right/18px 1.5px,linear-gradient(var(--hs-cy),var(--hs-cy)) top right/1.5px 18px,
    linear-gradient(var(--hs-cy),var(--hs-cy)) bottom left/18px 1.5px,linear-gradient(var(--hs-cy),var(--hs-cy)) bottom left/1.5px 18px,
    linear-gradient(var(--hs-cy),var(--hs-cy)) bottom right/18px 1.5px,linear-gradient(var(--hs-cy),var(--hs-cy)) bottom right/1.5px 18px;
  background-repeat:no-repeat;opacity:.55;
}
.sxf-hs__img{grid-area:1/1;display:block;width:100%;height:100%;min-height:0;object-fit:contain;object-position:50% 0;opacity:0;transform:scale(.985);transition:opacity .45s ease,transform .6s ease}
.sxf-hs__hud{position:absolute;top:26px;inset-inline-start:30px;z-index:2;display:grid;font-size:12px;font-weight:700;letter-spacing:.04em;color:#9fdcef}
.sxf-hs__state{grid-area:1/1;opacity:0;transition:opacity .3s}

/* Services: a glass layer over the lower part of the scene, as tall as its own content */
.sxf-hs__panels{position:absolute;inset-inline:0;bottom:0;z-index:2}
.sxf-hs__panel{
  position:absolute;inset-inline:0;bottom:0;padding:72px 20px 20px;
  background:linear-gradient(to top,rgba(6,22,41,.97) 0%,rgba(6,22,41,.92) 62%,rgba(6,22,41,0) 100%);
  visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease,visibility 0s .35s;
}
.sxf-hs__ptitle{margin:0 0 10px;padding-inline:4px;font-size:15px;font-weight:700;color:#cfe2f1}
.sxf-hs__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.sxf-hs__svc{
  display:grid;grid-template-columns:1fr auto;column-gap:16px;row-gap:2px;align-items:center;
  padding:12px 16px;border-radius:14px;text-decoration:none;
  background:rgba(14,46,78,.72);border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background-color .2s,border-color .2s;
}
.sxf-hs__svc:hover{background:rgba(18,72,110,.85);border-color:rgba(32,203,237,.6)}
.sxf-hs__sname{grid-column:1;font-size:15.5px;font-weight:800;line-height:1.45;color:#fff}
.sxf-hs__when{grid-column:1;font-size:13.5px;line-height:1.6;color:#a9bdd1}
.sxf-hs__go{grid-column:2;grid-row:1/span 2;font-size:13px;font-weight:800;color:var(--hs-cy);white-space:nowrap}

/* Default state (also the fallback without :has): option 1 */
.sxf-hs__img--1,.sxf-hs__state--1{opacity:1}
.sxf-hs__img--1{transform:none}
.sxf-hs__panel--1{position:relative;visibility:visible;opacity:1;transform:none;transition:opacity .35s ease,transform .35s ease,visibility 0s}

/* Selected state 2–5 */
.sxf-hs:has(#sxf-hs-2:checked,#sxf-hs-3:checked,#sxf-hs-4:checked,#sxf-hs-5:checked) .sxf-hs__img--1,
.sxf-hs:has(#sxf-hs-2:checked,#sxf-hs-3:checked,#sxf-hs-4:checked,#sxf-hs-5:checked) .sxf-hs__state--1{opacity:0}
.sxf-hs:has(#sxf-hs-2:checked,#sxf-hs-3:checked,#sxf-hs-4:checked,#sxf-hs-5:checked) .sxf-hs__img--1{transform:scale(.985)}
.sxf-hs:has(#sxf-hs-2:checked,#sxf-hs-3:checked,#sxf-hs-4:checked,#sxf-hs-5:checked) .sxf-hs__panel--1{position:absolute;visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease,visibility 0s .35s}
.sxf-hs:has(#sxf-hs-2:checked) .sxf-hs__img--2,.sxf-hs:has(#sxf-hs-3:checked) .sxf-hs__img--3,
.sxf-hs:has(#sxf-hs-4:checked) .sxf-hs__img--4,.sxf-hs:has(#sxf-hs-5:checked) .sxf-hs__img--5{opacity:1;transform:none}
.sxf-hs:has(#sxf-hs-2:checked) .sxf-hs__state--2,.sxf-hs:has(#sxf-hs-3:checked) .sxf-hs__state--3,
.sxf-hs:has(#sxf-hs-4:checked) .sxf-hs__state--4,.sxf-hs:has(#sxf-hs-5:checked) .sxf-hs__state--5{opacity:1}
.sxf-hs:has(#sxf-hs-2:checked) .sxf-hs__panel--2,.sxf-hs:has(#sxf-hs-3:checked) .sxf-hs__panel--3,
.sxf-hs:has(#sxf-hs-4:checked) .sxf-hs__panel--4,.sxf-hs:has(#sxf-hs-5:checked) .sxf-hs__panel--5{position:relative;visibility:visible;opacity:1;transform:none;transition:opacity .35s ease,transform .35s ease,visibility 0s}

/* Tablet and phone: options become a swipeable row above the stage */
@media (max-width:1023px){
  .sxf-hs__wrap{padding:64px 20px}
  .sxf-hs__head{margin-bottom:24px}
  .sxf-hs__title{font-size:28px}
  .sxf-hs__intro{font-size:16px}
  .sxf-hs__grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .sxf-hs__side{display:contents}
  .sxf-hs__nav{
    order:1;flex-direction:row;gap:8px;overflow-x:auto;margin-inline:-20px;padding:4px 20px 8px;
    scroll-snap-type:x proximity;scroll-padding-inline:20px;scrollbar-width:none;
  }
  .sxf-hs__nav::-webkit-scrollbar{display:none}
  .sxf-hs__opt{flex:0 0 auto;scroll-snap-align:start}
  .sxf-hs__label{grid-template-columns:auto auto;gap:8px;padding:10px 14px;border-radius:999px}
  .sxf-hs__q,.sxf-hs__count{display:none}
  .sxf-hs__name{font-size:15px;white-space:nowrap}
  .sxf-hs__num{font-size:12px}
  .sxf-hs__stage{order:2;border-radius:20px;min-height:0;display:flex;flex-direction:column}
  .sxf-hs__scene{position:relative;inset:auto;padding:40px 4px 0}
  .sxf-hs__img{height:auto}
  .sxf-hs__hud{top:18px;inset-inline-start:20px}
  .sxf-hs__panels{position:relative}
  .sxf-hs__panel{padding:4px 12px 12px;background:none}
  .sxf-hs__foot{order:3;padding-inline:0}
  .sxf-hs__svc{grid-template-columns:1fr;padding:12px 14px}
  .sxf-hs__go{grid-column:1;grid-row:auto;margin-top:4px}
}

@media (prefers-reduced-motion:reduce){
  .sxf-hs *,.sxf-hs *::before{transition:none!important}
}