/* Cybersecurity page (cybersecurity.html). Builds on site.css + ai-ml.css components. */

/* ---------- hero: shielded 3D image with scanning rings ---------- */
.cyhero::before{background:radial-gradient(45% 60% at 74% 48%,rgba(139,92,246,.2),transparent 70%),radial-gradient(40% 50% at 86% 74%,rgba(34,211,238,.16),transparent 70%)}
.cy-stage{position:relative;aspect-ratio:1/1;width:100%;max-width:600px;justify-self:end;display:grid;place-items:center}
.cy-glow{position:absolute;inset:10%;border-radius:50%;background:radial-gradient(closest-side,rgba(139,92,246,.35),rgba(34,211,238,.18) 55%,transparent);filter:blur(34px);animation:cyg 6s ease-in-out infinite}
@keyframes cyg{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}
.cy-rings{position:absolute;inset:4%}
.cy-rings i{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(34,211,238,.28);animation:cyspin 24s linear infinite}
.cy-rings i:nth-child(1){border-style:dashed;border-color:rgba(167,139,250,.35)}
.cy-rings i:nth-child(2){inset:9%;border-top-color:#22D3EE;border-right-color:transparent;animation-duration:9s;filter:drop-shadow(0 0 6px #22D3EE)}
.cy-rings i:nth-child(3){inset:18%;border-bottom-color:#A78BFA;border-left-color:transparent;animation-duration:13s;animation-direction:reverse;filter:drop-shadow(0 0 6px #A78BFA)}
@keyframes cyspin{to{transform:rotate(360deg)}}
.cy-scan{position:absolute;left:14%;right:14%;height:2px;top:20%;background:linear-gradient(90deg,transparent,#67E8F9,transparent);box-shadow:0 0 18px #22D3EE;animation:cyscan 4.5s ease-in-out infinite;opacity:.8;z-index:2}
@keyframes cyscan{0%,100%{top:18%}50%{top:80%}}
.cy-img{position:relative;z-index:1;width:78%;height:auto;object-fit:contain;filter:drop-shadow(0 30px 50px rgba(0,0,0,.6)) drop-shadow(0 0 40px rgba(139,92,246,.45));animation:cyf 6s ease-in-out infinite;transition:transform .4s var(--ease)}
.cy-img.cy-fallback{border-radius:28px;width:84%}
@keyframes cyf{0%,100%{translate:0 0}50%{translate:0 -12px}}
.cy-hud span{opacity:1;transform:none}
.cy-hud .h1{left:0;top:12%}.cy-hud .h2{right:0;top:42%}.cy-hud .h3{left:4%;bottom:12%}


/* ---------- tools: icon tiles for items without an official logo ---------- */
.tlogo-ic{color:#0E7490}
.tlogo-ic svg{fill:none!important;stroke:currentColor}

/* ---------- careers (8 cards) ---------- */
.careers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cy-careers{grid-template-columns:repeat(4,1fr)}
.career{position:relative;padding:24px;border-radius:22px;background:linear-gradient(160deg,rgba(14,30,64,.94),rgba(7,16,38,.96));border:1px solid rgba(103,232,249,.14);overflow:hidden;transition:transform .45s var(--ease),border-color .3s,box-shadow .3s}
.career::after{content:"";position:absolute;right:-60px;top:-60px;width:160px;height:160px;border-radius:50%;background:radial-gradient(closest-side,rgba(139,92,246,.25),transparent);transition:transform .6s}
.career:hover{transform:translateY(-6px);border-color:rgba(167,139,250,.55);box-shadow:0 0 36px -12px rgba(139,92,246,.7)}
.career:hover::after{transform:scale(1.4)}
.career h3{font-size:18px;margin:16px 0 8px;color:#F2F8FF}.career p{color:#9FB3D6;font-size:14.5px}

/* ---------- why ---------- */
.whys{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.why{display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:18px;background:rgba(10,22,48,.88);border:1px solid rgba(103,232,249,.14);transition:all .35s var(--ease)}
.why:hover{transform:translateY(-4px);border-color:rgba(167,139,250,.5);box-shadow:0 0 28px -10px rgba(139,92,246,.6)}
.why h3{font-size:16.5px;color:#F2F8FF}.why p{color:#9FB3D6;font-size:14.5px;margin-top:6px}

@media (max-width:1100px){.whys,.cy-careers{grid-template-columns:repeat(2,1fr)}.careers{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.cy-stage{justify-self:center;max-width:460px}}
@media (max-width:640px){.careers,.cy-careers,.whys{grid-template-columns:1fr}.cy-hud{display:none}}
@media (prefers-reduced-motion:reduce){.cy-glow,.cy-rings i,.cy-scan,.cy-img{animation:none}}
.cy-hud{position:absolute;inset:0;z-index:3;pointer-events:none}
/* hero photo: framed in a rounded card that matches the site's glowing panels */
.cy-img:not(.cy-fallback){width:88%;aspect-ratio:770/580;object-fit:cover;border-radius:24px;
  border:1px solid rgba(103,232,249,.35);box-shadow:0 0 0 1px rgba(139,92,246,.25),0 0 60px -10px rgba(139,92,246,.55),0 40px 80px -40px #000;filter:none}
@media (max-width:640px){.cy-img:not(.cy-fallback){width:100%;border-radius:18px}}
/* live 3D scene: canvas fills the stage; the static image stays as the fallback until WebGL renders */
.cy-canvas{position:absolute;inset:-6%;width:112%!important;height:112%!important;z-index:2;display:block}
.cy-stage.webgl .cy-img,.cy-stage.webgl .cy-rings,.cy-stage.webgl .cy-scan{opacity:0;visibility:hidden;transition:opacity .6s}
.cy-stage.webgl .cy-glow{opacity:.6}
@media (max-width:640px){.cy-canvas{inset:-4%;width:108%!important;height:108%!important}}
.cy-canvas{-webkit-mask-image:radial-gradient(closest-side at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(closest-side at 50% 50%,#000 72%,transparent 100%)}

/* Holographic Security Core (layered 3D artwork) */
.cy-stage.core .cy-canvas{-webkit-mask-image:none;mask-image:none}
.cy-stage.core .cy-glow{opacity:.35}

/* stage-card illustrations (top-right icon only; same 40px rounded-square box) */
.jico.cyi{background:radial-gradient(circle at 30% 22%,rgba(103,232,249,.22),rgba(12,26,64,.96) 68%);box-shadow:inset 0 0 0 1px rgba(103,232,249,.38),inset 0 1px 0 rgba(255,255,255,.12),0 0 16px -4px rgba(34,211,238,.6),0 0 22px -10px rgba(139,92,246,.7)}
.jico.cyi .cyi-art{width:32px;height:32px;display:block;overflow:visible}

/* hero reveal: labels show with the panels (hover the cube / tap on touch) */
.cy-stage.core .cy-hud span{opacity:0;transform:translateY(8px) scale(.94);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:0s}
.cy-stage.core.expanded .cy-hud span{opacity:1;transform:none}
.cy-stage.core.expanded .cy-hud .h1{transition-delay:.15s}.cy-stage.core.expanded .cy-hud .h2{transition-delay:.3s}.cy-stage.core.expanded .cy-hud .h3{transition-delay:.45s}
.cy-stage.core{-webkit-tap-highlight-color:transparent}

/* still image + CSS rings are only a fallback: hidden while the 3D scene loads */
.cy-stage:not(.webgl) .cy-img,.cy-stage:not(.webgl) .cy-rings,.cy-stage:not(.webgl) .cy-scan{opacity:0}
.cy-stage:not(.webgl):not(.run) .cy-img{animation:cyf 6s ease-in-out infinite,fbShow .4s 10s forwards}
.cy-stage:not(.webgl):not(.run) .cy-rings{animation:fbShow .4s 10s forwards}
.cy-stage:not(.webgl):not(.run) .cy-scan{animation:cyscan 4.5s ease-in-out infinite,fbShow .4s 10s forwards}
.cy-stage.nogl .cy-img,.cy-stage.nogl .cy-rings{opacity:1;animation-delay:0s}.cy-stage.nogl .cy-scan{opacity:.8}
@keyframes fbShow{to{opacity:1}}