/* =====================================================================
   SOFTWARE HUB IT — "IT BACKGROUND ANIMATION" LAYER
   -----------------------------------------------------------------
   Load AFTER style.css and premium-multicolor-theme.css:

     <link rel="stylesheet" href="/assets/css/style.css">
     <link rel="stylesheet" href="/assets/css/premium-multicolor-theme.css">
     <link rel="stylesheet" href="/assets/css/it-animations.css">

   And add this before </body>:

     <script src="/assets/js/it-animations.js"></script>

   No other HTML changes needed — the canvas rain and floating icons
   are injected automatically by the JS file into the right sections.

   Style mix:
     - Circuit-board pattern (very low opacity) → Services, Pricing,
       FAQ, Footer — the "tech graphics" half of the request.
     - Binary/matrix canvas rain (injected by JS) → About, Tech
       Stack, Contact — the "code/terminal" half of the request.
     - Floating tech icons (fa-code, fa-server, fa-database...) →
       sprinkled lightly across all of the above, plus Process.
   ===================================================================== */

:root{
    --it-circuit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M12 12h34v34M74 12v46h46M22 82h24v34M82 70h36v24M58 104h24M12 60h14v14'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='74' cy='58' r='3'/%3E%3Ccircle cx='120' cy='58' r='3'/%3E%3Ccircle cx='46' cy='116' r='3'/%3E%3Ccircle cx='82' cy='94' r='3'/%3E%3Ccircle cx='118' cy='94' r='3'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
   Give these sections a positioning context for the decorative layers
--------------------------------------------------------------------- */
.about-bg,
.services-bg,
.tech-section,
.pricing-bg,
.contact-bg,
.faq-section,
.process-section{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.about-bg > .container,
.services-bg > .container,
.tech-section > .container,
.pricing-bg > .container,
.contact-bg > .container,
.faq-section > .container{
    position:relative;
    z-index:1;
}

/* ---------------------------------------------------------------------
   Circuit-board pattern — Services / Pricing / FAQ
--------------------------------------------------------------------- */
.services-bg::before,
.pricing-bg::before,
.faq-section::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    opacity:.05;
    pointer-events:none;
    mask-image:var(--it-circuit);
    -webkit-mask-image:var(--it-circuit);
    mask-repeat:repeat;
    -webkit-mask-repeat:repeat;
    mask-size:140px 140px;
    -webkit-mask-size:140px 140px;
    background:linear-gradient(120deg,#2563EB,#7C3AED,#F43F5E,#F59E0B,#10B981);
    background-size:300% 300%;
    animation:itCircuitDrift 26s linear infinite;
}

@keyframes itCircuitDrift{
    0%{ background-position:0% 0%; }
    100%{ background-position:100% 100%; }
}

/* ---------------------------------------------------------------------
   Circuit-board pattern — Footer (dark background suits it well)
--------------------------------------------------------------------- */
footer{ position:relative; }
footer::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    opacity:.05;
    pointer-events:none;
    mask-image:var(--it-circuit);
    -webkit-mask-image:var(--it-circuit);
    mask-repeat:repeat;
    -webkit-mask-repeat:repeat;
    mask-size:140px 140px;
    -webkit-mask-size:140px 140px;
    background:#ffffff;
}
footer .container{ position:relative; z-index:1; }

/* ---------------------------------------------------------------------
   Binary / matrix canvas — injected by it-animations.js, styled here
--------------------------------------------------------------------- */
.it-matrix-canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:0;
}

/* ---------------------------------------------------------------------
   Floating tech icons — injected by it-animations.js
--------------------------------------------------------------------- */
.it-float-icon{
    position:absolute;
    font-size:20px;
    opacity:.10;
    z-index:0;
    pointer-events:none;
    animation:itFloatIcon linear infinite;
}

@keyframes itFloatIcon{
    0%,100%{ transform:translateY(0) rotate(0deg); opacity:.08; }
    50%{ transform:translateY(-22px) rotate(6deg); opacity:.16; }
}

/* ---------------------------------------------------------------------
   Respect reduced motion
--------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
    .services-bg::before,
    .pricing-bg::before,
    .faq-section::before{
        animation:none !important;
    }
    .it-float-icon{ animation:none !important; }
}

@media (max-width:768px){
    .it-float-icon{ font-size:16px; }
}