/* ==========================================================================
   BULLDROP — Shared design system
   Tokens, reset, layout primitives, header, footer, auth modal, buttons.
   Loaded by every page before its own <Page>.styles.css
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  /* Surface ramp — near-black to elevated card */
  --bg-root: #0b0d13;
  --bg-page: #0e1017;
  --bg-surface: #14161f;
  --bg-surface-2: #191c26;
  --bg-elevated: #1e2130;
  --bg-inset: #0f1118;

  /* Brand — red from logo.svg, gold for value/CTA */
  --brand: #ff595f;
  --brand-hover: #ff7379;
  --brand-dim: rgba(255, 89, 95, 0.14);
  --gold: #ffb02e;
  --gold-hover: #ffc255;
  --gold-dim: rgba(255, 176, 46, 0.14);
  --violet: #8b5cf6;
  --violet-dim: rgba(139, 92, 246, 0.16);
  --green: #22c55e;
  --cyan: #22d3ee;

  /* Text */
  --text: #f4f5f8;
  --text-soft: #a9afc0;
  --text-mute: #6d7488;
  --text-dim: #4b5164;

  /* Lines & glass */
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.12);
  --glass: rgba(255, 255, 255, 0.04);
  --glass-2: rgba(255, 255, 255, 0.06);

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 26px;
  --r-pill: 999px;

  /* Shadows */
  --sh-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --sh-md: 0 8px 24px rgba(0, 0, 0, 0.38);
  --sh-lg: 0 18px 48px rgba(0, 0, 0, 0.5);
  --sh-brand: 0 10px 30px rgba(255, 89, 95, 0.28);
  --sh-gold: 0 10px 30px rgba(255, 176, 46, 0.26);

  /* Layout */
  --shell: 1600px;
  --gutter: 24px;
  --header-h: 72px;
  --rail-w: 236px;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.16s;
  --t: 0.24s;
  --t-slow: 0.4s;

  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t) var(--ease);
}

img, svg, video {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

input {
  font: inherit;
  color: inherit;
}

/* Visible focus for keyboard users only */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Respect reduced-motion across the whole system */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- Utilities ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Long-form pages (legal, FAQ) read better in a narrower centered measure */
.shell--narrow { max-width: 980px; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: var(--r-md);
  background: var(--gold);
  color: #1a1205;
  font-weight: 700;
  transition: top var(--t) var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
    background-color var(--t) var(--ease), color var(--t) var(--ease),
    border-color var(--t) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* Primary CTA — white surface, black label (see reference design) */
.btn--gold {
  background: #ffffff;
  color: #14161f;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.btn--gold:hover {
  background: #f2f3f7;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}

.btn--brand {
  background: linear-gradient(180deg, var(--brand-hover), var(--brand));
  color: #fff;
  box-shadow: var(--sh-brand);
}
.btn--brand:hover { box-shadow: 0 14px 36px rgba(255, 89, 95, 0.42); }

.btn--ghost {
  background: var(--glass);
  color: var(--text);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px);
}
.btn--ghost:hover {
  background: var(--glass-2);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn--lg { padding: 15px 30px; font-size: 15px; }
.btn--sm { padding: 9px 16px; font-size: 13px; }
.btn--block { width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(14, 16, 23, 0.86);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

.header-bar {
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--header-h);
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity var(--t) var(--ease);
}
.logo:hover { opacity: 0.82; }
.logo img { height: 30px; width: auto; }

/* Primary nav */
.main-nav { flex: 1; min-width: 0; }
.main-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--r-md);
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 600;
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease);
}
.nav-link:hover {
  color: var(--text);
  background: var(--glass);
}
/* Monochrome line icon; inherits the link's colour on hover/active */
.nav-link__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.75;
  transition: opacity var(--t) var(--ease);
}
.nav-link:hover .nav-link__icon,
.nav-link[aria-current="page"] .nav-link__icon { opacity: 1; }
.nav-link[aria-current="page"] { color: var(--text); }
.nav-link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--brand);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Language switcher */
.lang {
  position: relative;
  flex-shrink: 0;
}
.lang__toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--glass);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 700;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.lang__toggle:hover { background: var(--glass-2); color: var(--text); }
.lang__flag { width: 18px; height: 13px; border-radius: 2px; object-fit: cover; }
.lang__chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--t) var(--ease);
}
.lang__toggle[aria-expanded="true"] .lang__chevron { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 148px;
  padding: 6px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--bg-elevated);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease),
    visibility var(--t) var(--ease);
}
.lang__toggle[aria-expanded="true"] + .lang__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.lang__option:hover { background: var(--glass-2); color: var(--text); }
.lang__option[aria-selected="true"] { color: var(--gold); }

/* ---------- Nav dropdown (Games) ---------- */
.nav-item { position: relative; }

.nav-link__caret {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform var(--t) var(--ease);
}
.nav-item:hover .nav-link__caret,
.nav-item:focus-within .nav-link__caret { transform: rotate(180deg); }

