/*
|--------------------------------------------------------------------------
| MODULE BROWSER
|--------------------------------------------------------------------------
*/


.module-browser {

    position:relative;

    width:100%;

    padding:20px 0;

    background:#141414;

}

.module-browser::before {

    content:"";

    position:absolute;

    top:-50px;

    left:0;

    width:100%;

    height:50px;

    background:linear-gradient(
        to bottom,
        transparent 0%,
        #141414 100%
    );

    pointer-events:none;

}

.module-browser-container{

    position:relative;

    z-index:1;

    width:95%;

    max-width:1500px;

    margin:0 auto;

    display:grid;

    grid-template-columns:55% 45%;

    gap:20px;

}



/*
|--------------------------------------------------------------------------
| LEFT MODULE PANEL
|--------------------------------------------------------------------------
*/


.module-browser-left{

    background:#141414;
    
    height:850px;
    
    overflow-y:auto;

    overflow-x:hidden;

    border:1px solid #252525;
    
    border-radius:12px;

    padding:25px;

}



.module-browser-header{

    margin-bottom:25px;

}



.module-browser-header .section-eyebrow{

    display:block;

    color:#999;

    font-size:13px;

    margin-bottom:8px;

}



.module-browser-header h2{

    margin:0;

    color:#fff;

    font-size:26px;

    line-height:1.2;

}



.module-browser-header h2 span{

    color:#ed1111;

}



.module-browser-header p{

    margin:12px 0 0;

    color:#aaa;

    font-size:14px;

    line-height:20px;

}



/*
|--------------------------------------------------------------------------
| MODULE GRID
|--------------------------------------------------------------------------
*/


.module-grid{

    display:grid;

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

    gap:10px;

}



/*
|--------------------------------------------------------------------------
| MODULE CARD
|--------------------------------------------------------------------------
*/


.module-card{

    position:relative;

    min-height:170px;

    padding:20px 15px;

    box-sizing:border-box;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    cursor:pointer;

    color:#fff;

    background:#151515;

    border:1px solid #333;

    border-radius:10px;

    transition:

        border-color .25s ease,

        transform .25s ease,

        box-shadow .25s ease;

}



.module-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:3px;

    height:100%;

    background:#ed1111;

    transform:scaleY(0);

    transition:transform .25s ease;

}



.module-card:hover{

    border-color:#ed1111;

    transform:translateY(-5px);

}



.module-card:hover::before{

    transform:scaleY(1);

}



.module-card.active{

    border-color:#ed1111;

    box-shadow:

        0 0 20px rgba(237,17,17,.25);

}



/*
|--------------------------------------------------------------------------
| MODULE COUNT
|--------------------------------------------------------------------------
*/


.module-count{

    position:absolute;

    top:10px;

    right:10px;

    padding:5px 12px;

    background:#ed1111;

    color:#fff;

    font-size:13px;

    font-weight:bold;

    clip-path:

        polygon(

            10% 0,

            100% 0,

            90% 100%,

            0 100%

        );

}



/*
|--------------------------------------------------------------------------
| MODULE ICON
|--------------------------------------------------------------------------
*/


.module-icon{

    width:90px;

    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#CE2026;

}



.module-svg{

    width:75px;

    height:75px;

}



.module-card:hover .module-icon{

    color:#fff;

}



.module-card.active .module-icon{

    color:#fff;

    filter:

        drop-shadow(

            0 0 12px rgba(206,32,38,.7)

        );

}



/*
|--------------------------------------------------------------------------
| MODULE TITLE
|--------------------------------------------------------------------------
*/


.module-card h3{

    margin:15px 0 8px;

    color:#fff;

    font-size:16px;

    line-height:18px;

    text-align:center;

}



.module-card p{

    margin:0;

    color:#999;

    font-size:11px;

    line-height:16px;

    text-align:center;

}



/*
|--------------------------------------------------------------------------
| RIGHT ECU PANEL
|--------------------------------------------------------------------------
*/


.module-browser-right{

    position:relative;

    height:850px;

    min-height:650px;

    max-height:850px;

    box-sizing:border-box;

    overflow-y:auto;

    overflow-x:hidden;

    background:#141414;
    
    border-radius:12px;

    border:1px solid #252525;

}



/*
|--------------------------------------------------------------------------
| ECU Empty State
|--------------------------------------------------------------------------
*/


.ecu-empty{

    width:100%;

    min-height:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:50px 40px;

    box-sizing:border-box;

}



