/* ===== СБРОС ===================================================== */
*{
 box-sizing:border-box;
 margin:0;
 padding:0;
}
img{
 max-width:100%;
 height:auto;
 display:block;
}

/* ===== ЦВЕТА ===================================================== */
:root{
 --bg:#0f0f0f;
 --surface:#1b1b1b;
 --surface-alt:#151515;
 --border:#333;
 --text:#e4e4e4;
 --muted:#b3b3b3;
 --accent:#ff40ff;
 --star:#ffcf42;
}

/* ===== ОСНОВА ==================================================== */
body{
 font:16px/1.5 "Inter",Arial,sans-serif;
 background:var(--bg);
 color:var(--text);
}

a{
 color:var(--accent);
 text-decoration:none;
 transition:.2s;
}
a:hover{opacity:.85;}

/* ===== КОНТЕЙНЕР СТРАНИЦЫ ======================================== */
.page{
 max-width:1280px;
 margin:0 auto;
 padding:0 16px 48px;
}

/* ===== HEADER ==================================================== */
.topbar{
 display:flex;
 flex-direction:column;
 gap:12px;
 padding:0;
}

.topbar__nav{
 display:flex;
 justify-content:flex-end;
 gap:16px;
 padding:16px 16px 0;
 font-size:14px;
}
.topbar__link{
 color:var(--muted);
 text-transform:uppercase;
 letter-spacing:.08em;
}
.topbar__link:hover{
 color:var(--accent);
}

.topbar__row{
 display:flex;
 align-items:center;
 gap:16px;
 width:100%;
 padding:16px;
 background:var(--surface);
 border:1px solid var(--border);
 border-radius:12px;
}

.logo{
 width:52px;
 flex-shrink:0;
}

.security-note{
 flex:1;
 margin:0;
 text-align:center;
 font-size:1.5rem;
 line-height:1.3;
}

.alert{
 background:var(--surface-alt);
 border:1px solid var(--border);
 padding:12px 16px;
 font-size:14px;
 position:relative;
 width:100%;
 border-radius:12px;
 box-sizing:border-box;
}
.alert .new-links{color:var(--accent);}
.alert-close{
 position:absolute;
 right:12px;
 top:12px;
 background:none;
 border:none;
 color:#888;
 cursor:pointer;
 font-size:16px;
 line-height:1;
}
.new-links a{
 color:inherit;
 text-decoration:underline;
}
.new-links a:hover{text-decoration:none;}

/* ---- MIRROR BAR ------------------------------------------------- */
.mirror-bar{
 margin-top:12px; 
 background:var(--surface);
 border:1px solid var(--border);
 padding:12px 16px;
 display:flex;
 align-items:center;
 gap:12px;
 font-size:14px;
 border-radius:12px;
}
.mirror-visible{
 flex:1 1 auto;
 overflow:hidden;
 white-space:nowrap;
 text-overflow:ellipsis;
}
.copy-btn{
 background:transparent;
 border:1px solid var(--accent);
 color:var(--accent);
 border-radius:6px;
 padding:8px 12px;
 cursor:pointer;
 font-size:14px;
 transition:.2s;
}
.copy-btn:hover{
 background:var(--accent);
 color:#000;
}
.mirror-icon{
 flex:0 0 auto;
 width:32px;
}

/* ===== MAIN ====================================================== */
main{
 padding-top:32px;
 display:flex;
 flex-direction:column;
 gap:40px;
}

/* ===== HERO ====================================================== */
.hero{
 display:flex;
 flex-direction:column;
 align-items:stretch;
 gap:20px;
 text-align:center;
 width:100%;
}

.hero img{
 width:100%;
 max-width:none;
 border-radius:16px;
 border:1px solid var(--border);
 box-shadow:0 24px 40px rgba(0,0,0,.35);
}

.hero__content{
 display:flex;
 flex-direction:column;
 gap:12px;
 align-items:center;
 width:100%;
}

.cta-btn{
 align-self:center;
 padding:12px 36px;
 border:1px solid var(--accent);
 background:transparent;
 color:var(--accent);
 border-radius:12px;
 text-transform:uppercase;
 letter-spacing:.12em;
 font-weight:600;
 transition:.2s;
}

.cta-btn:hover{
 background:var(--accent);
 color:#000;
}



/* ===== SECURITY INFO ============================================ */
.security-info{
 background:var(--surface);
 border:1px solid var(--border);
 padding:28px 24px;
 border-radius:16px;
 display:flex;
 flex-direction:column;
 gap:16px;
}
.security-info h2{
 text-align:center;
 font-size:1.6rem;
}
.security-info ul{
 list-style:square;
 display:grid;
 gap:10px;
 padding-left:20px;
 color:var(--muted);
}

