html,body{
    margin:0;
    padding:0;
    font-family: 'Outfit';
}
.inner{
    width:1000px;
    margin:10px auto;
    padding:0px 0;
}

ul{
    margin:10px 0;
    padding:0 0px;
}
li {
    font-size:0.8rem;
    list-style: none; /* Убираем стандартные маркеры */
    padding: 4px 0; /* Внутренний отступ сверху и снизу */
    color:rgba(0,0,0,0.7);
}

/* Добавляем отступ в 10px между элементами, кроме первого и последнего */
li:not(:first-child):not(:last-child) {
    margin-top: 4px;
}

.hero{
    width: 100%;
    padding:400px 0 70px 0;
}


.title{
    font-size: 4rem;
    font-weight: 600;
    margin-bottom:20px;
}

.anno{
    font-size: 1.4rem;
    line-height: 2rem;
}

.superx{
    font-weight: 700;
    font-size: 7rem;
    color:#3D00E3;
}

.goal{
    /*background:#fafbfc;*/
}
.primgoal{
    padding:80px;
    border-radius: 20px;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
    font-size: 2rem;
}

.unlike{

}
.unlmain{
    max-width: 800px;
    font-size: 1.3rem;
    margin-bottom:50px;
}

.allunl{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ounl{
    width:30%;
    box-sizing: border-box;
    padding:40px;
    border-radius:14px;
    background:#3900D9;
    color:#ffF;
    font-size: 1.2rem;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    
   
}

.unlikein{
    font-size: 1rem;
    opacity:0.7;
    padding:100px 0;
}

.feats{
    padding:100px 0 0 0;
}


.allfeats{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.onefeat{
    width:47%;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 10px;
    padding:30px;
    margin-bottom:60px;
    box-sizing: border-box;
}

.featTitle{
    font-weight: 600;
    font-size: 1.2rem;
    margin-bottom: 10px;
    color:#3900D9;
}

.nottech{
    background: fuchsia;
}

.instant{
    background:lime;
}

.plugins{
    background:yellow
}

.forget{
    background:#eee;
}

.apicontrol{
    background:red;
}

.guard{
    padding:0px 0;
}

.beast{
    padding:120px 0 0 0;
   
}

.beastText{
    font-size: 1rem;
    line-height: 1.7rem;
    color:rgba(0,0,0,0.54);
}

.prices{
    padding:70px 0 140px 0;
}

x{color:#3900D9;}


.comparison-container {
    position: relative;
    border-radius: 10px;
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.comparison-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #40009F;
    color: #fff;
    padding: 15px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 10px 10px 0 0;
    border-bottom:1px solid #ddd;
}
.comparison-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #eee;
    background-color: #fafbfc;
    font-size: 0.9rem;
}
.comparison-row:nth-child(even) {
    background-color: #fff;
}
.comparison-row:last-child {
    border-bottom:none;
    border-radius: 0 0 10px 10px;
}
.comparison-column {
    flex: 1;
    text-align: center;
    padding: 8px 20px;
    box-sizing: border-box;
}
.feature-column {
    flex: 1.5;
    font-weight: bold;
    text-align: left;
}

.roar{
    position:absolute;
    right:-80px;
    top:-100px;
}

.roar > img{
    width: 180px;
}

.roarText{
    font-size: 1.4rem;
    max-width: 700px;
}

.concl{
    margin:20px 0;
}




.allguard{
    
    color:#3900D9;
    padding:60px;
    box-sizing: border-box;
    border-radius: 20px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    font-size: 1.1rem;
    line-height: 1.6rem;
}

.gpart{
    width:50%;
}

.columns {
    display: flex;
    justify-content: space-between;
}
.column {
    width: 48%;
}

.end{
    text-align: center;
    font-weight: 500;
    margin:0 auto;
    width:100%;
    padding:10px 0;
    font-size: 0.8rem;
    background:#fafbfc;
}

a{color:#3900D9;}

.arch{
    margin-bottom: 100px;
}

.nodelist{
    font-size: 0.9rem;
}

.mainsch{
    position:relative;
    margin-top:40px;
}

.mainsch > img{
    width:100%;
    height: auto;
}

.scroll-hint {
    text-align: center;
    font-size: 0.8rem;
    color: #888;
    margin-top: 0px;
    margin-bottom:20px;
    display: none;
}


/*MOBILE*/

@media (max-width: 768px) {
    .inner {
        width: 95%;
        padding: 0 10px;
    }

    .hero {
        padding: 200px 0 50px 0;
    }

    .title {
        font-size: 2.5rem;
    }

    .superx {
        font-size: 4rem;
    }

    .anno {
        font-size: 1.1rem;
        line-height: 1.6rem;
    }

    .primgoal {
        padding: 40px;
        font-size: 1.5rem;
    }

    .unlmain {
        font-size: 1.1rem;
    }

    .ounl {
        width: 100%;
        margin-bottom: 20px;
    }

    .allunl {
        flex-direction: column;
    }

    .allfeats {
        flex-direction: column;
    }

    .onefeat {
        width: 100%;
        margin-bottom: 30px;
    }

   

    .beastText,
    .roarText {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    .columns {
        flex-direction: column;
    }

    .column {
        width: 100%;
    }

    .allguard {
        padding: 20px;
    }

    .roar {
        display: none; /* Убрать иконку ROAR на мобилках, слишком давит */
    }

    .mainsch {
        margin-top: 20px;
    }

    .mainsch > img {
        max-width: 100%;
        height: auto;
    }

    .end {
        font-size: 0.7rem;
        padding: 8px 0;
    }



    .comparison-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* для плавности на iOS */
    }
    
    .comparison-header,
    .comparison-row {
        flex-wrap: nowrap; /* чтобы колонки не прыгали в столбик */
        min-width: 600px; /* или сколько нужно, чтобы всё влазило */
    }
    
    @media (max-width: 768px) {
        .comparison-column,
        .feature-column {
            text-align: center; /* чтобы в скролле ровнее смотрелось */
        }
    }


    
    
    @media (max-width: 768px) {
        .scroll-hint {
            display: block;
            margin-bottom: 20px;
        }
    }
}