/*
|--------------------------------------------------------------------------
| ECU Label
|--------------------------------------------------------------------------
*/


.ecu-empty-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:58px;

    height:36px;

    margin-bottom:18px;

    border:2px solid #ef1111;

    color:#ef1111;

    font-size:13px;

    font-weight:700;

}



/*
|--------------------------------------------------------------------------
| Number
|--------------------------------------------------------------------------
*/


.ecu-empty-number{

    color:#ef1111;

    font-size:48px;

    line-height:1;

    font-weight:700;

}



/*
|--------------------------------------------------------------------------
| Label
|--------------------------------------------------------------------------
*/


.ecu-empty-label{

    margin-top:8px;

    color:#ffffff;

    font-size:15px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.04em;

}



/*
|--------------------------------------------------------------------------
| Description
|--------------------------------------------------------------------------
*/


.ecu-empty-description{

    max-width:520px;

    margin:18px auto 0;

    color:#94a3b8;

    font-size:14px;

    line-height:1.7;

}



/*
|--------------------------------------------------------------------------
| Features
|--------------------------------------------------------------------------
*/


.ecu-empty-features{

    display:flex;

    align-items:center;

    justify-content:center;

    flex-wrap:wrap;

    gap:28px;

    margin-top:32px;

}



/*
|--------------------------------------------------------------------------
| Feature
|--------------------------------------------------------------------------
*/


.ecu-empty-feature{

    display:flex;

    align-items:center;

    gap:8px;

    color:#cbd5e1;

    font-size:12px;

    font-weight:500;

}



/*
|--------------------------------------------------------------------------
| Feature Icon
|--------------------------------------------------------------------------
*/


.ecu-empty-feature
.material-symbols-outlined{

    font-size:18px;

    color:#ef1111;

}



/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/


.ecu-empty-cta{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    margin-top:35px;

    min-height:42px;

    padding:0 40px;

    border:1px solid #ef1111;

    background:#ef1111;

    color:#ffffff;

    text-decoration:none;
    
    border-radius:8px;

    font-size:13px;

    font-weight:600;

    transition:

        background .15s ease,

        border-color .15s ease,

        box-shadow .15s ease;

}



.ecu-empty-cta:hover{

    background:#c90e0e;

    border-color:#c90e0e;

    color:#ffffff;

    box-shadow:
        0 5px 18px rgba(239,17,17,.18);

}



.ecu-empty-cta
.material-symbols-outlined{

    font-size:18px;

}



/*
|--------------------------------------------------------------------------
| ECU Sticky Toolbar
|--------------------------------------------------------------------------
*/


.ecu-toolbar{

    position:sticky;

    top:0;

    z-index:20;

    padding:20px;

    background:#1b1b1b;

    border-bottom:1px solid #333;

}



.ecu-search{

    display:flex;

    gap:10px;

}



.ecu-search input{

    flex:1;

    min-width:0;

    height:40px;

    box-sizing:border-box;

    padding:0 15px;

    background:#111;

    border:1px solid #555;

    color:#fff;

    font-size:14px;
    
    border-radius:8px;

}



.ecu-search input::placeholder{

    color:#888;

}



.ecu-search button{

    height:40px;

    padding:0 20px;

    background:#222;

    border:1px solid #555;

    color:#fff;

    cursor:pointer;
    
    border-radius:8px;

    transition:

        border-color .2s ease,

        color .2s ease,

        background .2s ease;

}



.ecu-search button:hover{

    background:#292929;

    border-color:#ed1111;

    color:#ed1111;

}



/*
|--------------------------------------------------------------------------
| ECU TITLE
|--------------------------------------------------------------------------
*/
.ecu-title{

    margin-top:10px;

}

.ecu-title h2{

    margin:0;

    color:#fff;

    font-size:22px;

}



.ecu-title p{

    margin:5px 0 0;

    color:#999;

    font-size:13px;

}



/*
|--------------------------------------------------------------------------
| ECU COUNTER
|--------------------------------------------------------------------------
*/


.ecu-counter{

    display:flex;

    align-items:center;

    gap:15px;

    margin-top:25px;

}



.ecu-chip{

    width:55px;

    height:35px;

    display:flex;

    align-items:center;

    justify-content:center;

    box-sizing:border-box;

    border:2px solid #ed1111;

    color:#ed1111;

    font-size:12px;

    font-weight:bold;

}



