/* SYS_ENTRY_HERO_V2 */

.sys-entry-loader{
    position:fixed;
    inset:0;
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 50%,rgba(0,148,255,.11),transparent 29%),
        radial-gradient(circle at 48% 54%,rgba(255,0,105,.07),transparent 34%),
        #020406;
    opacity:1;
    visibility:visible;
    transition:opacity .58s ease,visibility .58s ease;
    animation:sysLoaderFailsafe 3.2s forwards;
}

.sys-entry-loader.is-done{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
}

.sys-entry-stage{
    position:relative;
    width:300px;
    height:190px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.sys-entry-aura{
    position:absolute;
    width:190px;
    height:90px;
    border-radius:50%;
    background:rgba(32,151,255,.12);
    filter:blur(35px);
    animation:sysAura 1.8s ease-in-out infinite alternate;
}

.sys-entry-wordmark{
    position:relative;
    z-index:5;
    font-family:Arial,Helvetica,sans-serif;
    font-size:76px;
    font-weight:900;
    font-style:italic;
    line-height:1;
    letter-spacing:-8px;
    padding-right:8px;
    color:#fff;
    text-shadow:
        0 0 12px rgba(255,255,255,.18),
        0 0 32px rgba(0,145,255,.16);
    animation:sysWordmarkIn .9s cubic-bezier(.18,.9,.25,1) both;
}

.sys-entry-wordmark .s1{
    color:#fff;
}

.sys-entry-wordmark .y{
    background:linear-gradient(135deg,#ffffff 15%,#ff1469 55%,#ff0055 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.sys-entry-wordmark .s2{
    color:#fff;
}

.sys-entry-shine{
    position:absolute;
    z-index:7;
    width:55px;
    height:110px;
    transform:skewX(-18deg);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.32),
        transparent
    );
    filter:blur(2px);
    animation:sysShine 1.45s ease-in-out infinite;
}

.sys-entry-line{
    position:absolute;
    bottom:26px;
    width:116px;
    height:2px;
    border-radius:20px;
    overflow:hidden;
    background:rgba(255,255,255,.08);
}

