/* ===== JUNITY site chrome — общий хедер + drawer + футер (компоненты <site-header>/<site-footer>)
   Тёмная тема по умолчанию (хаб, base). Светлая — site-header[theme="light"].
   Токены (--hub-*, --grad, --font-display, --trust-orange) берутся со страницы. ===== */

site-header, site-footer{display:contents}

/* ---------- Header (оверлей поверх hero) ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:16px 20px;
  background:linear-gradient(180deg,rgba(20,21,26,.72) 0%,rgba(20,21,26,.30) 55%,transparent 100%)}
/* auto-hide хедера на мобилке: скролл вниз — уезжает, скролл вверх — возвращается.
   Класс body.hdr-hidden ставит JS в <site-header> (components.js). Только <768px — на десктопе хедер всегда виден. */
@media(max-width:767px){
  header{transition:transform .32s cubic-bezier(.22,1,.36,1)}
  body.hdr-hidden header{transform:translateY(-100%)}
}
.logo{height:26px;display:inline}
.head-right{display:flex;align-items:center;gap:12px}
.buy-pill{font-family:var(--font-display);font-weight:700;font-size:14px;color:#0b0b0f;
  background:var(--grad);padding:10px 18px;border-radius:9999px;white-space:nowrap;
  box-shadow:0 4px 18px rgba(0,179,255,.25)}
.menu-btn{display:flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:40px;padding:0 10px;
  background:rgba(255,255,255,.06);border:1px solid var(--hub-border);border-radius:12px;cursor:pointer}
.menu-btn span{display:block;height:2px;background:var(--hub-text);border-radius:2px;transition:transform .25s,opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.drawer{position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(82vw,320px);
  background:var(--hub-surface);border-left:1px solid var(--hub-border);box-shadow:-20px 0 50px -20px rgba(0,0,0,.6);
  display:flex;flex-direction:column;gap:4px;padding:84px 18px 24px;
  transform:translateX(100%);transition:transform .3s ease}
.drawer.open{transform:translateX(0)}
/* «Где купить» в меню — primary CTA внизу drawer; на мобиле заменяет пилюлю в шапке */
.drawer-buy{margin:14px 0 0;font-family:var(--font-display);font-weight:700;font-size:16px;color:#0b0b0f;
  background:var(--grad);padding:14px 18px;border-radius:14px;text-align:center;white-space:nowrap;
  box-shadow:0 4px 18px rgba(0,179,255,.25)}
.drawer-buy:hover,.drawer-buy:focus-visible{filter:brightness(1.05)}
@media(max-width:767px){.buy-pill{display:none}}
@media(min-width:768px){.drawer-buy{display:none}}
.drawer a{font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--hub-text);padding:13px 14px;
  border-radius:10px;transition:background .2s,color .2s}
