/* ═══════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════ */
:root{
  --bg:#080c14;--bg2:#0d1321;--bg3:#111827;
  --glass:rgba(255,255,255,0.04);
  --glass-border:rgba(255,255,255,0.08);
  --glass-hover:rgba(255,255,255,0.08);
  --accent:#4fffb0;--accent2:#00d4ff;--accent3:#7c5cfc;
  /* --accent3-text — осветлённый вариант accent3 для мелкого текста:
     сам #7c5cfc даёт 4.4:1 на тёмном фоне (WCAG AA требует 4.5:1) */
  --accent3-text:#8b6dff;
  /* --text-dim: контраст к --bg / --bg2 / карточкам ≥ 4.6:1 (WCAG AA).
     Прежний #4a5a7a давал только 2.5–2.8:1 */
  --text:#f0f4ff;--text-muted:#8ca1cd;--text-dim:#7c8cab;
  --danger:#ff5f7e;
  --r:20px;
  --fd:'Google Sans',sans-serif;
  --fb:'Google Sans',sans-serif;
  --tr:0.35s cubic-bezier(0.4,0,0.2,1);
  --max:1200px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--fb);
  font-size:16px;line-height:1.6;min-height:100vh;
  font-optical-sizing:auto;font-variation-settings:'GRAD' 0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font-family:inherit}
body.lang-he,body.lang-he button,body.lang-he input,body.lang-he textarea{
  font-family:'Noto Sans Hebrew',sans-serif;direction:rtl}
body.lang-he h1,body.lang-he h2,body.lang-he h3,body.lang-he .fmlink,body.lang-he .art-h1{
  font-family:'Noto Sans Hebrew',sans-serif;letter-spacing:0}
/* ── RTL LAYOUT FIXES (Hebrew) ── */
[dir="rtl"] .nav-logo{margin-right:0;margin-left:auto}
[dir="rtl"] .lang-bar{margin-right:0;margin-left:18px}
[dir="rtl"] .skip-link{left:auto;right:8px}
[dir="rtl"] #contact-bar{right:auto;left:20px}
[dir="rtl"] #a11y-panel{right:auto;left:78px}
[dir="rtl"] .a11y-toggle-thumb{left:auto;right:3px}
[dir="rtl"] .a11y-toggle input:checked~.a11y-toggle-thumb{right:21px;left:auto}
[dir="rtl"] .a11y-close{margin-right:auto;margin-left:0}
[dir="rtl"] .cfab-tip{right:auto;left:56px}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--accent3);border-radius:2px}

/* ── ORBS ── */
.orb{position:fixed;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0;opacity:0.4}

/* ── NAV ── */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:800;height:64px;padding:0 32px;
  display:flex;align-items:center;
  background:rgba(8,12,20,0.88);backdrop-filter:blur(18px);
  border-bottom:1px solid var(--glass-border)}
.nav-logo{margin-right:auto;text-decoration:none;display:flex;align-items:center;line-height:0}
.logo-img{height:38px;width:auto;display:block}
.lang-bar{display:flex;gap:6px;margin-right:18px}
.lb{background:var(--glass);border:1px solid var(--glass-border);
  color:var(--text-muted);padding:5px 14px;border-radius:30px;cursor:pointer;
  font-size:12px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  transition:var(--tr)}
.lb.active,.lb:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}
.hbg{width:40px;height:40px;border-radius:10px;background:var(--glass);
  border:1px solid var(--glass-border);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:var(--tr)}
.hbg:hover{background:var(--glass-hover)}
.hbg span{display:block;width:18px;height:2px;background:var(--text);
  border-radius:2px;transition:var(--tr)}
.hbg.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hbg.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hbg.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#fmenu{position:fixed;inset:0;z-index:790;background:rgba(8,12,20,0.98);
  backdrop-filter:blur(28px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:28px;
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity 0.4s ease,visibility 0s linear 0.4s}
/* visibility:hidden — обязательно вместе с opacity:0: без неё закрытое меню
   остаётся в Tab-порядке и фокус уходит в невидимые ссылки (WCAG 2.4.3/2.4.7).
   pointer-events отсекает только мышь, клавиатуру — нет.
   visibility НЕ анимируем длительностью: Chromium переключает её на середине
   перехода, и первые ~200 мс открытый слой ещё hidden — focus() по нему молча
   не срабатывает. Схема «0s + задержка»: при открытии visible мгновенно,
   при закрытии hidden ровно после того, как opacity доехала до 0. */
