/* =============== Spinbara — Article + Sidebar Layout (Improved) =============== */
:root{
  /* Theme */
  --bg:#0f0b15;
  --canvas:#151026;
  --card:#1b1430;
  --text:#f2effa;
  --muted:#c7c0da;
  --accent:#8e66ff;   /* primary accent */
  --accent-2:#ff5ea8; /* secondary accent */
  --ok:#22c55e; --bad:#ef4444;

  /* Layout */
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --max:1160px;
  --gx: clamp(20px, 5.5vw, 28px); /* mobile gutters чуть компактнее на XS */

  /* Typography scale */
  --fs-xs:13px;
  --fs-s:14px;
  --fs-m:16px;
  --fs-l:18px;
  --fs-xl: clamp(26px, 5.2vw, 44px);

  /* Breakpoints */
  --bp-sm:480px;
  --bp-md:720px;
  --bp-lg:900px;
  --bp-xl:1100px;

  /* Focus ring */
  --focus: 2px solid rgba(142,102,255,.9);
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
:root { color-scheme: dark; }
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial;
  line-height:1.65;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
  /* iOS безопасные зоны, чтобы ничего не липло к краям у устройств с вырезами */
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}
img,video,svg{max-width:100%; height:auto; display:block}
a{color:var(--accent); text-decoration:none}
a:focus-visible{ outline: var(--focus); outline-offset: 2px }

.wrap{ max-width:var(--max); margin:0 auto; padding-inline:var(--gx) }
@media (min-width: 900px){ .wrap{ padding-inline: 16px } }

/* Utils */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ====================== Header ====================== */
.site-header{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(21,16,38,.95), rgba(21,16,38,.75));
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding-block:10px;
}
.logo{display:flex; align-items:center; gap:12px; min-height:40px}
.logo__mark{
  width:30px; height:30px; border-radius:8px;
  display:inline-grid; place-items:center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#120b1e; font-weight:900; font-size:12px;
  box-shadow: 0 8px 22px rgba(142,102,255,.35);
}
.logo__text{font-weight:700; letter-spacing:.2px; font-size: var(--fs-m)}

/* -------- Language Select (polished) -------- */
.lang{ display:flex; align-items:center; gap:10px }
.lang__select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
    transparent;
  color:var(--text);
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  padding:10px 40px 10px 12px; /* справа место под стрелку */
  font-weight:600; font-size: var(--fs-m);
  line-height:1;
  min-height:40px; min-width:140px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
  transition: border-color .2s ease, box-shadow .2s ease, transform .06s ease;
  /* Кастомная стрелка (SVG) */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c7c0da' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-size:14px;
  background-position: right 12px center;
}
.lang__select:hover{ border-color: rgba(255,255,255,.28) }
.lang__select:active{ transform: scale(.99) }
.lang__select:focus{ outline: none }
.lang__select:focus-visible{
  outline: var(--focus); outline-offset:2px;
  border-color: rgba(142,102,255,.6);
}
.lang__select::-ms-expand{ display:none } /* старый IE */

@media (pointer:coarse){
  .lang__select{ min-height:44px } /* комфортный touch target */
}