/* ===== ВИТРИНА ================================================== */
.shops{
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
 gap:20px;
 margin:12px 0 32px;
}
.shops > h2{
 grid-column:1 / -1;
 text-align:center;
 font-size:1.8rem;
 margin-bottom:16px;
}

.shop-card{
 background:var(--surface);
 border:1px solid var(--border);
 border-radius:16px;
 padding:16px;
 text-align:center;
 display:flex;
 flex-direction:column;
 gap:12px;
}
.shop-card h3{
 font-size:18px;
 font-weight:600;
}
.stars{
 color:var(--star);
 letter-spacing:2px;
}

.shop-card__media{
 position:relative;
 width:100%;
 aspect-ratio:1/1;
 cursor:pointer;
 overflow:hidden;
 border:1px solid var(--border);
 border-radius:12px;
}
.shop-card__media img,
.shop-card__description{
 position:absolute;
 inset:0;
 width:100%;
 height:100%;
 transition:opacity .25s ease,transform .25s ease;
}
.shop-card__media img{
 object-fit:cover;
 opacity:1;
 transform:scale(1);
}
.shop-card__description{
 display:flex;
 flex-direction:column;
 gap:8px;
 align-items:center;
 justify-content:center;
 text-align:center;
 padding:18px;
 background:rgba(15,15,15,.92);
 opacity:0;
 transform:scale(.96);
 font-size:14px;
 line-height:1.4;
}
.shop-card__media.is-active img{
 opacity:0;
 transform:scale(1.05);
}
.shop-card__media.is-active .shop-card__description{
 opacity:1;
 transform:scale(1);
}

/* ===== FOOTER ==================================================== */
footer{
 margin-top:40px;
 padding:32px 16px 72px; /* Увеличил нижний padding,чтобы кнопка не перекрывалась */
 background:var(--surface);
 position:relative; /* Важно:позиционирование для дочерних абсолютных элементов */
 font-size:14px;
 display:flex;
 justify-content:center;
 align-items:center;
 text-align:center;
 border-radius:24px 24px 0 0;
 border:1px solid var(--border);
}

.footer-content{
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:10px;
 max-width:520px;
 margin:0 auto;
}

footer .logo{
 width:60px;
 display:block;
}

.footer-note{
 margin:12px 0 0;
 font-weight:600;
 color:var(--accent);
}

.footer-illustration{
 position:absolute;
 left:80px;
 top:50%;
 transform:translateY(-50%);
 max-height:240px;
 width:auto;
 object-fit:contain;
 opacity:.85;
}

.to-top{
 position:absolute; /* Изменяем на absolute,чтобы позиционировать относительно footer */
 right:16px; /* 16px от правого края футера */
 bottom:16px; /* 16px от нижнего края футера */
 width:40px;
 height:40px;
 border:2px solid var(--accent);
 border-radius:10px;
 background:transparent;
 cursor:pointer;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:0; /* прячем символ ▲ */
 z-index:100; /* Убедимся,что кнопка видна поверх других элементов */
 opacity:0; /* Скрываем по умолчанию */
 visibility:hidden; /* Скрываем по умолчанию */
 transition:opacity .3s ease,visibility .3s ease;
}

.to-top::before{
 content:"";
 position:absolute;
 top:50%;
 left:50%;
 width:14px;
 height:14px;
 border-top:3px solid var(--accent);
 border-left:3px solid var(--accent);
 transform:translate(-50%,-25%) rotate(45deg);
}

/* ===== АДАПТИВ =================================================== */
@media (max-width:1200px){
 .shops{grid-template-columns:repeat(3,minmax(0,1fr));}
 .footer-illustration{left:24px;}
 /* .to-top стили уже управляются относительно footer */
}
@media (max-width:900px){
 .topbar__nav{justify-content:center;padding-bottom:0;}
 .shops{grid-template-columns:repeat(2,minmax(0,1fr));}
 footer{
 flex-direction:column;
 gap:24px;
 padding-bottom:64px; /* скорректировано для to-top */
 }
 .footer-illustration{
 position:static;
 transform:none;
 max-height:180px;
 margin-bottom:12px;
 }
 .to-top{
 right:16px; /* Остается справа */
 bottom:16px; /* Остается снизу */
 transform:none; /* Убираем центрирование */
 }
}
@media (max-width:600px){
 .page{padding:0 12px 40px;}
 .topbar__row{flex-direction:column;text-align:center;}
 .logo{margin-bottom:12px;}
 .hero img{
 width:100%;
 height:clamp(80px,60vw,80px); /* подберите диапазон под свои нужды */
 object-fit:cover;
 }
 .security-note{font-size:1.2rem;}
 .security-info{padding:24px 18px;}
 .security-info ul{gap:8px;}
 .shops{
 grid-template-columns:repeat(2,minmax(0,1fr)); /* Добавил,так как в вашем оригинальном CSS для 600px не было */
 gap:12px;
 }
 .shops > h2{font-size:1.5rem;}
 .shop-card__description{
 font-size:10px;
 line-height:1.2;
 padding:12px;
 word-break:break-word;
 hyphens:auto;
 }
 .footer-illustration{display:none;}
 .to-top{
 right:16px; /* Остается справа */
 bottom:16px; /* Остается снизу */
 transform:none; /* Убираем центрирование */
 }
}