#fmenu.open{opacity:1;pointer-events:all;visibility:visible;transition:opacity 0.4s ease,visibility 0s linear 0s}
.fmlink{font-family:var(--fd);font-size:clamp(36px,6vw,60px);font-weight:800;
  letter-spacing:-0.02em;color:var(--text-muted);transition:var(--tr);
  cursor:pointer;text-decoration:none}
.fmlink:hover,.fmlink.active,.fmlink.fmactive{color:var(--accent)}

/* ── FOOTER ── */
footer{background:var(--bg2);border-top:1px solid var(--glass-border);
  padding:28px 32px;position:relative;z-index:1}
/* .footi = same two-column footer layout used on article pages */
.foot-inner,.footi{max-width:var(--max);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  padding-right:72px}/* prevent overlap with floating WA/TG/a11y buttons */
.footbr{display:flex;align-items:center;line-height:0}
.footr{font-size:12px;color:var(--text-muted)}
.foot-links{display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.foot-link-btn{background:none;border:none;color:var(--text-muted);font-size:12px;
  cursor:pointer;text-decoration:underline;font-family:var(--fd);
  transition:var(--tr);padding:0}
.foot-link-btn:hover{color:var(--accent)}
@media(max-width:640px){
  .foot-inner,.footi{padding-right:16px;flex-direction:column;align-items:flex-start;gap:10px}
  /* Правая колонка футера: в HTML у неё инлайновый text-align:end, а у обёртки
     ссылок — justify-content:flex-end (одинаково во всех 18 страницах).
     На мобильном футер становится колонкой, поэтому выравниваем по началу строки.
     start, а не left — на HE (dir=rtl) начало строки справа. */
  .foot-inner>div:last-child,.footi>div:last-child{text-align:start!important}
  .foot-inner>div:last-child>div,.footi>div:last-child>div{justify-content:flex-start!important}
  .foot-links{justify-content:flex-start;max-width:calc(100% - 68px)}
}

/* ── LEGAL MODALS ── */
.legal-modal{position:fixed;inset:0;z-index:3000;
  background:rgba(5,8,14,0.95);backdrop-filter:blur(20px);
  display:none;align-items:center;justify-content:center;padding:20px}
.legal-modal-box{max-width:580px;width:100%;background:var(--bg2);
  border:1px solid var(--glass-border);border-radius:24px;
  padding:32px 28px;position:relative;max-height:90vh;overflow-y:auto}
.legal-modal-close{position:absolute;top:16px;right:16px;background:none;
  border:none;color:var(--text-muted);font-size:20px;cursor:pointer;
  padding:4px 8px;border-radius:8px;transition:var(--tr)}
.legal-modal-close:hover{color:var(--text)}
.legal-modal h2{font-size:22px;font-weight:800;margin-bottom:16px}
.legal-modal .body{font-size:13px;color:var(--text-muted);line-height:1.8}

/* ── ACCESSIBILITY WIDGET ── */
/* ── Unified contact bar ── */
#contact-bar{
  position:fixed;bottom:20px;right:20px;z-index:1500;
  display:flex;flex-direction:column-reverse;gap:8px;align-items:center}
#a11y-btn{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  background:var(--accent3);border:2px solid rgba(255,255,255,0.2);
  color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 20px rgba(124,92,252,0.4);
  transition:var(--tr);
}
#a11y-btn:hover,#a11y-btn:focus-visible{transform:scale(1.1);
  box-shadow:0 6px 28px rgba(124,92,252,0.6)}
#a11y-panel{
  position:fixed;bottom:20px;right:78px;z-index:1500;width:310px;
  background:var(--bg2);border:1px solid var(--glass-border);
  border-radius:20px;padding:20px;
  box-shadow:0 16px 50px rgba(0,0,0,0.5);backdrop-filter:blur(20px);
  visibility:hidden;opacity:0;transform:translateY(8px);
  transition:opacity 0.25s ease,transform 0.25s ease,visibility 0s linear 0.25s;
  pointer-events:none;
  max-height:calc(100vh - 80px);overflow-y:auto;
}
#a11y-panel.open{visibility:visible;opacity:1;transform:translateY(0);pointer-events:all;
  transition:opacity 0.25s ease,transform 0.25s ease,visibility 0s linear 0s}