.ecu-number{

    color:#ed1111;

    font-size:38px;

    font-weight:bold;

}



.ecu-text{

    color:#fff;

    font-size:12px;

    font-weight:bold;

    line-height:18px;

}



/*
|--------------------------------------------------------------------------
| ECU BRAND GROUP
|--------------------------------------------------------------------------
*/


.ecu-brand{

    margin:0;

    padding:0;

    border-bottom:1px solid #333;

}



/*
|--------------------------------------------------------------------------
| BRAND HEADER
|--------------------------------------------------------------------------
*/


.ecu-brand-title{

    width:100%;

    height:44px;

    padding:0 16px;

    margin:0;

    box-sizing:border-box;

    display:flex;

    align-items:center;

    justify-content:space-between;

    cursor:pointer;

    color:#fff;

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    transition:

        background .15s ease;

}



.ecu-brand-title:hover{

    background:#202020;

}



.ecu-brand-title span:first-child{

    display:flex;

    align-items:center;

    gap:8px;

}



.ecu-brand-title span:first-child::before{

    content:"";

    width:6px;

    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:#ed1111;

}



.ecu-arrow{

    color:#ed1111;

    font-size:11px;

    line-height:1;

    transition:

        transform .2s ease;

}



.ecu-brand.open .ecu-arrow{

    transform:rotate(180deg);

}



/*
|--------------------------------------------------------------------------
| ECU LIST
|--------------------------------------------------------------------------
*/


.ecu-list{

    display:none;

    flex-direction:column;

    gap:6px;

    margin:0;

    padding:6px 16px 10px;

}



.ecu-brand.open .ecu-list{

    display:flex;

}


/*
|--------------------------------------------------------------------------
| ECU Item
|--------------------------------------------------------------------------
*/

.ecu-item{

    display:flex;

    align-items:center;

    gap:14px;

    width:100%;

    min-width:0;

    box-sizing:border-box;

    padding:13px 14px;

    background:#292929;

    border:1px solid #333;

    color:#fff;

    transition:
        background .2s ease,
        border-color .2s ease;

}


.ecu-item:hover{

    background:#303030;

    border-color:#444;

}



/*
|--------------------------------------------------------------------------
| ECU Main
|--------------------------------------------------------------------------
*/

.ecu-main{

    display:flex;

    align-items:center;

    gap:14px;

    flex:0 0 auto;

    min-width:0;

}



/*
|--------------------------------------------------------------------------
| ECU Dot
|--------------------------------------------------------------------------
*/

.ecu-dot{

    width:10px;

    height:10px;

    flex:0 0 10px;

    box-sizing:border-box;

    border:2px solid #ed1111;

    border-radius:50%;

}



/*
|--------------------------------------------------------------------------
| ECU Name
|--------------------------------------------------------------------------
*/

.ecu-name{

    display:flex;

    align-items:center;

    gap:20px;

    min-width:0;

}


.ecu-name strong{

    min-width:70px;

    color:#ed1111;

    font-size:14px;

    font-weight:700;

    white-space:nowrap;

}


.ecu-model{

    color:#fff;

    font-size:14px;

    white-space:nowrap;

}



/*
|--------------------------------------------------------------------------
| ECU Note
|--------------------------------------------------------------------------
*/

.ecu-note{

    flex:1;

    min-width:0;

    margin:0;

    color:#aaa;

    font-size:12px;

    line-height:17px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}


.ecu-note span{

    color:#ed1111;

    font-weight:700;

}
/*
|--------------------------------------------------------------------------
| ECU LOADING
|--------------------------------------------------------------------------
*/


.ecu-loading{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#aaa;

}



/*
|--------------------------------------------------------------------------
| MOBILE OVERLAY
|--------------------------------------------------------------------------
*/


.ecu-overlay{

    display:none;

}



@media(max-width:700px){

    .ecu-overlay{

        position:fixed;

        inset:0;

        display:none;

        background:rgba(0,0,0,.6);

        z-index:9998;

    }



    .ecu-overlay.active{

        display:block;

    }

}



/*
|--------------------------------------------------------------------------
| MOBILE ECU DRAWER
|--------------------------------------------------------------------------
*/


.ecu-close{

    display:none;

}



