:root{
 --bg:#020806;
 --surface:#06110c;
 --surface2:#091a11;
 --surface3:#0d2116;
 --accent:#57f18a;
 --accent2:#28cf62;
 --accentSoft:rgba(87,241,138,.10);
 --text:#f6fff8;
 --muted:#8fa398;
 --muted2:#64786c;
 --border:rgba(106,255,157,.13);
 --borderStrong:rgba(106,255,157,.30);
 --shadow:0 24px 70px rgba(0,0,0,.42);
}

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

html{
 scroll-behavior:smooth;
}

body{
 min-height:100vh;
 color:var(--text);
 background:
 radial-gradient(circle at 15% 7%,rgba(57,240,115,.11),transparent 26%),
 radial-gradient(circle at 92% 28%,rgba(36,193,91,.07),transparent 28%),
 linear-gradient(180deg,#010604,#031009);
 font-family:Inter,Arial,Helvetica,sans-serif;
 overflow-x:hidden;
}

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

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

button,input{
 font:inherit;
}

::selection{
 background:var(--accent);
 color:#04140a;
}

.topbar{
 position:sticky;
 top:0;
 z-index:1000;
 border-bottom:1px solid var(--border);
 background:rgba(2,9,6,.80);
 backdrop-filter:blur(20px);
}

.nav{
 width:min(1280px,94%);
 min-height:74px;
 margin:auto;
 display:flex;
 justify-content:space-between;
 align-items:center;
 gap:18px;
}

.brand{
 display:flex;
 align-items:center;
 gap:11px;
 font-size:18px;
 font-weight:950;
 letter-spacing:.8px;
 color:var(--accent);
}

.brand img{
 width:38px;
 height:38px;
 object-fit:contain;
 border-radius:11px;
}

.navLinks{
 display:flex;
 gap:26px;
 align-items:center;
}

.navLinks a{
 color:#c9d7ce;
 font-size:14px;
 font-weight:800;
 transition:.2s ease;
}

.navLinks a:hover{
 color:var(--accent);
}

.menuBtn{
 display:none;
 min-width:70px;
 height:44px;
 border:1px solid var(--border);
 border-radius:14px;
 color:#fff;
 background:rgba(255,255,255,.025);
 cursor:pointer;
}

.ambient{
 position:fixed;
 inset:0;
 pointer-events:none;
 overflow:hidden;
 z-index:-1;
}

.glow{
 position:absolute;
 width:440px;
 height:440px;
 border-radius:999px;
 filter:blur(110px);
 background:rgba(74,245,128,.11);
 animation:floatGlow 12s ease-in-out infinite alternate;
}

.glow.a{
 left:-180px;
 top:100px;
}

.glow.b{
 right:-180px;
 top:40%;
 animation-delay:-5s;
}

@keyframes floatGlow{
 from{transform:translateY(0) scale(1)}
 to{transform:translateY(-45px) scale(1.18)}
}

/* HOME */

.home{
 width:min(1280px,94%);
 margin:auto;
 padding-bottom:90px;
}

.hero{
 margin-top:34px;
 min-height:450px;
 position:relative;
 overflow:hidden;
 border:1px solid var(--border);
 border-radius:34px;
 padding:56px;
 display:flex;
 align-items:center;
 background:
 linear-gradient(125deg,rgba(9,31,19,.98),rgba(3,13,8,.95));
 box-shadow:var(--shadow);
}

.hero:after{
 content:"";
 position:absolute;
 width:650px;
 height:650px;
 border-radius:999px;
 right:-210px;
 top:-250px;
 background:radial-gradient(circle,rgba(87,241,138,.19),transparent 66%);
 animation:heroPulse 8s ease-in-out infinite;
}

@keyframes heroPulse{
 0%,100%{transform:scale(1);opacity:.65}
 50%{transform:scale(1.15);opacity:1}
}

.heroContent{
 position:relative;
 z-index:2;
 max-width:820px;
}

.kicker{
 display:inline-flex;
 align-items:center;
 min-height:34px;
 padding:0 14px;
 border-radius:999px;
 border:1px solid var(--borderStrong);
 background:rgba(87,241,138,.055);
 color:var(--accent);
 font-size:11px;
 font-weight:950;
 letter-spacing:1.4px;
 text-transform:uppercase;
}

.hero h1{
 margin-top:22px;
 max-width:780px;
 font-size:clamp(47px,7vw,82px);
 line-height:.98;
 letter-spacing:-3.2px;
}

.hero h1 span{
 color:var(--accent);
}

.hero p{
 margin-top:22px;
 max-width:700px;
 color:var(--muted);
 line-height:1.7;
 font-size:18px;
}

.heroButtons{
 display:flex;
 flex-wrap:wrap;
 gap:11px;
 margin-top:28px;
}

.btnPrimary,
.btnGhost{
 min-height:54px;
 padding:0 23px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 border-radius:16px;
 font-weight:900;
 transition:.24s ease;
}

.btnPrimary{
 color:#02190a;
 background:linear-gradient(135deg,var(--accent),var(--accent2));
 box-shadow:0 13px 40px rgba(71,232,117,.18);
}

.btnGhost{
 border:1px solid var(--borderStrong);
 background:rgba(255,255,255,.018);
}

.btnPrimary:hover,
.btnGhost:hover{
 transform:translateY(-3px);
}

.searchBox{
 margin-top:22px;
}

.searchBox input{
 width:100%;
 height:62px;
 border-radius:18px;
 border:1px solid var(--border);
 outline:none;
 padding:0 21px;
 background:rgba(7,20,13,.83);
 color:#fff;
 font-size:15px;
 box-shadow:0 12px 35px rgba(0,0,0,.16);
}

.searchBox input:focus{
 border-color:var(--borderStrong);
 box-shadow:0 0 0 4px rgba(87,241,138,.045);
}

.section{
 margin-top:48px;
}

.sectionTitle h2{
 font-size:33px;
 letter-spacing:-1px;
}

.sectionTitle p{
 margin-top:6px;
 color:var(--muted);
}

.grid{
 margin-top:21px;
 display:grid;
 grid-template-columns:repeat(5,minmax(0,1fr));
 gap:14px;
}

.card{
 overflow:hidden;
 position:relative;
 min-width:0;
 border-radius:23px;
 border:1px solid var(--border);
 background:
 linear-gradient(180deg,rgba(9,26,17,.96),rgba(4,13,8,.98));
 transition:.25s ease;
}

.card:hover{
 border-color:var(--borderStrong);
 transform:translateY(-7px);
 box-shadow:0 20px 50px rgba(0,0,0,.33);
}

.cardLogoArea{
 height:158px;
 display:flex;
 align-items:center;
 justify-content:center;
 border-bottom:1px solid var(--border);
 background:
 radial-gradient(circle at center,rgba(87,241,138,.12),transparent 64%);
}

.cardLogo{
 width:88px;
 height:88px;
 object-fit:contain;
 border-radius:21px;
 transition:.28s ease;
 filter:drop-shadow(0 14px 28px rgba(0,0,0,.34));
}

.card:hover .cardLogo{
 transform:scale(1.08);
}

.cardBody{
 padding:18px;
}

.cardType{
 color:var(--accent);
 font-size:10px;
 letter-spacing:1.05px;
 font-weight:950;
}

.card h3{
 margin-top:8px;
 font-size:19px;
 line-height:1.2;
}

.card p{
 margin-top:9px;
 min-height:61px;
 color:var(--muted);
 font-size:12px;
 line-height:1.55;
}

.cardCta{
 display:flex;
 justify-content:space-between;
 align-items:center;
 margin-top:15px;
 padding-top:13px;
 border-top:1px solid rgba(255,255,255,.05);
 color:#caffd9;
 font-size:12px;
 font-weight:900;
}

/* DETAIL */

.detail{
 width:min(1120px,94%);
 margin:38px auto 85px;
}

.detailHero{
 position:relative;
 overflow:hidden;
 padding:33px;
 border:1px solid var(--border);
 border-radius:32px;
 background:
 linear-gradient(135deg,rgba(8,27,17,.98),rgba(3,13,8,.97));
 box-shadow:var(--shadow);
}

.detailHero:before{
 content:"";
 position:absolute;
 right:-180px;
 top:-220px;
 width:560px;
 height:560px;
 border-radius:999px;
 background:radial-gradient(circle,rgba(87,241,138,.17),transparent 68%);
}

.detailMain{
 position:relative;
 z-index:2;
 display:grid;
 grid-template-columns:190px 1fr;
 align-items:center;
 gap:28px;
}

.logoPanel{
 height:190px;
 display:flex;
 align-items:center;
 justify-content:center;
 border:1px solid var(--borderStrong);
 border-radius:28px;
 background:
 radial-gradient(circle,rgba(87,241,138,.13),transparent 63%),
 #06130c;
}

.logoPanel img{
 width:122px;
 height:122px;
 object-fit:contain;
 border-radius:26px;
 filter:drop-shadow(0 20px 30px rgba(0,0,0,.4));
 animation:logoFloat 5s ease-in-out infinite;
}

@keyframes logoFloat{
 0%,100%{transform:translateY(0)}
 50%{transform:translateY(-7px)}
}

.detailTitle h1{
 margin-top:13px;
 font-size:clamp(40px,6vw,64px);
 letter-spacing:-2.3px;
 line-height:1;
}

.detailTitle p{
 margin-top:14px;
 color:var(--muted);
 font-size:16px;
 line-height:1.7;
 max-width:720px;
}

.tags{
 display:flex;
 flex-wrap:wrap;
 gap:8px;
 margin-top:16px;
}

.tag{
 padding:8px 12px;
 border-radius:999px;
 border:1px solid rgba(255,255,255,.08);
 background:rgba(255,255,255,.025);
 color:#d8e7dd;
 font-size:11px;
 font-weight:850;
}

.quickStats{
 position:relative;
 z-index:2;
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:10px;
 margin-top:24px;
}

.stat{
 border-radius:17px;
 border:1px solid var(--border);
 background:rgba(255,255,255,.018);
 padding:15px;
}

.stat small{
 display:block;
 color:var(--muted2);
 font-size:9px;
 letter-spacing:.9px;
 text-transform:uppercase;
}

.stat strong{
 display:block;
 margin-top:6px;
 font-size:13px;
}

.downloadArea{
 position:relative;
 z-index:2;
 margin-top:22px;
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:10px;
}

.downloadBtn{
 position:relative;
 overflow:hidden;
 min-height:59px;
 padding:0 17px;
 border-radius:17px;
 display:flex;
 align-items:center;
 justify-content:center;
 text-align:center;
 color:#021b09;
 background:linear-gradient(135deg,#67f699,#27d466);
 font-size:15px;
 font-weight:950;
 transition:.24s ease;
 box-shadow:0 14px 38px rgba(59,230,110,.15);
}

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

.downloadBtn:after{
 content:"";
 position:absolute;
 height:100%;
 width:42%;
 left:-80%;
 top:0;
 transform:skewX(-20deg);
 background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
 animation:shine 4s linear infinite;
}

@keyframes shine{
 to{left:160%}
}

.noDownload{
 min-height:59px;
 border-radius:17px;
 display:flex;
 align-items:center;
 justify-content:center;
 padding:0 15px;
 border:1px dashed var(--borderStrong);
 color:var(--muted);
 background:rgba(255,255,255,.015);
 text-align:center;
 font-size:13px;
 font-weight:800;
}

.actions{
 position:relative;
 z-index:2;
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:10px;
 margin-top:10px;
}

.action{
 height:52px;
 border-radius:15px;
 border:1px solid var(--border);
 background:#08170f;
 color:#e7f5eb;
 font-weight:850;
 cursor:pointer;
 transition:.22s ease;
}

.action:hover{
 border-color:var(--borderStrong);
 transform:translateY(-2px);
}

.panel{
 margin-top:17px;
 padding:26px;
 border-radius:26px;
 border:1px solid var(--border);
 background:linear-gradient(180deg,rgba(8,22,14,.93),rgba(4,13,8,.95));
 box-shadow:0 18px 50px rgba(0,0,0,.17);
}

.panel h2{
 font-size:25px;
 letter-spacing:-.6px;
}

.panel p{
 margin-top:10px;
 color:var(--muted);
 line-height:1.75;
}

.infoGrid{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:11px;
 margin-top:18px;
}

.infoCard{
 padding:17px;
 border-radius:17px;
 border:1px solid rgba(255,255,255,.06);
 background:rgba(255,255,255,.018);
}

.infoCard strong{
 display:block;
 font-size:14px;
}

.infoCard span{
 display:block;
 margin-top:6px;
 color:var(--muted);
 font-size:12px;
 line-height:1.55;
}

.footer{
 border-top:1px solid var(--border);
 padding:33px 20px;
 text-align:center;
 color:#607469;
 font-size:12px;
}

.reveal{
 opacity:0;
 transform:translateY(18px) scale(.99);
 transition:
 opacity .62s ease,
 transform .62s ease;
}

.reveal.visible{
 opacity:1;
 transform:none;
}

/* TABLET */

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

/* MOBILE */

@media(max-width:700px){

 .nav{
   min-height:68px;
 }

 .brand{
   font-size:16px;
 }

 .menuBtn{
   display:block;
 }

 .navLinks{
   display:none;
   position:absolute;
   left:3%;
   right:3%;
   top:72px;
   flex-direction:column;
   align-items:stretch;
   gap:0;
   padding:9px;
   border:1px solid var(--borderStrong);
   border-radius:20px;
   background:rgba(4,16,10,.98);
   box-shadow:0 25px 60px rgba(0,0,0,.45);
 }

 .navLinks.open{
   display:flex;
 }

 .navLinks a{
   padding:14px 15px;
   border-radius:12px;
 }

 .navLinks a:hover{
   background:rgba(87,241,138,.06);
 }

 .home{
   width:94%;
 }

 .hero{
   min-height:0;
   margin-top:20px;
   padding:29px 22px 31px;
   border-radius:25px;
 }

 .kicker{
   min-height:31px;
   font-size:9px;
   padding:0 11px;
 }

 .hero h1{
   margin-top:18px;
   font-size:44px;
   line-height:.98;
   letter-spacing:-2.3px;
 }

 .hero p{
   margin-top:17px;
   font-size:14px;
   line-height:1.62;
 }

 .heroButtons{
   display:grid;
   grid-template-columns:1fr 1fr;
   margin-top:22px;
 }

 .btnPrimary,
 .btnGhost{
   min-height:50px;
   padding:0 12px;
   border-radius:14px;
   font-size:13px;
 }

 .searchBox{
   margin-top:15px;
 }

 .searchBox input{
   height:55px;
   border-radius:16px;
   font-size:13px;
 }

 .section{
   margin-top:35px;
 }

 .sectionTitle h2{
   font-size:29px;
 }

 .sectionTitle p{
   font-size:13px;
 }

 .grid{
   grid-template-columns:repeat(2,minmax(0,1fr));
   gap:10px;
   margin-top:17px;
 }

 .card{
   border-radius:20px;
 }

 .cardLogoArea{
   height:126px;
 }

 .cardLogo{
   width:71px;
   height:71px;
   border-radius:17px;
 }

 .cardBody{
   padding:13px;
 }

 .cardType{
   font-size:8px;
 }

 .card h3{
   margin-top:6px;
   font-size:15px;
 }

 .card p{
   min-height:0;
   margin-top:7px;
   font-size:10.5px;
   line-height:1.5;
 }

 .cardCta{
   margin-top:10px;
   padding-top:10px;
   font-size:10px;
 }

 .detail{
   width:94%;
   margin-top:20px;
 }

 .detailHero{
   padding:20px;
   border-radius:25px;
 }

 .detailMain{
   grid-template-columns:105px 1fr;
   gap:15px;
   align-items:center;
 }

 .logoPanel{
   height:105px;
   border-radius:22px;
 }

 .logoPanel img{
   width:78px;
   height:78px;
   border-radius:18px;
 }

 .detailTitle .kicker{
   font-size:8px;
   min-height:28px;
 }

 .detailTitle h1{
   margin-top:10px;
   font-size:31px;
   letter-spacing:-1.5px;
 }

 .detailTitle p{
   margin-top:9px;
   font-size:12px;
   line-height:1.55;
 }

 .tags{
   margin-top:10px;
   gap:6px;
 }

 .tag{
   padding:6px 8px;
   font-size:8.5px;
 }

 .quickStats{
   grid-template-columns:1fr 1fr;
   gap:8px;
   margin-top:17px;
 }

 .stat{
   padding:12px;
   border-radius:15px;
 }

 .stat strong{
   font-size:11px;
 }

 .downloadArea{
   grid-template-columns:1fr;
   margin-top:17px;
 }

 .downloadBtn,
 .noDownload{
   min-height:52px;
   border-radius:15px;
   font-size:13px;
 }

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

 .action{
   height:47px;
   font-size:12px;
 }

 .panel{
   margin-top:12px;
   padding:19px;
   border-radius:22px;
 }

 .panel h2{
   font-size:21px;
 }

 .panel p{
   font-size:12px;
   line-height:1.65;
 }

 .infoGrid{
   grid-template-columns:1fr 1fr;
   gap:8px;
 }

 .infoCard{
   padding:13px;
 }

 .infoCard strong{
   font-size:12px;
 }

 .infoCard span{
   font-size:10px;
 }

 .footer{
   padding:27px 15px;
   font-size:10px;
 }

}

@media(max-width:365px){

 .hero h1{
   font-size:38px;
 }

 .detailMain{
   grid-template-columns:88px 1fr;
 }

 .logoPanel{
   height:88px;
 }

 .logoPanel img{
   width:65px;
   height:65px;
 }

 .detailTitle h1{
   font-size:27px;
 }

}

/* =====================================================
   MINECRFTMODS UX V2
   ===================================================== */

/* Allow normal browser interaction */
html,
body,
*{
    -webkit-user-select:text;
    user-select:text;
    -webkit-touch-callout:default;
}

button,
a{
    -webkit-user-select:none;
    user-select:none;
}

/* ---------------- BACK BUTTON ---------------- */

.backRow{
    width:min(1120px,94%);
    margin:20px auto -15px;
    position:relative;
    z-index:20;
}

.backButton{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:15px;
    border:1px solid rgba(105,255,158,.18);
    background:rgba(7,22,14,.72);
    color:#fff;
    font-size:25px;
    font-weight:400;
    cursor:pointer;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    transition:
        transform .22s ease,
        background .22s ease,
        border-color .22s ease;
}

.backButton:hover{
    transform:translateX(-3px);
    border-color:rgba(105,255,158,.42);
    background:rgba(14,42,25,.85);
}

/* ---------------- GLASS MOBILE MENU ---------------- */

@media(max-width:700px){

    .nav{
        position:relative;
    }

    .menuBtn{
        position:relative;
        z-index:1002;
        width:72px;
        min-width:72px;
        height:44px;
        border-radius:15px;
        border:1px solid rgba(105,255,158,.15);
        background:rgba(7,20,13,.48);
        color:#fff;
        backdrop-filter:blur(18px);
        -webkit-backdrop-filter:blur(18px);
        transition:
            background .25s ease,
            border-color .25s ease,
            transform .25s ease;
    }

    .menuBtn.active{
        border-color:rgba(105,255,158,.38);
        background:rgba(18,51,31,.62);
        transform:scale(.96);
    }

    .navLinks{
        display:flex !important;

        position:absolute;
        left:0;
        right:0;
        top:61px;

        flex-direction:column;
        gap:5px;

        padding:11px;

        border:1px solid rgba(107,255,160,.16);
        border-radius:22px;

        background:
            linear-gradient(
                145deg,
                rgba(8,27,17,.82),
                rgba(2,12,7,.77)
            );

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

        backdrop-filter:blur(28px) saturate(145%);
        -webkit-backdrop-filter:blur(28px) saturate(145%);

        opacity:0;
        visibility:hidden;

        transform:
            translateY(-16px)
            scale(.96);

        transform-origin:top center;

        pointer-events:none;

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

    .navLinks.open{
        opacity:1;
        visibility:visible;
        transform:
            translateY(0)
            scale(1);
        pointer-events:auto;
    }

    .navLinks a{
        width:100%;
        padding:14px 16px;
        border-radius:14px;
        color:#d9e8de;
        font-size:14px;
        font-weight:850;
        transition:
            background .2s ease,
            color .2s ease,
            transform .2s ease;
    }

    .navLinks a:hover,
    .navLinks a:active{
        color:#63f596;
        background:rgba(84,241,137,.075);
        transform:translateX(3px);
    }

}

/* ---------------- DOWNLOAD PREPARATION OVERLAY ---------------- */

.downloadOverlay{
    position:fixed;
    inset:0;

    z-index:99999;

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

    padding:22px;

    background:rgba(0,8,4,.72);

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

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .28s ease,
        visibility .28s;
}

.downloadOverlay.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.downloadModal{
    width:min(470px,100%);

    padding:30px;

    border-radius:30px;

    border:1px solid rgba(96,255,151,.19);

    background:
        radial-gradient(
            circle at top right,
            rgba(77,242,131,.12),
            transparent 42%
        ),
        rgba(5,19,11,.94);

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

    transform:translateY(20px) scale(.97);

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

.downloadOverlay.show .downloadModal{
    transform:none;
}

.downloadMini{
    color:#5ef28e;
    font-size:10px;
    font-weight:950;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

.downloadModal h3{
    margin-top:10px;
    font-size:30px;
    letter-spacing:-1px;
}

.downloadModal p{
    margin-top:9px;
    color:#90a398;
    font-size:13px;
    line-height:1.6;
}

.downloadPercentage{
    margin-top:26px;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;
}

.downloadPercentage strong{
    font-size:42px;
    letter-spacing:-2px;
}

.downloadStatus{
    padding-bottom:7px;
    color:#94aa9c;
    font-size:12px;
    font-weight:800;
}

.progressTrack{
    position:relative;

    width:100%;
    height:12px;

    margin-top:15px;

    overflow:hidden;

    border-radius:999px;

    border:1px solid rgba(94,245,143,.14);

    background:#07140d;
}

.progressFill{
    position:absolute;
    inset:0 auto 0 0;

    width:0%;

    border-radius:inherit;

    background:
        linear-gradient(
            90deg,
            #29cf62,
            #64f69a
        );

    box-shadow:
        0 0 25px rgba(68,237,123,.34);

    transition:width .12s linear;
}

.progressFill:after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            110deg,
            transparent 0%,
            rgba(255,255,255,.28) 45%,
            transparent 70%
        );

    animation:downloadShine 1.1s linear infinite;
}

@keyframes downloadShine{
    from{
        transform:translateX(-100%);
    }

    to{
        transform:translateX(100%);
    }
}

.downloadCancel{
    width:100%;
    height:48px;

    margin-top:21px;

    border-radius:15px;

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

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

    color:#d8e5dc;

    cursor:pointer;
    font-weight:850;
}

.downloadCancel:hover{
    background:rgba(255,255,255,.05);
}

/* ---------------- MOBILE POLISH ---------------- */

@media(max-width:700px){

    body{
        background:
            radial-gradient(
                circle at 50% -10%,
                rgba(57,239,113,.115),
                transparent 31%
            ),
            #020906;
    }

    .backRow{
        width:94%;
        margin-top:14px;
        margin-bottom:-7px;
    }

    .backButton{
        width:43px;
        height:43px;
        border-radius:14px;
        font-size:22px;
    }

    .detail{
        margin-top:19px;
    }

    .detailHero{
        border-radius:26px;
        box-shadow:
            0 22px 70px rgba(0,0,0,.33),
            inset 0 1px 0 rgba(255,255,255,.025);
    }

    .card{
        box-shadow:
            0 12px 35px rgba(0,0,0,.18);
    }

    .downloadModal{
        padding:24px;
        border-radius:25px;
    }

    .downloadModal h3{
        font-size:26px;
    }

    .downloadPercentage strong{
        font-size:36px;
    }

}


/* =========================================================
   MINECRFTMODS — PREMIUM DARK THEME V3
   Graphite + Violet + Cyan + subtle Gold
   ========================================================= */

:root{
    --bg:#06070a;
    --bg2:#090b10;

    --surface:#0d1016;
    --surface2:#11151d;
    --surface3:#151a23;

    --border:rgba(255,255,255,.075);
    --borderStrong:rgba(255,255,255,.12);

    --text:#f5f7fb;
    --muted:#8d96a8;
    --muted2:#697184;

    --violet:#8b5cf6;
    --violet2:#6d4aff;

    --cyan:#22d3ee;
    --cyan2:#0ea5e9;

    --gold:#d5b15c;

    --shadow:
        0 24px 70px rgba(0,0,0,.46);

    --softGlow:
        0 0 45px rgba(139,92,246,.10);
}


/* =========================================================
   REMOVE CHEAP BLUE TAP / HOLD EFFECT
   ========================================================= */

*{
    -webkit-tap-highlight-color:transparent !important;
}

a,
button,
.card,
.downloadBtn,
.menuBtn,
.backButton,
.actionButton{
    -webkit-tap-highlight-color:transparent !important;
    -webkit-touch-callout:none;
}

a,
button,
.card,
.downloadBtn,
.menuBtn,
.actionButton{
    user-select:none;
    -webkit-user-select:none;
}

::selection{
    background:rgba(139,92,246,.28);
    color:#fff;
}


/* Don't show default ugly blue outline */
a:focus,
button:focus{
    outline:none !important;
}

/* Keyboard users still get a premium focus ring */
a:focus-visible,
button:focus-visible{
    outline:none !important;
    box-shadow:
        0 0 0 2px #06070a,
        0 0 0 4px rgba(139,92,246,.72) !important;
}


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

html{
    background:var(--bg);
}

body{
    color:var(--text);

    background:
        radial-gradient(
            900px 500px at 10% -5%,
            rgba(139,92,246,.105),
            transparent 57%
        ),
        radial-gradient(
            750px 450px at 92% 5%,
            rgba(34,211,238,.07),
            transparent 58%
        ),
        linear-gradient(
            180deg,
            #07080b 0%,
            #06070a 55%,
            #08090d 100%
        ) !important;

    min-height:100vh;
}


/* =========================================================
   HEADER
   ========================================================= */

.header{
    background:
        rgba(7,8,12,.84) !important;

    border-bottom:
        1px solid rgba(255,255,255,.065) !important;

    backdrop-filter:
        blur(24px)
        saturate(140%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(140%);
}

.brand{
    color:#f7f8fb !important;

    letter-spacing:.7px;

    text-shadow:
        0 0 26px rgba(139,92,246,.16);
}

.brand::first-letter{
    color:var(--violet);
}

.navlinks a,
.navLinks a{
    color:#a7afbd !important;
}

.navlinks a:hover,
.navLinks a:hover{
    color:#fff !important;
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.menuBtn{
    color:#f5f7fb !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        ) !important;

    border:
        1px solid rgba(255,255,255,.09) !important;

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

.menuBtn:active{
    transform:scale(.96);
}


/* =========================================================
   GLASS MOBILE MENU
   ========================================================= */

@media(max-width:700px){

    .navLinks{
        background:
            radial-gradient(
                circle at top right,
                rgba(139,92,246,.11),
                transparent 42%
            ),
            rgba(10,12,18,.91) !important;

        border:
            1px solid rgba(255,255,255,.085) !important;

        box-shadow:
            0 26px 90px rgba(0,0,0,.62),
            inset 0 1px 0 rgba(255,255,255,.04) !important;

        backdrop-filter:
            blur(30px)
            saturate(150%) !important;

        -webkit-backdrop-filter:
            blur(30px)
            saturate(150%) !important;
    }

    .navLinks a{
        border:
            1px solid transparent;

        border-radius:13px;
    }

    .navLinks a:hover,
    .navLinks a:active{
        background:
            rgba(139,92,246,.08) !important;

        border-color:
            rgba(139,92,246,.13);

        color:#fff !important;
    }
}


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

.hero,
.detailHero{
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(139,92,246,.13),
            transparent 42%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(34,211,238,.055),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #0e1117,
            #090b10
        ) !important;

    border:
        1px solid rgba(255,255,255,.075) !important;

    box-shadow:
        var(--shadow),
        inset 0 1px 0 rgba(255,255,255,.035) !important;
}


/* Hero labels */
.eyebrow,
.kicker,
.cardType{
    color:#a68cff !important;

    letter-spacing:
        1.2px;
}


/* Main heading accent */
.hero h1 strong,
.heroAccent{
    background:
        linear-gradient(
            100deg,
            #ffffff,
            #b8a6ff 48%,
            #62dff2 100%
        );

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

    color:transparent !important;
}


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

.searchWrap,
.searchBox{
    background:
        rgba(15,18,25,.82) !important;

    border:
        1px solid rgba(255,255,255,.075) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);
}

.searchWrap:focus-within,
.searchBox:focus-within{
    border-color:
        rgba(139,92,246,.38) !important;

    box-shadow:
        0 0 0 4px rgba(139,92,246,.07) !important;
}

input{
    color:#fff !important;
}

input::placeholder{
    color:#626a79 !important;
}


/* =========================================================
   CARDS
   ========================================================= */

.card{
    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            155deg,
            rgba(18,21,29,.97),
            rgba(10,12,17,.98)
        ) !important;

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

    box-shadow:
        0 14px 36px rgba(0,0,0,.25),
        inset 0 1px 0 rgba(255,255,255,.026);

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

.card::before{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            340px circle at 20% 0%,
            rgba(139,92,246,.075),
            transparent 58%
        );

    opacity:.65;
}


/* remove old green/blue active backgrounds */
.card:hover,
.card:focus,
.card:active{
    background:
        linear-gradient(
            155deg,
            #141824,
            #0b0d13
        ) !important;
}

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

    border-color:
        rgba(139,92,246,.23) !important;

    box-shadow:
        0 24px 58px rgba(0,0,0,.38),
        0 0 34px rgba(139,92,246,.065);
}

.card:active{
    transform:
        scale(.985);
}


/* image area */
.cardImage,
.card-image,
.logoWrap{
    background:
        linear-gradient(
            145deg,
            rgba(20,24,33,.95),
            rgba(9,11,16,.96)
        ) !important;

    border-bottom:
        1px solid rgba(255,255,255,.055) !important;
}


/* category labels */
.cardType,
.cardLabel,
.tag{
    color:#9d87ff !important;
}


/* card text */
.card h2,
.card h3{
    color:#f4f6fa !important;
}

.card p{
    color:#8c94a3 !important;
}


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

.card a,
.cardLink{
    color:#c6b8ff !important;

    text-decoration:none;

    transition:
        color .2s ease,
        opacity .2s ease;
}

.card a:hover,
.cardLink:hover{
    color:#ffffff !important;
}


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

.primaryBtn,
.downloadBtn,
.hero .button,
.hero .btnPrimary{
    position:relative;

    overflow:hidden;

    color:#fff !important;

    border:
        1px solid rgba(255,255,255,.09) !important;

    background:
        linear-gradient(
            100deg,
            #7047e8,
            #8b5cf6 48%,
            #397fd8
        ) !important;

    box-shadow:
        0 13px 32px rgba(95,62,200,.28),
        inset 0 1px 0 rgba(255,255,255,.19) !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        filter .22s ease;
}

.primaryBtn::after,
.downloadBtn::after{
    content:"";

    position:absolute;

    top:0;
    bottom:0;

    left:-55%;

    width:40%;

    transform:skewX(-25deg);

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

    transition:left .65s ease;
}

.primaryBtn:hover::after,
.downloadBtn:hover::after{
    left:120%;
}

.primaryBtn:hover,
.downloadBtn:hover{
    transform:
        translateY(-2px);

    filter:
        brightness(1.08);

    box-shadow:
        0 18px 42px rgba(105,70,220,.34),
        inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.primaryBtn:active,
.downloadBtn:active{
    transform:
        scale(.985);
}


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

.secondaryBtn,
.actionButton,
.backButton{
    color:#dfe3eb !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.04),
            rgba(255,255,255,.012)
        ) !important;

    border:
        1px solid rgba(255,255,255,.085) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);
}

.secondaryBtn:hover,
.actionButton:hover,
.backButton:hover{
    color:#fff !important;

    border-color:
        rgba(139,92,246,.26) !important;

    background:
        rgba(139,92,246,.065) !important;
}


/* =========================================================
   BADGES
   ========================================================= */

.badge{
    color:#c8cdd8 !important;

    background:
        rgba(255,255,255,.025) !important;

    border:
        1px solid rgba(255,255,255,.075) !important;
}

.badge:first-child{
    color:#b8a4ff !important;

    border-color:
        rgba(139,92,246,.19) !important;

    background:
        rgba(139,92,246,.055) !important;
}


/* =========================================================
   PANELS / ABOUT / VERSION
   ========================================================= */

.panel,
.infoPanel,
.aboutCard,
.versionRow{
    background:
        linear-gradient(
            145deg,
            rgba(16,19,26,.97),
            rgba(9,11,15,.97)
        ) !important;

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);
}