.sys-entry-line::after{
    content:"";
    display:block;
    width:38%;
    height:100%;
    border-radius:20px;
    background:linear-gradient(90deg,#fff,#36a9ff);
    animation:sysProgress 1s ease-in-out infinite;
}

@keyframes sysWordmarkIn{
    0%{
        opacity:0;
        transform:scale(.72) translateY(12px);
        filter:blur(9px);
    }
    65%{
        opacity:1;
        transform:scale(1.06) translateY(0);
        filter:blur(0);
    }
    100%{
        transform:scale(1);
    }
}

@keyframes sysAura{
    from{transform:scale(.9);opacity:.55}
    to{transform:scale(1.18);opacity:1}
}

@keyframes sysShine{
    0%{transform:translateX(-145px) skewX(-18deg);opacity:0}
    25%{opacity:.65}
    70%{opacity:.2}
    100%{transform:translateX(145px) skewX(-18deg);opacity:0}
}

@keyframes sysProgress{
    0%{transform:translateX(-120%)}
    100%{transform:translateX(300%)}
}

@keyframes sysLoaderFailsafe{
    0%,82%{
        opacity:1;
        visibility:visible;
    }
    99%{
        opacity:0;
    }
    100%{
        opacity:0;
        visibility:hidden;
        pointer-events:none;
    }
}

/* Preserve Hero V1 app-icon animation */
@import url("sys-hero-v1.css?v=2");

@media(max-width:600px){
    .sys-entry-wordmark{
        font-size:58px;
        letter-spacing:-6px;
    }

    .sys-entry-stage{
        width:240px;
    }
}

@media(prefers-reduced-motion:reduce){
    .sys-entry-wordmark,
    .sys-entry-aura,
    .sys-entry-shine,
    .sys-entry-line::after{
        animation:none !important;
    }
}

/* SYS_REAL_LOGO_LOADER_V3 */

.sys-entry-logo-img{
    position:relative;
    z-index:6;

    width:155px;
    max-width:52vw;
    height:auto;

    display:block;
    object-fit:contain;

    filter:
        drop-shadow(0 0 10px rgba(255,255,255,.16))
        drop-shadow(0 0 24px rgba(0,150,255,.22))
        drop-shadow(0 0 38px rgba(255,0,105,.10));

    animation:sysRealLogoEntry 1.05s cubic-bezier(.18,.9,.24,1) both;
}

@keyframes sysRealLogoEntry{
    0%{
        opacity:0;
        transform:scale(.62) translateY(12px);
        filter:blur(10px);
    }

    60%{
        opacity:1;
        transform:scale(1.08) translateY(0);
        filter:
            blur(0)
            drop-shadow(0 0 28px rgba(0,150,255,.26));
    }

    100%{
        opacity:1;
        transform:scale(1);
    }
}

.sys-entry-shine{
    z-index:8;
    height:95px;
}

@media(max-width:600px){
    .sys-entry-logo-img{
        width:130px;
    }
}

/* SYS_REAL_LOGO_LOADER_V3_END */

/* =========================================================
   SYS_HERO_PREMIUM_V4_START
   Bigger SYS brand + 3D motion + real app icons
   ========================================================= */

/* Hero itself */
.container-hero{
    z-index:0 !important;
    isolation:isolate;
}

/* Kill the old blue cube/SVG background */
.container-hero .background-animation{
    display:none !important;
}

/* -------------------------
   Central SYS brand
   ------------------------- */

.container-hero .brand-wrapper{
    z-index:20 !important;
    overflow:visible !important;
}

/* Dashboard logo — larger and visually cropped */
.container-hero .brand-wrapper .logo{
    position:relative !important;

    width:270px !important;
    max-width:none !important;
    height:120px !important;

    background-position:center !important;
    background-repeat:no-repeat !important;

    /*
      Dashboard image has generous canvas space.
      Zoom the actual SYS artwork without changing the file.
    */
    background-size:150% auto !important;

    transform-origin:center center;
    transform-style:preserve-3d;
    will-change:transform,filter;

    filter:
        drop-shadow(0 8px 14px rgba(0,0,0,.46))
        drop-shadow(0 0 10px rgba(255,255,255,.12))
        drop-shadow(0 0 24px rgba(255,0,100,.18))
        drop-shadow(0 0 34px rgba(30,160,255,.12));

    animation:
        sysHeroLogo3D 5.8s ease-in-out infinite;
}

/* Neon aura behind logo */
.container-hero .brand-wrapper .logo::before{
    content:"";
    position:absolute;

    left:50%;
    top:50%;

    width:210px;
    height:70px;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(255,0,105,.17) 0%,
            rgba(28,157,255,.10) 38%,
            transparent 72%
        );

    filter:blur(17px);

    z-index:-1;
    pointer-events:none;

    animation:sysHeroAura 3.2s ease-in-out infinite alternate;
}

/* Light sweep */
.container-hero .brand-wrapper .logo::after{
    content:"";
    position:absolute;

    top:17%;
    left:-25%;

    width:24%;
    height:66%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.20),
            transparent
        );

    transform:skewX(-18deg);
    filter:blur(4px);

    opacity:0;

    pointer-events:none;

    animation:sysHeroLogoShine 4.8s ease-in-out infinite;
}

/* Store title */
.container-hero .brand-wrapper .name{
    position:relative;

    font-size:29px !important;
    font-weight:700 !important;
    line-height:1.25 !important;

    margin-top:-10px !important;

    letter-spacing:-.4px;

    text-shadow:
        0 2px 9px rgba(0,0,0,.65),
        0 0 18px rgba(255,255,255,.07);

    animation:sysHeroNameIn .9s ease both;
}


/* -------------------------
   Real app PNG background
   ------------------------- */

.sys-hero-appfield{
    position:absolute !important;
    inset:0 !important;

    display:block !important;

    overflow:hidden !important;

    z-index:3 !important;
    pointer-events:none !important;

    direction:ltr !important;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,1),
            rgba(0,0,0,.78) 34%,
            rgba(0,0,0,.26) 49%,
            rgba(0,0,0,.26) 51%,
            rgba(0,0,0,.78) 66%,
            rgba(0,0,0,1)
        );

    mask-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,1),
            rgba(0,0,0,.78) 34%,
            rgba(0,0,0,.26) 49%,
            rgba(0,0,0,.26) 51%,
            rgba(0,0,0,.78) 66%,
            rgba(0,0,0,1)
        );
}

