/* pages.css — оформление внутренних страниц 1winapk.moe.
   Правила взяты из инлайн-стилей главной, чтобы страницы выглядели
   одним сайтом. Собрано extract_css.py 24.09.2026. */
.hero{position:relative;padding:48px 20px 64px;background:linear-gradient(135deg,#0a1930 0%,#0f2544 60%,#12305a 100%);color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(1200px 500px at 15% 0%,rgba(0,116,255,.28),transparent 60%),radial-gradient(900px 400px at 90% 100%,rgba(255,193,7,.15),transparent 55%);pointer-events:none}
.hero__container{position:relative;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;align-items:start}
.hero__badge{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);font-size:13px;font-weight:500;color:#e6f0ff;backdrop-filter:blur(6px);margin-bottom:20px}
.hero__badge-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.25)}
.hero__title{font-size:clamp(28px,4.4vw,48px);line-height:1.1;font-weight:800;margin:0 0 16px;letter-spacing:-.02em;display:flex;flex-direction:column;gap:6px}
.hero__title-main{color:#fff}
.hero__title-sub{font-size:clamp(16px,2vw,22px);font-weight:500;color:#b7c7de;letter-spacing:0}
.hero__subheadline{font-size:17px;line-height:1.5;color:#cbd8ec;margin:0 0 24px}
.hero__subheadline strong{color:#ffc107}
.hero__cta{display:inline-flex;align-items:center;gap:14px;padding:14px 22px;border-radius:14px;text-decoration:none;color:#fff;font-family:inherit;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;min-width:220px}
.hero__cta:hover{transform:translateY(-2px);filter:brightness(1.08)}
.hero__cta:active{transform:translateY(0)}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section-title{font-size:32px;font-weight:800;color:#fff;margin:0 0 12px;text-align:center;letter-spacing:-.5px}
.section-lead{color:rgba(255,255,255,.7);text-align:center;max-width:820px;margin:0 auto 40px;font-size:16px;line-height:1.6}
.slots-cta{text-align:center;margin-top:44px}
.btn-primary{display:inline-block;background:linear-gradient(135deg,#00b4ff 0%,#00ffb2 100%);color:#0a1730;padding:16px 36px;border-radius:12px;font-weight:800;text-decoration:none;font-size:16px;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 8px 24px rgba(0,180,255,.35);transition:transform .2s ease}
.btn-primary:hover{transform:translateY(-2px)}
/* REQUIREMENTS */
  .requirements{padding:80px 0;background:#0f1420}
.req-table-wrap{overflow-x:auto;border-radius:14px;border:1px solid rgba(255,255,255,.08)}
.req-table{width:100%;border-collapse:collapse;color:#fff;font-size:14px;min-width:640px}
.req-table thead{background:linear-gradient(135deg,#1e2439 0%,#181d30 100%)}
.req-table th{padding:16px 18px;text-align:left;font-weight:700;color:#00b4ff;font-size:13px;text-transform:uppercase;letter-spacing:.6px;border-bottom:2px solid rgba(0,180,255,.2)}
.req-table td{padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.05);color:rgba(255,255,255,.85)}
.req-table tr:last-child td{border-bottom:none}
.req-table td:first-child{color:rgba(255,255,255,.55);font-weight:600}
.req-table tbody tr:hover{background:rgba(0,180,255,.04)}
/* FOOTER */
  .footer{background:#070a12;padding:60px 0 30px;border-top:1px solid rgba(0,180,255,.08)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr 1.2fr;gap:36px;margin-bottom:40px}
.footer-logo{font-size:32px;font-weight:900;color:#fff;margin-bottom:14px;letter-spacing:-1px}
.footer-logo span{color:#00b4ff}
.footer-tagline{color:rgba(255,255,255,.55);font-size:14px;line-height:1.6;margin:0 0 16px}
.footer-age{display:inline-block;background:#ff3b3b;color:#fff;font-weight:800;padding:4px 10px;border-radius:6px;font-size:13px}
.footer-title{color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin:0 0 16px}
.footer-list{list-style:none;padding:0;margin:0}
.footer-list li{margin-bottom:10px}
.footer-list a{color:rgba(255,255,255,.6);text-decoration:none;font-size:14px;transition:color .2s ease}
.footer-list a:hover{color:#00b4ff}

@media (max-width:900px){
  .hero__container{grid-template-columns:1fr;gap:28px}
  .hero__cta{min-width:100%}
}
@media (max-width:480px){
  .hero{padding:32px 16px 48px}
}
@media (max-width:640px){
  .requirements, .footer{padding:56px 0}
  .section-title{font-size:24px}
  .btn-primary{padding:14px 24px;font-size:14px;width:100%;box-sizing:border-box}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
}

/* --- Добавки для внутренних страниц (на главной этих случаев нет) --- */

/* hero__container — сетка в две колонки, а у нас одна: иначе текст
   занимает 1.35fr и справа зияет пустая треть экрана. */
.hero__container{grid-template-columns:1fr}
.hero__content{min-width:0}

/* На главной .hero__cta — сама кнопка, у нас это обёртка вокруг
   .btn-primary. Снимаем её padding, чтобы не было кнопки в кнопке. */
.hero .hero__cta{display:block;padding:0;min-width:0;background:none;border-radius:0}
.hero .hero__cta:hover{transform:none;filter:none}

.footer-col{min-width:0}

/* FAQ на сайте собран на <details>/<summary>: у .faq__question рисуется
   «+», который переключается на «−» при открытии. У нас ответы видны
   всегда (так их читает Алиса), поэтому у div-варианта плюс убираем —
   иначе выглядит как свёрнутый список, который не реагирует на нажатие. */
div.faq__item .faq__question::after{content:none}
div.faq__item .faq__question{padding-right:22px;cursor:default;margin:0}
div.faq__item{background:rgba(19,37,82,.4);border:1px solid var(--border);
  border-radius:12px;margin-bottom:10px;overflow:hidden}

/* Таблицы: обёртка уже прокручивается вбок (.req-table min-width:640px),
   добавляем инерцию на iOS и подсказку, что блок тянется. */
.req-table-wrap{-webkit-overflow-scrolling:touch}

@media (max-width:640px){
  /* палец — не мышь: ссылки в подвале и крошках делаем нажимаемыми */
  .footer-list a{display:inline-block;padding:6px 0;min-height:32px}
  .req-table th,.req-table td{padding:12px 14px}
  .hero__title{font-size:26px}
}

/* На главной у таблиц min-width:640px и они листаются вбок внутри своей
   коробки. У нас таблицы по 3 короткие колонки — на 375 они помещаются
   целиком, а боковую прокрутку внутри блока на телефоне половина людей
   просто не замечает. Поэтому на узких экранах снимаем min-width. */
@media (max-width:760px){
  .req-table{min-width:0;font-size:14px}
  .req-table th{font-size:11px;letter-spacing:.3px}
  .req-table th,.req-table td{padding:10px 10px;word-break:break-word}
}