.panel h2,
.aboutCard h2{
    color:#f4f6fa !important;
}

.panel p,
.aboutCard p,
.versionMeta{
    color:#8c94a3 !important;
}


/* =========================================================
   DOWNLOAD MODAL
   ========================================================= */

.downloadOverlay{
    background:
        rgba(3,4,7,.78) !important;

    backdrop-filter:
        blur(27px)
        saturate(140%) !important;

    -webkit-backdrop-filter:
        blur(27px)
        saturate(140%) !important;
}

.downloadModal{
    background:
        radial-gradient(
            circle at top right,
            rgba(139,92,246,.14),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #12151d,
            #090b10
        ) !important;

    border:
        1px solid rgba(255,255,255,.095) !important;

    box-shadow:
        0 40px 120px rgba(0,0,0,.72),
        inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.downloadMini{
    color:#a78bfa !important;
}

.downloadModal p,
.downloadStatus{
    color:#8e97a7 !important;
}

.progressTrack{
    background:#080a0f !important;

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

.progressFill{
    background:
        linear-gradient(
            90deg,
            #7048e8,
            #8b5cf6,
            #32bad5
        ) !important;

    box-shadow:
        0 0 26px rgba(139,92,246,.25) !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer{
    color:#626a77 !important;

    background:
        rgba(7,8,11,.68) !important;

    border-top:
        1px solid rgba(255,255,255,.055) !important;
}


/* =========================================================
   MOBILE REFINEMENT
   ========================================================= */

@media(max-width:700px){

    body{
        background:
            radial-gradient(
                520px 320px at 50% 0%,
                rgba(139,92,246,.09),
                transparent 64%
            ),
            #06070a !important;
    }

    .header{
        background:
            rgba(7,8,12,.92) !important;
    }

    .card{
        border-radius:22px !important;

        box-shadow:
            0 12px 30px rgba(0,0,0,.27),
            inset 0 1px 0 rgba(255,255,255,.025);
    }

    .card:hover{
        transform:none;
    }

    .card:active{
        transform:scale(.985);
    }

    .hero,
    .detailHero{
        border-radius:28px !important;
    }

}


/* =========================================================
   REMOVE OLD GREEN COLOR OVERRIDES
   ========================================================= */

[style*="#4"],
[style*="green"]{
    accent-color:var(--violet);
}


/* =========================================================
   PREMIUM DOWNLOAD PAGE V4
   ========================================================= */

.detailPage,
.detail{
    position:relative;
    z-index:2;
}


/* ---------- animated ambient background ---------- */

body::before{
    content:"";
    position:fixed;
    inset:-20%;
    z-index:-3;
    pointer-events:none;

    background:
        radial-gradient(
            520px circle at 15% 20%,
            rgba(139,92,246,.12),
            transparent 70%
        ),
        radial-gradient(
            580px circle at 85% 28%,
            rgba(34,211,238,.075),
            transparent 72%
        ),
        radial-gradient(
            700px circle at 55% 95%,
            rgba(71,85,255,.055),
            transparent 75%
        );

    animation:
        premiumAmbient 15s ease-in-out infinite alternate;
}

@keyframes premiumAmbient{

    0%{
        transform:
            translate3d(-1.5%,0,0)
            scale(1);
    }

    50%{
        transform:
            translate3d(1%,1%,0)
            scale(1.04);
    }

    100%{
        transform:
            translate3d(0,-1%,0)
            scale(1.02);
    }

}


/* ---------- Premium hero ---------- */

.detailHero{
    position:relative;
    overflow:hidden;

    isolation:isolate;

    background:
        linear-gradient(
            145deg,
            rgba(17,19,28,.95),
            rgba(8,10,15,.98)
        ) !important;

    border:
        1px solid rgba(255,255,255,.085) !important;

    box-shadow:
        0 32px 90px rgba(0,0,0,.48),
        0 0 70px rgba(112,72,232,.055),
        inset 0 1px 0 rgba(255,255,255,.045) !important;

    backdrop-filter:
        blur(22px);

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


/* large logo in background */
.detailHero::after{
    content:"";

    position:absolute;

    width:320px;
    height:320px;

    right:-55px;
    top:-70px;

    z-index:-1;

    background-image:
        var(--hero-logo);

    background-size:
        contain;

    background-repeat:
        no-repeat;

    background-position:
        center;

    opacity:.075;

    filter:
        blur(1px)
        saturate(.8);

    transform:
        rotate(-8deg)
        scale(1.05);

    animation:
        floatingHeroLogo
        7s
        ease-in-out
        infinite alternate;
}

@keyframes floatingHeroLogo{

    from{
        transform:
            translateY(-5px)
            rotate(-8deg)
            scale(1.03);
    }

    to{
        transform:
            translateY(16px)
            rotate(-3deg)
            scale(1.09);
    }

}


/* top glow */
.detailHero::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:-2;

    pointer-events:none;

    background:
        radial-gradient(
            460px circle at 6% 0%,
            rgba(139,92,246,.13),
            transparent 65%
        ),
        radial-gradient(
            420px circle at 95% 100%,
            rgba(34,211,238,.055),
            transparent 70%
        );
}


/* ---------- logo ---------- */

.detailLogo{
    position:relative;

    width:112px !important;
    height:112px !important;

    object-fit:cover;

    border-radius:27px !important;

    background:#0d1017;

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

    box-shadow:
        0 18px 42px rgba(0,0,0,.42),
        0 0 40px rgba(139,92,246,.08);

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

.detailLogo:hover{
    transform:
        translateY(-5px)
        scale(1.035);

    box-shadow:
        0 24px 55px rgba(0,0,0,.48),
        0 0 42px rgba(139,92,246,.15);
}


/* ---------- title ---------- */

.detailTitle h1{
    font-size:
        clamp(34px,5vw,56px);

    letter-spacing:
        -1.8px;

    line-height:1.03;

    color:#f7f8fc !important;

    text-shadow:
        0 3px 30px rgba(0,0,0,.28);
}

.detailTitle > p{
    max-width:760px;

    color:#949cab !important;

    line-height:1.7;
}


/* ---------- eyebrow ---------- */

.eyebrow{
    display:inline-flex;

    width:max-content;

    padding:
        7px 12px;

    border-radius:999px;

    color:#bcaaff !important;

    background:
        rgba(139,92,246,.075);

    border:
        1px solid rgba(139,92,246,.17);

    font-size:11px;
    font-weight:900;

    letter-spacing:1.35px;
}


/* ---------- premium badges ---------- */

.badges{
    display:flex;
    flex-wrap:wrap;

    gap:9px;

    margin-top:18px;
}

.badge{
    padding:
        8px 12px !important;

    border-radius:
        999px !important;

    color:#c7ccd7 !important;

    background:
        rgba(255,255,255,.027) !important;

    border:
        1px solid rgba(255,255,255,.075) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025);
}


/* ---------- download ---------- */

.downloadArea{
    margin-top:26px;
}

.premiumDownloadBtn,
.downloadBtn{
    position:relative;

    min-height:70px;

    display:flex !important;

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

    gap:12px;

    width:100%;

    border-radius:20px !important;

    color:#fff !important;

    font-size:18px;
    font-weight:900;

    letter-spacing:.05px;

    text-decoration:none;

    overflow:hidden;

    isolation:isolate;

    background:
        linear-gradient(
            100deg,
            #6845d9 0%,
            #8b5cf6 48%,
            #287fbd 100%
        ) !important;

    border:
        1px solid rgba(255,255,255,.13) !important;

    box-shadow:
        0 18px 44px rgba(91,63,201,.29),
        inset 0 1px 0 rgba(255,255,255,.22);

    transition:
        transform .24s ease,
        box-shadow .24s ease,
        filter .24s ease;
}

.downloadBtn::before{
    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(255,255,255,.19),
            transparent 45%
        );

    opacity:.72;
}

.downloadBtn::after{
    content:"";

    position:absolute;

    width:180px;
    height:180px;

    top:-60px;
    left:-210px;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.28),
            transparent 66%
        );

    transition:
        left .75s cubic-bezier(.16,.7,.2,1);
}

