* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Urbanist', serif; 
}

:root {
	--absolute-white: #fff;
	--absolute-black: #000;
	--purple-60: #703bf7;
	--purple-65: #8254f8;
	--purple-70: #946cf9;
	--purple-75: #a685fa;
	--purple-90: #dbcefd;
	--purple-95: #ede7fe;
	--purple-97: #f4f0fe;
	--purple-99: #fbfaff;
	--white-90: #e4e4e7;
	--white-95: #f1f1f3;
	--white-97: #f7f7f8;
	--white-99: #fcfcfd;
	--grey-08: #141414;
	--grey-10: #1a1a1a;
	--grey-15: #262626;
	--grey-20: #333;
	--grey-30: #4d4d4d;
	--grey-40: #666;
	--grey-50: #808080;
	--grey-60: #999;
}

::selection{
    background-color: #703bf7;
    color: #1a1a1a;
}

a{
    text-decoration: none;
}

body{
    background-color: #1a1a1a;
    overflow-x: hidden;
    width: 100%;
}

header {
    width: 100%;
    padding: 20px 0; 
    margin-bottom: 100px;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

header a.active {
    color: var(--purple-60) !important;
    background-color: rgba(112, 59, 247, 0.1);
    font-weight: 600;
}

.container {
    max-width: 1200px; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

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

.header-left img{
    width: 50px;
    height: 50px;
}

.header-left h2{
    font-size: 30px;
    color: var(--white-99);
}

header a {
    margin: 0 8px; 
    color: white;
    border-radius: 12px;
    display: inline-block;
    font-size: 20px;

    transition: all 0.3s ease;
}

header a:hover{
    color: #703bf7;
}

.header-right a{
    border: 1px solid #703bf7;
    padding: 10px 28px;
}

.parallax-section {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Важно для корректной работы эффектов внутри */
    isolation: isolate;
    margin-bottom: 80px;
}

.glass-text {
    font-size: 200px; 
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
    position: relative;
    color: rgba(255, 255, 255, 0.1);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.4);
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.5));
}

@media (max-width: 1024px) {
    .glass-text { font-size: 120px; }
}
@media (max-width: 768px) {
    .glass-text { font-size: 60px; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.4); }
}

@media (max-width: 768px) {
    .parallax-section {
        background-attachment: scroll;
        height: 300px;
    }
}




/* ---------------------------------------- */

                /* Main  */

/* ----------------------------------------  */

main{
    margin-bottom: 150px;
}


.hero{
    display: flex;
    justify-content: stretch;
}

.main-desc{
    font-weight: 600;
    font-size: 35px;
    line-height: 120%;
    color: #cdcdcd;
}

.main-left{
    max-width: 600px;
}

.main-left p{
    margin-top: 24px;
    font-size: 18px;
    color: #999999;
    max-width: 760px;
}

.main-left a{
    display: inline-block;
    margin-top: 60px;
    padding: 18px 24px;
    color: #cdcdcd;
    border-radius: 10px;
}

.main-btn-1{
    background-color: #1A1A1A;
    border: #9c9c9c 1px solid;
    transition: all 0.3s ease;
}

.main-btn-1:hover{
    background-color: #252525;
}

.main-btn-2{
    background-color: #703bf7;
    margin-left: 20px;
    

    transition: all 0.3s ease;
}

.main-btn-2:hover{
    box-shadow: 0 0 20px 7px rgba(106, 47, 255, 0.7);
    transform: scale(1.02);
}

.main-right{
    max-width: 920px;
}

.hero .container{
    display: flex;
}

.main-stat{
    display: flex;
    margin-top: 60px;
    gap: 20px;
}

.main-stat-1, .main-stat-2, .main-stat-3{
    background-color: #1a1a1a;
    padding: 16px 34px;
    border-radius: 10px;
    border: #9c9c9c 1px solid;

    transition: all 0.3s ease;
}

.main-stat-1:hover, .main-stat-2:hover, .main-stat-3:hover{
    background-color: #252525;
}

.main-stat h1, h2{
    display: inline-block;
    font-weight: 700;
    font-style: 40px;
    line-height: 150%;
    color: #fff;
}

.main-stat h2{
    font-size: 18px;
    font-weight: 500;
    color: #999999;
}



/* -------------------------------------------------------- */

/*                          Reviews                          */

/* -------------------------------------------------------- */

.reviews .container{
    display: flex;
    flex-direction: column;
}

.reviews-top{
    display: flex;
}


.reviews-top-desc h1{
    font-weight: 600;
    font-size: 48px;
    line-height: 150%;
    color: #fff;
    margin-bottom: 14px;
}

.reviews-top-desc p{
    font-weight: 500;
    font-size: 18px;
    line-height: 150%;
    color: #999999;
}

.reviews-bottom{
    display: flex;
}

.reviews-content{
    display: flex;
    margin-top: 80px;
    margin-bottom: 150px;
}

.reviews-item{
    border: 1px solid #262626;
    border-radius: 12px;
    margin-right: 30px;
    padding: 20px;
    transition: all 0.2s ease-out;
}

.reviews-item:hover{
    background-color: #333;
}

.reviews-item:last-of-type{
    margin-right: 0;
}

.reviews-stars {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;  
    justify-content: flex-start;
    margin-top: 30px;
    margin-bottom: 40px;
    min-height: 24px;
}