/* ===== FAQ СЕКЦИЯ (новые стили) ================================================ */
.faq-section {
 background:var(--surface);
 border:1px solid var(--border);
 padding:28px 24px;
 border-radius:16px;
 display:flex;
 flex-direction:column;
 gap:20px; /* Отступ между заголовком и списком FAQ */
}

.faq-section h2 {
 text-align:center;
 font-size:1.8rem; /* Немного меньше,чем h1,но заметный */
 color:var(--accent); /* Используем акцентный цвет */
 margin-bottom:15px; /* Отступ под заголовком */
}
/* Если хотите подчеркивание под заголовком,как в первом CSS:*/
.faq-section h2::after {
 content:'';
 display:block;
 width:60px;
 height:3px;
 background-color:var(--accent);
 margin:10px auto 0; /* Отступ сверху и центрирование */
 border-radius:2px;
}


.faq-list {
 display:flex;
 flex-direction:column;
 gap:10px; /* Отступ между отдельными элементами FAQ */
}

.faq-item {
 background:var(--surface-alt); /* Немного темнее,чем основной surface */
 border:1px solid var(--border);
 border-radius:8px;
 overflow:hidden; /* Чтобы внутренние скругления работали */
}

.faq-item details {
 /* details по умолчанию блочный,но мы можем добавить стили */
}

.faq-item summary {
 display:flex; /* Используем flex для расположения текста и индикатора */
 align-items:center;
 justify-content:space-between;
 padding:16px 20px;
 font-size:1.1rem;
 font-weight:600;
 color:var(--text); /* Цвет текста вопроса */
 cursor:pointer;
 list-style:none; /* Убираем стандартный маркер */
 background:var(--surface-alt);
 transition:background .2s ease,color .2s ease;
 user-select:none; /* Запрещаем выделение текста вопроса */
}

.faq-item summary:hover {
 background:rgba(255,64,255,0.1); /* Легкий оттенок акцентного цвета */
 color:var(--accent);
}

.faq-item summary::-webkit-details-marker {
 display:none; /* Для Webkit-браузеров */
}

.faq-item summary::after {
 content:'+';
 font-size:1.5rem;
 line-height:1;
 color:var(--accent); /* Цвет индикатора */
 transition:transform .2s ease;
 margin-left:15px;
 flex-shrink:0; /* Чтобы не сжимался */
}

.faq-item details[open] summary::after {
 content:'-'; /* Можно сделать '-' или что-то другое */
 transform:rotate(0deg); /* Если + и -,то просто без rotate */
}
/* Если хотим,чтобы при открытии summary менял фон */
.faq-item details[open] summary {
 background:rgba(255,64,255,0.15);
 color:var(--accent);
 /* Можно добавить бордер снизу */
 border-bottom:1px solid var(--border);
}


.faq-item p {
 padding:15px 20px 20px; /* Отступы для ответа */
 margin:0;
 font-size:1rem;
 line-height:1.6;
 color:var(--muted); /* Цвет текста ответа */
 background:var(--surface-alt); /* Фон ответа */

 /* Анимация при открытии */
 opacity:0;
 max-height:0;
 overflow:hidden;
 transition:opacity 0.3s ease-out,max-height 0.3s ease-out;
}

.faq-item details[open] p {
 opacity:1;
 max-height:500px; /* Достаточно большое значение,чтобы вместить любой ответ. */
}

/* Адаптивность для FAQ */
@media (max-width:600px) {
 .faq-section {
 padding:20px 15px;
 }
 .faq-section h2 {
 font-size:1.6rem;
 }
 .faq-item summary {
 font-size:1rem;
 padding:12px 15px;
 }
 .faq-item summary::after {
 font-size:1.3rem;
 }
 .faq-item p {
 font-size:0.95rem;
 padding:12px 15px 15px;
 }
}