/* ============================================================
   AnyGems — единый «хром» сайта: шапка + мобильное меню + подвал.
   Дизайн-модуль, вынесенный из главной (index) как заготовка для
   всех текущих и будущих страниц. Подключается через
   /includes/head.html; разметка — /includes/header.html и
   /includes/footer.html.

   ВАЖНО: это зеркало inline-стилей шапки/подвала в главной
   (index2_clean.html). Меняешь хром там — синхронизируй здесь.
   Всё изолировано: токены новые (не пересекаются со старыми
   --accent/--bg-primary страниц), правила скоуплены под
   .header/.mmenu/.footer и не влияют на тело старых страниц.
   ============================================================ */

/* ---- Токены новой дизайн-системы (аддитивно) ---- */
:root{
  --bg:#05070d;
  --bg-2:#080c15;
  --ink:#f1f5fc;
  --sub:#a8b4ca;
  --dim:#8391ab;
  --line:rgba(151,173,220,.14);
  --line-2:rgba(151,173,220,.3);
  --glass:rgba(151,173,220,.06);
  --glass-2:rgba(151,173,220,.11);
  --cyan:#45e3ff;
  --violet:#8a6bff;
  --mag:#e05df1;
  --gem:linear-gradient(112deg,#45e3ff,#8a6bff 55%,#e05df1);
  --gem-soft:linear-gradient(112deg,rgba(69,227,255,.18),rgba(138,107,255,.2) 60%,rgba(224,93,241,.16));
  --disp:'Unbounded',system-ui,sans-serif;
  --body:'Onest',system-ui,-apple-system,sans-serif;
  --hH:68px;
}

/* ---- Утилиты хрома ---- */
.sprite{display:none}
.wrap{max-width:1280px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.brand{display:flex;align-items:center;gap:11px;font:600 16px var(--disp);letter-spacing:.01em;flex:none;color:var(--ink)}
.brand img{width:38px;height:38px}

/* ---- Скоуп-сброс: хром выглядит одинаково поверх любой страницы ---- */
.header a,.footer a,.mmenu a{color:inherit;text-decoration:none}
.header img,.footer img,.mmenu img{display:block;max-width:100%}
.footer ul,.mmenu ul{list-style:none;margin:0;padding:0}
.footer h3{margin:0}
.header button,.mmenu button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ---- Кнопки (мобильное меню) ---- */
.mmenu .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:14px;font:700 15px var(--body);border:1px solid transparent;cursor:pointer;transition:transform .2s,box-shadow .25s,background-color .2s,border-color .2s}
.mmenu .btn:active{transform:scale(.97)}
.mmenu .btn-primary{background:var(--cyan);color:#071019;box-shadow:0 10px 34px -10px rgba(69,227,255,.5)}
.mmenu .btn-primary:hover{background:#5fe8ff;box-shadow:0 14px 44px -10px rgba(69,227,255,.65);transform:translateY(-1px)}
.mmenu .btn-ghost{background:var(--glass);border-color:var(--line);color:var(--ink)}
.mmenu .btn-ghost:hover{background:var(--glass-2);border-color:var(--line-2)}
.mmenu .link{color:var(--cyan);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(69,227,255,.4)}
.mmenu .link:hover{text-decoration-color:var(--cyan)}

/* ============ ШАПКА ============ */
.header{position:sticky;top:0;z-index:100;background:rgba(5,8,14,.6);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s}
.header.is-scrolled{background:rgba(5,8,14,.85);border-bottom-color:var(--line)}
.h-in{display:flex;align-items:center;gap:18px;height:var(--hH)}
.h-nav{display:flex;gap:2px;margin-left:10px}
.h-nav a{padding:10px 14px;border-radius:10px;font:500 14.5px var(--body);color:var(--sub);transition:color .2s,background-color .2s}
.h-nav a:hover{color:var(--ink);background:var(--glass)}
.h-actions{display:flex;align-items:center;gap:9px;margin-left:auto}
.icon-btn{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line);background:var(--glass);color:var(--sub);transition:color .2s,border-color .2s,background-color .2s;cursor:pointer}
.icon-btn:hover{color:var(--ink);border-color:var(--line-2);background:var(--glass-2)}
.btn-cab{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:var(--glass);font:600 14px var(--body);color:var(--ink);transition:border-color .2s,background-color .2s}
.btn-cab:hover{border-color:var(--line-2);background:var(--glass-2)}
.nav-burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--glass);color:var(--ink);place-items:center;cursor:pointer}
.nav-burger .i-close{display:none}
.nav-burger[aria-expanded="true"] .i-open{display:none}
.nav-burger[aria-expanded="true"] .i-close{display:block}
@media (max-width:1079px){
  .h-nav{display:none}
  .nav-burger{display:grid}
}
@media (max-width:759px){
  :root{--hH:60px}
  .h-in{gap:12px}
  .h-actions{gap:8px}
  .btn-cab span{display:none}
  .btn-cab{width:44px;padding:0;justify-content:center}
}
@media (max-width:359px){
  .h-in{gap:10px}
  .h-actions{gap:6px}
}

/* ============ МОБИЛЬНОЕ МЕНЮ ============ */
.mmenu{position:fixed;left:0;right:0;top:var(--hH);bottom:0;z-index:90;background:rgba(5,8,15,.94);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);padding:18px clamp(16px,4vw,32px) 34px;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .25s,transform .25s,visibility .25s}
.mmenu.open{opacity:1;visibility:visible;transform:none}
html.menu-open{overflow:hidden}
.mm-nav a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 6px;font:600 19px var(--body);border-bottom:1px solid var(--line);color:var(--ink)}
.mm-nav a .ic{color:var(--dim)}
.mm-cta{display:grid;gap:10px;margin-top:22px}
.mm-note{margin-top:20px;font:400 13.5px/1.6 var(--body);color:var(--dim)}

/* ============ ПОДВАЛ ============ */
.footer{margin-top:clamp(72px,11vw,120px);border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(7,10,18,0),rgba(4,6,11,.92))}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.15fr;gap:38px;padding:clamp(40px,6vw,60px) 0 42px}
.f-brand .brand{font-size:17px}
.f-brand p{margin:15px 0 18px;color:var(--sub);font:400 14px/1.65 var(--body);max-width:300px}
.f-col h3{font:600 12px var(--body);letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin:5px 0 16px}
.f-col ul{display:grid;gap:6px;justify-items:start}
.f-col a{display:inline-block;padding:3px 0;color:var(--sub);font:400 14.5px var(--body);transition:color .2s}
.f-col a:hover{color:var(--ink)}
.f-tg{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:12px;background:var(--glass);font:600 13.5px var(--body);color:var(--sub);transition:color .2s,border-color .2s}
.f-tg:hover{color:var(--ink);border-color:rgba(120,210,255,.45)}
.f-tg .ic{width:16px;height:16px;color:#8fe9ff}
.f-bottom{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;border-top:1px solid var(--line);padding:20px 0 28px;color:var(--dim);font:400 13px var(--body)}
.f-bottom a{color:var(--dim);transition:color .2s}
.f-bottom a:hover{color:var(--sub)}
.f-legal{display:flex;flex-wrap:wrap;gap:6px 22px}
@media (max-width:919px){.f-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:759px){.f-col ul{gap:8px}.f-col a{padding:9px 0}.f-bottom{gap:14px 26px}.f-bottom a{padding:5px 0}}
@media (max-width:519px){.f-grid{grid-template-columns:1fr;gap:26px}.f-col ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}}