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

.downloads-hero{

    position:relative;

    padding:110px 0 90px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(34,197,94,.10),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(59,130,246,.06),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #071018 0%,
            #0b111b 100%
        );

}


/* subtle background glow */

.downloads-hero::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    top:-250px;
    right:-200px;

    border-radius:50%;

    background:
        rgba(34,197,94,.05);

    filter:blur(80px);

    pointer-events:none;

}


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

.downloads-hero-title{

    margin:25px 0;

    color:#fff;

    font-size:clamp(
        42px,
        5vw,
        68px
    );

    font-weight:800;

    line-height:1.08;

    letter-spacing:-1.5px;

}

.downloads-hero-title span{

    display:block;

    color:#22c55e;

}


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

.downloads-hero-description{

    max-width:700px;

    margin-bottom:35px;

    color:#aebaca;

    font-size:18px;

    line-height:1.8;

}


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

.downloads-hero-actions{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

}

.downloads-hero-actions .btn{

    border-radius:999px;

    padding:13px 25px;

    font-weight:700;

}


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

.downloads-hero-panel{

    display:flex;

    align-items:center;

    gap:22px;

    padding:30px;

    border-radius:28px;

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

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

    backdrop-filter:blur(18px);

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

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.35);

}


.downloads-hero-icon{

    width:72px;
    height:72px;

    flex-shrink:0;

    display:flex;

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

    border-radius:22px;

    background:
        rgba(34,197,94,.12);

    border:1px solid
        rgba(34,197,94,.25);

}

.downloads-hero-icon i{

    color:#22c55e;

    font-size:32px;

}


.downloads-hero-panel > div:last-child{

    display:flex;

    flex-direction:column;

}

.downloads-hero-panel span{

    color:#7ee787;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    margin-bottom:6px;

}

.downloads-hero-panel strong{

    color:#fff;

    font-size:20px;

    font-weight:700;

    margin-bottom:5px;

}

.downloads-hero-panel small{

    color:#94a3b8;

    font-size:13px;

    line-height:1.5;

}


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

@media(max-width:768px){

    .downloads-hero{

        padding:80px 0 70px;

    }

    .downloads-hero-title{

        font-size:40px;

    }

    .downloads-hero-description{

        font-size:16px;

    }

    .downloads-hero-actions{

        flex-direction:column;

    }

    .downloads-hero-actions .btn{

        width:100%;

    }

    .downloads-hero-panel{

        padding:24px;

    }

}


/* ===========================================
   SMALL MOBILE
=========================================== */

@media(max-width:576px){

    .downloads-hero{

        padding:65px 0 60px;

    }

    .downloads-hero-title{

        font-size:34px;

    }

    .downloads-hero-panel{

        gap:15px;

        padding:20px;

        border-radius:22px;

    }

    .downloads-hero-icon{

        width:58px;
        height:58px;

        border-radius:18px;

    }

    .downloads-hero-icon i{

        font-size:25px;

    }

    .downloads-hero-panel strong{

        font-size:17px;

    }

}

/* ===========================================
   DOWNLOAD FILTERS
=========================================== */

.downloads-filters{

    padding:90px 0 40px;

    background:#0b111b;

}

.downloads-filter-header{

    display:flex;

    align-items:end;

    justify-content:space-between;

    gap:30px;

    margin-bottom:30px;

}

.downloads-section-title{

    margin:18px 0 0;

    color:#fff;

    font-size:36px;

    font-weight:800;

}


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

.downloads-search{

    position:relative;

    width:300px;

}

.downloads-search i{

    position:absolute;

    left:17px;

    top:50%;

    transform:translateY(-50%);

    color:#64748b;

    pointer-events:none;

}

.downloads-search input{

    width:100%;

    height:48px;

    padding:0 18px 0 46px;

    border-radius:999px;

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

    background:#111827;

    color:#fff;

    outline:none;

    transition:.25s ease;

}

.downloads-search input::placeholder{

    color:#64748b;

}

.downloads-search input:focus{

    border-color:
        rgba(34,197,94,.55);

    box-shadow:
        0 0 0 3px
        rgba(34,197,94,.08);

}


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

.downloads-filter-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}

.download-filter{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

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

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

    color:#94a3b8;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.25s ease;

}

.download-filter:hover{

    color:#fff;

    border-color:
        rgba(34,197,94,.35);

    background:
        rgba(34,197,94,.08);

}

.download-filter.active{

    color:#fff;

    background:#16a34a;

    border-color:#16a34a;

    box-shadow:
        0 8px 25px
        rgba(22,163,74,.20);

}


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