/* ====================== Hero ====================== */
.hero{
  background:
    radial-gradient(900px 480px at 10% -20%, rgba(142,102,255,.18), transparent 55%),
    radial-gradient(800px 440px at 90% -15%, rgba(255,94,168,.14), transparent 60%),
    var(--canvas);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hero .wrap{ padding-block: 18px }
.hero__inner{ display:grid; gap:16px; align-items:center }
@media (min-width: 900px){
  .hero__inner{ grid-template-columns: 1.05fr .95fr; gap: 28px; padding-block: 28px }
}
.title-xl{ font-size: var(--fs-xl); line-height:1.15; margin: 6px 0 8px }
.lead{ color: var(--muted); font-size: var(--fs-m) }
.badge{
  display:inline-flex; gap:8px; align-items:center; padding:6px 10px; font-size:12px;
  border-radius:999px; color:var(--muted);
  border:1px solid rgba(255,255,255,.16);
}
.cta{ display:flex; gap:10px; flex-wrap: wrap; margin-top: 10px }

.btn{
  --p: 11px 16px; display:inline-flex; align-items:center; gap:8px; padding:var(--p);
  border-radius:999px; font-weight:700; color:#140c22;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 22px rgba(142,102,255,.28);
  transition: transform .15s ease, box-shadow .2s ease, opacity .2s ease;
  min-height:40px;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 14px 28px rgba(142,102,255,.35) }
.btn:focus-visible{ outline: var(--focus); outline-offset: 3px }
.btn--ghost{ background: transparent; color: var(--text); border:1px solid rgba(255,255,255,.14) }

.hero__art{
  border-radius: var(--radius); overflow:hidden;
  border:1px solid rgba(255,255,255,.08); box-shadow: var(--shadow);
}
.hero__art img{ width:100%; height: clamp(200px, 40vw, 360px); object-fit: cover }

/* ====================== Page Layout ====================== */
.page { background: var(--bg) }
.page__grid{
  display:grid; gap: 18px; padding-block: 22px;
}
@media (min-width: 1100px){
  .page__grid{
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px; align-items:start;
  }
}

/* Main content column */
.content{ min-width:0; }
.toc{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 14px;
  padding:10px; border:1px solid rgba(255,255,255,.1); border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}
.toc b{ margin-right: 6px }
.toc a{ font-size: var(--fs-s); color: var(--text); opacity: .85 }
.toc a:hover{ opacity:1 }

.section{ padding-block: 18px }
.title-l{ font-size: clamp(20px, 4.4vw, 28px); margin: 0 0 10px }
.muted{ color: var(--muted) }

/* Cards & pills */
.cards{ display:grid; gap:12px; margin-top:6px }
@media (min-width: 720px){ .cards{ grid-template-columns: repeat(3, 1fr) } }
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.1); border-radius: 14px;
  padding: 14px; box-shadow: var(--shadow);
}
.pills{ display:flex; gap:8px; flex-wrap:wrap }
.pill{
  font-size: 13px; padding: 8px 12px; border-radius: 999px;
  background: rgba(142,102,255,.14); border: 1px solid rgba(142,102,255,.4)
}

/* Check list */
.check{ padding-left: 20px }
.check li{ margin: 0 0 8px }

/* ====================== Sidebar (sticky) ====================== */
.sidebar{ position: relative }
@media (min-width: 1100px){
  .sidebar{ position: sticky; top: 84px }
}
.brandcard{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 14px;
  box-shadow: var(--shadow)
}
.brandcard__head{ display: grid; gap: 12px }
.brandcard__logo{ width: 140px; height: auto }
.btn--full{ width: 100%; justify-content: center }

.rating{ margin-top: 10px; margin-bottom: 6px }
.rating__value{ font-size: 28px; font-weight: 800 }
.rating__label{ display:block; color: var(--muted); margin-top: -2px }
.rating__bar{
  height: 10px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; margin-top: 8px
}
.rating__bar span{ display:block; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

.facts{ list-style:none; padding:0; margin: 10px 0 }
.facts li{ margin: 0 0 6px }
.proscons{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px }
.pros, .cons{ list-style: none; margin: 0; padding-left: 18px }
.pros li, .cons li{ position: relative; margin:0 0 6px }
.pros li::before, .cons li::before{
  content: ""; position: absolute; left: -14px; top: 8px; width: 10px; height: 10px; border-radius:50%;
}
.pros li::before{ background: var(--ok) }
.cons li::before{ background: var(--bad) }

/* ====================== Tables (mobile-proof) ====================== */
.table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch }
.table{
  width:100%; border-collapse: collapse; font-size: var(--fs-m);
  min-width: 560px; background: transparent; margin: 10px 0;
  border:1px solid rgba(255,255,255,.1); border-radius: 12px;
}
.table th, .table td{
  padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.08); white-space: nowrap;
}
.table th{ text-align: left; color: var(--muted) }
.table tr:last-child td{ border-bottom: 0 }

/* Альтернативный «карточный» вид для узких экранов (если используешь .rtable) */
@media (max-width: 640px){
  .rtable{ width:100%; border:0; min-width:0 }
  .rtable thead{ position:absolute; left:-9999px; top:-9999px }
  .rtable tbody{ display:grid; gap:10px }
  .rtable tr{
    display:grid; grid-template-columns:1fr;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    border:1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 8px 12px;
  }
  .rtable td{
    display:grid; grid-template-columns: 130px 1fr; gap:10px;
    padding:8px 0; border:0; border-bottom:1px solid rgba(255,255,255,.08);
  }
  .rtable td:last-child{ border-bottom:0 }
  .rtable td::before{
    content: attr(data-label);
    color: var(--muted); font-weight: 700; letter-spacing:.2px;
  }
}

/* ====================== FAQ ====================== */
.faq details{
  border:1px solid rgba(255,255,255,.1); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px;
  background: rgba(255,255,255,.02)
}
.faq summary{ cursor: pointer; list-style: none; font-weight: 700 }
.faq summary::-webkit-details-marker{ display: none }

/* ====================== Footer ====================== */
.site-footer{
  border-top:1px solid rgba(255,255,255,.08);
  color: var(--muted);
}
.site-footer .wrap{ padding-block: 18px 28px }

