/* ===== БАЗА / ТЁМНАЯ ТЕМА ===== */
:root{
    --bg-hero:#0d0d0d;
    --bg-page:#0b0b0b;
    --bg-card:#1F1F1F;
    --txt:#e6e6e6;
    --txt-dim:#b8b8b8;
    --accent:#5865F2;         /* Discord */
    --accent-2:#4752C4;
    --ok:#22c55e;
    --shadow:0 8px 24px rgba(0,0,0,0.45);
    --radius:14px;
}

/* — базовый контейнер — */

/* ===== ГРАДИЕНТНЫЙ ТЕКСТ ===== */
@keyframes gradient-shift{
    0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}
}
.gradient-text{
    background: linear-gradient(60deg, #9a9a9a 0%, #ffffff 50%, #9a9a9a 65%, #ffffff 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700;
    transition: background-position 4s ease;
    animation: gradient-shift 8s ease infinite;
    filter: drop-shadow(0 0 12px rgba(255,255,255,.05));
}
.gradient-subtle{
    background: linear-gradient(90deg, #9a9a9a 0%, var(--txt) 50%, #9a9a9a 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    font-weight: 500;
}

/* ===== HERO ===== */
.site-hero{ position:relative; overflow:hidden; background: transparent; }
.hero--discord{ background:transparent !important; }
.hero--discord .hero-content{
    position:relative; z-index:1;
    padding-block: clamp(56px, 8vw, 120px);
    text-align: left;
}
.hero--discord .hero-lead{ max-width:820px; }

/* убрали синие эффекты в герое */
.hero--discord .hero-decor{ display:none !important; }

/* ===== Discord (namespaced) — минималистичные бейджи ===== */
.dsc-badges-row{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem .6rem;
    margin:.4rem 0 1rem;
    align-items:center;
}
.dsc-badge{
    --bdg-bg: rgba(255,255,255,.04);
    --bdg-border: rgba(255,255,255,.14);
    --bdg-fg: var(--txt, #e6e6e6);
    display:inline-flex; align-items:center; gap:.45rem;
    height:28px; padding:0 .66rem;
    font-size:.82rem; font-weight:600; line-height:1; color:var(--bdg-fg);
    background:var(--bdg-bg); border:1px solid var(--bdg-border); border-radius:999px;
    text-decoration:none; white-space:nowrap; user-select:none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.dsc-badge svg,.dsc-badge i{ width:1.05em; height:1.05em; flex:0 0 auto; opacity:.9; }
.dsc-badge__dot{ width:.42rem; height:.42rem; border-radius:999px; background: currentColor; }
.dsc-badge:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); }
.dsc-badge:active{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); }
.dsc-badge:focus-visible{ outline:2px solid rgba(255,255,255,.24); outline-offset:2px; }
.dsc-badge--sm{ height:24px; font-size:.78rem; padding:0 .52rem; }
.dsc-badge--lg{ height:32px; font-size:.9rem;  padding:0 .78rem; }
.dsc-badge--ghost{ --bdg-bg: transparent; --bdg-border: rgba(255,255,255,.12); }
.dsc-badge--muted{ --bdg-fg: var(--txt-dim, #b8b8b8); }
.dsc-badge--accent{ --bdg-bg: rgba(88,101,242,.08); --bdg-border: rgba(88,101,242,.22); --bdg-fg: #e9ecff; }
.dsc-badge--clickable{ cursor:pointer; }
@media (max-width:520px){
    .dsc-badge{ height:26px; font-size:.8rem; padding:0 .58rem; }
}

/* ===== КНОПКИ ===== */
.btn{ display:inline-flex; align-items:center; gap:.55rem; white-space:nowrap; border:none; cursor:pointer; text-decoration:none; user-select:none; }
.btn-cta{ margin-top:.8rem; }
.btn-small{ padding:.55rem 1rem; font-size:.95rem; border-radius: 8px; }
.btn-discord{
    position:relative;
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
    color:#fff; padding:.85rem 1.45rem; font-size:1.06rem; font-weight:800;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(88,101,242,.35);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    will-change: transform;
}
.btn-discord:hover{ transform: translateY(-1px) scale(1.03); box-shadow: 0 14px 38px rgba(88,101,242,.5); filter: brightness(1.03); }
.btn-discord:active{ transform: translateY(0) scale(.98); }
.btn-discord:focus-visible{ outline: 3px solid rgba(88,101,242,.45); outline-offset: 2px; }
.icon-discord{
    margin: 0px 0px -4px 0px;
    font-size: 1.2em;        /* размер глифа */
    line-height: 1;
    color: currentColor;      /* наследует цвет текста кнопки */
    flex: 0 0 auto;
}
/* ===== СТАТЫ ===== */
.hero-stats{ display:flex; gap:.7rem; margin-top:1.2rem; flex-wrap:wrap; }
.hero-stats .stat{
    background: rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    padding:.6rem .1rem; min-width:200px; text-align:center;
    box-shadow: var(--shadow);
}
.hero-stats .num{ font-weight:800; font-size:1.2rem; margin-right:.35rem; }
/* узкий режим по модификатору */
.hero-stats.hero-stats--compact{ gap:.45rem; }
.hero-stats.hero-stats--compact .stat{ min-width:auto; padding:.34rem .52rem; border-radius:9px; }
.hero-stats.hero-stats--compact .num{ font-size:.98rem; }
.hero-stats.hero-stats--compact small{ font-size:.8rem; }

/* ===== РАЗДЕЛЫ ===== */
.section-title{ font-size: clamp(22px, 3vw, 30px); font-weight: 800; margin-bottom: 1rem; }

/* Секции-обёртки без фона (важно для "features container" и т.п.) */
.features,
.how-it-works,
.faq-section,
.cta-final,
.site-hero,
.features.container,
.how-it-works.container,
.faq-section.container{ background: transparent !important; box-shadow: none !important; }

.features{ padding-block: clamp(40px, 6vw, 80px); }
.features-grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }

/* Карточки (нео-рамка) */
.card-neo{
    position:relative;
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow);
    border:1px solid rgba(255,255,255,.06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card-neo::before{
    content:""; position:absolute; inset: -1px; border-radius: inherit; z-index:-1;
    background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06), rgba(255,255,255,.18));
    filter: blur(12px); opacity:.35;
}
.card-neo:hover{
    transform: translateY(-2px) rotateX(.6deg) rotateY(.6deg);
    border-color: rgba(255,255,255,.22);
    box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
.feature{ grid-column: span 6; }
.feature h3{ margin:.2rem 0 .45rem; font-size: 1.12rem; color:#fff; }
.feature p{ margin:0; color: var(--txt-dim); }
.feature-icon{ font-size:1.25rem; }

/* ===== ШАГИ (длинные тексты) ===== */
.how-it-works{ padding-block: clamp(32px, 6vw, 72px); }
.steps{
    display:grid; grid-template-columns: repeat(12, 1fr); gap: 16px;
    list-style:none; margin:10px 0 18px; padding:0;
}
.steps li{
    grid-column: span 6;
    position: relative;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius);
    padding: 18px 18px 18px 66px;
    color: var(--txt);
    box-shadow: var(--shadow);
    overflow-wrap: anywhere;
    transition: transform .18s ease, border-color .18s ease;
}
.steps li:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }
.steps li span{
    position:absolute; left:18px; top:18px; display:grid; place-items:center;
    width:32px; height:32px; border-radius:999px;
    background: rgba(255,255,255,.12); color:#fff; font-weight:800; font-size:.95rem;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.steps .step-title{ font-weight:800; color:#fff; line-height:1.25; margin:0 0 .35rem; }
.steps li p{ margin:.3rem 0 0; color:var(--txt-dim); line-height:1.65; }
.cta-center{ margin-top:12px; text-align:center; }

/* ===== FAQ: две колонки ===== */
/* ===== Discord-only FAQ (scoped) ===== */
/* ВАЖНО: этот блок работает только внутри .dsc-faq,
   чтобы не трогать FAQ на других страницах. */

.dsc-faq { margin: 4rem auto; }
.dsc-faq.faq-two-col { max-width: 1220px; padding: 0 1rem; }

.dsc-faq .dsc-faq__title{
    font-size: 2.1rem;
    font-weight: 800;
    margin-bottom: 1.2rem;
    text-align: left;
    color: var(--txt);
}

/* Сетка */
.dsc-faq .faq-list{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.dsc-faq .faq-item{ grid-column: span 6; }

/* Карточка */
.dsc-faq .faq-item details{
    background: rgba(255,255,255,.03);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    transition: transform .2s ease, border-color .2s ease;
}
.dsc-faq .faq-item details:hover{
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.18);
}

/* Заголовок вопроса */
.dsc-faq .faq-question{
    list-style: none;
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.25rem;
    cursor: pointer;
    background: #1f1f1f;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
}
.dsc-faq summary::-webkit-details-marker{ display: none; }

/* Ответ */
.dsc-faq .faq-answer{
    padding: .85rem 1.25rem;
    color: #bfbfbf;
    line-height: 1.6;
    border-top: 1px solid rgba(255,255,255,0.1);
    animation: dscFaqFade .25s ease forwards;
    opacity: 0;
    transform: translateY(-4px);
}
.dsc-faq details[open] .faq-answer{ opacity: 1; transform: translateY(0); }

/* Иконка-стрелка */
.dsc-faq .icon-chevron{
    width: 1.2em; height: 1.2em;
    color: #bdbdbd;
    transition: transform .3s ease;
}
.dsc-faq details[open] .icon-chevron{ transform: rotate(180deg); }

/* Анимация только для Discord FAQ */
@keyframes dscFaqFade { to { opacity:1; transform: translateY(0); } }

/* Адаптив */
@media (max-width: 780px){
    .dsc-faq .faq-list{ grid-template-columns: repeat(6,1fr); }
    .dsc-faq .faq-item{ grid-column: span 6; }
    .dsc-faq .dsc-faq__title{ font-size: 1.7rem; }
}
@media (max-width: 520px){
    .dsc-faq .dsc-faq__title{ font-size: 1.55rem; }
}

/* ===== Финальный CTA ===== */
.cta-final{ padding: clamp(24px,5vw,52px) 0 64px; background: transparent; }
.cta-card{
    display:flex; flex-direction:column; align-items:center; gap:.7rem; text-align:center;
    padding: 24px 20px;
}
.cta-sub{ color:var(--txt-dim); max-width:720px; margin: 0 0 .3rem; }

/* ===== ГЛОБАЛЬНЫЙ ФОН (дышит по всей странице) ===== */
/* обнуляем возможные наследованные фоны */

.bg-scape{
    position: fixed; top:0; left:0; width:100vw; height:100vh;
    z-index: 0; pointer-events: none;
    /* два слоя: 1) сетка-точки (tile), 2) овальный мягкий градиент */
    background-image:
            radial-gradient(circle at 0 0, rgba(255,255,255,0.06) 1px, transparent 1px),
            radial-gradient(ellipse at center, #1A1A1A 0%, #0F0F0F 60%, #0D0D0D 100%);
    background-repeat: repeat, no-repeat;
    /* явный размер тайла для точек — иначе будет «одна большая текстура» */
    background-size: 28px 28px, cover;
    /* фиксируем оба слоя к вьюпорту, чтобы эффект не «заканчивался» при скролле */
    background-attachment: fixed, fixed;
    /* анимируем только первый слой (точки), второй остаётся в центре */
    animation: bgPulse 38s ease-in-out infinite;
}
@media (min-width: 800px){
    .bg-scape{
        background-image:
                radial-gradient(circle at 0 0, rgba(255,255,255,0.05) 2px, transparent 2px),
                radial-gradient(ellipse at center, #1A1A1A 0%, #0F0F0F 60%, #0D0D0D 100%);
        background-size: 34px 34px, cover;
    }
}
@keyframes bgPulse{
    0%   { background-position: 0 0, center; }
    50%  { background-position: 36px 18px, center; }
    100% { background-position: 0 0, center; }
}
/* гарантируем слойность поверх фона */
header, .site-hero, section, footer{ position: relative; z-index: 1; }

/* ===== Кнопки слайдера (hover-эффект убран) ===== */
.control-btn{
    transition: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}
.control-btn:hover,
.control-btn:active,
.control-btn:focus{
    transform: translateY(-50%) !important;
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.2) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
    outline: none !important;
}
.control-btn:hover .icon-cross,
.control-btn:hover .icon-heart{ color: inherit !important; }

/* ===== Адаптив ===== */
@media (max-width: 1024px){
    .feature, .steps li{ grid-column: span 6; }
}
@media (max-width: 780px){
    .features-grid, .steps, .faq-list{ grid-template-columns: repeat(6,1fr); }
    .feature, .steps li, .faq-item{ grid-column: span 6; }
    .btn-discord{ width:100%; justify-content:center; }
    .faq-title{ font-size:1.7rem; }
}
@media (max-width: 520px){
    .hero--discord .hero-content{ padding-block: 44px; }
    .faq-title{ font-size:1.55rem; }
}

/* утилиты */
.break-after::after{ content:""; display:block; }