.drawer a:hover,.drawer a:focus-visible{background:rgba(255,255,255,.06)}
.drawer a.on{color:var(--trust-orange,#FF6A00)}
.drawer-close{position:absolute;top:20px;right:16px;width:38px;height:38px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid var(--hub-border);color:var(--hub-text);
  cursor:pointer;display:grid;place-items:center;transition:background .2s}
.drawer-close:hover{background:rgba(255,255,255,.12)}
.drawer-bk{position:fixed;inset:0;z-index:75;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .3s}
.drawer-bk.open{opacity:1;pointer-events:auto}

/* ---------- Светлая тема (base-b-light) ---------- */
site-header[theme="light"] header{background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.62) 62%,transparent 100%);backdrop-filter:blur(6px)}
site-header[theme="light"] .menu-btn{background:rgba(15,23,42,.05);border-color:#E5E7EB}
site-header[theme="light"] .menu-btn span{background:#16305C}
site-header[theme="light"] .drawer{background:#fff;border-left-color:#E5E7EB;box-shadow:-20px 0 50px -20px rgba(16,48,90,.28)}
site-header[theme="light"] .drawer a{color:#6B7280}
site-header[theme="light"] .drawer a:hover,site-header[theme="light"] .drawer a:focus-visible{color:#16305C;background:#F9FAFB}
site-header[theme="light"] .drawer a.on{color:#FF6A00}
site-header[theme="light"] .drawer-close{background:#F9FAFB;border-color:#E5E7EB;color:#16305C}
site-header[theme="light"] .drawer-close:hover{background:#eef0f3}
site-header[theme="light"] .drawer-bk{background:rgba(15,23,42,.45)}

/* ---------- Footer (тёмный на всех страницах) ---------- */
footer{border-top:1px solid var(--hub-border);background:#101116;padding:48px 20px 24px;color:var(--hub-text-2);font-size:14px}
.f-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:30px}
.f-col h5{font-family:var(--font-display);font-weight:700;color:var(--hub-text);font-size:14px;margin-bottom:14px}
.f-col a,.f-col p{display:block;color:var(--hub-text-2);margin-bottom:9px;line-height:1.5;text-decoration:none}
.f-col a:hover{color:var(--hub-text)}
.f-col a.on{color:var(--trust-orange,#FF6A00)}
.f-logo{height:24px;margin-bottom:14px}
.f-slogan{max-width:280px;margin-bottom:14px}
.f-mkt{display:flex;gap:10px}
.f-mkt span{border:1px solid var(--hub-border);border-radius:9px;padding:7px 13px;font-size:13px;color:var(--hub-text)}
.f-bottom{max-width:1100px;margin:36px auto 0;padding-top:22px;border-top:1px solid var(--hub-border);
  display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between;font-size:12.5px;line-height:1.7}
.f-bottom a{color:var(--hub-text-2);text-decoration:none} .f-bottom a:hover{color:var(--hub-text)}

@media(min-width:768px){
  header{padding:16px 32px}
  .f-grid{grid-template-columns:1fr 1fr;gap:32px 24px}
}
@media(min-width:1024px){
  .f-grid{grid-template-columns:2fr 1fr 1fr;gap:30px}
}
@media(min-width:1280px){
  header{padding:18px 40px}
}

/* ---------- <trust-pills> — ряд trust-плашек первого фолда ---------- */
/* Токен --tp-mt: верхний отступ ряда. Единый стандарт всех страниц = дефолт 0 (как на главной). */
trust-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:560px;margin:var(--tp-mt,0) auto 0}
trust-pills .tp-pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--hub-text-2);
  background:rgba(255,255,255,.05);border:1px solid var(--hub-border);border-radius:9999px;padding:7px 14px;white-space:nowrap}
trust-pills .tp-pill b{color:var(--hub-text);font-weight:700}
trust-pills .tp-dot{width:7px;height:7px;border-radius:50%;flex:none}
trust-pills .tp-star{width:13px;height:13px;fill:#FFC000;flex:none;margin:0 1px}
@media(min-width:768px){trust-pills{max-width:none;flex-wrap:nowrap}}

/* ---------- <hero-cue> — подпись + bob-стрелка у низа первого экрана ---------- */
/* Отступы-токены: --cue-gap (подпись↔стрелка), --cue-mb (снизу), --cue-push (прижатие к низу фолда). */
hero-cue{display:block;margin-top:var(--cue-push,0)}
hero-cue .scroll-cue{display:block;color:var(--hub-text-2);font-size:13px;letter-spacing:.08em;cursor:pointer;
  transition:color .2s;text-decoration:none;padding-bottom:var(--cue-mb,0)}
hero-cue .scroll-cue:hover{color:var(--hub-text)}
hero-cue .cue-lbl{display:block;margin-bottom:var(--cue-gap,0)}
hero-cue .cue-arrow{display:block;font-size:20px;animation:bob 1.6s infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
/* gradient-вариант (base.html): жирный градиент, прижат к низу (--cue-push:auto). Клип-по-тексту
   даём КАЖДОМУ дочернему (подпись + стрелка) отдельно — родитель .scroll-cue НЕ клипует, иначе
   он рисует статичную копию стрелки и та ДВОИТСЯ с движущейся. Двигается только .cue-arrow. */
hero-cue[variant="gradient"]{--cue-push:auto}
hero-cue[variant="gradient"] .scroll-cue{font-size:15px;font-weight:800;letter-spacing:.02em;transition:filter .2s}
hero-cue[variant="gradient"] .scroll-cue:hover{filter:brightness(1.15);color:var(--hub-text-2)}
hero-cue[variant="gradient"] .cue-lbl,hero-cue[variant="gradient"] .cue-arrow{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
hero-cue[variant="gradient"] .cue-lbl{font-size:inherit;animation:none}
@media(prefers-reduced-motion:reduce){hero-cue .cue-arrow{animation:none}}