.nav-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  min-width: 208px;
  padding: 6px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  background: var(--bg-elevated);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease),
    visibility var(--t) var(--ease);
}
/* Hover on pointer devices, focus-within for keyboard users */
.nav-item:hover .nav-menu,
.nav-item:focus-within .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-menu__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  color: var(--text-soft);
  font-size: 13.5px;
  font-weight: 600;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.nav-menu__link:hover { background: var(--glass-2); color: var(--text); }
.nav-menu__link[aria-current="page"] { color: var(--gold); background: var(--glass); }
.nav-menu__icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  opacity: 0.75;
}

/* Drawer-only auth block; revealed in the mobile media query below */
.nav-auth { display: none; }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--glass);
}
.nav-toggle svg { width: 20px; height: 20px; }

/* ---------- Mascot band (sits above the footer on every page) ---------- */
/* min-height reserves room so the absolutely-positioned figures can never
   climb into the page content above them */
.mascots {
  position: relative;
  display: grid;
  place-items: center;
  align-content: end;
  min-height: clamp(200px, 22vw, 300px);
  padding: 40px 0 10px;
  margin-top: 40px;
  overflow: hidden;
}
.mascots__logo { width: 190px; height: auto; opacity: 0.95; }
.mascots__note {
  margin-top: 10px;
  color: var(--text-dim);
  font-size: 11.5px;
  text-align: center;
}
.mascots__figure {
  position: absolute;
  bottom: 0;
  width: clamp(160px, 20vw, 300px);
  height: auto;
  pointer-events: none;
  user-select: none;
}
.mascots__figure--left { left: 2%; }
.mascots__figure--right { right: 2%; }

@media (max-width: 1100px) {
  .mascots__figure { width: 150px; opacity: 0.5; }
}
@media (max-width: 760px) {
  .mascots__figure { display: none; }
  .mascots {
    min-height: 0;
    padding-top: 26px;
    margin-top: 24px;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-surface);
}
/* The mascot band provides the gap when present */
.mascots + .site-footer { margin-top: 0; }
.site-footer:not(.mascots + .site-footer) { margin-top: 56px; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr) 1.1fr;
  gap: 40px;
  padding: 48px 0 36px;
}

.footer-brand__logo { height: 28px; width: auto; margin-bottom: 16px; }
.footer-brand__text {
  color: var(--text-mute);
  font-size: 13.5px;
  line-height: 1.7;
  max-width: 30ch;
}

.footer-col__title {
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.footer-col__list { display: grid; gap: 11px; }
/* These are <button> elements (they open the auth modal), so the anchor
   defaults have to be restated explicitly. */
.footer-col__list a,
.footer-col__list button {
  padding: 0;
  color: var(--text-mute);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  transition: color var(--t) var(--ease);
}
.footer-col__list a:hover,
.footer-col__list button:hover { color: var(--brand); }

.footer-contact {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--text-mute);
  font-size: 13.5px;
}
.footer-contact svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; }
.footer-contact:hover { color: var(--brand); }

.footer-socials {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.footer-socials a {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--glass);
  transition: transform var(--t) var(--ease), background-color var(--t) var(--ease),
    border-color var(--t) var(--ease);
}
.footer-socials a:hover {
  transform: translateY(-2px);
  background: var(--brand-dim);
  border-color: rgba(255, 89, 95, 0.4);
}
.footer-socials svg { width: 16px; height: 16px; }

/* Trust rating block */
.footer-trust {
  padding: 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-surface-2);
}
.footer-trust__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
}
.footer-trust__head svg { width: 17px; height: 17px; }
.footer-trust__stars { display: flex; gap: 3px; margin-bottom: 10px; }
.footer-trust__stars span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  background: #00b67a;
}
.footer-trust__stars svg { width: 14px; height: 14px; }
.footer-trust__note {
  color: var(--text-mute);
  font-size: 12px;
  line-height: 1.6;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 20px 0 28px;
  border-top: 1px solid var(--line);
}
.footer-bottom__copy { color: var(--text-dim); font-size: 12.5px; }
.footer-pay {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-pay span {
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  transition: color var(--t) var(--ease);
}
.footer-pay span:hover { color: var(--text-mute); }

/* ---------- Auth modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t) var(--ease), visibility var(--t) var(--ease);
}
.modal.is-open { opacity: 1; visibility: visible; }

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 10, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal__dialog {
  position: relative;
  display: grid;
  grid-template-columns: 0.82fr 1fr;
  width: 100%;
  max-width: 784px;
  max-height: calc(100vh - 40px);
  border-radius: var(--r-2xl);
  border: 1px solid var(--line-strong);
  background: var(--bg-surface);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  transform: translateY(12px) scale(0.98);
  transition: transform var(--t-slow) var(--ease-out);
}
.modal.is-open .modal__dialog { transform: translateY(0) scale(1); }

/* Mascot panel — left side of the dialog */
.modal__art {
  position: relative;
  background: radial-gradient(120% 90% at 50% 10%, #2a1d3f 0%, #120e1c 60%, #0c0a12 100%);
  overflow: hidden;
}
.modal__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.modal__body {
  padding: 34px 32px 26px;
  overflow-y: auto;
}
.modal__title {
  margin-bottom: 24px;
  font-size: 27px;
  line-height: 1.22;
  letter-spacing: -0.02em;
}

.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-soft);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease),
    transform var(--t) var(--ease);
}
.modal__close:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text);
  transform: rotate(90deg);
}
.modal__close svg { width: 16px; height: 16px; }

