/* Страницы меню в стиле главной: стеклянная шапка-плашка, арт по смыслу страницы фоном,
   заголовок с градиентом, стеклянные карточки и кнопки-капсулы. Подробности — docs/MENU_PAGES.md */
@font-face { font-family: Manrope; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/manrope-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Manrope; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.site-shell--glass { --glass-ease: cubic-bezier(.22, 1, .36, 1); --glass-ring: #7dd3fc; --glass-line: #ffffff1f; --glass-muted: #ffffffa6; -webkit-font-smoothing: antialiased; }

/* Шапка — та же стеклянная плашка, что на главной (landing.css), но в потоке страницы: содержимое начинается под ней */
.site-shell--glass .site-header { width: min(1200px, calc(100% - 32px)); min-height: 0; margin: calc(16px + env(safe-area-inset-top, 0px)) auto 0; gap: 24px; padding: 8px 8px 8px 24px; border-radius: 9999px; background: #00000038; box-shadow: 0 0 0 1px #ffffff26; backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); font-family: Manrope, system-ui, sans-serif; }
/* Опущен на 1 px: логотип из заглавных визуально выше имени со строчными буквами */
.site-shell--glass .site-header .site-brand { position: relative; top: 1px; font-size: 14px; line-height: 20px; }
.site-shell--glass .site-header-controls { display: flex; gap: 24px; align-items: center; }
.site-shell--glass .site-header .account-nav__button, .site-shell--glass .site-header .profile-menu summary { padding: 8px 16px; border: 0; border-radius: 9999px; background: #1e3a6e; box-shadow: 0 0 0 1px #7dd3fc40; color: #fff; font: 600 14px/20px Manrope, system-ui, sans-serif; letter-spacing: 0; transition: background-color .6s var(--glass-ease), transform .3s var(--glass-ease); }
.site-shell--glass .site-header .account-nav__button:hover, .site-shell--glass .site-header .profile-menu summary:hover, .site-shell--glass .site-header .profile-menu[open] summary { border-color: transparent; background: #28498a; color: #fff; }
.site-shell--glass .site-header .profile-menu { color: #fff; font: 600 14px/20px Manrope, system-ui, sans-serif; }
.site-shell--glass .site-header .profile-menu summary { max-width: min(220px, 50vw); }
@media (min-width: 761px) { .site-shell--glass .site-header .profile-menu summary { max-width: calc(100vw - 320px); } }
.site-shell--glass .site-header .profile-menu__panel { top: calc(100% + 12px); border-color: #ffffff26; border-radius: 16px; font: 14px/1.5 Manrope, system-ui, sans-serif; }
@media (max-width: 760px) { .site-shell--glass .site-header { padding-left: 16px; } }

/* Арт под затемнением: сверху виден, к содержимому уходит в тёмно-синий. Фон страницы — на html, фон body перекрыл бы арт */
html:has(.glass-backdrop) { background: #020617; }
.site-shell:has(.glass-backdrop) { background: transparent; }
.glass-backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.glass-backdrop picture { display: contents; }
.glass-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; animation: glass-fade 1.2s var(--glass-ease, ease) both; }
.glass-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0206171a 0, #02061740 36%, #020617b3 68%, #020617 100%); }

/* Заголовок страницы: подпись с линией, крупный заголовок с градиентом, короткий подзаголовок */
/* Тень отделяет мелкий текст от яркого арта; у заголовка с градиентом её нет — она легла бы поверх букв */
.glass-intro { padding: 48px 0 32px; color: #fff; font-family: Manrope, system-ui, sans-serif; text-shadow: 0 1px 12px #020617, 0 0 2px #020617; animation: glass-rise .8s var(--glass-ease) both; }
.glass-intro .glass-title, .glass-intro button, .glass-intro a { text-shadow: none; }
.glass-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 16px; color: #ffffffb3; font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: .02em; }
.glass-eyebrow::before { content: ""; width: 32px; height: 1px; background: linear-gradient(90deg, #0ea5e9, #8b5cf6); }
.glass-title { margin: 0; font-size: 48px; line-height: 1.05; font-weight: 700; letter-spacing: -.02em; background: linear-gradient(90deg, #fff, #c2c6cf); -webkit-background-clip: text; background-clip: text; color: transparent; text-wrap: balance; }
.glass-lead { max-width: 600px; margin: 16px 0 0; color: #ffffffcc; font-size: 17px; line-height: 28px; text-wrap: pretty; }

/* Стеклянная карточка, как шаги на /dream/ */
.glass-card { padding: 24px; border: 1px solid #ffffff1a; border-radius: 24px; background: #0b1220b8; box-shadow: 0 24px 64px -32px #000; backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }

/* Кнопки: белая полупрозрачная капсула — главное действие, стеклянная — второстепенное */
.glass-button, .glass-button--ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 22px; border: 0; border-radius: 9999px; background: #ffffffd9; color: #000; font: 600 15px/22px Manrope, system-ui, sans-serif; text-decoration: none; white-space: nowrap; cursor: pointer; box-shadow: 0 16px 48px -16px #000000b3; transition: transform .5s var(--glass-ease), background-color .3s var(--glass-ease), border-color .3s var(--glass-ease), opacity .3s; }
.glass-button:hover { background: #fff; transform: translateY(-1px); }
.glass-button:active, .glass-button--ghost:active { transform: scale(.98); }
.glass-button--ghost { border: 1px solid #ffffff2e; background: #ffffff12; color: #fff; box-shadow: none; }
.glass-button--ghost:hover { border-color: #ffffff4d; background: #ffffff1f; }
.glass-button:focus-visible, .glass-button--ghost:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.glass-button:disabled, .glass-button--ghost:disabled { opacity: .5; cursor: default; transform: none; }
.glass-button svg, .glass-button--ghost svg { width: 16px; height: 16px; flex: none; }

/* Подвал: ссылки на документы мельче и тише содержимого */
.site-shell--glass .legal-nav { position: relative; font-family: Manrope, system-ui, sans-serif; }
.site-shell--glass .legal-nav a { color: #ffffff80; }
.site-shell--glass .legal-nav a:hover { color: #fff; }

@keyframes glass-fade { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes glass-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
  .glass-intro { padding: 32px 0 24px; }
  .glass-title { font-size: 36px; line-height: 1.1; }
  .glass-lead { font-size: 16px; line-height: 24px; }
  .glass-card { padding: 20px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .glass-backdrop img, .glass-intro { animation: none; }
  .glass-button, .glass-button--ghost { transition: none; }
}