@media(max-width:700px){

    .module-browser{

        padding:50px 0;

    }



    .module-browser-container{

        width:100%;

        display:block;

    }



    .module-browser-left{

        width:100%;

        box-sizing:border-box;

    }



    .module-browser-right{

        position:fixed;

        top:0;

        right:-100%;

        width:92%;

        max-width:420px;

        height:100vh;

        min-height:100vh;

        max-height:none;

        z-index:9999;

        overflow-y:auto;

        overflow-x:hidden;

        background:#171717;

        box-shadow:

            -10px 0 30px rgba(0,0,0,.5);

        transition:

            right .35s ease;

    }



    .module-browser-right.open{

        right:0;

    }



    .ecu-close{

        position:absolute;

        top:15px;

        right:15px;

        z-index:10;

        width:40px;

        height:40px;

        display:flex;

        align-items:center;

        justify-content:center;

        border:0;

        border-radius:50%;

        background:#ed1111;

        color:#fff;

        font-size:28px;

        line-height:1;

        cursor:pointer;

    }



    .ecu-toolbar{

        padding:70px 16px 18px;

    }



    .ecu-brand-title{

        height:44px;

        padding:0 16px;

    }



    .ecu-list{

        padding-left:16px;

        padding-right:16px;

    }



    .ecu-name{

        gap:12px;

    }



    .ecu-name strong{

        min-width:65px;

    }

}



/*
|--------------------------------------------------------------------------
| TABLET / SMALL DESKTOP
|--------------------------------------------------------------------------
*/


@media(max-width:1000px){

    .module-grid{

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

    }

}



/*
|--------------------------------------------------------------------------
| SMALL MOBILE MODULE GRID
|--------------------------------------------------------------------------
*/


@media(max-width:600px){

    .module-grid{

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

    }



    .module-browser-left{

        padding:20px;

    }



    .module-browser-header h2{

        font-size:22px;

    }

}

@media(max-width:700px){

    .ecu-item{

        align-items:flex-start;

        flex-wrap:wrap;

        gap:8px 10px;

    }


    .ecu-main{

        flex:1 1 100%;

        gap:10px;

    }


    .ecu-name{

        gap:12px;

    }


    .ecu-name strong{

        min-width:65px;

    }


    .ecu-note{

        flex:1 1 100%;

        padding-left:20px;

        white-space:normal;

    }

}

/*
|--------------------------------------------------------------------------
| Software Features
|--------------------------------------------------------------------------
*/


.software-features{

    width:100%;

    padding:20px 0;

    background:#141414;

}



.software-features-container{

    width:95%;

    max-width:1500px;

    margin:0 auto;

}



/*
|--------------------------------------------------------------------------
| Section Header
|--------------------------------------------------------------------------
*/


.software-features-header{

    max-width:800px;

    margin:0 auto 45px;

    text-align:center;

}



.software-features-header .section-eyebrow{

    display:block;

    margin-bottom:10px;

    color:#999;

    font-size:12px;

    font-weight:600;

    letter-spacing:.08em;

}



.software-features-header h2{

    margin:0;

    color:#fff;

    font-size:32px;

    line-height:1.2;

}



.software-features-header h2 span{

    color:#ed1111;

}



.software-features-header p{

    margin:15px auto 0;

    max-width:700px;

    color:#999;

    font-size:14px;

    line-height:22px;

}



/*
|--------------------------------------------------------------------------
| Features Grid
|--------------------------------------------------------------------------
*/


.software-features-grid{

    display:grid;

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

    gap:14px;

}



/*
|--------------------------------------------------------------------------
| Feature Card
|--------------------------------------------------------------------------
*/


.software-feature-card{

    position:relative;

    display:flex;

    gap:18px;

    min-height:190px;

    padding:25px;

    box-sizing:border-box;

    background:#202020;

    border:1px solid #333;

    border-radius:10px;

    overflow:hidden;

    transition:

        transform .2s ease,

        border-color .2s ease,

        background .2s ease;

}



.software-feature-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:3px;

    height:100%;

    background:#ed1111;

    transform:scaleY(0);

    transform-origin:center;

    transition:

        transform .2s ease;

}



.software-feature-card:hover{

    background:#232323;

    border-color:#444;

    transform:translateY(-3px);

}



.software-feature-card:hover::before{

    transform:scaleY(1);

}



/*
|--------------------------------------------------------------------------
| Feature Icon
|--------------------------------------------------------------------------
*/


.software-feature-icon{

    width:46px;

    height:46px;

    flex:0 0 46px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid #3a3a3a;

    border-radius:8px;

    background:#171717;

    color:#ed1111;

}