.downloadBtn:hover::after{
    left:110%;
}

.downloadBtn:hover{
    transform:
        translateY(-3px)
        scale(1.006);

    filter:
        brightness(1.09);

    box-shadow:
        0 24px 58px rgba(100,67,218,.38),
        0 0 40px rgba(139,92,246,.12),
        inset 0 1px 0 rgba(255,255,255,.24);
}

.downloadBtn:active{
    transform:
        scale(.985);
}


/* arrow */
.downloadIcon{
    display:inline-flex;

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

    width:32px;
    height:32px;

    border-radius:10px;

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

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

    font-size:22px;
}


/* ---------- action buttons ---------- */

.actions{
    gap:12px !important;

    margin-top:13px;
}

.actionButton{
    min-height:54px;

    border-radius:16px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.043),
            rgba(255,255,255,.012)
        ) !important;

    border:
        1px solid rgba(255,255,255,.075) !important;

    color:#c9cfda !important;

    font-weight:800;

    transition:
        transform .22s ease,
        color .22s ease,
        border-color .22s ease,
        background .22s ease;
}

.actionButton:hover{
    color:#fff !important;

    transform:
        translateY(-2px);

    border-color:
        rgba(139,92,246,.24) !important;

    background:
        rgba(139,92,246,.055) !important;
}