.sys-hero-appicon{
    position:absolute !important;

    left:var(--x) !important;
    top:var(--y) !important;

    width:var(--size) !important;
    height:var(--size) !important;

    opacity:var(--opacity) !important;

    transform-style:preserve-3d;

    animation:
        sysHeroIconPremium var(--duration)
        ease-in-out var(--delay)
        infinite alternate !important;

    will-change:transform;
}

.sys-hero-appicon img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;

    border-radius:22% !important;

    filter:
        saturate(.82)
        brightness(.76);

    box-shadow:
        0 12px 28px rgba(0,0,0,.46),
        0 0 0 1px rgba(255,255,255,.06),
        0 0 18px rgba(31,155,255,.06);
}


/* -------------------------
   Reload logo — larger too
   ------------------------- */

.sys-entry-logo-img{
    width:220px !important;
    max-width:60vw !important;
    height:auto !important;

    filter:
        drop-shadow(0 0 13px rgba(255,255,255,.15))
        drop-shadow(0 0 30px rgba(255,0,105,.17))
        drop-shadow(0 0 38px rgba(30,160,255,.18)) !important;
}


/* -------------------------
   Animations
   ------------------------- */

@keyframes sysHeroLogo3D{
    0%,
    100%{
        transform:
            perspective(900px)
            rotateX(1deg)
            rotateY(-4deg)
            translateY(0)
            scale(1);
    }

    50%{
        transform:
            perspective(900px)
            rotateX(-1deg)
            rotateY(4deg)
            translateY(-8px)
            scale(1.035);
    }
}

@keyframes sysHeroAura{
    from{
        opacity:.52;
        transform:translate(-50%,-50%) scale(.90);
    }

    to{
        opacity:1;
        transform:translate(-50%,-50%) scale(1.16);
    }
}

@keyframes sysHeroLogoShine{
    0%,
    58%{
        left:-30%;
        opacity:0;
    }

    67%{
        opacity:.85;
    }

    82%{
        left:108%;
        opacity:0;
    }

    100%{
        left:108%;
        opacity:0;
    }
}