.software-feature-icon
.material-symbols-outlined{

    font-size:24px;

    line-height:1;

}



/*
|--------------------------------------------------------------------------
| Feature Content
|--------------------------------------------------------------------------
*/


.software-feature-content{

    min-width:0;

}



.software-feature-content h3{

    margin:1px 0 10px;

    color:#fff;

    font-size:16px;

    line-height:21px;

}



.software-feature-content p{

    margin:0;

    color:#999;

    font-size:13px;

    line-height:21px;

}



/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/


@media(max-width:1000px){

    .software-features-grid{

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

    }

}



@media(max-width:700px){

    .software-features{

        padding:65px 0;

    }



    .software-features-container{

        width:90%;

    }



    .software-features-header{

        margin-bottom:30px;

    }



    .software-features-header h2{

        font-size:26px;

    }



    .software-features-grid{

        grid-template-columns:1fr;

        gap:10px;

    }



    .software-feature-card{

        min-height:auto;

        padding:20px;

    }

}

/*
|--------------------------------------------------------------------------
| How It Works
|--------------------------------------------------------------------------
*/


.how-it-works{

    width:100%;

    padding:20px 0;

    background:#141414;

}



.how-it-works-container{

    width:95%;

    max-width:1500px;

    margin:0 auto;

}



/*
|--------------------------------------------------------------------------
| Section Header
|--------------------------------------------------------------------------
*/


.how-it-works-header{

    max-width:800px;

    margin:0 auto 50px;

    text-align:center;

}



.how-it-works-header .section-eyebrow{

    display:block;

    margin-bottom:10px;

    color:#999;

    font-size:12px;

    font-weight:600;

    letter-spacing:.08em;

}



.how-it-works-header h2{

    margin:0;

    color:#fff;

    font-size:32px;

    line-height:1.2;

}



.how-it-works-header h2 span{

    color:#ed1111;

}



.how-it-works-header p{

    max-width:750px;

    margin:15px auto 0;

    color:#999;

    font-size:14px;

    line-height:22px;

}



/*
|--------------------------------------------------------------------------
| Steps
|--------------------------------------------------------------------------
*/


.how-it-works-steps{

    position:relative;

    display:grid;

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

    gap:14px;

}



/*
|--------------------------------------------------------------------------
| Connecting Line
|--------------------------------------------------------------------------
*/


.how-it-works-steps::before{

    content:"";

    position:absolute;

    top:30px;

    left:12%;

    right:12%;

    height:1px;

    background:#3a3a3a;

    z-index:0;

}



/*
|--------------------------------------------------------------------------
| Step Card
|--------------------------------------------------------------------------
*/


.how-it-works-step{

    position:relative;

    z-index:1;

    min-height:270px;

    padding:25px;

    box-sizing:border-box;

    background:#171717;

    border:1px solid #333;

    border-radius:10px;

    transition:

        transform .2s ease,

        border-color .2s ease;

}



.how-it-works-step:hover{

    transform:translateY(-4px);

    border-color:#ed1111;

}



/*
|--------------------------------------------------------------------------
| Step Number
|--------------------------------------------------------------------------
*/


.how-it-works-step-number{

    position:absolute;

    top:16px;

    right:18px;

    color:#333;

    font-size:26px;

    font-weight:800;

    line-height:1;

}



/*
|--------------------------------------------------------------------------
| Step Icon
|--------------------------------------------------------------------------
*/


.how-it-works-step-icon{

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:25px;

    border:1px solid #3a3a3a;

    border-radius:8px;

    background:#202020;

    color:#ed1111;

}



.how-it-works-step-icon
.material-symbols-outlined{

    font-size:27px;

}



/*
|--------------------------------------------------------------------------
| Step Content
|--------------------------------------------------------------------------
*/


.how-it-works-step-content h3{

    margin:0 0 10px;

    color:#fff;

    font-size:17px;

    line-height:22px;

}



.how-it-works-step-content p{

    margin:0;

    color:#999;

    font-size:13px;

    line-height:21px;

}



/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/


@media(max-width:1000px){

    .how-it-works-steps{

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

    }



    .how-it-works-steps::before{

        display:none;

    }

}