/* ====================== Mobile polish ====================== */
@media (max-width: 480px){
  .title-xl{ font-size: clamp(24px, 7vw, 32px) }
  .title-l{ font-size: clamp(18px, 5.6vw, 24px) }
  .lead{ font-size: 15px }
  .toc{ gap:8px; padding:8px }
  .btn{ min-height:44px }
  .lang__select{ min-height:44px; min-width: 130px }
  .hero__inner{ gap:14px }
}

/* ====================== Motion preferences ====================== */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important }
}

/* ===== HERO: banner-first variant ===== */
.hero--banner .hero__inner{
  display:flex; flex-direction:column; gap:14px;
  padding-block: 16px 22px;
}
@media (min-width: 900px){
  .hero--banner .hero__inner{ gap:18px; padding-block: 24px 32px }
}

/* Сам баннер.
   aspect-ratio: на мобиле 720/560, на десктопе 2096/490.
   Картинка заполняет контейнер без искажений. */
.hero-banner{
  display:block; width:100%;
  aspect-ratio: 720 / 560;                        /* мобильный формат */
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}
.hero-banner picture, .hero-banner img{ width:100%; height:100%; display:block; object-fit: cover }

@media (min-width: 901px){
  .hero-banner{ aspect-ratio: 2096 / 490 }        /* десктопный формат */
}

/* Текст под баннером */
.hero--banner .hero-info{ display:grid; gap:10px }
.hero--banner .badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; font-size:12px;
  color: var(--muted); border:1px solid rgba(255,255,255,.16); border-radius:999px;
}
.hero--banner .title-xl{ margin:6px 0 6px }
.hero--banner .lead{ color:var(--muted) }
.hero--banner .cta{ display:flex; gap:10px; flex-wrap:wrap }

/* Если хочешь чуть плотнее на совсем узких экранах */
@media (max-width: 480px){
  .hero--banner .hero__inner{ gap:12px; padding-block:14px 20px }
  .hero-banner{ border-radius: 14px }
}

/* ===== HERO: banner-first + side cards ===== */
.hero--banner .hero__grid{
  display:grid; gap:16px;
  grid-template-columns: 1fr;           /* мобилка — одна колонка */
  grid-auto-rows: min-content;
  padding-block: 16px 22px;
}

/* Баннер: задано соотношение сторон — ничего не «провисает» */
.hero-banner{
  display:block; width:100%;
  aspect-ratio: 720 / 560;              /* мобилка */
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}
.hero-banner picture, .hero-banner img{
  width:100%; height:100%; object-fit: cover; display:block;
}

/* Текст под баннером */
.hero__info{ display:grid; gap:10px }
.hero--banner .badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; font-size:12px;
  color: var(--muted); border:1px solid rgba(255,255,255,.16); border-radius:999px;
}
.hero--banner .title-xl{ margin:6px 0 6px }
.hero--banner .lead{ color:var(--muted) }
.hero--banner .cta{ display:flex; gap:10px; flex-wrap:wrap }

