:root{
    --accent-color:#007bff;
    --rem:1rem;
    --card-bg: rgb(38 38 38);
    --border-color: rgb(46 46 46);
    --border: 1px solid var(--border-color);
}
 
 main.grid{
     width:100%;
 }
 
 
     /* Контейнер секции */
    .apple-cta-section {
        width: 100%;
        margin: 1rem 0;
        box-sizing: border-box;
    }

    /* Внешняя Grid-сетка */
    .apple-cta-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        box-sizing: border-box;
    }

    /* Стили карточки (Внутренний Grid для идеальных пропорций) */
    .apple-cta-card {
        background: var(--card-bg, #1c1c1e);
        border-radius: 1rem;
        padding: 1.25rem; /* Чуть больше отступ для стиля виджета на ПК */
        text-decoration: none;
        border: 1px solid var(--border-color);
        transition: all 0.3s;
        box-sizing: border-box;
        
        /* Внутренняя сетка карточки */
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "icon arrow"
            "content content";
        gap: 16px;
        align-items: start;
        height: 100%; /* Чтобы карточки в ряду были одной высоты */
    }

    /* Эффект наведения */
    .apple-cta-card:hover {
        border-color: var(--accent-color);
    }

    .apple-cta-card:hover .apple-cta-arrow {
        color: var(--accent-color);
        transform: translateX(3px);
    }

    /* Иконки */
    .apple-cta-icon {
        grid-area: icon;
        width: 44px;
        height: 44px;
        border-radius: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        color: #fff;
    }

    /* Градиенты */
    .icon-plan  { background: linear-gradient(135deg, #00C6FF, #0072FF); }
    .icon-feed { background: linear-gradient(135deg, #FF512F, #DD2476); }
    .icon-apps { background: linear-gradient(135deg, #8E2DE2, #4A00E0); }
    .icon-chat { background: linear-gradient(135deg, #11998E, #38EF7D); }

    /* Стрелочка */
    .apple-cta-arrow {
        grid-area: arrow;
        justify-self: end;
        align-self: center; /* Центрируем по высоте иконки */
        color: rgba(255, 255, 255, 0.3);
        transition: color 0.2s ease, transform 0.2s ease;
        display: flex;
    }

    /* Текстовый контент */
    .apple-cta-content {
        grid-area: content;
        display: flex;
        flex-direction: column;
        align-self: end; /* Прижимаем текст к низу карточки */
    }

    .apple-cta-title {
        margin: 0 0 4px 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        font-size: 17px;
        font-weight: 600;
        color: var(--tg-text, #ffffff);
        letter-spacing: -0.4px;
        line-height: 1.2;
    }

    .apple-cta-desc {
        margin: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        font-size: 13px;
        line-height: 1.4;
        color: var(--tg-hint, #8e8e93);
    }

    /* --- Адаптация (Media Queries) --- */

    /* Планшеты (от 768px до 1024px) */
    @media (max-width: 1024px) {
        .apple-cta-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* Смартфоны (до 767px) - Горизонтальный список */
    @media (max-width: 767px) {
        .apple-cta-grid {
            grid-template-columns: 1fr;
            gap: 12px;
        }

        .apple-cta-card {
            padding: 1rem;
            grid-template-columns: auto 1fr auto;
            grid-template-rows: auto;
            grid-template-areas: "icon content arrow";
            align-items: center; /* Центрируем всё по вертикали */
            gap: 14px; /* Отступ между колонками */
        }

        .apple-cta-content {
            align-self: center; /* Отменяем прижатие к низу из десктопа */
        }

        .apple-cta-icon {
            width: 42px;
            height: 42px;
            font-size: 20px;
            border-radius: 12px;
        }

        .apple-cta-title {
            font-size: 16px;
        }

        .apple-cta-desc {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    }
    
 
  /* === КАРТОЧКА === */
    .comment-card {
        background: #252525;
        padding: 20px;
        position: relative;
        transition: background 0.2s;
    }
    
    a{text-decoration:none!important;}

    .comment-card:hover {
        border-color: #3a3a3a;
        background: #282828;
    }
    
    .comment-card:hover .fade-overlay{
    background:linear-gradient(to bottom, rgba(37,37,37,0), #282828);
    }

    /* Акцентная линия слева */
    .comment-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 20px;
        bottom: 20px;
        width: 3px;
        border-radius: 0 4px 4px 0;
        opacity: 0.8;
    }

    /* === ШАПКА === */
    .comment-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }

    .comment-author-avatar img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid #2b2b2b;
    }

    .comment-meta {
        flex-grow: 1;
        display: grid;
        gap: 2px;
    }

    .author-name a {
        color: #fff;
        text-decoration: none;
        font-weight: 700;
        font-size: 15px;
    }

    .group-label {
        font-size: 11px;
        background: #333;
        padding: 2px 6px;
        border-radius: 4px;
        color: #bbb;
        margin-left: 6px;
        font-weight: 400;
    }

    .comment-date {
        font-size: 12px;
        color: #777;
    }

    /* === ТЕЛО (Сворачивание текста) === */
    .comment-body {
        font-size: 15px;
        line-height: 1.6;
        color: #e0e0e0;
        margin-bottom: 12px;
    }

    .comment-text-limiter {
        position: relative;
        transition: max-height 0.3s ease;
        overflow: hidden;
    }

    /* Состояние: Свернуто (примерно 10-12 строк) */
    .comment-text-limiter.collapsed {
        max-height: 240px; 
    }

    /* Состояние: Развернуто */
    .comment-text-limiter.expanded {
        max-height: none;
        overflow: visible;
    }

    /* Градиент затемнения */
    .fade-overlay {
        position: absolute;
        bottom: 0; left: 0; width: 100%; height: 60px;
        background: linear-gradient(to bottom, rgba(37,37,37,0), #252525); /* Под цвет фона карточки */
        pointer-events: none; opacity: 0; transition: opacity 0.3s;
    }

    .comment-text-limiter.collapsed .fade-overlay { opacity: 1; }

    /* Кнопка разворачивания */
    .comment-expand-btn {
           margin-top: 8px;
    color: #3a86ff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    user-select: none;
    /* padding-left: 56px; */
    justify-content: center;
    justify-items: center;
    justify-self: center;
    text-align: center;
    display: flex;
    background: #2b2b2b;
    padding: 4px 12px;
    border-radius: 50px;
    border: 1px solid #353535;
    }
    
    .comment-expand-btn:hover { color: #fff; }
    .comment-expand-btn i { transition: transform 0.3s; }
    .comment-expand-btn.active i { transform: rotate(180deg); }


    /* === КНОПКИ ДЕЙСТВИЙ === */
    .comment-actions {
        display: flex;
        gap: 8px;
    }

    .act-btn {
        display: flex; align-items: center; justify-content: center;
        width: 32px; height: 32px; /* Компактные кнопки */
        color: #777; cursor: pointer; border-radius: 8px;
        transition: 0.2s; background: #202020; border: 1px solid #2b2b2b;
    }
    
    .act-btn .txt { display: none; } /* Скрываем текст на кнопках для чистоты */

    .act-btn:hover { background: #333; color: #fff; }
    .act-btn.reply:hover { color: #3a86ff; border-color: #3a86ff; }
    .act-btn.del:hover { color: #ff4d4d; border-color: #ff4d4d; }

    /* === ФУТЕР === */
    .comment-footer {
        padding-left: 56px;
        display: flex; justify-content: flex-end;
    }

    .rating-box .rate-wrap {
        display: flex; gap: 8px; background: #1f1f1f;
        padding: 4px; border-radius: 8px; border: 1px solid #2b2b2b;
    }

    .rate-btn {
        display: flex; align-items: center; gap: 6px; padding: 4px 10px;
        border-radius: 6px; font-size: 12px; font-weight: 600; color: #999;
    }
    .rate-btn.like:hover { color: #00c853; }
    .rate-btn.dislike:hover { color: #ff3d00; }
    
    .mass-check-wrapper { position: absolute; top: 15px; right: 15px; opacity: 0.5; }

    /* === ДЕРЕВО (ВЕТКИ) === */
    ol.comments-tree-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem;}
    
    .comments-tree-item { position: relative; border: 1px solid #2b2b2b;    border-radius: 1rem;    overflow: hidden;}
    
    /* Отступы для детей */
    .comments-tree-item .comments-tree-list {
        padding:0!important;
    }
    
    /* Горизонтальная связь */
    .comments-tree-item .comments-tree-list > .comments-tree-item::before {
        content: ''; position: absolute; top: 30px; left: -32px;
        width: 30px; height: 2px; background: #333;
        border-radius: 0 0 0 10px;
    }
    
    .comments-tree-item ol.comments-tree-list .comments-tree-item{
        border-left:none;border-right:none;border-bottom:none;border-radius:0;}


.ott:hover {
    outline: 3px solid #8080803b;
    outline-offset: 3px;
}

.ott {
    outline: 3px solid transparent;
    outline-offset: 3px;
    transition:all .3s;
}



input{font-size: 16px;}

/* Основные стили с шрифтом Inter */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Настоящий grain шум через Canvas */
#noise {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.7;
    mix-blend-mode: overlay;
}

a.cta:hover{
    opacity: .8!important;
    transform: scale(.97)!important;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    background-color: #1c1c1c;
    transition: background-color 0.5s ease-in-out;
}

/* Ваши дополнительные стили */

header{
    padding:1rem;
    color:white;
    display:flex;
    align-items: center;
    position:sticky;
    top:0;
        background-color: var(--card-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 9999999;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0px 5px 10px #00000010;
}

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

header .container .logo{
    font-family: "Libre Franklin", sans-serif;
    font-weight:900;
    color:white;
    text-shadow:0 2 5px rgba(0, 0, 0, 1);
    font-size:1.5rem;
}

header .container .ctahead{
    font-weight:900;
    background:url(/templates/main/imgs/btn.png) no-repeat center center;
    text-shadow:0px 2px 5px rgba(0, 0, 0, 1);
    background-size:contain;
    padding:1rem 2rem;
    color:white;
    text-decoration: none;
    font-size:1rem;
    font-weight:bold;
    transition:all 0.3s;
}

.container .ctahead:hover{
    opacity:.8;
    transform:scale(.97);
}

section.firstscreen{
    background:radial-gradient(ellipse at top, #357865 0%, rgba(255,255,255,0) 70%);
    overflow: hidden;
    width:webkit-fill-available;
    height:calc(100vh - 7.5rem);
    margin:1rem;
    border-radius:1rem;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position:relative;
    box-shadow: 0 5 10px rgba(0, 0, 0, 0.5);
}

section.firstscreen::after{
    content:"";
    background-image: url(/templates/main/imgs/grid.png);
    inset: 0px;
background-repeat: repeat;
border: 0px;
background-size: 54px auto;
width:100%;
height:100%;
position:absolute;
z-index:2;
top:0;left:0;
opacity:.1;
pointer-events: none;
}

section.firstscreen::before{
    content:"";
    background: radial-gradient(ellipse at top, #35786500 0%, rgba(0, 0, 0, 0.649) 70%);
    inset: 0px;
    border: 0px;
    width:100%;
    height:100%;
    position:absolute;
    z-index:4;
    top:0;left:0;
    pointer-events: none;
    animation: monitor-flicker 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.maintitle {
    font-family: "Libre Franklin", sans-serif;
    font-size: 170px;
    color: white;
    font-weight: 900;
    letter-spacing: -28px;
    z-index: 4;
    line-height: 108px;
    text-shadow: 0px 7px 17px rgb(0 0 0 / 95%);
    text-align: center;
}

.maintitle .firstwords span{
    display:inline-block;
    animation: fadeIn 0.6s ease-out both;
}

.maintitle .firstwords span:nth-child(1) { animation-delay: .4s; }
.maintitle .firstwords span:nth-child(2) { animation-delay: .5s; }
.maintitle .firstwords span:nth-child(3) { animation-delay: .6s; }
.maintitle .firstwords span:nth-child(4) { animation-delay: .7s; }
.maintitle .firstwords span:nth-child(5) { animation-delay: .8s; }
.maintitle .firstwords span:nth-child(6) { animation-delay: .9s; }
.maintitle .firstwords span:nth-child(7) { animation-delay: 1s; }
.maintitle .firstwords span:nth-child(8) { animation-delay: 1.2s; }
.maintitle .firstwords span:nth-child(9) { animation-delay: 1.3s; }

.maintitle .secondwords{
    z-index:6;
}

.maintitle .secondwords span{
    display:inline-block;
    animation: fadeIn 0.6s ease-out both;
}

.maintitle .secondwords span:nth-child(1) { animation-delay: 1.4s; }
.maintitle .secondwords span:nth-child(2) { animation-delay: 1.5s; }
.maintitle .secondwords span:nth-child(3) { animation-delay: 1.6s; }
.maintitle .secondwords span:nth-child(4) { animation-delay: 1.7s; }
.maintitle .secondwords span:nth-child(5) { animation-delay: 1.8s; }
.maintitle .secondwords span:nth-child(6) { animation-delay: 1.9s; }
.maintitle .secondwords span:nth-child(7) { animation-delay: 2s; }
.maintitle .secondwords span:nth-child(8) { animation-delay: 2.1s; }

.description{
    animation: fadeIn 1.8s ease-out 0s both;
}

.description span{
    margin-top:2rem;
    color:white;
    display:inline-block;
}
a{cursor:pointer;}

input#course_email:focus-visible {
    outline: 1px solid #80808082;
    border-radius: 8px;
}

.description .selected {
    animation: fadeIn 1s ease-out .5s both;
}

/* Базовые стили контейнера */
.folderbox {
    animation: fadeInClouds 2s ease-out .5s both;
    margin: 0 auto;
    margin-top: -15rem; /* Ваше условие */
    z-index: 35;
    width: 266px;
    height: 224px;
    position: relative;
    perspective: 1000px; /* Для 3D наклона */
}

/* Задник папки */
.folderback {
    background-image: url(/templates/main/imgs/folder/bg.webp);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transform-style: preserve-3d;
}

/* Передняя крышка */
.folderfront {
    transition: all .3s ease-in-out;
    background-image: url(/templates/main/imgs/folder/front.webp);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transform-origin: bottom;
}

/* Контейнер для файлов */
.items {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 5;
}

/* Файлы (карточки) */
.items .itm {
    transition: all .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 75%; /* Адаптивная ширина относительно папки */
    aspect-ratio: 1 / 1;
    position: absolute;
    border-radius: 8px;
    overflow: hidden;
    background-position: center;
    background-size: cover;
    /* Исходное положение: слегка торчат сверху */
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 3px solid white;
    box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
}

/* Позиции файлов в закрытой папке */
.itm.ituno { transform: translate(-53%, -50%) rotate(-3deg); z-index: 6; }
.itm.itdos { transform: translate(-50%, -58%) rotate(0deg); z-index: 8; }
.itm.ittres { transform: translate(-47%, -50%) rotate(3deg); z-index: 7; }

/* Ховер эффекты */
.folderbox:hover .folderfront {
    transform: rotateX(-45deg); /* Перспективное открытие */
    filter: drop-shadow(0px -15px 20px rgba(0,0,0,0.2));
}

.folderbox:hover .itm {
    top: -25%; /* Вылет вверх */
}

.folderbox:hover .itm.ituno {
    left: 10%;
    transform: translate(-50%, -50%) rotate(-12deg);
}

.folderbox:hover .itm.itdos {
    top: -40%;
    transform: translate(-50%, -50%) rotate(2deg);
}

.folderbox:hover .itm.ittres {
    left: 90%;
    transform: translate(-50%, -50%) rotate(12deg);
}

/* АДАПТИВ ДЛЯ СМАРТФОНОВ */
@media (max-width: 758px) {
    .folderbox {
        margin-top: -15rem !important;
        z-index: 9 !important;
        width: 161px !important;
        height: 135px !important;
    }
    
    /* Уменьшаем толщину рамки для маленьких экранов */
    .items .itm {
        border-width: 2px;
        box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
    }

    /* Корректируем вылет на мобилках, чтобы не улетали за края экрана */
    .folderbox:hover .itm.ituno { left: 15%; }
    .folderbox:hover .itm.ittres { left: 85%; }
}

.folder.big{
    width:200px;
    height:200px;
}

.camera{
    background-image:url(/templates/main/imgs/camera.webp);
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    position:absolute;
    top:-80px;
    left:180px;
    z-index:3;
    transform:translateX(-50%);
    height:500px;
    width:500px;
    transition: all 0.3s ease;
    animation: slideInFromLeft 1.2s ease-out 0.2s both;
}

.microphone{
    background-image:url(/templates/main/imgs/mic.webp);
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    position:absolute;
    bottom:80px;
    right:80px;
    z-index:3;
    height:100px;
    width:100px;
    transition: all 0.3s ease;
    animation: slideInFromRight 1s ease-out 0.6s both;
}

.laptop{
    background-image:url(/templates/main/imgs/pc.webp);
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    position:absolute;
    top:-650px;
    left:50%;
    z-index:3;
    transform:translateX(-50%);
    height:1000px;
    width:1000px;
    transition: all 0.3s ease;
    animation: slideInFromTop 1.4s ease-out 0s both;
}

.green{
    background-image:url(/templates/main/imgs/flower.webp);
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    position:absolute;
    top:60px;
    right:-100px;
    z-index:3;
    height:300px;
    width:300px;
    transition: all 0.3s ease;
    animation: slideInFromRight 1.1s ease-out 0.4s both;
}


.face{
    background-image:url(/templates/main/imgs/film.webp);
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    position:absolute;
    bottom:160px;
    right:300px;
    z-index:3;
    height:250px;
    width:300px;
    rotate:-5deg;
    transition: all 0.3s ease;
    animation: slideInFromBottom 1s ease-out 0.8s both;
}

.graph{
 background-image: url(/templates/main/imgs/graph.webp);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 45px;
    left: 250px;
    z-index: 3;
    height: 300px;
    width: 300px;
    
    transform: rotate(10deg) !important;
    transition: all 0.3s 
ease;
    animation: slideInFromBottom 1.3s 
ease-out 1s both;
}

.secondscreen{
    margin-top:10rem;
}

.titilehead{
    font-size:2rem;
    font-weight:900;
    color:white;
    text-align: center;
}

.descriptionhead{
    font-size:16px;
    max-width:500px;
    margin:0 auto;
    text-align: center;
    margin-top:1rem;
    color:gray;
}

.playerhead{
    max-width:1080px;
    aspect-ratio: 16/9;
    overflow: hidden;
    border-radius:1rem;
    margin:0 auto;
    margin-top:5rem;
    box-shadow: 0 15px 30px -20px color(srgb 0 0 0 / 0.98);
}

.ctatitle{
    font-size:2rem;
    font-weight:900;
    color:white;
    text-align: center;
    max-width:400px;
    margin:0 auto;
    margin-top:5rem;
    line-height: 1.2;
}

.ctaprice{
    font-size:2rem;
    font-weight:700;
    color:rgb(238, 152, 27);
    text-align: center;
    max-width:400px;
    margin:0 auto;
    margin-top:2rem;
    line-height: 1.2;
}

.ctapricedescription{
    font-size:14px;
    max-width:400px;
    margin:0 auto;
    text-align: center;
    margin-top:1rem;
    color:rgb(238, 152, 27);
}

.benefits{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:1rem;
    max-width:700px;
    margin:0 auto;
    margin-top:2rem;
    margin-bottom:2rem;
}

.benefits li{
    list-style: none;
    padding:1rem;
    background:rgba(128, 128, 128, 0.107);
    border-radius:1rem;
    font-size:14px;
    font-weight:500;
    color:gray;
    transition:all 0.3s;
    cursor:pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cta{
    font-weight:900;
    background:url(/templates/main/imgs/btn.png) no-repeat center center;
    text-shadow:0px 2px 5px rgba(0, 0, 0, 1);
    background-size:contain;
    padding:1rem 2rem;
    color:white;
    text-decoration: none;
    font-size:1rem;
    font-weight:bold;
    text-align:center;
    margin:0 auto;
    display:block;
    transition:all 0.3s;
}

.cta:hover{
    opacity:.8;
    transform:scale(.97);
}

.folderinside{
    background-image:url(/templates/main/imgs/folder.webp);
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    z-index:3;
    width:200px;
    height:200px;
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    margin:4rem auto;
}

.skyitems{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:7;
    pointer-events: none;
}

.skyitems .skyitem1{
    background-image:url(/templates/main/imgs/sky2.webp);
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    width:300px;
    height:300px;
    position:absolute;
    top:100px;
    right:300px;
    pointer-events: none;
    animation: fadeInClouds 2s ease-out 1.5s both, float-cloud-1 25s ease-in-out 3.5s infinite;
    will-change: transform;
}

.skyitems .skyitem2{
    background-image:url(/templates/main/imgs/sky3.webp);
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    width:300px;
    height:300px;
    position:absolute;
    bottom:40px;
    left:40px;
    pointer-events: none;
    animation: fadeInClouds 2.2s ease-out 1.8s both, float-cloud-2 30s ease-in-out 4s infinite;
    will-change: transform;
}

.skyitems .skyitem3{
    background-image:url(/templates/main/imgs/sky.webp);
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    width:300px;
    height:300px;
    position:absolute;
    bottom:40px;
    left:40px;
    pointer-events: none;
    animation: fadeInClouds 2s ease-out 2.2s both, float-cloud-2 30s ease-in-out 4.2s infinite;
    will-change: transform;
}


/* Анимации входа для overlay элементов */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-100vw) translateY(-50%);
        opacity: 0;
    }
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100vw);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromTop {
    0% {
        transform: translateX(-50%) translateY(-100vh);
        opacity: 0;
    }
    100% {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@keyframes slideInFromBottom {
    0% {
        transform: translateY(100vh);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
        filter:blur(3px);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter:blur(0px);
    }
}

@keyframes fadeInClouds {
    0% {
        opacity: 0;
        transform: translate(0, 20px) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg);
    }
}

/* Анимации для плавающих облаков */
@keyframes float-cloud-1 {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(30px, -20px) rotate(1deg);
    }
    50% {
        transform: translate(-10px, -40px) rotate(-0.5deg);
    }
    75% {
        transform: translate(-40px, -15px) rotate(0.8deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

/* Анимация мерцания монитора */
@keyframes monitor-flicker {
    0% {
        background: radial-gradient(ellipse at top, #35786500 0%, rgba(0, 0, 0, 0.649) 70%);
    }
    10% {
        background: radial-gradient(ellipse at top, #35786508 0%, rgba(0, 0, 0, 0.649) 70%);
    }
    20% {
        background: radial-gradient(ellipse at top, #35786515 0%, rgba(0, 0, 0, 0.649) 70%);
    }
    25% {
        background: radial-gradient(ellipse at top, #35786522 0%, rgba(0, 0, 0, 0.649) 70%);
    }
    30% {
        background: radial-gradient(ellipse at top, #35786518 0%, rgba(0, 0, 0, 0.649) 70%);
    }
    40% {
        background: radial-gradient(ellipse at top, #35786510 0%, rgba(0, 0, 0, 0.649) 70%);
    }
    50% {
        background: radial-gradient(ellipse at top, #35786505 0%, rgba(0, 0, 0, 0.649) 70%);
    }
    60% {
        background: radial-gradient(ellipse at top, #35786512 0%, rgba(0, 0, 0, 0.649) 70%);
    }
    70% {
        background: radial-gradient(ellipse at top, #35786520 0%, rgba(0, 0, 0, 0.649) 70%);
    }
    75% {
        background: radial-gradient(ellipse at top, #35786525 0%, rgba(0, 0, 0, 0.649) 70%);
    }
    80% {
        background: radial-gradient(ellipse at top, #35786515 0%, rgba(0, 0, 0, 0.649) 70%);
    }
    90% {
        background: radial-gradient(ellipse at top, #35786508 0%, rgba(0, 0, 0, 0.649) 70%);
    }
    100% {
        background: radial-gradient(ellipse at top, #35786500 0%, rgba(0, 0, 0, 0.649) 70%);
    }
}

@keyframes float-cloud-2 {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    20% {
        transform: translate(-25px, 15px) rotate(-0.8deg);
    }
    40% {
        transform: translate(20px, 35px) rotate(1.2deg);
    }
    60% {
        transform: translate(45px, 10px) rotate(-0.4deg);
    }
    80% {
        transform: translate(15px, -25px) rotate(0.6deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}



.thirdscreen .titilehead{
        font-size:2rem;
        font-weight:900;
        color:white;
        text-align: center;
    
}

.storytelling{
    display:grid;
    gap:10rem;
    max-width:960px;
    margin:3rem auto;
}

.firststory, .thirdstory{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:3rem;
    align-content: center;
align-items: center;
}

.secondstory{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:3rem;
    align-content: center;
align-items: center;
}

.storytitle{
    font-size:2rem;
    font-weight:600;
    color:rgb(255, 200, 0);
    max-width:300px;
    line-height: 1;
    margin-bottom:2rem;
}

.storydescription{
    font-size:16px;
    color:white;
    max-width:300px;
}

.storyimage{
    width:400px;
    aspect-ratio: 16/9;
    background:url(/templates/main/imgs/graph.webp) no-repeat center center;
    background-size:cover;
    background-position:center;
    border-radius:1rem;
    overflow:hidden;
    box-shadow: 0 15px 30px -20px color(srgb 0 0 0 / 0.98);
}

.grid6{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:1rem;
    margin:0 auto;
    margin-top:3rem;
    margin-bottom:3rem;
    padding:0 1rem;
}

.griditem{
    background:rgba(128, 128, 128, 0.107);
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position:relative;
    border:2px solid transparent;
    overflow:hidden;
    transition:all 0.3s;
}

.griditem:hover{
    border:2px solid rgba(26, 93, 239, 0.935);
}

#iconius::before{flex-shrink:0;}

.griditem .image{
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    overflow:hidden;
    position:relative;
    aspect-ratio: 16/9;
}

.griditem .image::before{
    content:"";
    background: radial-gradient(ellipse at left top, rgb(0 0 0 / 22%), rgb(0 0 0 / 66%));
    position:absolute;
    inset:0;
    z-index:2;
    transition:all 0.3s;
    opacity:1;
}

.griditem:hover .image::before{
    opacity:.1;
    background:radial-gradient(ellipse at left top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.66));
}

.griditemtitle{
    font-size:1rem;
    font-weight:600;
    color:rgba(255, 255, 255, 0.927);
    text-align: center;
    background:url(/templates/main/imgs/tape.png) no-repeat center center;
    background-size:contain;
    padding:0px 15px;
    position: absolute;
    left:0;top:0;
    margin:1rem;
    z-index: 3;
}

.griditemdescription{
    font-size:14px;
    color:white;
    text-align: center;
    background:rgba(0, 0, 0, 0.601);
    padding:10px;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    z-index:3;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Before/After слайдер */
.beforeafter {
    position: relative;
    max-width: 800px;
    margin: 3rem auto;
    aspect-ratio: 2/1;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    cursor: grab;
    user-select: none;
    transform:scale(1);
}

.beforeafter:active {
    cursor: grabbing;
}

.before, .after {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.before {
    top: 0;
    left: 0;
    z-index: 2;
}

.after {
    top: 0;
    left: 0;
    z-index: 1;
}

/* Вертикальный ползунок */
.beforeafter {
    --slider-position: 50%;
    transition:all 0.3s ease;
}


.beforeafter:hover{
    transform:scale(1.05);
}

.beforeafter::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--slider-position);
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, #ffffff, #f0f0f0);
    box-shadow: 5px 0 5px rgba(0, 0, 0, 0.8);
    z-index: 10;
    transform: translateX(-50%);
    transition: box-shadow 0.3s ease;
}

.beforeafter:hover::before {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}

/* Круглая ручка ползунка */
.beforeafter::after {
    content: '';
    position: absolute;
    top: 50%;
    left: var(--slider-position);
    width: 24px;
    height: 24px;
    background: linear-gradient(45deg, #ffffff, #e0e0e0);
    border: 2px solid #333;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    transition: all;
}

.beforeafter:hover::after {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.5);
}

/* Подписи */
.beforeafter .before::before {
    content: 'ДО';
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    z-index: 5;
}

.beforeafter .after::before {
    content: 'ПОСЛЕ';
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    z-index: 5;
}

/* ========================================
   АДАПТИВНЫЕ СТИЛИ
   ======================================== */

/* Планшеты (768px - 1024px) */
@media (max-width: 1024px) {
    header .container {
        padding: 0 ;
    }
    
    header .container .logo {
        font-size: 1.3rem;
    }
    
    header .container .ctahead {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .maintitle {
        font-size: 80px;
        letter-spacing: -12px;
        line-height: 60px;
    }
    
    .grid6 {
        grid-template-columns: repeat(3, 1fr);
        padding: 0 2rem;
        gap: 1.5rem;
    }
    
    .storytelling {
        max-width: 800px;
        gap: 6rem;
        margin: 2rem auto;
        padding: 0 2rem;
    }
    
    .storyimage {
        width: 300px;
    }
    
    .playerhead {
        margin: 0 2rem;
        margin-top: 3rem;
    }
    
    .camera {
        height: 400px;
        width: 400px;
        top: -60px;
        left: 120px;
    }
    
    .laptop {
        height: 800px;
        width: 800px;
        top: -520px;
    }
    
    .green {
        height: 250px;
        width: 250px;
        top: 40px;
        right: -80px;
    }
    
    .graph {
        height: 250px;
        width: 250px;
        bottom: 120px;
        left: 300px;
    }
}

/* Смартфоны в ландшафте (576px - 768px) */
@media (max-width: 768px) {
    header {
        padding: 0.8rem 1rem;
    }
    
    header .container .logo {
        font-size: 1.2rem;
    }
    
    header .container .ctahead {
        padding: 0.7rem 1.2rem;
        font-size: 0.85rem;
    }
    
    section.firstscreen {
        height: calc(100vh - 6rem);
        margin: 0.5rem;
        border-radius: 0.8rem;
        overflow: hidden;
    }
    
    .maintitle {
        font-size: 60px;
        letter-spacing: -8px;
        line-height: 45px;
        position: relative;
        z-index: 5;
    }
    
    .description {
        font-size: 18px;
        margin-top: 1rem;
        padding: 0 1rem;
        text-align: center;
        position: relative;
        z-index: 5;
    }
    
    .titilehead {
        font-size: 1.8rem;
        padding: 0 1rem;
    }
    
    .descriptionhead {
        font-size: 15px;
        max-width: 90%;
        padding: 0 1rem;
    }
    
    .grid6 {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 1rem;
        gap: 1rem;
    }
    
    .storytelling {
        gap: 4rem;
        padding: 0 1rem;
    }
    
    .firststory, .secondstory, .thirdstory {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }
    
    .storyimage {
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
    }
    
    .storyline {
        order: 2;
    }
    
    .storytitle {
        font-size: 1.5rem;
        max-width: 100%;
        text-align: center;
        margin-bottom: 1rem;
    }
    
    .storydescription {
        max-width: 100%;
        text-align: center;
        font-size: 15px;
    }
    
    .playerhead {
        max-width: 100%;
        margin: 0 1rem;
        margin-top: 2rem;
    }
    
    .ctatitle {
        font-size: 1.5rem;
        max-width: 90%;
        padding: 0 1rem;
    }
    
    .ctaprice {
        font-size: 1.8rem;
    }
    
    .ctapricedescription {
        font-size: 13px;
        max-width: 90%;
        padding: 0 1rem;
    }
    
    .benefits {
        grid-template-columns: 1fr;
        max-width: 90%;
        gap: 0.8rem;
        padding: 0 1rem;
    }
    
    .beforeafter {
        max-width: 90%;
        margin: 2rem auto;
    }
    
    /* Адаптация декоративных элементов для планшетов */
    .camera {
        height: 250px;
        width: 250px;
        top: 20px;
        left: 20px;
        z-index: 2;
    }
    
    .laptop {
        height: 400px;
        width: 400px;
        top: -200px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
    }
    
    .microphone {
        height: 80px;
        width: 80px;
        bottom: 80px;
        right: 30px;
        z-index: 3;
    }
    
    .green {
        height: 150px;
        width: 150px;
        top: 30px;
        right: 20px;
        z-index: 2;
    }
    
    .face {
        height: 100px;
        width: 100px;
        bottom: 200px;
        left: 30px;
        z-index: 3;
    }
    
    .graph {
        height: 120px;
        width: 120px;
        bottom: 150px;
        right: 80px;
        z-index: 2;
        transform: rotate(15deg);
    }
    
    .skyitems .skyitem1,
    .skyitems .skyitem2,
    .skyitems .skyitem3 {
        width: 200px;
        height: 200px;
    }
}

/* Смартфоны в портрете (до 576px) */
@media (max-width: 576px) {
    header {
        padding: 0.6rem 1rem;
    }
    
    .description span{margin:0!important;}
    
    header .container .logo {
        font-size: 1.1rem;
    }
    
    header .container .ctahead {
        padding: 0.6rem 1rem;
        font-size: 0.8rem;
    }
    
    section.firstscreen {
        height: calc(100vh - 5rem);
        margin: 0.3rem;
        border-radius: 0.6rem;
    }
    
    .maintitle {
        font-size: 45px;
        letter-spacing: -6px;
        line-height: 35px;
    }
    
    .description {
        font-size: 16px;
        padding: 0 0.5rem;
    }
    
    .titilehead {
        font-size: 1.5rem;
        padding: 0 0.5rem;
    }
    
    .descriptionhead {
        font-size: 14px;
        max-width: 95%;
        padding: 0 0.5rem;
    }
    
    .grid6 {
        grid-template-columns: 1fr;
        padding: 0 0.5rem;
        gap: 1rem;
    }
    
    .storytelling {
        gap: 3rem;
        padding: 0 0.5rem;
    }
    
    .storyline {
        padding: 0 0.5rem;
    }
    
    .storytitle {
        font-size: 1.3rem;
        margin-bottom: 1rem;
    }
    
    .storydescription {
        font-size: 14px;
    }
    
    .playerhead {
        margin: 0 0.5rem;
        margin-top: 2rem;
    }
    
    .ctatitle {
        font-size: 1.3rem;
        max-width: 95%;
        padding: 0 0.5rem;
    }
    
    .ctaprice {
        font-size: 1.6rem;
    }
    
    .ctapricedescription {
        font-size: 12px;
        max-width: 95%;
        padding: 0 0.5rem;
    }
    
    .benefits {
        max-width: 95%;
        gap: 0.6rem;
        padding: 0 0.5rem;
    }
    
    .benefits li {
        padding: 0.8rem;
        font-size: 13px;
    }
    
    .cta {
        margin: 0 0.5rem;
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .beforeafter {
        max-width: 95%;
        margin: 1.5rem auto;
    }
    
    /* Красивая композиция декоративных элементов для смартфонов */
    .camera {
        height: 180px;
        width: 180px;
        top: 50px;
        left: -30px;
        z-index: 2;
        opacity: 0.8;
    }
    
    .laptop {
        height: 300px;
        width: 300px;
        top: -150px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        opacity: 0.6;
    }
    
    .microphone {
        height: 70px;
        width: 70px;
        bottom: 100px;
        right: 20px;
        z-index: 3;
    }
    
    .green {
        height: 120px;
        width: 120px;
        top: 60px;
        right: -20px;
        z-index: 2;
        opacity: 0.9;
    }
    
    .face {
        height: 80px;
        width: 80px;
        bottom: 250px;
        left: 20px;
        z-index: 3;
    }
    
    .graph {
        height: 100px;
        width: 100px;
        bottom: 180px;
        right: 30px;
        z-index: 2;
        transform: rotate(20deg);
        opacity: 0.8;
    }
    
    .skyitems .skyitem1,
    .skyitems .skyitem2,
    .skyitems .skyitem3 {
        width: 150px;
        height: 150px;
    }
    
    .folder.big {
        width: 150px;
        height: 150px;
        bottom: -60px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .folderinside {
        width: 150px;
        height: 150px;
        margin: 2rem auto;
    }
}

/* Дополнительные стили для очень маленьких экранов */
@media (max-width: 375px) {
    .maintitle {
        font-size: 38px;
        letter-spacing: -4px;
        line-height: 30px;
    }
    
    .titilehead {
        font-size: 1.3rem;
    }
    
    .storytitle {
        font-size: 1.2rem;
    }
    
    .ctatitle {
        font-size: 1.2rem;
    }
    
    /* Минималистичная композиция для очень маленьких экранов */
    .camera {
        height: 140px;
        width: 140px;
        top: 40px;
        left: -20px;
        z-index: 2;
        opacity: 0.7;
    }
    
    .laptop {
        height: 250px;
        width: 250px;
        top: -120px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
        opacity: 0.5;
    }
    
    .microphone {
        height: 50px;
        width: 50px;
        bottom: 80px;
        right: 15px;
        z-index: 3;
        opacity: 0.9;
    }
    
    .green {
        height: 90px;
        width: 90px;
        top: 50px;
        right: -15px;
        z-index: 2;
        opacity: 0.8;
    }
    
    /* Скрываем лишние элементы для чистоты композиции */
    .face, .graph {
        display: none;
    }
}

/* Дополнительные улучшения для мобильной композиции */
@media (max-width: 768px) {
    /* Обеспечиваем красивое позиционирование overlay элементов */
    .overlayitems {
        pointer-events: none;
    }
    
    .overlayitems .drgbl {
        pointer-events: auto;
    }
    
    /* Центрируем заголовок и делаем его более читаемым */
    .maintitle, .description {
        text-shadow: 0px 4px 12px rgba(0, 0, 0, 0.8);
    }
    
    /* Оптимизируем видимость декоративных элементов */
    .camera, .green, .microphone {
        filter: brightness(0.9) contrast(1.1);
    }
    
    .laptop {
        filter: brightness(0.7) contrast(0.8);
    }
}

@media (max-width: 576px) {
    /* Улучшаем композицию для портретной ориентации */
    .overlayitems {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
    }
    
    .maintitle {
        margin-top: 2rem;
        text-shadow: 0px 5px 15px rgba(0, 0, 0, 0.9);
    }
    
    .description {
        margin-top: 1.5rem;
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(5px);
        border-radius: 10px;
        padding: 0.8rem 1rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
}

/* Исправления для touch устройств */
@media (hover: none) and (pointer: coarse) {
    .griditem:hover {
        border: 2px solid transparent;
    }
    
    .griditem:hover .image::before {
        opacity: 1;
        background: radial-gradient(ellipse at left top, rgba(0, 0, 0, 0.601), rgba(0, 0, 0, 0.95));
    }
    
    .benefits li:hover {
        background: rgba(128, 128, 128, 0.107);
    }
    
    .cta:hover, .container .ctahead:hover {
        opacity: 1;
        transform: none;
    }
}

/* Уважение к предпочтениям пользователей по анимациям */


/* Добавляем стили для интерактивности загрузки */
.page-loaded .camera,
.page-loaded .microphone,
.page-loaded .laptop,
.page-loaded .green,
.page-loaded .face,
.page-loaded .graph {
    animation-play-state: running;
}

/* Дополнительная фиксация центрирования папки для всех размеров */
.folder.big {
    position: absolute;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Анимация появления для других элементов */
.secondscreen {
    animation: fadeIn 1s ease-out .7s both;
}

.playerhead {
    animation: fadeIn 1.2s ease-out .8s both;
}

.cta {
    animation: fadeIn 1s ease-out 4s both;
}

/* Дополнительные анимации для красоты */
@keyframes slideInUp {
    0% {
        transform: translateY(30px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.titilehead {
    animation: slideInUp 1s ease-out .3s both;
}

.descriptionhead {
    animation: slideInUp 1s ease-out .5s both;
}

.benefits li {
    animation: slideInUp 0.8s ease-out both;
}

.benefits li:nth-child(1) { animation-delay: .5s; }
.benefits li:nth-child(2) { animation-delay: .6s; }
.benefits li:nth-child(3) { animation-delay: .7s; }
.benefits li:nth-child(4) { animation-delay: .8s; }
.benefits li:nth-child(5) { animation-delay: .9s; }
.benefits li:nth-child(6) { animation-delay: 1s; }

/* ========================================
   4K И УЛЬТРАШИРОКИЕ ЭКРАНЫ
   ======================================== */


    .qa{display: grid;    grid-template-columns: 4fr 8fr;    max-width: 1200px;    margin: 0 auto;}
    .qaspoilers{max-width:750px;margin:0 auto;}
    .qaspoilers{display: grid;    gap: 1rem;    color: white;    }
    .qaspoilers details{padding: 1rem;    background: #80808017;    border-radius: 8px; transition: max-height 1s;}
    .qaspoilers details summary{    list-style: none;    cursor: pointer;    font-size: 18px;}
    .qaspoilers details p{    margin: 1rem 0 0;    color: gray;}
    details::details-content {      opacity: 0;      transition: opacity 600ms ease-in-out;    }
    details[open]::details-content {      opacity: 1;    }
    details[open] {max-height: 500px; }
    
    @media(min-width:1240px){}
     @media(max-width:1240px){.qa{display: grid;    grid-template-columns: 1fr;    max-width: 1200px;    margin: 0 auto;padding:0 1rem;}
     .qals .titilehead,.ctapricedescription{text-align:center!important;}
     .qals .ctapricedescription{margin-bottom:3rem;}}
     
     footer{
    background: radial-gradient(ellipse at top, #0c2725 0%, rgb(13 43 33) 70%);
    overflow: hidden;
    width: webkit-fill-available;
    height: 5rem;
    margin: 1rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 5 10px rgba(0, 0, 0, 0.5);
     }
     footer::after{
         content: "";
    background-image: url(/templates/main/imgs/grid.png);
    inset: 0px;
    background-repeat: repeat;
    border: 0px;
    background-size: 54px auto;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    opacity: .05;
    pointer-events: none;
     }
     
     .fbwtitle::before{
content: '';
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #d74141b5;
    position: absolute;
    left: 0;
    top: 0;
    margin: 10px;
    border: 2px solid #792d2d;
}
.fbwtitle::after{
content: '';
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #18cb18b5;
    position: absolute;
    left: 0;
    top: 0;
    margin: 10px 35px;
    border: 2px solid green;
}
.fbitem{
display: flex
;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden;
    /* width: fit-content; */
    max-width: 340px;
    width: 100%;
    /* min-width: 100%; */
    align-self: center;
    /* justify-self: center; */
    margin: 3rem auto;
    outline: 3px solid #80808042;
    box-shadow: 0px 10px 20px -10px #000000a6;
    }
    .fbitem img{width: -webkit-fill-available;}
    .fbwbody{
        max-height:500px;
        overflow:hidden scroll;}
    .feedbackwindow{
            outline: 0px solid transparent;
    outline-offset: 0px;
    transition:.3s ease;
    overflow:hidden; 
    margin-bottom:3rem!important;
    }
    
    .feedbackwindow:hover{
        outline: 3px solid #0000001a;
    outline-offset: 3px;
    }
        .fbwbody{  scrollbar-width: none;
        transition:.3s ease;
        }
        .fbwbody:hover{  scrollbar-width: thin;}
        
        section{margin-bottom:10rem!important;}
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        form {  
	padding-top: 0px;
	padding-bottom: 0px;	
	padding-right: 0px; 
	padding-left: 0px; 
	margin: 0px;
}
#loading-layer {
	display:none;
	font-family: Verdana;font-size: 11px;
	background:#000;padding:10px;
	text-align:center;
	border:1px solid #000;
	color: #FFF;
}

.findrelated {
	width:99%;
	background: #ffc;border:1px solid #9E9E9E;
	padding: 5px;margin-top: 7px;
	margin-right: 10px;
}

.title_quote {
	color: #636363;
	background-color: #f2f2f2;
	border: 1px dotted #bebebe; 
	border-bottom: 0;
	font-weight: bold;
	padding: 5px;
}
.quote {
	color: #757575;
	background-color: #f2f2f2;
	border: 1px dotted #bebebe;
	text-align: justify;
	padding: 5px;
}

.title_spoiler {
	color: #636363;
	background-color: #f2f2f2;
	border: 1px dotted #bebebe; 
	font-weight: bold;
	padding: 5px;
}
.text_spoiler {
	color: #757575;
	background-color: #f2f2f2;
	border: 1px dotted #bebebe;
	border-top: 0;
	text-align: justify;
	padding: 5px;
}

pre code { display: block; padding: 0.5em; background: #f9fafa; border: 1px solid #dce7e7; overflow:auto; white-space: pre; }

.hljs-comment, .hljs-quote {
  color: #a0a1a7;
  font-style: italic;
}

.hljs-doctag, .hljs-keyword, .hljs-formula {
  color: #a626a4;
}

.hljs-section, .hljs-name, .hljs-selector-tag, .hljs-deletion, .hljs-subst {
  color: #e45649;
}

.hljs-literal {
  color: #0184bb;
}

.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute, .hljs-meta-string {
  color: #50a14f;
}

.hljs-built_in, .hljs-class .hljs-title {
  color: #c18401;
}

.hljs-attr, .hljs-variable, .hljs-template-variable, .hljs-type, .hljs-selector-class, .hljs-selector-attr,
.hljs-selector-pseudo, .hljs-number {
  color: #986801;
}

.hljs-symbol, .hljs-bullet, .hljs-link, .hljs-meta, .hljs-selector-id, .hljs-title {
  color: #4078f2;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-link {
  text-decoration: underline;
}
 
.editor_button {
	float: left;
	cursor: pointer;
	padding-left: 2px;
	padding-right: 2px;
}
.editor_buttoncl {
	float: left;
	cursor: pointer;
	padding-left: 1px;
	padding-right: 1px;
	border-left: 1px solid #bbbbbb;
	border-right: 1px solid #bbbbbb;
}
.editbclose {
	float: right;
	cursor: pointer;
}
.editor_button select {
	font-family: tahoma;
	font-size: 11px;
}
.editor_button img {margin: 0; padding: 0;}
.editbclose img {margin: 0; padding: 0;}
.editor_button_brk img {margin: 0; padding: 0;}

.xfields textarea {
	color: #757575;		/* ! */
	font-size: 11px;		/* ! */
	font-family: tahoma;	/* ! */
	background-repeat: repeat-x;
	width: 100%;
	height: 86px;
	border: 1px solid #e0e0e0;
}
.xfields input {
	color: #757575;		/* ! */
	font-size: 11px;		/* ! */
	font-family: tahoma;	/* ! */

	width: 250px;
	height: 14px;
	border: 1px solid #e0e0e0;
}
.xfields select {
	color: #757575;		/* ! */
	font-size: 11px;		/* ! */
	font-family: tahoma;	/* ! */
	border: 1px solid #e0e0e0;
}

.xprofile textarea {
	color: #757575;		/* ! */
	font-size: 11px;		/* ! */
	font-family: tahoma;	/* ! */
	width: 316px;
	height: 86px;
	border: 1px solid #e0e0e0;
}
.xprofile input {
	color: #757575;		/* ! */
	font-size: 11px;		/* ! */
	font-family: tahoma;	/* ! */
	width: 250px;
	height: 14px;
	border: 1px solid #e0e0e0;
}

#dropmenudiv {
	border: 1px solid #ffffff;
	border-bottom-width: 0;
	font: normal 10px Verdana;
	background-color: #6497ca;
	line-height: 20px;
	margin: 2px;
	opacity: 0.95;
}

#dropmenudiv a {
	display: block;
	text-indent: 3px;
	text-decoration:none;
	color: #ffffff;
	background:#6497ca;
	border: 1px solid #ffffff;
	padding: 1px 0;
	margin: 1px;
	font-weight: bold;
}

#dropmenudiv a:hover {
	background:#fdd08b;
	color:#000000;
}

.vote {
	color: #757575;
}

#newpm {
	position: absolute;
	width: 400px;
	padding: 4px;
	background-color: #fdfdfd;
	border: 1px solid #bbbbbb;
	font-family: verdana;
	line-height: 135%;
}
#newpmheader {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 2px;
	height: 20px;
	color: #636363;
	font-weight: bold;
	background-color: #b2c7f1;
	font-family: verdana;
	cursor: move;
}
#newpm a {
	background: transparent;
	color: #4b73d4;
	text-decoration: none;
}
#newpm a:hover {
	background: transparent;
	color: #4b73d4;
	text-decoration: underline;
}

.attachment {
	color: #808080;
}

.search {
	color: #757575;
	text-decoration: none;
}
.textin { text-decoration: none; }
.sresult  {
	text-align: justify;
	font-weight: normal;
	line-height: 16px;
	font-size: 12px;
	color: #757575;
}


	fieldset {
		border: 1px solid #e0e0e0;
		padding: 5px;
		text-align: left;
		font-size: 11px;		/* ! */
		font-family: tahoma;	/* ! */
	}

.highslide-wrapper, .highslide-outline { background: #fff }
	.highslide-image { border: 2px solid #fff }
	.highslide-active-anchor { visibility: hidden } 
	.highslide-active-anchor img { visibility: hidden }
	.highslide-dimming { background-color: black }
	.highslide-html { background-color: white }
	.highslide-loading { display: block; color: white; font-size: 9px; font-weight: bold; text-decoration: none; padding: 3px; border: 1px solid white; background-color: black }
	a.highslide-full-expand { background: url(../dleimages/fullexpand.gif) no-repeat; display: block; margin: 0 10px 10px 0; width: 34px; height: 34px }
	.highslide-display-block { display: block }
	.highslide-display-none { display: none }
	.highslide-caption { display: none; padding: 5px; background: white }
	.highslide-controls { width: 195px; height: 40px; background: url(../../../engine/classes/highslide/graphics/controlbar-black-border.gif) no-repeat 0 -90px; margin-right: 15px; margin-bottom: 10px; margin-top: 10px }
	.highslide-controls ul { position: relative; left: 15px; height: 40px; list-style: none; margin: 0; padding: 0; background: url(../../../engine/classes/highslide/graphics/controlbar-black-border.gif) no-repeat 100% -90px }
	.highslide-controls li { float: left; padding: 5px 0; }
	.highslide-controls a { background: url(../../../engine/classes/highslide/graphics/controlbar-black-border.gif); display: block; float: left; height: 30px; width: 30px; outline: none }
	.highslide-controls a.disabled { cursor: default }
	.highslide-controls a span { display: none }
 
.highslide-controls .highslide-previous a { background-position: 0 0 }
	.highslide-controls .highslide-previous a:hover { background-position: 0 -30px }
	.highslide-controls .highslide-previous a.disabled { background-position: 0 -60px !important }
	.highslide-controls .highslide-play a { background-position: -30px 0 }
	.highslide-controls .highslide-play a:hover { background-position: -30px -30px }
	.highslide-controls .highslide-play a.disabled { background-position: -30px -60px !important }
	.highslide-controls .highslide-pause a { background-position: -60px 0 }
	.highslide-controls .highslide-pause a:hover { background-position: -60px -30px }
	.highslide-controls .highslide-next a { background-position: -90px 0 }
	.highslide-controls .highslide-next a:hover { background-position: -90px -30px }
	.highslide-controls .highslide-next a.disabled { background-position: -90px -60px !important }
	.highslide-controls .highslide-move a { background-position: -120px 0 }
	.highslide-controls .highslide-move a:hover { background-position: -120px -30px }
	.highslide-controls .highslide-full-expand a { background-position: -150px 0 }
	.highslide-controls .highslide-full-expand a:hover { background-position: -150px -30px }
	.highslide-controls .highslide-full-expand a.disabled { background-position: -150px -60px !important }
	.highslide-controls .highslide-close a { background-position: -180px 0 }
	.highslide-controls .highslide-close a:hover { background-position: -180px -30px }

.comments-tree-list {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

.comments-tree-list .comments-tree-list {
	padding-left: 10px;
}

.comments-tree-item {
	display: block;
	margin: 0;
	padding: 0;
}

#dlefastreplycomments {
	padding:5px;
	background: #e4ecf0;
  margin: 5px 5px 5px 10px;
}

.commentsreplyname {
	padding: 2px; border: 1px solid #bcc0c2;
	width: 200px;
}


.clouds_xsmall {
	font-size: x-small;
}
.clouds_small {
	font-size: small;
}
.clouds_medium {
	font-size: medium;
}
.clouds_large {
	font-size: large;
}
.clouds_xlarge {
	font-size: x-large;
}

.ui-widget-overlay { background: #bfbfbf; opacity:0.7; -moz-opacity:0.7; filter:alpha(opacity=70); left: 0; top: 0; right: 0; bottom: 0; position: fixed; }
.ui-helper-clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden }
.ui-helper-clearfix { display: inline-block }
* html .ui-helper-clearfix { height: 1% }
.ui-helper-clearfix { display: block }

.ui-dialog { display: none; background-color: #fff; overflow: hidden; padding: 0; position: absolute; width: 300px; 
  box-shadow: 0 0 40px 0 rgba(0,0,0,0.16); -moz-box-shadow: 0 0 40px 0 rgba(0,0,0,0.16); -webkit-box-shadow: 0 0 40px 0 rgba(0,0,0,0.16);
}
.ui-dialog-titlebar { padding: 17px 25px 18px 25px; border-bottom: 1px solid #e6e6e6 }
.ui-dialog-title { margin-top: 2px; float: left; font-size: 20px; font-weight: bold }
.ui-dialog-titlebar-close .ui-icon { position: absolute; right: 18px; top: 20px; height: 31px; width: 31px; background-position: -37px -45px; }

.ui-dialog .ui-dialog-content { border-top-left-radius: 0; border-top-right-radius: 0; padding: 25px; border: 0; overflow: auto; position: relative; zoom: 1; }
.ui-dialog-content h2 { display: inline; font-size: 1em; font-weight: bold }
.ui-dialog .ui-dialog-buttonpane { border-top: 1px solid #e6e6e6; padding: 15px 20px; text-align: right; }

.ui-dialog .ui-resizable-se { bottom: 3px; height: 14px; right: 3px; width: 14px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }

.ui-state-error { background: #fef1ec 50% 50% repeat-x !important; border: 1px solid #cd0a0a; color: #cd0a0a; }
.ui-button.ui-button-icon-only.ui-dialog-titlebar-close {padding: 0;text-indent: -9999px;}
.ui-front {
    z-index: 999999;
}

.bb-editor textarea { 
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
    padding: 2px; border: 1px solid #bcc0c2; width: 100%; background: #fff;
}
.editorcomm .bb-editor { width: 465px; }
.editorcomm .bb-editor textarea { height: 156px; }

#marker-bar, #txtselect_marker, #share-popup { display: none; }

.image-bordered {
	border: 1px solid #ddd;
}

.image-shadows {
	box-shadow: rgb(9 30 66 / 25%) 0px 4px 8px -2px, rgb(9 30 66 / 8%) 0px 0px 0px 1px;
}

.image-padded {
	padding: 0.5rem;
}

.comments-user-profile {
  font-weight: bold;
  cursor: pointer;
  color: #3394e6;
}

.DLEPush {
	z-index: 999999999999;
	position: fixed;
	right: 20px;
	top: 20px
}

@keyframes DLEPush-show {
	0% {
		transform: translateY(100%);
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.DLEPush-notification.wrapper {
	animation-name: DLEPush-show;
	animation-duration: 1s;
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	color: #333;
	margin-bottom: 10px;
	width: 100%;
	max-width: 400px;
	box-shadow: 0 10px 15px rgb(0 0 0 / 20%);
	background-color: #fff;
	border-radius: 10px
}

.DLEPush-notification .DLEPush-icon {
	grid-column: 1;
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	width: 45px;
	height: 100%;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	text-align: center;
}

.DLEPush-notification .DLEPush-icon svg {
	scale: .8;
}

.DLEPush-notification .DLEPush-header {
	font-weight: 500;
	grid-column: 2;
	grid-row: 1;
	font-size: 1rem;
	margin-left: 1rem;
	margin-top: .5rem;
}
.DLEPush-notification .DLEPush-header:empty {
	margin-top: 0;
}

.DLEPush-notification .DLEPush-message {
	grid-column: 2;
	grid-row: 2;
	font-size: .875rem;
	margin: 1rem;
}

.DLEPush-notification .DLEPush-message li, .DLEPush-notification .DLEPush-message ul {
	list-style-type: none;
	padding-left: 0;
}

.DLEPush-notification .DLEPush-close {
	position: absolute;
	top: 8px;
	right: 10px;
	font-weight: 300;
	background: none;
	border: 0;
	font-size: 1.15rem;
	cursor: pointer;
	line-height: 1;
	padding: 0;
	color: inherit;
	outline: 0;
	opacity: 0.75;
}
.pm td.pm_list, .pm th.pm_head { border-bottom: 1px solid #efefef; padding: 12px 8px; }
	table.pm, table.userstop { width: 100%; margin-bottom: 0; }
	table.pm select { width: 190px; }
	.userstop thead td, .pm td.pm_head { border-bottom: 1px solid #efefef; font-weight: bold; }
	table.pm .navigation { border-top-width: 0; margin: 0; }

.pm th{
    text-align: left;
    font-weight: 500;
    white-space: nowrap;
}
.pm th.pm_checkbox {
	text-align: center;
}
.pm_list.pm_subj, .pm_list.pm_icon, .pm_last_user {
 cursor: pointer;
}
.pm_list.pm_icon svg {
	width: 1.4rem;
	height: 1.4rem;
	vertical-align: middle;
}

.pm_list.pm_icon.pm-unread-image {
 color: #3394e6;
}
.pm td.pm_list.pm_icon, .userstop td, th.pm_head.pm_icon {
	border-bottom: none;
}
.pm_list.pm_icon.pm-reply-image {
	color: #087e02c4;
}
.pm_list.pm_icon.pm-read-image {
	color: #afafaf;
}

.pm_list .pm_last_message, .pm_list .pm_last_date, .pm_list .pm_with_user {
	color: #64748b;
	font-size: .8rem;
}
.pm tbody > tr:hover {
    background-color: #e2e8f099;
}
.pm_navigation .navigation {
	display: inline-block;
	color: #333333;
	background-color: #f5f5f5;
	border-radius: 0.188rem;
	padding: .4rem;
}

.pm_navigation .navigation a, .pm_navigation .navigation span {
    padding: 0.5rem;
    min-width: 2.25rem;
}
.pm_navigation .navigation span {
    background-color: #4581d0;
    color: #fff;
}
.pm_navigation .navigation a {
    text-decoration: none;
    color: #000;
}
.pm_navigation .navigation a:hover {
    background-color: #e2e8f0;
}

@media only screen and (min-width: 601px) {
	.DLEPush-notification.wrapper {
		min-width: 400px;
	}
}

.DLEPush-notification .DLEPush-close:hover {
	opacity: 1;
}

.DLEPush-notification.wrapper.push-success {
	background-color: #e0f2f1;
}

.DLEPush-notification.wrapper.push-success .DLEPush-icon {
	background-color: #00897b;
}

.DLEPush-notification.wrapper.push-warning {
	background-color: #FFF3E0;
}

.DLEPush-notification.wrapper.push-warning .DLEPush-icon {
	background-color: #FF9800;
}

.DLEPush-notification.wrapper.push-error {
	background-color: #FBE9E7;
}

.DLEPush-notification.wrapper.push-error .DLEPush-icon {
	background-color: #FF5722;
}

.quote_link svg {
	color: #6c838e;
	vertical-align: middle;
}

.quote_block{
    background: #ffbe00;
    /* border-radius: 6px; */
    /* padding: 1rem; */
    margin: 1rem 0;
    box-shadow: 0px 5px 10px #00000078;
    border-left: 2px solid #ffffff;
    }
    
    .title_quote{padding: 10px;
    color: black !important;
    border-bottom: 1px solid #00000026;}
    
    .quote{background: #0000002b;
    padding: 10px;}
    
    .grouptools {
    display: inline-flex;
    align-items: center;
    background: #2b2b2b;
    border-radius: 50px;
    padding: 4px;
    gap: 4px;
    position: relative;
    /* На десктопе НЕ ограничиваем контент, чтобы тултипы вылезали */
    max-width: 100%;
}

@media (max-width:540px) {
     .grouptools.mobhide{display:none!important;}
}

/* === Мобильная адаптация (скролл включается ТОЛЬКО здесь) === */
@media (max-width: 480px) {
    .grouptools {
        width: 110px; 
        border-radius: 25px;
        
        /* Включаем свайп только на мобилках */
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    
    .grouptools::-webkit-scrollbar {
        display: none;
    }
}

/* Скрываем полосу прокрутки в Chrome/Safari */
.grouptools::-webkit-scrollbar {
    display: none;
}

/* === Кнопка (Ссылка) === */
.tool-btn {
    width: 36px;
    height: 36px;
    display: flex;
    flex-shrink: 0; /* Важно: чтобы кнопки не сжимались */
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #9d9d9d;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
}

.tool-btn.active {
    background: #444;
    color: #fff;
    cursor: default;
}

.tool-btn:hover {
    background: #444;
    color: #fff;
}

/* === Подсказка (Tooltip) === */
/* На мобилках тултипы лучше отключать, так как нет ховера */
@media (min-width: 768px) {
    .tool-btn::after {
        content: attr(data-tooltip);
        position: absolute;
        top: 115%;
        left: 50%;
        transform: translateX(-50%) translateY(5px);
        background: rgba(0, 0, 0, 0.9);
        color: #fff;
        padding: 6px 10px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: 500;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s ease;
        z-index: 100;
    }

    .tool-btn::before {
        content: '';
        position: absolute;
        top: 115%;
        left: 50%;
        margin-left: -4px;
        margin-top: 0px;
        border-width: 4px;
        border-style: solid;
        border-color: transparent transparent rgba(0, 0, 0, 0.9) transparent;
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s ease;
        z-index: 100;
    }

    .tool-btn:hover::after,
    .tool-btn:hover::before {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }
}

/* === Разделитель === */
.sep {
    width: 1px;
    height: 16px;
    background: #3d3d3d;
    flex-shrink: 0; /* Не даем разделителю исчезнуть */
}

/* === Мобильная адаптация (2.5 иконки) === */
@media (max-width: 480px) {
    .grouptools {
        /* Расчет: 
           (36px * 2 кнопки) + 
           (18px - половина третьей) + 
           (1px * 2 сепаратора) + 
           (4px * 4 промежутка gap/padding) 
        */
        width: 110px; 
        border-radius: 25px; /* Опционально: обрезаем правое скругление для эффекта потока */
    }
}

.main-footer {
    margin-top: auto; /* Толкает футер вниз */
    width: 100%;
    position: relative;
    background: radial-gradient(ellipse at top, #162c2a 0%, #0d0d0d 100%);
    border-top: 1px solid var(--border-color);
    padding: 60px 0 30px 0;
    z-index: 10;
}

.main-footer::before {
    content: '';
    background-image: url(/templates/main/imgs/footer/face.webp);
    position: absolute;
    width: 150px;
    height: 100px;
    background-size: contain;
    background-repeat: no-repeat;
    top: -41px;
    right: 80px;
    filter: brightness(0.5);
    z-index: 5;
    transition: all .3s;
}
    
.main-footer:hover::before {
    filter: brightness(1);
}

/* Сетка как на первом экране */
.footer-grid-overlay {
    content: "";
    background-image: url(/templates/main/imgs/grid.png);
    inset: 0;
    position: absolute;
    background-size: 54px auto;
    opacity: 0.03;
    pointer-events: none;
    z-index: 1;
}

.footer-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 2;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    gap: 4rem;
    margin-bottom: 60px;
}

.footer-info {
    max-width: 350px;
}

.footer-logo {
    font-family: "Libre Franklin", sans-serif;
    font-weight: 900;
    font-size: 1.8rem;
    letter-spacing: -1px;
    color: #fff;
    margin-bottom: 15px;
}

.footer-status {
    font-size: 14px;
    color: #777;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}

.footer-bio {
    font-size: 14px;
    color: #aaa;
    line-height: 1.6;
}

.white-text { color: #fff; }

/* Колонки ссылок */
.footer-links-group {
    display: flex;
    gap: 4rem;
}

.footer-col h4 {
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    font-weight: 700;
}

.footer-col a {
    display: block;
    color: #777;
    text-decoration: none;
    font-size: 15px;
    margin-bottom: 12px;
    transition: color 0.3s;
}

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

/* Нижняя часть */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #555;
}

.footer-legal {
    display: flex;
    gap: 20px;
}

.footer-legal a {
    color: #555;
    text-decoration: none;
}

.footer-legal a:hover { color: #777; }

/* Адаптив */
@media (max-width: 992px) {
    .footer-top {
        flex-direction: column;
        gap: 3rem;
    }
    .footer-links-group {
        gap: 2rem;
        flex-wrap: wrap;
    }
}

@media (max-width: 576px) {
    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
}

/* =========================================
   ДОБАВЛЕННЫЕ СТИЛИ: ИНТЕРАКТИВ И СОЦСЕТИ
   ========================================= */

/* Анимация статуса */
.status-dot {
    width: 8px;
    height: 8px;
    background: #4caf50;
    border-radius: 50%;
    box-shadow: 0 0 10px #4caf50;
    display: inline-block;
}

.status-dot.online {
    background: #22c55e;
    box-shadow: 0 0 10px #22c55e;
    animation: statusPulse 2s infinite;
}

.status-dot.offline {
    background: #666;
    box-shadow: none;
}

@keyframes statusPulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.live-time {
    font-family: monospace;
    font-size: 11px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    color: #aaa;
    margin-left: 6px;
}

/* Социальные сети */
.footer-socials {
    display: flex;
    gap: 12px;
    margin-top: 15px;
}

.footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #aaa;
    font-size: 16px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.footer-socials a:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.2);
}