@media(max-width:700px){

    .how-it-works{

        padding:65px 0;

    }



    .how-it-works-container{

        width:90%;

    }



    .how-it-works-header{

        margin-bottom:30px;

    }



    .how-it-works-header h2{

        font-size:26px;

    }



    .how-it-works-steps{

        grid-template-columns:1fr;

        gap:10px;

    }



    .how-it-works-step{

        min-height:auto;

        padding:20px;

    }



    .how-it-works-step-icon{

        margin-bottom:18px;

    }

}

/*
|--------------------------------------------------------------------------
| Tuning Software CTA
|--------------------------------------------------------------------------
*/


.tuning-software-cta{

    position:relative;

    width:100%;

    padding:50px 0;

    background:#141414;

    overflow:hidden;

}



.tuning-software-cta::before{

    content:"";

    position:absolute;

    top:50%;

    left:50%;

    width:600px;

    height:600px;

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

    background:
        radial-gradient(
            circle,
            rgba(206,32,38,.10) 0%,
            rgba(206,32,38,0) 70%
        );

    pointer-events:none;

}



.tuning-software-cta-container{

    position:relative;

    z-index:1;

    width:95%;

    max-width:1000px;

    margin:0 auto;

}



.tuning-software-cta-content{

    padding:60px 50px;

    text-align:center;

    background:#202020;

    border:1px solid #333;

    border-radius:12px;

}



/*
|--------------------------------------------------------------------------
| Eyebrow
|--------------------------------------------------------------------------
*/


.tuning-software-cta .section-eyebrow{

    display:block;

    margin-bottom:12px;

    color:#999;

    font-size:12px;

    font-weight:600;

    letter-spacing:.08em;

}



/*
|--------------------------------------------------------------------------
| Heading
|--------------------------------------------------------------------------
*/


.tuning-software-cta h2{

    margin:0;

    color:#fff;

    font-size:34px;

    line-height:1.2;

}



.tuning-software-cta h2 span{

    color:#ed1111;

}



/*
|--------------------------------------------------------------------------
| Description
|--------------------------------------------------------------------------
*/


.tuning-software-cta p{

    max-width:680px;

    margin:18px auto 28px;

    color:#999;

    font-size:14px;

    line-height:23px;

}



/*
|--------------------------------------------------------------------------
| CTA Button
|--------------------------------------------------------------------------
*/


.tuning-software-cta-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    min-height:44px;

    padding:0 20px;

    box-sizing:border-box;

    border:1px solid #ed1111;

    border-radius:6px;

    background:#ed1111;

    color:#fff;

    font-size:13px;

    font-weight:600;

    text-decoration:none;

    transition:

        background .18s ease,

        border-color .18s ease,

        transform .18s ease,

        box-shadow .18s ease;

}



.tuning-software-cta-button:hover{

    background:#c91010;

    border-color:#c91010;

    color:#fff;

    transform:translateY(-2px);

    box-shadow:
        0 6px 18px
        rgba(206,32,38,.20);

}



.tuning-software-cta-button
.material-symbols-outlined{

    font-size:19px;

    line-height:1;

}



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


@media(max-width:700px){

    .tuning-software-cta{

        padding:65px 0;

    }



    .tuning-software-cta-container{

        width:90%;

    }



    .tuning-software-cta-content{

        padding:40px 22px;

    }



    .tuning-software-cta h2{

        font-size:27px;

    }



    .tuning-software-cta p{

        font-size:13px;

        line-height:21px;

    }



    .tuning-software-cta-button{

        width:100%;

    }

}

/*
|--------------------------------------------------------------------------
| Tuning Software FAQ
|--------------------------------------------------------------------------
*/


.tuning-software-faq{

    width:100%;

    padding:40px 0;

    background:#141414;

}



.tuning-software-faq-container{

    width:95%;

    max-width:950px;

    margin:0 auto;

}



/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/


.tuning-software-faq-header{

    max-width:760px;

    margin:0 auto 45px;

    text-align:center;

}



.tuning-software-faq-header
.section-eyebrow{

    display:block;

    margin-bottom:10px;

    color:#999;

    font-size:12px;

    font-weight:600;

    letter-spacing:.08em;

}



.tuning-software-faq-header h2{

    margin:0;

    color:#fff;

    font-size:32px;

    line-height:1.2;

}



.tuning-software-faq-header h2 span{

    color:#ed1111;

}



.tuning-software-faq-header p{

    max-width:700px;

    margin:15px auto 0;

    color:#999;

    font-size:14px;

    line-height:22px;

}



/*
|--------------------------------------------------------------------------
| FAQ List
|--------------------------------------------------------------------------
*/