@keyframes sysHeroNameIn{
    from{
        opacity:0;
        transform:translateY(8px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes sysHeroIconPremium{
    from{
        transform:
            perspective(500px)
            translate3d(0,9px,0)
            rotateZ(var(--rotate))
            rotateY(-4deg)
            scale(.96);
    }

    to{
        transform:
            perspective(500px)
            translate3d(var(--drift),-10px,0)
            rotateZ(calc(var(--rotate) * -1))
            rotateY(4deg)
            scale(1.045);
    }
}


/* -------------------------
   Mobile
   ------------------------- */

@media(max-width:700px){

    .container-hero .brand-wrapper .logo{
        width:215px !important;
        height:96px !important;
        background-size:145% auto !important;
    }

    .container-hero .brand-wrapper .name{
        font-size:22px !important;
        margin-top:-7px !important;
    }

    .sys-entry-logo-img{
        width:175px !important;
    }

    .sys-hero-appicon{
        opacity:calc(var(--opacity) * .72) !important;
    }
}

@media(prefers-reduced-motion:reduce){

    .container-hero .brand-wrapper .logo,
    .container-hero .brand-wrapper .logo::before,
    .container-hero .brand-wrapper .logo::after,
    .container-hero .brand-wrapper .name,
    .sys-hero-appicon{
        animation:none !important;
    }
}

/* SYS_HERO_PREMIUM_V4_END */

/* =========================================================
   SYS_HERO_CLEAN_PREMIUM_V6_START
   ========================================================= */

.container-hero{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;
}

/* Never show old cubes */
.container-hero .background-animation{
    display:none !important;
}

/* Soft premium background */
.container-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;

    background:
        radial-gradient(
            ellipse at 50% 52%,
            rgba(255,0,100,.085) 0%,
            rgba(30,150,255,.045) 30%,
            transparent 60%
        );
}

.container-hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;

    background-image:
        linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);

    background-size:46px 46px;

    -webkit-mask-image:
        radial-gradient(ellipse at center,#000 0%,transparent 72%);

    mask-image:
        radial-gradient(ellipse at center,#000 0%,transparent 72%);
}


/* =========================
   Central brand
   ========================= */

.container-hero .brand-wrapper{
    z-index:20 !important;
    padding-top:28px !important;
    padding-bottom:28px !important;
    overflow:visible !important;
}

.container-hero .brand-wrapper .logo{
    width:190px !important;
    max-width:none !important;
    height:90px !important;

    background-size:145% auto !important;
    background-position:center !important;
    background-repeat:no-repeat !important;

    transform-origin:center;
    transform-style:preserve-3d;

    filter:
        drop-shadow(0 7px 15px rgba(0,0,0,.42))
        drop-shadow(0 0 14px rgba(255,0,100,.12))
        drop-shadow(0 0 22px rgba(40,160,255,.08)) !important;

    animation:sysHeroLogoV6 6s ease-in-out infinite !important;
}

.container-hero .brand-wrapper .name{
    margin-top:-3px !important;

    font-size:24px !important;
    font-weight:700 !important;
    line-height:1.25 !important;

    text-shadow:
        0 4px 12px rgba(0,0,0,.55),
        0 0 15px rgba(255,255,255,.045);
}


/* =========================
   Symmetric app background
   ========================= */

.sys-hero-appfield{
    position:absolute !important;
    inset:0 !important;
    z-index:5 !important;

    display:block !important;
    overflow:hidden !important;
    pointer-events:none !important;

    direction:ltr !important;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 6%,
            #000 36%,
            rgba(0,0,0,.20) 44%,
            rgba(0,0,0,.20) 56%,
            #000 64%,
            #000 94%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 6%,
            #000 36%,
            rgba(0,0,0,.20) 44%,
            rgba(0,0,0,.20) 56%,
            #000 64%,
            #000 94%,
            transparent 100%
        );
}

.sys-hero-appicon{
    position:absolute !important;

    left:var(--x) !important;
    top:var(--y) !important;

    width:var(--size) !important;
    height:var(--size) !important;

    padding:3px;

    border-radius:25%;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.015)
        );

    border:1px solid rgba(255,255,255,.055);

    opacity:var(--opacity) !important;

    box-shadow:
        0 10px 26px rgba(0,0,0,.36),
        inset 0 1px 0 rgba(255,255,255,.035);

    animation:
        sysHeroAppV6 var(--duration)
        ease-in-out var(--delay)
        infinite alternate !important;

    will-change:transform;
}

.sys-hero-appicon img{
    display:block !important;

    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
    border-radius:22% !important;

    filter:
        saturate(.88)
        brightness(.88) !important;
}


/* =========================
   Animation
   ========================= */

@keyframes sysHeroLogoV6{
    0%,100%{
        transform:
            perspective(900px)
            rotateY(-2deg)
            translateY(0)
            scale(1);
    }

    50%{
        transform:
            perspective(900px)
            rotateY(2deg)
            translateY(-4px)
            scale(1.015);
    }
}

@keyframes sysHeroAppV6{
    from{
        transform:
            perspective(650px)
            translate3d(0,5px,0)
            rotateZ(var(--rotate))
            rotateY(-3deg);
    }

    to{
        transform:
            perspective(650px)
            translate3d(var(--drift),-7px,0)
            rotateZ(calc(var(--rotate) * -1))
            rotateY(3deg);
    }
}


/* =========================
   Mobile
   ========================= */

@media(max-width:700px){

    .container-hero .brand-wrapper .logo{
        width:150px !important;
        height:72px !important;
        background-size:145% auto !important;
    }

    .container-hero .brand-wrapper .name{
        font-size:20px !important;
        margin-top:0 !important;
    }

    .sys-hero-appicon{
        padding:2px !important;
    }
}

@media(prefers-reduced-motion:reduce){

    .container-hero .brand-wrapper .logo,
    .sys-hero-appicon{
        animation:none !important;
    }
}

/* SYS_HERO_CLEAN_PREMIUM_V6_END */

/* =========================================================
   SYS_HERO_MINIMAL_V7_START
   Smaller logo + cleaner background
   ========================================================= */

