/*==================================================
                    GOOGLE FONT
==================================================*/

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@500;600;700;800&display=swap");

/*==================================================
                    RESET
==================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Inter",sans-serif;
    background:#050913;
    color:#fff;
    overflow-x:hidden;
    min-height:100vh;
}

img{
    display:block;
    max-width:100%;
}

a{
    text-decoration:none;
    color:inherit;
}

button{
    border:none;
    background:none;
    outline:none;
    cursor:pointer;
    font-family:inherit;
}

ul{
    list-style:none;
}

/*==================================================
                    VARIABLES
==================================================*/

:root{

    --bg:#050913;
    --bg2:#0a1120;
    --bg3:#10192b;

    --primary:#2E72FF;
    --primary2:#6E4DFF;

    --text:#ffffff;
    --text2:#B9C3D9;
    --text3:#73819E;

    --border:rgba(255,255,255,.08);

    --shadow:
    0 30px 80px rgba(0,0,0,.45);

    --radius:22px;

    --transition:.35s ease;

    --container:1480px;

}

/*==================================================
                    CONTAINER
==================================================*/

.container{

    width:min(var(--container),92%);
    margin:auto;

}

/*==================================================
                CUSTOM SCROLLBAR
==================================================*/

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#07111e;
}

::-webkit-scrollbar-thumb{

    background:linear-gradient(
    180deg,
    var(--primary),
    var(--primary2));

    border-radius:100px;

}

/*==================================================
                PAGE BACKGROUND
==================================================*/

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:
    radial-gradient(circle at left center,
    rgba(40,80,255,.15),
    transparent 35%),

    radial-gradient(circle at right center,
    rgba(120,70,255,.10),
    transparent 35%),

    linear-gradient(
    180deg,
    #050913,
    #050913);

    z-index:-5;

}
/*==================================================
                ANNOUNCEMENT BAR
==================================================*/

/* Announcement */

.announcement-bar{
    height:40px;
    background: linear-gradient(
    90deg,
    #2563eb,
    #3b82f6,
    #5b5eff
);
    border-bottom:1px solid rgba(255,255,255,.06);

    display:flex;
    align-items:center;

    position:relative;
    z-index:1000;
}

.announcement-container{
    width:100%;
    max-width:1320px;

    margin:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 24px;
}

.announcement-left{
    display:flex;
    align-items:center;
    gap:12px;

    color:#d7dde7;
    font-size:15px;
    font-weight:600;
}

.status-dot{
    width:9px;
    height:9px;

    border-radius:50%;

    background:#2bff83;

    box-shadow:
        0 0 10px #2bff83,
        0 0 18px rgba(43,255,131,.45);
}

.announcement-link{
    display:flex;
    align-items:center;
    gap:6px;

    color:#5ea3ff;
    text-decoration:none;

    font-size:15px;
    font-weight:600;

    transition:.25s;
}

.announcement-link:hover{
    color:#8ec2ff;
}

.announcement-link svg{
    width:13px;
    height:13px;
}

.announcement-bar::before{
    content:"";
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(80,120,255,.08),
        transparent
    );

    transform:translateX(-100%);
    animation:announcementShine 8s linear infinite;
}

@keyframes announcementShine{
    to{
        transform:translateX(100%);
    }
}



.header{
    position:fixed;
    top:58px;
    left:0;
    width:100%;
    z-index:1000;
    display:flex;
    justify-content:center;
    pointer-events:none;
}

.navbar{

    pointer-events:auto;

    width:min(1420px,92%);

    height:84px;

    display:flex;
    align-items:center;
    justify-content:flex-start;

    padding:0 18px 0 26px;

    border-radius:28px;

    background:
    linear-gradient(
        180deg,
        rgba(28,35,48,.88) 0%,
        rgba(17,22,32,.90) 100%
    );

    backdrop-filter:blur(22px) saturate(180%);
    -webkit-backdrop-filter:blur(22px) saturate(180%);

    border:1px solid rgba(96,165,250,.18);

    box-shadow:
        0 10px 35px rgba(0,0,0,.35),
        inset 0 1px rgba(255,255,255,.05),
        0 0 40px rgba(59,130,246,.08);
}

.logo{

    display:flex;
    align-items:center;

    flex-shrink:0;
}

.logo img{

    height:100px;
    width:auto;
    display:block;
}

.nav-links{
    display:flex;
    align-items:center;

    margin-left:90px;
    margin-right:auto;

    gap:70px;
}

.nav-links li{

    position:relative;
}

.nav-links a{

    display:flex;
    align-items:center;
    gap:7px;

    color:#F3F4F6;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    transition:.25s;
      height:52px;
}

.nav-links a:hover{

    color:#60A5FA;
}

.arrow{

    width:16px;
    height:16px;

    stroke:currentColor;
    stroke-width:2.4;
    fill:none;

    transition:.25s;
}

.has-dropdown:hover .arrow{

    transform:rotate(180deg);
}

.nav-right{

    display:flex;
    align-items:center;

    gap:12px;
    flex-shrink:0;
     margin-left:40px;
}
/* =====================================
   LANGUAGE BUTTON
===================================== */

.language{
    position:relative;
    display:flex;
    align-items:center;
}

.language-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    margin-right:20px;

    height:46px;
    padding:0 16px;

    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;

    color:#fff;
    cursor:pointer;

    transition:.25s ease;
}

.language-btn:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.15);
}

.flag-icon{
    width:24px;
    height:24px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
}

.language-btn .arrow{
    width:16px;
    height:16px;
    stroke:#9ca3af;
    stroke-width:2;
    fill:none;
    margin-left:2px;
    transition:transform .25s ease;
}

.language-selector.active .language-btn .arrow{
    transform:rotate(180deg);
}

/* Dropdown */

.language-selector{
    position:relative;
    display:flex;
    align-items:center;
}

.language-dropdown{
    position:absolute;
    top:calc(100% + 10px);
    right:0;

    width:240px;
    padding:10px;

    background:#0d1424;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    box-shadow:0 18px 45px rgba(0,0,0,.45);

    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);

    transition:.2s;
    z-index:9999;
}

.language-selector.active .language-dropdown{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
}



.language-dropdown a{
    display:flex;
    align-items:center;
    gap:12px;

    padding:11px 12px;
    border-radius:10px;

    color:#fff;
    text-decoration:none;
}

.language-dropdown a:hover{
    background:rgba(255,255,255,.07);
}

.language-dropdown img{
    width:22px;
    height:22px;
    object-fit:cover;
    border-radius:50%;
    flex-shrink:0;
}

.language-dropdown span{
    font-size:14px;
    font-weight:500;
    white-space:nowrap;
}


/*==================================================
                    LOGO
==================================================*/

.logo{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.logo img{
    width:190px;
    height:auto;
    display:block;
    transition:.35s ease;
}

.logo:hover img{
    transform:scale(1.04);
}

/*==================================================
                    NAV MENU
==================================================*/

.nav{
    flex:1;
    display:flex;
    justify-content:center;
}

.nav ul{
    display:flex;
    align-items:center;
    gap:48px;
}

.nav li{
    position:relative;
}

.nav a{
    display:flex;
    align-items:center;
    gap:8px;

    color:#F2F5FB;

    font-size:1rem;

    font-weight:500;

    transition:.3s;
}

.nav a i{
    font-size:.72rem;
    color:#C4CBD8;
    transition:.3s;
}

.nav a:hover{
    color:#4C8DFF;
}

.nav a:hover i{
    transform:rotate(180deg);
    color:#4C8DFF;
}

/* underline animation */

.nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0%;
    height:2px;
    border-radius:20px;
    background:#4C8DFF;
    transition:.3s;
}

.nav a:hover::after{
    width:100%;
}

/*==================================================
                NAV ACTIONS
==================================================*/

.nav-actions{
    display:flex;
    align-items:center;
    gap:28px;
}
/*==================================================
            DISCORD BUTTON
==================================================*/

.discord-btn{

    width:54px;
    height:54px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:18px;

    background:rgba(255,255,255,.03);

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

    color:#ffffff;

    transition:.3s ease;
    margin-right:20px;
}

.discord-btn svg{

    width:26px;
    height:26px;
}

.discord-btn:hover{
    border-color:#5865F2;
    box-shadow:
        0 0 0 1px rgba(88,101,242,.15),
        0 0 24px rgba(88,101,242,.18);

    transform:translateY(-2px);
}

/*==================================================
            CLIENT AREA BUTTON
==================================================*/

.client-btn{
    height:52px;
    padding:0 24px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:11px;

    border-radius:15px;

    background:
        linear-gradient(
            180deg,
            rgba(22,31,49,.94),
            rgba(12,19,32,.96)
        );

    border:1px solid rgba(65,139,255,.85);

    color:#f8fafc;
    text-decoration:none;

    font-size:15px;
    font-weight:650;
    white-space:nowrap;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 0 rgba(69,125,255,0);

    transition:
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.client-btn .client-icon{
    width:20px;
    height:20px;

    color:#f8fafc;
    flex-shrink:0;

    transition:
        transform .25s ease,
        color .25s ease;
}

.client-btn:hover{
    background:
        linear-gradient(
            180deg,
            rgba(27,39,65,.98),
            rgba(14,23,42,.98)
        );

    border-color:#5c8dff;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 0 1px rgba(74,125,255,.16),
        0 0 24px rgba(54,104,255,.30);

    transform:translateY(-1px);
}

.client-btn:hover .client-icon{
    transform:translateX(2px);
}

.client-btn:focus-visible{
    outline:2px solid #6d91ff;
    outline-offset:3px;
}
/*==================================================
                HERO SECTION
                    PART 5A
==================================================*/

.hero{

    position:relative;

    min-height:calc(100vh - 150px);

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:190px 0 90px;

}

.hero{
    background:
        linear-gradient(
            rgba(4, 8, 18, 0.72),
            rgba(4, 8, 18, 0.75)
        ),
        url("assets/bg.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/*==================================================
                HERO CONTAINER
==================================================*/

.hero .container{

    display:grid;

     grid-template-columns:1.18fr .82fr;

    align-items:center;

    gap:55px;

    position:relative;

    z-index:2;

}

/*==================================================
                HERO LEFT
==================================================*/

/* =========================================
   HERO ANIMATED HEADING LAYOUT
========================================= */

/* =========================================
   FINAL HERO HEADING FIX
========================================= */

.hero .container{
    grid-template-columns:minmax(0, 1.15fr) minmax(470px, .85fr);
    gap:45px;
}

.hero-left{
    min-width:0;
    transform:translateX(-35px);
    z-index:2;
}

.hero-right{
    min-width:0;
    z-index:1;
}

#heroTitle{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    

    width:100%;
    max-width:100%;

    font-size:clamp(4rem, 5vw, 5.65rem);
    line-height:.96;
    letter-spacing:-4px;

    overflow:visible;
}

#heroTitle .hero-line{
    display:block;
    white-space:nowrap;
}

#heroTitle .hero-line:last-child{
    display:flex;
    align-items:baseline;
    gap:18px;
    width:100%;
    white-space:nowrap;
}

.word-wrapper{
    position:relative;
    display:inline-flex;
    align-items:baseline;

    width:auto;
    min-width:0;
    height:auto;

    flex:0 0 auto;
    overflow:visible !important;

    padding:0 8px 8px 0;
}

.changing-word{
    display:inline-block;
    white-space:nowrap;

    font-size:1em;
    line-height:1.05;

    padding-right:8px;
    padding-bottom:6px;

    overflow:visible !important;

    background:linear-gradient(
        135deg,
        #dce9ff 0%,
        #73a8ff 55%,
        #4f7cff 100%
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;

    transform-origin:left center;

    transition:
        opacity .4s ease,
        transform .4s ease,
        filter .4s ease;
}

.changing-word.word-exit{
    opacity:0;
    transform:translateY(-35px);
    filter:blur(8px);
}

.changing-word.word-enter{
    opacity:0;
    transform:translateY(35px);
    filter:blur(8px);
}

@media(max-width:1200px){
    .hero-left{
        transform:none;
    }

    .hero .container{
        grid-template-columns:1fr;
    }
}

/*==================================================
                HERO RIGHT
==================================================*/

.hero-right{

    position:relative;

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

/*==================================================
                BACKGROUND GLOW
==================================================*/

.hero::before{

    content:"";

    position:absolute;

    left:-220px;

    top:140px;

    width:650px;

    height:650px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(46,114,255,.16),

    transparent 70%);

    filter:blur(90px);

    z-index:0;

}

.hero::after{

    content:"";

    position:absolute;

    right:-180px;

    top:60px;

    width:550px;

    height:550px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(110,77,255,.12),

    transparent 70%);

    filter:blur(80px);

    z-index:0;

}

/*==================================================
            HERO DECORATION
==================================================*/

.hero-right::before{

    content:"";

    position:absolute;

    inset:-25px;

    border-radius:40px;

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

    pointer-events:none;

}

.hero-right::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    right:-60px;

    bottom:-60px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(46,114,255,.10),

    transparent 70%);

    filter:blur(70px);

    pointer-events:none;

}

/*==================================================
                RESPONSIVE
==================================================*/

@media (max-width:1200px){

    .hero .container{

        grid-template-columns:1fr;

        gap:70px;

    }

    .hero-left{

        align-items:center;

        text-align:center;

    }

    .hero-right{

        justify-content:center;

    }

}

@media (max-width:768px){

    .hero{

        padding:60px 0 70px;

    }

    .hero .container{

        gap:50px;

    }

}
/*==================================================
                HERO CONTENT
                    PART 5B
==================================================*/

/*==================================================
                BADGE
==================================================*/

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 22px;

    margin-bottom:32px;

    border-radius:999px;

    background:rgba(46,114,255,.08);

    border:1px solid rgba(46,114,255,.22);

    backdrop-filter:blur(14px);

}

.hero-badge svg{

    width:18px;

    height:18px;

    color:#4D8DFF;

    flex-shrink:0;

}

.hero-badge span{

    color:#C7D6F5;

    font-size:.9rem;

    font-weight:600;

    letter-spacing:.3px;

}

/*==================================================
                TITLE
==================================================*/

.hero-title{
    max-width:760px;
    margin-bottom:12px;
}

.hero-title h1{

    font-size:clamp(4rem,6vw,6.4rem);

    line-height:.98;

    font-weight:900;

    letter-spacing:-3px;

    color:#FFFFFF;

}

.hero-title .gradient{

    background:linear-gradient(
        135deg,
        #2E72FF 0%,
        #78A9FF 100%
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;

}

/*==================================================
                DESCRIPTION
==================================================*/

.hero-description{

    max-width:640px;

    margin-bottom:0px;

}

.hero-description p{

    color:#B7C5DB;

    font-size:1.08rem;

    line-height:1.9;

    font-weight:400;

}

/*==================================================
                TRUST ROW
==================================================*/

.hero-trust{

    display:flex;

    align-items:center;

    gap:16px;

    margin-top:30px;

}

.hero-trust-icons{

    display:flex;

    align-items:center;

}

.hero-trust-icons img{

    width:42px;

    height:42px;

    border-radius:50%;

    border:2px solid #050913;

    margin-left:-12px;

}

.hero-trust-icons img:first-child{

    margin-left:0;

}

.hero-trust-text h4{

    color:#FFFFFF;

    font-size:.95rem;

    font-weight:700;

    margin-bottom:4px;

}

.hero-trust-text p{

    color:#8896B3;

    font-size:.86rem;

}

/*==================================================
                RESPONSIVE
==================================================*/

@media(max-width:1200px){

    .hero-title{

        text-align:center;

    }

    .hero-description{

        text-align:center;

    }

    .hero-trust{

        justify-content:center;

    }

}

@media(max-width:768px){

    .hero-title h1{

        font-size:3.2rem;

        letter-spacing:-1px;

    }

    .hero-description p{

        font-size:1rem;

    }

}
/*==================================================
                HERO BUTTONS
                    PART 5C
==================================================*/

/*==================================================
                BUTTON GROUP
==================================================*/

.hero-buttons{

    display:flex;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:42px;

}

/*==================================================
            PRIMARY BUTTON
==================================================*/

.hero-primary-btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    height:62px;

    padding:0 34px;

    border-radius:18px;

    background:linear-gradient(
        135deg,
        #2E72FF 0%,
        #5F8DFF 45%,
        #6E4DFF 100%
    );

    color:#fff;

    font-size:1rem;

    font-weight:700;

    overflow:hidden;

    transition:.35s ease;

    box-shadow:
        0 15px 40px rgba(46,114,255,.35);

}

.hero-primary-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:

    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.28),
        transparent
    );

    transform:skewX(-25deg);

}

.hero-primary-btn:hover{

    transform:translateY(-4px);

    box-shadow:
        0 22px 55px rgba(46,114,255,.45);

}

.hero-primary-btn:hover::before{

    animation:heroButtonShine .9s linear;

}

/*==================================================
            SECONDARY BUTTON
==================================================*/

.hero-secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    height:62px;

    padding:0 34px;

    border-radius:18px;

    background:rgba(255,255,255,.04);

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

    backdrop-filter:blur(12px);

    color:#fff;

    font-size:1rem;

    font-weight:600;

    transition:.35s ease;

}

.hero-secondary-btn:hover{

    transform:translateY(-4px);

    background:rgba(255,255,255,.08);

    border-color:#2E72FF;

    box-shadow:
        0 15px 40px rgba(46,114,255,.20);

}

/*==================================================
                ICONS
==================================================*/

.hero-primary-btn svg,
.hero-secondary-btn svg{

    width:20px;

    height:20px;

    flex-shrink:0;

}

/*==================================================
                SHINE
==================================================*/

@keyframes heroButtonShine{

    from{

        left:-120%;

    }

    to{

        left:120%;

    }

}

/*==================================================
                RESPONSIVE
==================================================*/

@media(max-width:768px){

    .hero-buttons{

        width:100%;

        justify-content:center;

    }

    .hero-primary-btn,
    .hero-secondary-btn{

        width:100%;

        max-width:340px;

    }

}
/*==================================================
                HERO STATS
                    PART 5D
==================================================*/

.hero-stats{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:18px;

    width:100%;

    max-width:760px;

}

/*==================================================
                STAT CARD
==================================================*/

.hero-stat{

    position:relative;

    overflow:hidden;

    padding:24px;

    border-radius:22px;

    background:
    linear-gradient(
    180deg,
    rgba(255,255,255,.05),
    rgba(255,255,255,.025));

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

    backdrop-filter:blur(18px);

    transition:.35s ease;

}

.hero-stat:hover{

    transform:translateY(-8px);

    border-color:rgba(46,114,255,.35);

    box-shadow:

    0 24px 55px rgba(0,0,0,.35),

    0 0 35px rgba(46,114,255,.16);

}

/*==================================================
                GLOW
==================================================*/

.hero-stat::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    right:-120px;

    top:-120px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(46,114,255,.14),

    transparent 70%);

    opacity:0;

    transition:.35s ease;

}

.hero-stat:hover::before{

    opacity:1;

}

/*==================================================
                NUMBER
==================================================*/

.hero-stat h3{

    font-size:1.75rem;

    font-weight:800;

    color:#ffffff;

    margin-bottom:8px;

    line-height:1;

}

.hero-stat h3 span{

    color:#2E72FF;

}

/*==================================================
                LABEL
==================================================*/

.hero-stat p{

    color:#9DAAC1;

    font-size:.88rem;

    line-height:1.7;

}

/*==================================================
                RESPONSIVE
==================================================*/

@media(max-width:992px){

    .hero-stats{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:576px){

    .hero-stats{

        grid-template-columns:1fr;

    }

}
/*==================================================
            LAUNCHER WINDOW
                PART 5E-1
==================================================*/

.launcher{

    position:relative;

    width:100%;

    max-width:700px;

    border-radius:30px;

    overflow:hidden;

    background:

    linear-gradient(
    180deg,
    rgba(18,25,39,.98),
    rgba(10,15,26,.98));

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

    backdrop-filter:blur(30px);

    -webkit-backdrop-filter:blur(30px);

    box-shadow:

    0 40px 100px rgba(0,0,0,.55),

    0 0 80px rgba(46,114,255,.12);

}

/*==================================================
            OUTER GLOW
==================================================*/

.launcher::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    top:-240px;

    right:-240px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(46,114,255,.22),

    transparent 72%);

    filter:blur(80px);

    pointer-events:none;

}

.launcher::after{

    content:"";

    position:absolute;

    width:360px;

    height:360px;

    left:-180px;

    bottom:-180px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(110,77,255,.18),

    transparent 70%);

    filter:blur(70px);

    pointer-events:none;

}

/*==================================================
            INNER BORDER
==================================================*/

.launcher-border{

    position:absolute;

    inset:1px;

    border-radius:29px;

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

    pointer-events:none;

}

/*==================================================
            GLASS SHINE
==================================================*/

.launcher-shine{

    position:absolute;

    inset:0;

    overflow:hidden;

    border-radius:30px;

    pointer-events:none;

}

.launcher-shine::before{

    content:"";

    position:absolute;

    top:-40%;

    left:-40%;

    width:55%;

    height:180%;

    transform:rotate(28deg);

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.05),

    transparent

    );

}

/*==================================================
            BODY
==================================================*/

.launcher-body{

    position:relative;

    z-index:5;

    padding:30px;

}

/*==================================================
            SCREEN
==================================================*/

.launcher-screen{

    display:none;

    animation:launcherFade .45s ease;

}

.launcher-screen.active{

    display:block;

}

/*==================================================
            HOME LAYOUT
==================================================*/

.launcher-home{

    display:flex;

    flex-direction:column;

    gap:22px;

}

/*==================================================
            ANIMATION
==================================================*/

@keyframes launcherFade{

    from{

        opacity:0;

        transform:translateY(24px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:992px){

    .launcher{

        max-width:100%;

    }

}

@media(max-width:768px){

    .launcher-body{

        padding:22px;

    }

}
/*==================================================
            LAUNCHER HEADER
                PART 5E-2
==================================================*/

.launcher-header{

    position:relative;

    z-index:10;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:22px 28px;

    background:

    linear-gradient(
    180deg,
    rgba(255,255,255,.035),
    rgba(255,255,255,.015));

    border-bottom:1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(18px);

}

/*==================================================
            WINDOW CONTROLS
==================================================*/

.window-controls{

    display:flex;

    align-items:center;

    gap:10px;

}

.window-controls span{

    width:13px;

    height:13px;

    border-radius:50%;

    transition:.35s ease;

}

.window-controls span:nth-child(1){

    background:#FF5F57;

}

.window-controls span:nth-child(2){

    background:#FEBC2E;

}

.window-controls span:nth-child(3){

    background:#28C840;

}

.window-controls span:hover{

    transform:scale(1.15);

}

/*==================================================
            TITLE
==================================================*/

.launcher-title{

    display:flex;

    align-items:center;

    gap:16px;

}

.launcher-logo{

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:

    linear-gradient(
    135deg,
    #2E72FF,
    #6E4DFF);

    box-shadow:

    0 18px 45px rgba(46,114,255,.28);

}

.launcher-logo svg{

    width:26px;

    height:26px;

    color:#fff;

}

.launcher-title h3{

    color:#fff;

    font-size:1.08rem;

    font-weight:700;

    margin-bottom:4px;

}

.launcher-title p{

    color:#94A5C3;

    font-size:.82rem;

}

/*==================================================
            ONLINE BADGE
==================================================*/

.launcher-status{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(24,240,122,.08);

    border:1px solid rgba(24,240,122,.22);

    color:#8DFFB8;

    font-size:.82rem;

    font-weight:600;

}

.launcher-status::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:#18F07A;

    box-shadow:

    0 0 15px #18F07A,

    0 0 30px rgba(24,240,122,.45);

    animation:launcherPulse 2s infinite;

}

@keyframes launcherPulse{

    0%{

        transform:scale(.9);

        opacity:1;

    }

    50%{

        transform:scale(1.35);

        opacity:.65;

    }

    100%{

        transform:scale(.9);

        opacity:1;

    }

}

/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:768px){

    .launcher-header{

        padding:18px;

        flex-wrap:wrap;

    }

    .launcher-status{

        width:100%;

        justify-content:center;

    }

}
/*==================================================
        LAUNCHER HOME CARDS
                PART 5E-3
==================================================*/

/*==================================================
                HOME
==================================================*/

.launcher-home{

    display:flex;

    flex-direction:column;

    gap:22px;

}

/*==================================================
                CARD
==================================================*/

.launcher-card{

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    gap:22px;

    padding:26px;

    border-radius:24px;

    background:

    linear-gradient(
    180deg,
    rgba(255,255,255,.045),
    rgba(255,255,255,.02));

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

    cursor:pointer;

    transition:.35s ease;

}

.launcher-card:hover{

    transform:translateY(-8px);

    border-color:rgba(46,114,255,.30);

    box-shadow:

    0 24px 60px rgba(0,0,0,.35),

    0 0 40px rgba(46,114,255,.14);

}

/*==================================================
                GLOW
==================================================*/

.launcher-card::before{

    content:"";

    position:absolute;

    width:240px;

    height:240px;

    top:-120px;

    right:-120px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(46,114,255,.20),

    transparent 72%);

    opacity:0;

    transition:.35s ease;

}

.launcher-card:hover::before{

    opacity:1;

}

/*==================================================
                ICON
==================================================*/

.launcher-card-icon{

    width:84px;

    height:84px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:

    linear-gradient(
    135deg,
    #2E72FF,
    #6E4DFF);

    box-shadow:

    0 18px 40px rgba(46,114,255,.28);

}

.launcher-card-icon svg{

    width:40px;

    height:40px;

    color:#fff;

}

/*==================================================
                CONTENT
==================================================*/

.launcher-card-content{

    flex:1;

}

.launcher-card-content h3{

    color:#fff;

    font-size:1.35rem;

    font-weight:700;

    margin-bottom:10px;

}

.launcher-card-content p{

    color:#A8B7D0;

    font-size:.92rem;

    line-height:1.8;

    margin-bottom:18px;

}

/*==================================================
                FEATURES
==================================================*/

.launcher-features{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.launcher-feature{

    padding:8px 14px;

    border-radius:999px;

    background:rgba(255,255,255,.05);

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

    color:#D9E4F7;

    font-size:.76rem;

    font-weight:600;

}

/*==================================================
                ARROW
==================================================*/

.launcher-arrow{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:18px;

    background:rgba(255,255,255,.04);

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

    transition:.35s ease;

}

.launcher-arrow svg{

    width:22px;

    height:22px;

    color:#8DB8FF;

    transition:.35s ease;

}

.launcher-card:hover .launcher-arrow{

    background:

    linear-gradient(
    135deg,
    #2E72FF,
    #6E4DFF);

    border-color:transparent;

}

.launcher-card:hover .launcher-arrow svg{

    color:#fff;

    transform:translateX(4px);

}

/*==================================================
                RESPONSIVE
==================================================*/

@media(max-width:768px){

    .launcher-card{

        flex-direction:column;

        align-items:flex-start;

        padding:22px;

    }

    .launcher-arrow{

        display:none;

    }

    .launcher-card-icon{

        width:74px;

        height:74px;

    }

    .launcher-card-icon svg{

        width:34px;

        height:34px;

    }

}
/*==================================================
            GAME BROWSER
                PART 5E-4
==================================================*/

/*==================================================
            BROWSER WRAPPER
==================================================*/

.game-browser{

    display:flex;

    flex-direction:column;

    gap:24px;

}

/*==================================================
            TOP BAR
==================================================*/

.browser-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

}

.browser-back{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:rgba(255,255,255,.05);

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

    transition:.35s ease;

}

.browser-back svg{

    width:22px;

    height:22px;

    color:#ffffff;

}

.browser-back:hover{

    background:rgba(46,114,255,.12);

    border-color:#2E72FF;

}

/*==================================================
            SEARCH
==================================================*/

.browser-search{

    position:relative;

    flex:1;

}

.browser-search input{

    width:100%;

    height:56px;

    padding:0 22px 0 54px;

    border-radius:18px;

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

    background:rgba(255,255,255,.04);

    color:#fff;

    font-size:.95rem;

    transition:.35s;

}

.browser-search input:focus{

    border-color:#2E72FF;

    background:rgba(46,114,255,.06);

}

.browser-search svg{

    position:absolute;

    left:20px;

    top:50%;

    transform:translateY(-50%);

    width:20px;

    height:20px;

    color:#8FA4C7;

}

/*==================================================
            CATEGORIES
==================================================*/

.browser-categories{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.browser-category{

    padding:10px 18px;

    border-radius:999px;

    background:rgba(255,255,255,.04);

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

    color:#BFCBE0;

    font-size:.82rem;

    font-weight:600;

    transition:.35s;

    cursor:pointer;

}

.browser-category.active{

    background:linear-gradient(
    135deg,
    #2E72FF,
    #6E4DFF);

    color:#fff;

    border:none;

}

.browser-category:hover{

    border-color:#2E72FF;

}

/*==================================================
            GAME GRID
==================================================*/

.game-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

/*==================================================
            GAME CARD
==================================================*/

.game-card{

    position:relative;

    overflow:hidden;

    padding:24px;

    border-radius:22px;

    background:rgba(255,255,255,.04);

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

    transition:.35s ease;

    cursor:pointer;

}

.game-card:hover{

    transform:translateY(-8px);

    border-color:#2E72FF;

    box-shadow:

    0 24px 55px rgba(0,0,0,.35),

    0 0 35px rgba(46,114,255,.15);

}

.game-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top right,

    rgba(46,114,255,.15),

    transparent 60%);

    opacity:0;

    transition:.35s;

}

.game-card:hover::before{

    opacity:1;

}

.game-card-image{

    width:74px;

    height:74px;

    border-radius:20px;

    margin-bottom:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
    135deg,
    #2E72FF,
    #6E4DFF);

}

.game-card-image img{

    width:46px;

    height:46px;

}

.game-card h4{

    color:#fff;

    font-size:1.08rem;

    margin-bottom:8px;

}

.game-card p{

    color:#A8B7D0;

    font-size:.88rem;

    line-height:1.7;

    margin-bottom:18px;

}

.game-card .primary-btn{

    width:100%;

}

/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:768px){

    .browser-top{

        flex-direction:column;

    }

    .game-grid{

        grid-template-columns:1fr;

    }

}
/*==================================================
        CLOUD HOSTING BROWSER
                PART 5E-5
==================================================*/

/*==================================================
            CLOUD WRAPPER
==================================================*/

.cloud-browser{

    display:flex;

    flex-direction:column;

    gap:24px;

}

/*==================================================
            CLOUD GRID
==================================================*/

.cloud-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

/*==================================================
            CLOUD CARD
==================================================*/

.cloud-card{

    position:relative;

    overflow:hidden;

    padding:26px;

    border-radius:24px;

    background:
    linear-gradient(
    180deg,
    rgba(255,255,255,.045),
    rgba(255,255,255,.02));

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

    transition:.35s ease;

    cursor:pointer;

}

.cloud-card:hover{

    transform:translateY(-8px);

    border-color:#2E72FF;

    box-shadow:

    0 25px 60px rgba(0,0,0,.38),

    0 0 35px rgba(46,114,255,.16);

}

/*==================================================
            TOP ICON
==================================================*/

.cloud-icon{

    width:78px;

    height:78px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:

    linear-gradient(
    135deg,
    #2E72FF,
    #6E4DFF);

    margin-bottom:22px;

    box-shadow:

    0 18px 40px rgba(46,114,255,.25);

}

.cloud-icon svg{

    width:38px;

    height:38px;

    color:#fff;

}

/*==================================================
            CONTENT
==================================================*/

.cloud-card h3{

    color:#fff;

    font-size:1.28rem;

    font-weight:700;

    margin-bottom:12px;

}

.cloud-card p{

    color:#AAB8D0;

    font-size:.9rem;

    line-height:1.8;

    margin-bottom:22px;

}

/*==================================================
            FEATURES
==================================================*/

.cloud-features{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-bottom:24px;

}

.cloud-feature{

    display:flex;

    align-items:center;

    gap:12px;

    color:#D5E2F7;

    font-size:.88rem;

    font-weight:500;

}

.cloud-feature svg{

    width:18px;

    height:18px;

    color:#55A6FF;

    flex-shrink:0;

}

/*==================================================
            PRICE
==================================================*/

.cloud-price{

    display:flex;

    align-items:flex-end;

    gap:6px;

    margin-bottom:22px;

}

.cloud-price h2{

    color:#fff;

    font-size:2rem;

    font-weight:800;

    line-height:1;

}

.cloud-price span{

    color:#8EA2C5;

    font-size:.9rem;

    margin-bottom:4px;

}

/*==================================================
            ACTION BUTTON
==================================================*/

.cloud-card .primary-btn{

    width:100%;

    justify-content:center;

}

/*==================================================
            GLOW EFFECT
==================================================*/

.cloud-card::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    right:-120px;

    top:-120px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(46,114,255,.16),

    transparent 70%);

    opacity:0;

    transition:.35s;

}

.cloud-card:hover::before{

    opacity:1;

}

/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:768px){

    .cloud-grid{

        grid-template-columns:1fr;

    }

}
/*==================================================
        PRODUCT PREVIEW PANEL
                PART 5E-6
==================================================*/

/*==================================================
            PRODUCT PREVIEW
==================================================*/

.product-preview{

    display:flex;

    flex-direction:column;

    gap:22px;

}

/*==================================================
            BANNER
==================================================*/

.product-banner{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    padding:32px;

    background:

    linear-gradient(
    135deg,
    rgba(46,114,255,.18),
    rgba(110,77,255,.10));

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

    text-align:center;

}

.product-banner::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top,

    rgba(255,255,255,.08),

    transparent 65%);

}

.product-banner img{

    width:210px;

    margin:auto;

    position:relative;

    z-index:2;

    filter:

    drop-shadow(0 25px 45px rgba(0,0,0,.45));

}

.product-banner h2{

    margin-top:22px;

    color:#fff;

    font-size:1.65rem;

    font-weight:800;

}

.product-banner p{

    margin-top:10px;

    color:#B5C5DE;

    line-height:1.8;

    font-size:.95rem;

}

/*==================================================
            FEATURES
==================================================*/

.product-features{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.product-feature{

    display:flex;

    align-items:center;

    gap:18px;

    padding:20px;

    border-radius:20px;

    background:rgba(255,255,255,.04);

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

    transition:.35s ease;

}

.product-feature:hover{

    transform:translateY(-6px);

    border-color:#2E72FF;

}

.product-icon{

    width:58px;

    height:58px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:

    linear-gradient(
    135deg,
    #2E72FF,
    #6E4DFF);

}

.product-icon svg{

    width:28px;

    height:28px;

    color:#fff;

}

.product-feature h4{

    color:#fff;

    font-size:1rem;

    margin-bottom:5px;

}

.product-feature p{

    color:#A9B9D3;

    font-size:.82rem;

    line-height:1.7;

}

/*==================================================
            BOTTOM BAR
==================================================*/

.product-bottom{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

    padding:24px;

    border-radius:22px;

    background:rgba(255,255,255,.04);

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

}

.product-price h3{

    color:#fff;

    font-size:2rem;

    font-weight:800;

}

.product-price span{

    color:#93A5C4;

    font-size:.9rem;

}

.product-bottom .primary-btn{

    min-width:220px;

}

/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:768px){

    .product-features{

        grid-template-columns:1fr;

    }

    .product-bottom{

        flex-direction:column;

        text-align:center;

    }

    .product-bottom .primary-btn{

        width:100%;

    }

}
/*==================================================
        LAUNCHER ANIMATIONS
                PART 5E-7
==================================================*/

/*==================================================
            FLOATING
==================================================*/

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes pulseGlow{

    0%{

        opacity:.55;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:.55;

    }

}

@keyframes shine{

    from{

        left:-140%;

    }

    to{

        left:140%;

    }

}

/*==================================================
            ICON ANIMATION
==================================================*/

.launcher-logo,
.launcher-card-icon,
.cloud-icon,
.product-icon{

    animation:floating 5s ease-in-out infinite;

}

/*==================================================
            PRODUCT IMAGE
==================================================*/

.product-banner img{

    animation:floating 6s ease-in-out infinite;

}

/*==================================================
            ONLINE BADGE
==================================================*/

.launcher-status{

    animation:pulseGlow 2.5s ease-in-out infinite;

}

/*==================================================
            SHINE EFFECT
==================================================*/

.launcher-card,
.game-card,
.cloud-card,
.product-feature{

    position:relative;

    overflow:hidden;

}

.launcher-card::after,
.game-card::after,
.cloud-card::after,
.product-feature::after{

    content:"";

    position:absolute;

    top:0;

    left:-140%;

    width:90px;

    height:100%;

    transform:skewX(-25deg);

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.12),

    transparent

    );

}

.launcher-card:hover::after,
.game-card:hover::after,
.cloud-card:hover::after,
.product-feature:hover::after{

    animation:shine .9s linear;

}

/*==================================================
            HOVER SCALE
==================================================*/

.launcher-card:hover{

    transform:translateY(-8px) scale(1.015);

}

.game-card:hover{

    transform:translateY(-8px) scale(1.02);

}

.cloud-card:hover{

    transform:translateY(-8px) scale(1.02);

}

.product-feature:hover{

    transform:translateY(-6px);

}

/*==================================================
            BUTTONS
==================================================*/

.hero-primary-btn,
.hero-secondary-btn,
.primary-btn{

    transition:

    transform .35s ease,

    box-shadow .35s ease,

    background .35s ease;

}

.hero-primary-btn:hover,
.primary-btn:hover{

    transform:translateY(-4px);

}

.hero-secondary-btn:hover{

    transform:translateY(-4px);

}

/*==================================================
            GLASS BLUR
==================================================*/

.launcher,
.launcher-card,
.game-card,
.cloud-card,
.product-feature{

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

}

/*==================================================
            SCROLLBAR
==================================================*/

.launcher-body{

    scrollbar-width:thin;

    scrollbar-color:#2E72FF transparent;

}

.launcher-body::-webkit-scrollbar{

    width:8px;

}

.launcher-body::-webkit-scrollbar-track{

    background:transparent;

}

.launcher-body::-webkit-scrollbar-thumb{

    background:#2E72FF;

    border-radius:999px;

}

/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:1200px){

    .hero .container{

        gap:70px;

    }

}

@media(max-width:992px){

    .hero{

        min-height:auto;

        padding:120px 0 80px;

    }

}

@media(max-width:768px){

    .hero{

        padding:100px 0 70px;

    }

    .hero-left{

        text-align:center;

        align-items:center;

    }

    .hero-buttons{

        justify-content:center;

    }

    .launcher{

        max-width:100%;

    }

}

@media(max-width:480px){

    .hero-title h1{

        font-size:2.6rem;

    }

    .hero-badge{

        padding:10px 18px;

    }

    .hero-primary-btn,
    .hero-secondary-btn{

        width:100%;

    }

}
.nav-icon{
    width:18px;
    height:18px;
    stroke:currentColor;
    flex-shrink:0;
}

/*==================================================
        FINAL HERO LEFT — SERVOMIX
==================================================*/

.hero-left{
    width:100%;
    max-width:720px;
}

.hero-status{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:38px;
    padding:0 15px;
    margin-bottom:24px;
    border:1px solid rgba(72,255,155,.18);
    border-radius:999px;
    background:rgba(20,55,47,.26);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    color:#c9f9df;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.hero-status-dot{
    position:relative;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#47f59a;
    box-shadow:0 0 14px rgba(71,245,154,.75);
}

.hero-status-dot::after{
    content:"";
    position:absolute;
    inset:-5px;
    border:1px solid rgba(71,245,154,.35);
    border-radius:50%;
    animation:heroStatusPulse 2s ease-out infinite;
}

.hero-heading-wrap{
    margin-bottom:24px;
}

.hero-eyebrow{
    display:block;
    margin-bottom:12px;
    color:#8ea5c9;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.hero-left #heroTitle{
    display:flex;
    flex-direction:column;
    margin:0;
    color:#fff;
    font-size:clamp(3.65rem,5.65vw,6rem);
    font-weight:850;
    line-height:.94;
    letter-spacing:-.065em;
    text-transform:uppercase;
}

.hero-heading-gradient{
    padding-bottom:.08em;
    background:linear-gradient(100deg,#ffffff 0%,#a8c7ff 34%,#4f8cff 66%,#8269ff 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.hero-copy{
    max-width:650px;
    margin:0 0 32px;
    color:#aebbd1;
    font-size:1.05rem;
    font-weight:400;
    line-height:1.8;
}

.hero-buttons{
    gap:14px;
    margin-bottom:34px;
}

.hero-cta{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:58px;
    border-radius:16px;
    font-size:.96rem;
    font-weight:700;
    transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease;
}

.hero-cta-primary{
    min-width:222px;
    justify-content:space-between;
    gap:24px;
    padding:6px 7px 6px 24px;
    border:1px solid rgba(108,151,255,.72);
    background:linear-gradient(135deg,rgba(42,104,255,.96),rgba(91,72,255,.94));
    box-shadow:0 14px 38px rgba(43,92,255,.27),inset 0 1px 0 rgba(255,255,255,.18);
}

.hero-cta-icon{
    display:grid;
    place-items:center;
    width:45px;
    height:45px;
    border-radius:12px;
    background:rgba(6,13,29,.27);
    border:1px solid rgba(255,255,255,.15);
}

.hero-cta-icon svg,
.hero-cta-secondary svg{
    width:19px;
    height:19px;
}

.hero-cta-secondary{
    gap:12px;
    min-width:158px;
    padding:0 22px;
    color:#eef4ff;
    border:1px solid rgba(141,165,209,.2);
    background:linear-gradient(180deg,rgba(21,31,50,.82),rgba(10,16,29,.82));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}

.hero-cta:hover{
    transform:translateY(-3px);
}

.hero-cta-primary:hover{
    box-shadow:0 18px 46px rgba(43,92,255,.4),inset 0 1px 0 rgba(255,255,255,.22);
}

.hero-cta-secondary:hover{
    border-color:rgba(85,135,255,.62);
    background:linear-gradient(180deg,rgba(27,42,70,.9),rgba(12,21,40,.9));
    box-shadow:0 14px 34px rgba(35,78,188,.18),inset 0 1px 0 rgba(255,255,255,.06);
}

.hero-proof{
    display:flex;
    align-items:stretch;
    gap:0;
    width:100%;
    max-width:670px;
    padding:16px 0;
    border-top:1px solid rgba(255,255,255,.075);
    border-bottom:1px solid rgba(255,255,255,.075);
}

.hero-proof-item{
    display:flex;
    align-items:center;
    gap:11px;
    flex:1;
    min-width:0;
    padding:0 20px;
    border-right:1px solid rgba(255,255,255,.075);
}

.hero-proof-item:first-child{padding-left:0;}
.hero-proof-item:last-child{padding-right:0;border-right:0;}

.hero-proof-icon{
    display:grid;
    place-items:center;
    width:39px;
    height:39px;
    flex:0 0 39px;
    border:1px solid rgba(83,139,255,.22);
    border-radius:12px;
    background:rgba(38,87,190,.11);
    color:#72a5ff;
}

.hero-proof-icon svg{
    width:20px;
    height:20px;
}

.hero-proof-copy{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

.hero-proof-copy strong{
    color:#f7f9ff;
    font-size:.93rem;
    font-weight:750;
    white-space:nowrap;
}

.hero-proof-copy small{
    color:#7787a4;
    font-size:.7rem;
    font-weight:600;
    white-space:nowrap;
}

.hero-trustpilot{
    display:grid;
    grid-template-columns:auto auto 1fr;
    align-items:center;
    gap:12px;
    margin-top:23px;
}

.trustpilot-brand{
    display:flex;
    align-items:center;
    gap:6px;
    color:#f4f7fb;
    font-size:.9rem;
}

.trustpilot-star{
    color:#00b67a;
    font-size:1.15rem;
    line-height:1;
}

.trustpilot-stars{
    display:flex;
    gap:3px;
}

.trustpilot-stars span{
    display:grid;
    place-items:center;
    width:21px;
    height:21px;
    background:#00b67a;
    color:#fff;
    font-size:.72rem;
    line-height:1;
}

.hero-trustpilot p{
    color:#8f9db5;
    font-size:.78rem;
    line-height:1.4;
}

@keyframes heroStatusPulse{
    0%{transform:scale(.65);opacity:.8;}
    70%,100%{transform:scale(1.65);opacity:0;}
}

@media(max-width:1200px){
    .hero-left{max-width:760px;}
    .hero-left #heroTitle{align-items:center;}
    .hero-copy{margin-left:auto;margin-right:auto;}
    .hero-proof{margin-left:auto;margin-right:auto;}
    .hero-trustpilot{justify-content:center;grid-template-columns:auto auto auto;}
}

@media(max-width:700px){
    .hero-status{margin-left:auto;margin-right:auto;}
    .hero-left #heroTitle{font-size:clamp(2.85rem,14vw,4.2rem);letter-spacing:-.055em;}
    .hero-copy{font-size:.98rem;line-height:1.7;}
    .hero-buttons{flex-direction:column;align-items:stretch;}
    .hero-cta{width:100%;max-width:none;}
    .hero-proof{display:grid;grid-template-columns:1fr;gap:13px;padding:16px;}
    .hero-proof-item,.hero-proof-item:first-child,.hero-proof-item:last-child{padding:0;border-right:0;}
    .hero-trustpilot{grid-template-columns:auto auto;}
    .hero-trustpilot p{grid-column:1/-1;text-align:center;}
}
/* =========================================
   TRUSTPILOT REVIEW BLOCK
========================================= */

.trustpilot-card{
    display:inline-flex;
    align-items:center;
    gap:22px;

    margin-top:28px;
    padding:14px 18px;

    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;

    background:rgba(8,15,28,.55);
    backdrop-filter:blur(14px);
}

.trustpilot-brand{
    display:flex;
    align-items:center;
    gap:8px;

    color:#fff;
    font-size:.95rem;
}

.trustpilot-star{
    color:#00b67a;
    font-size:1.15rem;
}

.trustpilot-rating{
    display:flex;
    align-items:center;
    gap:14px;
}

.trustpilot-stars{
    display:flex;
    gap:3px;
}

.trustpilot-stars span{
    width:22px;
    height:22px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#00b67a;
    color:#fff;

    font-size:.7rem;
}

.trustpilot-copy{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.trustpilot-copy strong{
    color:#fff;
    font-size:.88rem;
}

.trustpilot-copy span{
    color:#8f9db6;
    font-size:.74rem;
}
.trustpilot-users{
    display:flex;
    align-items:center;
     margin-right:4px;
}

.trustpilot-users img{
    width:34px;
    height:34px;

    border-radius:50%;
    object-fit:cover;

    border:2px solid #101827;

    margin-left:-10px;

    background:#1b2436;

    box-shadow:0 6px 14px rgba(0,0,0,.35);
}

.trustpilot-users img:first-child{
    margin-left:0;
}
.hero-heading-wrap{
    margin-bottom:0;
}

.hero-title{
    margin-bottom:12px !important;
}

#heroTitle{
    margin-bottom:0 !important;
}
.trustpilot-link{
    display:inline-block;
    text-decoration:none;
    color:inherit;
}

.trustpilot-card{
    cursor:pointer;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.trustpilot-card:hover{
    transform:translateY(-4px);

    border-color:rgba(0,182,122,.45);

    box-shadow:
        0 12px 35px rgba(0,0,0,.35),
        0 0 30px rgba(0,182,122,.15);
}
.trustpilot-card:hover .trustpilot-stars span{
    box-shadow:0 0 12px rgba(0,182,122,.45);
}
@keyframes floatCard{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-8px);
    }
}

.hero-right{
    animation:floatCard 7s ease-in-out infinite;
}
/* ==================================================
                WHY SERVOMIX SECTION
================================================== */

.why-servomix{
    position:relative;
    overflow:hidden;
    padding:120px 0 130px;

    background:
        radial-gradient(
            circle at 18% 45%,
            rgba(46,114,255,.10),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 50%,
            rgba(110,77,255,.09),
            transparent 30%
        ),
        #050913;
}

.why-servomix::before{
    content:"";
    position:absolute;
    inset:0;

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

    background-size:70px 70px;
    mask-image:linear-gradient(
        to bottom,
        transparent,
        black 18%,
        black 82%,
        transparent
    );

    pointer-events:none;
}

.why-servomix-container{
    position:relative;
    z-index:2;
}

/* ==================================================
                    HEADING
================================================== */

.why-servomix-heading{
    max-width:950px;
    margin:0 auto 60px;
    text-align:center;
}

.why-servomix-eyebrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:18px;

    min-height:48px;
    padding:0 25px;
    margin-bottom:20px;

    border:1px solid rgba(79,124,255,.30);
    border-radius:999px;

    background:
        linear-gradient(
            180deg,
            rgba(31,48,83,.55),
            rgba(12,20,39,.72)
        );

    color:#c9d8f8;
    font-size:.88rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 12px 35px rgba(0,0,0,.18);
}

.eyebrow-diamond{
    width:8px;
    height:8px;

    border:2px solid #6093ff;
    transform:rotate(45deg);

    box-shadow:0 0 12px rgba(75,126,255,.75);
}

.why-servomix-heading h2{
    margin:0;

    color:#fff;
    font-size:clamp(3rem,5vw,5rem);
    line-height:1.02;
    font-weight:850;
    letter-spacing:-3.5px;
}

.why-servomix-heading h2 span{
    background:linear-gradient(
        90deg,
        #78adff 0%,
        #4f84ff 48%,
        #9b61ff 100%
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.why-servomix-heading > p{
    max-width:780px;
    margin:22px auto 0;

    color:#aebbd1;
    font-size:1.08rem;
    line-height:1.75;
}

/* ==================================================
                    MAIN GRID
================================================== */

.why-servomix-grid{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    gap:20px;
    align-items:stretch;
}

/* ==================================================
             LARGE PERFORMANCE CARD
================================================== */

.performance-feature-card{
    position:relative;
    min-height:670px;
    overflow:hidden;

    display:grid;
    grid-template-columns:.88fr 1.12fr;

    border:1px solid rgba(72,128,255,.50);
    border-radius:24px;

    background:
        radial-gradient(
            circle at 76% 44%,
            rgba(40,91,255,.17),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(8,22,48,.98),
            rgba(4,9,21,.98)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 35px 90px rgba(0,0,0,.30);

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

.performance-feature-card::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            115deg,
            rgba(45,103,255,.12),
            transparent 37%,
            transparent 65%,
            rgba(112,67,255,.08)
        );

    pointer-events:none;
}

.performance-feature-card:hover{
    transform:translateY(-7px);

    border-color:rgba(84,145,255,.78);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 40px 100px rgba(0,0,0,.38),
        0 0 45px rgba(46,114,255,.12);
}

.performance-card-content{
    position:relative;
    z-index:3;
    padding:42px 0 42px 42px;
}

.performance-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:38px;
    padding:0 17px;
    margin-bottom:27px;

    border-radius:10px;

    background:linear-gradient(
        100deg,
        #146fff,
        #704cff
    );

    color:#fff;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;

    box-shadow:
        0 10px 28px rgba(46,114,255,.35),
        inset 0 1px 0 rgba(255,255,255,.20);
}

.performance-card-content h3{
    margin:0 0 23px;

    color:#fff;
    font-size:clamp(2rem,3vw,3rem);
    line-height:1.05;
    font-weight:800;
    letter-spacing:-2px;
}

.performance-card-content h3 span{
    display:block;

    background:linear-gradient(
        90deg,
        #69a7ff,
        #6d64ff
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.performance-description{
    max-width:360px;
    margin:0 0 30px;

    color:#b3c0d6;
    font-size:1rem;
    line-height:1.75;
}

.performance-features{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.performance-feature{
    display:flex;
    align-items:center;
    gap:14px;
}

.performance-feature-icon{
    width:50px;
    height:50px;
    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(75,132,255,.45);
    border-radius:12px;

    background:
        linear-gradient(
            145deg,
            rgba(30,87,190,.34),
            rgba(52,32,136,.26)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 0 25px rgba(46,114,255,.10);

    color:#79aeff;
    font-size:1.35rem;
}

.performance-feature div{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.performance-feature strong{
    color:#fff;
    font-size:.95rem;
    font-weight:700;
}

.performance-feature small{
    color:#96a5be;
    font-size:.79rem;
}

/* ==================================================
                    CHIP IMAGE
================================================== */

/* =========================================
   PERFORMANCE CHIP — FINAL REFERENCE POSITION
========================================= */

/* =========================================
   PERFORMANCE CARD — ACTUAL FINAL FIX
========================================= */

.performance-feature-card{
    position:relative;
    display:grid;
    grid-template-columns:46% 54%;
    align-items:center;

    min-height:670px;
    overflow:hidden;
}

/* LEFT CONTENT */

.performance-card-content{
    position:relative;
    z-index:3;

    width:auto;
    min-width:0;

    padding:42px 0 42px 42px;
}

.performance-card-content h3{
    white-space:normal;
}

.performance-description{
    width:100%;
    max-width:340px;
}

/* RIGHT IMAGE AREA */

.performance-chip-wrap{
    position:relative;
    top:auto;
    right:auto;
    bottom:auto;

    width:100%;
    height:100%;
    min-width:0;

    padding:30px 5px 20px 0;

    display:flex;
    align-items:center;
    justify-content:center;

    pointer-events:none;
}

.performance-chip-wrap::before{
    content:"";
    position:absolute;

    width:430px;
    height:430px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(46,114,255,.27) 0%,
        rgba(110,77,255,.15) 43%,
        transparent 72%
    );

    filter:blur(60px);
}

/* CHIP */

.performance-chip-image{
    position:relative;
    z-index:2;

    display:block;
    width:115%;
    max-width:570px;
    height:auto;

    object-fit:contain;

    filter:
        drop-shadow(0 28px 38px rgba(0,0,0,.45))
        drop-shadow(0 0 28px rgba(61,116,255,.25));

    animation:performanceChipFloat 6s ease-in-out infinite;
}

.performance-chip-glow{
    display:none;
}

@keyframes performanceChipFloat{
    0%,
    100%{
        transform:translateY(0) rotate(-1deg);
    }

    50%{
        transform:translateY(-8px) rotate(1deg);
    }
}

/* RESPONSIVE */

@media(max-width:1200px){

    .performance-feature-card{
        grid-template-columns:48% 52%;
    }

    .performance-chip-image{
        width:110%;
    }

}

@media(max-width:850px){

    .performance-feature-card{
        grid-template-columns:1fr;
        min-height:auto;
    }

    .performance-card-content{
        padding:34px;
    }

    .performance-chip-wrap{
        min-height:360px;
        padding:0 24px 30px;
    }

    .performance-chip-image{
        width:100%;
        max-width:500px;
    }

}

/* ==================================================
                SMALL CARDS GRID
================================================== */

.infrastructure-cards{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
}

.infrastructure-card{
    position:relative;
    min-height:325px;
    overflow:hidden;

    display:flex;
    flex-direction:column;

    padding:20px 22px 18px;

    border:1px solid rgba(65,102,180,.38);
    border-radius:22px;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(43,93,255,.14),
            transparent 44%
        ),
        linear-gradient(
            150deg,
            rgba(8,19,42,.97),
            rgba(4,9,20,.98)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 25px 65px rgba(0,0,0,.24);

    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

.infrastructure-card:nth-child(2),
.infrastructure-card:nth-child(4){
    background:
        radial-gradient(
            circle at 55% 20%,
            rgba(105,55,255,.15),
            transparent 44%
        ),
        linear-gradient(
            150deg,
            rgba(15,14,43,.97),
            rgba(5,8,21,.98)
        );
}

.infrastructure-card:hover{
    transform:translateY(-7px);

    border-color:rgba(86,135,255,.70);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 32px 75px rgba(0,0,0,.33),
        0 0 35px rgba(46,114,255,.11);
}

.infrastructure-icon{
    position:absolute;
    top:18px;
    left:18px;
    z-index:4;

    width:49px;
    height:49px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(87,124,255,.58);
    border-radius:12px;

    background:
        linear-gradient(
            145deg,
            rgba(26,91,219,.38),
            rgba(72,44,182,.30)
        );

    color:#d5e4ff;
    font-size:1.4rem;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 0 24px rgba(66,107,255,.16);
}

.infrastructure-image-wrap{
    height:145px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:-3px -5px 4px;
    overflow:visible;
}

.infrastructure-image-wrap img{
    display:block;
    width:auto;
    max-width:none;
    max-height:none;
    object-fit:contain;

    filter:
        drop-shadow(0 16px 28px rgba(0,0,0,.38))
        drop-shadow(0 0 22px rgba(65,104,255,.24));

    transition:transform .45s ease;
}

/* Increase only the visible images */
.infrastructure-card:nth-child(1) .infrastructure-image-wrap img{
    height:185px;
    transform:scale(1.15);
}

.infrastructure-card:nth-child(2) .infrastructure-image-wrap img{
    height:170px;
    transform:scale(1.18);
}

.infrastructure-card:nth-child(3) .infrastructure-image-wrap img{
    height:165px;
    transform:scale(1.25);
}

.infrastructure-card:nth-child(4) .infrastructure-image-wrap img{
    height:160px;
    transform:scale(1.22);
}

/* Hover — keep each image enlarged */
.infrastructure-card:nth-child(1):hover .infrastructure-image-wrap img{
    transform:scale(1.22) translateY(-3px);
}

.infrastructure-card:nth-child(2):hover .infrastructure-image-wrap img{
    transform:scale(1.25) translateY(-3px);
}

.infrastructure-card:nth-child(3):hover .infrastructure-image-wrap img{
    transform:scale(1.33) translateY(-3px);
}

.infrastructure-card:nth-child(4):hover .infrastructure-image-wrap img{
    transform:scale(1.29) translateY(-3px);
}

.infrastructure-card:hover .infrastructure-image-wrap img{
    transform:scale(1.06) translateY(-3px);
}

.infrastructure-content{
    position:relative;
    z-index:3;

    display:flex;
    flex-direction:column;
    flex:1;
}

.infrastructure-content h3{
    margin:0 0 10px;

    color:#fff;
    font-size:1.35rem;
    line-height:1.2;
    font-weight:750;
    letter-spacing:-.5px;
}

.infrastructure-content p{
    margin:0 0 14px;

    color:#a9b6cc;
    font-size:.88rem;
    line-height:1.6;
}

.infrastructure-status{
    display:inline-flex;
    align-items:center;
    gap:10px;

    align-self:flex-start;
    min-height:35px;
    padding:0 15px;
    margin-top:auto;

    border:1px solid rgba(255,255,255,.05);
    border-radius:10px;

    background:rgba(255,255,255,.045);

    color:#e5ebf6;
    font-size:.78rem;
    font-weight:600;
}

.infrastructure-status > span{
    width:8px;
    height:8px;
    flex-shrink:0;

    border-radius:50%;
    background:#15df78;

    box-shadow:
        0 0 9px rgba(21,223,120,.90),
        0 0 18px rgba(21,223,120,.30);

    animation:statusPulse 2s ease-in-out infinite;
}

/* ==================================================
                    ANIMATIONS
================================================== */

@keyframes chipFloat{
    0%,
    100%{
        transform:translateY(0) rotate(-1deg);
    }

    50%{
        transform:translateY(-12px) rotate(1deg);
    }
}

@keyframes chipGlowPulse{
    0%,
    100%{
        opacity:.65;
        transform:scale(.94);
    }

    50%{
        opacity:1;
        transform:scale(1.05);
    }
}

@keyframes statusPulse{
    0%,
    100%{
        opacity:1;
        transform:scale(1);
    }

    50%{
        opacity:.55;
        transform:scale(.78);
    }
}

/* Scroll reveal */

.reveal-item{
    opacity:0;
    transform:translateY(38px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.8,.2,1);
}

.reveal-item.is-visible{
    opacity:1;
    transform:translateY(0);
}

.infrastructure-card:nth-child(2){
    transition-delay:.10s;
}

.infrastructure-card:nth-child(3){
    transition-delay:.18s;
}

.infrastructure-card:nth-child(4){
    transition-delay:.26s;
}

/* ==================================================
                    RESPONSIVE
================================================== */

@media(max-width:1200px){

    .why-servomix-grid{
        grid-template-columns:1fr;
    }

    .performance-feature-card{
        min-height:610px;
    }

}

@media(max-width:850px){

    .why-servomix{
        padding:90px 0;
    }

    .why-servomix-heading{
        margin-bottom:45px;
    }

    .why-servomix-heading h2{
        letter-spacing:-2px;
    }

    .performance-feature-card{
        grid-template-columns:1fr;
        min-height:auto;
    }

    .performance-card-content{
        padding:34px;
    }

    .performance-chip-wrap{
        padding:0 25px 30px;
        min-height:340px;
    }

    .performance-chip-image{
        width:100%;
        max-width:460px;
    }

    .infrastructure-cards{
        grid-template-columns:1fr 1fr;
    }

}

@media(max-width:620px){

    .why-servomix{
        padding:75px 0;
    }

    .why-servomix-heading h2{
        font-size:2.65rem;
        letter-spacing:-1.8px;
    }

    .why-servomix-heading > p{
        font-size:.95rem;
    }

    .why-servomix-eyebrow{
        min-height:43px;
        padding:0 18px;
        font-size:.74rem;
        letter-spacing:1.4px;
    }

    .infrastructure-cards{
        grid-template-columns:1fr;
    }

    .infrastructure-card{
        min-height:320px;
    }

    .performance-card-content{
        padding:28px 24px;
    }

    .performance-description{
        font-size:.93rem;
    }

    .performance-chip-wrap{
        min-height:290px;
    }

}

.header{
    transition:
        top .3s ease,
        transform .3s ease;
}

.navbar{
    transition:
        height .3s ease,
        width .3s ease,
        border-radius .3s ease,
        background .3s ease,
        box-shadow .3s ease,
        padding .3s ease;
}

.header.scrolled{
    top:14px;
}

.header.scrolled .navbar{
    height:70px;
    width:min(1360px,92%);
    border-radius:22px;

    background:
        linear-gradient(
            180deg,
            rgba(20,27,40,.96),
            rgba(12,17,28,.97)
        );

    box-shadow:
        0 14px 40px rgba(0,0,0,.45),
        0 0 35px rgba(46,114,255,.08);
}

.header.scrolled .logo img{
    width:165px;
}

.header.scrolled .nav-links a{
    height:44px;
}
.left-performance-card{
    position: relative;
    overflow: hidden;
}

.left-performance-card::after{
    content:"";
    position:absolute;
    right:-80px;
    bottom:-30px;

    width:700px;
    height:700px;

    background:url("assets/ryzen9950x.png") no-repeat center;
    background-size:contain;

    opacity:.95;
    mix-blend-mode:screen;

    pointer-events:none;
}
/* =========================================================
   SERVOMIX — GAMES WE SUPPORT
   COMPLETE PREMIUM DESIGN
========================================================= */

/* =========================
   SECTION
========================= */

.games {
    position: relative;
    isolation: isolate;
    padding: 130px 0 150px;
    overflow: hidden;
}

/* Large background glow */

.games::before {
    content: "";
    position: absolute;
    top: 80px;
    left: 50%;
    width: 900px;
    height: 650px;
    z-index: -2;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(91, 86, 255, 0.13) 0%,
            rgba(65, 92, 255, 0.06) 38%,
            transparent 72%
        );
    filter: blur(20px);
    transform: translateX(-50%);
    pointer-events: none;
}

/* Subtle grid background */

.games::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    opacity: 0.18;
    background-image:
        linear-gradient(
            rgba(112, 127, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(112, 127, 255, 0.035) 1px,
            transparent 1px
        );
    background-size: 55px 55px;
    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 18%,
            #000 82%,
            transparent
        );
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 18%,
            #000 82%,
            transparent
        );
    pointer-events: none;
}

.games .container {
    width: min(1320px, calc(100% - 48px));
    margin-inline: auto;
}

/* =========================
   SECTION HEADING
========================= */

/* =========================
   PREMIUM GAMES HEADING
========================= */

/* =========================================
   GAMES HEADING — MATCH WHY SERVOMIX
========================================= */

.games-heading {
    max-width: 1080px;
    margin: 0 auto 70px;
    text-align: center;
}

/* Supported Games Badge */

.games-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 48px;
    padding: 0 24px;
    margin-bottom: 28px;

    color: #c8d5ff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    border: 1px solid rgba(78, 134, 255, 0.48);
    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(31, 49, 91, 0.7),
            rgba(12, 20, 42, 0.78)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 10px 30px rgba(0, 0, 0, 0.24),
        0 0 25px rgba(60, 106, 255, 0.08);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.games-eyebrow::before,
.games-eyebrow::after {
    content: "";
    width: 7px;
    height: 7px;

    border: 2px solid #65a2ff;
    transform: rotate(45deg);

    box-shadow:
        0 0 10px rgba(84, 145, 255, 0.8);
}

.games-eyebrow i {
    display: none;
}

/* Main Title */

.games-heading h2{
    margin:0;

    color:#ffffff;
    font-family:"Manrope", sans-serif;
    font-size:clamp(2.8rem, 5vw, 4.7rem);
    font-weight:700;
    line-height:1.03;
    letter-spacing:-0.045em;

    text-shadow:
        0 8px 32px rgba(0,0,0,.3);
}

/* Gradient Second Line */

.games-heading h2 span {
    display: block;
    margin-top: 12px;

    color: transparent;

    background:
        linear-gradient(
            90deg,
            #61a5ff 0%,
            #568cff 32%,
            #6878ff 62%,
            #9b61ff 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    filter:
        drop-shadow(0 12px 32px rgba(91, 111, 255, 0.2));
}

/* Description */

.games-heading p {
    max-width: 760px;
    margin: 30px auto 0;

    color: rgba(216, 224, 245, 0.72);
    font-size: 1rem;
    line-height: 1.75;
}

/* Responsive */

@media (max-width: 768px) {
    .games-heading {
        margin-bottom: 54px;
    }

    .games-eyebrow {
        min-height: 44px;
        padding: 0 20px;
        margin-bottom: 24px;
        font-size: 0.7rem;
    }

    .games-heading h2 {
        font-size: clamp(2.8rem, 11vw, 4.7rem);
        line-height: 0.95;
    }

    .games-heading p {
        margin-top: 24px;
        font-size: 0.93rem;
    }
}

@media (max-width: 480px) {
    .games-heading h2 {
        font-size: clamp(2.45rem, 13vw, 3.8rem);
    }

    .games-heading p {
        font-size: 0.88rem;
        line-height: 1.65;
    }
}

/* =========================
   GAMES GRID
========================= */

.games-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

/* =========================
   GAME CARD
========================= */

/* =========================================
   PREMIUM GAME CARDS — NEW VERSION
========================================= */

.games-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.game-card {
    position: relative;
    isolation: isolate;
    min-width: 0;
    height: 405px;
    overflow: hidden;
    cursor: pointer;

    border: 1px solid rgba(123, 139, 190, 0.16);
    border-radius: 25px;

    background: #080b14;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);

    transition:
        transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.4s ease,
        box-shadow 0.45s ease;
}

/* Premium border */

.game-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;

    padding: 1px;
    border-radius: inherit;
    pointer-events: none;

    background:
        linear-gradient(
            145deg,
            rgba(112, 133, 255, 0.7),
            rgba(130, 93, 255, 0.05) 36%,
            transparent 58%,
            rgba(61, 191, 255, 0.22)
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0.35;

    transition: opacity 0.4s ease;
}

/* Shine */

.game-card::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -75%;

    width: 52%;
    height: 200%;

    z-index: 9;
    opacity: 0;
    pointer-events: none;

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

    transform: rotate(18deg);

    transition:
        left 0.85s ease,
        opacity 0.3s ease;
}

/* =========================================
   ARTWORK
========================================= */

.game-image {
    position: absolute;
    inset: 0;
    z-index: 1;

    overflow: hidden;
    border-radius: inherit;

    background: #0b0e19;
}

.game-image > img {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;
    object-position: center top;

    filter:
        brightness(0.92)
        saturate(1.08)
        contrast(1.04);

    transform: scale(1.02);

    transition:
        transform 0.75s cubic-bezier(0.16, 0.84, 0.22, 1),
        filter 0.55s ease;
}

/* Better bottom fade */

.game-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(5, 7, 13, 0.03) 0%,
            rgba(5, 7, 13, 0.02) 32%,
            rgba(5, 7, 13, 0.14) 48%,
            rgba(5, 7, 13, 0.56) 64%,
            rgba(5, 7, 13, 0.92) 78%,
            #05070d 100%
        );
}

/* Subtle colored glow */

.game-image::after {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 18%;

    height: 105px;

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

    border-radius: 50%;

    background: rgba(94, 113, 255, 0.12);
    filter: blur(42px);

    transition:
        opacity 0.45s ease,
        transform 0.45s ease;
}

/* =========================================
   LOGO BADGE
========================================= */

.game-logo {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 6;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(23, 29, 49, 0.88),
            rgba(10, 13, 24, 0.78)
        );

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    transition:
        transform 0.4s ease,
        border-color 0.35s ease,
        box-shadow 0.4s ease;
}

.game-logo img {
    width: 37px;
    height: 37px;
    display: block;
    object-fit: contain;

    filter:
        drop-shadow(0 5px 9px rgba(0, 0, 0, 0.42));
}

/* =========================================
   CONTENT
========================================= */

.game-content {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 6;

    padding: 28px 23px 24px;
}

.game-content::before {
    content: "";
    position: absolute;
    inset: -80px 0 0;
    z-index: -1;
    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(5, 7, 13, 0.58) 40%,
            rgba(5, 7, 13, 0.96) 70%,
            #05070d 100%
        );
}

.game-content h3 {
    margin: 0 0 9px;

    color: #ffffff;

    font-size: 1.22rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;

    transition:
        transform 0.35s ease,
        text-shadow 0.35s ease;
}

.game-content p {
    min-height: 46px;
    margin: 0 0 17px;

    color: rgba(218, 224, 242, 0.66);

    font-size: 0.82rem;
    line-height: 1.62;

    transition: color 0.35s ease;
}

/* =========================================
   STATUS
========================================= */

.game-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: rgba(231, 235, 248, 0.76);

    font-size: 0.7rem;
    font-weight: 600;
}

.game-status > span {
    position: relative;

    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #7181ff;

    box-shadow:
        0 0 0 4px rgba(113, 129, 255, 0.1),
        0 0 13px rgba(113, 129, 255, 0.9);
}

.game-status > span::after {
    content: "";
    position: absolute;
    inset: -5px;

    border: 1px solid rgba(113, 129, 255, 0.45);
    border-radius: 50%;

    animation: premiumGamePulse 2.1s ease-out infinite;
}

/* =========================================
   HOVER
========================================= */

.game-card:hover {
    z-index: 4;

    transform:
        translateY(-9px)
        scale(1.008);

    border-color: rgba(111, 132, 255, 0.42);

    box-shadow:
        0 30px 72px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(111, 132, 255, 0.07),
        0 0 34px rgba(83, 104, 255, 0.13);
}

.game-card:hover::before {
    opacity: 1;
}

.game-card:hover::after {
    left: 130%;
    opacity: 1;
}

.game-card:hover .game-image > img {
    transform: scale(1.075);

    filter:
        brightness(1)
        saturate(1.13)
        contrast(1.05);
}

.game-card:hover .game-image::after {
    opacity: 1.4;
    transform: scale(1.18);
}

.game-card:hover .game-logo {
    transform:
        translateY(-3px)
        scale(1.035);

    border-color: rgba(126, 143, 255, 0.38);

    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.46),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 22px rgba(90, 109, 255, 0.16);
}

.game-card:hover .game-content h3 {
    transform: translateY(-2px);

    text-shadow:
        0 0 20px rgba(114, 132, 255, 0.28);
}

.game-card:hover .game-content p {
    color: rgba(228, 233, 248, 0.79);
}

/* =========================================
   ANIMATION
========================================= */

@keyframes premiumGamePulse {
    0% {
        opacity: 0.85;
        transform: scale(0.55);
    }

    75%,
    100% {
        opacity: 0;
        transform: scale(1.75);
    }
}

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1180px) {
    .games-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .games-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .game-card {
        height: 420px;
    }
}

@media (max-width: 560px) {
    .games-grid {
        grid-template-columns: 1fr;
    }

    .game-card {
        height: 430px;
        border-radius: 24px;
    }

    .game-logo {
        width: 56px;
        height: 56px;
    }

    .game-logo img {
        width: 35px;
        height: 35px;
    }

    .game-content {
        padding: 27px 22px 23px;
    }

    .game-card:hover {
        transform: translateY(-5px);
    }
}
/* =========================================
   GAMES FOOTER
========================================= */

.games-footer{
    margin-top:55px;
    margin-bottom: 120px; 

    display:flex;
    justify-content:center;
}

/* Premium Button */

.explore-games-btn{

    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    padding:18px 34px;

    color:#fff;
    text-decoration:none;

    font-size:.95rem;
    font-weight:600;

    border-radius:16px;

    border:1px solid rgba(109,129,255,.28);

    background:
    linear-gradient(
        180deg,
        rgba(25,31,55,.9),
        rgba(11,15,28,.96)
    );

    backdrop-filter:blur(18px);

    overflow:hidden;

    transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;
}

/* Glow */

.explore-games-btn::before{

    content:"";

    position:absolute;
    inset:0;

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

    transform:translateX(-150%);
    transition:transform .8s ease;

}

/* Hover */

.explore-games-btn:hover{

    transform:translateY(-4px);

    border-color:rgba(120,138,255,.55);

    box-shadow:
    0 18px 45px rgba(0,0,0,.35),
    0 0 30px rgba(92,112,255,.18);

}

.explore-games-btn:hover::before{

    transform:translateX(150%);

}

.explore-games-btn i{

    font-size:1.1rem;

    transition:transform .35s ease;

}

.explore-games-btn:hover i{

    transform:translateX(5px);

}
/* =========================================================
   WHAT EVERY SERVER INCLUDES
========================================================= */

.server-includes {
    position: relative;
    isolation: isolate;
        padding:120px 0 180px;

    overflow: hidden;
   

    background:
        radial-gradient(
            circle at 50% 18%,
            rgba(96, 74, 255, 0.13),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #0a0e1c 0%,
            #0d1022 48%,
            #090d19 100%
        );

    border-top: 1px solid rgba(112, 132, 255, 0.1);
    border-bottom: 1px solid rgba(112, 132, 255, 0.08);
}

/* Subtle grid */

.server-includes::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    opacity: 0.15;
    background-image:
        linear-gradient(
            rgba(117, 135, 255, 0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(117, 135, 255, 0.04) 1px,
            transparent 1px
        );
    background-size: 58px 58px;
    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 16%,
            #000 84%,
            transparent
        );
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 16%,
            #000 84%,
            transparent
        );
    pointer-events: none;
}

.server-includes .container {
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
}

/* =========================================================
   HEADING
========================================================= */

.includes-heading {
    max-width: 1080px;
    margin: 0 auto 72px;
    text-align: center;
}

.includes-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    min-height: 48px;
    padding: 0 24px;
    margin-bottom: 28px;

    color: #cbd7ff;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;

    border: 1px solid rgba(75, 132, 255, 0.48);
    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(29, 47, 91, 0.72),
            rgba(11, 19, 40, 0.82)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 10px 32px rgba(0, 0, 0, 0.28),
        0 0 28px rgba(63, 110, 255, 0.08);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.includes-eyebrow::before,
.includes-eyebrow::after {
    content: "";
    width: 7px;
    height: 7px;
    border: 2px solid #63a4ff;
    transform: rotate(45deg);
    box-shadow: 0 0 10px rgba(86, 149, 255, 0.8);
}

.includes-heading h2 {
    margin: 0;
    color: #ffffff;

    font-size: clamp(3.35rem, 6.2vw, 6rem);
    font-weight: 800;
    line-height: 0.93;
    letter-spacing: -0.065em;

    text-shadow:
        0 8px 34px rgba(0, 0, 0, 0.32);
}

.includes-heading h2 span {
    display: block;
    margin-top: 12px;

    color: transparent;
    background:
        linear-gradient(
            90deg,
            #62a5ff 0%,
            #5f8dff 30%,
            #6e79ff 60%,
            #9b61ff 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    filter:
        drop-shadow(0 12px 30px rgba(92, 110, 255, 0.2));
}

.includes-heading p {
    max-width: 720px;
    margin: 28px auto 0;

    color: rgba(216, 224, 245, 0.7);
    font-size: 1rem;
    line-height: 1.75;
}

/* =========================================================
   GRID
========================================================= */

.includes-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

/* =========================================================
   FEATURE CARD
========================================================= */

.include-card {
    position: relative;
    isolation: isolate;
    min-width: 0;
    min-height: 290px;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 32px 24px 26px;

    text-align: center;

    border: 1px solid rgba(113, 135, 210, 0.18);
    border-radius: 24px;

    background:
        linear-gradient(
            180deg,
            rgba(14, 20, 39, 0.92),
            rgba(7, 11, 23, 0.96)
        );

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);

    transition:
        transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1),
        border-color 0.35s ease,
        box-shadow 0.42s ease;
}

/* Premium border */

.include-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;

    padding: 1px;
    border-radius: inherit;
    pointer-events: none;

    background:
        linear-gradient(
            145deg,
            rgba(100, 147, 255, 0.7),
            rgba(124, 82, 255, 0.08) 36%,
            transparent 58%,
            rgba(73, 194, 255, 0.22)
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;
    mask-composite: exclude;

    opacity: 0.32;
    transition: opacity 0.35s ease;
}

/* Top glow line */

.include-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;

    width: 72px;
    height: 3px;

    z-index: 4;
    border-radius: 0 0 8px 8px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #6ca5ff,
            #8e6dff,
            transparent
        );

    box-shadow:
        0 0 18px rgba(92, 129, 255, 0.8);

    transform: translateX(-50%);
    opacity: 0.8;
}

/* =========================================================
   ICON
========================================================= */

.include-icon {
    position: relative;

    width: 78px;
    height: 78px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 24px;

    border: 1px solid rgba(107, 132, 255, 0.25);
    border-radius: 50%;

    color: #7b94ff;

    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(110, 147, 255, 0.22),
            rgba(42, 52, 106, 0.2) 46%,
            rgba(9, 13, 29, 0.88) 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0 0 8px rgba(86, 106, 255, 0.035),
        0 0 28px rgba(79, 103, 255, 0.17);

    transition:
        transform 0.4s ease,
        color 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.4s ease;
}

.include-icon::before {
    content: "";
    position: absolute;
    inset: -12px;

    border-radius: 50%;
    border: 1px solid rgba(97, 127, 255, 0.08);

    animation: includeOrbit 8s linear infinite;
}

.include-icon svg {
    width: 34px;
    height: 34px;
    stroke-width: 1.8;
    filter:
        drop-shadow(0 0 10px rgba(98, 132, 255, 0.55));
}

/* =========================================================
   CARD TEXT
========================================================= */

.include-card h3 {
    max-width: 220px;
    margin: 0 0 13px;

    color: #ffffff;
    font-size: 1.16rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.025em;

    transition:
        transform 0.35s ease,
        text-shadow 0.35s ease;
}

.include-card p {
    max-width: 240px;
    margin: 0;

    color: rgba(214, 222, 242, 0.65);
    font-size: 0.83rem;
    line-height: 1.65;

    transition: color 0.35s ease;
}

/* Bottom accent */

.include-accent {
    position: absolute;
    right: 0;
    bottom: 9px;
    left: 0;

    width: 42px;
    height: 3px;

    margin: auto;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #5ea7ff,
            #776fff,
            #a15fff
        );

    box-shadow:
        0 0 14px rgba(103, 118, 255, 0.65);

    transition:
        width 0.35s ease,
        box-shadow 0.35s ease;
}

/* =========================================================
   HOVER
========================================================= */

.include-card:hover {
    z-index: 2;

    transform:
        translateY(-10px)
        scale(1.01);

    border-color: rgba(106, 135, 255, 0.4);

    box-shadow:
        0 30px 72px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(108, 133, 255, 0.06),
        0 0 34px rgba(79, 100, 255, 0.12);
}

.include-card:hover::before {
    opacity: 1;
}

.include-card:hover .include-icon {
    color: #9bb0ff;
    border-color: rgba(120, 145, 255, 0.48);

    transform:
        translateY(-5px)
        scale(1.06)
        rotate(-2deg);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 0 10px rgba(86, 106, 255, 0.05),
        0 0 36px rgba(88, 110, 255, 0.28);
}

.include-card:hover h3 {
    transform: translateY(-2px);
    text-shadow:
        0 0 20px rgba(112, 132, 255, 0.25);
}

.include-card:hover p {
    color: rgba(227, 233, 248, 0.78);
}

.include-card:hover .include-accent {
    width: 70px;
    box-shadow:
        0 0 20px rgba(103, 118, 255, 0.85);
}

/* =========================================================
   INDIVIDUAL ACCENTS
========================================================= */

.include-card:nth-child(2) .include-icon {
    color: #718cff;
}

.include-card:nth-child(3) .include-icon {
    color: #6dbbff;
}

.include-card:nth-child(4) .include-icon {
    color: #9879ff;
}

.include-card:nth-child(5) .include-icon {
    color: #69a7ff;
}

.include-card:nth-child(6) .include-icon {
    color: #8977ff;
}

.include-card:nth-child(7) .include-icon {
    color: #6dbeff;
}

.include-card:nth-child(8) .include-icon {
    color: #a273ff;
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes includeOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1120px) {
    .includes-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .server-includes {
        padding: 105px 0 115px;
    }

    .includes-heading {
        margin-bottom: 58px;
    }

    .includes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .include-card {
        min-height: 280px;
    }
}

@media (max-width: 580px) {
    .server-includes {
        padding: 85px 0 95px;
    }

    .server-includes .container {
        width: min(100% - 28px, 1320px);
    }

    .includes-heading {
        margin-bottom: 44px;
    }

    .includes-eyebrow {
        min-height: 44px;
        padding: 0 18px;
        margin-bottom: 24px;
        font-size: 0.66rem;
        letter-spacing: 0.12em;
    }

    .includes-heading h2 {
        font-size: clamp(2.45rem, 12vw, 3.8rem);
        line-height: 0.96;
    }

    .includes-heading p {
        margin-top: 22px;
        font-size: 0.9rem;
        line-height: 1.68;
    }

    .includes-grid {
        grid-template-columns: 1fr;
    }

    .include-card {
        min-height: 270px;
        padding: 30px 22px 25px;
    }

    .include-card:hover {
        transform: translateY(-6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .include-card,
    .include-icon,
    .include-card h3,
    .include-card p,
    .include-accent {
        transition: none;
    }

    .include-icon::before {
        animation: none;
    }
}
/* =========================================================
   CONTROL PANEL SECTION
========================================================= */

.panel-section{
    position:relative;
    overflow:hidden;

    padding:140px 24px 170px;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(39,92,255,.13),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #060b18 0%,
            #07101f 52%,
            #050a14 100%
        );
}

.panel-container{
    position:relative;
    z-index:2;

    width:min(1380px, 100%);
    margin:0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.panel-heading{
    max-width:900px;
    margin:0 auto 72px;
    text-align:center;
}

.panel-eyebrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    min-height:42px;
    padding:0 20px;
    margin-bottom:24px;

    border:1px solid rgba(72,133,255,.55);
    border-radius:999px;

    color:#b9cbff;
    background:
        linear-gradient(
            180deg,
            rgba(32,71,149,.24),
            rgba(13,28,58,.34)
        );

    box-shadow:
        0 0 24px rgba(47,105,255,.12),
        inset 0 1px 0 rgba(255,255,255,.06);

    font-family:"Manrope",sans-serif;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.15em;
}

.panel-eyebrow svg{
    width:16px;
    height:16px;

    color:#5fa2ff;
    filter:drop-shadow(0 0 7px rgba(83,148,255,.7));
}

.panel-heading h2{
    margin:0;

    color:#fff;

    font-family:"Manrope",sans-serif;
    font-size:clamp(3rem, 5vw, 4.8rem);
    font-weight:700;
    line-height:1.02;
    letter-spacing:-.05em;
}

.panel-heading h2 span{
    display:block;
    margin-top:8px;

    color:transparent;
    background:
        linear-gradient(
            90deg,
            #5fa7ff 0%,
            #557fff 35%,
            #6e6cff 65%,
            #9c5cff 100%
        );

    -webkit-background-clip:text;
    background-clip:text;
}

.panel-heading p{
    max-width:720px;
    margin:24px auto 0;

    color:rgba(216,226,246,.66);

    font-size:1rem;
    font-weight:400;
    line-height:1.75;
}


/* =========================================================
   PANEL STAGE
========================================================= */

.panel-stage{
    position:relative;

    width:min(1220px, 100%);
    margin:0 auto;
}

.panel-stage-glow{
    position:absolute;
    inset:8% 8% -4%;

    z-index:-1;

    border-radius:50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(42,104,255,.35),
            rgba(77,57,255,.14) 42%,
            transparent 72%
        );

    filter:blur(65px);
    opacity:.8;
}


/* =========================================================
   PANEL BROWSER FRAME
========================================================= */

.panel-browser{
    position:relative;
    overflow:hidden;

    padding:8px;

    border:1px solid rgba(82,141,255,.55);
    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            rgba(20,42,80,.88),
            rgba(6,15,31,.95)
        );

    box-shadow:
        0 35px 100px rgba(0,0,0,.58),
        0 0 70px rgba(43,105,255,.16),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.panel-browser::before{
    content:"";

    position:absolute;
    top:0;
    left:12%;
    right:12%;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(118,171,255,.9),
            transparent
        );

    box-shadow:
        0 0 18px rgba(75,138,255,.8);
}

.panel-browser-top{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;

    min-height:54px;
    padding:0 18px;

    border-bottom:1px solid rgba(255,255,255,.06);
    border-radius:17px 17px 0 0;

    background:
        linear-gradient(
            180deg,
            rgba(21,39,72,.92),
            rgba(11,23,44,.94)
        );
}

.panel-browser-dots{
    display:flex;
    align-items:center;
    gap:7px;
}

.panel-browser-dots span{
    width:9px;
    height:9px;

    border-radius:50%;
}

.panel-browser-dots span:nth-child(1){
    background:#ff5f57;
}

.panel-browser-dots span:nth-child(2){
    background:#febc2e;
}

.panel-browser-dots span:nth-child(3){
    background:#28c840;
}

.panel-browser-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;

    color:rgba(232,239,255,.9);

    font-family:"Manrope",sans-serif;
    font-size:.84rem;
    font-weight:600;
}

.panel-browser-title svg{
    width:16px;
    height:16px;
    color:#5e9fff;
}

.panel-browser-status{
    justify-self:end;

    display:flex;
    align-items:center;
    gap:8px;

    color:rgba(201,214,240,.65);

    font-size:.73rem;
    font-weight:600;
}

.panel-browser-status span{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#33d17a;

    box-shadow:
        0 0 10px rgba(51,209,122,.8);
}


/* =========================================================
   IMAGE
========================================================= */

.panel-image-wrap{
    position:relative;
    overflow:hidden;

    border-radius:0 0 17px 17px;

    background:#071120;
}

.panel-image-wrap img{
    display:block;

    width:100%;
    height:auto;
    aspect-ratio:16 / 8.55;

    object-fit:cover;
    object-position:top center;

    border-radius:0 0 17px 17px;

    transition:
        opacity .45s ease,
        transform .55s ease,
        filter .45s ease;
}

.panel-image-wrap img.is-changing{
    opacity:0;
    transform:scale(.985);
    filter:blur(4px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:900px){

    .panel-section{
        padding:110px 20px 130px;
    }

    .panel-heading{
        margin-bottom:52px;
    }

    .panel-heading h2{
        font-size:clamp(2.7rem, 8vw, 4rem);
    }

    .panel-browser{
        border-radius:18px;
        padding:6px;
    }

    .panel-browser-top{
        min-height:48px;
        padding:0 13px;
    }

    .panel-browser-title{
        font-size:.76rem;
    }

    .panel-browser-status{
        font-size:.66rem;
    }
}


@media (max-width:600px){

    .panel-section{
        padding:90px 14px 110px;
    }

    .panel-heading{
        margin-bottom:38px;
    }

    .panel-eyebrow{
        min-height:38px;
        padding:0 16px;

        font-size:.62rem;
    }

    .panel-heading h2{
        font-size:clamp(2.35rem, 11vw, 3.2rem);
        letter-spacing:-.045em;
    }

    .panel-heading p{
        margin-top:18px;

        font-size:.9rem;
        line-height:1.65;
    }

    .panel-browser{
        padding:4px;
        border-radius:14px;
    }

    .panel-browser-top{
        grid-template-columns:auto 1fr;
        min-height:43px;
    }

    .panel-browser-title{
        justify-content:flex-end;
    }

    .panel-browser-status{
        display:none;
    }

    .panel-browser-dots span{
        width:7px;
        height:7px;
    }

    .panel-image-wrap img{
        aspect-ratio:16 / 9;
    }
}
/* =========================================================
   CONTROL PANEL — PART 2
   FEATURE TABS + DETAIL CARD + PROGRESS
========================================================= */


/* =========================================================
   FEATURE TABS
========================================================= */

.panel-tabs{
    position:relative;
    z-index:5;

    display:grid;
        grid-template-columns:repeat(5,1fr);

    gap:8px;

    width:min(860px, calc(100% - 48px));
    margin:-30px auto 0;
    padding:12px 18px;

    border:1px solid rgba(90,143,255,.26);
    border-radius:18px;

    background:
        linear-gradient(
            180deg,
            rgba(10,23,46,.9),
            rgba(5,13,28,.94)
        );

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    box-shadow:
        0 20px 55px rgba(0,0,0,.48),
        0 0 35px rgba(46,105,255,.1),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.panel-tab{
    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    min-height:66px;
    padding:10px 16px;

    border:1px solid transparent;
    border-radius:12px;

    color:rgba(204,216,241,.58);
    background:transparent;

    font-family:"Manrope",sans-serif;
    cursor:pointer;

    transition:
        color .25s ease,
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.panel-tab::after{
    content:"";

    position:absolute;
    left:24%;
    right:24%;
    bottom:-9px;

    height:2px;
    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #4f9cff,
            #786cff,
            transparent
        );

    opacity:0;
    transform:scaleX(.35);

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.panel-tab > svg{
    flex:0 0 auto;

    width:20px;
    height:20px;

    color:rgba(125,164,235,.58);

    transition:
        color .25s ease,
        filter .25s ease,
        transform .25s ease;
}

.panel-tab > span{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:3px;

    text-align:left;
}

.panel-tab strong{
    color:inherit;

    font-size:.86rem;
    font-weight:700;
    line-height:1;
}

.panel-tab small{
    color:rgba(180,194,222,.44);

    font-family:"Inter",sans-serif;
    font-size:.68rem;
    font-weight:500;
    line-height:1.25;

    transition:color .25s ease;
}

.panel-tab:hover{
    color:#f3f7ff;

    border-color:rgba(91,145,255,.2);

    background:
        linear-gradient(
            135deg,
            rgba(47,99,213,.12),
            rgba(85,63,220,.08)
        );

    transform:translateY(-1px);
}

.panel-tab:hover > svg{
    color:#77adff;
    transform:translateY(-1px);
}

.panel-tab:hover small{
    color:rgba(205,218,243,.62);
}

.panel-tab.active{
    color:#ffffff;

    border-color:rgba(89,147,255,.68);

    background:
        linear-gradient(
            135deg,
            rgba(45,105,242,.32),
            rgba(96,62,231,.22)
        );

    box-shadow:
        0 0 30px rgba(55,113,255,.18),
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 -1px 0 rgba(255,255,255,.02);

    transform:translateY(-2px);
}

.panel-tab.active::after{
    opacity:1;
    transform:scaleX(1);
}

.panel-tab.active > svg{
    color:#76b1ff;

    filter:
        drop-shadow(0 0 8px rgba(79,146,255,.72));
}

.panel-tab.active small{
    color:rgba(218,229,248,.66);
}


/* =========================================================
   PROGRESS BAR
========================================================= */

.panel-progress{
    overflow:hidden;

    width:min(760px, calc(100% - 90px));
    height:2px;

    margin:18px auto 0;

    border-radius:999px;

    background:rgba(255,255,255,.055);
}

.panel-progress span{
    display:block;

    width:0;
    height:100%;

    border-radius:inherit;

    background:
        linear-gradient(
            90deg,
            #4ca1ff 0%,
            #676fff 55%,
            #a05dff 100%
        );

    box-shadow:
        0 0 14px rgba(78,132,255,.85);
}

.panel-progress span.running{
    animation:panelProgressTimer 5s linear forwards;
}

@keyframes panelProgressTimer{
    from{
        width:0;
    }

    to{
        width:100%;
    }
}


/* =========================================================
   ACTIVE FEATURE DETAIL
========================================================= */

.panel-feature-detail{
    position:relative;

    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:22px;

    width:min(980px, calc(100% - 70px));
    min-height:116px;

    margin:22px auto 0;
    padding:22px 24px;

    border:1px solid rgba(89,139,242,.2);
    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            rgba(15,31,60,.78),
            rgba(7,17,36,.9)
        );

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    box-shadow:
        0 22px 55px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.045);
}

.panel-feature-detail::before{
    content:"";

    position:absolute;
    left:12%;
    right:12%;
    top:0;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(95,155,255,.65),
            transparent
        );
}

.panel-feature-detail-icon{
    display:grid;
    place-items:center;

    width:64px;
    height:64px;

    border:1px solid rgba(83,141,255,.42);
    border-radius:18px;

    color:#6ea9ff;

    background:
        linear-gradient(
            145deg,
            rgba(38,94,210,.28),
            rgba(27,47,99,.2)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 0 26px rgba(49,110,255,.15);
}

.panel-feature-detail-icon svg{
    width:28px;
    height:28px;

    filter:
        drop-shadow(0 0 9px rgba(76,139,255,.58));
}

.panel-feature-detail-content h3{
    margin:0 0 7px;

    color:#f4f7ff;

    font-family:"Manrope",sans-serif;
    font-size:1.08rem;
    font-weight:700;
    letter-spacing:-.02em;
}

.panel-feature-detail-content p{
    max-width:600px;
    margin:0;

    color:rgba(195,208,233,.62);

    font-size:.87rem;
    line-height:1.65;
}

.panel-feature-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    min-height:50px;
    padding:0 20px;

    border:1px solid rgba(81,141,255,.42);
    border-radius:12px;

    color:#8ebcff;
    background:
        linear-gradient(
            135deg,
            rgba(36,91,207,.18),
            rgba(76,56,202,.14)
        );

    font-family:"Manrope",sans-serif;
    font-size:.82rem;
    font-weight:700;
    text-decoration:none;
    white-space:nowrap;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045);

    transition:
        color .25s ease,
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.panel-feature-button svg{
    width:17px;
    height:17px;

    transition:transform .25s ease;
}

.panel-feature-button:hover{
    color:#ffffff;
    border-color:rgba(103,160,255,.75);

    background:
        linear-gradient(
            135deg,
            rgba(47,110,240,.34),
            rgba(96,60,225,.24)
        );

    box-shadow:
        0 0 28px rgba(52,113,255,.2),
        inset 0 1px 0 rgba(255,255,255,.08);

    transform:translateY(-2px);
}

.panel-feature-button:hover svg{
    transform:translate(2px,-2px);
}


/* =========================================================
   IMAGE HOVER
========================================================= */

.panel-browser:hover .panel-image-wrap img{
    transform:scale(1.008);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:900px){

    .panel-tabs{
        width:calc(100% - 30px);
        margin-top:-18px;

        grid-template-columns:repeat(2,1fr);
    }

    .panel-tab{
        min-height:60px;
    }

    .panel-feature-detail{
        width:calc(100% - 30px);

        grid-template-columns:auto 1fr;
        gap:18px;
    }

    .panel-feature-button{
        grid-column:1 / -1;

        width:100%;
    }
}


@media (max-width:600px){

    .panel-tabs{
        width:100%;
        margin-top:12px;
        padding:6px;

        border-radius:14px;
    }

    .panel-tab{
        min-height:54px;
        padding:8px 10px;
        gap:8px;

        border-radius:10px;
    }

    .panel-tab > svg{
        width:18px;
        height:18px;
    }

    .panel-tab strong{
        font-size:.78rem;
    }

    .panel-tab small{
        display:none;
    }
}
.globe-wrapper{

    position:relative;

    width:100%;

    max-width:760px;

    height:760px;

    margin:auto;

}

#globeContainer{

    width:100%;

    height:100%;

}
.locations-section{
    position:relative;
    overflow:hidden;
    padding:140px 24px;
    background:#060c18;
}

.locations-container{
    width:min(1400px, 100%);
    margin:0 auto;
}

.locations-content{
    display:grid;
    grid-template-columns:minmax(0, .9fr) minmax(520px, 1.1fr);
    align-items:center;
    gap:80px;
}

.locations-left{
    position:relative;
    z-index:5;
    max-width:540px;
}

.locations-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;

    min-height:42px;
    padding:0 18px;
    margin-bottom:30px;

    border:1px solid rgba(60,143,255,.7);
    border-radius:999px;

    color:#60adff;
    background:rgba(10,24,48,.7);

    font-family:"Manrope",sans-serif;
    font-size:.76rem;
    font-weight:700;
    letter-spacing:.06em;

    box-shadow:
        0 0 22px rgba(47,122,255,.12),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.locations-eyebrow svg{
    width:17px;
    height:17px;
}

.locations-title{
    margin:0;
     max-width:none;
    width:max-content;
    overflow:visible;

    color:#fff;
    font-family:"Manrope",sans-serif;
    font-size:clamp(3.8rem,4.6vw,5rem);
    font-weight:700;
    line-height:1.03;
    letter-spacing:-.05em;
}

.locations-title span{
    display:block;
    width:max-content;
    max-width:100%;
    margin-top:8px;
    white-space: nowrap;

    color:transparent;
    background:linear-gradient(
        90deg,
        #9d5cff 0%,
        #716eff 50%,
        #338cff 100%
    );

    -webkit-background-clip:text;
    background-clip:text;
}

.locations-description{
    max-width:520px;
    margin:24px 0 34px;

    color:rgba(209,220,241,.7);
    font-size:1rem;
    line-height:1.75;
}

.location-list{
    display:grid;
    gap:10px;
}

.location-item{
    display:grid;
    grid-template-columns:auto 1fr auto auto;
    align-items:center;
    gap:16px;

    width:100%;
    min-height:78px;
    padding:14px 18px;

    border:1px solid rgba(75,130,221,.22);
    border-radius:16px;

    color:#fff;
    background:
        linear-gradient(
            135deg,
            rgba(10,23,45,.9),
            rgba(7,15,31,.92)
        );

    text-align:left;

    transition:
        border-color .25s ease,
        background .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.location-item:hover,
.location-item.active{
    border-color:rgba(132,86,255,.85);

    background:
        linear-gradient(
            135deg,
            rgba(26,30,71,.88),
            rgba(10,18,39,.95)
        );

    box-shadow:
        0 0 30px rgba(88,92,255,.15),
        inset 0 1px 0 rgba(255,255,255,.045);

    transform:translateX(3px);
}

.location-item img{
    width:54px;
    height:38px;
    object-fit:cover;
    border-radius:6px;
}

.location-main{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.location-main strong{
    font-family:"Manrope",sans-serif;
    font-size:1rem;
    font-weight:700;
}

.location-main small{
    color:rgba(196,209,235,.58);
    font-size:.8rem;
}

.location-ping{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
}

.location-ping strong{
    font-family:"Manrope",sans-serif;
    font-size:1rem;
    font-weight:700;
}

.location-ping small{
    color:rgba(196,209,235,.52);
    font-size:.7rem;
}

.location-ping-good strong{
    color:#20df8b;
}

.location-ping-medium strong{
    color:#ffbf27;
}

.location-ping-high strong{
    color:#ff4d57;
}

.location-status{
    width:11px;
    height:11px;

    border-radius:50%;
}

.location-status.online{
    background:#22d985;
    box-shadow:0 0 0 5px rgba(34,217,133,.1);
}

.location-status.medium{
    background:#ffbc19;
    box-shadow:0 0 0 5px rgba(255,188,25,.1);
}

.location-status.high{
    background:#ff3e4d;
    box-shadow:0 0 0 5px rgba(255,62,77,.1);
}

.locations-stats{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:24px;

    margin-top:34px;
    padding:20px 24px;

    border:1px solid rgba(79,113,211,.18);
    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            rgba(9,21,43,.86),
            rgba(7,13,29,.93)
        );
}

.location-stat{
    display:flex;
    align-items:center;
    gap:16px;
}

.location-stat-icon{
    display:grid;
    place-items:center;

    width:52px;
    height:52px;

    border-radius:50%;

    color:#766cff;
    background:rgba(56,68,170,.14);
}

.location-stat-icon svg{
    width:24px;
    height:24px;
}

.location-stat > div:last-child{
    display:flex;
    flex-direction:column;
}

.location-stat strong{
    color:#fff;
    font-family:"Manrope",sans-serif;
    font-size:1.7rem;
    line-height:1;
}

.location-stat span{
    margin-top:5px;
    color:rgba(196,208,232,.58);
    font-size:.78rem;
}

.locations-stat-divider{
    width:1px;
    height:56px;
    background:rgba(255,255,255,.12);
}

@media(max-width:1050px){
    .locations-left{
        max-width:700px;
        margin:0 auto;
    }
}

@media(max-width:600px){
    .locations-title{
        font-size:clamp(2.55rem,12vw,3.3rem);
    }

    .location-item{
        grid-template-columns:auto 1fr auto;
    }

    .location-status{
        display:none;
    }

    .locations-stats{
        grid-template-columns:1fr;
    }

    .locations-stat-divider{
        width:100%;
        height:1px;
    }
}
/*=========================================
        PERFORMANCE COMPARISON
=========================================*/
/*==================================================
        SERVOMIX PERFORMANCE COMPARISON
==================================================*/

.smx-compare{
    position:relative;
    overflow:hidden;
    padding:130px 0;
    background:#050913;
}

.smx-compare::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(
            circle at 12% 38%,
            rgba(38,98,255,.08),
            transparent 34%
        ),
        radial-gradient(
            circle at 92% 42%,
            rgba(78,71,255,.09),
            transparent 36%
        );
}

.smx-compare__container{
    position:relative;
    z-index:2;
    width:min(1460px,94%);
    margin:0 auto;
}

/*==================================================
                    MAIN LAYOUT
==================================================*/

.smx-compare__main{
    display:grid;
    grid-template-columns:620px minmax(0,1fr);
    gap:40px;
    align-items:end;
}

/*==================================================
                    LEFT SIDE
==================================================*/

.smx-compare__intro{
    min-width:0;
    padding-right:34px;
}

.smx-compare__badge{
    width:max-content;
    min-height:42px;
    padding:0 18px;
    margin-bottom:24px;

    display:inline-flex;
    align-items:center;
    gap:9px;

    border:1px solid rgba(27,174,255,.72);
    border-radius:999px;

    background:rgba(7,23,48,.75);

    color:#47d5ff;

    font-size:14px;
    font-weight:700;
    letter-spacing:.3px;

    box-shadow:
        0 0 24px rgba(31,113,255,.14),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.smx-compare__badge svg{
    width:18px;
    height:18px;
}

.smx-compare__title{
    max-width:620px;
    font-size:64px;
    line-height:1.05;
    letter-spacing:-3px;

    margin-bottom:22px;

    color:#fff;

    font-family:"Manrope",sans-serif;
    font-size:clamp(44px,3.5vw,60px);
    line-height:1.04;
    font-weight:800;
    letter-spacing:-2.7px;
}

.smx-compare__title span{
    display:block;

    background:linear-gradient(
        90deg,
        #8a4dff 0%,
        #594aff 38%,
        #208eff 100%
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.smx-compare__description{
    max-width:470px;
    margin-bottom:28px;

    color:#aab6ca;

    font-size:17px;
    line-height:1.75;
}

/*==================================================
                FEATURE LABELS
==================================================*/

.smx-compare__labels{
    overflow:hidden;

    border:1px solid rgba(255,255,255,.11);
    border-radius:19px;

    background:
        linear-gradient(
            180deg,
            rgba(8,15,28,.92),
            rgba(6,12,23,.92)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 22px 55px rgba(0,0,0,.14);
}

.smx-compare__label{
    height:64px;
    padding:0 27px;

    display:flex;
    align-items:center;
    gap:16px;

    border-bottom:1px solid rgba(255,255,255,.075);
}

.smx-compare__label:last-child{
    border-bottom:none;
}

.smx-compare__label > svg{
    width:21px;
    height:21px;
    flex-shrink:0;

    color:#3a91ff;
    stroke-width:2;
}

.smx-compare__label strong{
    color:#f1f5fc;

    font-size:16px;
    font-weight:600;
}

/*==================================================
                COMPARISON TABLE
==================================================*/

.smx-compare__table{
    min-width:0;

    display:grid;
    grid-template-columns:minmax(310px,.92fr) minmax(405px,1.08fr);
}

.smx-compare__column{
    position:relative;
    min-width:0;

    display:grid;

    grid-template-rows:
        96px
        repeat(9,64px)
        86px;

    overflow:hidden;
}

.smx-compare__header,
.smx-compare__row,
.smx-compare__price{
    min-width:0;

    display:flex;
    align-items:center;

    position:relative;
    z-index:2;
}

.smx-compare__header{
    justify-content:center;
    gap:16px;
    padding:0 24px;
}

.smx-compare__row{
    justify-content:center;
    padding:0 24px;

    border-top:1px solid rgba(255,255,255,.09);

    white-space:nowrap;
}

/*==================================================
                TRADITIONAL COLUMN
==================================================*/

.smx-compare__column--old{
    border:1px solid rgba(155,173,205,.29);
    border-right:none;

    border-radius:19px 0 0 19px;

    background:
        radial-gradient(
            circle at top left,
            rgba(101,134,190,.08),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #111b2d,
            #0a1323
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 24px 60px rgba(0,0,0,.20);
}

.smx-compare__column--old .smx-compare__header > svg{
    width:30px;
    height:30px;

    color:#8493ac;
}

.smx-compare__column--old .smx-compare__header strong{
    color:#fff;

    font-family:"Manrope",sans-serif;
    font-size:22px;
    font-weight:700;
    letter-spacing:-.5px;
}

.smx-compare__column--old .smx-compare__row{
    color:#bcc5d5;

    font-size:17px;
    font-weight:500;
}

/*==================================================
                    SERVOMIX COLUMN
==================================================*/

.smx-compare__column--servomix{
    z-index:3;

    margin-left:-1px;

    border:1px solid #24aaff;
    border-radius:19px;

    background:
        radial-gradient(
            circle at 83% 9%,
            rgba(49,112,255,.28),
            transparent 26%
        ),
        linear-gradient(
            180deg,
            #0d347d 0%,
            #08245d 46%,
            #071d4b 100%
        );

    box-shadow:
        0 0 0 1px rgba(42,173,255,.15),
        0 0 27px rgba(25,139,255,.48),
        0 0 75px rgba(22,88,255,.24),
        inset 0 0 34px rgba(39,116,255,.12);
}

.smx-compare__column--servomix::before{
    content:"";
    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(0,137,255,.08),
            transparent 54%
        ),
        radial-gradient(
            circle at top right,
            rgba(96,180,255,.17),
            transparent 26%
        );
}

.smx-compare__header--servomix{
    background:
        linear-gradient(
            180deg,
            rgba(13,55,134,.94),
            rgba(7,39,99,.84)
        );
}

.smx-compare__header--servomix img{
    width:220px;
    max-width:85%;
    max-height:64px;

    object-fit:contain;
}

.smx-compare__row--servomix{
    justify-content:flex-start;
    gap:17px;
}

.smx-compare__row--servomix strong{
    overflow:hidden;

    color:#fff;

    font-size:17px;
    font-weight:600;
    letter-spacing:-.2px;

    text-overflow:ellipsis;
}

.smx-compare__check{
    width:34px;
    height:34px;
    flex:0 0 34px;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #3bc5ff,
            #198dff
        );

    box-shadow:
        0 0 15px rgba(40,172,255,.55),
        inset 0 1px 0 rgba(255,255,255,.30);
}

.smx-compare__check svg{
    width:19px;
    height:19px;

    stroke-width:3;
}

/*==================================================
                    PRICES
==================================================*/

.smx-compare__price{
    justify-content:center;
    gap:5px;

    border-top:1px solid rgba(255,255,255,.10);
}

.smx-compare__price--old strong{
    color:#fff;

    font-size:29px;
    font-weight:800;
    letter-spacing:-1px;
}

.smx-compare__price--old span{
    color:#aeb8ca;
    font-size:17px;
}

.smx-compare__price--servomix{
    gap:8px;
}

.smx-compare__price--servomix span:first-child{
    color:#bbc7d9;
    font-size:18px;
}

.smx-compare__price--servomix strong{
    color:#249dff;

    font-size:43px;
    line-height:1;
    font-weight:800;
    letter-spacing:-2px;

    text-shadow:
        0 0 20px rgba(35,157,255,.25);
}

.smx-compare__price--servomix span:last-child{
    color:#c3ccdb;
    font-size:18px;
}

/*==================================================
                    BOTTOM STATS
==================================================*/

.smx-compare__stats{
    margin-top:26px;

    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));

    border:1px solid rgba(255,255,255,.10);
    border-radius:19px;

    background:
        linear-gradient(
            180deg,
            rgba(8,16,31,.92),
            rgba(6,13,26,.92)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 24px 55px rgba(0,0,0,.14);
}

.smx-compare__stat{
    position:relative;
    min-width:0;
    min-height:112px;

    padding:22px 28px;

    display:flex;
    align-items:center;
    gap:18px;
}

.smx-compare__stat:not(:last-child)::after{
    content:"";

    position:absolute;
    top:25%;
    right:0;

    width:1px;
    height:50%;

    background:rgba(255,255,255,.09);
}

.smx-compare__stat-icon{
    width:58px;
    height:58px;
    flex:0 0 58px;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:#4b91ff;

    background:
        linear-gradient(
            145deg,
            rgba(30,83,196,.34),
            rgba(45,34,150,.30)
        );

    box-shadow:
        inset 0 0 18px rgba(73,135,255,.12),
        0 0 22px rgba(44,100,255,.13);
}

.smx-compare__stat-icon svg{
    width:28px;
    height:28px;
}

.smx-compare__stat strong{
    display:block;

    margin-bottom:6px;

    color:#fff;

    font-family:"Manrope",sans-serif;
    font-size:30px;
    line-height:1;
    font-weight:800;
    letter-spacing:-1px;
}

.smx-compare__stat div span{
    display:block;

    color:#aab5c8;

    font-size:14px;
    line-height:1.35;
}

/*==================================================
                    RESPONSIVE
==================================================*/

@media(max-width:1280px){

    .smx-compare__container{
        width:min(1180px,92%);
    }

    .smx-compare__main{
        grid-template-columns:390px minmax(0,1fr);
    }

    .smx-compare__intro{
        padding-right:25px;
    }

    .smx-compare__title{
        font-size:43px;
    }

    .smx-compare__description{
        font-size:15px;
    }

    .smx-compare__table{
        grid-template-columns:
            minmax(270px,.92fr)
            minmax(345px,1.08fr);
    }

    .smx-compare__column{
        grid-template-rows:
            88px
            repeat(9,58px)
            78px;
    }

    .smx-compare__label{
        height:58px;
        padding:0 21px;
    }

    .smx-compare__row{
        padding:0 19px;
    }

    .smx-compare__column--old .smx-compare__row,
    .smx-compare__row--servomix strong{
        font-size:15px;
    }

    .smx-compare__check{
        width:30px;
        height:30px;
        flex-basis:30px;
    }

    .smx-compare__stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .smx-compare__stat:nth-child(2)::after{
        display:none;
    }

}

@media(max-width:980px){

    .smx-compare__main{
        grid-template-columns:1fr;
        gap:36px;
    }

    .smx-compare__intro{
        padding-right:0;
    }

    .smx-compare__title,
    .smx-compare__description{
        max-width:680px;
    }

    .smx-compare__table{
        grid-template-columns:1fr 1.12fr;
    }

}

@media(max-width:700px){

    .smx-compare{
        padding:80px 0;
    }

    .smx-compare__title{
        font-size:38px;
        letter-spacing:-1.5px;
    }

    .smx-compare__table{
        grid-template-columns:1fr;
        gap:20px;
    }

    .smx-compare__column--old{
        border-right:1px solid rgba(155,173,205,.29);
        border-radius:18px;
    }

    .smx-compare__column--servomix{
        margin-left:0;
    }

    .smx-compare__column{
        grid-template-rows:
            78px
            repeat(9,56px)
            72px;
    }

    .smx-compare__stats{
        grid-template-columns:1fr;
    }

    .smx-compare__stat{
        min-height:94px;
    }

    .smx-compare__stat::after{
        top:auto !important;
        right:24px !important;
        bottom:0;
        left:24px;

        width:auto !important;
        height:1px !important;
    }

    .smx-compare__stat:last-child::after{
        display:none;
    }

}

@media(max-width:480px){

    .smx-compare__badge{
        min-height:38px;
        padding:0 15px;
        font-size:12px;
    }

    .smx-compare__title{
        font-size:33px;
    }

    .smx-compare__description{
        font-size:14px;
    }

    .smx-compare__label{
        height:56px;
        padding:0 17px;
    }

    .smx-compare__label strong{
        font-size:14px;
    }

    .smx-compare__row{
        padding:0 15px;
    }

    .smx-compare__column--old .smx-compare__row,
    .smx-compare__row--servomix strong{
        font-size:14px;
    }

    .smx-compare__check{
        width:28px;
        height:28px;
        flex-basis:28px;
    }

    .smx-compare__header--servomix img{
        width:180px;
    }

    .smx-compare__stat{
        padding:18px 20px;
    }

}
/* =========================================
   FINAL TABLE ALIGNMENT
========================================= */

.smx-compare__main{
    align-items:stretch;
}

.smx-compare__intro{
    display:flex;
    flex-direction:column;
}

.smx-compare__labels{
    margin-top:auto;
}

.smx-compare__table{
    align-self:end;
}

.smx-compare__column{
    grid-template-rows:
        96px
        repeat(9,64px)
        64px;
}

.smx-compare__label{
    height:64px;
}

.smx-compare__row{
    height:64px;
}

.smx-compare__price{
    height:64px;
}
/* =========================================================
   SERVOMIX FAQ — COMPLETE REPLACEMENT CSS
========================================================= */

.smx-faq {
    position: relative;
    padding: 110px 20px 120px;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 10%, rgba(46, 72, 190, 0.13), transparent 34%),
        radial-gradient(circle at 88% 78%, rgba(102, 61, 202, 0.11), transparent 35%),
        #050711;
}

.smx-faq::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}

.smx-faq__container {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
    margin: 0 auto;
}

/* =========================
   HEADER
========================= */

.smx-faq__header {
    max-width: 850px;
    margin: 0 auto 58px;
    text-align: center;
}

.smx-faq__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 17px;
    margin-bottom: 22px;
    border: 1px solid rgba(33, 126, 255, 0.48);
    border-radius: 999px;
    color: #2f92ff;
    background: rgba(5, 58, 132, 0.15);
    box-shadow:
        inset 0 0 20px rgba(35, 103, 255, 0.06),
        0 0 28px rgba(20, 92, 255, 0.08);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.smx-faq__badge svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
}

.smx-faq__heading {
    margin: 0;
    color: #f7f8ff;
    font-size: clamp(46px, 6vw, 70px);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.05em;
}

.smx-faq__heading span {
    color: transparent;
    background: linear-gradient(90deg, #6ea0ff 0%, #785dff 48%, #bd59ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.smx-faq__subtitle {
    margin: 20px 0 0;
    color: #949bb0;
    font-size: 16px;
    line-height: 1.7;
}

/* =========================
   MAIN LAYOUT
========================= */

.smx-faq__layout {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

/* =========================
   QUESTION SIDEBAR
========================= */

.smx-faq__sidebar {
    display: flex;
    flex-direction: column;
    padding: 16px 14px;
    border: 1px solid rgba(141, 153, 199, 0.16);
    border-radius: 25px;
    background:
        linear-gradient(145deg, rgba(18, 22, 41, 0.9), rgba(7, 9, 20, 0.92));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 28px 70px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(22px);
}

.smx-faq__item {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 76px;
    padding: 13px 14px;
    border: 1px solid transparent;
    border-radius: 16px;
    color: #b7bdcf;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        color 0.28s ease,
        border-color 0.28s ease,
        background 0.28s ease,
        box-shadow 0.28s ease,
        transform 0.28s ease;
}

.smx-faq__item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 1px;
    background: rgba(255, 255, 255, 0.055);
}

.smx-faq__item-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(54, 119, 255, 0.15);
    border-radius: 12px;
    color: #2087ff;
    background:
        linear-gradient(145deg, rgba(15, 76, 174, 0.25), rgba(10, 29, 69, 0.4));
    transition:
        color 0.28s ease,
        border-color 0.28s ease,
        background 0.28s ease,
        box-shadow 0.28s ease;
}

.smx-faq__item-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.1;
}

.smx-faq__item-text {
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
}

.smx-faq__item-arrow {
    display: grid;
    place-items: center;
    color: #a7aec2;
    transition:
        color 0.28s ease,
        transform 0.28s ease;
}

.smx-faq__item-arrow svg {
    width: 19px;
    height: 19px;
    stroke-width: 2.1;
}

.smx-faq__item:hover {
    color: #f8f9ff;
    border-color: rgba(50, 126, 255, 0.22);
    background: rgba(31, 91, 202, 0.07);
    transform: translateX(3px);
}

.smx-faq__item:hover .smx-faq__item-icon {
    color: #42a0ff;
    border-color: rgba(53, 130, 255, 0.35);
    background:
        linear-gradient(145deg, rgba(17, 93, 211, 0.33), rgba(11, 37, 88, 0.45));
    box-shadow: 0 0 24px rgba(27, 104, 255, 0.15);
}

.smx-faq__item:hover .smx-faq__item-arrow {
    color: #64adff;
    transform: translateX(4px);
}

.smx-faq__item.active {
    color: #ffffff;
    border-color: rgba(27, 127, 255, 0.82);
    background:
        radial-gradient(circle at 12% 50%, rgba(15, 104, 255, 0.28), transparent 36%),
        linear-gradient(100deg, rgba(9, 73, 185, 0.42), rgba(11, 30, 77, 0.48));
    box-shadow:
        inset 0 0 24px rgba(28, 110, 255, 0.1),
        0 0 30px rgba(13, 99, 255, 0.17);
}

.smx-faq__item.active .smx-faq__item-icon {
    color: #6fc2ff;
    border-color: rgba(45, 133, 255, 0.52);
    background: linear-gradient(145deg, #0b79eb, #1740cd);
    box-shadow: 0 0 22px rgba(22, 116, 255, 0.35);
}

.smx-faq__item.active .smx-faq__item-arrow {
    color: #ffffff;
    transform: translateX(3px);
}

/* =========================
   VIEWER
========================= */

.smx-faq__viewer {
    --faq-rotate-x: 0deg;
    --faq-rotate-y: 0deg;

    position: relative;
    min-height: 650px;
    overflow: hidden;
    border: 1px solid rgba(125, 139, 190, 0.17);
    border-radius: 28px;
    background:
        radial-gradient(circle at 22% 10%, rgba(83, 104, 255, 0.12), transparent 38%),
        radial-gradient(circle at 82% 90%, rgba(83, 53, 187, 0.08), transparent 35%),
        linear-gradient(145deg, rgba(20, 24, 46, 0.94), rgba(7, 9, 20, 0.96));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 34px 90px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(24px);
    transform:
        perspective(1100px)
        rotateX(var(--faq-rotate-x))
        rotateY(var(--faq-rotate-y));
    transform-style: preserve-3d;
    transition:
        transform 0.16s ease-out,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.smx-faq__viewer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.045),
            transparent 27%,
            transparent 73%,
            rgba(73, 94, 255, 0.04)
        );
}

.smx-faq__viewer-glow {
    position: absolute;
    z-index: 1;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    pointer-events: none;
    background: rgba(42, 104, 255, 0.15);
    filter: blur(95px);
    opacity: 0.7;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -50%);
}

/* =========================
   SHARED PANELS
========================= */

.smx-faq__welcome,
.smx-faq__answer {
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 48px 54px;
    transition:
        opacity 0.42s ease,
        visibility 0.42s ease,
        transform 0.42s ease;
}

.smx-faq__welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    text-align: center;
    transform: translateY(18px) scale(0.985);
}

.smx-faq__welcome.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.smx-faq__answer {
    visibility: hidden;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(18px) scale(0.985);
}

.smx-faq__answer.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* =========================
   WELCOME SCREEN
========================= */

.smx-faq__logo-shell{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    margin-bottom:30px;

    background:transparent;
    border:none;
    border-radius:0;
    box-shadow:none;

    animation:none;
}

.smx-faq__logo{
    width:260px;
    height:auto;
    display:block;
    object-fit:contain;

    filter:
        drop-shadow(0 0 18px rgba(40,120,255,.22))
        drop-shadow(0 0 45px rgba(95,70,255,.15));

    transition:.35s ease;
}

.smx-faq__logo:hover{
    transform:scale(1.03);
}

.smx-faq__welcome-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    color: #8ca8ff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.smx-faq__welcome h3 {
    margin: 0;
    color: #f8f9ff;
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.smx-faq__welcome > p {
    max-width: 700px;
    margin: 20px auto 0;
    color: #979fb5;
    font-size: 15px;
    line-height: 1.85;
}

.smx-faq__welcome-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    margin-top: 34px;
}

.smx-faq__welcome-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 78px;
    padding: 14px 15px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 16px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.013));
    text-align: left;
}

.smx-faq__welcome-feature-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(47, 125, 255, 0.26);
    border-radius: 12px;
    color: #49a2ff;
    background: rgba(19, 79, 179, 0.18);
}

.smx-faq__welcome-feature-icon svg {
    width: 21px;
    height: 21px;
    stroke-width: 2;
}

.smx-faq__welcome-feature-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.smx-faq__welcome-feature-text strong {
    color: #eef1ff;
    font-size: 13px;
    line-height: 1.3;
}

.smx-faq__welcome-feature-text small {
    color: #7f879c;
    font-size: 11px;
    line-height: 1.35;
}

.smx-faq__welcome-hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    color: #7d859c;
    font-size: 12px;
    font-weight: 600;
}

.smx-faq__welcome-hint svg {
    width: 17px;
    height: 17px;
    color: #559fff;
}

/* =========================
   ANSWER VIEW
========================= */

.smx-faq__answer-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.smx-faq__main-icon {
    display: grid;
    place-items: center;
    width: 110px;
    height: 110px;
    margin-bottom: 24px;
    border: 1px solid rgba(38, 130, 255, 0.34);
    border-radius: 27px;
    color: #48a7ff;
    background:
        radial-gradient(circle at 30% 20%, rgba(72, 147, 255, 0.25), transparent 46%),
        linear-gradient(145deg, rgba(15, 82, 186, 0.28), rgba(22, 31, 83, 0.34));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 42px rgba(27, 111, 255, 0.17);
}

.smx-faq__main-icon svg {
    width: 54px;
    height: 54px;
    stroke-width: 1.65;
    filter: drop-shadow(0 0 11px rgba(60, 145, 255, 0.42));
    animation: smxFaqIconFloat 3.6s ease-in-out infinite;
}

.smx-faq__answer-category {
    display: inline-flex;
    padding: 7px 11px;
    margin-bottom: 13px;
    border: 1px solid rgba(67, 131, 255, 0.22);
    border-radius: 999px;
    color: #75afff;
    background: rgba(27, 88, 183, 0.11);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.smx-faq__answer h3 {
    max-width: 720px;
    margin: 0;
    color: #f8f9ff;
    font-size: clamp(31px, 4vw, 45px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.04em;
}

.smx-faq__answer-top > p {
    max-width: 735px;
    margin: 18px 0 0;
    color: #9aa2b7;
    font-size: 15px;
    line-height: 1.9;
}

.smx-faq__divider {
    width: 100%;
    height: 1px;
    margin: 30px 0;
    background: linear-gradient(
        90deg,
        rgba(63, 135, 255, 0.32),
        rgba(255, 255, 255, 0.065),
        transparent
    );
}

/* =========================
   ANSWER FEATURES
========================= */

.smx-faq__features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
    width: 100%;
}

.smx-faq__feature {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    min-width: 0;
    padding: 17px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 17px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.039), rgba(255, 255, 255, 0.014));
}

.smx-faq__feature-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(49, 128, 255, 0.25);
    border-radius: 12px;
    color: #4ba5ff;
    background: rgba(20, 83, 184, 0.16);
}

.smx-faq__feature-icon svg {
    width: 21px;
    height: 21px;
    stroke-width: 2;
}

.smx-faq__feature h4 {
    margin: 1px 0 0;
    color: #edf0ff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.35;
}

.smx-faq__feature p {
    margin: 6px 0 0;
    color: #80889e;
    font-size: 12px;
    line-height: 1.55;
}

.smx-faq__answer-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid rgba(70, 135, 255, 0.14);
    border-radius: 14px;
    color: #8f98af;
    background: rgba(24, 72, 151, 0.08);
}

.smx-faq__answer-note svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    color: #5ba8ff;
}

.smx-faq__answer-note p {
    margin: 0;
    font-size: 12px;
    line-height: 1.65;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes smxFaqLogoFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

@keyframes smxFaqIconFloat {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-5px) rotate(2deg);
    }
}

/* =========================
   TABLET
========================= */

@media (max-width: 980px) {
    .smx-faq {
        padding: 90px 18px 100px;
    }

    .smx-faq__layout {
        grid-template-columns: 1fr;
    }

    .smx-faq__sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .smx-faq__item:not(:last-child)::after {
        display: none;
    }

    .smx-faq__viewer {
        min-height: 650px;
    }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 680px) {
    .smx-faq {
        padding: 75px 14px 84px;
    }

    .smx-faq__header {
        margin-bottom: 38px;
    }

    .smx-faq__heading {
        font-size: clamp(40px, 13vw, 58px);
    }

    .smx-faq__heading span {
        display: block;
    }

    .smx-faq__sidebar {
        display: flex;
        padding: 10px;
        border-radius: 20px;
    }

    .smx-faq__item {
        min-height: 66px;
        grid-template-columns: 38px minmax(0, 1fr) 18px;
        padding: 11px 10px;
    }

    .smx-faq__item-icon {
        width: 38px;
        height: 38px;
        border-radius: 11px;
    }

    .smx-faq__viewer {
        min-height: 760px;
        border-radius: 22px;
    }

    .smx-faq__welcome,
    .smx-faq__answer {
        padding: 36px 20px;
    }

    .smx-faq__logo-shell {
        width: 98px;
        height: 98px;
        border-radius: 24px;
    }

    .smx-faq__logo {
        width: 64px;
        height: 64px;
    }

    .smx-faq__welcome-features {
        grid-template-columns: 1fr;
        max-width: 380px;
    }

    .smx-faq__features {
        grid-template-columns: 1fr;
    }

    .smx-faq__main-icon {
        width: 94px;
        height: 94px;
        border-radius: 23px;
    }

    .smx-faq__main-icon svg {
        width: 46px;
        height: 46px;
    }
}

/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 420px) {
    .smx-faq__viewer {
        min-height: 820px;
    }

    .smx-faq__welcome h3 {
        font-size: 31px;
    }

    .smx-faq__answer h3 {
        font-size: 30px;
    }
}

/* =========================
   REDUCED MOTION
========================= */

@media (prefers-reduced-motion: reduce) {
    .smx-faq__logo-shell,
    .smx-faq__main-icon svg {
        animation: none;
    }

    .smx-faq__viewer,
    .smx-faq__item,
    .smx-faq__welcome,
    .smx-faq__answer {
        transition: none;
    }
}
/* =====================================================
   SERVOMIX CONTACT CTA
===================================================== */

.smx-contact-cta{
    position:relative;
    padding:110px 24px;
    overflow:hidden;
    isolation:isolate;
}

.smx-contact-cta .container{
    width:min(1500px, 100%);
    margin:0 auto;
}

.smx-contact-cta__content{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:88px 70px;

    border:1px solid rgba(91, 113, 255, .34);
    border-radius:32px;

    background:
        linear-gradient(
            135deg,
            rgba(8, 12, 38, .90),
            rgba(8, 13, 42, .78)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.06),
        0 30px 90px rgba(0, 0, 0, .38),
        0 0 55px rgba(71, 82, 255, .12);

    text-align:center;
    overflow:hidden;
}

/* Background image */

.smx-contact-cta__content::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-3;

    background:
        url("assets/images/contact-bg.webp")
        center/cover no-repeat;

    opacity:.42;
    pointer-events:none;
}

/* Dark overlay for readability */

.smx-contact-cta__content::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(15, 20, 64, .20),
            rgba(4, 7, 24, .74) 68%
        ),
        linear-gradient(
            90deg,
            rgba(5, 8, 28, .42),
            rgba(5, 8, 28, .16),
            rgba(5, 8, 28, .42)
        );

    pointer-events:none;
}

/* Extra glow */

.smx-contact-cta__bg{
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
}

.smx-contact-cta__bg::before{
    content:"";
    position:absolute;
    width:600px;
    height:600px;
    top:0;
    left:50%;

    transform:translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(72, 70, 255, .18),
            transparent 68%
        );

    filter:blur(40px);
}

.smx-contact-cta__bg::after{
    content:"";
    position:absolute;
    width:480px;
    height:480px;
    right:-120px;
    bottom:-100px;

    background:
        radial-gradient(
            circle,
            rgba(0, 170, 255, .13),
            transparent 70%
        );

    filter:blur(30px);
}

/* Badge */

.smx-contact-cta__badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    margin-bottom:26px;
    padding:11px 20px;

    border:1px solid rgba(76, 122, 255, .34);
    border-radius:999px;

    background:rgba(7, 14, 42, .64);

    color:#74b0ff;
    font-size:13px;
    font-weight:700;
    letter-spacing:.12em;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 0 25px rgba(49, 106, 255, .10);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.smx-contact-cta__badge svg{
    width:18px;
    height:18px;
    stroke-width:2;
}

/* Heading */

.smx-contact-cta__title{
    margin:0;

    color:#ffffff;
    font-size:clamp(44px, 5vw, 82px);
    font-weight:800;
    line-height:1.04;
    letter-spacing:-.045em;
}

.smx-contact-cta__title span{
    display:inline-block;

    background:
        linear-gradient(
            90deg,
            #3ba6ff 0%,
            #6872ff 48%,
            #a45cff 100%
        );

    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;

    filter:drop-shadow(0 0 24px rgba(86, 91, 255, .16));
}

/* Description */

.smx-contact-cta__description{
    max-width:820px;
    margin:26px auto 0;

    color:rgba(229, 235, 255, .75);
    font-size:18px;
    line-height:1.8;
}

/* Cards wrapper */

.smx-contact-cta__cards{
    width:100%;
    max-width:1240px;

    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:22px;

    margin-top:46px;
}

/* Individual card */

.smx-contact-card{
    --accent:#6f63ff;
    --accent-rgb:111, 99, 255;

    position:relative;

    display:flex;
    align-items:center;
    gap:18px;

    min-height:142px;
    padding:24px 22px;

    border:1px solid rgba(var(--accent-rgb), .58);
    border-radius:22px;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(var(--accent-rgb), .15),
            transparent 48%
        ),
        rgba(6, 11, 34, .72);

    color:#fff;
    text-decoration:none;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 16px 38px rgba(0,0,0,.24),
        0 0 22px rgba(var(--accent-rgb), .08);

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}

.smx-contact-card::before{
    content:"";
    position:absolute;
    inset:0;

    border-radius:inherit;

    background:
        linear-gradient(
            120deg,
            transparent 25%,
            rgba(255,255,255,.07) 50%,
            transparent 75%
        );

    transform:translateX(-120%);
    transition:transform .7s ease;

    pointer-events:none;
}

.smx-contact-card:hover{
    transform:translateY(-8px);

    border-color:rgba(var(--accent-rgb), .9);

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(var(--accent-rgb), .22),
            transparent 52%
        ),
        rgba(7, 13, 38, .84);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.07),
        0 22px 50px rgba(0,0,0,.32),
        0 0 34px rgba(var(--accent-rgb), .18);
}

.smx-contact-card:hover::before{
    transform:translateX(120%);
}

/* Card colors */

.smx-contact-card.discord{
    --accent:#8b5cff;
    --accent-rgb:139, 92, 255;
}

.smx-contact-card.email{
    --accent:#2694ff;
    --accent-rgb:38, 148, 255;
}

.smx-contact-card.billing{
    --accent:#29e0a1;
    --accent-rgb:41, 224, 161;
}

/* Card icon */

.smx-contact-card__icon{
    flex:0 0 auto;

    display:grid;
    place-items:center;

    width:70px;
    height:70px;

    border:1px solid rgba(var(--accent-rgb), .66);
    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(var(--accent-rgb), .34),
            rgba(var(--accent-rgb), .10)
        );

    color:rgb(var(--accent-rgb));

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 0 25px rgba(var(--accent-rgb), .18);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.smx-contact-card__icon svg{
    width:34px;
    height:34px;
    stroke-width:1.9;
}

.smx-contact-card:hover .smx-contact-card__icon{
    transform:scale(1.06) rotate(-3deg);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15),
        0 0 34px rgba(var(--accent-rgb), .30);
}

/* Card text */

.smx-contact-card__info{
    min-width:0;
    flex:1;

    text-align:left;
}

.smx-contact-card__info h3{
    margin:0 0 8px;

    color:#ffffff;
    font-size:21px;
    font-weight:700;
    line-height:1.2;
}

.smx-contact-card__info p{
    margin:0;

    color:rgba(var(--accent-rgb), .92);
    font-size:15px;
    line-height:1.55;
}

/* Arrow */

.smx-contact-card__arrow{
    flex:0 0 auto;

    display:grid;
    place-items:center;

    width:46px;
    height:46px;

    border:1px solid rgba(var(--accent-rgb), .72);
    border-radius:50%;

    color:rgb(var(--accent-rgb));
    background:rgba(var(--accent-rgb), .08);

    transition:
        transform .35s ease,
        color .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}

.smx-contact-card__arrow svg{
    width:21px;
    height:21px;
}

.smx-contact-card:hover .smx-contact-card__arrow{
    transform:translateX(4px);

    color:#ffffff;
    background:rgba(var(--accent-rgb), .28);

    box-shadow:
        0 0 22px rgba(var(--accent-rgb), .24);
}

/* Focus accessibility */

.smx-contact-card:focus-visible{
    outline:2px solid rgb(var(--accent-rgb));
    outline-offset:5px;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width:1100px){

    .smx-contact-cta__content{
        padding:74px 42px;
    }

    .smx-contact-cta__cards{
        gap:16px;
    }

    .smx-contact-card{
        padding:22px 18px;
        gap:14px;
    }

    .smx-contact-card__icon{
        width:60px;
        height:60px;
    }

    .smx-contact-card__icon svg{
        width:29px;
        height:29px;
    }

    .smx-contact-card__info h3{
        font-size:18px;
    }

    .smx-contact-card__arrow{
        width:40px;
        height:40px;
    }
}

@media (max-width:900px){

    .smx-contact-cta{
        padding:90px 20px;
    }

    .smx-contact-cta__content{
        padding:64px 28px;
        border-radius:26px;
    }

    .smx-contact-cta__cards{
        grid-template-columns:1fr;
        max-width:660px;
    }

    .smx-contact-card{
        min-height:126px;
    }
}

@media (max-width:600px){

    .smx-contact-cta{
        padding:72px 14px;
    }

    .smx-contact-cta__content{
        padding:52px 18px;
        border-radius:22px;
    }

    .smx-contact-cta__badge{
        padding:10px 15px;
        font-size:11px;
    }

    .smx-contact-cta__title{
        font-size:clamp(38px, 12vw, 56px);
    }

    .smx-contact-cta__description{
        margin-top:20px;
        font-size:15px;
        line-height:1.7;
    }

    .smx-contact-cta__cards{
        margin-top:34px;
        gap:14px;
    }

    .smx-contact-card{
        min-height:auto;
        padding:19px 16px;
        border-radius:18px;
    }

    .smx-contact-card__icon{
        width:54px;
        height:54px;
        border-radius:15px;
    }

    .smx-contact-card__icon svg{
        width:26px;
        height:26px;
    }

    .smx-contact-card__info h3{
        font-size:17px;
    }

    .smx-contact-card__info p{
        font-size:13px;
    }

    .smx-contact-card__arrow{
        width:38px;
        height:38px;
    }
}

@media (max-width:430px){

    .smx-contact-card__arrow{
        display:none;
    }

    .smx-contact-card__info h3{
        margin-bottom:5px;
    }
}

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

    .smx-contact-card,
    .smx-contact-card::before,
    .smx-contact-card__icon,
    .smx-contact-card__arrow{
        transition:none;
    }
}
/* =====================================================
   SERVOMIX FOOTER — PART 1
   Layout, Brand, Columns, Typography
===================================================== */

.smx-footer{
    position:relative;
    width:100%;
    padding:80px 24px 28px;

    background:
        linear-gradient(
            180deg,
            rgba(3, 6, 20, 0) 0%,
            rgba(3, 6, 20, .72) 18%,
            #030614 100%
        );

    color:#ffffff;
    overflow:hidden;
}

.smx-footer::before{
    content:"";
    position:absolute;
    top:0;
    left:50%;

    width:min(1500px, calc(100% - 48px));
    height:1px;

    transform:translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(80, 105, 255, .56),
            rgba(155, 85, 255, .42),
            transparent
        );

    box-shadow:
        0 0 20px rgba(91, 93, 255, .20);

    pointer-events:none;
}

.smx-footer__container{
    position:relative;
    z-index:2;

    width:min(1500px, 100%);
    margin:0 auto;
}

/* =====================================================
   MAIN FOOTER GRID
===================================================== */

.smx-footer__top{
    display:grid;
    grid-template-columns:
        minmax(280px, 1.45fr)
        repeat(3, minmax(160px, .72fr))
        minmax(260px, 1fr);

    gap:48px;
    align-items:start;
}

/* =====================================================
   BRAND SECTION
===================================================== */

.smx-footer__brand{
    min-width:0;
}

.smx-footer__logo{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;

    margin-bottom:24px;

    text-decoration:none;
}

.smx-footer__logo img{
    display:block;

    width:210px;
    max-width:100%;
    height:auto;

    object-fit:contain;

    filter:
        drop-shadow(0 0 16px rgba(67, 112, 255, .14));

    transition:
        transform .35s ease,
        filter .35s ease;
}

.smx-footer__logo:hover img{
    transform:translateY(-2px);

    filter:
        drop-shadow(0 0 22px rgba(67, 112, 255, .24));
}

.smx-footer__description{
    max-width:390px;
    margin:0;

    color:rgba(218, 225, 255, .68);
    font-size:15px;
    font-weight:400;
    line-height:1.8;
}

/* =====================================================
   SYSTEM STATUS
===================================================== */

.smx-footer__status{
    display:inline-flex;
    align-items:center;
    gap:10px;

    margin-top:24px;
    padding:10px 15px;

    border:1px solid rgba(43, 223, 153, .24);
    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            rgba(18, 75, 57, .18),
            rgba(8, 26, 31, .28)
        );

    color:rgba(187, 255, 225, .90);
    font-size:13px;
    font-weight:600;
    line-height:1;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 20px rgba(31, 226, 153, .05);
}

.smx-footer__status-dot{
    position:relative;

    display:block;
    width:9px;
    height:9px;

    border-radius:50%;
    background:#2ee59d;

    box-shadow:
        0 0 12px rgba(46, 229, 157, .85);
}

.smx-footer__status-dot::before{
    content:"";
    position:absolute;
    inset:-5px;

    border:1px solid rgba(46, 229, 157, .28);
    border-radius:50%;

    animation:smxFooterStatusPulse 2.2s ease-out infinite;
}

@keyframes smxFooterStatusPulse{
    0%{
        opacity:.85;
        transform:scale(.72);
    }

    75%,
    100%{
        opacity:0;
        transform:scale(1.65);
    }
}

/* =====================================================
   SOCIAL BLOCK BASE
===================================================== */

.smx-footer__social-block{
    margin-top:26px;
}

.smx-footer__social-title{
    display:block;
    margin-bottom:13px;

    color:rgba(255,255,255,.88);
    font-size:13px;
    font-weight:700;
    letter-spacing:.02em;
}

.smx-footer__socials{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
}

/* Detailed social button styling comes in Part 2 */

/* =====================================================
   FOOTER COLUMNS
===================================================== */

.smx-footer__column,
.smx-footer__contact{
    min-width:0;
}

.smx-footer__heading{
    position:relative;

    margin:4px 0 25px;
    padding-bottom:14px;

    color:#ffffff;
    font-size:16px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.01em;
}

.smx-footer__heading::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;

    width:34px;
    height:2px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #3a94ff,
            #785bff
        );

    box-shadow:
        0 0 12px rgba(77, 100, 255, .38);
}

/* =====================================================
   LINK LISTS
===================================================== */

.smx-footer__links{
    display:flex;
    flex-direction:column;
    gap:4px;

    margin:0;
    padding:0;

    list-style:none;
}

.smx-footer__links li{
    margin:0;
    padding:0;
}

.smx-footer__links a{
    position:relative;

    display:flex;
    align-items:center;
    gap:10px;

    min-height:39px;
    padding:7px 0;

    color:rgba(201, 210, 242, .68);
    font-size:14px;
    font-weight:500;
    line-height:1.45;

    text-decoration:none;

    transition:
        color .28s ease,
        transform .28s ease,
        text-shadow .28s ease;
}

.smx-footer__links a::before{
    content:"";
    position:absolute;
    left:-12px;

    width:3px;
    height:0;

    border-radius:999px;

    background:
        linear-gradient(
            180deg,
            #3b9cff,
            #835dff
        );

    box-shadow:
        0 0 12px rgba(92, 94, 255, .34);

    transition:
        height .28s ease;
}

.smx-footer__links a svg{
    flex:0 0 auto;

    width:16px;
    height:16px;

    color:rgba(105, 135, 255, .72);
    stroke-width:1.9;

    transition:
        color .28s ease,
        transform .28s ease,
        filter .28s ease;
}

.smx-footer__links a:hover{
    color:#ffffff;
    transform:translateX(5px);

    text-shadow:
        0 0 15px rgba(100, 118, 255, .15);
}

.smx-footer__links a:hover::before{
    height:22px;
}

.smx-footer__links a:hover svg{
    color:#7d8dff;
    transform:scale(1.08);

    filter:
        drop-shadow(0 0 8px rgba(100, 118, 255, .30));
}

.smx-footer__links a:focus-visible{
    outline:2px solid rgba(105, 125, 255, .85);
    outline-offset:4px;
    border-radius:4px;
}

/* =====================================================
   CONTACT COLUMN BASE
===================================================== */

.smx-footer__contact-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

/* Detailed contact card styling comes in Part 2 */

/* =====================================================
   TABLET STRUCTURE
===================================================== */

@media (max-width:1280px){

    .smx-footer__top{
        grid-template-columns:
            minmax(280px, 1.3fr)
            repeat(3, minmax(150px, .72fr));

        gap:42px 34px;
    }

    .smx-footer__contact{
        grid-column:2 / -1;
    }

    .smx-footer__contact-list{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:960px){

    .smx-footer{
        padding-top:70px;
    }

    .smx-footer__top{
        grid-template-columns:
            minmax(260px, 1.1fr)
            repeat(2, minmax(150px, .7fr));

        gap:44px 32px;
    }

    .smx-footer__brand{
        grid-row:span 2;
    }

    .smx-footer__contact{
        grid-column:2 / -1;
    }
}

@media (max-width:760px){

    .smx-footer{
        padding:
            64px 20px
            24px;
    }

    .smx-footer::before{
        width:calc(100% - 40px);
    }

    .smx-footer__top{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:42px 28px;
    }

    .smx-footer__brand{
        grid-column:1 / -1;
        grid-row:auto;
    }

    .smx-footer__description{
        max-width:560px;
    }

    .smx-footer__contact{
        grid-column:1 / -1;
    }
}

@media (max-width:520px){

    .smx-footer{
        padding:
            56px 16px
            22px;
    }

    .smx-footer::before{
        width:calc(100% - 32px);
    }

    .smx-footer__top{
        grid-template-columns:1fr;
        gap:38px;
    }

    .smx-footer__brand,
    .smx-footer__contact{
        grid-column:auto;
    }

    .smx-footer__logo img{
        width:190px;
    }

    .smx-footer__description{
        font-size:14px;
        line-height:1.75;
    }

    .smx-footer__heading{
        margin-bottom:20px;
    }

    .smx-footer__contact-list{
        grid-template-columns:1fr;
    }
}

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

    .smx-footer__status-dot::before{
        animation:none;
    }

    .smx-footer__logo img,
    .smx-footer__links a,
    .smx-footer__links a::before,
    .smx-footer__links a svg{
        transition:none;
    }
}
/* =====================================================
   FOOTER PART 2A
   Social Icons + Contact Cards
===================================================== */

/* ==========================
   SOCIAL BUTTONS
========================== */

.smx-footer__social{
    position:relative;

    display:grid;
    place-items:center;

    width:46px;
    height:46px;

    border-radius:14px;
    border:1px solid rgba(95,110,255,.22);

    background:
        linear-gradient(
            145deg,
            rgba(26,34,78,.72),
            rgba(9,15,40,.82)
        );

    color:#8ca2ff;

    text-decoration:none;

    overflow:hidden;

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease,
        color .35s ease;
}

.smx-footer__social svg{
    width:19px;
    height:19px;
    stroke-width:2;
    transition:transform .35s ease;
}

.smx-footer__social::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.12),
            transparent
        );

    transform:translateX(-120%);
    transition:transform .7s ease;
}

.smx-footer__social:hover{

    transform:translateY(-5px);

    color:#fff;

    border-color:rgba(108,124,255,.62);

    background:
        linear-gradient(
            145deg,
            rgba(56,73,190,.42),
            rgba(22,28,82,.92)
        );

    box-shadow:
        0 15px 35px rgba(0,0,0,.28),
        0 0 28px rgba(89,102,255,.22);

}

.smx-footer__social:hover::before{

    transform:translateX(120%);

}

.smx-footer__social:hover svg{

    transform:scale(1.1);

}

.smx-footer__social:focus-visible{

    outline:2px solid #7b8cff;
    outline-offset:4px;

}

/* ==========================
   CONTACT CARDS
========================== */

.smx-footer__contact-item{

    --accent:#6d73ff;
    --accent-rgb:109,115,255;

    display:flex;
    align-items:center;
    gap:16px;

    padding:16px 18px;

    border-radius:18px;

    border:1px solid rgba(var(--accent-rgb),.22);

    background:
        linear-gradient(
            145deg,
            rgba(20,27,64,.72),
            rgba(8,13,36,.82)
        );

    text-decoration:none;

    transition:
        transform .35s ease,
        border-color .35s ease,
        background .35s ease,
        box-shadow .35s ease;

}

.smx-footer__contact-item:hover{

    transform:translateY(-5px);

    border-color:rgba(var(--accent-rgb),.6);

    background:
        linear-gradient(
            145deg,
            rgba(var(--accent-rgb),.16),
            rgba(8,13,36,.92)
        );

    box-shadow:
        0 18px 35px rgba(0,0,0,.25),
        0 0 22px rgba(var(--accent-rgb),.18);

}

.smx-footer__contact-icon{

    flex:0 0 auto;

    display:grid;
    place-items:center;

    width:54px;
    height:54px;

    border-radius:16px;

    background:
        linear-gradient(
            145deg,
            rgba(var(--accent-rgb),.28),
            rgba(var(--accent-rgb),.08)
        );

    border:1px solid rgba(var(--accent-rgb),.45);

    color:rgb(var(--accent-rgb));

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.smx-footer__contact-item:hover
.smx-footer__contact-icon{

    transform:scale(1.08);

    box-shadow:
        0 0 22px rgba(var(--accent-rgb),.26);

}

.smx-footer__contact-icon svg{

    width:24px;
    height:24px;

    stroke-width:2;

}

.smx-footer__contact-info{

    display:flex;
    flex-direction:column;
    gap:5px;

    min-width:0;

}

.smx-footer__contact-info strong{

    color:#fff;

    font-size:15px;
    font-weight:700;

}

.smx-footer__contact-info small{

    color:rgba(214,220,255,.62);

    font-size:13px;
    line-height:1.5;

}

/* ==========================
   CARD COLORS
========================== */

.smx-footer__contact-icon.discord{

    --accent-rgb:120,93,255;

}

.smx-footer__contact-icon.email{

    --accent-rgb:43,155,255;

}

.smx-footer__contact-icon.billing{

    --accent-rgb:45,226,162;

}

.smx-footer__contact-icon.response{

    --accent-rgb:255,184,0;

}
/* =====================================================
   SERVOMIX FOOTER — PART 2B
   Glow Effects, Shine, Hover Polish, Mobile Tweaks
===================================================== */

/* =====================================================
   SOCIAL BUTTON INNER GLOW
===================================================== */

.smx-footer__social::after{
    content:"";

    position:absolute;
    left:50%;
    bottom:-24px;

    width:34px;
    height:34px;

    border-radius:50%;

    background:rgba(95, 110, 255, .34);

    filter:blur(18px);

    transform:
        translateX(-50%)
        scale(.7);

    opacity:0;

    transition:
        opacity .35s ease,
        transform .35s ease;
}

.smx-footer__social:hover::after{
    opacity:1;

    transform:
        translateX(-50%)
        scale(1.15);
}

/* Individual social accent colors */

.smx-footer__social:nth-child(1){
    color:#8d7cff;
}

.smx-footer__social:nth-child(1):hover{
    border-color:rgba(120, 93, 255, .65);

    box-shadow:
        0 15px 35px rgba(0,0,0,.28),
        0 0 30px rgba(120, 93, 255, .22);
}

.smx-footer__social:nth-child(2){
    color:#7eb8ff;
}

.smx-footer__social:nth-child(2):hover{
    border-color:rgba(65, 156, 255, .65);

    box-shadow:
        0 15px 35px rgba(0,0,0,.28),
        0 0 30px rgba(65, 156, 255, .20);
}

.smx-footer__social:nth-child(3){
    color:#66d6ff;
}

.smx-footer__social:nth-child(3):hover{
    border-color:rgba(69, 202, 255, .62);

    box-shadow:
        0 15px 35px rgba(0,0,0,.28),
        0 0 30px rgba(69, 202, 255, .20);
}

.smx-footer__social:nth-child(4){
    color:#ff7087;
}

.smx-footer__social:nth-child(4):hover{
    border-color:rgba(255, 77, 106, .62);

    box-shadow:
        0 15px 35px rgba(0,0,0,.28),
        0 0 30px rgba(255, 77, 106, .18);
}

/* =====================================================
   CONTACT CARD POSITIONING
===================================================== */

.smx-footer__contact-item{
    position:relative;

    isolation:isolate;

    overflow:hidden;
}

.smx-footer__contact-item::before{
    content:"";

    position:absolute;
    top:0;
    left:-130%;

    z-index:-1;

    width:80%;
    height:100%;

    background:
        linear-gradient(
            110deg,
            transparent 0%,
            rgba(255,255,255,.04) 35%,
            rgba(255,255,255,.12) 50%,
            rgba(255,255,255,.04) 65%,
            transparent 100%
        );

    transform:skewX(-20deg);

    transition:left .8s ease;
}

.smx-footer__contact-item:hover::before{
    left:145%;
}

.smx-footer__contact-item::after{
    content:"";

    position:absolute;
    right:-40px;
    bottom:-52px;

    z-index:-2;

    width:110px;
    height:110px;

    border-radius:50%;

    background:
        rgba(var(--accent-rgb), .16);

    filter:blur(34px);

    opacity:.55;

    transition:
        opacity .35s ease,
        transform .35s ease;
}

.smx-footer__contact-item:hover::after{
    opacity:.9;
    transform:scale(1.2);
}

/* =====================================================
   PROPER ACCENT COLORS FOR FULL CONTACT CARDS
===================================================== */

.smx-footer__contact-item:has(.smx-footer__contact-icon.discord){
    --accent:#785dff;
    --accent-rgb:120, 93, 255;
}

.smx-footer__contact-item:has(.smx-footer__contact-icon.email){
    --accent:#2b9bff;
    --accent-rgb:43, 155, 255;
}

.smx-footer__contact-item:has(.smx-footer__contact-icon.billing){
    --accent:#2de2a2;
    --accent-rgb:45, 226, 162;
}

.smx-footer__contact-item:has(.smx-footer__contact-icon.response){
    --accent:#ffb800;
    --accent-rgb:255, 184, 0;
}

/* =====================================================
   CONTACT ICON GLOW RING
===================================================== */

.smx-footer__contact-icon{
    position:relative;
}

.smx-footer__contact-icon::before{
    content:"";

    position:absolute;
    inset:-1px;

    border-radius:inherit;

    background:
        linear-gradient(
            145deg,
            rgba(var(--accent-rgb), .55),
            transparent 45%,
            rgba(var(--accent-rgb), .18)
        );

    opacity:.25;

    pointer-events:none;

    transition:opacity .35s ease;
}

.smx-footer__contact-item:hover
.smx-footer__contact-icon::before{
    opacity:.6;
}

.smx-footer__contact-icon::after{
    content:"";

    position:absolute;
    inset:8px;

    border-radius:11px;

    background:
        radial-gradient(
            circle,
            rgba(var(--accent-rgb), .24),
            transparent 70%
        );

    filter:blur(6px);

    opacity:.45;

    pointer-events:none;

    transition:
        opacity .35s ease,
        transform .35s ease;
}

.smx-footer__contact-item:hover
.smx-footer__contact-icon::after{
    opacity:.9;
    transform:scale(1.2);
}

.smx-footer__contact-icon svg{
    position:relative;
    z-index:2;
}

/* =====================================================
   CONTACT TEXT POLISH
===================================================== */

.smx-footer__contact-info strong{
    transition:
        color .3s ease,
        text-shadow .3s ease;
}

.smx-footer__contact-item:hover
.smx-footer__contact-info strong{
    color:#ffffff;

    text-shadow:
        0 0 16px rgba(var(--accent-rgb), .22);
}

.smx-footer__contact-info small{
    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    transition:color .3s ease;
}

.smx-footer__contact-item:hover
.smx-footer__contact-info small{
    color:rgba(229, 233, 255, .82);
}

/* =====================================================
   CLICKABLE CONTACT CARD CURSOR
===================================================== */

a.smx-footer__contact-item{
    cursor:pointer;
}

div.smx-footer__contact-item{
    cursor:default;
}

/* =====================================================
   CONTACT CARD FOCUS STATE
===================================================== */

.smx-footer__contact-item:focus-visible{
    outline:2px solid rgba(var(--accent-rgb), .9);
    outline-offset:4px;
}

/* =====================================================
   SUBTLE FLOATING ANIMATION
===================================================== */

@keyframes smxFooterContactFloat{
    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-3px);
    }
}

@media (hover:hover) and (pointer:fine){

    .smx-footer__contact-item:nth-child(1){
        animation:
            smxFooterContactFloat
            5.8s
            ease-in-out
            infinite;
    }

    .smx-footer__contact-item:nth-child(2){
        animation:
            smxFooterContactFloat
            6.4s
            ease-in-out
            .5s
            infinite;
    }

    .smx-footer__contact-item:nth-child(3){
        animation:
            smxFooterContactFloat
            6.1s
            ease-in-out
            1s
            infinite;
    }

    .smx-footer__contact-item:nth-child(4){
        animation:
            smxFooterContactFloat
            6.8s
            ease-in-out
            1.4s
            infinite;
    }

    .smx-footer__contact-item:hover{
        animation-play-state:paused;
    }
}

/* =====================================================
   SOCIAL ICON RESPONSIVE TWEAKS
===================================================== */

@media (max-width:760px){

    .smx-footer__social{
        width:44px;
        height:44px;

        border-radius:13px;
    }

    .smx-footer__social svg{
        width:18px;
        height:18px;
    }

    .smx-footer__contact-item{
        min-height:88px;
    }
}

@media (max-width:520px){

    .smx-footer__socials{
        gap:9px;
    }

    .smx-footer__social{
        width:43px;
        height:43px;

        border-radius:12px;
    }

    .smx-footer__contact-item{
        gap:14px;

        min-height:auto;

        padding:15px 16px;

        border-radius:16px;
    }

    .smx-footer__contact-icon{
        width:50px;
        height:50px;

        border-radius:14px;
    }

    .smx-footer__contact-icon svg{
        width:22px;
        height:22px;
    }

    .smx-footer__contact-info strong{
        font-size:14px;
    }

    .smx-footer__contact-info small{
        font-size:12px;
    }
}

/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media (max-width:380px){

    .smx-footer__social{
        width:40px;
        height:40px;
    }

    .smx-footer__contact-item{
        padding:14px;
    }

    .smx-footer__contact-icon{
        width:46px;
        height:46px;
    }

    .smx-footer__contact-info small{
        white-space:normal;
    }
}

/* =====================================================
   REDUCED MOTION
===================================================== */

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

    .smx-footer__contact-item{
        animation:none !important;
    }

    .smx-footer__social,
    .smx-footer__social::before,
    .smx-footer__social::after,
    .smx-footer__social svg,
    .smx-footer__contact-item,
    .smx-footer__contact-item::before,
    .smx-footer__contact-item::after,
    .smx-footer__contact-icon,
    .smx-footer__contact-icon::before,
    .smx-footer__contact-icon::after,
    .smx-footer__contact-info strong,
    .smx-footer__contact-info small{
        transition:none !important;
    }
}
/* =====================================================
   SERVOMIX FOOTER — PART 3
   Bottom Bar, Legal Links, Benefits, Responsive Layout
===================================================== */

/* =====================================================
   FOOTER BOTTOM BAR
===================================================== */

.smx-footer__bottom{
    position:relative;

    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:28px;

    margin-top:58px;
    padding-top:26px;

    border-top:1px solid rgba(111, 127, 205, .14);
}

.smx-footer__bottom::before{
    content:"";

    position:absolute;
    top:-1px;
    left:50%;

    width:240px;
    height:1px;

    transform:translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(88, 113, 255, .68),
            rgba(139, 84, 255, .46),
            transparent
        );

    box-shadow:
        0 0 16px rgba(96, 94, 255, .20);
}

/* =====================================================
   BENEFITS
===================================================== */

.smx-footer__benefits{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;

    justify-self:start;

    color:rgba(195, 204, 238, .60);
    font-size:12px;
    font-weight:600;
    line-height:1.5;
}

.smx-footer__benefits span:not(.smx-footer__separator){
    display:inline-flex;
    align-items:center;
    gap:7px;

    white-space:nowrap;
}

.smx-footer__benefits svg{
    width:15px;
    height:15px;

    color:#55d9a6;
    stroke-width:2.2;

    filter:
        drop-shadow(0 0 7px rgba(74, 220, 163, .22));
}

.smx-footer__separator{
    display:block;

    width:3px;
    height:3px;

    border-radius:50%;

    background:rgba(134, 148, 207, .46);
}

/* =====================================================
   COPYRIGHT
===================================================== */

.smx-footer__copyright{
    margin:0;

    justify-self:center;

    color:rgba(184, 195, 230, .58);
    font-size:12px;
    font-weight:500;
    line-height:1.6;
    text-align:center;
    white-space:nowrap;
}

.smx-footer__copyright a{
    color:rgba(229, 233, 255, .86);
    font-weight:700;

    text-decoration:none;

    transition:
        color .25s ease,
        text-shadow .25s ease;
}

.smx-footer__copyright a:hover{
    color:#ffffff;

    text-shadow:
        0 0 14px rgba(103, 111, 255, .28);
}

/* =====================================================
   LEGAL LINKS
===================================================== */

.smx-footer__legal{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    flex-wrap:wrap;
    gap:12px;

    justify-self:end;
}

.smx-footer__legal a{
    color:rgba(187, 197, 231, .58);
    font-size:12px;
    font-weight:500;
    line-height:1.5;

    text-decoration:none;

    transition:
        color .25s ease,
        transform .25s ease;
}

.smx-footer__legal a:hover{
    color:#ffffff;
    transform:translateY(-1px);
}

.smx-footer__legal a:focus-visible,
.smx-footer__copyright a:focus-visible{
    outline:2px solid rgba(110, 125, 255, .85);
    outline-offset:4px;
    border-radius:4px;
}

/* =====================================================
   SUBTLE BOTTOM GLOW
===================================================== */

.smx-footer::after{
    content:"";

    position:absolute;
    left:50%;
    bottom:0;

    width:700px;
    height:140px;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(59,91,255,.10),
            transparent 72%
        );

    filter:blur(12px);

    pointer-events:none;
}

/* =====================================================
   LARGE TABLET
===================================================== */

@media (max-width:1280px){

    .smx-footer__bottom{
        grid-template-columns:1fr 1fr;
        gap:20px 32px;
    }

    .smx-footer__benefits{
        grid-column:1;
        grid-row:1;

        justify-self:start;
    }

    .smx-footer__legal{
        grid-column:2;
        grid-row:1;

        justify-self:end;
    }

    .smx-footer__copyright{
        grid-column:1 / -1;
        grid-row:2;

        justify-self:center;
    }
}

/* =====================================================
   TABLET
===================================================== */

@media (max-width:960px){

    .smx-footer__bottom{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:18px;

        margin-top:50px;
        padding-top:24px;
    }

    .smx-footer__benefits,
    .smx-footer__legal,
    .smx-footer__copyright{
        justify-self:auto;
    }

    .smx-footer__benefits,
    .smx-footer__legal{
        justify-content:center;
    }

    .smx-footer__copyright{
        white-space:normal;
    }
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width:760px){

    .smx-footer__bottom{
        margin-top:44px;
        gap:16px;
    }

    .smx-footer__benefits{
        gap:10px;

        font-size:11px;
    }

    .smx-footer__legal{
        gap:10px;
    }

    .smx-footer__legal a,
    .smx-footer__copyright{
        font-size:11px;
    }

    .smx-footer__bottom::before{
        width:180px;
    }
}

/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width:520px){

    .smx-footer__bottom{
        align-items:flex-start;

        margin-top:40px;
        padding-top:22px;
    }

    .smx-footer__benefits{
        justify-content:flex-start;
    }

    .smx-footer__legal{
        justify-content:flex-start;
    }

    .smx-footer__copyright{
        text-align:left;
    }

    .smx-footer__benefits span:not(.smx-footer__separator){
        white-space:normal;
    }
}

/* =====================================================
   VERY SMALL MOBILE
===================================================== */

@media (max-width:380px){

    .smx-footer__benefits{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
    }

    .smx-footer__benefits .smx-footer__separator{
        display:none;
    }

    .smx-footer__legal{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
    }

    .smx-footer__legal .smx-footer__separator{
        display:none;
    }
}

/* =====================================================
   REDUCED MOTION
===================================================== */

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

    .smx-footer__copyright a,
    .smx-footer__legal a{
        transition:none;
    }
}
/* =====================================================
   SERVOMIX FOOTER — PART 4
   Final Polish, Background Glows, Entrance Effects
===================================================== */

/* =====================================================
   DECORATIVE BACKGROUND GLOWS
===================================================== */

.smx-footer__container::before,
.smx-footer__container::after{
    content:"";

    position:absolute;
    z-index:-1;

    border-radius:50%;

    pointer-events:none;

    filter:blur(90px);
}

.smx-footer__container::before{
    top:40px;
    left:-180px;

    width:360px;
    height:360px;

    background:rgba(49, 112, 255, .08);
}

.smx-footer__container::after{
    top:80px;
    right:-190px;

    width:390px;
    height:390px;

    background:rgba(121, 70, 255, .07);
}

/* =====================================================
   COLUMN ENTRANCE ANIMATION
===================================================== */

@keyframes smxFooterReveal{
    from{
        opacity:0;
        transform:translateY(22px);
    }

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

.smx-footer__brand,
.smx-footer__column,
.smx-footer__contact{
    animation:
        smxFooterReveal
        .8s
        cubic-bezier(.22,.61,.36,1)
        both;
}

.smx-footer__brand{
    animation-delay:.04s;
}

.smx-footer__column:nth-of-type(2){
    animation-delay:.10s;
}

.smx-footer__column:nth-of-type(3){
    animation-delay:.16s;
}

.smx-footer__column:nth-of-type(4){
    animation-delay:.22s;
}

.smx-footer__contact{
    animation-delay:.28s;
}

/* =====================================================
   HEADING SHINE
===================================================== */

.smx-footer__heading{
    overflow:hidden;
}

.smx-footer__heading::before{
    content:"";

    position:absolute;
    top:0;
    left:-100%;

    width:60%;
    height:100%;

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

    transform:skewX(-20deg);

    transition:left .7s ease;
}

.smx-footer__column:hover
.smx-footer__heading::before,
.smx-footer__contact:hover
.smx-footer__heading::before{
    left:145%;
}

/* =====================================================
   BRAND LOGO AMBIENT GLOW
===================================================== */

.smx-footer__logo{
    position:relative;
}

.smx-footer__logo::before{
    content:"";

    position:absolute;
    left:50%;
    bottom:-10px;

    width:78%;
    height:28px;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(66, 107, 255, .20),
            transparent 72%
        );

    filter:blur(12px);

    opacity:.55;

    pointer-events:none;

    transition:
        opacity .35s ease,
        transform .35s ease;
}

.smx-footer__logo:hover::before{
    opacity:.9;

    transform:
        translateX(-50%)
        scale(1.08);
}

/* =====================================================
   STATUS HOVER
===================================================== */

.smx-footer__status{
    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}

.smx-footer__status:hover{
    transform:translateY(-2px);

    border-color:rgba(46, 229, 157, .40);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 10px 24px rgba(0,0,0,.18),
        0 0 24px rgba(46, 229, 157, .09);
}

/* =====================================================
   LINK ICON MICRO ANIMATION
===================================================== */

.smx-footer__links a:hover svg{
    animation:smxFooterIconPop .38s ease;
}

@keyframes smxFooterIconPop{
    0%{
        transform:scale(1);
    }

    45%{
        transform:scale(1.18) rotate(-4deg);
    }

    100%{
        transform:scale(1.08) rotate(0deg);
    }
}

/* =====================================================
   BOTTOM BAR REVEAL
===================================================== */

.smx-footer__bottom{
    animation:
        smxFooterBottomReveal
        .9s
        ease
        .34s
        both;
}

@keyframes smxFooterBottomReveal{
    from{
        opacity:0;
        transform:translateY(16px);
    }

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

/* =====================================================
   SUBTLE GRID TEXTURE
===================================================== */

.smx-footer{
    isolation:isolate;
}

.smx-footer > *{
    position:relative;
}

.smx-footer::selection{
    background:rgba(94, 105, 255, .42);
    color:#ffffff;
}

.smx-footer__container{
    background-image:
        linear-gradient(
            rgba(255,255,255,.012) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.012) 1px,
            transparent 1px
        );

    background-size:48px 48px;

    background-position:center top;
}

/* =====================================================
   TEXT SELECTION
===================================================== */

.smx-footer *::selection{
    background:rgba(103, 93, 255, .45);
    color:#ffffff;
}

/* =====================================================
   DESKTOP HOVER POLISH
===================================================== */

@media (hover:hover) and (pointer:fine){

    .smx-footer__brand,
    .smx-footer__column,
    .smx-footer__contact{
        transition:transform .35s ease;
    }

    .smx-footer__brand:hover,
    .smx-footer__column:hover,
    .smx-footer__contact:hover{
        transform:translateY(-3px);
    }
}

/* =====================================================
   MOBILE POLISH
===================================================== */

@media (max-width:760px){

    .smx-footer__container::before{
        left:-250px;
    }

    .smx-footer__container::after{
        right:-260px;
    }

    .smx-footer__container{
        background-size:40px 40px;
    }
}

@media (max-width:520px){

    .smx-footer__container::before,
    .smx-footer__container::after{
        opacity:.72;
    }

    .smx-footer__brand,
    .smx-footer__column,
    .smx-footer__contact{
        animation-delay:0s;
    }
}

/* =====================================================
   ACCESSIBILITY
===================================================== */

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

    .smx-footer__brand,
    .smx-footer__column,
    .smx-footer__contact,
    .smx-footer__bottom,
    .smx-footer__links a:hover svg{
        animation:none !important;
    }

    .smx-footer__brand,
    .smx-footer__column,
    .smx-footer__contact,
    .smx-footer__status,
    .smx-footer__logo::before,
    .smx-footer__heading::before{
        transition:none !important;
    }
}

/* =====================================================
   HIGH CONTRAST SUPPORT
===================================================== */

@media (prefers-contrast:more){

    .smx-footer__links a,
    .smx-footer__description,
    .smx-footer__contact-info small,
    .smx-footer__copyright,
    .smx-footer__legal a,
    .smx-footer__benefits{
        color:rgba(255,255,255,.82);
    }

    .smx-footer__social,
    .smx-footer__contact-item{
        border-color:rgba(255,255,255,.28);
    }
}
html,
body{
    margin:0 !important;
    padding:0 !important;
}

body{
    min-height:0 !important;
    height:auto !important;
    padding-bottom:0 !important;
    margin-bottom:0 !important;
}

.smx-footer{
    margin:0 !important;
    padding-bottom:24px !important;
}

.smx-footer:last-of-type{
    margin-bottom:0 !important;
}

body > .smx-footer:last-of-type{
    margin-bottom:0 !important;
}
/* ==========================================================
   NAVBAR — DESKTOP FIX
========================================================== */

.header {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    z-index: 1000;

    padding-top: 14px;
}


/* MAIN NAVBAR */

.navbar {
    width: min(1320px, calc(100% - 48px));

    min-height: 74px;

    margin: 0 auto;

    padding: 0 24px;

    display: flex;
    align-items: center;

    border: 1px solid #24354b;
    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #121c2b,
            #0d1624
        );

    box-sizing: border-box;
}


/* ==========================================================
   LOGO
========================================================== */

.logo {
    flex-shrink: 0;
}

.logo img {
    display: block;

    width: 185px;
    height: auto;
}


/* ==========================================================
   CENTER NAVIGATION
========================================================== */

.nav-links {
    margin: 0 auto;

    padding: 0;

    display: flex;
    align-items: center;

    gap: 55px;

    list-style: none;
}


.nav-links li {
    flex-shrink: 0;
}


.nav-links a {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #f3f6fa;

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;

    white-space: nowrap;
}


.nav-links a > svg:first-child {
    width: 20px;
    height: 20px;
}


.nav-links .arrow {
    width: 13px;
    height: 13px;
}


/* ==========================================================
   RIGHT SIDE
========================================================== */

.nav-right {
    flex-shrink: 0;

    display: flex;
    align-items: center;

    gap: 14px;
}


.discord-btn {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}


.discord-btn svg {
    width: 23px;
    height: 23px;
}


.language-btn {
    min-width: 82px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 11px;
}


.flag-icon {
    width: 25px;
}


.client-btn {
    height: 48px;

    padding: 0 21px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    white-space: nowrap;
}


/* ==========================================================
   MEDIUM DESKTOP
========================================================== */

@media (max-width: 1250px) {

    .nav-links {
        gap: 32px;
    }

    .logo img {
        width: 165px;
    }

}


/* ==========================================================
   SMALL DESKTOP
========================================================== */

@media (max-width: 1050px) {

    .navbar {
        padding: 0 18px;
    }

    .nav-links {
        gap: 20px;
    }

    .nav-links a {
        font-size: 13px;
    }

}
/* ==========================================================
   SERVOMIX — FINAL INDEX NAVBAR + ANNOUNCEMENT FIX
   KEEP AT VERY BOTTOM OF style.css
========================================================== */

/* Announcement bar from your actual index.html */
.announcement {
    position: fixed !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    min-height: 36px;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 10000 !important;
}


/* HEADER BELOW ANNOUNCEMENT */

.header {
    position: fixed !important;

    top: 36px !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 14px 0 0 !important;

    z-index: 9999 !important;

    background: transparent !important;

    pointer-events: none;
}


/* NAVBAR */

.header .navbar {
    position: relative !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;

    transform: none !important;

    width: min(1320px, calc(100% - 48px)) !important;

    margin: 0 auto !important;

    pointer-events: auto;
}


/* HERO MUST START BELOW FIXED TOP AREA */

body .hero {
    padding-top: 175px !important;
}


/* Hero background stays behind everything */

.hero-background {
    z-index: -1 !important;
}


/* Anchor links won't hide behind navbar */

body section {
    scroll-margin-top: 145px;
}


/* MOBILE */

@media (max-width: 768px) {

    .announcement {
        min-height: 34px;
    }

    .header {
        top: 34px !important;
        padding-top: 9px !important;
    }

    .header .navbar {
        width: calc(100% - 20px) !important;
    }

    body .hero {
        padding-top: 150px !important;
    }

}
/* =========================================================
   SERVOMIX — GAMES + SERVICES DROPDOWNS
   Add at bottom of existing style.css
========================================================= */


/* =========================================================
   COMMON DROPDOWN BASE
========================================================= */

.games-dropdown,
.services-dropdown {
    position: absolute;
    top: calc(100% + 16px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-8px);

    border: 1px solid rgba(54, 101, 145, 0.34);
    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(5, 17, 30, 0.985),
            rgba(3, 11, 21, 0.985)
        );

    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);

    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.42),
        0 0 40px rgba(42, 159, 255, 0.035);

    overflow: hidden;

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease;

    z-index: 99999;
}


/* invisible bridge between navbar and dropdown */

.games-dropdown::before,
.services-dropdown::before {
    content: "";

    position: absolute;

    top: -18px;
    left: 0;
    right: 0;

    height: 18px;
}


.games-nav:hover > .games-dropdown,
.services-nav:hover > .services-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}


/* =========================================================
   GAMES DROPDOWN
========================================================= */

.games-dropdown {
    left: -40px;

    width: 650px;
}


/* TOP */

.games-dropdown-head {
    min-height: 42px;

    padding: 0 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid rgba(45, 80, 110, .38);
}


.games-dropdown-head > span {
    color: #587087;

    font-size: 7px;
    font-weight: 850;

    letter-spacing: 1.7px;
}


.games-dropdown-head > a {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #758ca0;

    text-decoration: none;

    font-size: 7px;
    font-weight: 700;

    transition: color .18s ease;
}


.games-dropdown-head > a:hover {
    color: #39a5ff;
}


/* BODY */

.games-dropdown-main {
    min-height: 180px;

    display: grid;

    grid-template-columns:
        220px
        minmax(0, 1fr);
}


/* =========================================================
   GAME LIST
========================================================= */

.games-dropdown-list {
    padding: 10px;

    display: flex;
    flex-direction: column;

    gap: 3px;

    border-right: 1px solid rgba(45, 80, 110, .38);
}


.game-dd-item {
    position: relative;

    min-height: 38px;

    padding: 0 10px;

    display: flex;
    align-items: center;

    gap: 9px;

    border-radius: 8px;

    color: #8495a5;

    text-decoration: none;

    font-size: 10px;
    font-weight: 650;

    transition:
        color .18s ease,
        background .18s ease;
}


.game-dd-item:hover,
.game-dd-item.active {
    color: #f0f5f9;

    background: rgba(31, 112, 205, .08);
}


/* active line */

.game-dd-line {
    width: 3px;
    height: 18px;

    flex: 0 0 3px;

    border-radius: 99px;

    background: transparent;
}


.game-dd-item.active .game-dd-line {
    background: #2a9fff;

    box-shadow:
        0 0 10px rgba(42, 159, 255, .45);
}


/* game icons */

.game-dd-icon {
    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background: rgba(37, 96, 150, .11);

    font-size: 10px;
}


.game-dd-icon.minecraft {
    color: #45c77a;
}

.game-dd-icon.palworld {
    color: #42c4ef;
}

.game-dd-icon.hytale {
    color: #9478ff;
}

.game-dd-icon.fivem {
    color: #ff6631;
}


/* game-specific indicator */

.game-dd-item[data-game="minecraft"].active .game-dd-line {
    background: #45c77a;
}

.game-dd-item[data-game="palworld"].active .game-dd-line {
    background: #42c4ef;
}

.game-dd-item[data-game="hytale"].active .game-dd-line {
    background: #9478ff;
}

.game-dd-item[data-game="fivem"].active .game-dd-line {
    background: #ff6631;
}


/* =========================================================
   GAME PREVIEW
========================================================= */

.game-dd-preview {
    padding: 22px 24px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    transition:
        opacity .18s ease,
        transform .18s ease;
}


.game-dd-type {
    margin-bottom: 7px;

    color: #359fff;

    font-size: 7px;
    font-weight: 850;

    letter-spacing: 1.35px;
}


.game-dd-preview h3 {
    margin: 0;

    color: #f4f7fa;

    font-size: 22px;
    font-weight: 850;

    line-height: 1;

    letter-spacing: -.7px;
}


.game-dd-preview p {
    max-width: 300px;

    margin: 10px 0 18px;

    color: #7c8d9e;

    font-size: 9px;

    line-height: 1.6;
}


.game-dd-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;
}


/* PRICE */

.game-dd-price {
    display: flex;
    align-items: flex-end;

    gap: 3px;
}


.game-dd-price small {
    margin-right: 5px;
    margin-bottom: 3px;

    color: #586d81;

    font-size: 6px;
    font-weight: 850;

    letter-spacing: 1px;
}


.game-dd-price strong {
    color: #f4f7fa;

    font-size: 20px;
    line-height: 1;

    font-weight: 850;
}


.game-dd-price span {
    margin-bottom: 2px;

    color: #6e8092;

    font-size: 8px;
}


/* EXPLORE */

.game-dd-explore {
    min-height: 33px;

    padding: 0 12px;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    border: 1px solid rgba(42, 159, 255, .40);
    border-radius: 7px;

    background: rgba(25, 105, 195, .09);

    color: #359fff;

    text-decoration: none;

    font-size: 8px;
    font-weight: 800;

    transition:
        transform .18s ease,
        background .18s ease;
}


.game-dd-explore:hover {
    transform: translateY(-1px);

    background: rgba(30, 128, 226, .16);
}


/* =========================================================
   GAMES FOOTER
========================================================= */

.games-dropdown-footer {
    min-height: 42px;

    padding: 0 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-top: 1px solid rgba(45, 80, 110, .38);

    background: rgba(3, 11, 20, .60);

    color: #597086;

    font-size: 7px;
}


.games-dropdown-footer span {
    display: flex;
    align-items: center;

    gap: 6px;
}


.games-dropdown-footer i {
    color: #36d98b;

    font-size: 5px;

    filter:
        drop-shadow(
            0 0 5px rgba(54, 217, 139, .6)
        );
}


/* =========================================================
   SERVICES DROPDOWN
========================================================= */

.services-dropdown {
    left: -110px;

    width: 760px;
}


/* TOP */

.services-dropdown-head {
    min-height: 42px;

    padding: 0 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid rgba(45, 80, 110, .38);
}


.services-dropdown-head > span {
    color: #655d91;

    font-size: 7px;
    font-weight: 850;

    letter-spacing: 1.7px;
}


.services-dropdown-head > a {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #758ca0;

    text-decoration: none;

    font-size: 7px;
    font-weight: 700;
}


.services-dropdown-head > a:hover {
    color: #8f78ff;
}


/* BODY */

.services-dropdown-main {
    min-height: 255px;

    display: grid;

    grid-template-columns:
        230px
        minmax(0, 1fr);
}


/* =========================================================
   SERVICES LEFT LIST
========================================================= */

.services-dropdown-list {
    padding: 10px;

    display: flex;
    flex-direction: column;

    gap: 3px;

    border-right: 1px solid rgba(45, 80, 110, .38);
}


.service-dd-item {
    min-height: 42px;

    padding: 0 10px;

    display: flex;
    align-items: center;

    gap: 9px;

    border-radius: 8px;

    color: #8294a5;

    text-decoration: none;

    font-size: 9px;
    font-weight: 650;

    transition:
        color .18s ease,
        background .18s ease;
}


.service-dd-item:hover,
.service-dd-item.active {
    color: #eff4f8;

    background: rgba(116, 79, 255, .08);
}


/* indicator */

.service-dd-line {
    width: 3px;
    height: 18px;

    flex: 0 0 3px;

    border-radius: 99px;

    background: transparent;
}


.service-dd-item.active .service-dd-line {
    background: #8d73ff;

    box-shadow:
        0 0 10px rgba(141, 115, 255, .50);
}


/* icons */

.service-dd-icon {
    width: 27px;
    height: 27px;

    flex: 0 0 27px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    background: rgba(111, 80, 231, .10);

    color: #8d73ff;

    font-size: 10px;
}


/* =========================================================
   SERVICE CONSOLE
========================================================= */

.service-dd-console {
    padding: 13px;

    display: flex;
    flex-direction: column;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(116, 80, 236, .07),
            transparent 35%
        );

    transition:
        opacity .18s ease,
        transform .18s ease;
}


/* HEADER */

.service-dd-console-head {
    min-height: 35px;

    padding: 0 11px;

    display: flex;
    align-items: center;

    border-bottom: 1px solid rgba(44, 79, 109, .40);
}


.service-dd-dots {
    display: flex;

    gap: 4px;
}


.service-dd-dots span {
    width: 6px;
    height: 6px;

    display: block;

    border-radius: 50%;
}


.service-dd-dots span:nth-child(1) {
    background: #ff646c;
}

.service-dd-dots span:nth-child(2) {
    background: #ffc658;
}

.service-dd-dots span:nth-child(3) {
    background: #43d98f;
}


.service-dd-console-head > span {
    margin-left: 10px;

    color: #647b8f;

    font-size: 6px;
    font-weight: 850;

    letter-spacing: 1.1px;
}


.service-dd-console-head > i {
    margin-left: auto;

    color: #8b72ff;

    font-size: 9px;
}


/* BODY */

.service-dd-console-body {
    flex: 1;

    padding: 14px 12px 10px;
}


/* TERMINAL */

.service-dd-terminal {
    margin-bottom: 13px;

    color: #8999a8;

    font-family: Consolas, monospace;

    font-size: 8px;
}


.service-dd-terminal > span {
    color: #8772ff;
}


/* STATUS ROW */

.service-dd-status {
    min-height: 27px;

    margin-bottom: 6px;
    padding: 0 9px;

    display: grid;

    grid-template-columns:
        15px
        1fr
        auto;

    align-items: center;

    gap: 6px;

    border: 1px solid rgba(37, 71, 99, .42);
    border-radius: 6px;

    background: rgba(2, 11, 20, .58);
}


.service-dd-status i {
    color: #3eda91;

    font-size: 7px;
}


.service-dd-status > span {
    color: #7d8fa1;

    font-size: 7px;
}


.service-dd-status strong {
    color: #98a7b4;

    font-size: 7px;
    font-weight: 700;
}


/* =========================================================
   PROGRESS
========================================================= */

.service-dd-progress {
    margin-top: 12px;
}


.service-dd-progress > div:first-child {
    margin-bottom: 6px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}


.service-dd-progress > div:first-child span {
    color: #53697c;

    font-size: 6px;
    font-weight: 850;

    letter-spacing: 1px;
}


.service-dd-progress > div:first-child strong {
    color: #44dc93;

    font-size: 7px;
}


.service-dd-progress-track {
    height: 4px;

    overflow: hidden;

    border-radius: 999px;

    background: #102331;
}


.service-dd-progress-track > span {
    display: block;

    width: 100%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #795fff,
            #35d9a1
        );

    box-shadow:
        0 0 9px rgba(59, 219, 161, .20);

    transition:
        width .3s ease,
        background .2s ease;
}


/* =========================================================
   READY BOX
========================================================= */

.service-dd-ready {
    min-height: 47px;

    margin-top: 12px;
    padding: 0 10px;

    display: flex;
    align-items: center;

    gap: 8px;

    border: 1px solid rgba(44, 111, 83, .44);
    border-radius: 8px;

    background:
        linear-gradient(
            90deg,
            rgba(11, 49, 40, .28),
            rgba(5, 21, 25, .35)
        );
}


.service-dd-online {
    width: 7px;
    height: 7px;

    flex: 0 0 7px;

    border-radius: 50%;

    background: #3ddb91;

    box-shadow:
        0 0 8px rgba(61, 219, 145, .52);
}


.service-dd-ready > div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}


.service-dd-ready small {
    color: #526c68;

    font-size: 5px;

    letter-spacing: .8px;
}


.service-dd-ready strong {
    color: #43dd94;

    font-size: 7px;
}


.service-dd-system {
    margin-left: auto;

    color: #7f918e;

    font-size: 6px;
}


/* =========================================================
   SERVICES FOOTER
========================================================= */

.services-dropdown-footer {
    min-height: 42px;

    padding: 0 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-top: 1px solid rgba(45, 80, 110, .38);

    background: rgba(3, 11, 20, .60);

    color: #597086;

    font-size: 7px;
}


.services-dropdown-footer span {
    display: flex;
    align-items: center;

    gap: 6px;
}


.services-dropdown-footer i {
    color: #36d98b;

    font-size: 5px;

    filter:
        drop-shadow(
            0 0 5px rgba(54, 217, 139, .6)
        );
}


/* =========================================================
   NAVBAR ARROW WHEN OPEN
========================================================= */

.games-nav:hover > a .arrow,
.services-nav:hover > a .arrow {
    transform: rotate(180deg);
}


/* =========================================================
   MAKE SURE OLD NAVBAR DOESN'T CLIP DROPDOWNS
========================================================= */

.navbar,
.nav-links,
.nav-links > li {
    overflow: visible !important;
}


/* =========================================================
   LAPTOP SAFETY
========================================================= */

@media (max-width: 1150px) {

    .games-dropdown {
        left: -80px;

        width: 620px;
    }


    .services-dropdown {
        left: -180px;

        width: 720px;
    }

}


/* =========================================================
   SMALL SCREENS
========================================================= */

@media (max-width: 850px) {

    .games-dropdown,
    .services-dropdown {
        display: none;
    }

}
/* =========================================================
   DROPDOWN HOVER FIX
   PASTE AT VERY BOTTOM OF CSS
========================================================= */


/* Parent must hold dropdown correctly */
.games-nav,
.services-nav {
    position: relative !important;
    overflow: visible !important;
}


/* Make sure navbar doesn't cut dropdown */
.navbar,
.nav-links,
.nav-links > li {
    overflow: visible !important;
}


/* Move dropdown closer to navbar button */
.games-dropdown,
.services-dropdown {
    top: calc(100% + 5px) !important;
}


/* ---------------------------------------------------------
   INVISIBLE HOVER BRIDGE
--------------------------------------------------------- */

.games-nav::after,
.services-nav::after {
    content: "";

    position: absolute;

    top: 100%;
    left: -30px;
    right: -30px;

    height: 18px;

    background: transparent;

    z-index: 99998;
}


/* ---------------------------------------------------------
   GAMES — KEEP OPEN
--------------------------------------------------------- */

.games-nav:hover > .games-dropdown,
.games-nav:focus-within > .games-dropdown,
.games-dropdown:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: translateY(0) !important;
}


/* ---------------------------------------------------------
   SERVICES — KEEP OPEN
--------------------------------------------------------- */

.services-nav:hover > .services-dropdown,
.services-nav:focus-within > .services-dropdown,
.services-dropdown:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;

    transform: translateY(0) !important;
}


/* ---------------------------------------------------------
   SMALL DELAY BEFORE CLOSING
   Gives mouse enough time to enter dropdown
--------------------------------------------------------- */

.games-dropdown,
.services-dropdown {
    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility 0s linear .15s !important;
}


.games-nav:hover > .games-dropdown,
.games-nav:focus-within > .games-dropdown,
.services-nav:hover > .services-dropdown,
.services-nav:focus-within > .services-dropdown,
.games-dropdown:hover,
.services-dropdown:hover {
    transition-delay: 0s !important;
}


/* ---------------------------------------------------------
   ARROW
--------------------------------------------------------- */

.games-nav:hover > a .arrow,
.games-nav:focus-within > a .arrow,
.services-nav:hover > a .arrow,
.services-nav:focus-within > a .arrow {
    transform: rotate(180deg);
}
/* =========================================================
   SERVOMIX GAMES DROPDOWN — COMPACT PREMIUM FIX
   PASTE AT VERY BOTTOM
========================================================= */

.games-dropdown {
    width: 540px !important;
    min-height: 0 !important;

    left: -35px !important;
    top: calc(100% + 7px) !important;

    border: 1px solid rgba(72, 112, 150, .32) !important;
    border-radius: 13px !important;

    /* IMPORTANT: opaque so page text doesn't show through */
    background: #06111e !important;

    box-shadow:
        0 20px 55px rgba(0, 0, 0, .48),
        0 0 0 1px rgba(35, 117, 190, .03) !important;

    overflow: hidden !important;
}


/* =========================================================
   TOP BAR
========================================================= */

.games-dropdown-head {
    min-height: 38px !important;
    height: 38px !important;

    padding: 0 14px !important;

    background: #071522 !important;

    border-bottom:
        1px solid rgba(65, 102, 133, .25) !important;
}


.games-dropdown-head > span {
    font-size: 6px !important;
    font-weight: 800 !important;

    letter-spacing: 1.5px !important;

    color: #60798d !important;
}


.games-dropdown-head > a {
    font-size: 6px !important;

    color: #708496 !important;
}


/* =========================================================
   MAIN AREA
========================================================= */

.games-dropdown-main {
    display: grid !important;

    grid-template-columns:
        180px
        1fr !important;

    min-height: 180px !important;

    background: #06111e !important;
}


/* =========================================================
   LEFT SIDE
========================================================= */

.games-dropdown-list {
    padding: 8px !important;

    gap: 2px !important;

    background: #071522 !important;

    border-right:
        1px solid rgba(65, 102, 133, .24) !important;
}


/* GAME ROW */

.game-dd-item {
    min-height: 38px !important;
    height: 38px !important;

    padding: 0 9px !important;

    gap: 8px !important;

    border-radius: 7px !important;

    font-size: 9px !important;
    font-weight: 650 !important;

    color: #9aabba !important;

    background: transparent !important;
}


/* HOVER */

.game-dd-item:hover {
    color: #ffffff !important;

    background:
        rgba(28, 116, 196, .08) !important;
}


/* ACTIVE */

.game-dd-item.active {
    color: #ffffff !important;

    background:
        linear-gradient(
            90deg,
            rgba(24, 125, 215, .14),
            rgba(24, 125, 215, .05)
        ) !important;
}


/* ACTIVE LINE */

.game-dd-line {
    width: 2px !important;
    height: 17px !important;

    flex: 0 0 2px !important;
}


.game-dd-item.active .game-dd-line {
    background: #35d9a1 !important;

    box-shadow:
        0 0 7px rgba(53, 217, 161, .45) !important;
}


/* =========================================================
   GAME ICON
========================================================= */

.game-dd-icon {
    width: 26px !important;
    height: 26px !important;

    flex: 0 0 26px !important;

    border-radius: 6px !important;

    background: #0a2033 !important;

    font-size: 9px !important;
}


/* =========================================================
   RIGHT PREVIEW
========================================================= */

.game-dd-preview {
    min-width: 0 !important;

    padding: 24px 22px 18px !important;

    justify-content: center !important;

    background:
        radial-gradient(
            circle at 100% 50%,
            rgba(26, 119, 205, .07),
            transparent 55%
        ),
        #06111e !important;
}


/* SMALL LABEL */

.game-dd-type {
    margin: 0 0 6px !important;

    color: #3aa8ff !important;

    font-size: 6px !important;
    font-weight: 800 !important;

    letter-spacing: 1.15px !important;
}


/* TITLE */

.game-dd-preview h3 {
    margin: 0 !important;

    color: #f5f8fb !important;

    font-size: 18px !important;
    font-weight: 800 !important;

    line-height: 1.1 !important;

    letter-spacing: -.35px !important;
}


/* DESCRIPTION */

.game-dd-preview p {
    max-width: 260px !important;

    margin: 7px 0 18px !important;

    color: #75899b !important;

    font-size: 7.5px !important;

    line-height: 1.5 !important;
}


/* =========================================================
   BOTTOM PRICE + EXPLORE
========================================================= */

.game-dd-bottom {
    width: 100% !important;

    display: flex !important;

    align-items: center !important;
    justify-content: space-between !important;

    gap: 15px !important;
}


/* PRICE */

.game-dd-price {
    display: flex !important;

    align-items: flex-end !important;

    gap: 3px !important;
}


.game-dd-price small {
    margin: 0 5px 2px 0 !important;

    color: #536b7e !important;

    font-size: 5px !important;

    letter-spacing: 1px !important;
}


.game-dd-price strong {
    color: #ffffff !important;

    font-size: 17px !important;
    font-weight: 800 !important;

    line-height: 1 !important;
}


.game-dd-price span {
    margin-bottom: 1px !important;

    color: #607588 !important;

    font-size: 6px !important;
}


/* =========================================================
   EXPLORE BUTTON
========================================================= */

.game-dd-explore {
    min-height: 30px !important;
    height: 30px !important;

    padding: 0 12px !important;

    gap: 6px !important;

    border:
        1px solid rgba(45, 155, 255, .48) !important;

    border-radius: 6px !important;

    background:
        rgba(29, 118, 199, .07) !important;

    color: #dbeeff !important;

    font-size: 7px !important;
    font-weight: 700 !important;
}


.game-dd-explore:hover {
    background:
        rgba(35, 139, 230, .16) !important;

    border-color:
        rgba(55, 170, 255, .72) !important;

    transform: translateY(-1px) !important;
}


/* =========================================================
   FOOTER
========================================================= */

.games-dropdown-footer {
    min-height: 32px !important;
    height: 32px !important;

    padding: 0 13px !important;

    background: #050f1a !important;

    border-top:
        1px solid rgba(65, 102, 133, .24) !important;

    color: #536a7c !important;

    font-size: 5.5px !important;
}


/* Green status dot */

.games-dropdown-footer i {
    font-size: 4px !important;

    color: #36da91 !important;
}


/* =========================================================
   IMPORTANT — NO PAGE CONTENT SHOWING THROUGH
========================================================= */

.games-dropdown,
.games-dropdown-main,
.games-dropdown-list,
.game-dd-preview,
.games-dropdown-head,
.games-dropdown-footer {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}


/* =========================================================
   KEEP DROPDOWN USABLE
========================================================= */

.games-nav {
    position: relative !important;

    overflow: visible !important;
}


.games-nav::after {
    content: "";

    position: absolute;

    top: 100%;

    left: -25px;
    right: -25px;

    height: 14px;

    background: transparent;

    z-index: 99998;
}


.games-nav:hover > .games-dropdown,
.games-nav:focus-within > .games-dropdown,
.games-dropdown:hover {
    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

    transform: translateY(0) !important;
}
/* DROPDOWN ICON FIX */

.game-dd-icon i,
.service-dd-icon i {
    display: inline-block !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

.game-dd-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* individual colors */

.game-dd-icon.minecraft i {
    color: #45d483 !important;
}

.game-dd-icon.palworld i {
    color: #45bfff !important;
}

.game-dd-icon.hytale i {
    color: #9a7cff !important;
}

.game-dd-icon.fivem i {
    color: #ff6435 !important;
}
/* =========================================================
   SERVOMIX HERO LAUNCHER — FIRST VIEW
========================================================= */

.hero-launcher {
    width: 100%;
    max-width: 560px;

    background:
        linear-gradient(
            145deg,
            rgba(17, 30, 52, 0.98),
            rgba(8, 17, 32, 0.98)
        );

    border: 1px solid rgba(83, 125, 190, 0.28);
    border-radius: 24px;

    overflow: hidden;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
}


/* =========================================================
   HEADER
========================================================= */

.launcher-top {
    min-height: 92px;

    padding: 24px 28px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid rgba(87, 117, 160, 0.18);
}


.launcher-top h3 {
    margin: 0 0 4px;

    color: #ffffff;

    font-size: 20px;
    font-weight: 700;

    letter-spacing: -0.4px;
}


.launcher-top p {
    margin: 0;

    color: #a0aec3;

    font-size: 14px;
}


/* =========================================================
   ONLINE STATUS
========================================================= */

.launcher-online {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 9px 14px;

    color: #62e6a5;

    font-size: 12px;
    font-weight: 600;

    border: 1px solid rgba(46, 210, 143, 0.2);
    border-radius: 999px;

    background: rgba(30, 185, 120, 0.08);
}


.launcher-online span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #35e99a;

    box-shadow:
        0 0 0 4px rgba(53, 233, 154, 0.08),
        0 0 12px rgba(53, 233, 154, 0.65);
}


/* =========================================================
   OPTIONS WRAPPER
========================================================= */

.launcher-options {
    padding: 26px;

    display: flex;
    flex-direction: column;

    gap: 14px;
}


/* =========================================================
   OPTION
========================================================= */

.launcher-option {
    position: relative;

    width: 100%;
    min-height: 128px;

    padding: 20px 22px;

    display: grid;

    grid-template-columns:
        72px
        1fr
        38px;

    align-items: center;

    gap: 18px;

    text-align: left;

    color: inherit;

    cursor: pointer;

    border: 1px solid rgba(91, 124, 174, 0.22);
    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(27, 42, 67, 0.78),
            rgba(18, 30, 50, 0.6)
        );

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease;
}


.launcher-option::before {
    content: "";

    position: absolute;

    left: 0;
    top: 24px;
    bottom: 24px;

    width: 2px;

    border-radius: 0 4px 4px 0;

    opacity: 0;

    transition: opacity 0.22s ease;
}


/* =========================================================
   ICON
========================================================= */

.launcher-option-icon {
    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 16px;

    font-size: 22px;

    transition:
        transform 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease;
}


/* GAME */

.game-option .launcher-option-icon {
    color: #4c8dff;

    background:
        linear-gradient(
            145deg,
            rgba(54, 111, 255, 0.18),
            rgba(60, 68, 255, 0.09)
        );

    border: 1px solid rgba(72, 130, 255, 0.3);
}


.game-option::before {
    background: #4388ff;

    box-shadow: 0 0 14px rgba(67, 136, 255, 0.7);
}


/* CLOUD */

.cloud-option .launcher-option-icon {
    color: #9a6cff;

    background:
        linear-gradient(
            145deg,
            rgba(126, 80, 255, 0.17),
            rgba(89, 72, 255, 0.08)
        );

    border: 1px solid rgba(144, 99, 255, 0.28);
}


.cloud-option::before {
    background: #9668ff;

    box-shadow: 0 0 14px rgba(150, 104, 255, 0.65);
}


/* =========================================================
   CONTENT
========================================================= */

.launcher-option-content {
    min-width: 0;
}


.launcher-number {
    display: block;

    margin-bottom: 5px;

    color: #568fff;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.4px;
}


.cloud-option .launcher-number {
    color: #9a6cff;
}


.launcher-option-content h4 {
    margin: 0 0 7px;

    color: #f5f8ff;

    font-size: 19px;
    font-weight: 700;

    letter-spacing: -0.3px;
}


.launcher-option-content p {
    margin: 0;

    color: #8999b0;

    font-size: 13px;
    font-weight: 400;

    line-height: 1.55;
}


/* =========================================================
   ARROW
========================================================= */

.launcher-arrow {
    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    color: #72849d;

    font-size: 14px;

    transition:
        transform 0.22s ease,
        color 0.22s ease,
        background 0.22s ease;
}


/* =========================================================
   GAME HOVER
========================================================= */

.game-option:hover {
    transform: translateY(-2px);

    border-color: rgba(68, 137, 255, 0.55);

    background:
        linear-gradient(
            135deg,
            rgba(31, 55, 91, 0.92),
            rgba(17, 31, 54, 0.82)
        );

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.18),
        0 0 25px rgba(52, 112, 255, 0.05);
}


.game-option:hover::before {
    opacity: 1;
}


.game-option:hover .launcher-option-icon {
    transform: scale(1.04);

    background: rgba(55, 112, 255, 0.2);
}


.game-option:hover .launcher-arrow {
    color: #5795ff;

    background: rgba(65, 132, 255, 0.08);

    transform: translateX(3px);
}


/* =========================================================
   CLOUD HOVER
========================================================= */

.cloud-option:hover {
    transform: translateY(-2px);

    border-color: rgba(145, 94, 255, 0.48);

    background:
        linear-gradient(
            135deg,
            rgba(43, 42, 84, 0.86),
            rgba(20, 29, 53, 0.82)
        );

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.18),
        0 0 25px rgba(129, 82, 255, 0.05);
}


.cloud-option:hover::before {
    opacity: 1;
}


.cloud-option:hover .launcher-option-icon {
    transform: scale(1.04);

    background: rgba(125, 83, 255, 0.18);
}


.cloud-option:hover .launcher-arrow {
    color: #a274ff;

    background: rgba(144, 92, 255, 0.08);

    transform: translateX(3px);
}


/* =========================================================
   FOOTER
========================================================= */

.launcher-footer {
    min-height: 54px;

    padding: 0 28px;

    display: flex;
    align-items: center;

    gap: 10px;

    border-top: 1px solid rgba(87, 117, 160, 0.16);

    color: #687b94;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


.launcher-footer i {
    color: #4c8cff;

    font-size: 12px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .hero-launcher {
        max-width: 520px;
    }

}


@media (max-width: 700px) {

    .hero-launcher {
        border-radius: 18px;
    }


    .launcher-top {
        min-height: 78px;

        padding: 19px;
    }


    .launcher-top h3 {
        font-size: 17px;
    }


    .launcher-options {
        padding: 16px;
    }


    .launcher-option {
        min-height: 105px;

        grid-template-columns:
            54px
            1fr
            28px;

        gap: 12px;

        padding: 16px;
    }


    .launcher-option-icon {
        width: 50px;
        height: 50px;

        border-radius: 13px;

        font-size: 18px;
    }


    .launcher-option-content h4 {
        font-size: 16px;
    }


    .launcher-option-content p {
        font-size: 11px;
    }


    .launcher-footer {
        padding: 0 18px;
    }

}
/* REMOVE LIGHT OUTER OUTLINE */

.hero-launcher {
    border: 1px solid rgba(255, 255, 255, 0.045) !important;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.018) !important;
}
/* REMOVE BACKGROUND HORIZONTAL LINE */

.hero::before,
.hero::after,
.hero-section::before,
.hero-section::after {
    border-top: none !important;
    border-bottom: none !important;
}
/* REMOVE HERO HORIZONTAL DIVIDER LINE */

.hero::after {
    display: none !important;
    content: none !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
}
/* =========================================
   REMOVE OLD HERO-RIGHT OUTLINE / PANEL
========================================= */

.hero-right {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.hero-right::before,
.hero-right::after {
    display: none !important;
    content: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}
.hero-right {
    overflow: visible !important;
}
.hero-launcher {
    transition:
        opacity .22s ease,
        transform .22s ease;
}

.hero-launcher.launcher-switching {
    opacity: .35;
    transform: scale(.985);
}
/* =========================================================
   SERVOMIX LAUNCHER — GAME SERVERS VIEW
========================================================= */

.launcher-games-view {
    display: none;
    padding: 22px 26px 24px;
}


/* =========================================================
   GAME VIEW HEADER
========================================================= */

.launcher-games-head {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 14px;

    margin-bottom: 20px;
}


/* BACK BUTTON */

.launcher-back-btn {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid rgba(91, 124, 174, 0.22);
    border-radius: 12px;

    background: rgba(21, 35, 57, 0.7);

    color: #8294ad;

    cursor: pointer;

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.launcher-back-btn:hover {
    color: #ffffff;

    border-color: rgba(76, 141, 255, 0.5);

    background: rgba(57, 108, 207, 0.13);

    transform: translateX(-2px);
}


/* TITLE */

.launcher-games-title span {
    display: block;

    margin-bottom: 3px;

    color: #568fff;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.4px;
}

.launcher-games-title h4 {
    margin: 0;

    color: #f5f8ff;

    font-size: 18px;
    font-weight: 700;

    letter-spacing: -0.3px;
}


/* LIVE BADGE */

.launcher-games-live {
    display: flex;
    align-items: center;
    gap: 7px;

    padding: 7px 11px;

    border: 1px solid rgba(53, 233, 154, 0.15);
    border-radius: 999px;

    background: rgba(35, 193, 128, 0.06);

    color: #64dca5;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .7px;
}

.launcher-games-live > span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #35e99a;

    box-shadow: 0 0 8px rgba(53, 233, 154, .65);
}


/* =========================================================
   GAME LIST
========================================================= */

.launcher-game-list {
    display: flex;
    flex-direction: column;

    gap: 9px;
}


/* =========================================================
   GAME ROW
========================================================= */

.launcher-game-item {
    position: relative;

    width: 100%;
    min-height: 72px;

    display: grid;
    grid-template-columns: 48px 1fr 30px;
    align-items: center;

    gap: 14px;

    padding: 11px 14px;

    text-align: left;

    font-family: inherit;

    border: 1px solid rgba(91, 124, 174, 0.17);
    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(26, 41, 65, 0.68),
            rgba(16, 29, 48, 0.55)
        );

    color: inherit;

    cursor: pointer;

    overflow: hidden;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


/* LEFT ACCENT */

.launcher-game-item::before {
    content: "";

    position: absolute;

    left: 0;
    top: 17px;
    bottom: 17px;

    width: 2px;

    border-radius: 0 3px 3px 0;

    opacity: 0;

    transition: opacity .2s ease;
}


/* =========================================================
   GAME ICON
========================================================= */

.launcher-game-icon {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    font-size: 16px;

    transition:
        transform .2s ease,
        background .2s ease;
}


/* MINECRAFT */

.launcher-game-item.minecraft .launcher-game-icon {
    color: #5de69a;

    background: rgba(55, 201, 122, .09);

    border: 1px solid rgba(71, 213, 137, .18);
}

.launcher-game-item.minecraft::before {
    background: #50db8f;

    box-shadow: 0 0 12px rgba(80, 219, 143, .6);
}


/* PALWORLD */

.launcher-game-item.palworld .launcher-game-icon {
    color: #57bfff;

    background: rgba(64, 169, 255, .09);

    border: 1px solid rgba(73, 179, 255, .18);
}

.launcher-game-item.palworld::before {
    background: #4eb8ff;

    box-shadow: 0 0 12px rgba(78, 184, 255, .6);
}


/* HYTALE */

.launcher-game-item.hytale .launcher-game-icon {
    color: #9c82ff;

    background: rgba(126, 93, 255, .09);

    border: 1px solid rgba(143, 110, 255, .18);
}

.launcher-game-item.hytale::before {
    background: #9477ff;

    box-shadow: 0 0 12px rgba(148, 119, 255, .6);
}


/* FIVEM */

.launcher-game-item.fivem .launcher-game-icon {
    color: #ff9360;

    background: rgba(255, 116, 63, .08);

    border: 1px solid rgba(255, 126, 75, .18);
}

.launcher-game-item.fivem::before {
    background: #ff8350;

    box-shadow: 0 0 12px rgba(255, 131, 80, .6);
}


/* =========================================================
   GAME TEXT
========================================================= */

.launcher-game-info {
    min-width: 0;
}

.launcher-game-info h5 {
    margin: 0 0 4px;

    color: #f2f6ff;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: -.1px;
}

.launcher-game-info p {
    margin: 0;

    color: #7f90a8;

    font-size: 10px;
    font-weight: 400;

    line-height: 1.4;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================================
   RIGHT ARROW
========================================================= */

.launcher-game-arrow {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    color: #657890;

    font-size: 10px;

    transition:
        color .2s ease,
        background .2s ease,
        transform .2s ease;
}


/* =========================================================
   HOVER
========================================================= */

.launcher-game-item:hover {
    transform: translateX(3px);

    border-color: rgba(79, 137, 230, .34);

    background:
        linear-gradient(
            135deg,
            rgba(31, 51, 81, .88),
            rgba(18, 33, 56, .78)
        );

    box-shadow: 0 10px 25px rgba(0, 0, 0, .12);
}

.launcher-game-item:hover::before {
    opacity: 1;
}

.launcher-game-item:hover .launcher-game-icon {
    transform: scale(1.04);
}

.launcher-game-item:hover .launcher-game-arrow {
    color: #73a5ff;

    background: rgba(70, 132, 245, .08);

    transform: translateX(2px);
}


/* =========================================================
   VIEW SWITCH ANIMATION
========================================================= */

.hero-launcher {
    transition:
        opacity .2s ease,
        transform .2s ease;
}

.hero-launcher.launcher-switching {
    opacity: .35;
    transform: scale(.985);
}


/* =========================================================
   WHEN GAME VIEW IS ACTIVE
   JS WILL ADD: .show-games
========================================================= */

.hero-launcher.show-games .launcher-top,
.hero-launcher.show-games .launcher-options {
    display: none;
}

.hero-launcher.show-games .launcher-games-view {
    display: block;

    animation: launcherGameEnter .28s ease both;
}


/* We keep the existing launcher footer */
.hero-launcher.show-games .launcher-footer {
    display: flex;
}


@keyframes launcherGameEnter {

    from {
        opacity: 0;
        transform: translateX(12px);
    }

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

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 700px) {

    .launcher-games-view {
        padding: 18px 16px;
    }

    .launcher-games-head {
        grid-template-columns: 38px 1fr auto;

        gap: 10px;

        margin-bottom: 16px;
    }

    .launcher-back-btn {
        width: 36px;
        height: 36px;
    }

    .launcher-games-title h4 {
        font-size: 16px;
    }

    .launcher-game-item {
        min-height: 66px;

        grid-template-columns: 42px 1fr 26px;

        gap: 11px;

        padding: 10px 12px;
    }

    .launcher-game-icon {
        width: 40px;
        height: 40px;

        font-size: 14px;
    }

    .launcher-game-info h5 {
        font-size: 13px;
    }

    .launcher-game-info p {
        font-size: 9px;
    }

}
/* =========================================================
   SERVOMIX LAUNCHER — MINECRAFT SERIES VIEW
========================================================= */

.launcher-minecraft-view {
    display: none;

    padding: 22px 26px 24px;
}


/* =========================================================
   HEADER
========================================================= */

.launcher-minecraft-head {
    display: grid;

    grid-template-columns:
        42px
        1fr
        auto;

    align-items: center;

    gap: 14px;

    margin-bottom: 20px;
}


/* TITLE */

.launcher-minecraft-title span {
    display: block;

    margin-bottom: 3px;

    color: #59d58e;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.4px;
}


.launcher-minecraft-title h4 {
    margin: 0;

    color: #f5f8ff;

    font-size: 18px;
    font-weight: 700;

    letter-spacing: -0.3px;
}


/* SERIES BADGE */

.launcher-minecraft-live {
    display: flex;
    align-items: center;

    gap: 7px;

    padding: 7px 11px;

    border: 1px solid rgba(71, 218, 143, 0.17);
    border-radius: 999px;

    background: rgba(43, 193, 125, 0.06);

    color: #62dca0;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .7px;
}


.launcher-minecraft-live > span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #41e596;

    box-shadow:
        0 0 8px rgba(65, 229, 150, .6);
}


/* =========================================================
   SERIES LIST
========================================================= */

.launcher-series-list {
    display: flex;
    flex-direction: column;

    gap: 11px;
}


/* =========================================================
   SERIES ROW
========================================================= */

.launcher-series-item {
    position: relative;

    width: 100%;
    min-height: 92px;

    display: grid;

    grid-template-columns:
        66px
        1fr
        auto
        30px;

    align-items: center;

    gap: 14px;

    padding: 12px 14px;

    border: 1px solid rgba(91, 124, 174, .18);
    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(27, 42, 67, .72),
            rgba(17, 29, 49, .58)
        );

    color: inherit;

    text-align: left;

    font-family: inherit;

    cursor: pointer;

    overflow: hidden;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


/* LEFT ACCENT */

.launcher-series-item::before {
    content: "";

    position: absolute;

    left: 0;
    top: 20px;
    bottom: 20px;

    width: 2px;

    border-radius: 0 4px 4px 0;

    opacity: 0;

    transition: opacity .2s ease;
}


/* =========================================================
   IMAGE BOX
========================================================= */

.launcher-series-image {
    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    overflow: hidden;

    background: rgba(7, 17, 31, .7);

    border: 1px solid rgba(87, 123, 170, .16);

    transition:
        transform .2s ease,
        border-color .2s ease;
}


.launcher-series-image img {
    width: 54px;
    height: 54px;

    object-fit: contain;

    display: block;

    transition: transform .22s ease;
}


/* =========================================================
   SERIES INFO
========================================================= */

.launcher-series-info {
    min-width: 0;
}


.launcher-series-label {
    display: block;

    margin-bottom: 3px;

    color: #627a91;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1px;
}


.launcher-series-info h5 {
    margin: 0 0 4px;

    color: #f4f7fc;

    font-size: 14px;
    font-weight: 700;
}


.launcher-series-info p {
    margin: 0;

    color: #7d8fa7;

    font-size: 9px;

    line-height: 1.45;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =========================================================
   PRICE
========================================================= */

.launcher-series-price {
    min-width: 68px;

    display: grid;

    grid-template-columns:
        auto
        auto;

    align-items: end;

    justify-content: end;

    column-gap: 3px;
}


.launcher-series-price small {
    grid-column: 1 / -1;

    margin-bottom: 3px;

    color: #5f7389;

    font-size: 6px;
    font-weight: 800;

    letter-spacing: 1px;

    text-align: right;
}


.launcher-series-price strong {
    color: #ffffff;

    font-size: 17px;
    font-weight: 800;

    line-height: 1;
}


.launcher-series-price span {
    margin-bottom: 1px;

    color: #6f8297;

    font-size: 7px;
}


/* =========================================================
   ARROW
========================================================= */

.launcher-series-arrow {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    color: #667a91;

    font-size: 10px;

    transition:
        color .2s ease,
        background .2s ease,
        transform .2s ease;
}


/* =========================================================
   BUDGET
========================================================= */

.budget-series::before {
    background: #58da90;

    box-shadow:
        0 0 12px rgba(88, 218, 144, .55);
}


.budget-series:hover {
    border-color: rgba(88, 218, 144, .35);

    background:
        linear-gradient(
            135deg,
            rgba(32, 63, 61, .78),
            rgba(18, 34, 49, .68)
        );
}


/* =========================================================
   STANDARD
========================================================= */

.standard-series::before {
    background: #40d6b8;

    box-shadow:
        0 0 12px rgba(64, 214, 184, .5);
}


.standard-series:hover {
    border-color: rgba(64, 214, 184, .32);

    background:
        linear-gradient(
            135deg,
            rgba(25, 62, 69, .78),
            rgba(17, 34, 49, .68)
        );
}


/* =========================================================
   PREMIUM
========================================================= */

.premium-series::before {
    background: #44d8ff;

    box-shadow:
        0 0 12px rgba(68, 216, 255, .55);
}


.premium-series:hover {
    border-color: rgba(68, 216, 255, .36);

    background:
        linear-gradient(
            135deg,
            rgba(24, 59, 82, .82),
            rgba(18, 33, 51, .7)
        );
}


/* =========================================================
   COMMON HOVER
========================================================= */

.launcher-series-item:hover {
    transform: translateX(3px);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, .14);
}


.launcher-series-item:hover::before {
    opacity: 1;
}


.launcher-series-item:hover .launcher-series-image {
    transform: scale(1.02);
}


.launcher-series-item:hover .launcher-series-image img {
    transform: scale(1.08);
}


.launcher-series-item:hover .launcher-series-arrow {
    color: #74a6ff;

    background: rgba(67, 130, 244, .08);

    transform: translateX(2px);
}


/* =========================================================
   OPEN MINECRAFT VIEW
   JS WILL ADD: .show-minecraft
========================================================= */

.hero-launcher.show-minecraft .launcher-top,
.hero-launcher.show-minecraft .launcher-options,
.hero-launcher.show-minecraft .launcher-games-view {
    display: none;
}


.hero-launcher.show-minecraft .launcher-minecraft-view {
    display: block;

    animation:
        minecraftViewEnter .28s ease both;
}


.hero-launcher.show-minecraft .launcher-footer {
    display: flex;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes minecraftViewEnter {

    from {
        opacity: 0;
        transform: translateX(12px);
    }

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

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 700px) {

    .launcher-minecraft-view {
        padding: 18px 16px;
    }


    .launcher-minecraft-head {
        grid-template-columns:
            38px
            1fr
            auto;

        gap: 10px;

        margin-bottom: 16px;
    }


    .launcher-minecraft-title h4 {
        font-size: 16px;
    }


    .launcher-series-item {
        min-height: 80px;

        grid-template-columns:
            52px
            1fr
            auto
            26px;

        gap: 10px;

        padding: 10px 11px;
    }


    .launcher-series-image {
        width: 50px;
        height: 50px;

        border-radius: 11px;
    }


    .launcher-series-image img {
        width: 44px;
        height: 44px;
    }


    .launcher-series-info h5 {
        font-size: 12px;
    }


    .launcher-series-info p {
        font-size: 8px;
    }


    .launcher-series-price strong {
        font-size: 14px;
    }

}
/* =========================================================
   MINECRAFT HERO
========================================================= */

.hero {
    position: relative;

    background-size: cover;
    background-position: center;

    transition:
        background-image .45s ease;
}


.hero.minecraft-hero-active {

    background-image:
        linear-gradient(
            90deg,
            rgba(5, 12, 25, .96) 0%,
            rgba(5, 12, 25, .88) 32%,
            rgba(5, 12, 25, .62) 58%,
            rgba(5, 12, 25, .78) 100%
        ),
        url("assets/minecraft-hero.jpg") !important;

    background-size: cover !important;

    background-position: center !important;
}
/* =========================================================
   SERVOMIX LAUNCHER — BUDGET PLAN VIEW
========================================================= */

.launcher-plan-head {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 14px;

    margin-bottom: 18px;
}


/* HEADER TEXT */

.launcher-plan-heading span {
    display: block;

    margin-bottom: 3px;

    color: #5f8fff;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.3px;
}

.launcher-plan-heading h4 {
    margin: 0;

    color: #f5f8ff;

    font-size: 18px;
    font-weight: 700;
}


/* RATE BADGE */

.launcher-plan-rate {
    padding: 7px 11px;

    border: 1px solid rgba(88, 139, 255, .18);
    border-radius: 999px;

    background: rgba(63, 110, 218, .07);

    color: #83aaff;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: .5px;
}


/* =========================================================
   PLAN LIST
========================================================= */

.launcher-plan-list {
    display: flex;
    flex-direction: column;

    gap: 8px;

    max-height: 410px;
    overflow-y: auto;

    padding-right: 3px;
}


/* CUSTOM SCROLLBAR */

.launcher-plan-list::-webkit-scrollbar {
    width: 4px;
}

.launcher-plan-list::-webkit-scrollbar-track {
    background: transparent;
}

.launcher-plan-list::-webkit-scrollbar-thumb {
    background: rgba(108, 137, 183, .22);
    border-radius: 999px;
}


/* =========================================================
   PLAN ROW
========================================================= */

.launcher-plan-row {
    --plan-accent: #6c8cff;

    position: relative;

    width: 100%;
    min-height: 72px;

    display: grid;

    grid-template-columns:
        52px
        1fr
        78px
        76px;

    align-items: center;

    gap: 12px;

    padding: 10px 12px;

    border: 1px solid rgba(91, 124, 174, .16);
    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(27, 42, 67, .66),
            rgba(16, 29, 48, .54)
        );

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.launcher-plan-row::before {
    content: "";

    position: absolute;

    left: 0;
    top: 16px;
    bottom: 16px;

    width: 2px;

    border-radius: 0 4px 4px 0;

    background: var(--plan-accent);

    opacity: .8;

    box-shadow:
        0 0 10px var(--plan-accent);
}


/* =========================================================
   BLOCK IMAGE
========================================================= */

.launcher-plan-block {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: rgba(5, 14, 27, .72);

    border:
        1px solid rgba(90, 123, 168, .14);

    overflow: hidden;
}


.launcher-plan-block img {
    width: 38px;
    height: 38px;

    object-fit: contain;

    image-rendering: pixelated;

    display: block;

    transition: transform .2s ease;
}


/* =========================================================
   PLAN INFO
========================================================= */

.launcher-plan-info {
    min-width: 0;
}


.launcher-plan-info h5 {
    margin: 0 0 4px;

    color: var(--plan-accent);

    font-size: 13px;
    font-weight: 800;

    letter-spacing: .4px;
}


.launcher-plan-info span {
    color: #7e91a8;

    font-size: 9px;
    font-weight: 500;
}


/* =========================================================
   PRICE
========================================================= */

.launcher-plan-price {
    display: flex;
    flex-direction: column;

    align-items: flex-end;

    gap: 2px;
}


.launcher-plan-price strong {
    color: #ffffff;

    font-size: 16px;
    font-weight: 800;

    line-height: 1;
}


.launcher-plan-price span {
    color: #687d95;

    font-size: 7px;
}


/* =========================================================
   DEPLOY BUTTON
========================================================= */

.launcher-deploy-btn {
    min-height: 34px;

    padding: 0 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid color-mix(
        in srgb,
        var(--plan-accent) 45%,
        transparent
    );

    border-radius: 8px;

    background:
        color-mix(
            in srgb,
            var(--plan-accent) 8%,
            transparent
        );

    color: #eaf2ff;

    font-family: inherit;

    font-size: 9px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        border-color .2s ease;
}


.launcher-deploy-btn:hover {
    transform: translateY(-1px);

    background:
        color-mix(
            in srgb,
            var(--plan-accent) 16%,
            transparent
        );

    border-color: var(--plan-accent);
}


/* =========================================================
   HOVER
========================================================= */

.launcher-plan-row:hover {
    transform: translateX(3px);

    border-color:
        color-mix(
            in srgb,
            var(--plan-accent) 35%,
            transparent
        );

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--plan-accent) 8%,
                #1b2a43
            ),
            rgba(17, 30, 50, .68)
        );

    box-shadow:
        0 10px 24px rgba(0, 0, 0, .12);
}


.launcher-plan-row:hover .launcher-plan-block img {
    transform: scale(1.08);
}


/* =========================================================
   PLAN COLORS
========================================================= */

.dirt-plan {
    --plan-accent: #b87945;
}

.stone-plan {
    --plan-accent: #b8bec7;
}

.iron-plan {
    --plan-accent: #d8ddd9;
}

.gold-plan {
    --plan-accent: #f6c945;
}

.diamond-plan {
    --plan-accent: #45d8df;
}

.emerald-plan {
    --plan-accent: #43d17b;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .launcher-plan-head {
        grid-template-columns:
            38px
            1fr
            auto;

        gap: 10px;
    }


    .launcher-plan-heading h4 {
        font-size: 16px;
    }


    .launcher-plan-list {
        max-height: 390px;
    }


    .launcher-plan-row {
        grid-template-columns:
            46px
            1fr
            66px;

        min-height: 68px;

        gap: 10px;

        padding: 9px 10px;
    }


    .launcher-plan-block {
        width: 44px;
        height: 44px;
    }


    .launcher-plan-block img {
        width: 34px;
        height: 34px;
    }


    .launcher-deploy-btn {
        grid-column: 2 / -1;

        width: 100%;

        margin-top: 4px;
    }

}
.launcher-budget-view {
    display: none;
    padding: 22px 26px 24px;
}

.hero-launcher.show-budget .launcher-top,
.hero-launcher.show-budget .launcher-options,
.hero-launcher.show-budget .launcher-games-view,
.hero-launcher.show-budget .launcher-minecraft-view {
    display: none !important;
}

.hero-launcher.show-budget .launcher-budget-view {
    display: block;
}
/* =========================================================
   SERVOMIX LAUNCHER — FINAL DEPLOY VIEW
========================================================= */

.launcher-deploy-view {
    display: none;

    padding: 22px 26px 24px;
}


/* =========================================================
   HEADER
========================================================= */

.launcher-deploy-head {
    display: grid;
    grid-template-columns: 42px 1fr auto;

    align-items: center;

    gap: 14px;

    margin-bottom: 18px;
}


.launcher-deploy-heading span {
    display: block;

    margin-bottom: 3px;

    color: #6a97ff;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.3px;
}


.launcher-deploy-heading h4 {
    margin: 0;

    color: #f4f7ff;

    font-size: 18px;
    font-weight: 700;
}


/* READY BADGE */

.launcher-deploy-status {
    display: flex;
    align-items: center;

    gap: 7px;

    padding: 7px 11px;

    border: 1px solid rgba(53, 233, 154, .18);
    border-radius: 999px;

    background: rgba(53, 233, 154, .06);

    color: #61dca0;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .8px;
}


.launcher-deploy-status > span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #35e99a;

    box-shadow:
        0 0 8px rgba(53, 233, 154, .7);
}


/* =========================================================
   SELECTED PLAN
========================================================= */

.launcher-selected-plan {
    position: relative;

    display: grid;

    grid-template-columns:
        74px
        1fr
        auto;

    align-items: center;

    gap: 15px;

    padding: 15px;

    margin-bottom: 12px;

    border: 1px solid rgba(87, 123, 174, .18);
    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(29, 44, 70, .82),
            rgba(16, 29, 48, .64)
        );

    overflow: hidden;
}


/* PLAN ACCENT */

.launcher-selected-plan::before {
    content: "";

    position: absolute;

    left: 0;
    top: 20px;
    bottom: 20px;

    width: 2px;

    border-radius: 0 4px 4px 0;

    background: var(--deploy-accent, #5b8dff);

    box-shadow:
        0 0 12px var(--deploy-accent, #5b8dff);
}


/* =========================================================
   BLOCK
========================================================= */

.launcher-selected-block {
    position: relative;

    width: 68px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: rgba(5, 14, 26, .74);

    border: 1px solid rgba(93, 127, 175, .16);

    overflow: hidden;
}


.launcher-selected-glow {
    position: absolute;

    width: 45px;
    height: 45px;

    border-radius: 50%;

    background:
        var(--deploy-accent, #5b8dff);

    filter: blur(22px);

    opacity: .28;

    pointer-events: none;
}


.launcher-selected-block img {
    position: relative;
    z-index: 2;

    width: 52px;
    height: 52px;

    object-fit: contain;

    display: block;

    transition: transform .25s ease;
}


.launcher-selected-plan:hover
.launcher-selected-block img {
    transform: scale(1.08) rotate(-2deg);
}


/* =========================================================
   PLAN INFO
========================================================= */

.launcher-selected-info {
    min-width: 0;
}


.launcher-selected-info > span {
    display: block;

    margin-bottom: 4px;

    color: #7187a3;

    font-size: 7px;
    font-weight: 800;

    letter-spacing: 1px;
}


.launcher-selected-info h3 {
    margin: 0 0 3px;

    color: var(--deploy-accent, #ffffff);

    font-size: 17px;
    font-weight: 800;

    letter-spacing: .3px;
}


.launcher-selected-info p {
    margin: 0;

    color: #7c8fa7;

    font-size: 9px;
}


/* =========================================================
   PLAN PRICE
========================================================= */

.launcher-selected-price {
    display: flex;
    flex-direction: column;

    align-items: flex-end;

    gap: 4px;
}


.launcher-selected-price small {
    color: #61758c;

    font-size: 6px;
    font-weight: 800;

    letter-spacing: .8px;
}


.launcher-selected-price > div {
    display: flex;

    align-items: baseline;

    gap: 3px;
}


.launcher-selected-price strong {
    color: #ffffff;

    font-size: 19px;
    font-weight: 800;
}


.launcher-selected-price span {
    color: #667b93;

    font-size: 7px;
}


/* =========================================================
   SPECS
========================================================= */

.launcher-deploy-specs {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 8px;

    margin-bottom: 12px;
}


.launcher-deploy-spec {
    min-height: 64px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 10px;

    border: 1px solid rgba(84, 119, 165, .15);
    border-radius: 12px;

    background:
        rgba(18, 31, 51, .62);
}


.launcher-deploy-spec-icon {
    width: 32px;
    height: 32px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background:
        color-mix(
            in srgb,
            var(--deploy-accent, #5b8dff) 10%,
            transparent
        );

    color: var(--deploy-accent, #72a1ff);

    font-size: 11px;
}


.launcher-deploy-spec span {
    display: block;

    margin-bottom: 3px;

    color: #62768f;

    font-size: 6px;
    font-weight: 800;

    letter-spacing: .7px;
}


.launcher-deploy-spec strong {
    display: block;

    color: #f3f7ff;

    font-size: 11px;
    font-weight: 700;
}


/* =========================================================
   CONFIG
========================================================= */

.launcher-deploy-config {
    display: flex;
    flex-direction: column;

    gap: 7px;

    margin-bottom: 12px;
}


.launcher-deploy-config-row {
    min-height: 52px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 9px 12px;

    border: 1px solid rgba(85, 119, 164, .14);
    border-radius: 11px;

    background:
        rgba(16, 29, 47, .56);
}


.launcher-config-left {
    display: flex;

    align-items: center;

    gap: 10px;
}


.launcher-config-left > i {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: rgba(76, 125, 226, .08);

    color: #70a0ff;

    font-size: 10px;
}


.launcher-config-left span {
    display: block;

    margin-bottom: 2px;

    color: #62758d;

    font-size: 6px;
    font-weight: 800;

    letter-spacing: .8px;
}


.launcher-config-left strong {
    color: #dfe8f7;

    font-size: 10px;
    font-weight: 600;
}


.launcher-config-value {
    display: flex;

    align-items: center;

    gap: 6px;

    color: #dce6f5;

    font-size: 9px;
    font-weight: 600;
}


.launcher-config-value img {
    width: 18px;
    height: 13px;

    object-fit: cover;

    border-radius: 2px;
}


/* =========================================================
   TOTAL
========================================================= */

.launcher-deploy-total {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 12px 14px;

    margin-bottom: 10px;

    border: 1px solid rgba(84, 120, 173, .16);
    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(24, 40, 65, .8),
            rgba(17, 30, 49, .62)
        );
}


.launcher-deploy-total > div:first-child span {
    display: block;

    margin-bottom: 2px;

    color: #8194ad;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: .8px;
}


.launcher-deploy-total > div:first-child small {
    color: #62768f;

    font-size: 7px;
}


.launcher-deploy-total-price {
    display: flex;

    align-items: baseline;

    gap: 4px;
}


.launcher-deploy-total-price strong {
    color: #ffffff;

    font-size: 21px;
    font-weight: 800;
}


.launcher-deploy-total-price span {
    color: #697d94;

    font-size: 7px;
}


/* =========================================================
   FINAL DEPLOY BUTTON
========================================================= */

.launcher-final-deploy {
    width: 100%;
    min-height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    padding: 0 16px;

    border: 1px solid
        color-mix(
            in srgb,
            var(--deploy-accent, #5b8dff) 60%,
            transparent
        );

    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--deploy-accent, #5b8dff) 75%,
                #2563eb
            ),
            #2563eb
        );

    color: #ffffff;

    font-family: inherit;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .3px;

    cursor: pointer;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, .22),
        0 0 16px
        color-mix(
            in srgb,
            var(--deploy-accent, #5b8dff) 18%,
            transparent
        );

    transition:
        transform .2s ease,
        filter .2s ease,
        box-shadow .2s ease;
}


.launcher-final-deploy:hover {
    transform: translateY(-2px);

    filter: brightness(1.08);

    box-shadow:
        0 10px 28px rgba(0, 0, 0, .28),
        0 0 22px
        color-mix(
            in srgb,
            var(--deploy-accent, #5b8dff) 26%,
            transparent
        );
}


.launcher-final-deploy i {
    font-size: 9px;

    transition:
        transform .2s ease;
}


.launcher-final-deploy:hover i {
    transform: translateX(3px);
}


/* =========================================================
   SECURITY ROW
========================================================= */

.launcher-deploy-security {
    display: flex;

    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 10px;
}


.launcher-deploy-security span {
    display: flex;

    align-items: center;

    gap: 5px;

    color: #667b94;

    font-size: 7px;
    font-weight: 600;
}


.launcher-deploy-security i {
    color: #4fd99a;

    font-size: 7px;
}


/* =========================================================
   SHOW DEPLOY VIEW
========================================================= */

.hero-launcher.show-deploy .launcher-top,
.hero-launcher.show-deploy .launcher-options,
.hero-launcher.show-deploy .launcher-games-view,
.hero-launcher.show-deploy .launcher-minecraft-view,
.hero-launcher.show-deploy .launcher-budget-view {
    display: none !important;
}


.hero-launcher.show-deploy .launcher-deploy-view {
    display: block !important;

    animation:
        deployViewEnter .28s ease both;
}


@keyframes deployViewEnter {

    from {
        opacity: 0;
        transform: translateX(12px);
    }

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

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .launcher-deploy-view {
        padding: 18px 15px 20px;
    }


    .launcher-deploy-head {
        grid-template-columns:
            38px
            1fr
            auto;

        gap: 10px;
    }


    .launcher-deploy-heading h4 {
        font-size: 15px;
    }


    .launcher-selected-plan {
        grid-template-columns:
            58px
            1fr
            auto;

        gap: 10px;

        padding: 12px;
    }


    .launcher-selected-block {
        width: 54px;
        height: 54px;
    }


    .launcher-selected-block img {
        width: 42px;
        height: 42px;
    }


    .launcher-selected-info h3 {
        font-size: 14px;
    }


    .launcher-selected-price strong {
        font-size: 16px;
    }


    .launcher-deploy-specs {
        grid-template-columns: 1fr;
    }


    .launcher-deploy-spec {
        min-height: 52px;
    }

}
/* =========================================================
   SERVOMIX LAUNCHER — STANDARD SERIES
========================================================= */

.launcher-standard-view {
    display: none;
    padding: 22px 26px 24px;
}


/* =========================================================
   SHOW STANDARD VIEW
========================================================= */

.hero-launcher.show-standard .launcher-top,
.hero-launcher.show-standard .launcher-options,
.hero-launcher.show-standard .launcher-games-view,
.hero-launcher.show-standard .launcher-minecraft-view,
.hero-launcher.show-standard .launcher-budget-view,
.hero-launcher.show-standard .launcher-deploy-view {
    display: none !important;
}


.hero-launcher.show-standard .launcher-standard-view {
    display: block !important;

    animation:
        standardViewEnter .28s ease both;
}


@keyframes standardViewEnter {

    from {
        opacity: 0;
        transform: translateX(12px);
    }

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

}


/* =========================================================
   STANDARD PLAN ACCENT COLORS
========================================================= */

.standard-zombie {
    --plan-accent: #66b96a;
}


.standard-creeper {
    --plan-accent: #62d84e;
}


.standard-skeleton {
    --plan-accent: #c9ced5;
}


.standard-enderman {
    --plan-accent: #b667ff;
}


.standard-blaze {
    --plan-accent: #ff9f32;
}


.standard-wither {
    --plan-accent: #9b8fa6;
}


/* =========================================================
   STANDARD MOB HEADS
========================================================= */

.launcher-standard-view
.launcher-plan-block {
    position: relative;

    overflow: visible;
}


.launcher-standard-view
.launcher-plan-block::before {
    content: "";

    position: absolute;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: var(--plan-accent);

    filter: blur(18px);

    opacity: .18;

    pointer-events: none;
}


.launcher-standard-view
.launcher-plan-block img {
    position: relative;

    z-index: 2;

    width: 42px;
    height: 42px;

    object-fit: contain;

    image-rendering: auto;
}


/* =========================================================
   STANDARD HEADER COLOR
========================================================= */

.launcher-standard-view
.launcher-plan-heading span {
    color: #9a72ff;
}


.launcher-standard-view
.launcher-plan-rate {
    color: #b796ff;

    border-color:
        rgba(156, 112, 255, .20);

    background:
        rgba(143, 91, 255, .07);
}


/* =========================================================
   STANDARD ROW HOVER
========================================================= */

.launcher-standard-view
.launcher-plan-row:hover {

    transform: translateX(3px);

    border-color:
        color-mix(
            in srgb,
            var(--plan-accent) 38%,
            transparent
        );

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .14),
        0 0 16px
        color-mix(
            in srgb,
            var(--plan-accent) 7%,
            transparent
        );
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .launcher-standard-view {
        padding: 18px 15px 20px;
    }


    .launcher-standard-view
    .launcher-plan-block img {
        width: 38px;
        height: 38px;
    }

}
.launcher-premium-view {
    display: none;
    padding: 22px 26px 24px;
}

.hero-launcher.show-premium .launcher-top,
.hero-launcher.show-premium .launcher-options,
.hero-launcher.show-premium .launcher-games-view,
.hero-launcher.show-premium .launcher-minecraft-view,
.hero-launcher.show-premium .launcher-budget-view,
.hero-launcher.show-premium .launcher-standard-view,
.hero-launcher.show-premium .launcher-deploy-view {
    display: none !important;
}

.hero-launcher.show-premium .launcher-premium-view {
    display: block !important;
    animation: premiumViewEnter .28s ease both;
}

@keyframes premiumViewEnter {

    from {
        opacity: 0;
        transform: translateX(12px);
    }

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

}


/* PLAN COLORS */

.premium-iron {
    --plan-accent: #d8ddd9;
}

.premium-gold {
    --plan-accent: #f6c945;
}

.premium-amethyst {
    --plan-accent: #b76cff;
}

.premium-emerald {
    --plan-accent: #43d17b;
}

.premium-diamond {
    --plan-accent: #45d8df;
}

.premium-netherite {
    --plan-accent: #786f7a;
}
/* =========================================================
   SERVOMIX LAUNCHER — PALWORLD
========================================================= */

.launcher-palworld-view {
    display: none;
    padding: 22px 26px 24px;
}


/* SHOW PALWORLD */

.hero-launcher.show-palworld .launcher-top,
.hero-launcher.show-palworld .launcher-options,
.hero-launcher.show-palworld .launcher-games-view,
.hero-launcher.show-palworld .launcher-minecraft-view,
.hero-launcher.show-palworld .launcher-budget-view,
.hero-launcher.show-palworld .launcher-standard-view,
.hero-launcher.show-palworld .launcher-premium-view,
.hero-launcher.show-palworld .launcher-deploy-view {
    display: none !important;
}


.hero-launcher.show-palworld .launcher-palworld-view {
    display: block !important;
    animation: palworldViewEnter .28s ease both;
}


@keyframes palworldViewEnter {

    from {
        opacity: 0;
        transform: translateX(12px);
    }

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

}


/* =========================================================
   PALWORLD HEADER
========================================================= */

.launcher-palworld-view
.launcher-plan-heading span {
    color: #63c9ff;
}


.launcher-palworld-view
.launcher-plan-rate {
    color: #76d5ff;

    border-color:
        rgba(83, 196, 255, .20);

    background:
        rgba(63, 180, 255, .07);
}


/* =========================================================
   PAL PLAN COLORS
========================================================= */

.palworld-lamball {
    --plan-accent: #e7edf4;
}

.palworld-grizzbolt {
    --plan-accent: #ffd347;
}

.palworld-anubis {
    --plan-accent: #d7a85e;
}

.palworld-jetragon {
    --plan-accent: #72d9ff;
}


/* =========================================================
   PAL ICON
========================================================= */

.launcher-palworld-view
.launcher-plan-block {
    position: relative;
    overflow: visible;
}


.launcher-palworld-view
.launcher-plan-block::before {
    content: "";

    position: absolute;

    width: 35px;
    height: 35px;

    border-radius: 50%;

    background: var(--plan-accent);

    filter: blur(20px);

    opacity: .18;

    pointer-events: none;
}


.launcher-palworld-view
.launcher-plan-block img {
    position: relative;
    z-index: 2;

    width: 46px;
    height: 46px;

    object-fit: contain;

    transition:
        transform .22s ease,
        filter .22s ease;
}


.launcher-palworld-view
.launcher-plan-row:hover
.launcher-plan-block img {
    transform: scale(1.08);

    filter:
        drop-shadow(
            0 0 8px
            color-mix(
                in srgb,
                var(--plan-accent) 30%,
                transparent
            )
        );
}


/* =========================================================
   ROW HOVER
========================================================= */

.launcher-palworld-view
.launcher-plan-row:hover {

    transform: translateX(3px);

    border-color:
        color-mix(
            in srgb,
            var(--plan-accent) 35%,
            transparent
        );

    box-shadow:
        0 10px 25px rgba(0, 0, 0, .14),
        0 0 16px
        color-mix(
            in srgb,
            var(--plan-accent) 7%,
            transparent
        );
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .launcher-palworld-view {
        padding: 18px 15px 20px;
    }

    .launcher-palworld-view
    .launcher-plan-block img {
        width: 40px;
        height: 40px;
    }

}
/* =========================================================
   PALWORLD LAUNCHER — PLAN ICONS
========================================================= */

.launcher-palworld-view .launcher-plan-block {
    width: 58px;
    height: 58px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    border-radius: 14px;

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

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

    overflow: visible;
}


/* GLOW BEHIND PAL */

.launcher-palworld-view .launcher-plan-block::before {
    content: "";

    position: absolute;

    width: 38px;
    height: 38px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background: var(--plan-accent);

    filter: blur(18px);

    opacity: .18;

    pointer-events: none;
}


/* ACTUAL PAL IMAGE */

.launcher-palworld-view .launcher-plan-block img {
    width: 52px;
    height: 52px;

    display: block;

    object-fit: contain;

    position: relative;
    z-index: 2;

    filter:
        drop-shadow(
            0 5px 8px rgba(0,0,0,.35)
        );

    transition:
        transform .22s ease,
        filter .22s ease;
}


/* HOVER */

.launcher-palworld-view
.launcher-plan-row:hover
.launcher-plan-block img {

    transform:
        translateY(-2px)
        scale(1.10);

    filter:
        drop-shadow(
            0 7px 10px rgba(0,0,0,.4)
        )
        drop-shadow(
            0 0 7px var(--plan-accent)
        );
}


/* =========================================================
   INDIVIDUAL PAL COLORS
========================================================= */

.palworld-lamball {
    --plan-accent: #dcecf4;
}

.palworld-grizzbolt {
    --plan-accent: #ffd84d;
}

.palworld-anubis {
    --plan-accent: #d8a75c;
}

.palworld-jetragon {
    --plan-accent: #65d7ff;
}


/* =========================================================
   PLAN ROW
========================================================= */

.launcher-palworld-view .launcher-plan-row {
    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.launcher-palworld-view .launcher-plan-row:hover {
    transform: translateX(3px);

    border-color:
        color-mix(
            in srgb,
            var(--plan-accent) 30%,
            transparent
        );

    background:
        linear-gradient(
            90deg,
            color-mix(
                in srgb,
                var(--plan-accent) 5%,
                transparent
            ),
            rgba(255,255,255,.025)
        );

    box-shadow:
        0 8px 24px rgba(0,0,0,.15);
}


/* =========================================================
   DEPLOY BUTTON
========================================================= */

.launcher-palworld-view .palworld-deploy-btn {
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.launcher-palworld-view
.launcher-plan-row:hover
.palworld-deploy-btn {

    border-color:
        color-mix(
            in srgb,
            var(--plan-accent) 40%,
            transparent
        );
}


.launcher-palworld-view
.palworld-deploy-btn:hover {

    transform: translateY(-1px);

    box-shadow:
        0 5px 15px rgba(0,0,0,.2);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .launcher-palworld-view .launcher-plan-block {
        width: 50px;
        height: 50px;
    }

    .launcher-palworld-view .launcher-plan-block img {
        width: 45px;
        height: 45px;
    }

}
/* =========================================================
   SERVOMIX LAUNCHER — HYTALE
========================================================= */

.launcher-hytale-view {
    display: none;
    padding: 22px 26px 24px;
}


/* =========================================================
   SHOW HYTALE VIEW
========================================================= */

.hero-launcher.show-hytale .launcher-top,
.hero-launcher.show-hytale .launcher-options,
.hero-launcher.show-hytale .launcher-games-view,
.hero-launcher.show-hytale .launcher-minecraft-view,
.hero-launcher.show-hytale .launcher-budget-view,
.hero-launcher.show-hytale .launcher-standard-view,
.hero-launcher.show-hytale .launcher-premium-view,
.hero-launcher.show-hytale .launcher-palworld-view,
.hero-launcher.show-hytale .launcher-deploy-view {
    display: none !important;
}


.hero-launcher.show-hytale .launcher-hytale-view {
    display: block !important;

    animation:
        hytaleViewEnter .28s ease both;
}


@keyframes hytaleViewEnter {

    from {
        opacity: 0;
        transform: translateX(12px);
    }

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

}


/* =========================================================
   HEADER
========================================================= */

.launcher-hytale-view
.launcher-plan-heading span {
    color: #73a8ff;
}


.launcher-hytale-view
.launcher-plan-rate {
    color: #8db8ff;

    border-color:
        rgba(94, 146, 255, .22);

    background:
        rgba(78, 128, 255, .07);
}


/* =========================================================
   HYTALE MAIN CARD
========================================================= */

.launcher-hytale-coming {
    position: relative;

    min-height: 300px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 30px 25px;

    border-radius: 18px;

    border:
        1px solid rgba(92, 137, 215, .18);

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(77, 126, 220, .12),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            rgba(22, 36, 61, .86),
            rgba(12, 23, 40, .78)
        );

    overflow: hidden;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 16px 40px rgba(0,0,0,.18);
}


/* TOP GLOW */

.launcher-hytale-coming::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    top: -120px;
    left: 50%;

    transform: translateX(-50%);

    border-radius: 50%;

    background: #4d83ff;

    filter: blur(80px);

    opacity: .13;

    pointer-events: none;
}


/* GRID EFFECT */

.launcher-hytale-coming::after {
    content: "";

    position: absolute;
    inset: 0;

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

    background-size:
        28px 28px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.7),
            transparent
        );

    pointer-events: none;
}


/* =========================================================
   HYTALE LOGO
========================================================= */

.launcher-hytale-logo {
    position: relative;
    z-index: 2;

    width: 92px;
    height: 92px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(65, 105, 190, .16),
            rgba(28, 52, 94, .12)
        );

    border:
        1px solid rgba(98, 148, 241, .20);

    box-shadow:
        0 12px 30px rgba(0,0,0,.20),
        0 0 28px rgba(75, 128, 255, .07);
}


.launcher-hytale-logo::before {
    content: "";

    position: absolute;

    width: 55px;
    height: 55px;

    border-radius: 50%;

    background: #588cff;

    filter: blur(25px);

    opacity: .16;
}


.launcher-hytale-logo img {
    position: relative;
    z-index: 2;

    max-width: 72px;
    max-height: 72px;

    width: auto;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 7px 12px rgba(0,0,0,.38)
        );
}


/* =========================================================
   TEXT
========================================================= */

.launcher-hytale-coming h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 8px;

    color: #f4f7ff;

    font-size: 21px;
    font-weight: 800;

    letter-spacing: .2px;
}


.launcher-hytale-coming p {
    position: relative;
    z-index: 2;

    max-width: 290px;

    margin: 0;

    color: #7488a4;

    font-size: 10px;
    line-height: 1.65;
}


/* =========================================================
   DECORATIVE DOT
========================================================= */

.launcher-hytale-coming h3::after {
    content: "";

    display: block;

    width: 32px;
    height: 2px;

    margin: 12px auto 0;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #6c9cff,
            transparent
        );

    box-shadow:
        0 0 10px rgba(108, 156, 255, .35);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .launcher-hytale-view {
        padding: 18px 15px 20px;
    }


    .launcher-hytale-coming {
        min-height: 260px;

        padding: 25px 18px;
    }


    .launcher-hytale-logo {
        width: 78px;
        height: 78px;
    }


    .launcher-hytale-logo img {
        max-width: 60px;
        max-height: 60px;
    }


    .launcher-hytale-coming h3 {
        font-size: 18px;
    }

}
/* =========================================================
   SERVOMIX LAUNCHER — FIVEM
========================================================= */

.launcher-fivem-view {
    display: none;
    padding: 22px 26px 24px;
}


/* =========================================================
   SHOW FIVEM VIEW
========================================================= */

.hero-launcher.show-fivem .launcher-top,
.hero-launcher.show-fivem .launcher-options,
.hero-launcher.show-fivem .launcher-games-view,
.hero-launcher.show-fivem .launcher-minecraft-view,
.hero-launcher.show-fivem .launcher-budget-view,
.hero-launcher.show-fivem .launcher-standard-view,
.hero-launcher.show-fivem .launcher-premium-view,
.hero-launcher.show-fivem .launcher-palworld-view,
.hero-launcher.show-fivem .launcher-hytale-view,
.hero-launcher.show-fivem .launcher-deploy-view {
    display: none !important;
}

.hero-launcher.show-fivem .launcher-fivem-view {
    display: block !important;
    animation: fivemViewEnter .28s ease both;
}

@keyframes fivemViewEnter {
    from {
        opacity: 0;
        transform: translateX(12px);
    }

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


/* =========================================================
   HEADER
========================================================= */

.launcher-fivem-view .launcher-plan-heading span {
    color: #ff8a32;
}

.launcher-fivem-view .launcher-plan-rate {
    color: #ff9b52;

    border-color: rgba(255, 126, 35, .25);

    background: rgba(255, 112, 24, .07);
}


/* =========================================================
   PLAN ROW BASE
========================================================= */

.launcher-fivem-view .launcher-plan-row {
    position: relative;
    overflow: hidden;
}

.launcher-fivem-view .launcher-plan-row::before {
    content: "";

    position: absolute;

    left: 0;
    top: 18px;
    bottom: 18px;

    width: 3px;

    border-radius: 0 10px 10px 0;

    background: var(--fivem-accent);

    box-shadow:
        0 0 14px var(--fivem-accent);
}


/* =========================================================
   PLAN COLORS
========================================================= */

.fivem-street {
    --fivem-accent: #9b7cff;
}

.fivem-city {
    --fivem-accent: #ff9c38;
}

.fivem-metro {
    --fivem-accent: #4fa8ff;
}

.fivem-empire {
    --fivem-accent: #dc63ff;
}


/* =========================================================
   PLAN ICON
========================================================= */

.launcher-fivem-view .launcher-plan-block {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
}

.launcher-fivem-view .launcher-plan-block::before {
    content: "";

    position: absolute;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background: var(--fivem-accent);

    opacity: .16;

    filter: blur(10px);
}

.launcher-fivem-view .launcher-plan-block i {
    position: relative;
    z-index: 2;

    font-size: 24px;

    color: var(--fivem-accent);

    filter:
        drop-shadow(
            0 0 8px var(--fivem-accent)
        );
}


/* =========================================================
   PLAN NAME
========================================================= */

.launcher-fivem-view .launcher-plan-info h5 {
    color: var(--fivem-accent);
}


/* =========================================================
   DEPLOY BUTTON
========================================================= */

.launcher-fivem-view .launcher-deploy-btn {
    border-color:
        color-mix(
            in srgb,
            var(--fivem-accent) 45%,
            transparent
        );

    background:
        color-mix(
            in srgb,
            var(--fivem-accent) 7%,
            transparent
        );
}

.launcher-fivem-view .launcher-deploy-btn:hover {
    color: #fff;

    border-color: var(--fivem-accent);

    background:
        color-mix(
            in srgb,
            var(--fivem-accent) 15%,
            transparent
        );

    box-shadow:
        0 0 18px
        color-mix(
            in srgb,
            var(--fivem-accent) 18%,
            transparent
        );

    transform: translateY(-1px);
}


/* =========================================================
   CITY — MOST POPULAR EFFECT
========================================================= */

.launcher-fivem-view .fivem-city {
    border-color: rgba(255, 156, 56, .32);

    background:
        linear-gradient(
            90deg,
            rgba(255, 139, 43, .045),
            rgba(18, 35, 59, .92) 30%
        );

    box-shadow:
        inset 0 0 25px rgba(255, 130, 35, .025);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 700px) {

    .launcher-fivem-view {
        padding: 18px 15px 20px;
    }

    .launcher-fivem-view
    .launcher-plan-block i {
        font-size: 20px;
    }

}
/* =========================================================
   SERVOMIX LAUNCHER — CLOUD SERVERS
========================================================= */

.launcher-cloud-view,
.launcher-vps-view,
.launcher-vps-config-view {
    display: none;
}


/* =========================================================
   SHOW CLOUD VIEW
========================================================= */

.hero-launcher.show-cloud .launcher-top,
.hero-launcher.show-cloud .launcher-options,
.hero-launcher.show-cloud .launcher-games-view,
.hero-launcher.show-cloud .launcher-minecraft-view,
.hero-launcher.show-cloud .launcher-budget-view,
.hero-launcher.show-cloud .launcher-standard-view,
.hero-launcher.show-cloud .launcher-premium-view,
.hero-launcher.show-cloud .launcher-palworld-view,
.hero-launcher.show-cloud .launcher-hytale-view,
.hero-launcher.show-cloud .launcher-fivem-view,
.hero-launcher.show-cloud .launcher-deploy-view,
.hero-launcher.show-cloud .launcher-vps-view,
.hero-launcher.show-cloud .launcher-vps-config-view {
    display: none !important;
}

.hero-launcher.show-cloud .launcher-cloud-view {
    display: block !important;
    animation: cloudViewEnter .28s ease both;
}


/* =========================================================
   CLOUD HEADER
========================================================= */

.launcher-cloud-view {
    padding: 22px 26px 24px;
}

.launcher-cloud-head {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 18px;
}

.launcher-cloud-heading {
    flex: 1;
}

.launcher-cloud-heading span {
    display: block;

    margin-bottom: 3px;

    color: #6ea8ff;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.6px;
}

.launcher-cloud-heading h4 {
    margin: 0;

    color: #fff;

    font-size: 18px;
    font-weight: 800;
}


/* LIVE BADGE */

.launcher-live {
    display: flex;
    align-items: center;
    gap: 7px;

    padding: 7px 10px;

    border: 1px solid rgba(76, 210, 140, .18);
    border-radius: 8px;

    background: rgba(76, 210, 140, .06);

    color: #67dda1;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1px;
}

.launcher-live span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #62df9e;

    box-shadow:
        0 0 8px rgba(98, 223, 158, .8);
}


/* =========================================================
   CLOUD SERVICE LIST
========================================================= */

.launcher-cloud-list {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


/* =========================================================
   CLOUD SERVICE CARD
========================================================= */

.launcher-cloud-item {
    width: 100%;
    min-height: 74px;

    display: flex;
    align-items: center;

    gap: 14px;

    padding: 12px 14px;

    border: 1px solid rgba(255,255,255,.065);
    border-radius: 10px;

    background:
        linear-gradient(
            90deg,
            rgba(19, 36, 60, .92),
            rgba(12, 27, 47, .82)
        );

    color: inherit;

    text-align: left;

    cursor: pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.launcher-cloud-item:hover {
    transform: translateX(3px);

    border-color: rgba(92, 154, 255, .25);

    background:
        linear-gradient(
            90deg,
            rgba(24, 45, 75, .96),
            rgba(13, 30, 52, .9)
        );

    box-shadow:
        0 8px 25px rgba(0,0,0,.12);
}


/* =========================================================
   CLOUD ICON
========================================================= */

.launcher-cloud-icon {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(92, 151, 255, .15);
    border-radius: 10px;

    background: rgba(74, 133, 235, .07);

    color: #75aaff;

    font-size: 18px;
}

.launcher-cloud-vps .launcher-cloud-icon {
    color: #71a7ff;
}

.launcher-cloud-web .launcher-cloud-icon {
    color: #69d8c1;
}

.launcher-cloud-bot .launcher-cloud-icon {
    color: #8b91ff;
}

.launcher-cloud-mail .launcher-cloud-icon {
    color: #d489ff;
}


/* =========================================================
   CLOUD TEXT
========================================================= */

.launcher-cloud-content {
    flex: 1;

    min-width: 0;
}

.launcher-cloud-content h5 {
    margin: 0 0 4px;

    color: #f5f8ff;

    font-size: 13px;
    font-weight: 800;
}

.launcher-cloud-content p {
    margin: 0;

    color: #8191a8;

    font-size: 10px;
    line-height: 1.45;
}


/* ARROW */

.launcher-cloud-arrow {
    color: #60718b;

    font-size: 11px;

    transition:
        transform .2s ease,
        color .2s ease;
}

.launcher-cloud-item:hover
.launcher-cloud-arrow {
    transform: translateX(3px);

    color: #8eb8ff;
}


/* =========================================================
   VPS SERIES VIEW
========================================================= */

.hero-launcher.show-vps .launcher-top,
.hero-launcher.show-vps .launcher-options,
.hero-launcher.show-vps .launcher-games-view,
.hero-launcher.show-vps .launcher-cloud-view,
.hero-launcher.show-vps .launcher-minecraft-view,
.hero-launcher.show-vps .launcher-palworld-view,
.hero-launcher.show-vps .launcher-hytale-view,
.hero-launcher.show-vps .launcher-fivem-view,
.hero-launcher.show-vps .launcher-deploy-view,
.hero-launcher.show-vps .launcher-vps-config-view {
    display: none !important;
}

.hero-launcher.show-vps .launcher-vps-view {
    display: block !important;

    padding: 22px 26px 24px;

    animation: cloudViewEnter .28s ease both;
}


/* =========================================================
   VPS SERIES LIST
========================================================= */

.launcher-vps-series-list {
    display: flex;
    flex-direction: column;

    gap: 9px;

    margin-top: 18px;
}


/* =========================================================
   VPS SERIES CARD
========================================================= */

.launcher-vps-series {
    --vps-accent: #6e9fff;

    width: 100%;

    display: flex;
    align-items: center;

    gap: 14px;

    position: relative;

    overflow: hidden;

    padding: 14px;

    border: 1px solid rgba(255,255,255,.065);
    border-radius: 11px;

    background:
        linear-gradient(
            90deg,
            rgba(19, 36, 60, .94),
            rgba(12, 27, 47, .84)
        );

    color: inherit;

    text-align: left;

    cursor: pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


/* LEFT ACCENT */

.launcher-vps-series::before {
    content: "";

    position: absolute;

    left: 0;
    top: 14px;
    bottom: 14px;

    width: 3px;

    border-radius: 0 6px 6px 0;

    background: var(--vps-accent);

    box-shadow:
        0 0 12px var(--vps-accent);
}


.launcher-vps-series:hover {
    transform: translateX(3px);

    border-color:
        color-mix(
            in srgb,
            var(--vps-accent) 30%,
            transparent
        );

    box-shadow:
        0 8px 25px rgba(0,0,0,.12);
}


/* =========================================================
   VPS SERIES COLORS
========================================================= */

.vps-vcore {
    --vps-accent: #5b9cff;
}

.vps-vpro {
    --vps-accent: #9b7cff;
}

.vps-vmax {
    --vps-accent: #e074ff;
}


/* =========================================================
   VPS ICON
========================================================= */

.launcher-vps-series-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        color-mix(
            in srgb,
            var(--vps-accent) 8%,
            transparent
        );

    color: var(--vps-accent);

    font-size: 19px;

    box-shadow:
        inset 0 0 15px
        color-mix(
            in srgb,
            var(--vps-accent) 5%,
            transparent
        );
}


/* =========================================================
   VPS CONTENT
========================================================= */

.launcher-vps-series-content {
    flex: 1;

    min-width: 0;
}

.launcher-vps-code {
    display: block;

    margin-bottom: 2px;

    color: var(--vps-accent);

    font-size: 9px;
    font-weight: 900;

    letter-spacing: 1.2px;
}

.launcher-vps-series-content h5 {
    margin: 0 0 3px;

    color: #f5f8ff;

    font-size: 13px;
    font-weight: 800;
}

.launcher-vps-series-content p {
    margin: 0;

    color: #7e8fa7;

    font-size: 9px;
    line-height: 1.4;
}


/* PRICE */

.launcher-vps-price {
    margin-top: 6px;

    color: #73849c;

    font-size: 9px;
}

.launcher-vps-price strong {
    color: var(--vps-accent);

    font-size: 12px;
}


/* ARROW */

.launcher-vps-series-arrow {
    color: var(--vps-accent);

    font-size: 11px;

    opacity: .7;

    transition:
        transform .2s ease,
        opacity .2s ease;
}

.launcher-vps-series:hover
.launcher-vps-series-arrow {
    transform: translateX(3px);

    opacity: 1;
}


/* =========================================================
   VPS CONFIG VIEW
========================================================= */

.hero-launcher.show-vps-config .launcher-top,
.hero-launcher.show-vps-config .launcher-options,
.hero-launcher.show-vps-config .launcher-games-view,
.hero-launcher.show-vps-config .launcher-cloud-view,
.hero-launcher.show-vps-config .launcher-vps-view,
.hero-launcher.show-vps-config .launcher-minecraft-view,
.hero-launcher.show-vps-config .launcher-palworld-view,
.hero-launcher.show-vps-config .launcher-hytale-view,
.hero-launcher.show-vps-config .launcher-fivem-view,
.hero-launcher.show-vps-config .launcher-deploy-view {
    display: none !important;
}

.hero-launcher.show-vps-config
.launcher-vps-config-view {
    display: block !important;

    padding: 22px 26px 24px;

    animation: cloudViewEnter .28s ease both;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes cloudViewEnter {

    from {
        opacity: 0;
        transform: translateX(12px);
    }

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

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .launcher-cloud-view,
    .hero-launcher.show-vps .launcher-vps-view,
    .hero-launcher.show-vps-config
    .launcher-vps-config-view {
        padding: 18px 15px 20px;
    }

    .launcher-cloud-item {
        min-height: 68px;
    }

    .launcher-cloud-content p,
    .launcher-vps-series-content p {
        display: none;
    }

}
/* =========================================================
   SERVOMIX LAUNCHER — VPS PACKAGE SELECTOR
========================================================= */

.launcher-vps-hardware{
    display:flex;
    align-items:center;
    gap:8px;

    margin:4px 0 12px;
    padding:9px 12px;

    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;

    background:rgba(255,255,255,.025);

    font-size:11px;
    color:rgba(255,255,255,.55);
}

.launcher-vps-hardware i{
    color:var(--package-accent, #8b72ff);
    font-size:12px;
}

.launcher-vps-hardware span{
    font-size:9px;
    letter-spacing:1.2px;
    font-weight:700;
}

.launcher-vps-hardware strong{
    margin-left:auto;

    color:#fff;
    font-size:11px;
    font-weight:700;
}


/* =========================================================
   PACKAGE GRID
========================================================= */

.launcher-vps-package-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));

    gap:8px;

    max-height:285px;
    overflow-y:auto;

    padding:2px 3px 5px 0;
}


/* SCROLLBAR */

.launcher-vps-package-grid::-webkit-scrollbar{
    width:4px;
}

.launcher-vps-package-grid::-webkit-scrollbar-track{
    background:rgba(255,255,255,.03);
    border-radius:10px;
}

.launcher-vps-package-grid::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.15);
    border-radius:10px;
}


/* =========================================================
   PACKAGE CARD
========================================================= */

.launcher-vps-package{
    position:relative;

    width:100%;

    display:grid;
    grid-template-columns:52px 1fr auto;
    align-items:center;

    gap:10px;

    padding:12px 13px;

    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.015)
        );

    color:#fff;

    cursor:pointer;

    text-align:left;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


/* HOVER */

.launcher-vps-package:hover{
    transform:translateY(-2px);

    border-color:var(--package-accent);

    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--package-accent) 10%,
                transparent
            ),
            rgba(255,255,255,.025)
        );

    box-shadow:
        0 8px 25px rgba(0,0,0,.22);
}


/* =========================================================
   PACKAGE NAME
========================================================= */

.launcher-vps-package-name{
    display:flex;
    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;

    border-radius:10px;

    background:
        color-mix(
            in srgb,
            var(--package-accent) 12%,
            rgba(255,255,255,.03)
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--package-accent) 30%,
            transparent
        );

    color:var(--package-accent);

    font-size:12px;
    font-weight:900;
    letter-spacing:.5px;
}


/* =========================================================
   SPECS
========================================================= */

.launcher-vps-package-specs{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:5px 10px;
}

.launcher-vps-package-specs span{
    display:flex;
    align-items:center;

    gap:4px;

    color:rgba(255,255,255,.62);

    font-size:9px;
    font-weight:600;

    white-space:nowrap;
}

.launcher-vps-package-specs i{
    color:var(--package-accent);

    width:11px;

    font-size:9px;

    text-align:center;
}


/* =========================================================
   PRICE
========================================================= */

.launcher-vps-package-price{
    min-width:65px;

    text-align:right;
}

.launcher-vps-package-price strong{
    display:block;

    color:#fff;

    font-size:13px;
    font-weight:800;
}

.launcher-vps-package-price span{
    display:block;

    margin-top:1px;

    color:rgba(255,255,255,.38);

    font-size:8px;
}


/* =========================================================
   POPULAR PACKAGE
========================================================= */

.launcher-vps-package.popular{
    border-color:
        color-mix(
            in srgb,
            var(--package-accent) 45%,
            transparent
        );
}

.launcher-vps-popular{
    position:absolute;

    top:-6px;
    right:8px;

    padding:2px 6px;

    border-radius:4px;

    background:var(--package-accent);

    color:#07090e;

    font-size:6px;
    font-weight:900;

    letter-spacing:.7px;

    box-shadow:
        0 3px 12px
        color-mix(
            in srgb,
            var(--package-accent) 25%,
            transparent
        );
}


/* =========================================================
   VPS RATE
========================================================= */

.show-vps-config .launcher-plan-rate{
    white-space:nowrap;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:600px){

    .launcher-vps-package-grid{
        grid-template-columns:1fr;
        max-height:300px;
    }

    .launcher-vps-package{
        grid-template-columns:45px 1fr auto;
        padding:10px;
    }

    .launcher-vps-package-name{
        width:38px;
        height:38px;
    }

}
/* =========================================================
   SERVOMIX LAUNCHER — CPR WEB HOSTING
========================================================= */

.launcher-web-view{
    display:none;
    padding:22px 26px 24px;
}


/* =========================================================
   SHOW WEB HOSTING VIEW
========================================================= */

.hero-launcher.show-web .launcher-top,
.hero-launcher.show-web .launcher-options,
.hero-launcher.show-web .launcher-games-view,
.hero-launcher.show-web .launcher-minecraft-view,
.hero-launcher.show-web .launcher-budget-view,
.hero-launcher.show-web .launcher-standard-view,
.hero-launcher.show-web .launcher-premium-view,
.hero-launcher.show-web .launcher-palworld-view,
.hero-launcher.show-web .launcher-hytale-view,
.hero-launcher.show-web .launcher-fivem-view,
.hero-launcher.show-web .launcher-cloud-view,
.hero-launcher.show-web .launcher-vps-view,
.hero-launcher.show-web .launcher-vps-config-view,
.hero-launcher.show-web .launcher-deploy-view{
    display:none !important;
}

.hero-launcher.show-web .launcher-web-view{
    display:block !important;
    animation:cprLauncherEnter .28s ease both;
}


/* =========================================================
   HEADER
========================================================= */

.show-web .launcher-plan-heading span{
    color:#55d6be;
}

.show-web .launcher-plan-rate{
    color:#55d6be;

    padding:6px 9px;

    border:1px solid rgba(85,214,190,.18);
    border-radius:7px;

    background:rgba(85,214,190,.06);

    font-size:10px;
    font-weight:800;

    white-space:nowrap;
}


/* =========================================================
   STORAGE SECTION
========================================================= */

.launcher-cpr-storage{
    margin-top:15px;
}

.launcher-cpr-label{
    display:flex;
    align-items:center;
    gap:7px;

    margin-bottom:8px;

    color:#8090a7;

    font-size:9px;
    font-weight:800;

    letter-spacing:1px;
}

.launcher-cpr-label i{
    color:#55d6be;
}


/* =========================================================
   STORAGE BUTTON GRID
========================================================= */

.launcher-cpr-storage-grid{
    display:grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap:6px;
}


/* STORAGE BUTTON */

.launcher-cpr-storage-btn{
    height:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:2px;

    padding:0;

    border:1px solid rgba(255,255,255,.07);
    border-radius:8px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.015)
        );

    color:#a5b0c0;

    font-size:11px;
    font-weight:800;

    cursor:pointer;

    transition:
        transform .18s ease,
        border-color .18s ease,
        color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.launcher-cpr-storage-btn small{
    font-size:7px;
    font-weight:700;

    color:#68778d;
}


/* HOVER */

.launcher-cpr-storage-btn:hover{
    transform:translateY(-1px);

    border-color:rgba(85,214,190,.3);

    color:#fff;

    background:rgba(85,214,190,.055);
}


/* ACTIVE STORAGE */

.launcher-cpr-storage-btn.active{
    border-color:#55d6be;

    color:#55d6be;

    background:
        linear-gradient(
            135deg,
            rgba(85,214,190,.14),
            rgba(85,214,190,.04)
        );

    box-shadow:
        0 0 16px rgba(85,214,190,.08);
}

.launcher-cpr-storage-btn.active small{
    color:#55d6be;
}


/* =========================================================
   SELECTED CPR PLAN
========================================================= */

.launcher-cpr-selected{
    display:grid;

    grid-template-columns:
        48px 1fr auto;

    align-items:center;

    gap:12px;

    margin-top:12px;

    padding:12px 14px;

    border:1px solid rgba(255,255,255,.075);
    border-radius:11px;

    background:
        linear-gradient(
            110deg,
            rgba(19,39,55,.94),
            rgba(12,27,43,.82)
        );
}


/* =========================================================
   CPR ICON
========================================================= */

.launcher-cpr-icon{
    width:44px;
    height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(85,214,190,.18);
    border-radius:10px;

    background:rgba(85,214,190,.07);

    color:#55d6be;

    font-size:17px;

    box-shadow:
        inset 0 0 16px
        rgba(85,214,190,.025);
}


/* =========================================================
   PLAN INFO
========================================================= */

.launcher-cpr-info{
    min-width:0;
}

.launcher-cpr-info > span{
    display:block;

    margin-bottom:2px;

    color:#55d6be;

    font-size:7px;
    font-weight:900;

    letter-spacing:1.2px;
}

.launcher-cpr-info h5{
    margin:0 0 6px;

    color:#f7f9fc;

    font-size:14px;
    font-weight:900;
}


/* =========================================================
   SPECS
========================================================= */

.launcher-cpr-specs{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:5px 10px;
}

.launcher-cpr-specs span{
    display:flex;
    align-items:center;

    gap:3px;

    color:#73839a;

    font-size:8px;

    white-space:nowrap;
}

.launcher-cpr-specs i{
    margin-right:1px;

    color:#55d6be;

    font-size:8px;
}

.launcher-cpr-specs strong{
    color:#aeb9c7;

    font-weight:800;
}


/* =========================================================
   PRICE
========================================================= */

.launcher-cpr-price{
    min-width:68px;

    text-align:right;
}

.launcher-cpr-price > span{
    display:block;

    margin-bottom:1px;

    color:#68788f;

    font-size:7px;
    font-weight:800;

    letter-spacing:.8px;
}

.launcher-cpr-price strong{
    color:#55d6be;

    font-size:17px;
    font-weight:900;
}

.launcher-cpr-price small{
    color:#63738a;

    font-size:8px;
}


/* =========================================================
   INCLUDED FEATURES
========================================================= */

.launcher-cpr-included{
    display:grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:6px;

    margin-top:8px;
}

.launcher-cpr-included span{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:5px;

    padding:7px 5px;

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

    background:rgba(255,255,255,.018);

    color:#77879d;

    font-size:7px;
    font-weight:700;

    white-space:nowrap;
}

.launcher-cpr-included i{
    color:#55d6be;

    font-size:7px;
}


/* =========================================================
   CPR DEPLOY BUTTON
========================================================= */

.launcher-cpr-deploy{
    width:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:7px;

    margin-top:9px;

    border-color:rgba(85,214,190,.28);

    background:
        linear-gradient(
            135deg,
            rgba(85,214,190,.16),
            rgba(85,214,190,.08)
        );

    color:#72e5d0;
}

.launcher-cpr-deploy:hover{
    border-color:#55d6be;

    background:
        linear-gradient(
            135deg,
            rgba(85,214,190,.23),
            rgba(85,214,190,.11)
        );

    box-shadow:
        0 7px 22px rgba(85,214,190,.09);
}


/* =========================================================
   ENTRY ANIMATION
========================================================= */

@keyframes cprLauncherEnter{

    from{
        opacity:0;
        transform:translateX(12px);
    }

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

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

    .launcher-web-view{
        padding:18px 15px 20px;
    }

    .launcher-cpr-storage-grid{
        grid-template-columns:
            repeat(4, minmax(0,1fr));
    }

    .launcher-cpr-selected{
        grid-template-columns:
            42px 1fr auto;

        padding:10px;
    }

    .launcher-cpr-icon{
        width:38px;
        height:38px;
    }

    .launcher-cpr-included{
        grid-template-columns:
            repeat(2,1fr);
    }

}


@media(max-width:450px){

    .launcher-cpr-storage-grid{
        grid-template-columns:
            repeat(3, minmax(0,1fr));
    }

    .launcher-cpr-specs{
        gap:4px 7px;
    }

}
/* =========================================================
   SERVOMIX LAUNCHER — DISCORD BOT HOSTING
========================================================= */

.launcher-bot-view{
    display:none;
    padding:22px 26px 24px;
}


/* =========================================================
   SHOW BOT HOSTING VIEW
========================================================= */

.hero-launcher.show-bot .launcher-top,
.hero-launcher.show-bot .launcher-options,
.hero-launcher.show-bot .launcher-games-view,
.hero-launcher.show-bot .launcher-minecraft-view,
.hero-launcher.show-bot .launcher-budget-view,
.hero-launcher.show-bot .launcher-standard-view,
.hero-launcher.show-bot .launcher-premium-view,
.hero-launcher.show-bot .launcher-palworld-view,
.hero-launcher.show-bot .launcher-hytale-view,
.hero-launcher.show-bot .launcher-fivem-view,
.hero-launcher.show-bot .launcher-cloud-view,
.hero-launcher.show-bot .launcher-vps-view,
.hero-launcher.show-bot .launcher-vps-config-view,
.hero-launcher.show-bot .launcher-web-view,
.hero-launcher.show-bot .launcher-deploy-view{
    display:none !important;
}

.hero-launcher.show-bot .launcher-bot-view{
    display:block !important;
    animation:botLauncherEnter .28s ease both;
}


/* =========================================================
   BOT HEADER
========================================================= */

.show-bot .launcher-plan-heading span{
    color:#7c83ff;
}

.show-bot .launcher-plan-rate{
    color:#9da2ff;

    padding:6px 9px;

    border:1px solid rgba(124,131,255,.2);
    border-radius:7px;

    background:rgba(124,131,255,.07);

    font-size:9px;
    font-weight:900;
    letter-spacing:.7px;

    white-space:nowrap;
}


/* =========================================================
   RUNTIME BADGES
========================================================= */

.launcher-bot-runtimes{
    display:flex;
    align-items:center;
    gap:6px;

    margin:13px 0 10px;
}

.launcher-bot-runtimes span{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:5px;

    padding:6px 10px;

    border:1px solid rgba(255,255,255,.06);
    border-radius:7px;

    background:rgba(255,255,255,.025);

    color:#7e8da3;

    font-size:8px;
    font-weight:700;
}

.launcher-bot-runtimes i{
    color:#8d93ff;
    font-size:10px;
}


/* =========================================================
   BOT PLAN GRID
========================================================= */

.launcher-bot-plan-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));

    gap:8px;
}


/* =========================================================
   BOT PLAN CARD
========================================================= */

.launcher-bot-plan{
    position:relative;

    display:grid;
    grid-template-columns:42px 1fr auto;

    align-items:center;

    gap:10px;

    min-width:0;

    padding:12px;

    border:1px solid rgba(255,255,255,.07);
    border-radius:11px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.012)
        );

    color:#fff;

    text-align:left;

    cursor:pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.launcher-bot-plan:hover{
    transform:translateY(-2px);

    border-color:rgba(124,131,255,.45);

    background:
        linear-gradient(
            135deg,
            rgba(124,131,255,.09),
            rgba(255,255,255,.015)
        );

    box-shadow:
        0 8px 25px rgba(0,0,0,.2);
}


/* =========================================================
   PLAN ICON
========================================================= */

.launcher-bot-plan-icon{
    width:40px;
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(124,131,255,.17);
    border-radius:9px;

    background:rgba(124,131,255,.07);

    color:#8e94ff;

    font-size:14px;

    transition:.2s ease;
}

.launcher-bot-plan:hover
.launcher-bot-plan-icon{
    border-color:rgba(124,131,255,.35);
    background:rgba(124,131,255,.12);
}


/* =========================================================
   PLAN INFORMATION
========================================================= */

.launcher-bot-plan-info{
    min-width:0;
}

.launcher-bot-plan-type{
    display:block;

    margin-bottom:2px;

    color:#777ff0;

    font-size:6px;
    font-weight:900;

    letter-spacing:1px;
}

.launcher-bot-plan-info h5{
    margin:0 0 5px;

    color:#f5f7fb;

    font-size:11px;
    font-weight:800;
}


/* =========================================================
   PLAN SPECS
========================================================= */

.launcher-bot-specs{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:4px 8px;
}

.launcher-bot-specs span{
    display:flex;
    align-items:center;

    gap:3px;

    color:#6f7f95;

    font-size:7px;
    font-weight:600;

    white-space:nowrap;
}

.launcher-bot-specs i{
    color:#7d84f6;

    font-size:7px;
}


/* =========================================================
   PRICE
========================================================= */

.launcher-bot-price{
    min-width:48px;

    text-align:right;
}

.launcher-bot-price strong{
    display:block;

    color:#9da2ff;

    font-size:13px;
    font-weight:900;
}

.launcher-bot-price span{
    display:block;

    margin-top:1px;

    color:#5f6d81;

    font-size:7px;
}


/* =========================================================
   MOST POPULAR
========================================================= */

.launcher-bot-plan.popular{
    border-color:rgba(124,131,255,.32);

    background:
        linear-gradient(
            135deg,
            rgba(124,131,255,.075),
            rgba(255,255,255,.012)
        );
}

.launcher-bot-popular{
    position:absolute;

    top:-6px;
    right:8px;

    padding:2px 6px;

    border-radius:4px;

    background:#7c83ff;

    color:#080a12;

    font-size:5.5px;
    font-weight:900;

    letter-spacing:.7px;

    box-shadow:
        0 3px 12px rgba(124,131,255,.25);
}


/* =========================================================
   INCLUDED WITH EVERY PLAN
========================================================= */

.launcher-bot-included{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:6px;

    margin-top:9px;
}

.launcher-bot-included span{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:4px;

    padding:7px 5px;

    border:1px solid rgba(255,255,255,.05);
    border-radius:7px;

    background:rgba(255,255,255,.018);

    color:#718097;

    font-size:7px;
    font-weight:700;

    white-space:nowrap;
}

.launcher-bot-included i{
    color:#8188fa;
    font-size:7px;
}


/* =========================================================
   SMALL GLOW EFFECT
========================================================= */

.launcher-bot-plan::after{
    content:"";

    position:absolute;

    width:60px;
    height:60px;

    right:-25px;
    bottom:-30px;

    border-radius:50%;

    background:rgba(124,131,255,.08);

    filter:blur(25px);

    pointer-events:none;

    opacity:0;

    transition:opacity .2s ease;
}

.launcher-bot-plan:hover::after{
    opacity:1;
}


/* =========================================================
   ENTRY ANIMATION
========================================================= */

@keyframes botLauncherEnter{

    from{
        opacity:0;
        transform:translateX(12px);
    }

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

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

    .launcher-bot-view{
        padding:18px 15px 20px;
    }

    .launcher-bot-plan-grid{
        grid-template-columns:1fr;
    }

    .launcher-bot-plan{
        grid-template-columns:40px 1fr auto;
        padding:10px;
    }

    .launcher-bot-included{
        grid-template-columns:repeat(2,1fr);
    }

}


@media(max-width:450px){

    .launcher-bot-runtimes{
        flex-wrap:wrap;
    }

    .launcher-bot-specs{
        gap:4px 6px;
    }

}
/* =========================================================
   BOT LAUNCHER — SHARPER TEXT / LESS BLUR
========================================================= */

.launcher-bot-view{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Main plan cards */
.launcher-bot-plan{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    background:#101d32 !important;
    border-color:rgba(130,145,255,.18) !important;
}

/* Plan names */
.launcher-bot-plan-info h5{
    color:#ffffff !important;
    opacity:1 !important;
    font-weight:800 !important;
}

/* Specs */
.launcher-bot-specs span{
    color:#aab6c9 !important;
    opacity:1 !important;
}

.launcher-bot-specs i{
    color:#8f96ff !important;
    opacity:1 !important;
}

/* STARTER / DEVELOPER etc */
.launcher-bot-plan-type{
    color:#969cff !important;
    opacity:1 !important;
}

/* Prices */
.launcher-bot-price strong{
    color:#a6aaff !important;
    opacity:1 !important;
}

/* Runtime buttons */
.launcher-bot-runtimes span{
    color:#a8b3c5 !important;
    background:#122039 !important;
    opacity:1 !important;
}

/* Bottom features */
.launcher-bot-included span{
    color:#a7b3c5 !important;
    background:#101d31 !important;
    opacity:1 !important;
}

/* Header */
.show-bot .launcher-plan-heading h4{
    color:#fff !important;
    opacity:1 !important;
}

.show-bot .launcher-plan-heading span{
    opacity:1 !important;
}
/* =========================================================
   SERVOMIX LAUNCHER — MAIL HOSTING
========================================================= */

.launcher-mail-view{
    display:none;
    padding:22px 26px 24px;
}


/* =========================================================
   SHOW MAIL VIEW
========================================================= */

.hero-launcher.show-mail .launcher-top,
.hero-launcher.show-mail .launcher-options,
.hero-launcher.show-mail .launcher-games-view,
.hero-launcher.show-mail .launcher-minecraft-view,
.hero-launcher.show-mail .launcher-budget-view,
.hero-launcher.show-mail .launcher-standard-view,
.hero-launcher.show-mail .launcher-premium-view,
.hero-launcher.show-mail .launcher-palworld-view,
.hero-launcher.show-mail .launcher-hytale-view,
.hero-launcher.show-mail .launcher-fivem-view,
.hero-launcher.show-mail .launcher-cloud-view,
.hero-launcher.show-mail .launcher-vps-view,
.hero-launcher.show-mail .launcher-vps-config-view,
.hero-launcher.show-mail .launcher-web-view,
.hero-launcher.show-mail .launcher-bot-view,
.hero-launcher.show-mail .launcher-deploy-view{
    display:none !important;
}

.hero-launcher.show-mail .launcher-mail-view{
    display:block !important;
    animation:mailLauncherEnter .28s ease both;
}


/* =========================================================
   HEADER
========================================================= */

.show-mail .launcher-plan-heading span{
    color:#49bfff;
}

.show-mail .launcher-plan-rate{
    color:#64caff;

    padding:6px 9px;

    border:1px solid rgba(73,191,255,.2);
    border-radius:7px;

    background:rgba(73,191,255,.07);

    font-size:9px;
    font-weight:900;
    letter-spacing:.7px;

    white-space:nowrap;
}


/* =========================================================
   MAIL PLAN GRID
========================================================= */

.launcher-mail-plan-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));

    gap:8px;

    margin-top:15px;
}


/* =========================================================
   MAIL PLAN CARD
========================================================= */

.launcher-mail-plan{
    position:relative;

    display:grid;
    grid-template-columns:42px 1fr auto;

    align-items:center;

    gap:10px;

    min-width:0;

    padding:12px;

    border:1px solid rgba(255,255,255,.07);
    border-radius:11px;

    background:#101d32;

    color:#fff;

    text-align:left;

    cursor:pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.launcher-mail-plan:hover{
    transform:translateY(-2px);

    border-color:rgba(73,191,255,.42);

    background:#122239;

    box-shadow:
        0 8px 25px rgba(0,0,0,.22);
}


/* =========================================================
   MAIL PLAN ICON
========================================================= */

.launcher-mail-plan-icon{
    width:40px;
    height:40px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(73,191,255,.18);
    border-radius:9px;

    background:rgba(73,191,255,.07);

    color:#56c3ff;

    font-size:14px;
}


/* =========================================================
   PLAN INFO
========================================================= */

.launcher-mail-plan-info{
    min-width:0;
}

.launcher-mail-plan-type{
    display:block;

    margin-bottom:2px;

    color:#54b9ed;

    font-size:6px;
    font-weight:900;

    letter-spacing:1px;
}

.launcher-mail-plan-info h5{
    margin:0 0 5px;

    color:#ffffff;

    font-size:11px;
    font-weight:800;
}


/* =========================================================
   SPECS
========================================================= */

.launcher-mail-specs{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:4px 8px;
}

.launcher-mail-specs span{
    display:flex;
    align-items:center;

    gap:3px;

    color:#a4b0c1;

    font-size:7px;
    font-weight:600;

    white-space:nowrap;
}

.launcher-mail-specs i{
    color:#49bfff;

    font-size:7px;
}


/* =========================================================
   PRICE
========================================================= */

.launcher-mail-price{
    min-width:50px;

    text-align:right;
}

.launcher-mail-price strong{
    display:block;

    color:#61c8ff;

    font-size:13px;
    font-weight:900;
}

.launcher-mail-price span{
    display:block;

    margin-top:1px;

    color:#6f7e92;

    font-size:7px;
}


/* =========================================================
   MOST POPULAR
========================================================= */

.launcher-mail-plan.popular{
    border-color:rgba(73,191,255,.35);

    background:
        linear-gradient(
            135deg,
            rgba(73,191,255,.08),
            #101d32
        );
}

.launcher-mail-popular{
    position:absolute;

    top:-6px;
    right:8px;

    padding:2px 6px;

    border-radius:4px;

    background:#49bfff;

    color:#07111b;

    font-size:5.5px;
    font-weight:900;

    letter-spacing:.7px;

    box-shadow:
        0 3px 12px rgba(73,191,255,.25);
}


/* =========================================================
   INCLUDED FEATURES
========================================================= */

.launcher-mail-included{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:6px;

    margin-top:9px;
}

.launcher-mail-included span{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:4px;

    padding:7px 5px;

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

    background:#101d31;

    color:#a6b2c3;

    font-size:7px;
    font-weight:700;

    white-space:nowrap;
}

.launcher-mail-included i{
    color:#49bfff;

    font-size:7px;
}


/* =========================================================
   SMALL CARD GLOW
========================================================= */

.launcher-mail-plan::after{
    content:"";

    position:absolute;

    width:60px;
    height:60px;

    right:-25px;
    bottom:-30px;

    border-radius:50%;

    background:rgba(73,191,255,.09);

    filter:blur(25px);

    pointer-events:none;

    opacity:0;

    transition:opacity .2s ease;
}

.launcher-mail-plan:hover::after{
    opacity:1;
}


/* =========================================================
   ENTRY
========================================================= */

@keyframes mailLauncherEnter{

    from{
        opacity:0;
        transform:translateX(12px);
    }

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

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

    .launcher-mail-view{
        padding:18px 15px 20px;
    }

    .launcher-mail-plan-grid{
        grid-template-columns:1fr;
    }

    .launcher-mail-plan{
        grid-template-columns:40px 1fr auto;
        padding:10px;
    }

    .launcher-mail-included{
        grid-template-columns:repeat(2,1fr);
    }

}


@media(max-width:450px){

    .launcher-mail-specs{
        gap:4px 6px;
    }

}
/* =========================================================
   FIX — HIDE MAIL VIEW BY DEFAULT
========================================================= */

.hero-launcher:not(.show-mail) .launcher-mail-view{
    display:none !important;
}

.hero-launcher.show-mail .launcher-mail-view{
    display:block !important;
}


/* When Mail is open, hide the main launcher */
.hero-launcher.show-mail .launcher-top,
.hero-launcher.show-mail .launcher-options,
.hero-launcher.show-mail .launcher-games-view,
.hero-launcher.show-mail .launcher-cloud-view,
.hero-launcher.show-mail .launcher-footer{
    display:none !important;
}
/* =========================================================
   MAIL HOSTING — SHARP + COMPACT FIX
========================================================= */

/* Mail launcher itself */
.launcher-mail-view{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}

/* Cards */
.launcher-mail-plan{
    background:#101d32 !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;

    border:1px solid rgba(73,191,255,.15) !important;
}

/* Popular card */
.launcher-mail-plan.popular{
    background:#102139 !important;
    border-color:rgba(73,191,255,.48) !important;
}

/* Plan title */
.launcher-mail-plan-info h5{
    color:#fff !important;
    opacity:1 !important;
    font-weight:800 !important;
}

/* PERSONAL / BUSINESS etc */
.launcher-mail-plan-type{
    color:#5fc9ff !important;
    opacity:1 !important;
}

/* Specs */
.launcher-mail-specs span{
    color:#b1bdcd !important;
    opacity:1 !important;
}

.launcher-mail-specs i{
    color:#49bfff !important;
    opacity:1 !important;
}

/* Price */
.launcher-mail-price strong{
    color:#5fc9ff !important;
    opacity:1 !important;
}

/* Bottom feature boxes */
.launcher-mail-included span{
    background:#101d31 !important;
    color:#b6c1cf !important;

    opacity:1 !important;

    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
}

/* Header */
.show-mail .launcher-plan-heading h4{
    color:#fff !important;
    opacity:1 !important;
}

.show-mail .launcher-plan-heading span{
    color:#5fc9ff !important;
    opacity:1 !important;
}


/* =========================================================
   MAIL HERO TITLE SIZE
========================================================= */

.hero-launcher.show-mail ~ *{
    backdrop-filter:none;
}

body:has(.hero-launcher.show-mail) .hero-title{
    font-size:clamp(52px, 5vw, 82px) !important;
    line-height:.94 !important;
    letter-spacing:-3px !important;
    max-width:760px;
}
.servomix-loader{
    position:fixed;
    inset:0;
    z-index:999999;

    display:flex;
    align-items:center;
    justify-content:center;

    background:
    repeating-linear-gradient(
        135deg,
        #050914 0px,
        #050914 70px,
        #09101d 100px,
        #0d1524 160px
    );

    opacity:1;
    visibility:visible;

    transition:
        opacity .65s ease,
        visibility .65s ease;
}

.servomix-loader.is-hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.servomix-loader .main-container{
    width:100%;
    height:100%;

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;
}

.servomix-loader .loader{
    width:min(920px, 96vw);
    height:min(920px, 96vh);
}

.servomix-loader svg{
    width:100%;
    height:100%;
}

.grid-line{
    stroke:rgba(82,113,168,.10);
    stroke-width:.6;
}
#servomixLoader #grid{
    display:none;
}
.browser-frame{
    fill:#09111f;

    stroke:rgba(93,151,255,.28);
    stroke-width:1.2;

    filter:
        drop-shadow(
            0 25px 50px
            rgba(0,0,0,.55)
        );
}

.browser-top{
    fill:#0d1728;
}

.window-dot{
    fill:#3b82f6;
    opacity:.45;
}

.loading-text{
    font-family:
        Inter,
        Arial,
        sans-serif;

    font-size:12px;
    font-weight:700;

    letter-spacing:2.2px;

    fill:#9db8e7;
}

.skeleton{
    fill:#17243a;

    rx:5;
    ry:5;

    animation:
        servomixPulse
        1.6s
        ease-in-out
        infinite;
}

.skeleton.large{
    fill:#142136;
}

@keyframes servomixPulse{

    0%,
    100%{
        fill:#17243a;
    }

    50%{
        fill:#263a5b;
    }

}

.trace-flow{
    stroke-width:1.4;

    fill:none;

    stroke-dasharray:
        110 610;

    stroke-dashoffset:
        720;

    animation:
        servomixFlow
        3.4s
        linear
        infinite;

    opacity:.95;

    stroke-linejoin:round;

    filter:
        drop-shadow(
            0 0 6px
            currentColor
        );

    color:#3b82f6;
}

.trace-flow:nth-child(1){
    stroke:url(#traceGradient1);
}

.trace-flow:nth-child(2){
    stroke:url(#traceGradient2);
}

.trace-flow:nth-child(3){
    stroke:url(#traceGradient3);
}

.trace-flow:nth-child(4){
    stroke:url(#traceGradient4);
}

@keyframes servomixFlow{

    from{
        stroke-dashoffset:720;
    }

    to{
        stroke-dashoffset:0;
    }

}

@media (max-width:700px){

    .servomix-loader .loader{
        width:115vw;
        height:115vw;
    }

}
/* =========================================================
   SERVOMIX POWER CORE
========================================================= */

.servomix-power-core{
    position:absolute;

    left:50%;
    top:69%;

    transform:
        translateX(-50%)
        scale(.82);

    z-index:4;

    pointer-events:none;

    filter:
        drop-shadow(0 0 16px rgba(87,39,204,.30))
        drop-shadow(0 0 28px rgba(145,221,251,.16));
}


/* CORE SVG */

.servomix-power-core #svg-global{
    display:block;

    width:94px;
    height:136px;

    overflow:visible;

    zoom:1.2;
}


/* =========================================================
   POWER CORE PARTICLES
========================================================= */

@keyframes fade-particles{
    0%,
    100%{
        opacity:1;
    }

    50%{
        opacity:.45;
    }
}

@keyframes floatUp{
    0%{
        transform:translateY(0);
        opacity:0;
    }

    10%{
        opacity:1;
    }

    100%{
        transform:translateY(-42px);
        opacity:0;
    }
}


.servomix-power-core #particles{
    animation:
        fade-particles
        4s
        infinite
        alternate;
}


.servomix-power-core .particle{
    animation:
        floatUp
        linear
        infinite;
}


.servomix-power-core .p1{
    animation-duration:2.2s;
    animation-delay:0s;
}

.servomix-power-core .p2{
    animation-duration:2.5s;
    animation-delay:.3s;
}

.servomix-power-core .p3{
    animation-duration:2s;
    animation-delay:.6s;
}

.servomix-power-core .p4{
    animation-duration:2.8s;
    animation-delay:.2s;
}

.servomix-power-core .p5{
    animation-duration:2.3s;
    animation-delay:.4s;
}

.servomix-power-core .p6{
    animation-duration:3s;
    animation-delay:.1s;
}

.servomix-power-core .p7{
    animation-duration:2.1s;
    animation-delay:.5s;
}

.servomix-power-core .p8{
    animation-duration:2.6s;
    animation-delay:.2s;
}

.servomix-power-core .p9{
    animation-duration:2.4s;
    animation-delay:.3s;
}


/* =========================================================
   CORE FLOAT
========================================================= */

@keyframes coreFloat{
    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-4px);
    }
}


.servomix-power-core #line-v1,
.servomix-power-core #line-v2,
.servomix-power-core #node-server,
.servomix-power-core #panel-rigth,
.servomix-power-core #reflectores{
    animation:
        coreFloat
        3s
        ease-in-out
        infinite;
}


.servomix-power-core #line-v2{
    animation-delay:.2s;
}

.servomix-power-core #node-server,
.servomix-power-core #panel-rigth,
.servomix-power-core #reflectores{
    animation-delay:.4s;
}


/* =========================================================
   ENERGY CONNECTION TO PANEL
========================================================= */

.servomix-power-core::before{
    content:"";

    position:absolute;

    left:50%;
    top:-50px;

    width:2px;
    height:58px;

    transform:translateX(-50%);

    background:
        linear-gradient(
            to top,
            rgba(124,58,237,.15),
            #7c3aed,
            #38bdf8,
            transparent
        );

    box-shadow:
        0 0 8px #38bdf8,
        0 0 16px rgba(124,58,237,.65);

    animation:
        energyBeam
        1.4s
        ease-in-out
        infinite;
}


@keyframes energyBeam{

    0%,
    100%{
        opacity:.35;
        transform:
            translateX(-50%)
            scaleY(.82);
    }

    50%{
        opacity:1;
        transform:
            translateX(-50%)
            scaleY(1);
    }

}
/* =========================================================
   SERVOMIX — PANELS & TOOLS ECOSYSTEM
========================================================= */

.smx-ecosystem{
    position:relative;
    width:100%;
    padding:110px 24px 120px;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(45,107,255,.10),
            transparent 32%
        ),
        radial-gradient(
            circle at 50% 85%,
            rgba(124,58,237,.08),
            transparent 35%
        ),
        #050914;
}


/* SUBTLE BACKGROUND GRID */

.smx-ecosystem::before{
    content:"";
    position:absolute;
    inset:0;

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

    background-size:55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 15%,
            #000 85%,
            transparent
        );

    pointer-events:none;
}


.smx-ecosystem-container{
    position:relative;
    z-index:2;

    width:100%;
    max-width:1320px;

    margin:0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.smx-ecosystem-header{
    max-width:820px;
    margin:0 auto 72px;

    text-align:center;
}


.smx-ecosystem-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:8px 17px;

    margin-bottom:23px;

    border:1px solid rgba(72,137,255,.28);
    border-radius:999px;

    background:rgba(26,74,160,.12);

    color:#8eb9ff;

    font-size:11px;
    font-weight:700;
    letter-spacing:1.8px;
}


.smx-badge-star{
    color:#4f8cff;
    font-size:11px;
}


.smx-ecosystem-title{
    margin:0;

    color:#f5f8ff;

    font-size:clamp(46px,5vw,72px);
    font-weight:800;
    line-height:.98;

    letter-spacing:-3px;
}


.smx-ecosystem-title span{
    display:inline-block;

    background:
        linear-gradient(
            90deg,
            #3184ff,
            #7c5cff
        );

    -webkit-background-clip:text;
    background-clip:text;

    color:transparent;
}


.smx-ecosystem-subtitle{
    margin:20px 0 10px;

    color:#eef4ff;

    font-size:21px;
    font-weight:600;
}


.smx-ecosystem-description{
    max-width:620px;

    margin:0 auto;

    color:#6f7f9d;

    font-size:14px;
    line-height:1.8;
}


/* =========================================================
   DIVIDERS
========================================================= */

.smx-ecosystem-divider{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;

    margin:0 0 30px;
}


.smx-divider-line{
    height:1px;
    flex:1;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(68,126,255,.28)
        );
}


.smx-ecosystem-divider
.smx-divider-line:last-child{
    background:
        linear-gradient(
            90deg,
            rgba(68,126,255,.28),
            transparent
        );
}


.smx-divider-dot{
    width:5px;
    height:5px;

    margin:0 13px;

    border-radius:50%;

    background:#3d83ff;

    box-shadow:
        0 0 10px rgba(61,131,255,.9);
}


.smx-divider-title{
    color:#7faaff;

    font-size:11px;
    font-weight:800;

    letter-spacing:3px;
}


/* PURPLE DIVIDER */

.smx-divider-purple{
    margin-top:68px;
}


.smx-divider-purple .smx-divider-line{
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(142,82,255,.30)
        );
}


.smx-divider-purple
.smx-divider-line:last-child{
    background:
        linear-gradient(
            90deg,
            rgba(142,82,255,.30),
            transparent
        );
}


.smx-divider-purple .smx-divider-dot{
    background:#9b63ff;

    box-shadow:
        0 0 11px rgba(155,99,255,.9);
}


.smx-divider-purple .smx-divider-title{
    color:#ad82ff;
}


/* =========================================================
   CARD GRID
========================================================= */

.smx-ecosystem-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:18px;
}


/* =========================================================
   CARD
========================================================= */

.smx-ecosystem-card{
    position:relative;

    min-height:260px;

    display:flex;
    flex-direction:column;

    padding:24px;

    overflow:hidden;

    border-radius:10px;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}


/* BLUE CONTROL PANEL CARDS */

.smx-panel-card{
    border:
        1px solid
        rgba(50,117,255,.22);

    background:
        linear-gradient(
            145deg,
            rgba(15,31,59,.90),
            rgba(7,16,32,.94)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025);
}


/* PURPLE TOOL CARDS */

.smx-tool-card{
    border:
        1px solid
        rgba(133,75,255,.22);

    background:
        linear-gradient(
            145deg,
            rgba(29,19,59,.88),
            rgba(10,11,31,.95)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.025);
}


/* CARD TOP GLOW */

.smx-ecosystem-card::before{
    content:"";

    position:absolute;

    width:150px;
    height:150px;

    left:-45px;
    top:-60px;

    border-radius:50%;

    opacity:.12;

    filter:blur(45px);

    pointer-events:none;
}


.smx-panel-card::before{
    background:#2979ff;
}


.smx-tool-card::before{
    background:#8b4cff;
}


/* =========================================================
   CARD HOVER
========================================================= */

.smx-panel-card:hover{
    transform:translateY(-7px);

    border-color:
        rgba(62,133,255,.55);

    background:
        linear-gradient(
            145deg,
            rgba(18,39,75,.95),
            rgba(7,16,32,.96)
        );

    box-shadow:
        0 18px 45px
        rgba(0,65,180,.13),
        0 0 30px
        rgba(48,116,255,.06);
}


.smx-tool-card:hover{
    transform:translateY(-7px);

    border-color:
        rgba(153,91,255,.52);

    background:
        linear-gradient(
            145deg,
            rgba(38,23,77,.95),
            rgba(10,11,31,.97)
        );

    box-shadow:
        0 18px 45px
        rgba(91,32,190,.14),
        0 0 30px
        rgba(137,71,255,.07);
}


/* =========================================================
   CARD TOP
========================================================= */

.smx-card-top{
    position:relative;
    z-index:2;

    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    margin-bottom:28px;
}


/* =========================================================
   ICON BOX
========================================================= */

.smx-card-icon{
    width:50px;
    height:50px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

    border-radius:8px;
}


.smx-panel-card .smx-card-icon{
    border:
        1px solid
        rgba(54,130,255,.32);

    background:
        rgba(25,76,169,.15);

    box-shadow:
        inset 0 0 20px
        rgba(49,117,255,.06);
}


.smx-tool-card .smx-card-icon{
    border:
        1px solid
        rgba(144,82,255,.32);

    background:
        rgba(101,45,190,.14);

    box-shadow:
        inset 0 0 20px
        rgba(133,69,255,.07);
}


/* LOGO IMAGES */

.smx-card-icon img{
    display:block;

    width:31px;
    height:31px;

    object-fit:contain;
}


/* LUCIDE ICONS */

.smx-card-icon svg{
    width:24px;
    height:24px;

    stroke-width:1.7;
}


.smx-panel-card .smx-card-icon svg{
    color:#4d94ff;
}


.smx-tool-card .smx-card-icon svg{
    color:#a46cff;
}


/* =========================================================
   BADGES
========================================================= */

.smx-card-badge{
    padding:5px 9px;

    border-radius:4px;

    font-size:8px;
    font-weight:800;

    letter-spacing:1.2px;
}


.smx-panel-card .smx-card-badge{
    color:#73a6ff;

    border:
        1px solid
        rgba(70,136,255,.20);

    background:
        rgba(39,98,205,.11);
}


.smx-tool-card .smx-card-badge{
    color:#b487ff;

    border:
        1px solid
        rgba(153,94,255,.20);

    background:
        rgba(108,52,190,.11);
}


/* =========================================================
   CARD TEXT
========================================================= */

.smx-card-content{
    position:relative;
    z-index:2;
}


.smx-card-content h3{
    margin:0 0 10px;

    color:#f4f7ff;

    font-size:19px;
    font-weight:700;
}


.smx-card-content p{
    margin:0;

    max-width:230px;

    color:#73819a;

    font-size:12px;
    line-height:1.7;
}


/* =========================================================
   LEARN MORE
========================================================= */

.smx-card-link{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;
    gap:8px;

    width:max-content;

    margin-top:auto;
    padding-top:24px;

    text-decoration:none;

    font-size:11px;
    font-weight:700;

    transition:
        gap .25s ease,
        opacity .25s ease;
}


.smx-panel-card .smx-card-link{
    color:#5796ff;
}


.smx-tool-card .smx-card-link{
    color:#a36dff;
}


.smx-card-link:hover{
    gap:13px;
}


.smx-link-arrow{
    font-size:15px;

    transition:
        transform .25s ease;
}


.smx-card-link:hover
.smx-link-arrow{
    transform:translateX(3px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width:1100px){

    .smx-ecosystem-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


@media (max-width:650px){

    .smx-ecosystem{
        padding:
            80px 18px
            90px;
    }


    .smx-ecosystem-header{
        margin-bottom:55px;
    }


    .smx-ecosystem-title{
        font-size:
            clamp(40px,12vw,55px);

        letter-spacing:-2px;
    }


    .smx-ecosystem-subtitle{
        font-size:18px;
    }


    .smx-ecosystem-grid{
        grid-template-columns:1fr;

        gap:14px;
    }


    .smx-ecosystem-card{
        min-height:235px;
    }


    .smx-divider-purple{
        margin-top:55px;
    }


    .smx-divider-title{
        letter-spacing:2px;
    }

}
/* =========================================================
   SERVOMIX GLOBAL FOOTER
========================================================= */

.smx-footer {
    position: relative;
    width: 100%;

    background: #050914;

    border-top: 1px solid rgba(255, 255, 255, 0.055);

    color: #ffffff;

    overflow: hidden;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.smx-footer-container {
    width: min(100% - 48px, 1420px);

    margin: 0 auto;

    padding: 72px 0 62px;

    display: grid;

    grid-template-columns:
        minmax(330px, 1.55fr)
        repeat(3, minmax(150px, 0.72fr));

    gap: 72px;
}


/* =========================================================
   BRAND
========================================================= */

.smx-footer-brand {
    min-width: 0;
}


.smx-footer-logo {
    display: inline-flex;

    align-items: center;

    text-decoration: none;

    margin-bottom: 23px;
}


.smx-footer-logo img {
    display: block;

    width: auto;
    height: 48px;

    max-width: 250px;

    object-fit: contain;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.smx-footer-description {
    max-width: 360px;

    margin: 0;

    color: #8d97ac;

    font-size: 15px;
    font-weight: 450;

    line-height: 1.85;
}


/* =========================================================
   PAYMENTS
========================================================= */

.smx-footer-payments {
    margin-top: 29px;
}


.smx-footer-small-title {
    display: block;

    margin-bottom: 14px;

    color: #697489;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 0.04em;

    text-transform: uppercase;
}


.smx-footer-payment-logos {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 17px;
}


.smx-footer-payment-logos img {
    display: block;

    width: auto;

    max-width: 76px;
    max-height: 25px;

    object-fit: contain;

    opacity: 0.72;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}


.smx-footer-payment-logos img:hover {
    opacity: 1;

    transform: translateY(-1px);
}


/* Razorpay is naturally wider */

.smx-footer-payment-logos img:first-child {
    max-width: 92px;
}


/* =========================================================
   SOCIALS
========================================================= */

.smx-footer-socials {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-top: 28px;
}


.smx-footer-socials a {
    width: 39px;
    height: 39px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.09);

    border-radius: 9px;

    background: rgba(255, 255, 255, 0.018);

    color: #8490a8;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    transition:
        color 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}


.smx-footer-socials a:hover {
    color: #ffffff;

    background: rgba(255, 255, 255, 0.045);

    border-color: rgba(255, 255, 255, 0.16);

    transform: translateY(-2px);
}


.smx-footer-socials svg {
    width: 17px;
    height: 17px;

    stroke-width: 1.8;
}


.smx-footer-x {
    font-size: 14px !important;
}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.smx-footer-column {
    min-width: 0;
}


.smx-footer-column h4 {
    position: relative;

    margin: 4px 0 29px;

    padding-bottom: 13px;

    color: #f4f7fb;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.015em;

    text-transform: uppercase;
}


/* Small ServoMix accent */

.smx-footer-column h4::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 27px;
    height: 2px;

    border-radius: 100px;

    background: #4263ff;
}


/* =========================================================
   LINKS
========================================================= */

.smx-footer-column nav {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 18px;
}


.smx-footer-column nav a {
    position: relative;

    display: inline-flex;

    align-items: center;

    color: #808ba0;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.4;

    text-decoration: none;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}


.smx-footer-column nav a:hover {
    color: #f1f5f9;

    transform: translateX(3px);
}


/* tiny dot only appears on hover */

.smx-footer-column nav a::before {
    content: "";

    width: 4px;
    height: 4px;

    margin-right: 0;

    border-radius: 50%;

    background: #4f6cff;

    opacity: 0;

    transform: scale(0);

    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        margin-right 0.18s ease;
}


.smx-footer-column nav a:hover::before {
    opacity: 1;

    transform: scale(1);

    margin-right: 8px;
}


/* =========================================================
   BOTTOM
========================================================= */

.smx-footer-bottom {
    width: 100%;
}


.smx-footer-bottom-inner {
    width: min(100% - 48px, 1420px);

    margin: 0 auto;

    padding: 22px 0 26px;

    border-top: 1px solid rgba(255, 255, 255, 0.07);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;
}


/* =========================================================
   COPYRIGHT
========================================================= */

.smx-footer-bottom p {
    margin: 0;

    color: #626d82;

    font-size: 12px;
    font-weight: 450;
}


.smx-footer-bottom p strong {
    color: #9ca6b9;

    font-weight: 600;
}


/* =========================================================
   LOCATIONS
========================================================= */

.smx-footer-locations {
    display: flex;

    align-items: center;

    gap: 9px;

    color: #768197;

    font-size: 12px;
    font-weight: 500;
}


.smx-footer-locations svg {
    width: 15px;
    height: 15px;

    color: #5872ff;

    stroke-width: 1.8;
}


.smx-footer-location-dot {
    width: 3px;
    height: 3px;

    margin: 0 3px;

    border-radius: 50%;

    background: #536dfe;
}


/* =========================================================
   IMPORTANT — NO FOOTER GLOW
========================================================= */

.smx-footer::before,
.smx-footer::after {
    display: none !important;

    content: none !important;
}


.smx-footer *,
.smx-footer *::before,
.smx-footer *::after {
    box-shadow: none;
}


/* Restore only normal focus accessibility */

.smx-footer a:focus-visible {
    outline: 2px solid #536dfe;

    outline-offset: 4px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .smx-footer-container {
        grid-template-columns:
            1.4fr
            repeat(3, 1fr);

        gap: 38px;

        padding-top: 60px;
    }


    .smx-footer-description {
        max-width: 300px;
    }

}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 820px) {

    .smx-footer-container {
        width: min(100% - 36px, 1420px);

        grid-template-columns:
            repeat(2, 1fr);

        gap:
            48px
            36px;

        padding:
            55px
            0
            50px;
    }


    .smx-footer-brand {
        grid-column: 1 / -1;
    }


    .smx-footer-description {
        max-width: 420px;
    }


    .smx-footer-bottom-inner {
        width: min(100% - 36px, 1420px);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 560px) {

    .smx-footer-container {
        width: min(100% - 30px, 1420px);

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            42px
            24px;

        padding:
            46px
            0
            42px;
    }


    .smx-footer-brand {
        grid-column: 1 / -1;
    }


    .smx-footer-logo {
        margin-bottom: 19px;
    }


    .smx-footer-logo img {
        height: 40px;

        max-width: 210px;
    }


    .smx-footer-description {
        max-width: 330px;

        font-size: 14px;

        line-height: 1.75;
    }


    .smx-footer-payments {
        margin-top: 25px;
    }


    .smx-footer-payment-logos {
        gap:
            13px
            15px;
    }


    .smx-footer-payment-logos img {
        max-width: 65px;
        max-height: 22px;
    }


    .smx-footer-payment-logos img:first-child {
        max-width: 84px;
    }


    .smx-footer-socials {
        margin-top: 25px;
    }


    .smx-footer-column h4 {
        margin-bottom: 24px;
    }


    .smx-footer-column nav {
        gap: 15px;
    }


    .smx-footer-column nav a {
        font-size: 13px;
    }


    /* Tools takes full width on mobile */

    .smx-footer-column:last-child {
        grid-column: 1 / -1;
    }


    .smx-footer-column:last-child nav {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            15px
            20px;
    }


    .smx-footer-bottom-inner {
        width: min(100% - 30px, 1420px);

        padding:
            21px
            0
            25px;

        flex-direction: column;

        align-items: flex-start;

        gap: 14px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

    .smx-footer-container {
        grid-template-columns: 1fr;
    }


    .smx-footer-brand,
    .smx-footer-column:last-child {
        grid-column: auto;
    }


    .smx-footer-column:last-child nav {
        display: flex;
    }

}
/* =========================================================
   GAMES DROPDOWN V2
========================================================= */

.games-nav {
    position: relative;
}

.games-dropdown-v2 {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);

    width: 760px;

    background:
        linear-gradient(
            180deg,
            rgba(8, 17, 33, 0.985),
            rgba(5, 10, 22, 0.995)
        );

    border: 1px solid rgba(59, 130, 246, 0.28);
    border-radius: 18px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease;

    overflow: hidden;

    z-index: 9999;
}

.games-nav:hover .games-dropdown-v2,
.games-nav:focus-within .games-dropdown-v2 {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateX(-50%) translateY(0);
}


/* small dropdown pointer */

.games-dropdown-v2::before {
    content: "";

    position: absolute;
    top: -7px;
    left: 96px;

    width: 13px;
    height: 13px;

    background: #0a1426;

    border-left: 1px solid rgba(59, 130, 246, 0.3);
    border-top: 1px solid rgba(59, 130, 246, 0.3);

    transform: rotate(45deg);
}


/* =========================================================
   GAMES HEADER
========================================================= */

.games-v2-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding: 25px 29px 22px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

.games-v2-head > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.games-v2-eyebrow {
    color: #4ea1ff;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.18em;
}

.games-v2-head h4 {
    margin: 0;

    color: #f6f8fc;

    font-size: 17px;
    font-weight: 700;
}

.games-v2-all {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #6eb2ff;

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;

    transition:
        color 0.18s ease,
        gap 0.18s ease;
}

.games-v2-all:hover {
    color: #ffffff;
    gap: 13px;
}


/* =========================================================
   GAMES GRID
========================================================= */

.games-v2-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 14px;

    padding: 24px 28px;
}


/* =========================================================
   GAME CARD
========================================================= */

.games-v2-card {
    position: relative;

    min-height: 116px;

    display: flex;
    align-items: center;

    gap: 17px;

    padding: 18px 48px 18px 18px;

    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.022);

    text-decoration: none;

    overflow: hidden;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease;
}

.games-v2-card:hover {
    border-color: rgba(59, 130, 246, 0.46);

    background: rgba(59, 130, 246, 0.055);

    transform: translateY(-2px);
}


/* =========================================================
   REAL GAME LOGO
========================================================= */

.games-v2-logo {
    flex: 0 0 58px;

    width: 58px;
    height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: rgba(255, 255, 255, 0.035);

    border: 1px solid rgba(255, 255, 255, 0.055);
}

.games-v2-logo img {
    display: block;

    width: 42px;
    height: 42px;

    object-fit: contain;

    border-radius: 8px;
}


/* =========================================================
   GAME CONTENT
========================================================= */

.games-v2-content {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 6px;
}

.games-v2-content strong {
    color: #f4f7fb;

    font-size: 15px;
    font-weight: 700;

    line-height: 1.2;
}

.games-v2-content span {
    color: #7d899f;

    font-size: 12px;
    font-weight: 500;

    line-height: 1.45;
}


/* =========================================================
   GAME ARROW
========================================================= */

.games-v2-arrow {
    position: absolute;

    top: 50%;
    right: 18px;

    transform: translateY(-50%);

    color: #53657e;

    font-size: 12px;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.games-v2-card:hover .games-v2-arrow {
    color: #5ea7ff;

    transform:
        translateY(-50%)
        translateX(3px);
}


/* =========================================================
   GAME FOOTER
========================================================= */

.games-v2-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 16px 29px 18px;

    border-top: 1px solid rgba(255, 255, 255, 0.06);

    color: #657186;

    font-size: 11px;
    font-weight: 500;
}

.games-v2-status {
    display: inline-flex;
    align-items: center;

    gap: 8px;
}

.games-v2-status-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #39d98a;
}


/* =========================================================
   COMPANY DROPDOWN
========================================================= */

.company-nav {
    position: relative;
}

.company-dropdown {
    position: absolute;

    top: calc(100% + 18px);
    left: 50%;

    width: 430px;

    transform:
        translateX(-50%)
        translateY(8px);

    background:
        linear-gradient(
            180deg,
            rgba(10, 13, 28, 0.99),
            rgba(6, 9, 20, 0.995)
        );

    border: 1px solid rgba(124, 58, 237, 0.28);
    border-radius: 18px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease;

    overflow: hidden;

    z-index: 9999;
}

.company-nav:hover .company-dropdown,
.company-nav:focus-within .company-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);
}


/* pointer */

.company-dropdown::before {
    content: "";

    position: absolute;

    top: -7px;
    left: 50%;

    width: 13px;
    height: 13px;

    background: #0a0f20;

    border-left: 1px solid rgba(124, 58, 237, 0.34);
    border-top: 1px solid rgba(124, 58, 237, 0.34);

    transform:
        translateX(-50%)
        rotate(45deg);
}


/* =========================================================
   COMPANY HEADER
========================================================= */

.company-dropdown-head {
    padding: 24px 25px 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.company-dropdown-head > div {
    display: flex;
    flex-direction: column;

    gap: 6px;
}

.company-dropdown-head span {
    color: #9b63ff;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.17em;
}

.company-dropdown-head h4 {
    margin: 0;

    color: #eef2f8;

    font-size: 15px;
    font-weight: 650;
}


/* =========================================================
   COMPANY GRID
========================================================= */

.company-dropdown-grid {
    display: flex;

    flex-direction: column;

    gap: 8px;

    padding: 15px;
}


/* =========================================================
   COMPANY CARD
========================================================= */

.company-dd-card {
    position: relative;

    display: grid;

    grid-template-columns:
        42px
        minmax(0, 1fr)
        18px;

    align-items: center;

    gap: 14px;

    min-height: 72px;

    padding: 12px 14px;

    border-radius: 12px;

    border: 1px solid transparent;

    background: rgba(255, 255, 255, 0.016);

    text-decoration: none;

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.company-dd-card:hover {
    background: rgba(124, 58, 237, 0.055);

    border-color: rgba(124, 58, 237, 0.22);

    transform: translateX(2px);
}


/* =========================================================
   COMPANY ICON
========================================================= */

.company-dd-icon {
    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: rgba(124, 58, 237, 0.08);

    border: 1px solid rgba(124, 58, 237, 0.13);

    color: #9d67ff;

    font-size: 16px;
}


/* =========================================================
   COMPANY CONTENT
========================================================= */

.company-dd-content {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 4px;
}

.company-dd-content strong {
    color: #edf1f7;

    font-size: 13px;
    font-weight: 700;
}

.company-dd-content small {
    color: #727d91;

    font-size: 11px;
    font-weight: 500;

    line-height: 1.45;
}


/* =========================================================
   COMPANY ARROW
========================================================= */

.company-dd-arrow {
    justify-self: end;

    color: #566176;

    font-size: 10px;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}

.company-dd-card:hover .company-dd-arrow {
    color: #a673ff;

    transform: translateX(3px);
}


/* =========================================================
   NAV ACTIVE HOVER COLORS
========================================================= */

.games-nav:hover > a,
.games-nav:focus-within > a {
    color: #52a6ff;
}

.company-nav:hover > a,
.company-nav:focus-within > a {
    color: #9c68ff;
}


/* =========================================================
   PREVENT OLD GAME DROPDOWN STYLES FROM INTERFERING
========================================================= */

.games-dropdown-v2 .games-dropdown-head,
.games-dropdown-v2 .games-dropdown-main,
.games-dropdown-v2 .games-dropdown-list,
.games-dropdown-v2 .game-dd-preview,
.games-dropdown-v2 .games-dropdown-footer {
    display: none !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1180px) {

    .games-dropdown-v2 {
        width: 690px;
    }

    .company-dropdown {
        width: 400px;
    }

}


@media (max-width: 900px) {

    .games-dropdown-v2,
    .company-dropdown {
        display: none;
    }

}
/* =========================================================
   COMPACT NAV DROPDOWNS
   Games + Company
========================================================= */


/* =========================
   GAMES - SMALLER
========================= */

.games-dropdown-v2 {
    width: 610px;
}


/* Header */

.games-v2-head {
    padding: 18px 22px 17px;
}

.games-v2-eyebrow {
    font-size: 9px;
}

.games-v2-head h4 {
    font-size: 15px;
}

.games-v2-all {
    font-size: 12px;
}


/* Grid */

.games-v2-grid {
    gap: 10px;
    padding: 18px 22px;
}


/* Cards */

.games-v2-card {
    min-height: 92px;

    gap: 13px;

    padding:
        14px
        38px
        14px
        14px;

    border-radius: 12px;
}


/* Game logo */

.games-v2-logo {
    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    border-radius: 10px;
}

.games-v2-logo img {
    width: 36px;
    height: 36px;

    border-radius: 7px;
}


/* Game text */

.games-v2-content {
    gap: 4px;
}

.games-v2-content strong {
    font-size: 13px;
}

.games-v2-content span {
    font-size: 10.5px;
    line-height: 1.35;
}


/* Arrow */

.games-v2-arrow {
    right: 14px;

    font-size: 10px;
}


/* Bottom */

.games-v2-footer {
    padding: 13px 22px 14px;

    font-size: 10px;
}



/* =========================================================
   COMPANY - SMALLER
========================================================= */

.company-dropdown {
    width: 370px;
}


/* Company header */

.company-dropdown-head {
    padding: 18px 20px 16px;
}

.company-dropdown-head > div {
    gap: 4px;
}

.company-dropdown-head span {
    font-size: 9px;
}

.company-dropdown-head h4 {
    font-size: 14px;
}


/* List */

.company-dropdown-grid {
    gap: 6px;

    padding: 12px;
}


/* Company cards */

.company-dd-card {
    grid-template-columns:
        36px
        minmax(0, 1fr)
        14px;

    gap: 11px;

    min-height: 59px;

    padding: 9px 11px;

    border-radius: 10px;
}


/* Icons */

.company-dd-icon {
    width: 36px;
    height: 36px;

    border-radius: 9px;

    font-size: 14px;
}


/* Text */

.company-dd-content {
    gap: 2px;
}

.company-dd-content strong {
    font-size: 12px;
}

.company-dd-content small {
    font-size: 9.5px;

    line-height: 1.35;
}


/* Arrow */

.company-dd-arrow {
    font-size: 9px;
}


/* =========================================================
   COMPACT HOVER
========================================================= */

.games-v2-card:hover {
    transform: translateY(-1px);
}

.company-dd-card:hover {
    transform: translateX(2px);
}
/* =========================================================
   FIX COMPANY DROPDOWN HOVER GAP
========================================================= */

.company-nav {
    position: relative;

    /* keeps hover area connected to dropdown */
    padding-bottom: 18px;
    margin-bottom: -18px;
}


/* bring dropdown closer */

.company-dropdown {
    top: calc(100% + 4px);
}


/* invisible hover bridge */

.company-nav::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 100%;

    height: 22px;

    background: transparent;

    pointer-events: auto;
}


/* make sure dropdown stays open */

.company-nav:hover .company-dropdown,
.company-nav:focus-within .company-dropdown,
.company-dropdown:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0);
}
/* =========================================================
   SERVOMIX LAUNCHER
   MOBILE PLAN ROW + DEPLOY FIX
========================================================= */

@media (max-width: 700px) {

    .launcher-plan-row {
        grid-template-columns: 46px minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;

        align-items: center !important;

        min-height: 92px !important;

        gap: 6px 10px !important;

        padding: 10px !important;
    }


    /* Block / mob icon */

    .launcher-plan-block {
        grid-column: 1 !important;
        grid-row: 1 / 3 !important;

        align-self: center !important;
    }


    /* Plan name + RAM */

    .launcher-plan-info {
        grid-column: 2 !important;
        grid-row: 1 !important;

        min-width: 0 !important;
    }


    /* Price stays at right */

    .launcher-plan-price {
        grid-column: 3 !important;
        grid-row: 1 !important;

        align-self: center !important;

        text-align: right !important;
    }


    /* Deploy sits UNDER name, not across next card */

    .launcher-deploy-btn,
    .palworld-deploy-btn {
        position: static !important;

        grid-column: 2 / 4 !important;
        grid-row: 2 !important;

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

        margin: 2px 0 0 !important;

        transform: none !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 8px !important;

        font-size: 9px !important;
    }

}
/* =========================================================
   SERVOMIX MOBILE NAVBAR FIX
========================================================= */

@media (max-width: 768px) {

    /* HEADER */

    .header {
        top: 40px !important;
        padding: 8px 10px 0 !important;
    }


    /* NAVBAR */

    .header .navbar {
        width: 100% !important;
        height: 68px !important;
        min-height: 68px !important;

        padding: 0 14px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        border-radius: 18px !important;

        overflow: hidden !important;
    }


    /* LOGO */

    .header .logo {
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .header .logo img {
        width: 145px !important;
        height: auto !important;

        max-width: 145px !important;
    }


    /* REMOVE DESKTOP LINKS ON MOBILE */

    .header .nav-links {
        display: none !important;
    }


    /* REMOVE DESKTOP RIGHT CONTROLS */

    .header .language-selector,
    .header .client-btn {
        display: none !important;
    }


    /* KEEP DISCORD SMALL */

    .header .nav-right {
        margin-left: auto !important;
        gap: 8px !important;
    }

    .header .discord-btn {
        width: 42px !important;
        height: 42px !important;

        margin: 0 !important;

        border-radius: 12px !important;
    }

    .header .discord-btn svg,
    .header .discord-btn i {
        width: 20px !important;
        height: 20px !important;

        font-size: 20px !important;
    }


    /* HERO SPACE BELOW NAV */

    body .hero {
        padding-top: 145px !important;
    }

}
/* =========================================================
   SERVOMIX MOBILE NAVBAR — KEEP ALL NAV BUTTONS
========================================================= */

@media (max-width: 768px) {

    .header {
        top: 40px !important;
        padding: 8px 10px 0 !important;
    }

    .header .navbar {
        width: 100% !important;
        height: auto !important;
        min-height: 118px !important;

        padding: 10px 12px !important;

        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: 58px auto !important;

        align-items: center !important;

        border-radius: 18px !important;

        overflow: visible !important;
    }


    /* LOGO */

    .header .logo {
        grid-column: 1 !important;
        grid-row: 1 !important;

        margin: 0 !important;
    }

    .header .logo img {
        width: 150px !important;
        height: auto !important;
    }


    /* DISCORD */

    .header .nav-right {
        grid-column: 2 !important;
        grid-row: 1 !important;

        margin: 0 !important;
    }

    .header .discord-btn {
        width: 42px !important;
        height: 42px !important;

        margin: 0 !important;

        border-radius: 12px !important;
    }


    /* HIDE ONLY THESE */

    .header .language-selector,
    .header .client-btn {
        display: none !important;
    }


    /* =====================================================
       NAV LINKS — SECOND ROW
    ===================================================== */

    .header .nav-links {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        width: 100% !important;

        display: flex !important;
        align-items: center !important;

        gap: 8px !important;

        margin: 4px 0 0 !important;
        padding: 0 !important;

        overflow-x: auto !important;
        overflow-y: visible !important;

        scrollbar-width: none;

        justify-content: flex-start !important;
    }

    .header .nav-links::-webkit-scrollbar {
        display: none;
    }


    .header .nav-links > li {
        flex: 0 0 auto !important;
    }


    .header .nav-links a {
        height: 38px !important;

        padding: 0 11px !important;

        gap: 6px !important;

        border: 1px solid rgba(255,255,255,.07) !important;
        border-radius: 9px !important;

        background: rgba(255,255,255,.025) !important;

        font-size: 11px !important;

        white-space: nowrap !important;
    }


    .header .nav-links a > svg:first-child,
    .header .nav-links a > i:first-child {
        width: 15px !important;
        height: 15px !important;

        font-size: 15px !important;
    }


    .header .nav-links .arrow {
        width: 10px !important;
        height: 10px !important;
    }


    /* HERO MOVES DOWN FOR 2-ROW NAVBAR */

    body .hero {
        padding-top: 195px !important;
    }

}
/* =========================================================
   MOBILE NAVBAR — COMPACT WITHOUT LOGO
========================================================= */

@media (max-width: 768px) {

    /* Hide ServoMix logo */
    .header .logo {
        display: none !important;
    }


    /* Make navbar single compact row */
    .header .navbar {
        min-height: 64px !important;
        height: 64px !important;

        padding: 8px 10px !important;

        display: flex !important;
        align-items: center !important;

        gap: 8px !important;
    }


    /* Navigation */
    .header .nav-links {
        flex: 1 !important;

        display: flex !important;
        align-items: center !important;

        gap: 6px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: auto !important;
        scrollbar-width: none;
    }

    .header .nav-links::-webkit-scrollbar {
        display: none;
    }


    /* Individual buttons */
    .header .nav-links a {
        height: 40px !important;

        padding: 0 10px !important;

        font-size: 11px !important;

        border-radius: 9px !important;

        white-space: nowrap !important;
    }


    /* Discord stays on right */
    .header .nav-right {
        flex: 0 0 auto !important;

        margin: 0 !important;
    }

    .header .discord-btn {
        width: 40px !important;
        height: 40px !important;
    }


    /* MOBILE — SHOW LANGUAGE + CLIENT AREA */

@media (max-width: 768px) {

    .header .language-selector {
        display: flex !important;

        width: 40px !important;
        height: 40px !important;

        padding: 0 !important;
        flex: 0 0 40px !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 9px !important;
    }

    /* Hide language arrow/text — keep flag */
    .header .language-selector .arrow,
    .header .language-selector .language-text {
        display: none !important;
    }


    /* Client Area compact icon button */
    .header .client-btn {
        display: flex !important;

        width: 40px !important;
        height: 40px !important;

        padding: 0 !important;
        flex: 0 0 40px !important;

        align-items: center !important;
        justify-content: center !important;

        border-radius: 9px !important;
    }

    /* Hide Client Area text on mobile */
    .header .client-btn span {
        display: none !important;
    }


    /* Right controls */
    .header .nav-right {
        display: flex !important;
        align-items: center !important;

        gap: 6px !important;

        margin-left: auto !important;
    }


    .header .discord-btn {
        width: 40px !important;
        height: 40px !important;

        flex: 0 0 40px !important;
    }

}


    /* Navbar is shorter now, reduce hero gap */
    body .hero {
        padding-top: 140px !important;
    }

}
/* =========================================================
   MOBILE NAVBAR — FIX RIGHT SIDE OVERLAP
========================================================= */

@media (max-width: 768px) {

    .header .navbar {
        display: flex !important;
        align-items: center !important;

        gap: 6px !important;

        padding: 8px 10px !important;
    }


    /* =====================================================
       LEFT NAV LINKS
    ===================================================== */

    .header .nav-links {
        flex: 1 1 auto !important;

        min-width: 0 !important;
        max-width: none !important;

        gap: 5px !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        scrollbar-width: none;
    }

    .header .nav-links::-webkit-scrollbar {
        display: none;
    }


    .header .nav-links > li {
        flex: 0 0 auto !important;
    }


    .header .nav-links a {
        height: 40px !important;

        padding: 0 9px !important;

        gap: 5px !important;

        font-size: 11px !important;
    }


    /* smaller arrows */

    .header .nav-links .arrow {
        width: 9px !important;
        height: 9px !important;
    }


    /* =====================================================
       RIGHT SIDE
    ===================================================== */

    .header .nav-right {
        flex: 0 0 auto !important;

        display: flex !important;
        align-items: center !important;

        gap: 5px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* Discord */

    .header .discord-btn {
        width: 40px !important;
        height: 40px !important;

        flex: 0 0 40px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* =====================================================
       LANGUAGE
    ===================================================== */

    .header .language,
    .header .language-selector {
        width: 40px !important;

        flex: 0 0 40px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .header .language-btn {
        width: 40px !important;
        height: 40px !important;

        min-width: 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        gap: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 10px !important;
    }


    .header .flag-icon {
        width: 23px !important;
        height: 23px !important;

        margin: 0 !important;
    }


    .header .language-btn .arrow {
        display: none !important;
    }


    /* =====================================================
       CLIENT AREA
    ===================================================== */

    .header .client-btn {
        width: 40px !important;
        height: 40px !important;

        min-width: 40px !important;
        flex: 0 0 40px !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 10px !important;
    }


    .header .client-btn span {
        display: none !important;
    }

}
/* =========================================================
   DYNAMIC ANNOUNCEMENT FIX
========================================================= */

.announcement {
    position: relative;
    z-index: 9999;
}

.announcement-bar {
    position: relative;
    z-index: 2;
}

.announcement-container {
    position: relative;
    z-index: 3;
}

.announcement-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.announcement-admin-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    color: #55ffb0;
}

.announcement-admin-icon svg {
    width: 17px;
    height: 17px;

    stroke-width: 2.3;
}

.announcement-link {
    position: relative !important;
    z-index: 20 !important;

    pointer-events: auto !important;
    cursor: pointer !important;
}

.announcement-link * {
    pointer-events: none;
}
/* =========================================================
   WHY SERVOMIX V2
   INTERACTIVE DEPLOYMENT SECTION
========================================================= */

.why-servomix-v2 {
    position: relative;
    overflow: hidden;

    padding: 120px 0;

    background:
        linear-gradient(
            180deg,
            #050914 0%,
            #060b16 50%,
            #050914 100%
        );

    color: #fff;
}


/* subtle background grid */

.why-servomix-v2::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(59, 130, 246, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(59, 130, 246, .035) 1px,
            transparent 1px
        );

    background-size: 72px 72px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 15%,
            black 85%,
            transparent
        );
}


.why-servomix-v2-container {
    position: relative;
    z-index: 2;
}


/* =========================================================
   HEADING
========================================================= */

.why-v2-heading {
    max-width: 900px;

    margin: 0 auto 62px;

    text-align: center;
}


.why-v2-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    min-height: 46px;

    padding: 0 24px;

    margin-bottom: 24px;

    border: 1px solid rgba(59, 130, 246, .55);
    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            rgba(30, 58, 110, .35),
            rgba(12, 22, 43, .55)
        );

    color: #a9c7ff;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .18em;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03);
}


.why-v2-eyebrow span {
    width: 5px;
    height: 5px;

    border: 1px solid #4b91ff;

    transform: rotate(45deg);
}


.why-v2-heading h2 {
    margin: 0;

    color: #f8fafc;

    font-size: clamp(
        42px,
        5vw,
        72px
    );

    font-weight: 800;

    line-height: 1.04;

    letter-spacing: -.045em;
}


.why-v2-heading h2 > span {
    background:
        linear-gradient(
            90deg,
            #4f91ff,
            #8465ff
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


.why-v2-heading p {
    max-width: 650px;

    margin:
        22px auto 0;

    color: #8d9ab0;

    font-size: 16px;

    line-height: 1.7;
}


/* =========================================================
   DEPLOYMENT PANEL
========================================================= */

.smx-deploy-demo {
    position: relative;

    max-width: 1400px;

    margin: 0 auto;

    border:
        1px solid
        rgba(91, 119, 162, .34);

    border-radius: 16px;

    background:
        rgba(7, 14, 27, .72);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* =========================================================
   DEPLOYMENT HEADER
========================================================= */

.smx-deploy-head {
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 0 24px;

    border-bottom:
        1px solid
        rgba(78, 103, 142, .18);
}


.smx-deploy-status {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #dce6f6;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .12em;
}


.smx-deploy-live-dot {
    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #35e993;

    box-shadow:
        0 0 12px
        rgba(53, 233, 147, .6);
}


.smx-deploy-project {
    color: #68768c;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: .08em;
}


/* =========================================================
   DEPLOYMENT TRACK
========================================================= */

.smx-deploy-track {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    padding:
        44px 28px 38px;
}


/* BASE CONNECTING LINE */

.smx-deploy-track::before {
    content: "";

    position: absolute;

    top: 78px;

    /* center of first step */
    left: calc(100% / 12);

    /* center of last step */
    right: calc(100% / 12);

    height: 2px;

    background: #18263a;
}


/* ACTIVE PROGRESS LINE */

.smx-deploy-progress {
    position: absolute;

    z-index: 2;

    top: 78px;

    /* start from center of first circle */
    left: calc(100% / 12);

    width: 0;

    height: 2px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #8b5cf6,
            #3b82f6,
            #22d3ee,
            #34d399
        );

    transition:
        width .7s
        cubic-bezier(.22, 1, .36, 1);
}


/* =========================================================
   DEPLOYMENT STEP
========================================================= */

.smx-deploy-step {
    position: relative;
    z-index: 4;

    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 0 12px;

    border: 0;

    background: transparent;

    color: inherit;

    font-family: inherit;

    text-align: center;

    cursor: pointer;
}


/* icon */

.smx-step-icon {
    position: relative;

    width: 70px;
    height: 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    border:
        1px solid
        #263954;

    border-radius: 50%;

    background: #091321;

    color: #60728f;

    transition:
        border-color .3s ease,
        color .3s ease,
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}


.smx-step-icon svg {
    width: 25px;
    height: 25px;

    stroke-width: 1.8;
}


/* little connection point */

.smx-step-icon::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -9px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #263954;

    transform:
        translateX(-50%);

    transition:
        background .3s ease,
        box-shadow .3s ease;
}


/* time */

.smx-step-time {
    margin-bottom: 8px;

    color: #55657d;

    font-size: 11px;
    font-weight: 700;

    transition:
        color .3s ease;
}


/* title */

.smx-deploy-step strong {
    min-height: 42px;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    margin-bottom: 5px;

    color: #cbd5e1;

    font-size: 13px;
    font-weight: 700;

    line-height: 1.35;

    transition:
        color .3s ease;
}


/* description */

.smx-deploy-step small {
    max-width: 150px;

    color: #66758b;

    font-size: 10px;

    line-height: 1.55;

    transition:
        color .3s ease;
}


/* =========================================================
   STEP HOVER
========================================================= */

.smx-deploy-step:hover
.smx-step-icon {

    transform:
        translateY(-3px);

    border-color:
        rgba(79, 145, 255, .65);

    color: #70a5ff;
}


/* =========================================================
   ACTIVE STEP
========================================================= */

.smx-deploy-step.active
.smx-step-icon {

    border-color: #4f8cff;

    background:
        rgba(30, 73, 145, .18);

    color: #65a0ff;

    box-shadow:
        0 0 0 5px
        rgba(59, 130, 246, .05);
}


.smx-deploy-step.active
.smx-step-icon::after {

    background: #3b82f6;

    box-shadow:
        0 0 10px
        rgba(59, 130, 246, .7);
}


.smx-deploy-step.active
.smx-step-time {

    color: #5797ff;
}


.smx-deploy-step.active strong {
    color: #ffffff;
}


/* =========================================================
   COMPLETED STEP
========================================================= */

.smx-deploy-step.completed
.smx-step-icon {

    border-color:
        rgba(79, 145, 255, .65);

    color: #4f91ff;
}


.smx-deploy-step.completed
.smx-step-icon::after {

    background: #4f91ff;
}


.smx-deploy-step.completed
.smx-step-time {

    color: #608dce;
}


.smx-deploy-step.completed strong {
    color: #dce7f7;
}


/* =========================================================
   FINAL ONLINE STEP
========================================================= */

.smx-deploy-step.online
.smx-step-icon {

    border-color: #34d399;

    background:
        rgba(16, 185, 129, .08);

    color: #34d399;

    box-shadow:
        0 0 0 5px
        rgba(52, 211, 153, .04),
        0 0 25px
        rgba(52, 211, 153, .10);
}


.smx-deploy-step.online
.smx-step-icon::after {

    background: #34d399;

    box-shadow:
        0 0 12px
        rgba(52, 211, 153, .8);
}


.smx-deploy-step.online
.smx-step-time,
.smx-deploy-step.online strong {

    color: #39dfa0;
}


/* =========================================================
   DEPLOYMENT FOOTER
========================================================= */

.smx-deploy-footer {
    min-height: 70px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 12px 24px;

    border-top:
        1px solid
        rgba(78, 103, 142, .18);
}


.smx-deploy-footer > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.smx-deploy-footer-label {
    color: #58677d;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .14em;
}


.smx-deploy-footer strong {
    color: #dce7f7;

    font-size: 12px;
}


.smx-deploy-reset {
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 0 13px;

    border:
        1px solid
        #213149;

    border-radius: 8px;

    background: #0b1524;

    color: #8796ac;

    font-family: inherit;

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;

    transition:
        border-color .2s ease,
        color .2s ease,
        background .2s ease;
}


.smx-deploy-reset svg {
    width: 14px;
    height: 14px;
}


.smx-deploy-reset:hover {
    border-color: #3b5d8c;

    background: #0e1a2c;

    color: #dce7f7;
}


/* =========================================================
   RESPONSIBILITY SECTION
========================================================= */

.why-v2-responsibility {
    max-width: 1120px;

    display: grid;

    grid-template-columns:
        1fr 100px 1fr;

    gap: 45px;

    margin:
        75px auto 0;
}


.why-v2-side-label {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 27px;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: .1em;
}


.why-v2-side-label::after {
    content: "";

    flex: 1;

    height: 1px;

    background: #1b2b42;
}


.why-v2-user
.why-v2-side-label {
    color: #9a6cff;
}


.why-v2-servomix
.why-v2-side-label {
    color: #4595ff;
}


/* =========================================================
   LIST
========================================================= */

.why-v2-list {
    display: flex;
    flex-direction: column;

    gap: 20px;
}


.why-v2-list > div {
    display: grid;

    grid-template-columns:
        24px 120px 1fr;

    align-items: center;

    gap: 12px;
}


.why-v2-list svg {
    width: 18px;
    height: 18px;

    stroke-width: 1.8;
}


.why-v2-user
.why-v2-list svg {
    color: #9565ff;
}


.why-v2-servomix
.why-v2-list svg {
    color: #3f91ff;
}


.why-v2-list span {
    color: #eef3fa;

    font-size: 13px;
    font-weight: 600;
}


.why-v2-list small {
    color: #738197;

    font-size: 10px;

    line-height: 1.45;
}


/* =========================================================
   CENTER VS
========================================================= */

.why-v2-divider {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
}


.why-v2-divider::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            #1f324d 20%,
            #1f324d 80%,
            transparent
        );
}


.why-v2-divider span {
    position: relative;
    z-index: 2;

    width: 54px;
    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid
        #263a58;

    border-radius: 50%;

    background: #07101d;

    color: #65758c;

    font-size: 12px;
    font-weight: 800;
}


/* =========================================================
   BOTTOM MESSAGE
========================================================= */

.why-v2-bottom {
    max-width: 900px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 18px;

    margin:
        70px auto 0;

    padding-top: 30px;

    border-top:
        1px solid
        #16243a;
}


.why-v2-bottom > svg {
    width: 26px;
    height: 26px;

    color: #608eff;
}


.why-v2-bottom p {
    margin: 0;

    color: #8997ac;

    font-size: 18px;

    line-height: 1.5;
}


.why-v2-bottom strong {
    background:
        linear-gradient(
            90deg,
            #4c96ff,
            #9665ff
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .smx-deploy-track {
        overflow-x: auto;

        grid-template-columns:
            repeat(6, 180px);

        padding-left: 30px;
        padding-right: 30px;
    }


    .smx-deploy-track::before,
    .smx-deploy-progress {
        display: none;
    }


    .why-v2-responsibility {
        grid-template-columns:
            1fr 60px 1fr;

        gap: 25px;
    }


    .why-v2-list > div {
        grid-template-columns:
            24px 100px 1fr;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

    .why-servomix-v2 {
        padding:
            85px 0;
    }


    .why-v2-heading {
        margin-bottom: 42px;
    }


    .why-v2-heading h2 {
        font-size:
            clamp(
                36px,
                11vw,
                52px
            );
    }


    .why-v2-heading p {
        padding: 0 10px;

        font-size: 14px;
    }


    .smx-deploy-head {
        padding: 0 15px;
    }


    .smx-deploy-project {
        display: none;
    }


    .smx-deploy-track {
        gap: 5px;
    }


    .smx-deploy-footer {
        align-items: flex-start;
        flex-direction: column;

        padding: 15px;
    }


    .smx-deploy-reset {
        width: 100%;
    }


    .why-v2-responsibility {
        display: flex;
        flex-direction: column;

        gap: 45px;

        margin-top: 60px;
    }


    .why-v2-divider {
        display: none;
    }


    .why-v2-list > div {
        grid-template-columns:
            24px 110px 1fr;
    }


    .why-v2-bottom {
        align-items: flex-start;

        margin-top: 55px;

        padding-left: 10px;
        padding-right: 10px;
    }


    .why-v2-bottom p {
        font-size: 15px;
    }

}