.tuning-software-faq-list{

    width:100%;

    border-top:1px solid #363636;

}



/*
|--------------------------------------------------------------------------
| FAQ Item
|--------------------------------------------------------------------------
*/


.tuning-software-faq-item{

    border-bottom:1px solid #363636;

}



/*
|--------------------------------------------------------------------------
| Question
|--------------------------------------------------------------------------
*/


.tuning-software-faq-question{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:21px 5px;

    border:0;

    background:transparent;

    color:#fff;

    text-align:left;

    font-family:inherit;

    font-size:14px;

    font-weight:600;

    line-height:20px;

    cursor:pointer;

}



.tuning-software-faq-question
.material-symbols-outlined{

    flex:0 0 20px;

    font-size:20px;

    color:#ed1111;

    transition:

        transform .2s ease;

}



.tuning-software-faq-item.active
.tuning-software-faq-question
.material-symbols-outlined{

    transform:rotate(45deg);

}



/*
|--------------------------------------------------------------------------
| Answer
|--------------------------------------------------------------------------
*/


.tuning-software-faq-answer{

    display:grid;

    grid-template-rows:0fr;

    transition:

        grid-template-rows .25s ease;

}



.tuning-software-faq-answer > div{

    overflow:hidden;

}



.tuning-software-faq-answer p{

    margin:0;

    padding:0 45px 22px 5px;

    color:#999;

    font-size:13px;

    line-height:22px;

}



.tuning-software-faq-item.active
.tuning-software-faq-answer{

    grid-template-rows:1fr;

}



/*
|--------------------------------------------------------------------------
| Hover
|--------------------------------------------------------------------------
*/


.tuning-software-faq-question:hover{

    color:#ed1111;

}



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


@media(max-width:700px){

    .tuning-software-faq{

        padding:65px 0;

    }



    .tuning-software-faq-container{

        width:90%;

    }



    .tuning-software-faq-header{

        margin-bottom:30px;

    }



    .tuning-software-faq-header h2{

        font-size:26px;

    }



    .tuning-software-faq-question{

        padding:18px 2px;

        font-size:13px;

    }



    .tuning-software-faq-answer p{

        padding:

            0 25px 20px 2px;

        font-size:13px;

        line-height:21px;

    }

}

.module-svg-dtc {
    transform: translateY(-8px);
}

/* =========================================================
   SOFTWARE PRICING
   ========================================================= */

.software-pricing{

    position:relative;

    width:100%;

    padding:20px 0;

    background:#141414;

}



.software-pricing-container{

    width:min(1180px, calc(100% - 40px));

    margin:0 auto;

}

.software-pricing-header .section-eyebrow{

    display:block;

    margin-bottom:10px;

    color:#999;

    font-size:12px;

    font-weight:600;

    letter-spacing:.08em;

}


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

.software-pricing-header{

    max-width:760px;

    margin:0 auto 45px;

    text-align:center;

}



.software-pricing-header h2{

    margin:12px 0 0;

    color:#ffffff;

    font-size:clamp(32px, 4vw, 46px);

    line-height:1.15;

    font-weight:700;

}



.software-pricing-header h2 span{

    color:#ef1111;

}



.software-pricing-header p{

    margin:18px auto 0;

    max-width:720px;

    color:#9ca3af;

    font-size:15px;

    line-height:1.8;

}



/* =========================================================
   BILLING TOGGLE
   ========================================================= */

.pricing-billing-toggle{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:4px;

    width:max-content;

    margin:0 auto 45px;

    padding:4px;

    background:#1c1c1c;

    border:1px solid #2d2d2d;

    border-radius:8px;

}



.pricing-billing-button{

    height:38px;

    padding:0 20px;

    border:0;

    border-radius:6px;

    background:transparent;

    color:#8b8b8b;

    font-size:12px;

    font-weight:700;

    letter-spacing:.04em;

    cursor:pointer;

    transition:

        background .2s ease,

        color .2s ease;

}



.pricing-billing-button:hover{

    color:#ffffff;

}



.pricing-billing-button.active{

    background:#ef1111;

    color:#ffffff;

}



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

.software-pricing-grid{

    display:grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:20px;

    align-items:stretch;

}



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

.software-pricing-card{

    position:relative;

    display:flex;

    flex-direction:column;

    min-width:0;

    padding:32px 28px 28px;

    background:#191919;

    border:1px solid #303030;

    border-radius:10px;

    transition:

        transform .2s ease,

        border-color .2s ease,

        box-shadow .2s ease;

}