.a11y-title{font-family:var(--fd);font-size:14px;font-weight:700;
  margin-bottom:14px;color:var(--text);
  display:flex;justify-content:space-between;align-items:center}
.a11y-close{background:none;border:none;color:var(--text-muted);
  font-size:18px;cursor:pointer;padding:0;line-height:1}
.a11y-close:hover{color:var(--text)}
.a11y-row{display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:10px 0;border-bottom:1px solid var(--glass-border)}
.a11y-row:last-child{border-bottom:none;padding-bottom:0}
.a11y-row-info{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.a11y-row-icon{width:32px;height:32px;border-radius:8px;
  background:rgba(255,255,255,0.06);border:1px solid var(--glass-border);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:var(--text-muted);flex-shrink:0;
  font-family:var(--fd)}
.a11y-row-title{font-size:13px;font-weight:600;color:var(--text)}
.a11y-row-icon[data-tip]{cursor:help;
  transition:background .15s,border-color .15s,color .15s}
.a11y-row-icon[data-tip]:hover{background:rgba(79,255,176,0.15);
  border-color:rgba(79,255,176,0.35);color:var(--accent)}
/* Tooltip popup */
.a11y-tip{position:fixed;z-index:9990;max-width:220px;
  padding:10px 14px;background:var(--bg);
  border:1px solid rgba(79,255,176,0.4);border-radius:10px;
  color:var(--text);font-size:13px!important;line-height:1.5;font-weight:400;
  box-shadow:0 4px 28px rgba(0,0,0,.7),0 0 0 1px rgba(79,255,176,0.06);
  backdrop-filter:blur(14px);pointer-events:none;
  opacity:0;transform:scale(0.95);
  transition:opacity .18s ease,transform .18s ease}
.a11y-tip.visible{opacity:1;transform:scale(1)}
.a11y-toggle{position:relative;width:40px;height:22px;cursor:pointer}
.a11y-toggle input{opacity:0;width:0;height:0;position:absolute}
.a11y-toggle-track{position:absolute;inset:0;border-radius:11px;
  background:rgba(255,255,255,0.1);border:1px solid var(--glass-border);
  transition:var(--tr)}
.a11y-toggle input:checked+.a11y-toggle-track{
  background:var(--accent3);border-color:var(--accent3)}
.a11y-toggle-thumb{position:absolute;top:3px;left:3px;
  width:16px;height:16px;border-radius:50%;
  background:#fff;transition:var(--tr)}
.a11y-toggle input:checked~.a11y-toggle-thumb{left:21px}
.a11y-toggle-track:focus-within{outline:3px solid var(--accent);
  outline-offset:2px;border-radius:12px}

/* ── A11Y STATES ── */
body.a11y-high-contrast,html.a11y-contrast body{
  --text:#ffffff;--text-muted:#e0e0e0;
  --glass-border:rgba(255,255,255,0.3);
  --glass:rgba(255,255,255,0.1);--bg2:#050810}
body.a11y-no-anim *,html.a11y-noanim *{animation:none!important;transition:none!important}
body.a11y-no-anim #a11y-btn,body.a11y-no-anim #a11y-panel,
body.a11y-no-anim .site-nav,body.a11y-no-anim #fmenu,body.a11y-no-anim #cookie-banner,
html.a11y-noanim #a11y-btn,html.a11y-noanim #a11y-panel,
html.a11y-noanim .site-nav,html.a11y-noanim #fmenu,html.a11y-noanim #cookie-banner{
  transition:opacity 0.25s ease,transform 0.25s ease,visibility 0s!important}
/* Line height */
html.a11y-lh-medium p,html.a11y-lh-medium li,html.a11y-lh-medium span,html.a11y-lh-medium a,html.a11y-lh-medium label,html.a11y-lh-medium td{line-height:1.9!important}
html.a11y-lh-large p,html.a11y-lh-large li,html.a11y-lh-large span,html.a11y-lh-large a,html.a11y-lh-large label,html.a11y-lh-large td{line-height:2.4!important}
html.a11y-lh-medium #a11y-panel *,html.a11y-lh-large #a11y-panel *{line-height:normal!important}
/* Заморозка переходов на время пересчёта масштаба шрифта (js/a11y.js →
   _a11yApplyFontScale). Без неё элементы с transition:all анимируют font-size,
   и замер CSS-базиса сразу после снятия инлайнового размера возвращает
   промежуточное значение анимации — размер удваивается на каждом пересчёте. */
html.a11y-fs-notrans,html.a11y-fs-notrans *,html.a11y-fs-notrans *::before,html.a11y-fs-notrans *::after{
  transition:none!important}
/* Font family (0=default, 1=sans, 2=dyslexia) — см. js/a11y.js → a11yFontFamily().
   Класс на <html> + !important, а НЕ inline font-family на html/body: inline
   действует только через наследование, поэтому любой элемент со своим
   font-family (в проекте это десятки правил font-family:var(--fd) — все
   заголовки, цены, кнопки квиза, модалки — плюс body.lang-he с Noto Sans
   Hebrew) режим молча игнорировал. Именно поэтому на HE менялась лишь часть
   текста, а на RU/EN основной видимый текст не менялся вовсе.
   Иконочные шрифты исключены, чтобы не сломать глифы (в проекте иконки — SVG
   и юникод, исключения оставлены на будущее и для единообразия с виджетом). */
html.a11y-font-sans *:not(i):not([class*="fa-"]):not([class*="icon"]):not(.material-icons):not([class*="material-symbols"]){
  font-family:Arial,Helvetica,sans-serif!important}
/* Иврит первым: DyslexicHe объявлен с unicode-range только на иврит, поэтому
   латиница/кириллица/греческий уходят дальше по стеку — подстановка идёт
   посимвольно. Дальше self-hosted OpenDyslexic 0.990, затем локально
   установленные копии под обоими именами, которыми апстрим их выпускал. */
html.a11y-font-dyslexic *:not(i):not([class*="fa-"]):not([class*="icon"]):not(.material-icons):not([class*="material-symbols"]){
  font-family:'DyslexicHe','DSSOpenDyslexic','OpenDyslexic','OpenDyslexicRegular',Arial,sans-serif!important}
/* Интервалы — тем же селектором, но .ws-inv исключён: у этого заголовка размер
   подогнан под ширину контейнера с запасом ~5% (см. CLAUDE.md), и +0.09em на
   символ рвут его на две строки, а на мобильном дают горизонтальную прокрутку. */
html.a11y-font-dyslexic *:not(i):not(.ws-inv):not([class*="fa-"]):not([class*="icon"]):not(.material-icons):not([class*="material-symbols"]){
  letter-spacing:.05em!important;word-spacing:.1em!important}
/* Щит: сама панель доступности остаётся в своём шрифте (id весит больше
   любого числа классов, поэтому бьёт правила выше). */
html.a11y-font-sans #a11y-panel,html.a11y-font-sans #a11y-panel *,
html.a11y-font-dyslexic #a11y-panel,html.a11y-font-dyslexic #a11y-panel *{
  font-family:var(--fd)!important;letter-spacing:normal!important;word-spacing:normal!important}
/* Contrast overlays */
.a11y-invert-overlay{position:fixed;inset:0;pointer-events:none;z-index:99990;mix-blend-mode:difference;background:#fff}
.a11y-gray-overlay{position:fixed;inset:0;pointer-events:none;z-index:99990;backdrop-filter:grayscale(1)}
/* Highlight links / headings */
html.a11y-links a{outline:2px dashed var(--accent)!important;text-decoration:underline!important}
html.a11y-headings h1,html.a11y-headings h2,html.a11y-headings h3,
html.a11y-headings h4,html.a11y-headings h5,html.a11y-headings h6{outline:2px solid gold!important}
/* Enhanced focus */
html.a11y-focus *:focus{outline:3px solid #f5a623!important;outline-offset:2px!important}
/* Large cursor */
html.a11y-cursor-black *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M5%2C2 L5%2C32 L13%2C24 L19%2C38 L23%2C36 L17%2C22 L27%2C22 Z' fill='black' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") 5 2,auto!important}
html.a11y-cursor-white *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M5%2C2 L5%2C32 L13%2C24 L19%2C38 L23%2C36 L17%2C22 L27%2C22 Z' fill='white' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") 5 2,auto!important}
/* Reading ruler */
.a11y-ruler{position:fixed;left:0;right:0;height:40px;background:rgba(0,120,255,.12);
  border-top:1px solid rgba(0,120,255,.3);border-bottom:1px solid rgba(0,120,255,.3);
  pointer-events:none;z-index:99985;display:none}
.a11y-ruler.active{display:block}
/* Screen magnifier */
.a11y-magnifier{position:fixed;width:150px;height:150px;border-radius:50%;overflow:hidden;
  border:2px solid var(--accent3);box-shadow:0 4px 20px rgba(0,0,0,.5);
  pointer-events:none;z-index:99985;display:none;background:var(--bg)}
.a11y-magnifier.active{display:block}
.a11y-magnifier-inner{position:absolute;transform-origin:top left}
/* ── A11Y WIDGET CONTROLS ── */
.a11y-fs-ctrl{display:flex;align-items:center;gap:4px;flex-shrink:0}
.a11y-fs-btn{background:var(--glass);border:1px solid var(--glass-border);
  color:var(--text);border-radius:8px;padding:4px 8px;cursor:pointer;
  font-size:12px;font-weight:700;transition:var(--tr);font-family:var(--fd);line-height:1}
.a11y-fs-btn:hover{background:var(--glass-hover);border-color:var(--accent)}
.a11y-fs-val{font-size:11px;color:var(--accent);font-weight:700;min-width:36px;text-align:center}
.a11y-btn-grp{display:flex;gap:3px;flex-shrink:0}
.a11y-grp-btn{background:var(--glass);border:1px solid var(--glass-border);
  color:var(--text-muted);border-radius:8px;padding:5px 7px;cursor:pointer;
  font-size:11px;font-weight:600;transition:var(--tr);font-family:var(--fd);white-space:nowrap;line-height:1}
.a11y-grp-btn:hover{border-color:var(--accent);color:var(--text)}
.a11y-grp-btn.active{background:var(--accent3);border-color:var(--accent3);color:#fff}
.a11y-cursor-ctrl{display:flex;align-items:center;gap:8px;flex-shrink:0}
.a11y-cc-colors{display:flex;gap:5px;opacity:0.4;transition:opacity 0.25s}
.a11y-cc-colors.enabled{opacity:1}
.a11y-cc-btn{width:18px;height:18px;border-radius:50%;cursor:pointer;
  border:2px solid rgba(255,255,255,0.2);transition:var(--tr);padding:0;flex-shrink:0}
.a11y-cc-btn:hover,.a11y-cc-btn.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.a11y-cc-black{background:#111}
.a11y-cc-white{background:#fff}
.a11y-reset-row{padding:10px 0 0;border-top:1px solid var(--glass-border);margin-top:4px}
.a11y-reset-btn{width:100%;background:var(--glass);border:1px solid var(--glass-border);
  color:var(--text-muted);border-radius:10px;padding:9px 16px;cursor:pointer;
  font-size:12px;font-weight:600;transition:var(--tr);font-family:var(--fd)}
.a11y-reset-btn:hover{border-color:var(--danger);color:var(--danger)}
/* panel mobile */
@media(max-width:480px){
  #a11y-panel{right:16px;width:calc(100vw - 32px)}
  [dir="rtl"] #a11y-panel{right:auto;left:16px}
}
/* Инструменты только для десктопа: размер шрифта, режим фокуса,
   большой курсор, экранная лупа — на мобильных/сенсорных бесполезны
   (нет курсора и клавиатурного фокуса) либо ломают вёрстку. */
@media(max-width:768px),(hover:none) and (pointer:coarse){
  .a11y-row.a11y-desktop-only{display:none}
}

/* Ссылки-кнопки в футере (декларация доступности, политика, условия).
   Здесь, а не в index.css: футер есть и на страницах статей. */
.a11y-stmt{font-size:12px;color:var(--accent2);text-decoration:underline;cursor:pointer;
  font-family:inherit}
.a11y-stmt:hover{color:var(--accent)}

/* ── CONTACT FAB BUTTONS ── */
.cfab-btn{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.14);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  text-decoration:none;box-shadow:0 4px 16px rgba(0,0,0,0.3);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:var(--tr);position:relative;opacity:0;transform:translateY(8px)}
.cfab-btn.cfab-visible{opacity:1;transform:translateY(0)}
.cfab-btn:hover{background:rgba(255,255,255,0.13);border-color:rgba(255,255,255,0.26);transform:scale(1.08)}
.cfab-btn.cfab-visible:hover{transform:scale(1.08)}
.cfab-wa:hover{box-shadow:0 4px 22px rgba(37,211,102,0.4)}
.cfab-tg:hover{box-shadow:0 4px 22px rgba(34,158,217,0.4)}
.cfab-tip{
  position:absolute;right:56px;top:50%;transform:translateY(-50%);
  background:rgba(13,19,33,0.95);color:#f0f4ff;font-size:12px;font-weight:600;
  padding:5px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity 0.18s;border:1px solid rgba(255,255,255,0.1)}
.cfab-btn:hover .cfab-tip{opacity:1}

/* ── SCROLL REVEAL ── */
.rev{opacity:0;transform:translateY(24px);
  transition:opacity 0.55s ease,transform 0.55s ease}
.rev.in,.rev.visible{opacity:1;transform:none}

/* ── SKIP LINK ── */
.skip-link{position:absolute;top:-40px;left:8px;background:var(--accent);
  color:var(--bg);padding:8px 16px;border-radius:8px;
  font-weight:700;font-size:14px;z-index:9999;transition:top 0.2s}
.skip-link:focus{top:8px}

/* ── FOCUS VISIBLE ── */
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  #a11y-btn,#a11y-panel,nav,#fmenu,#cookie-banner{
    transition:opacity 0.25s ease,transform 0.25s ease,visibility 0s!important}
}

/* ── COOKIE BANNER ── */
#cookie-banner{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);
  z-index:2000;width:calc(100% - 48px);max-width:600px;
  background:var(--bg2);border:1px solid var(--glass-border);
  border-radius:20px;padding:20px 24px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  box-shadow:0 16px 48px rgba(0,0,0,0.55);backdrop-filter:blur(20px);
  transition:transform 0.45s cubic-bezier(0.34,1.56,0.64,1),opacity 0.45s ease,visibility 0s linear 0.45s;
  opacity:0;pointer-events:none;visibility:hidden;
}
#cookie-banner.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:all;visibility:visible;
  transition:transform 0.45s cubic-bezier(0.34,1.56,0.64,1),opacity 0.45s ease,visibility 0s linear 0s}
.cookie-icon{font-size:26px;flex-shrink:0}
.cookie-text{flex:1;min-width:0}
.cookie-text strong{display:block;font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px}
.cookie-text p{font-size:12px;color:var(--text-muted);line-height:1.55;margin:0}
.cookie-text a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.cookie-btn{
  background:var(--accent);color:var(--bg);border:none;cursor:pointer;
  padding:10px 22px;border-radius:10px;font-family:var(--fd);
  font-size:13px;font-weight:700;letter-spacing:0.03em;
  transition:var(--tr);white-space:nowrap;flex-shrink:0;
}
.cookie-btn:hover{transform:translateY(-1px);box-shadow:0 4px 18px rgba(79,255,176,0.35)}

/* ── A11Y STATEMENT MODAL (slot-machine nav) ── */
.as-card{
  max-width:600px;width:100%;
  background:var(--bg2);border:1px solid var(--glass-border);
  border-radius:24px;display:flex;flex-direction:column;
  max-height:90vh;overflow:hidden;
}
/* Header: spacer pushes slot+close to the right */
.as-header{
  display:flex;align-items:center;gap:8px;
  padding:12px 16px;border-bottom:1px solid var(--glass-border);flex-shrink:0;
}
.as-header-spacer{flex:1}
/* Slot wrap — compact, right-aligned */
.as-slot-wrap{position:relative;flex-shrink:0}
.as-slot-btn{
  display:flex;align-items:center;gap:6px;
  background:rgba(79,255,176,0.06);border:1px solid rgba(79,255,176,0.18);
  border-radius:8px;padding:5px 10px;cursor:pointer;color:var(--text);
  transition:background 0.2s,border-color 0.2s;
  white-space:nowrap;
}
.as-slot-btn:hover{background:rgba(79,255,176,0.1);border-color:rgba(79,255,176,0.3)}
.as-slot-btn.as-dd-open{border-color:rgba(79,255,176,0.4);background:rgba(79,255,176,0.08)}
.as-slot-win{width:130px;height:17px;overflow:hidden;position:relative}
#as-slot-cur{
  display:block;font-size:11px;font-weight:600;color:var(--accent);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:17px;
}
.as-slot-arrow{
  flex-shrink:0;font-size:9px;color:var(--text-muted);
  transition:transform 0.25s ease;user-select:none;
}
.as-slot-btn.as-dd-open .as-slot-arrow{transform:rotate(180deg)}
/* Dropdown — right-aligned, compact width */
.as-dropdown{
  position:absolute;top:calc(100% + 6px);right:0;left:auto;
  min-width:170px;max-width:220px;
  z-index:10;
  background:var(--bg3);border:1px solid var(--glass-border);border-radius:12px;
  padding:4px;box-shadow:0 12px 40px rgba(0,0,0,0.5);display:none;
}
.as-dropdown.as-dd-open{display:block}
.as-dropdown a{
  display:block;padding:6px 10px;border-radius:7px;
  font-size:11px;color:var(--text-muted);text-decoration:none;cursor:pointer;
  transition:background 0.15s,color 0.15s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.as-dropdown a:hover{background:rgba(255,255,255,0.05);color:var(--text)}
.as-dropdown a.as-dd-active{color:var(--accent);background:rgba(79,255,176,0.08)}
.as-close-btn{
  flex-shrink:0;background:none;border:none;color:var(--text-muted);
  font-size:20px;cursor:pointer;padding:4px 6px;border-radius:8px;
  transition:color 0.2s;line-height:1;
}
.as-close-btn:hover{color:var(--text)}
/* Body — 1.5× font, generous spacing */
.as-body{flex:1;overflow-y:auto;padding:36px 32px 0}
.as-title{font-family:var(--fd);font-size:24px;font-weight:800;color:var(--text);margin:0 0 10px}
.as-meta{font-size:13px;color:var(--text-muted);margin:0 0 40px;letter-spacing:0.01em}
.as-section{margin-bottom:48px;scroll-margin-top:8px}
.as-section:last-child{margin-bottom:6px}
.as-section h3{
  font-family:var(--fd);font-size:16px;font-weight:700;
  color:var(--text);margin:0 0 18px;padding-bottom:12px;
  border-bottom:1px solid var(--glass-border);
}
.as-section p{font-size:15px;color:var(--text-muted);line-height:1.9;margin:0}
.as-section p+p{margin-top:14px}
.as-section ul{padding:0;margin:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.as-section ul li{
  font-size:13px;color:var(--text-muted);
  background:rgba(255,255,255,0.04);border:1px solid var(--glass-border);
  border-radius:6px;padding:5px 14px;
}
.as-section a{color:var(--accent);text-decoration:none}
.as-section a:hover{text-decoration:underline;text-underline-offset:2px}
/* Slot animations — slower, smooth ease-out */
@keyframes as-anim-up{
  from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}
}
@keyframes as-anim-down{
  from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}
}
.as-anim-up{animation:as-anim-up 0.45s cubic-bezier(0.22,1,0.36,1)}
.as-anim-down{animation:as-anim-down 0.45s cubic-bezier(0.22,1,0.36,1)}
/* Decorative logo footer (provides scroll room + ambience) */
.as-deco{
  height:62vh;min-height:180px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;pointer-events:none;user-select:none;position:relative;
}
.as-deco::before{
  content:'';position:absolute;
  width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(79,255,176,0.07) 0%,transparent 70%);
  animation:as-glow 6s ease-in-out infinite;
}
.as-deco img{
  width:60px;height:auto;position:relative;
  opacity:0.2;filter:grayscale(1) brightness(3);
  animation:as-breathe 6s ease-in-out infinite;
}
.as-deco-lbl{
  position:relative;
  font-family:var(--fd);font-size:10px;font-weight:700;
  letter-spacing:0.35em;text-transform:uppercase;
  color:var(--text-muted);
  animation:as-breathe 6s ease-in-out infinite 0.4s;
}
@keyframes as-breathe{
  0%,100%{transform:translateY(0) scale(1);opacity:0.18}
  45%,55%{transform:translateY(-7px) scale(1.07);opacity:0.38}
}
@keyframes as-glow{
  0%,100%{transform:scale(0.75);opacity:0.3}
  45%,55%{transform:scale(1.25);opacity:1}
}
[dir=rtl] .as-dropdown{right:auto;left:0}