@media(max-width:768px){

    .downloads-filters{

        padding:70px 0 30px;

    }

    .downloads-filter-header{

        align-items:stretch;

        flex-direction:column;

        gap:22px;

    }

    .downloads-section-title{

        font-size:30px;

    }

    .downloads-search{

        width:100%;

    }

    .downloads-filter-buttons{

        overflow-x:auto;

        flex-wrap:nowrap;

        padding-bottom:8px;

        scrollbar-width:none;

    }

    .downloads-filter-buttons::-webkit-scrollbar{

        display:none;

    }

    .download-filter{

        flex-shrink:0;

    }

}

/* ===========================================
   FEATURED DOWNLOAD
=========================================== */

.downloads-featured{

    padding:60px 0 100px;

    background:#0b111b;

}

.featured-download-card{

    position:relative;

    display:grid;

    grid-template-columns:
        minmax(0,1.5fr)
        minmax(280px,.7fr);

    gap:50px;

    align-items:center;

    padding:55px;

    border-radius:32px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            rgba(34,197,94,.08),
            rgba(255,255,255,.025)
        );

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

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

}

.featured-download-card::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-180px;
    top:-180px;

    border-radius:50%;

    background:
        rgba(34,197,94,.08);

    filter:blur(70px);

    pointer-events:none;

}


/* ===========================================
   FEATURED INFO
=========================================== */

.featured-download-info{

    position:relative;

    z-index:1;

}

.featured-download-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 14px;

    margin-bottom:18px;

    border-radius:999px;

    background:
        rgba(34,197,94,.12);

    border:1px solid
        rgba(34,197,94,.25);

    color:#7ee787;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.featured-download-category{

    display:block;

    margin-bottom:8px;

    color:#64748b;

    font-size:13px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.featured-download-info h2{

    margin:0 0 18px;

    color:#fff;

    font-size:46px;

    font-weight:800;

    line-height:1.1;

}

.featured-download-info p{

    max-width:720px;

    margin:0 0 30px;

    color:#aebaca;

    font-size:17px;

    line-height:1.8;

}


/* ===========================================
   FEATURED META
=========================================== */

.featured-download-meta{

    display:flex;

    flex-wrap:wrap;

    gap:28px;

    margin-bottom:32px;

}

.featured-download-meta div{

    display:flex;

    flex-direction:column;

    gap:5px;

}

.featured-download-meta small{

    color:#64748b;

    font-size:10px;

    font-weight:700;

    letter-spacing:.1em;

}

.featured-download-meta strong{

    color:#fff;

    font-size:14px;

}


/* ===========================================
   FEATURED ACTIONS
=========================================== */

.featured-download-actions{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.featured-download-actions .btn{

    padding:12px 22px;

    border-radius:999px;

    font-weight:700;

}


/* ===========================================
   FEATURED VISUAL
=========================================== */

.featured-download-visual{

    position:relative;

    z-index:1;

    min-height:280px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    border-radius:26px;

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

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

}

.featured-icon-orb{

    width:110px;
    height:110px;

    display:flex;

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

    margin-bottom:20px;

    border-radius:32px;

    background:
        rgba(34,197,94,.12);

    border:1px solid
        rgba(34,197,94,.25);

    box-shadow:
        0 0 60px
        rgba(34,197,94,.10);

}

.featured-icon-orb i{

    color:#22c55e;

    font-size:55px;

}

.featured-download-visual span{

    color:#7ee787;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.featured-download-visual strong{

    margin-top:6px;

    color:#fff;

    font-size:22px;

}


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

@media(max-width:991px){

    .featured-download-card{

        grid-template-columns:1fr;

        padding:40px;

    }

    .featured-download-visual{

        min-height:220px;

    }

}

@media(max-width:576px){

    .downloads-featured{

        padding:40px 0 70px;

    }

    .featured-download-card{

        gap:30px;

        padding:28px 22px;

        border-radius:24px;

    }

    .featured-download-info h2{

        font-size:34px;

    }

    .featured-download-info p{

        font-size:16px;

    }

    .featured-download-meta{

        gap:18px;

    }

    .featured-download-actions{

        flex-direction:column;

    }

    .featured-download-actions .btn{

        width:100%;

    }

    .featured-download-visual{

        min-height:190px;

    }

    .featured-icon-orb{

        width:85px;
        height:85px;

        border-radius:24px;

    }

    .featured-icon-orb i{

        font-size:42px;

    }

}

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

.downloads-grid-section{

    padding:20px 0 110px;

    background:#0b111b;

}

.downloads-grid-heading{

    display:flex;

    align-items:end;

    justify-content:space-between;

    gap:30px;

    margin-bottom:40px;

}

.downloads-grid-heading p{

    max-width:420px;

    margin:0;

    color:#94a3b8;

    line-height:1.7;

}


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

.download-card{

    height:100%;

    display:flex;

    flex-direction:column;

    padding:26px;

    border-radius:22px;

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

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

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

}

.download-card:hover{

    transform:translateY(-8px);

    border-color:
        rgba(34,197,94,.35);

    box-shadow:
        0 25px 55px
        rgba(0,0,0,.30);

}


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

.download-card-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:24px;

}