/* Мини‑карточки по бокам (на мобилке идут ниже текста) */
.hero__side{ display:contents } /* на мобилке — просто участвуют в потоке */
.hero-mini{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 14px;
  box-shadow: var(--shadow);
  display:grid; gap:10px;
}
.hero-mini__title{ font-weight:800 }
.hero-mini__list{ margin:0; padding-left:18px }
.hero-mini__list li{ margin:0 0 6px }
.hero-rating{ display:grid; gap:8px }
.hero-rating__value{ font-size:28px; font-weight:900 }
.hero-rating__bar{ height:10px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden }
.hero-rating__bar span{ display:block; height:100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.hero-mini__pays{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; opacity:.92 }
.hero-mini__pays img{ height:18px; width:auto; display:block; filter:grayscale(10%) }

/* Десктопная сетка: 3 колонки → карточки по бокам, текст по центру */
@media (min-width: 1100px){
  .hero--banner .hero__grid{
    grid-template-columns: 1fr 1.4fr 1fr; /* левая колонка / текст / правая колонка */
    gap: 20px; padding-block: 24px 32px;
  }
  .hero-banner{ grid-column: 1 / -1; aspect-ratio: 2096 / 490 } /* десктопный формат */
  .hero__side--L{ grid-column: 1; }
  .hero__info   { grid-column: 2; }
  .hero__side--R{ grid-column: 3; }

  /* Поднимаем боковые карточки ближе к баннеру, чтобы ровно «встали» под ним */
  .hero__side .hero-mini{
    margin-top: clamp(-72px, -8vw, -48px); /* лёгкий оверлап под баннер */
    min-height: clamp(220px, 26vw, 320px); /* высота, чтобы закрывать «пустоты» */
  }
}

/* Планшет: две колонки — карточки можно поставить рядом под баннером */
@media (min-width: 720px) and (max-width: 1099px){
  .hero--banner .hero__grid{
    grid-template-columns: 1fr 1fr;
  }
  .hero-banner{ grid-column: 1 / -1 }
  .hero__info{ grid-column: 1 / -1 }
  .hero__side--L{ grid-column: 1 }
  .hero__side--R{ grid-column: 2 }
}

/* Самые узкие экраны — чуть плотнее отступы/радиусы */
@media (max-width: 480px){
  .hero--banner .hero__grid{ gap:12px; padding-block:14px 20px }
  .hero-banner{ border-radius: 14px }
}


/* ===== HERO: минимал без боковых блоков ===== */
.hero.hero--clean{
  background:
    radial-gradient(900px 480px at 10% -20%, rgba(142,102,255,.18), transparent 55%),
    radial-gradient(800px 440px at 90% -15%, rgba(255,94,168,.14), transparent 60%),
    var(--canvas);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hero.hero--clean .wrap{ padding-block: 18px 26px } /* мягкие вертикальные отступы */

/* Баннер строго держит пропорции: моб 720x560, дескт 2096x490 */
.hero.hero--clean .hero-media{
  display:block; width:100%;
  aspect-ratio: 720 / 560;                 /* мобильный формат */
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}
.hero.hero--clean .hero-media picture,
.hero.hero--clean .hero-media img{
  width:100%; height:100%; object-fit: cover; display:block;
}
@media (min-width: 901px){
  .hero.hero--clean .hero-media{ aspect-ratio: 2096 / 490 } /* десктопный формат */
}

/* Тело героя — узкая колонка для читабельности, без пустот вокруг */
.hero.hero--clean .hero-body{
  max-width: 760px;      /* комфортная ширина строки */
  margin-top: 14px;
  display:grid; gap: 10px;
}
@media (min-width: 1100px){
  .hero.hero--clean .hero-body{ margin-top: 18px }
}

/* Мелкие элементы */
.hero.hero--clean .badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; font-size:12px;
  color: var(--muted); border:1px solid rgba(255,255,255,.16); border-radius:999px;
}
.hero.hero--clean .title-xl{ margin: 6px 0 6px }
.hero.hero--clean .lead{ color: var(--muted) }
.hero.hero--clean .cta{ display:flex; gap:10px; flex-wrap:wrap }

/* Ультра-узкая мобилка — плотнее отступы/радиусы */
@media (max-width: 480px){
  .hero.hero--clean .wrap{ padding-block: 14px 20px }
  .hero.hero--clean .hero-media{ border-radius: 14px }
}

/* ===== Native <select> -> dark dropdown ===== */
/* Даем движкам явный сигнал рисовать тёмные нативные контролы */
:root,
.site-header,
.lang,
.lang__select { color-scheme: dark; }

.lang__select{
  /* базовые цвета для контрола */
  --sel-bg: #151026;                 /* фон выпадающего листа */
  --sel-bg-hover: #20183a;           /* ховер пункта */
  --sel-bg-active: #2a2045;          /* выбранный пункт */
  --sel-text: #f2effa;               /* основной текст */
  --sel-muted: #c7c0da;              /* приглушённый текст */

  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  min-height:40px; min-width:160px;
  padding:10px 40px 10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  color:var(--sel-text);
  font-weight:700;
  line-height:1;
  /* своя стрелка */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c7c0da' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-size:14px;
  background-position:right 12px center;
}
.lang__select:hover{ border-color:rgba(255,255,255,.28) }
.lang__select:focus{ outline:none }
.lang__select:focus-visible{ outline:2px solid rgba(142,102,255,.9); outline-offset:3px }

/* Стили самих пунктов — работают в современных Chrome/Edge/Firefox и Safari */
.lang__select option,
.lang__select optgroup{
  background-color: var(--sel-bg);
  color: var(--sel-text);
}
.lang__select option:hover{ background-color: var(--sel-bg-hover); color:#fff; }
.lang__select option:checked{ background-color: var(--sel-bg-active); color:#fff; }
.lang__select option:disabled{
  color: rgba(199,192,218,.55);
}

/* Скроллбар внутри списка (WebKit) */
.lang__select::-webkit-scrollbar{ width:10px }
.lang__select::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius:10px; border:2px solid transparent; background-clip:padding-box;
}

/* Мобилка — комфортный таргет */
@media (pointer:coarse){
  .lang__select{ min-height:44px }
}