/* IT Infra Core – shared IT-themed graphics & animation layer */
:root{--fx-blue:#e30613;--fx-cyan:#6e1db1;--fx-glow:rgba(110,29,177,.35)}
html{scroll-behavior:smooth}
#fx-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.fx-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
 background-image:linear-gradient(rgba(110,29,177,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(227,6,19,.06) 1px,transparent 1px);
 background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);animation:fxGrid 20s linear infinite}
@keyframes fxGrid{to{background-position:48px 48px,48px 48px}}
.fx-icons{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fx-icons i{position:absolute;bottom:-60px;color:rgba(110,29,177,.12);animation:fxRise linear infinite}
@keyframes fxRise{to{transform:translateY(-120vh) rotate(360deg)}}
.fx-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:2000;background:linear-gradient(90deg,var(--fx-blue),var(--fx-cyan));box-shadow:0 0 10px var(--fx-cyan)}
.fx-glow{position:fixed;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;z-index:-1;pointer-events:none;
 background:radial-gradient(circle,rgba(110,29,177,.10),transparent 65%);transition:opacity .3s}
.fx-top{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(110,29,177,.4);background:#fff;
 color:var(--fx-cyan);cursor:pointer;z-index:1500;opacity:0;visibility:hidden;transition:.3s;font-size:1rem}
.fx-top.show{opacity:1;visibility:visible}.fx-top:hover{box-shadow:0 0 18px var(--fx-glow);transform:translateY(-3px)}
.fx-pre{opacity:0}.fx-in{animation:fxUp .7s ease both}
@keyframes fxUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
/* Hero */
.fx-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;max-width:1200px;margin:0 auto;padding:7rem 2rem 1rem}
.fx-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .9rem;border:1px solid rgba(110,29,177,.35);border-radius:999px;color:var(--fx-cyan);font:600 .8rem/1 monospace;letter-spacing:.08em;background:rgba(110,29,177,.06)}
.fx-chip b{width:8px;height:8px;border-radius:50%;background:var(--fx-cyan);box-shadow:0 0 10px var(--fx-cyan);animation:fxBlink 1.4s infinite}
@keyframes fxBlink{50%{opacity:.25}}
.fx-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.1;margin:1.1rem 0 .8rem;background:linear-gradient(135deg,#23232b,#6e1db1 55%,#e30613);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fx-typed{font:500 1.15rem/1.5 'Courier New',monospace;color:#3a3a4a;min-height:1.7em}
.fx-typed::after{content:"▍";color:var(--fx-cyan);animation:fxBlink 1s infinite}
.fx-stats{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.6rem}
.fx-stat{flex:1 1 110px;padding:1rem;border-radius:14px;background:#fff;border:1px solid rgba(110,29,177,.15);box-shadow:0 10px 26px rgba(110,29,177,.10);text-align:center}
.fx-stat strong{display:block;font-size:1.9rem;color:var(--fx-cyan)}.fx-stat span{font-size:.8rem;color:#6b6b7b}
.fx-art{width:100%;max-width:460px;justify-self:center;filter:drop-shadow(0 0 30px rgba(227,6,19,.35))}
.fx-orbit{transform-origin:200px 200px;animation:fxSpin 24s linear infinite}
.fx-orbit.rev{animation-duration:36s;animation-direction:reverse}
.fx-orbit .ic{transform-origin:center;transform-box:fill-box;animation:fxSpin 24s linear infinite reverse}
.fx-orbit.rev .ic{animation-direction:normal;animation-duration:36s}
@keyframes fxSpin{to{transform:rotate(360deg)}}
.fx-pulse{animation:fxRing 3s ease-out infinite;transform-origin:200px 200px;transform-box:view-box}
.fx-pulse.d{animation-delay:1.5s}
@keyframes fxRing{from{opacity:.7;transform:scale(.4)}to{opacity:0;transform:scale(1.25)}}
.fx-led{animation:fxBlink 1.2s infinite}.fx-led.b{animation-delay:.4s}.fx-led.c{animation-delay:.8s}
/* Boot terminal on loading page */
.fx-boot{margin:1.4rem auto 0;width:min(420px,88vw);text-align:left;padding:.9rem 1rem;border-radius:10px;background:#17102a;border:1px solid rgba(227,6,19,.35);font:.78rem/1.6 'Courier New',monospace;color:#ffc2c7;min-height:6.6em}
.fx-boot div{animation:fxUp .3s both}.fx-boot em{color:#c9a0ff;font-style:normal}
body.fx-index{background:radial-gradient(circle at 50% 40%,#ffffff,#f3e9ff 75%)!important}
body.fx-index .loading-screen{background:transparent}
@media(max-width:820px){.fx-hero{grid-template-columns:1fr;padding-top:6rem;text-align:center}.fx-art{max-width:300px}.fx-typed{font-size:1rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.fx-pre{opacity:1}}