.reviews-text p{
    font-size: 18px;
    color: #9c9c9c;
    margin: 20px 0;
}

.reviews-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
}

.reviews-profile img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.reviews-profile-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.reviews-profile-text h2 {
    margin: 0;
    font-size: 18px;
    color: #fff;
}

.reviews-profile-text p {
    margin: 0 !important;
    font-size: 16px;
    color: #9c9c9c;
}




/* -------------------------------------------------------- */

                /* Footer */

/* -------------------------------------------------------- */

.footer {
    color: white;
    padding: 80px 0 40px 0;
    font-family: 'Urbanist', sans-serif;
    font-size: 18px;
}

footer .logo img{
    width: 50px;
    height: 50px;
}

.logo h2{
    font-size: 20px;
    color: var(--white-99);
}

.footer .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}


.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    margin-bottom: 50px;
    position: relative;
}


.footer-brand {
    flex: 0 0 200px;
}

.footer-brand .logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 25px;
}


.subscribe-box {
    display: flex;
    align-items: center;
    border: 1px solid #9c9c9c;
    border-radius: 10px;
    padding: 12px 16px;
    gap: 10px;
}

.subscribe-box input {
    background: transparent;
    border: none;
    color: white;
    outline: none;
    width: 100%;
    font-size: 14px;
}

.subscribe-box button {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.submit i{
    color: #999999;
}

/* Навигация */
.footer-nav {
    display: flex;
    justify-content: space-between;
    gap: 100px;
}

.footer-main {
    font-size: 26px;
    font-weight: 500;
    margin-bottom: 20px;
}

.nav-column a {
    display: block;
    color: #999999;
    text-decoration: none;
    font-size: 18px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.nav-column a:hover {
    transform: scale(1.02);
    color: #fff;
}



.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 20px 0;
    flex-direction: column-reverse;
    gap: 25px;
    padding-top: 30px;
    border-top: 1px solid #f4f0fe;
}

.footer-info {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: white;
}

.footer-info a{
    text-decoration: none;
    color: aliceblue;
}
    
.footer-info span{
    margin-top: 40px;
}


.social-links {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--gray-30);
    font-size: 20px;
}

.social-links a{
    transition: all 0.3s ease;
}

.social-links a:hover{
    color: var(--white-99);
    transform: scale(1.1);
}


/* --- ОБЩИЙ АДАПТИВ (Планшеты и Телефоны) --- */


@media (max-width: 1024px) {
    .container, .featured .container {
        margin-left: auto;
        margin-right: auto;
        padding: 0 20px;
    }
}

@media (max-width: 768px) {
    /* 1. Сбрасываем жесткие отступы контейнера */
    .container, .featured .container {
        flex-direction: column;
        margin: 0 auto !important;
        padding: 0 15px;
        text-align: center;
        width: 100%;
    }

    /* 2. Хедер */
    header .container {
        gap: 15px;
    }
    
    header nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    header a {
        margin: 5px !important;
        font-size: 14px;
    }

    .header-right a{
        padding: 20px 80px;
        border: 1px solid #703bf7;
    }

    /* 3. Герой-секция (Main) */
    .hero {
        flex-direction: column;
    }

    .main-left {
        max-width: 100%;
        padding: 0;
    }

    .main-right {
        display: flex !important;
        flex-direction: column;
        gap: 15px;
        
        margin-top: 50px; 
        
        width: 100%;
        align-items: center;
    }

    .main-desc {
        font-size: 28px;
    }


    .main-btn-2 {
        margin-left: 0 !important;
        margin-top: 10px;
    }

    .main-stat {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    .main-stat-1, .main-stat-2, .main-stat-3 {
        width: 100%;
        max-width: 300px;
    }

    /* 4. Карточки (Features) */
    .featured-top {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        text-align: center;
    }

    .fea-content-container {
        flex-direction: column;
        align-items: center;
    }

    .fea-card {
        margin-right: 0;
        margin-bottom: 30px;
        max-width: 100%;
    }

    .fea-img, .fea-image {
        width: 100%;
        height: auto;
    }

    /* 5. Отзывы */
    .reviews-content {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 50px;
    }

    .reviews-item {
        margin-right: 0;
        padding: 30px;
    }

    /* 6. ИСПРАВЛЕННЫЙ ФУТЕР */
    .footer {
        padding: 40px 0;
    }

    .footer-top {
        flex-direction: column;
        align-items: center;
        gap: 40px;
        text-align: center;
    }

    .footer-brand {
        flex: none;
        width: 100%;
    }

    .footer-brand .logo {
        justify-content: center;
    }

    .footer-nav {
        flex-direction: column;
        gap: 30px;
        width: 100%;
        align-items: center;
    }

    .nav-column {
        text-align: center;
    }

    /* Показываем все колонки, либо настраиваем их */
    .nav-column:last-of-type {
        display: block; 
    }

    .footer-bottom {
        flex-direction: column-reverse; /* Соцсети сверху, копирайт снизу */
        gap: 25px;
        padding-top: 30px;
        border-top: 1px solid #666;
    }

    .footer-info {
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }

    .footer-info span {
        margin-top: 10px;
    }

    .social-links {
        justify-content: center;
        width: 100%;
    }
}


/* 
контакты добавить форму
о нас карточки добилить
главная добавть лого в бг
*/