.container-hero{
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

/* remove old/random background layers */
.container-hero .background-animation,
.container-hero .sys-hero-appfield{
    display: none !important;
}

.container-hero::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(255, 0, 98, 0.10) 0%,
            rgba(28, 120, 255, 0.07) 24%,
            rgba(0, 0, 0, 0) 58%
        ),
        linear-gradient(
            180deg,
            rgba(7, 14, 22, 0.30) 0%,
            rgba(0, 0, 0, 0.00) 35%,
            rgba(0, 0, 0, 0.25) 100%
        );
}

.container-hero::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 51%;
    transform: translate(-50%, -50%);
    width: min(360px, 48vw);
    height: min(360px, 48vw);
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.05) 0%,
            rgba(255,0,98,0.05) 24%,
            rgba(25,128,255,0.04) 48%,
            rgba(0,0,0,0) 72%
        );
    filter: blur(16px);
    opacity: .95;
}

/* central brand */
.container-hero .brand-wrapper{
    position: relative !important;
    z-index: 10 !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

.container-hero .brand-wrapper .logo{
    width: 138px !important;
    height: 66px !important;
    max-width: none !important;

    background-size: 138% auto !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    filter:
        drop-shadow(0 6px 14px rgba(0,0,0,.45))
        drop-shadow(0 0 12px rgba(255,0,98,.13))
        drop-shadow(0 0 18px rgba(28,120,255,.09)) !important;

    animation: sysHeroLogoPulseV7 4.8s ease-in-out infinite !important;
}

.container-hero .brand-wrapper .name{
    margin-top: 2px !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-shadow: 0 4px 12px rgba(0,0,0,.55) !important;
}

@keyframes sysHeroLogoPulseV7{
    0%,100%{
        transform: translateY(0) scale(1);
    }
    50%{
        transform: translateY(-3px) scale(1.015);
    }
}

@media (max-width: 700px){

    .container-hero::after{
        width: min(250px, 62vw);
        height: min(250px, 62vw);
    }

    .container-hero .brand-wrapper{
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .container-hero .brand-wrapper .logo{
        width: 118px !important;
        height: 56px !important;
        background-size: 138% auto !important;
    }

    .container-hero .brand-wrapper .name{
        font-size: 17px !important;
    }
}

/* SYS_HERO_MINIMAL_V7_END */

/* =========================================================
   SYS_HERO_REFINED_V8_START
   Smaller logo + better premium animated background
   ========================================================= */

.container-hero{
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

/* clean animated premium background */
.container-hero::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 42%, rgba(255,0,110,.13) 0%, rgba(255,0,110,0) 28%),
        radial-gradient(circle at 35% 58%, rgba(0,132,255,.10) 0%, rgba(0,132,255,0) 24%),
        radial-gradient(circle at 68% 38%, rgba(98,0,255,.10) 0%, rgba(98,0,255,0) 24%),
        linear-gradient(180deg, rgba(9,18,28,.72) 0%, rgba(5,10,18,.30) 45%, rgba(0,0,0,.18) 100%);
    animation: sysHeroAuroraV8 10s ease-in-out infinite alternate;
}

.container-hero::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    width: min(520px, 72vw);
    height: min(220px, 34vw);
    z-index: 2;
    pointer-events: none;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(255,255,255,.05) 0%, rgba(255,0,110,.06) 32%, rgba(0,130,255,.05) 58%, rgba(0,0,0,0) 78%);
    filter: blur(24px);
    opacity: .95;
    animation: sysHeroGlowV8 6.5s ease-in-out infinite;
}

/* subtle grid light */
.container-hero .brand-wrapper::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(760px, 92vw);
    height: 250px;
    pointer-events: none;
    z-index: -1;
    opacity: .18;
    background-image:
        linear-gradient(rgba(0,170,255,.11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,170,255,.11) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 0%, rgba(0,0,0,.78) 48%, rgba(0,0,0,0) 82%);
    -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 0%, rgba(0,0,0,.78) 48%, rgba(0,0,0,0) 82%);
    animation: sysHeroGridV8 16s linear infinite;
}