.software-pricing-card:hover{

    transform:translateY(-4px);

    border-color:#484848;

    box-shadow:
        0 12px 35px
        rgba(0,0,0,.28);

}



/* =========================================================
   POPULAR
   ========================================================= */

.software-pricing-card.is-popular{

    border-color:#ef1111;

    box-shadow:
        0 0 0 1px
        rgba(239,17,17,.15);

}



.pricing-popular{

    position:absolute;

    top:-12px;

    left:50%;

    transform:translateX(-50%);

    padding:5px 14px;

    background:#ef1111;

    border-radius:20px;

    color:#ffffff;

    font-size:10px;

    font-weight:800;

    letter-spacing:.08em;

    white-space:nowrap;

}



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

.pricing-card-header{

    min-height:105px;

}



.pricing-card-header h3{

    margin:0;

    color:#ffffff;

    font-size:24px;

    font-weight:800;

    letter-spacing:.02em;

}



.pricing-card-header p{

    margin:10px 0 0;

    color:#8b8b8b;

    font-size:13px;

    line-height:1.7;

}



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

.pricing-card-price{

    padding:20px 0 24px;

    border-top:1px solid #2b2b2b;

    border-bottom:1px solid #2b2b2b;

}



.pricing-price-line{

    display:flex;

    align-items:flex-start;

    gap:4px;

}



.pricing-currency{

    margin-top:8px;

    color:#ef1111;

    font-size:20px;

    font-weight:700;

}



.pricing-current-price{

    color:#ffffff;

    font-size:42px;

    line-height:1;

    font-weight:800;

    letter-spacing:-.03em;

}



.pricing-period{

    display:block;

    margin-top:7px;

    color:#777777;

    font-size:12px;

}



.pricing-old-price{

    min-height:18px;

    margin-top:8px;

    color:#666666;

    font-size:11px;

    text-decoration:line-through;

}



/* =========================================================
   SECTIONS
   ========================================================= */

.pricing-section{

    padding:22px 0 0;

}



.pricing-section h4{

    margin:0 0 12px;

    color:#ffffff;

    font-size:11px;

    font-weight:800;

    letter-spacing:.08em;

    text-transform:uppercase;

}



.pricing-section ul{

    display:flex;

    flex-direction:column;

    gap:9px;

    margin:0;

    padding:0;

    list-style:none;

}



.pricing-section li{

    display:flex;

    align-items:flex-start;

    gap:9px;

    color:#a1a1a1;

    font-size:12px;

    line-height:1.55;

}



.pricing-check{

    flex:0 0 auto;

    color:#ef1111;

    font-size:13px;

    font-weight:800;

    line-height:1.4;

}



/* =========================================================
   CTA
   ========================================================= */

.pricing-card-button{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:44px;

    margin-top:28px;

    border:1px solid #ef1111;

    border-radius:6px;

    background:transparent;

    color:#ffffff;

    text-decoration:none;

    font-size:12px;

    font-weight:800;

    letter-spacing:.04em;

    transition:

        background .2s ease,

        border-color .2s ease,

        color .2s ease;

}



.pricing-card-button:hover{

    background:#ef1111;

    border-color:#ef1111;

    color:#ffffff;

}



/* =========================================================
   POPULAR CTA
   ========================================================= */

.software-pricing-card.is-popular
.pricing-card-button{

    background:#ef1111;

    color:#ffffff;

}



.software-pricing-card.is-popular
.pricing-card-button:hover{

    background:#c91010;

    border-color:#c91010;

}



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

@media (max-width:991px){

    .software-pricing{

        padding:75px 0;

    }


    .software-pricing-grid{

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

    }


    .software-pricing-card:last-child{

        grid-column:
            1 / -1;

        width:
            calc(50% - 10px);

        margin:
            0 auto;

    }

}



@media (max-width:700px){

    .software-pricing{

        padding:60px 0;

    }


    .software-pricing-container{

        width:
            calc(100% - 30px);

    }


    .software-pricing-grid{

        grid-template-columns:1fr;

        gap:18px;

    }


    .software-pricing-card:last-child{

        grid-column:auto;

        width:100%;

    }


    .pricing-card-header{

        min-height:auto;

    }


    .software-pricing-card{

        padding:30px 22px 24px;

    }


    .pricing-current-price{

        font-size:38px;

    }

}