/* ---------- content panels ---------- */

.panel{
    position:relative;

    overflow:hidden;

    border-radius:25px !important;

    background:
        linear-gradient(
            145deg,
            rgba(16,19,26,.96),
            rgba(9,11,16,.97)
        ) !important;

    border:
        1px solid rgba(255,255,255,.068) !important;

    box-shadow:
        0 16px 48px rgba(0,0,0,.22),
        inset 0 1px 0 rgba(255,255,255,.025);

    transition:
        transform .3s ease,
        border-color .3s ease;
}

.panel:hover{
    border-color:
        rgba(139,92,246,.15) !important;

    transform:
        translateY(-2px);
}

.panel::before{
    content:"";

    position:absolute;

    width:240px;
    height:240px;

    right:-100px;
    top:-120px;

    border-radius:50%;

    background:
        rgba(139,92,246,.035);

    filter:
        blur(30px);

    pointer-events:none;
}


/* ---------- version row ---------- */

.versionRow{
    border-radius:17px !important;

    background:
        rgba(255,255,255,.018) !important;

    border:
        1px solid rgba(255,255,255,.065) !important;
}


/* ---------- Download progress redesign ---------- */

.downloadModal{
    max-width:480px;

    border-radius:30px !important;

    background:
        radial-gradient(
            350px circle at 100% 0%,
            rgba(139,92,246,.17),
            transparent 65%
        ),
        radial-gradient(
            300px circle at 0% 100%,
            rgba(34,211,238,.06),
            transparent 70%
        ),
        linear-gradient(
            145deg,
            #141721,
            #090b10
        ) !important;

    border:
        1px solid rgba(255,255,255,.10) !important;

    box-shadow:
        0 50px 140px rgba(0,0,0,.78),
        0 0 55px rgba(139,92,246,.075),
        inset 0 1px 0 rgba(255,255,255,.055) !important;
}