.container-hero .brand-wrapper{
    position: relative !important;
    z-index: 10 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.container-hero .brand-wrapper .logo{
    width: 108px !important;
    height: 50px !important;
    max-width: none !important;
    background-size: 132% auto !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    filter:
        drop-shadow(0 6px 14px rgba(0,0,0,.42))
        drop-shadow(0 0 14px rgba(255,0,110,.16))
        drop-shadow(0 0 18px rgba(0,132,255,.11)) !important;
    animation: sysHeroLogoFloatV8 4.2s ease-in-out infinite !important;
}

.container-hero .brand-wrapper .name{
    margin-top: 1px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-shadow: 0 3px 12px rgba(0,0,0,.55) !important;
}

/* desktop spacing */
@media (min-width: 992px){
    .container-hero{
        min-height: 315px !important;
    }
}

/* mobile */
@media (max-width: 700px){
    .container-hero::after{
        width: min(320px, 82vw);
        height: 150px;
        filter: blur(18px);
    }

    .container-hero .brand-wrapper::before{
        width: min(92vw, 420px);
        height: 190px;
        background-size: 26px 26px;
    }

    .container-hero .brand-wrapper .logo{
        width: 92px !important;
        height: 43px !important;
        background-size: 132% auto !important;
    }

    .container-hero .brand-wrapper .name{
        font-size: 15px !important;
    }
}

@keyframes sysHeroAuroraV8{
    0%{
        transform: scale(1) translate3d(0,0,0);
        filter: saturate(1);
    }
    50%{
        transform: scale(1.03) translate3d(0,-4px,0);
        filter: saturate(1.08);
    }
    100%{
        transform: scale(1.05) translate3d(0,3px,0);
        filter: saturate(1.14);
    }
}

@keyframes sysHeroGlowV8{
    0%,100%{
        opacity: .76;
        transform: translate(-50%, -50%) scale(1);
    }
    50%{
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.06);
    }
}

@keyframes sysHeroGridV8{
    0%{
        transform: translate(-50%, -50%);
    }
    100%{
        transform: translate(-50%, calc(-50% + 18px));
    }
}

@keyframes sysHeroLogoFloatV8{
    0%,100%{
        transform: translateY(0) scale(1);
    }
    50%{
        transform: translateY(-4px) scale(1.018);
    }
}

/* SYS_HERO_REFINED_V8_END */

/* SYS_HERO_POLISH_V10_START */

/* ===== Hero main stage ===== */
.container-hero{
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    background:
        linear-gradient(180deg,
            #02040a 0%,
            #040915 32%,
            #050611 68%,
            #020309 100%) !important;
}

/* make sure content stays above effects */
.container-hero > *{
    position: relative;
    z-index: 2;
}

/* moving aurora / glow background */
.container-hero::before{
    content: "";
    position: absolute;
    inset: -12% -8%;
    z-index: 0;
    background:
        radial-gradient(circle at 50% 46%,
            rgba(255, 0, 111, .22) 0%,
            rgba(255, 0, 111, .14) 16%,
            rgba(255, 0, 111, 0) 36%),

        radial-gradient(circle at 24% 32%,
            rgba(0, 183, 255, .16) 0%,
            rgba(0, 183, 255, .08) 18%,
            rgba(0, 183, 255, 0) 34%),

        radial-gradient(circle at 78% 28%,
            rgba(89, 0, 255, .16) 0%,
            rgba(89, 0, 255, .08) 16%,
            rgba(89, 0, 255, 0) 32%),

        radial-gradient(circle at 52% 72%,
            rgba(17, 109, 255, .10) 0%,
            rgba(17, 109, 255, 0) 34%),

        linear-gradient(120deg,
            rgba(0, 41, 83, .34) 0%,
            rgba(7, 13, 26, 0) 32%,
            rgba(87, 0, 58, .20) 60%,
            rgba(6, 11, 20, 0) 100%);
    filter: blur(18px) saturate(110%);
    transform: scale(1.04);
    animation: sysHeroAuroraV10 14s ease-in-out infinite alternate;
    opacity: 1;
}

/* subtle grid / tech texture */
.container-hero::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(rgba(63, 149, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(63, 149, 255, .045) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: .28;
    -webkit-mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0,0,0,.80) 14%,
        rgba(0,0,0,1) 40%,
        rgba(0,0,0,.88) 78%,
        transparent 100%);
            mask-image: linear-gradient(to bottom,
        transparent 0%,
        rgba(0,0,0,.80) 14%,
        rgba(0,0,0,1) 40%,
        rgba(0,0,0,.88) 78%,
        transparent 100%);
    animation: sysHeroGridDriftV10 20s linear infinite;
}