.download-card-icon{
    width: 64px;
    height: 64px;

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

    flex-shrink: 0;
}

.download-card-icon i{
    display: flex;
    align-items: center;
    justify-content: center;

    line-height: 1;
    font-size: 28px;
}

.download-status{

    padding:6px 11px;

    border-radius:999px;

    background:
        rgba(34,197,94,.10);

    color:#7ee787;

    font-size:10px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

}


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

.download-card-category{

    margin-bottom:8px;

    color:#64748b;

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.download-card h3{

    margin:0 0 12px;

    color:#fff;

    font-size:23px;

    font-weight:750;

}

.download-card > p{

    min-height:78px;

    margin:0 0 22px;

    color:#94a3b8;

    font-size:14px;

    line-height:1.7;

}


/* ===========================================
   DOWNLOAD CARD - COMPACT META
=========================================== */

.download-card-meta{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-bottom:22px;

    padding:16px 0;

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

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

}

.download-card-meta span{

    display:flex;

    align-items:center;

    gap:10px;

    min-height:24px;

    color:#cbd5e1;

    font-size:12px;

}

.download-card-meta i{

    width:20px;

    height:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    color:#22c55e;

    font-size:16px;

}


/* ===========================================
   DOWNLOAD CARD ACTION
=========================================== */

.download-card-actions{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:auto;

}

/* ===========================================
   COMPACT DOWNLOAD BUTTON
=========================================== */

.download-card-actions .btn{

    position:relative;

    width:100%;

    height:44px;

    min-height:44px;

    padding:0 16px;

    border-radius:10px;

    font-size:13px;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    line-height:1;

}

.download-card-actions .btn i{

    position:static;

    width:auto;

    height:auto;

    margin:0 !important;

    padding:0 !important;

    font-size:16px;

    line-height:1;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.download-guide{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-height:28px;

    color:#94a3b8;

    font-size:12px;

    font-weight:600;

    text-decoration:none;

    transition:.25s ease;

}

.download-guide i{

    width:auto;

    height:auto;

    font-size:20px !important;

    line-height:1;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    color:#22c55e;

    transition:.25s ease;

}

.download-guide:hover{

    color:#22c55e;

}

.download-guide:hover i{

    transform:translateX(4px);

}




/* ===========================================
   INSTALLATION GUIDE
=========================================== */

.download-guide i{

    width:auto;

    height:auto;

    font-size:20px !important;

    line-height:1;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    color:#22c55e;

    transition:.25s ease;

}

/* ===========================================
   EMPTY STATE
=========================================== */

.download-empty{

    padding:70px 20px;

    margin-top:20px;

    text-align:center;

    border:1px dashed
        rgba(255,255,255,.10);

    border-radius:24px;

}

.download-empty i{

    display:block;

    margin-bottom:18px;

    color:#22c55e;

    font-size:45px;

}

.download-empty h3{

    color:#fff;

    margin-bottom:8px;

}

.download-empty p{

    margin:0;

    color:#64748b;

}


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

@media(max-width:768px){

    .downloads-grid-section{

        padding-bottom:80px;

    }

    .downloads-grid-heading{

        align-items:flex-start;

        flex-direction:column;

        gap:12px;

        margin-bottom:30px;

    }

    .download-card{

        padding:25px;

    }

}

@media(max-width:576px){

    .download-card h3{

        font-size:21px;

    }

    .download-card > p{

        min-height:60px;

        margin:0 0 18px;

        color:#94a3b8;

        font-size:14px;

        line-height:1.6;

}

/* ===========================================
   INSTALLATION & ACADEMY
=========================================== */

.downloads-installation{

    padding:30px 0 70px;

    background:#0b111b;

}

.installation-card{
    
    max-width:1100px;
    
    margin:0 auto;

    position:relative;

    display:flex;

    align-items:center;

    gap:35px;

    padding:45px;

    border-radius:30px;

    background:
        linear-gradient(
            135deg,
            rgba(34,197,94,.07),
            rgba(255,255,255,.025)
        );

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

    box-shadow:
        0 25px 65px
        rgba(0,0,0,.28);

    overflow:hidden;

}

.installation-card::before{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    right:-120px;
    bottom:-150px;

    border-radius:50%;

    background:
        rgba(34,197,94,.07);

    filter:blur(60px);

    pointer-events:none;

}


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

.installation-icon{

    position:relative;

    z-index:1;

    width:90px;
    height:90px;

    flex-shrink:0;

    display:flex;

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

    border-radius:26px;

    background:
        rgba(34,197,94,.12);

    border:1px solid
        rgba(34,197,94,.25);

}

.installation-icon i{

    color:#22c55e;

    font-size:40px;

}


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

.installation-content{

    position:relative;
    
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    z-index:1;

}

.installation-content .section-tag{

    margin-bottom:12px;

}

.installation-content h2{

    margin:0 0 15px;

    color:#fff;

    font-size:34px;

    font-weight:800;
    
    margin-top: 18px;
    margin-bottom: 12px;

}

.installation-content p{

    max-width:800px;

    margin:0 0 22px;

    color:#94a3b8;

    font-size:16px;

    line-height:1.8;
    
    margin-bottom: 22px;

}


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

.installation-features{

    display:flex;

    flex-wrap:wrap;

    gap: 8px 18px;
    margin-bottom: 22px;

}

.installation-features span{

    display:flex;

    align-items:center;

    gap:8px;

    color:#cbd5e1;

    font-size:13px;

    font-weight:600;

}

.installation-features i{

    color:#22c55e;

}


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

.installation-actions{

    display:flex;

    flex-wrap:wrap;

    gap:12px;
    
    align-items: center;
}

.installation-actions .btn{

    padding:11px 21px;

    border-radius:999px;

    font-weight:700;

}


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

@media(max-width:768px){

    .downloads-installation{

        padding:20px 0 80px;
        
        padding-bottom:90px;

    }

    .installation-card{

        flex-direction:column;

        align-items:flex-start;

        padding:32px 25px;

        gap:25px;

    }

    .installation-icon{

        width:70px;
        height:70px;

        border-radius:21px;

    }

    .installation-icon i{

        font-size:32px;

    }

    .installation-content h2{

        font-size:28px;

    }

    .installation-actions{

        flex-direction:column;

        width:100%;

    }

    .installation-actions .btn{

        width:100%;

        text-align:center;

    }

}

/* ===========================================
   DOWNLOAD FINAL CTA
=========================================== */

.downloads-final{

    padding: 88px 0 120px;

    background:
        linear-gradient(
            180deg,
            #0b111b 0%,
            #071018 100%
        );

}

.downloads-final-card{

    position:relative;

    max-width:1100px;

    margin:0 auto;

    padding:70px 50px;

    text-align:center;

    border-radius:32px;

    background:
        radial-gradient(
            circle at center,
            rgba(34,197,94,.08),
            transparent 55%
        ),
        rgba(255,255,255,.035);

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

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

    overflow:hidden;

}



.downloads-final-card::before{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    left:-150px;
    top:-150px;

    border-radius:50%;

    background:
        rgba(34,197,94,.06);

    filter:blur(60px);

    pointer-events:none;

}

.downloads-final-card .section-tag{

    position:relative;

    z-index:1;

}

.downloads-final-card h2{

    position:relative;

    z-index:1;

    margin:24px 0 18px;

    color:#fff;

    font-size:48px;

    font-weight:800;

    line-height:1.15;

}

.downloads-final-card h2 span{

    color:#22c55e;

}

.downloads-final-card p{

    position:relative;

    z-index:1;

    max-width:680px;

    margin:0 auto 35px;

    color:#94a3b8;

    font-size:17px;

    line-height:1.8;

}

.downloads-final-actions{

    position:relative;

    z-index:1;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:12px;

}

.downloads-final-actions .btn{

    padding:13px 24px;

    border-radius:999px;

    font-weight:700;

}



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

@media(max-width:768px){

    .downloads-final{

        padding:20px 0 80px;

    }

    .downloads-final-card{

        padding:50px 25px;

        border-radius:26px;

    }

    .downloads-final-card h2{

        font-size:36px;

    }

    .downloads-final-card p{

        font-size:16px;

    }

    .downloads-final-actions{

        flex-direction:column;

    }

    .downloads-final-actions .btn{

        width:100%;

    }

}