/* Provider grid — 2 columns, brand-coloured */
.auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 22px;
}

.auth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 14px;
  border-radius: var(--r-md);
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  transition: transform var(--t) var(--ease), filter var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}
.auth-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: var(--sh-md);
}
.auth-btn svg,
.auth-btn img { width: 20px; height: 20px; flex-shrink: 0; }

.auth-btn--vk { background: #0077ff; }
.auth-btn--google { background: #fff; color: #1f1f1f; }
.auth-btn--steam { background: #1b2838; }
.auth-btn--telegram { background: #29a9eb; }
.auth-btn--yandex { background: #fc3f1d; }
.auth-btn--email { background: var(--bg-elevated); border: 1px solid var(--line-strong); }

/* Promocode row */
.promo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-inset);
  margin-bottom: 22px;
}
.promo-row__field {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
  padding-left: 10px;
}
.promo-row__field svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--text-dim); }
.promo-row input {
  width: 100%;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  background: none;
  font-size: 14px;
}
.promo-row input::placeholder { color: var(--text-dim); }
.promo-row input:focus { outline: none; }
.promo-row__btn {
  flex-shrink: 0;
  padding: 11px 18px;
  border-radius: var(--r-sm);
  background: var(--glass-2);
  color: var(--text-mute);
  font-size: 13.5px;
  font-weight: 700;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.promo-row__btn:hover { background: #ffffff; color: #14161f; }

.modal__legal {
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
  line-height: 1.6;
}
.modal__legal a { color: var(--text-mute); text-decoration: underline; }
.modal__legal a:hover { color: var(--brand); }

body.modal-open { overflow: hidden; }

/* ---------- Section heading (shared by content pages) ---------- */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}
.section-head__title { font-size: 21px; }
.section-head__link {
  color: var(--text-mute);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}
.section-head__link:hover { color: var(--brand); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  padding: 40px 0 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}
.page-hero__title {
  font-size: clamp(26px, 4vw, 38px);
  margin-bottom: 12px;
}
.page-hero__lead {
  max-width: 68ch;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.7;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--text-dim);
}
.breadcrumbs a { color: var(--text-mute); }
.breadcrumbs a:hover { color: var(--brand); }

/* ---------- Clickable case cards ----------
   The entire card opens the auth modal, not just the price button.
   The class is added by JS, so without it the card keeps its old
   static behaviour instead of looking clickable but doing nothing. */
.case-card--clickable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* The inner button no longer needs its own pointer semantics,
   but keep it explicit so it stays a button when JS fails. */
.case-card--clickable .case-card__price { cursor: pointer; }

/* The card is role="button", so it needs a visible focus ring. */
.case-card--clickable:focus-visible {
  outline: 2px solid var(--gold, #ffb02e);
  outline-offset: 3px;
}

/* Hovering anywhere on the card should preview the price CTA,
   otherwise the card reads as clickable but the target looks inert. */
.case-card--clickable:hover .case-card__price {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-trust { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  :root { --gutter: 18px; }

  .nav-toggle { display: flex; }

  /* Slide-down mobile nav */
  .main-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex: none;
    padding: 14px 18px 20px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-lg);
    transform: translateY(-120%);
    transition: transform var(--t-slow) var(--ease-out);
  }
  .main-nav.is-open { transform: translateY(0); }
  .main-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-link { padding: 13px 14px; font-size: 15px; }
  .nav-link[aria-current="page"]::after { display: none; }
  .nav-link[aria-current="page"] { background: var(--glass); }

  /* Dropdown flattens into an always-visible indented sub-list */
  .nav-menu {
    position: static;
    min-width: 0;
    padding: 2px 0 6px 30px;
    border: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-link__caret { display: none; }
  .nav-menu__link { padding: 11px 12px; font-size: 14px; }

  /* Auth entry inside the drawer — the only login path once the
     header ghost button is hidden on narrow screens */
  .nav-auth {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 720px) {
  .modal__dialog { grid-template-columns: 1fr; max-width: 460px; }
  .modal__art { display: none; }
  .modal__body { padding: 46px 22px 22px; }
  .modal__title { font-size: 23px; }
  .auth-grid { grid-template-columns: 1fr; gap: 10px; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; padding: 36px 0 28px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  /* Keep labels — an unlabelled pill reads as a broken button.
     Tighten instead so both CTAs still fit beside the burger. */
  .header-actions { gap: 6px; }
  .header-actions .btn { padding: 10px 12px; font-size: 13px; }
  .lang__toggle { padding: 10px 9px; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  /* Registration is the primary CTA; the burger menu still exposes login */
  .header-actions .btn--ghost { display: none; }
}