/* keep existing animated boxes but make them softer */
.container-hero .background-animation{
    position: absolute !important;
    inset: 0;
    min-width: 100% !important;
    width: 100%;
    height: 100%;
    transform: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: .42;
    z-index: 1;
    filter: saturate(115%);
}

.container-hero .background-animation .wrapper{
    width: 100%;
    height: 100%;
    justify-content: center !important;
}

.container-hero .background-animation .wrapper .rows{
    margin: 7px 0 !important;
}

.container-hero .background-animation .wrapper .rows #bg-box{
    opacity: .42 !important;
    filter: blur(.2px);
    animation: sysHeroFloatV10 8s ease-in-out infinite;
}

.container-hero .background-animation .wrapper .rows:nth-child(odd) #bg-box{
    animation-duration: 10s;
}

.container-hero .background-animation .wrapper .rows:nth-child(3n) #bg-box{
    animation-duration: 12s;
}

.container-hero .background-animation .wrapper .rows #bg-box rect{
    fill: rgba(var(--hero-bg-color), .23) !important;
}

/* ===== logo + title alignment ===== */
.container-hero .brand-wrapper{
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 26px 0 18px !important;
    transform: translateY(16px);
}

.container-hero .brand-wrapper .logo{
    max-width: 168px !important;
    width: 100% !important;
    height: 76px !important;
    margin: 0 auto !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transform: translateY(6px);
    filter:
        drop-shadow(0 0 10px rgba(255, 0, 111, .18))
        drop-shadow(0 0 20px rgba(52, 140, 255, .10));
}

.container-hero .brand-wrapper .name{
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.45);
}

/* extra spotlight behind logo/text */
.container-hero .brand-wrapper::before{
    content: "";
    position: absolute;
    width: 320px;
    height: 170px;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    z-index: -1;
    background:
        radial-gradient(circle,
            rgba(255, 0, 111, .18) 0%,
            rgba(45, 139, 255, .10) 42%,
            rgba(255,255,255,0) 72%);
    filter: blur(12px);
    opacity: .95;
}

/* ===== animations ===== */
@keyframes sysHeroAuroraV10{
    0%{
        transform: translate3d(-1.5%, 0, 0) scale(1.03);
        filter: blur(18px) saturate(108%);
    }
    50%{
        transform: translate3d(1.5%, -1%, 0) scale(1.07);
        filter: blur(22px) saturate(120%);
    }
    100%{
        transform: translate3d(0, 1.5%, 0) scale(1.04);
        filter: blur(20px) saturate(114%);
    }
}

@keyframes sysHeroGridDriftV10{
    0%{
        transform: translate3d(0, 0, 0);
    }
    100%{
        transform: translate3d(22px, 10px, 0);
    }
}

@keyframes sysHeroFloatV10{
    0%,100%{
        transform: translateY(0px);
    }
    50%{
        transform: translateY(-8px);
    }
}

/* ===== mobile ===== */
@media (max-width: 991.98px){
    .container-hero{
        background:
            linear-gradient(180deg,
                #02040a 0%,
                #040813 40%,
                #050610 100%) !important;
    }

    .container-hero::after{
        background-size: 32px 32px;
        opacity: .20;
    }

    .container-hero .brand-wrapper{
        gap: 10px !important;
        padding: 18px 0 12px !important;
        transform: translateY(10px);
    }

    .container-hero .brand-wrapper .logo{
        max-width: 144px !important;
        height: 64px !important;
        transform: translateY(4px);
    }

    .container-hero .brand-wrapper .name{
        font-size: 15px !important;
    }

    .container-hero .brand-wrapper::before{
        width: 250px;
        height: 135px;
    }

    .container-hero .background-animation{
        opacity: .30;
    }
}

/* SYS_HERO_POLISH_V10_END */