.downloadPercentage strong{
    background:
        linear-gradient(
            90deg,
            #fff,
            #beaaff
        );

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

    color:transparent !important;
}

.progressTrack{
    height:13px !important;

    padding:2px;

    background:
        rgba(255,255,255,.025) !important;
}

.progressFill{
    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #7252e9,
            #9b6eff 52%,
            #31bdd8
        ) !important;

    box-shadow:
        0 0 30px rgba(139,92,246,.28) !important;
}


/* ---------- back button ---------- */

.backButton{
    border-radius:15px !important;

    background:
        rgba(14,17,24,.84) !important;

    border:
        1px solid rgba(255,255,255,.075) !important;

    color:#e9ebf1 !important;

    box-shadow:
        0 10px 24px rgba(0,0,0,.25);
}


/* =========================================================
   MOBILE PREMIUM DOWNLOAD PAGE
   ========================================================= */

@media(max-width:700px){

    .detail{
        width:94% !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }

    .detailHero{
        padding:
            24px 20px !important;

        border-radius:
            27px !important;
    }

    .detailTop{
        display:grid !important;

        grid-template-columns:
            86px 1fr !important;

        align-items:center !important;

        gap:17px !important;
    }

    .detailLogo{
        width:86px !important;
        height:86px !important;

        border-radius:
            22px !important;
    }

    .detailTitle h1{
        font-size:
            29px !important;

        letter-spacing:
            -1px !important;
    }

    .detailTitle > p{
        grid-column:
            1 / -1;

        margin-top:
            10px;

        font-size:
            14px;

        line-height:
            1.65;
    }

    .eyebrow{
        font-size:9px;
        padding:6px 9px;
    }

    .badges{
        grid-column:
            1 / -1;

        gap:7px;
    }

    .badge{
        font-size:
            10px !important;

        padding:
            7px 10px !important;
    }

    .downloadBtn{
        min-height:64px;

        border-radius:
            18px !important;

        font-size:
            16px;
    }

    .actions{
        display:grid !important;

        grid-template-columns:
            1fr 1fr !important;
    }

    .actionButton{
        min-height:
            50px;
    }

    .panel{
        border-radius:
            23px !important;
    }

    .detailHero::after{
        width:
            230px;

        height:
            230px;

        right:
            -80px;

        top:
            -30px;

        opacity:
            .055;
    }

}


@media(max-width:390px){

    .detailTop{
        grid-template-columns:
            74px 1fr !important;

        gap:
            13px !important;
    }

    .detailLogo{
        width:
            74px !important;

        height:
            74px !important;
    }

    .detailTitle h1{
        font-size:
            25px !important;
    }

}