/* Шрифты сайта (собрано blog/build-theme.mjs) */
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/montserrat-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/montserrat-latin-400-normal.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;}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/montserrat-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/montserrat-latin-500-normal.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;}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/montserrat-cyrillic-600-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Montserrat';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/montserrat-latin-600-normal.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;}
@font-face{font-family:'Playfair Display';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/playfair-display-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Playfair Display';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/playfair-display-latin-400-normal.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;}
@font-face{font-family:'Playfair Display';font-style:italic;font-display:swap;font-weight:400;src:url(fonts/playfair-display-cyrillic-400-italic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Playfair Display';font-style:italic;font-display:swap;font-weight:400;src:url(fonts/playfair-display-latin-400-italic.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;}
@font-face{font-family:'Playfair Display';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/playfair-display-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Playfair Display';font-style:normal;font-display:swap;font-weight:500;src:url(fonts/playfair-display-latin-500-normal.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;}
@font-face{font-family:'Playfair Display';font-style:italic;font-display:swap;font-weight:500;src:url(fonts/playfair-display-cyrillic-500-italic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Playfair Display';font-style:italic;font-display:swap;font-weight:500;src:url(fonts/playfair-display-latin-500-italic.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;}

/* ===== apps/web/src/home.css ===== */
/* Главная сайта Selidar (/ru, /en) по макету владельца (4.png): ночное небо, золотой закат, стеклянные панели,
   между блоками — светящиеся рельефные линии, а не глухие границы. */
.h {
  --gold: #f2c77f;
  --cream: #f7e7cf;
  --txt: #eef1f6;
  --mut: #bcc4d3;
  --edge: rgba(255, 238, 214, 0.3);
  --serif: 'Playfair Display', Georgia, serif;
  --sans: Montserrat, system-ui, sans-serif;
  min-height: 100%;
  background:
    radial-gradient(900px 500px at 85% 22%, rgba(120, 90, 160, 0.16), transparent 70%),
    radial-gradient(800px 600px at 10% 55%, rgba(70, 100, 170, 0.14), transparent 70%),
    radial-gradient(1000px 500px at 70% 78%, rgba(110, 90, 150, 0.14), transparent 70%),
    linear-gradient(180deg, #121b33 0%, #141e38 50%, #111a31 100%);
  color: var(--txt);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.h a { color: inherit; text-decoration: none; }
:where(.h) :is(h1, h2, h3) { margin: 0; }
.h h1, .h h2, .h h3 { font-family: var(--serif); font-weight: 400; color: var(--cream); line-height: 1.22; letter-spacing: -0.01em; padding-bottom: 0.06em; }
.h h2 { font-size: clamp(30px, 2.6vw, 40px); }
.h h3 { font-size: clamp(24px, 2vw, 31px); }
:where(.h) p { margin: 0; }
/* Колонка контента: постоянный отступ от краёв; на широких экранах блоки растягиваются, а не оставляют пустые поля */
.h { --pad: clamp(36px, 3vw, 64px); --gap-y: clamp(44px, 4.4vw, 76px); }
.h-shell { width: calc(100% - 2 * var(--pad)); margin-inline: auto; }
.h button { font: inherit; color: inherit; }

/* Стекло — общий материал панелей */
.h-panel, .h-plan, .h-rev, .h-chip, .h-card {
  background: linear-gradient(180deg, rgba(48, 60, 96, 0.42), rgba(18, 26, 48, 0.5));
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 12px 32px rgba(3, 6, 16, 0.35);
  backdrop-filter: blur(10px);
}
/* Рельефная светящаяся линия между блоками */
.h-band { position: relative; }
.h-band::before {
  content: '';
  position: absolute;
  left: 2%;
  right: 2%;
  top: 0;
  height: 2px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 210, 0.42) 18%, rgba(255, 246, 230, 0.7) 50%, rgba(255, 236, 210, 0.42) 82%, transparent);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.55), 0 0 14px rgba(255, 214, 160, 0.28), 0 -6px 18px rgba(255, 214, 160, 0.06);
  border-radius: 2px;
}

/* Кнопки */
.h-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 22px; border-radius: 12px; border: 1px solid var(--edge); font: 600 14px/1.2 var(--sans); white-space: nowrap; transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; cursor: pointer; }
.h-btn:hover { transform: translateY(-1px); }
.h-btn.gold { background: linear-gradient(180deg, #ffe7b0 0%, #f2c272 55%, #dea153 100%); color: #1d1608; border-color: #ffe4a8; box-shadow: 0 0 20px rgba(255, 190, 100, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 0 rgba(150, 90, 20, 0.3); }
.h-btn.gold:hover { box-shadow: 0 0 30px rgba(255, 190, 100, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.h-btn.ghost { background: rgba(14, 20, 38, 0.45); color: var(--txt); border-color: rgba(255, 246, 232, 0.6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.h-btn.ghost:hover { border-color: var(--gold); box-shadow: 0 0 16px rgba(255, 200, 120, 0.25); }
.h-btn.gold-line { border-color: var(--gold); color: #ffe6b4; padding: 9px 20px; font-size: 13px; box-shadow: 0 0 14px rgba(255, 196, 110, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.h-btn.sm { padding: 8px 16px; font-size: 13px; border-radius: 10px; }
.h-btn.lg { padding: 14px 30px; font-size: 15px; min-width: 220px; }
.h-btn.block { width: 100%; padding: 9px 12px; font-size: 13px; border-radius: 10px; }
.h-row { display: flex; gap: 18px; flex-wrap: wrap; }
.h-round { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 246, 232, 0.5); background: rgba(14, 20, 38, 0.6); display: grid; place-items: center; cursor: pointer; padding: 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); }
.h-round:hover { border-color: var(--gold); color: var(--gold); }
.h-round.sm { width: 30px; height: 30px; }

/* Шапка — стекло поверх первого экрана */
.h-top { position: fixed; inset: 0 0 auto 0; z-index: 50; background: linear-gradient(180deg, rgba(14, 20, 40, 0.6), rgba(14, 20, 40, 0.38)); backdrop-filter: blur(14px) saturate(1.2); }
.h-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 236, 210, 0.35) 20%, rgba(255, 236, 210, 0.35) 80%, transparent); }
.h-bar { display: flex; align-items: center; gap: 24px; height: 70px; }
.h-logo { display: flex; align-items: center; gap: 12px; }
.h-logo > span { display: flex; flex-direction: column; font: 500 21px/1 Cinzel, Georgia, serif; letter-spacing: 0.17em; color: #f7ecd8; }
.h-logo small { font: 500 8.5px/1 var(--sans); letter-spacing: 0.24em; color: #ead6b3; margin-top: 6px; text-transform: uppercase; }
.h-nav { flex: 1; display: flex; justify-content: center; gap: 46px; font-size: 14px; font-weight: 500; }
.h-nav a { color: #e9edf3; padding: 6px 0; border-bottom: 1px solid transparent; }
.h-nav a:hover { color: #fff; border-color: var(--gold); }
.h-acts { display: flex; align-items: center; gap: 12px; }
.h-lang { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; border: 1px solid rgba(255, 246, 232, 0.35); font-size: 12.5px; font-weight: 500; }
.h-lang:hover { border-color: var(--gold); }

/* Меню: выпадающий список миров, «бургер» и панель для узких экранов */
.h-nav a.on { color: #fff; border-color: var(--gold); }
.h-nav > a, .h-drop > a { display: inline-flex; align-items: center; gap: 6px; }
.h-drop { position: relative; }
.h-drop-menu { position: absolute; top: calc(100% + 14px); left: 50%; width: 560px; transform: translate(-50%, 6px); display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 12px; border-radius: 16px; background: rgba(16, 22, 42, 0.94); backdrop-filter: blur(16px); border: 1px solid rgba(255, 214, 150, 0.4); box-shadow: inset 0 1px 0 rgba(255, 236, 196, 0.3), 0 24px 50px rgba(0, 0, 0, 0.55); opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.2s, visibility 0.2s; }
.h-drop-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.h-drop:hover .h-drop-menu, .h-drop:focus-within .h-drop-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.h-drop-menu a { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; border: 0 !important; }
.h-drop-menu a:hover { background: rgba(255, 214, 150, 0.08); }
.h-drop-menu i { width: 64px; height: 44px; flex-shrink: 0; border-radius: 8px; background-size: cover; background-position: center; border: 1px solid rgba(255, 255, 255, 0.12); }
.h-drop-menu b { display: block; font-size: 14px; font-weight: 600; color: #fff; }
.h-drop-menu small { display: block; font-size: 11.5px; color: var(--mut); }
.h-drop-menu .h-drop-all { grid-column: 1 / -1; justify-content: center; padding: 10px; margin-top: 4px; color: var(--gold); font-size: 13.5px; font-weight: 500; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 0; }
.h-burger { display: none; width: 40px; height: 38px; padding: 0 9px; border-radius: 10px; border: 1px solid rgba(255, 246, 232, 0.35); background: rgba(14, 20, 38, 0.5); cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; }
.h-burger span { display: block; height: 2px; border-radius: 2px; background: #f1ead9; transition: transform 0.25s, opacity 0.25s; }
.h-top.open .h-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.h-top.open .h-burger span:nth-child(2) { opacity: 0; }
.h-top.open .h-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.h-panel-m { display: none; }
/* 7 пунктов меню: расстояние сжимается с шириной окна, пункты не переносятся; узко — меню в «бургер». */
.h-nav { gap: clamp(16px, 2.4vw, 46px); white-space: nowrap; }
@media (max-width: 1320px) { .h-nav { font-size: 13.5px; } .h-acts { gap: 8px; } }
@media (max-width: 1240px) {
  .h-burger { display: flex; }
  .h-panel-m { display: flex; flex-direction: column; gap: 4px; position: fixed; top: 70px; right: 0; bottom: 0; width: min(360px, 100%); padding: 18px 22px 30px; overflow-y: auto; background: rgba(12, 17, 34, 0.97); backdrop-filter: blur(16px); border-left: 1px solid rgba(255, 214, 150, 0.25); transform: translateX(100%); transition: transform 0.3s ease; }
  .h-panel-m { z-index: 49; }
  .h-panel-m.open { transform: none; }
  .h-pm-main { display: block; padding: 12px 4px; font: 400 22px var(--serif); color: var(--cream); border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
  .h-pm-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; padding: 6px 4px 10px; }
  .h-pm-sub a { padding: 5px 0; font-size: 13.5px; color: var(--mut); }
  .h-panel-m > .h-btn { margin-top: 18px; }
}
@media (max-width: 760px) { .h-panel-m { top: 60px; } .h-acts .h-lang { display: none; } }

/* Временные страницы разделов */
.h-soon-page { min-height: 72vh; padding: 170px 0 90px; background-size: cover; background-position: center; }
.h-soon-page .h-shell { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 760px; margin-left: var(--pad); }
.h-soon-page h1 { font-size: clamp(40px, 5vw, 68px); }
.h-soon-page p { color: #dfe4ec; font-size: 17px; max-width: 560px; }

/* Первый экран */
.h-hero { position: relative; overflow: hidden; }
.h-hero-img { position: absolute; inset: 0; background-repeat: no-repeat; background-size: cover; opacity: 0; transform: scale(1.04); transition: opacity 1.8s ease, transform 9s ease-out; }
.h-hero-img.on { opacity: 1; transform: scale(1); }
.h-hs-txt { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 22px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.9s ease, transform 0.9s ease; }
.h-hs-txt.on { opacity: 1; transform: none; pointer-events: auto; transition-delay: 0.6s; }
.h-hs-txt > p { max-width: 560px; font-size: 17px; line-height: 1.55; color: #f1f3f7; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
.h-hs-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(246, 207, 134, 0.75); background: rgba(20, 16, 10, 0.45); backdrop-filter: blur(6px); color: #ffe6b4; font: 600 12px var(--sans); font-style: normal; letter-spacing: 0.08em; margin-bottom: -6px; }
.h-hs-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -6px; }
.h-hs-tags i { font-style: normal; padding: 5px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(14, 18, 32, 0.45); backdrop-filter: blur(6px); font-size: 12.5px; color: #eef1f6; }
.h-h1.it span { font-style: italic; }
.h-hs-dots { grid-area: 2 / 1; display: flex; gap: 8px; margin-top: 4px; }
.h-hs-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 236, 210, 0.35); cursor: pointer; transition: width 0.5s, background 0.5s; }
.h-hs-dots button.on { width: 26px; background: var(--gold); box-shadow: 0 0 8px rgba(242, 199, 127, 0.7); }
.h-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 720px 320px at calc(var(--pad) + 300px) 40%, rgba(12, 18, 36, 0.6), transparent 100%), linear-gradient(180deg, transparent 62%, rgba(14, 22, 42, 0.78) 100%); pointer-events: none; z-index: 1; }
.h-hero-in { position: relative; z-index: 2; padding: 130px 0 40px; min-height: 540px; display: grid; align-content: start; gap: 22px; }
.h-hero-in > .h-slogan { display: flex; align-items: flex-start; gap: 12px; max-width: 620px; margin-bottom: -8px; font: 600 12px/1.7 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: #f2c77f; text-shadow: 0 0 14px rgba(255, 200, 120, 0.45), 0 2px 8px rgba(0, 0, 0, 0.6); }
.h-slogan b { font-weight: inherit; white-space: nowrap; }
.h-slogan::before { content: ''; flex-shrink: 0; margin-top: 10px; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, #f2c77f); box-shadow: 0 0 6px #f2c77f; }
.h-h1 span { display: block; white-space: nowrap; }
.h-h1 em { font-style: italic; color: #f6cc85; text-shadow: 0 2px 14px rgba(8, 12, 26, 0.85), 0 0 22px rgba(255, 200, 120, 0.3); }
.h-hero h1 { font-size: clamp(34px, 3.9vw, 56px); line-height: 1.12 !important; max-width: 820px; line-height: 1.04; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45); }
.h-hero-in > p { max-width: 540px; font-size: 17px; line-height: 1.55; color: #f1f3f7; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
.h-feats { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); padding: 10px 0 34px; }
.h-feat { display: flex; align-items: center; gap: 16px; padding: 0 20px; border-left: 1px solid rgba(255, 236, 210, 0.2); color: var(--gold); }
.h-feat svg { filter: drop-shadow(0 0 6px rgba(255, 200, 120, 0.35)); flex-shrink: 0; }
.h-feat:first-child { border-left: 0; padding-left: 0; }
.h-feat b { display: block; color: var(--txt); font-size: 15.5px; font-weight: 600; white-space: nowrap; }
.h-feat small { display: block; color: var(--mut); font-size: 12.5px; white-space: nowrap; }

/* Фоны для «пустых» участков: размытый вечерний город и туманность; края растворяются в общем фоне страницы */
.h-bg { position: relative; isolation: isolate; }
.h-bg::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-repeat: no-repeat; background-size: cover; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); }
.h-bg-a::before { background-image: linear-gradient(180deg, rgba(17, 26, 49, 0.35), rgba(17, 26, 49, 0.55)), url(https://selidar.com/site/bgA.webp); background-position: center, right center; opacity: 0.9; }
.h-bg-b::before { background-image: linear-gradient(90deg, rgba(17, 26, 49, 0.55), rgba(17, 26, 49, 0.25) 60%, rgba(17, 26, 49, 0.4)), url(https://selidar.com/site/bgB.webp); background-position: center, right center; opacity: 0.95; }

/* Слайдшоу миров (макет «Каталог путешествий» 3.png) */
.h-show { padding: var(--gap-y) 0 calc(var(--gap-y) - 6px); overflow: hidden; }
.h-ss { --w: 62vw; --g: 20px; --side: calc((100% - var(--w)) / 2 - var(--g) - var(--pad)); }
.h-ss-stage { position: relative; height: clamp(160px, 13.5vw, 215px); }
.h-ss-slide { position: absolute; top: 0; height: 100%; border-radius: 18px; overflow: hidden; display: flex; align-items: center; border: 1px solid rgba(255, 238, 214, 0.22); background: #121a30; box-shadow: 0 16px 40px rgba(3, 6, 16, 0.45); transition: transform 1.4s, left 1.4s cubic-bezier(0.45, 0, 0.2, 1), width 1.4s cubic-bezier(0.45, 0, 0.2, 1), height 1.4s, top 1.4s, opacity 1.4s, filter 1.4s, border-color 1s, box-shadow 1s; }
.h-ss-slide > i { position: absolute; inset: 0; background-size: cover; background-position: center 55%; }
.h-ss-slide.c { left: calc((100% - var(--w)) / 2); width: var(--w); z-index: 2; border: 1.5px solid rgba(246, 207, 134, 0.85); box-shadow: 0 0 34px rgba(255, 190, 100, 0.35), 0 18px 46px rgba(3, 6, 16, 0.5); }
.h-ss-slide.l { left: var(--pad); width: var(--side); top: 4%; height: 92%; z-index: 1; filter: brightness(0.8); cursor: pointer; }
.h-ss-slide.r { left: calc((100% + var(--w)) / 2 + var(--g)); width: var(--side); top: 4%; height: 92%; z-index: 1; filter: brightness(0.8); cursor: pointer; }
.h-ss-slide.hl { left: var(--pad); width: var(--side); transform: scale(0.9); top: 4%; height: 92%; opacity: 0; pointer-events: none; }
.h-ss-slide.hr { left: calc((100% + var(--w)) / 2 + var(--g)); width: var(--side); transform: scale(0.9); top: 4%; height: 92%; opacity: 0; pointer-events: none; }
.h-ss-slide.l:hover, .h-ss-slide.r:hover { filter: brightness(1); }
.h-ss-txt { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 0 0 0 46px; max-width: 64%; opacity: 0; transform: translateY(8px); transition: opacity 0.6s, transform 0.6s; }
.h-ss-slide.c .h-ss-txt { opacity: 1; transform: none; transition-delay: 0.9s; }
.h-ss-slide.c::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10, 14, 28, 0.72) 0%, rgba(10, 14, 28, 0.35) 45%, transparent 70%); }
.h-ss-txt b { font: italic 400 clamp(26px, 2.5vw, 38px)/1.05 var(--serif); color: #fff6e6; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55); }
.h-ss-txt small { font-size: 14px; color: #f1f3f7; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
.h-ss-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: rgba(20, 16, 10, 0.55); border: 1px solid rgba(246, 207, 134, 0.7); color: #ffe6b4; font: 600 10.5px var(--sans); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; }
.h-ss-badge svg { color: var(--gold); }
.h-ss-btn { margin-top: 6px; padding: 8px 20px; border-radius: 999px; font-size: 13.5px; background: rgba(14, 20, 38, 0.45); }
.h-ss-stage .h-round { position: absolute; top: calc(50% - 19px); z-index: 3; }
.h-ss-stage .prev { left: calc((100% - var(--w)) / 2 - 19px); }
.h-ss-stage .next { right: calc((100% - var(--w)) / 2 - 19px); }
.h-ss-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
.h-ss-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 236, 210, 0.3); cursor: pointer; transition: width 0.5s, background 0.5s; }
.h-ss-dots button.on { width: 20px; background: var(--gold); box-shadow: 0 0 8px rgba(242, 199, 127, 0.7); }

/* Больше, чем чат */
.h-more { padding: 44px 0; }
.h-more > .h-shell { position: relative; z-index: 1; }
.h-more::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14, 20, 40, 0.15) 0%, rgba(14, 20, 40, 0.15) 35%, rgba(14, 20, 40, 0.74) 60%, rgba(14, 20, 40, 0.66) 88%, rgba(14, 20, 40, 0.4) 100%), url(https://selidar.com/site/more-bg.webp) center 62% / cover no-repeat; pointer-events: none; }
.h-more-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.85fr 1fr; gap: 40px; align-items: center; }
.h-more-txt { display: flex; flex-direction: column; gap: 16px; padding: 22px 26px; margin: -22px -26px; border-radius: 16px; background: radial-gradient(closest-side, rgba(14, 22, 42, 0.6), transparent); }
.h-more-txt > p { color: #e6eaf1; max-width: 560px; font-size: 13.5px; }
.h-more-txt .h-checks { font-size: 13.5px; }
.h-more-txt h2 { font-size: clamp(22px, calc(2.55vw - 3px), 34px); white-space: nowrap; }
.h-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.h-checks li { display: flex; gap: 12px; align-items: flex-start; }
.h-checks svg { color: var(--gold); margin-top: 1px; flex-shrink: 0; filter: drop-shadow(0 0 4px rgba(255, 200, 120, 0.4)); }
.h-checks.sm { gap: 5px; font-size: 12.5px; }
.h-checks.xs { gap: 8px; font-size: 12px; line-height: 1.35; color: #e3e7ee; }

/* Пример сцены: кадр героини и стеклянное окно диалога поверх (макет 1) */
.h-scene { position: relative; aspect-ratio: 2.35; border-radius: 20px; border: 1.5px solid rgba(255, 238, 214, 0.45); background: linear-gradient(90deg, rgba(8, 12, 24, 0.45), transparent 50%), url(https://selidar.com/site/scene-alina.webp) center 42% / cover; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 30px rgba(242, 190, 120, 0.15), 0 20px 50px rgba(0, 0, 0, 0.45); padding: 18px 24px; display: flex; align-items: center; }
.h-dialog { width: min(400px, 46%); min-width: 360px; display: flex; flex-direction: column; gap: 9px; padding: 13px 15px; border-radius: 16px; background: linear-gradient(180deg, rgba(30, 38, 64, 0.78), rgba(14, 20, 38, 0.82)); border: 1px solid rgba(255, 238, 214, 0.32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 30px rgba(0, 0, 0, 0.4); backdrop-filter: blur(10px); }
.h-dialog-who { display: flex; gap: 12px; align-items: flex-start; }
.h-dialog-who b { display: block; color: #86d3ff; font-size: 14px; font-weight: 600; }
.h-dialog-who i { display: block; font-size: 12px; color: #dfe4ec; line-height: 1.45; }
.h-ava { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: url(https://selidar.com/site/hero.webp) 66% 20% / 420%; border: 1.5px solid var(--gold); }
.h-dialog > p { font-size: 13px; color: #f1f3f7; padding-bottom: 9px; border-bottom: 1px solid rgba(255, 238, 214, 0.16); }
.h-dialog-opts { display: flex; flex-direction: column; gap: 6px; }
.h-dialog-opts span { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 10px; border: 1px solid rgba(255, 238, 214, 0.25); background: rgba(14, 20, 38, 0.6); font-size: 12px; }
.h-dialog-opts span svg { color: #c9d1de; flex-shrink: 0; }
.h-dialog-opts span.on { border-color: var(--gold); background: linear-gradient(180deg, rgba(150, 120, 70, 0.45), rgba(80, 64, 40, 0.45)); box-shadow: 0 0 14px rgba(242, 190, 110, 0.3); }
.h-dialog-opts span.on svg { color: var(--gold); }

/* Мир, который помнит: текст · кадр · ровная сетка «поступок → последствие» */

/* Мир, который помнит: «Память, которая остаётся» + «Настроение и доверие» (макет 7.png) */
.h-mem { padding: var(--gap-y) 0; }
.h-mem-head { display: flex; align-items: baseline; gap: 30px; margin-bottom: 28px; }
.h-mem-head h2 { white-space: nowrap; }
.h-mem-head p { color: #dfe4ec; font-size: 14px; max-width: 640px; }
.h-mem-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; }
.h-mpanel { position: relative; overflow: hidden; padding: 24px 26px; border-radius: 18px; background: linear-gradient(180deg, rgba(38, 44, 72, 0.88) 0%, rgba(22, 27, 46, 0.93) 50%, rgba(14, 18, 32, 0.96) 100%); border: 1px solid rgba(255, 214, 150, 0.45); box-shadow: inset 0 1px 0 rgba(255, 236, 196, 0.4), inset 0 0 26px rgba(255, 188, 100, 0.08), 0 18px 40px rgba(2, 4, 12, 0.5); }
.h-mpanel h3 { display: flex; align-items: center; gap: 14px; font-size: clamp(24px, 2vw, 30px); }
.h-mpanel h3 svg { color: var(--gold); filter: drop-shadow(0 0 6px rgba(255, 200, 120, 0.5)); }
.h-mpanel-lead { margin-top: 14px; font-size: 14px; color: #dfe4ec; line-height: 1.55; max-width: 620px; }
.h-memory-body { display: grid; grid-template-columns: 1fr 1.15fr; gap: 10px; margin-top: 18px; align-items: center; }
.h-timeline { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; display: flex; flex-direction: column; gap: 16px; }
.h-timeline::before { content: ''; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, rgba(242, 199, 127, 0.7), rgba(242, 199, 127, 0.15)); }
.h-timeline li { position: relative; display: flex; gap: 14px; align-items: flex-start; }
.h-timeline li::before { content: ''; position: absolute; left: -22px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(242, 199, 127, 0.9); }
.h-timeline li > svg { color: var(--gold); flex-shrink: 0; margin-top: 1px; }
.h-timeline b { display: block; font-size: 14.5px; font-weight: 600; color: #fff; }
.h-timeline small { display: block; font-size: 12.5px; color: var(--mut); line-height: 1.4; margin-top: 2px; }
.h-cards { position: relative; height: 290px; }
.h-pc { position: absolute; margin: 0; padding: 10px 10px 34px; background: #f6efe3; border-radius: 4px; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.4); }
.h-pc i { display: block; background-size: cover; background-position: center; }
.h-pc figcaption { position: absolute; left: 12px; right: 8px; bottom: 7px; font: 500 18px/1 Caveat, cursive; color: #3a2e24; white-space: nowrap; overflow: hidden; }
.h-pc.p0 { left: 2%; top: 6%; width: 58%; transform: rotate(-6deg); z-index: 2; }
.h-pc.p0 i { aspect-ratio: 1.05; }
.h-pc.p1 { right: 2%; top: 0; width: 42%; transform: rotate(5deg); z-index: 1; }
.h-pc.p1 i { aspect-ratio: 1; }
.h-pc.p2 { right: 4%; bottom: 0; width: 50%; transform: rotate(-3deg); z-index: 3; }
.h-pc.p2 i { aspect-ratio: 1.25; }
.h-mood { display: flex; flex-direction: column; }
.h-mood-card { margin: 18px 0 16px; padding: 16px 18px; border-radius: 14px; background: rgba(10, 14, 28, 0.55); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); display: flex; flex-direction: column; gap: 16px; }
.h-mood-row { display: flex; align-items: center; gap: 16px; }
.h-mood-row > img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(242, 199, 127, 0.7); }
.h-mood-row > svg { color: var(--gold); flex-shrink: 0; }
.h-mood-trust { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.h-mood-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(242, 199, 127, 0.5); color: var(--gold); }
.h-mood-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.h-mood-main b { font-size: 15px; font-weight: 600; color: #fff; }
.h-mood-main small { font-size: 12.5px; color: var(--mut); }
.h-mood-main small em { font-style: normal; color: var(--gold); }
.h-meter { display: block; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.h-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e3a95a, #ffe1a0); box-shadow: 0 0 10px rgba(255, 200, 120, 0.6); }
.h-mood-pct { font-size: 15px; font-weight: 600; color: #fff; }
.h-mood-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.h-mood-chips i { font-style: normal; padding: 4px 14px; border-radius: 999px; border: 1px solid rgba(242, 199, 127, 0.45); background: rgba(242, 199, 127, 0.06); font-size: 12px; color: #f3e2c2; }
.h-mood-quote { position: relative; margin: auto 0 0; padding: 16px 70px 16px 46px; border-radius: 14px; background: rgba(10, 14, 28, 0.55); border: 1px solid rgba(255, 255, 255, 0.1); font: italic 400 15px/1.5 var(--serif); color: #f1ead9; }
.h-mood-quote > span { position: absolute; left: 16px; top: 10px; font: 700 34px/1 var(--serif); color: var(--gold); }
.h-mood-quote > svg { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: rgba(242, 199, 127, 0.45); }

/* Открытки из путешествий (макет 1.png): ряд полароидов */
.h-trips { padding: calc(var(--gap-y) - 10px) 0 var(--gap-y); }
.h-trips-head { display: grid; grid-template-columns: auto 1px 1fr auto; align-items: center; gap: 24px; margin-bottom: 30px; }
.h-trips-head h2 { font-style: italic; color: #f2c77f; }
.h-trips-head > span { height: 34px; background: rgba(255, 238, 214, 0.3); }
.h-trips-head p { color: #dfe4ec; font-size: 14px; }
.h-trips-head a { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-size: 13.5px; font-weight: 500; }
.h-trips-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 1.6vw, 26px); }
.h-trip { position: relative; padding: 10px 10px 40px; transition: transform 0.35s, box-shadow 0.35s; }
.h-trip i { aspect-ratio: 4 / 3; }
.h-trip figcaption { left: 0; right: 0; text-align: center; bottom: 10px; font-size: 20px; }
.h-trip:hover { transform: rotate(0deg) translateY(-6px) scale(1.03) !important; box-shadow: 0 24px 44px rgba(0, 0, 0, 0.6), 0 0 24px rgba(255, 200, 120, 0.2); z-index: 2; }

/* Как растёт ваша история (макет 5.png) */
.h-grow { padding: var(--gap-y) 0; }
.h-grow-head { display: grid; grid-template-columns: auto minmax(40px, 180px) 1fr; align-items: center; gap: 28px; margin-bottom: 34px; }
.h-grow-head h2 { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.h-grow-head h2 svg { color: var(--gold); filter: drop-shadow(0 0 8px rgba(255, 200, 120, 0.5)); }
.h-grow-head > span { height: 1px; background: linear-gradient(90deg, rgba(242, 199, 127, 0.8), transparent); }
.h-grow-head p { color: #dfe4ec; font-size: 14.5px; text-align: right; }
.h-grow-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(36px, 4vw, 64px); }
.h-grow-row li { position: relative; display: flex; flex-direction: column; gap: 6px; }
.h-grow-row li:not(:last-child)::after { content: '→'; position: absolute; right: calc(-1 * clamp(36px, 4vw, 64px) / 2 - 9px); top: 30%; font-size: 22px; color: var(--gold); text-shadow: 0 0 8px rgba(255, 200, 120, 0.6); }
.h-grow-img { position: relative; display: block; aspect-ratio: 1.7; border-radius: 16px; background-size: cover; background-position: center; border: 1px solid rgba(255, 214, 150, 0.5); box-shadow: inset 0 1px 0 rgba(255, 236, 196, 0.35), 0 0 18px rgba(255, 180, 90, 0.15), 0 14px 30px rgba(2, 4, 12, 0.5); margin-bottom: 18px; }
.h-grow-img em { position: absolute; left: -6px; bottom: -18px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 600 16px var(--sans); font-style: normal; color: #ffe6b4; background: radial-gradient(circle at 35% 30%, #2b2a3a, #12121c); border: 1.5px solid var(--gold); box-shadow: 0 0 14px rgba(255, 190, 100, 0.55); }
.h-grow-row b { margin-left: 14px; font-size: 18px; font-weight: 600; color: #fff; }
.h-grow-row small { margin-left: 14px; font-size: 13.5px; color: #cfd6e2; line-height: 1.45; }

/* Приключения */
.h-adv { padding: var(--gap-y) 0 calc(var(--gap-y) - 10px); }
.h-adv-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; margin-bottom: 32px; position: relative; }
.h-adv-head > span { height: 1px; background: linear-gradient(90deg, transparent, rgba(242, 199, 127, 0.7)); }
.h-adv-head > span:nth-of-type(2) { background: linear-gradient(90deg, rgba(242, 199, 127, 0.7), transparent); margin-right: 150px; }
.h-adv-head h2 { text-transform: uppercase; letter-spacing: 0.1em; font-size: clamp(22px, 2vw, 30px); font-weight: 500; }
.h-adv-head a { position: absolute; right: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-size: 13px; font-weight: 500; }
.h-worlds { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.h-world { position: relative; display: grid; grid-template-columns: 0.72fr 1fr; gap: 18px; padding: 12px; border-radius: 18px; background: linear-gradient(180deg, rgba(38, 44, 72, 0.88) 0%, rgba(22, 27, 46, 0.93) 50%, rgba(14, 18, 32, 0.96) 100%); border: 1px solid rgba(255, 214, 150, 0.6); box-shadow: inset 0 1px 0 rgba(255, 236, 196, 0.5), inset 0 0 26px rgba(255, 188, 100, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 20px rgba(255, 180, 90, 0.18), 0 18px 40px rgba(2, 4, 12, 0.55); transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; }
.h-world.featured { border-color: rgba(255, 214, 150, 0.9); box-shadow: inset 0 1px 0 rgba(255, 236, 196, 0.6), inset 0 0 26px rgba(255, 188, 100, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 28px rgba(255, 180, 90, 0.34), 0 18px 40px rgba(2, 4, 12, 0.55); }
.h-world.live:hover { transform: translateY(-3px); border-color: rgba(255, 220, 160, 0.95); box-shadow: inset 0 1px 0 rgba(255, 240, 205, 0.6), inset 0 0 28px rgba(255, 188, 100, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 30px rgba(255, 180, 90, 0.38), 0 24px 46px rgba(2, 4, 12, 0.6); }
.h-world.soon { cursor: default; }
.h-world-img { position: relative; display: block; min-height: 200px; border-radius: 12px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.h-world.soon .h-world-img { filter: saturate(0.8) brightness(0.85); }
.h-world-badge { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: rgba(20, 16, 10, 0.6); border: 1px solid rgba(255, 220, 160, 0.45); backdrop-filter: blur(6px); color: #fff3dc; font: 500 12px var(--sans); font-style: normal; }
.h-world-badge svg { color: var(--gold); }
.h-world-body { display: flex; flex-direction: column; gap: 10px; padding: 8px 6px 4px 0; min-width: 0; }
.h-world-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.h-world-head b { font: italic 400 clamp(17px, 1.5vw, 22px)/1.15 var(--serif); color: #fbf3e6; white-space: nowrap; }
.h-world-mark { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; border: 1px solid rgba(255, 238, 214, 0.35); color: #e9edf3; }
.h-world-soon { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--gold); color: #ffe6b4; font: 600 10px var(--sans); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; }
.h-world-body > small { font-size: 13.5px; line-height: 1.5; color: #dfe4ec; }
.h-world-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.h-world-tags i { font-style: normal; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); font-size: 12px; color: #e8ebf1; }
.h-world-foot { margin-top: auto; display: flex; justify-content: flex-start; align-items: center; gap: 10px; }
.h-world-btn { padding: 9px 20px; font-size: 13.5px; border-radius: 999px; }

/* Языки и создание миров — два широких баннера с одинаковой раскладкой (макет 1) */
.h-duo { padding: 20px 0 var(--gap-y); }
.h-duo-in { display: flex; flex-direction: column; gap: 22px; }
.h-banner { position: relative; min-height: 270px; border-radius: 20px; overflow: hidden; border: 1px solid var(--edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 14px 36px rgba(3, 6, 16, 0.4); display: flex; align-items: center; background-size: cover; }
.h-learn { background: #161d36; isolation: isolate; }
.h-learn::before, .h-learn::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: -1; background-repeat: no-repeat; background-size: cover; }
.h-learn::before { left: 0; width: 34%; background-image: url(https://selidar.com/site/learn-tutor.webp); background-position: 78% 35%; -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }
.h-learn::after { right: 0; width: 38%; background-image: url(https://selidar.com/site/learn-london.webp); background-position: 80% 45%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
.h-learn .h-banner-card { width: auto; margin: 14px 18% 14px 31%; padding: 18px 30px; grid-template-columns: 1.1fr 1fr; gap: 36px; align-items: center; border-right-color: transparent; background: linear-gradient(90deg, rgba(30, 36, 62, 0.92) 0%, rgba(24, 30, 52, 0.86) 72%, rgba(24, 30, 52, 0.3) 100%); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.h-learn h3 { font-size: clamp(24px, 2vw, 32px); }
.h-learn { min-height: 0; }
.h-learn .h-banner-main { gap: 8px; }
.h-learn .h-banner-main p { font-size: 13px; line-height: 1.5; }
.h-checks.ring { gap: 9px; font-size: 13.5px; white-space: nowrap; }
.h-checks.ring svg { margin-top: -1px; }
.h-learn-btn { border-radius: 12px; padding: 10px 30px; font-size: 13.5px; }
.h-learn .h-banner-side { gap: 14px; }
.h-learn .h-learn-btn { margin-top: 12px; }
.h-create { background-image: url(https://selidar.com/site/create.webp); background-position: center 45%; justify-content: center; }
.h-banner-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; width: 60%; margin: 22px 0; padding: 24px 28px; border-radius: 16px; background: linear-gradient(180deg, rgba(34, 42, 70, 0.72), rgba(14, 20, 38, 0.8)); border: 1px solid rgba(255, 238, 214, 0.3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 30px rgba(0, 0, 0, 0.35); backdrop-filter: blur(12px); }
.h-create .h-banner-card { margin: 22px auto; }
.h-banner-main { display: flex; flex-direction: column; gap: 12px; }
.h-banner-main p { font-size: 13px; line-height: 1.55; color: #e3e7ee; }
.h-banner-side { display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.h-banner-side .h-checks { gap: 9px; font-size: 13px; }
.h-banner-side .h-btn { align-self: flex-start; }
.h-soon { font-style: normal; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--gold); color: #ffe6b4; font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 1px; }

/* Тарифы — общая стеклянная панель; отзывы — отдельный ряд (макет 2) */
.h-price { padding: var(--gap-y) 0 calc(var(--gap-y) + 10px); }
.h-price-box { display: flex; justify-content: center; padding: 26px 0; }
.h-price-intro { display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.h-price-intro p { font-size: 13.5px; color: #e3e7ee; }
.h-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 330px)); justify-content: center; gap: 22px; width: 100%; }
.h-plan { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px 22px 18px; border-radius: 16px; }
.h-plan.accent { border: 1.5px solid #f6cf86; background: linear-gradient(180deg, rgba(92, 76, 58, 0.5), rgba(30, 30, 46, 0.65)); box-shadow: 0 0 30px rgba(255, 190, 100, 0.35), inset 0 0 20px rgba(255, 200, 120, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.h-plan-badge { position: absolute; top: 14px; right: 14px; font-style: normal; padding: 3px 10px; border-radius: 999px; background: linear-gradient(180deg, #ffe7b0, #e9b25f); color: #1d1608; font-size: 11px; font-weight: 700; }
.h-plan-name { font-weight: 600; font-size: 15px; }
.h-plan-price { font-size: 26px; font-weight: 600; color: #fff; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 236, 210, 0.16); }
.h-plan.accent .h-plan-price { color: var(--gold); }
.h-plan-price small { font-size: 13px; color: var(--mut); font-weight: 400; }
.h-plan .h-checks.xs { gap: 7px; font-size: 12.5px; }
.h-plan .h-checks.xs li { white-space: nowrap; }
.h-plan .h-btn { margin-top: auto; }
.h-btn.block { padding: 10px 12px; border-radius: 999px; }
.h-rev-row { margin-top: 44px; }
.h-rev-track { overflow: hidden; padding: 4px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
/* Лента отзывов: два одинаковых набора подряд, сдвиг на половину — бесшовный бесконечный круг */
.h-rev-belt { display: flex; gap: 18px; width: max-content; animation: h-rev-run 90s linear infinite; }
.h-rev-track:hover .h-rev-belt { animation-play-state: paused; }
@keyframes h-rev-run { to { transform: translateX(calc(-50% - 9px)); } }
@media (prefers-reduced-motion: reduce) { .h-rev-belt { animation: none; } .h-rev-track { overflow-x: auto; } }
.h-rev { display: flex; gap: 14px; padding: 16px; border-radius: 14px; width: clamp(280px, 24vw, 380px); flex-shrink: 0; }
.h-rev p { font-size: 12.5px; color: #e3e7ee; line-height: 1.5; margin-top: 6px; }
.h-rev-who { display: flex; flex-direction: column; gap: 2px; }
.h-rev-who b { font-size: 13.5px; font-weight: 600; }
.h-rev-ava { width: 50px; height: 50px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #4a4466, #1c2238); border: 1px solid rgba(242, 199, 127, 0.55); color: var(--gold); font: 500 22px var(--serif); }
.h-stars { color: #f5c04f; font-size: 15px; letter-spacing: 2px; text-shadow: 0 0 6px rgba(245, 192, 79, 0.5); }

/* Горы на закате над подвалом — плавный переход в ночь */
.h-sky { position: relative; isolation: isolate; }
.h-sky::before { content: ''; position: absolute; inset: 0 0 clamp(120px, 12vw, 200px) 0; z-index: -1; background: url(https://selidar.com/site/space.webp) center 12% / max(100%, 1500px) auto no-repeat, #121b33; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%); mask-image: linear-gradient(180deg, transparent 0%, #000 12%); }
.h-ridge { position: relative; overflow: hidden; height: clamp(300px, 30vw, 460px); }
.h-ridge::before { content: ''; position: absolute; inset: 0; z-index: 0; background: url(https://selidar.com/site/ridge.webp) center bottom / 100% auto no-repeat; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%); }
/* Передний план: те же горы поверх фигуры — она стоит «за горизонтом» */
.h-ridge-front { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url(https://selidar.com/site/ridge.webp) center bottom / 100% auto no-repeat; -webkit-mask-image: linear-gradient(180deg, transparent 72%, #000 86%); mask-image: linear-gradient(180deg, transparent 72%, #000 86%); }
.h-figure { position: absolute; z-index: 1; bottom: 0; height: 92%; width: auto; }
.h-outro-in { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; }
/* 1 — из-за гор справа, текст слева */
.v1 .h-figure { right: calc(var(--pad) + 12%); height: 80%; bottom: 18%; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }
.v1 .h-outro-in { justify-content: center; text-align: center; padding-left: 0; padding-bottom: 6%; }
.v1 .h-outro, .v4 .h-outro { white-space: nowrap; font-size: clamp(24px, 2.4vw, 38px); }
.h-outro { position: relative; margin: 0; text-align: center; font: 400 clamp(26px, 2.8vw, 42px)/1.2 var(--serif); color: var(--cream); text-shadow: 0 4px 24px rgba(0, 0, 0, 0.5); }
.h-outro small { display: block; margin-top: 12px; font: 400 clamp(14px, 1.15vw, 17px)/1.5 var(--sans); letter-spacing: 0.02em; color: #d9dfea; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); white-space: normal; }
.h-outro-line { display: block; white-space: normal; text-align: center; max-width: 560px; margin: 18px auto 0; font: italic 400 clamp(16px, 1.3vw, 19px)/1.5 var(--serif); color: #f2dcb3; letter-spacing: 0.01em; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
.h-outro-line::before { content: ''; display: block; width: 46px; height: 1px; margin: 0 auto 16px; background: linear-gradient(90deg, transparent, #f2c77f, transparent); box-shadow: 0 0 6px rgba(242, 199, 127, 0.7); }
.h-outro em { font-style: italic; color: #f6cc85; text-shadow: 0 0 22px rgba(255, 200, 120, 0.35); }
.h-foot { position: relative; z-index: 1; padding: 30px 0 26px; background: #021025; }
.h-foot::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 120px; background: linear-gradient(180deg, rgba(2, 16, 37, 0), #021025); pointer-events: none; }
.h-foot-in { display: grid; grid-template-columns: 1.35fr 1.1fr 0.9fr 0.9fr 1.2fr 1fr; gap: 26px; align-items: start; }
.h-foot-brand { display: flex; flex-direction: column; gap: 36px; }
.h-foot-brand .h-logo > span { font-size: 24px; }
.h-foot-brand small { font-size: 11px; color: rgba(188, 196, 211, 0.75); }
.h-foot-desc { font: italic 400 16px/1.55 var(--serif); color: #ead6b3; padding-top: 2px; }
.h-foot-desc span { display: block; white-space: nowrap; }
.h-foot-col { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.h-foot-col b { color: #fff; font-size: 13.5px; font-weight: 600; margin-bottom: 4px; }
.h-foot-col a { color: #c8cfdb; }
.h-foot-col a:hover { color: var(--gold); }
.h-social { display: flex; gap: 12px; margin-top: 4px; }
.h-social span { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 246, 232, 0.55); display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 10px rgba(255, 220, 170, 0.08); }

/* Узкие экраны */
@media (max-width: 1180px) {
  .h-nav { gap: 22px; }
  .h-feats { grid-template-columns: repeat(3, 1fr); row-gap: 18px; }
  .h-feat:nth-child(4) { border-left: 0; padding-left: 0; }
  .h-more-in { grid-template-columns: 1fr; }
  .h-worlds { grid-template-columns: 1fr; }
  .h-grow-row { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  .h-grow-row li::after { display: none; }
  .h-grow-head { grid-template-columns: 1fr; gap: 8px; }
  .h-grow-head > span { display: none; }
  .h-grow-head p { text-align: left; }
  .h-trips-row { grid-template-columns: repeat(3, 1fr); }
  .h-trip:nth-child(n+4) { display: none; }
  .h-mem-grid { grid-template-columns: 1fr; }
  .h-mem-head { flex-direction: column; gap: 8px; }
  .h-ss { --w: 76vw; }
  .h-banner-card { width: 74%; }
  .h-learn .h-banner-card { margin-left: 22%; }
  .h-foot-in { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 1240px) {
  .h-nav { display: none; }
  .h-bar { justify-content: space-between; }
}
@media (max-width: 1060px) {
  .h-feat b, .h-feat small { white-space: normal; }
  .h-feat { padding: 0 12px; gap: 10px; }
}
@media (max-width: 760px) {
  .h-hero::before { background: linear-gradient(180deg, rgba(12, 18, 36, 0.55) 0%, rgba(12, 18, 36, 0.35) 40%, rgba(12, 18, 36, 0.85) 100%); }
  .h-hs-txt > p { font-size: 15px; }
  .h { --gap-y: 36px; }
  .h-shell { width: calc(100% - 32px); }
  .h-nav, .h-acts .ghost { display: none; }
  .h-bar { justify-content: space-between; height: 60px; gap: 10px; }
  .h-logo small { display: none; }
  .h-logo .brand-mark { width: 38px !important; height: 38px !important; }
  .h-logo > span { font-size: 16px; letter-spacing: 0.14em; }
  .h-logo { gap: 8px; }
  .h-acts { gap: 8px; }
  .h-acts .gold { padding: 7px 10px; font-size: 12px; }
  .h-lang { padding: 6px 8px; }
  .h-lang svg:first-child { display: none; }
  .h-hero-img { background-position: 68% 20% !important; }
  .h-hero-img.on { opacity: 0.6; }
  .h-hero-in { padding: 100px 0 30px; min-height: 0; }
  .h-hero-in > p { font-size: 15px; }
  .h-h1 span { white-space: normal; }
  .h-slogan::before { width: 18px; }
  .h-btn.lg { min-width: 0; flex: 1; padding: 13px 16px; }
  .h-feats { grid-template-columns: 1fr 1fr; }
  .h-feat { border-left: 0; padding: 0; gap: 10px; }
  .h-feat b { font-size: 13.5px; white-space: normal; }
  .h-feat small { white-space: normal; }
  .h-more::after { display: none; }
  .h-scene { padding: 14px; aspect-ratio: auto; padding-top: 52%; background-size: 100% auto; background-position: center top; background-repeat: no-repeat; background-color: #0c1426; }
  .h-dialog { width: 100%; min-width: 0; }
  .h-adv-head { grid-template-columns: 1fr; text-align: center; }
  .h-adv-head > span { display: none; }
  .h-adv-head a { position: static; justify-content: center; }
  .h-world { grid-template-columns: 1fr; }
  .h-grow-row { grid-template-columns: 1fr; }
  .h-grow-head h2 { white-space: normal; }
  .h-trips-head { grid-template-columns: 1fr; gap: 6px; }
  .h-trips-head > span { display: none; }
  .h-trips-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 4px 16px; }
  .h-trip { flex: 0 0 70%; scroll-snap-align: center; display: block !important; }
  .h-memory-body { grid-template-columns: 1fr; }
  .h-cards { height: 250px; }
  .h-mem-head h2 { white-space: normal; }
  .h-mpanel { padding: 18px; }
  .h-ss-stage { height: 220px; }
  .h-ss { --w: calc(100vw - 32px); }
  .h-ss-slide.l, .h-ss-slide.r { opacity: 0; pointer-events: none; }
  .h-ss-txt { padding-left: 20px; max-width: 86%; }
  .h-ss-stage .h-round { display: none; }
  .h-world-head b { white-space: normal; }
  .h-world-img { min-height: 180px; }
  .h-banner { min-height: 0; padding-top: 200px; background-size: 100% auto; background-position: center top; background-repeat: no-repeat; background-color: #141d36; }
  .h-learn::after { display: none; }
  .h-learn::before { width: 100%; height: 200px; bottom: auto; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .h-banner-card, .h-learn .h-banner-card, .h-create .h-banner-card { width: auto; margin: 0 10px 10px; grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .h-price-box { padding: 16px; }
  .h-plans { grid-template-columns: 1fr; }
  .h-price-box { display: block; }
  .h-plan .h-checks.xs li { white-space: normal; }
  .h-ridge::before, .h-ridge-front { background-size: 220% auto; }
  .h-ridge { height: 300px; }
  .h-ridge .h-figure { right: 0; left: auto; transform: none; height: 72%; opacity: 1; }
  .h-ridge .h-outro-in { justify-content: center; align-items: flex-start; padding: 40px 16px 0; }
  .h-ridge .h-outro { font-size: 22px; white-space: normal; }
  .h-foot-in { grid-template-columns: 1fr 1fr; }
  .h-foot-brand, .h-foot-desc { grid-column: 1 / -1; }
  .h-foot-brand { gap: 10px; }
}


/* ── Страница «О проекте» (/about): макет GPT, вариант 1 + «Как выглядит игра», цитата и призыв из варианта 2 ── */
.h-ab { --bg: 18, 27, 51; }
.h-ab img { height: auto; }
.h-ab h2 em, .h-ab-quote em { font-style: italic; color: #f6cc85; text-shadow: 0 0 22px rgba(255, 200, 120, 0.3); }
.h-ab-s { position: relative; isolation: isolate; padding: clamp(38px, 3.6vw, 60px) 0; }
.h-ab-s h2 { margin-bottom: clamp(16px, 1.5vw, 24px); }
.h-ab-sub { color: var(--mut); font-size: 15px; line-height: 1.6; margin: -8px 0 22px; max-width: 780px; }

/* Первый экран */
.h-ab-hero { position: relative; isolation: isolate; min-height: clamp(560px, 44vw, 760px); padding: 140px 0 70px; display: flex; align-items: center; }
.h-ab-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 12, 26, 0.62) 0%, rgba(8, 12, 26, 0.42) 36%, rgba(8, 12, 26, 0.08) 58%, rgba(8, 12, 26, 0) 70%), linear-gradient(180deg, rgba(8, 12, 26, 0.45) 0%, transparent 18%, transparent 74%, rgb(var(--bg)) 100%), url(https://selidar.com/site/ab-hero.webp) center 42% / cover no-repeat; }
.h-ab-hero .h-shell { display: flex; flex-direction: column; gap: 22px; }
.h-ab-hero h1 { font-size: clamp(36px, 3.6vw, 56px); max-width: 920px; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.45); }
.h-ab-hero h1 em { display: block; }
.h-ab-lead { max-width: 600px; color: #f1f3f8; text-shadow: 0 1px 12px rgba(4, 7, 18, 0.9), 0 0 2px rgba(4, 7, 18, 0.6); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.65; }
.h-ab-hero .h-row { margin-top: 6px; }

/* Что такое Selidar */
.h-ab-what { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 3.5vw, 60px); align-items: center; }
.h-ab-pic { display: block; width: 100%; aspect-ratio: 16 / 9.4; object-fit: cover; border-radius: 20px; border: 1px solid rgba(255, 230, 190, 0.35); box-shadow: 0 20px 50px rgba(2, 4, 12, 0.55), 0 0 30px rgba(255, 196, 110, 0.12); }
.h-ab-what > div { display: grid; gap: 14px; }
.h-ab-what h2 { margin-bottom: 4px; }
.h-ab-what p { color: #dfe4ec; font-size: 15.5px; line-height: 1.7; }
.h-ab-feats { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.h-ab-feats li { display: flex; gap: 12px; align-items: flex-start; padding: 0 16px; border-left: 1px solid rgba(255, 236, 210, 0.18); color: var(--gold); }
.h-ab-feats li:first-child { border-left: 0; padding-left: 0; }
.h-ab-feats svg { flex: none; filter: drop-shadow(0 0 6px rgba(255, 200, 120, 0.45)); }
.h-ab-feats span, .h-ab-how span, .h-ab-values span { display: flex; flex-direction: column; gap: 3px; color: var(--mut); font-size: 13px; line-height: 1.45; }
.h-ab-feats b, .h-ab-how b, .h-ab-values b { color: var(--txt); font-size: 14.5px; font-weight: 600; }

/* Сравнение */
.h-ab-vs-s::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 46%; z-index: -1; background: url(https://selidar.com/site/ab-vs.webp) 70% center / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-composite: intersect; }
.h-ab-vs { display: grid; grid-template-columns: 1fr auto 1.25fr; gap: 22px; align-items: center; max-width: 1080px; }
.h-ab-vs-col { border-radius: 18px; padding: 18px 26px 12px; }
.h-ab-vs-col h3 { font: 500 18px var(--sans); color: var(--txt); margin-bottom: 8px; }
.h-ab-vs-col.best { border-color: rgba(242, 199, 127, 0.75); background: linear-gradient(180deg, rgba(64, 58, 60, 0.5), rgba(22, 26, 44, 0.65)); box-shadow: 0 0 26px rgba(255, 196, 110, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.h-ab-vs-col.best h3 { font: italic 400 26px var(--serif); color: #f6cc85; }
.h-ab-vs-col ul { list-style: none; margin: 0; padding: 0; }
.h-ab-vs-col li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; font-size: 14px; line-height: 1.45; color: #cfd6e3; border-top: 1px solid rgba(255, 238, 214, 0.1); }
.h-ab-vs-col li svg { flex: none; margin-top: 2px; color: #e07a7a; }
.h-ab-vs-col.best li { color: var(--txt); }
.h-ab-vs-col.best li svg { color: var(--gold); }
.h-ab-vs-arrow { color: var(--gold); display: grid; filter: drop-shadow(0 0 8px rgba(255, 200, 120, 0.6)); }

/* Миры */
.h-ab-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.h-ab-head a { flex: none; display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-weight: 600; font-size: 13.5px; }
.h-ab-worlds { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.h-ab-world { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; aspect-ratio: 5 / 5.6; padding: 16px; border-radius: 16px; overflow: hidden; background-position: center 35%; background-size: cover; background-repeat: no-repeat; border: 1px solid rgba(255, 230, 190, 0.28); box-shadow: 0 14px 34px rgba(2, 4, 12, 0.45); color: var(--gold); transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; }
.h-ab-world::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 18, 36, 0) 22%, rgba(12, 18, 36, 0.78) 58%, rgba(12, 18, 36, 0.96) 100%); }
.h-ab-world:hover { transform: translateY(-3px); border-color: rgba(242, 199, 127, 0.8); box-shadow: 0 16px 40px rgba(3, 6, 16, 0.5), 0 0 24px rgba(255, 196, 110, 0.18); }
.h-ab-world svg { filter: drop-shadow(0 0 6px rgba(255, 200, 120, 0.5)); }
.h-ab .h-ab-world h3 { font-size: clamp(19px, 1.45vw, 23px); }
.h-ab-world p { font-size: 12.5px; line-height: 1.45; color: #d6dce7; }

/* Как проходит игра */
.h-ab-how { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px; }
.h-ab-how li { position: relative; display: flex; align-items: center; gap: 14px; border-radius: 16px; padding: 16px 18px; color: var(--gold); }
.h-ab-how li + li::before { content: '→'; position: absolute; left: -28px; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 20px; text-shadow: 0 0 8px rgba(255, 200, 120, 0.6); }
.h-ab-how em { flex: none; align-self: flex-start; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--sans); font-style: normal; color: #1d1608; background: linear-gradient(180deg, #ffe7b0, #dea153); box-shadow: 0 0 12px rgba(255, 190, 100, 0.55); }
.h-ab-how li > svg { flex: none; }

/* Как выглядит игра */
.h-ab-game-s { scroll-margin-top: 80px; }
.h-ab-game-s::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(700px 320px at 52% 50%, rgba(255, 196, 110, 0.08), transparent 70%); }
.h-ab-game { display: grid; grid-template-columns: minmax(220px, 0.8fr) 2.4fr minmax(190px, 0.7fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
.h-ab-game-txt p { color: #d6dce7; font-size: 15px; line-height: 1.7; }
.h-ab-game-mock { position: relative; padding-right: 30%; }
.h-ab-chat { display: grid; grid-template-columns: 46px 27% 1fr; min-height: 320px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255, 230, 190, 0.3); background: rgba(14, 20, 38, 0.88); box-shadow: 0 24px 60px rgba(2, 4, 12, 0.6), 0 0 30px rgba(255, 196, 110, 0.08); }
.h-ab-chat-rail { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 0; border-right: 1px solid rgba(255, 255, 255, 0.06); }
.h-ab-chat-rail i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--gold); border: 1px solid rgba(242, 199, 127, 0.4); }
.h-ab .h-ab-chat-who { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.h-ab-chat-main { display: flex; flex-direction: column; gap: 10px; padding: 14px 96px 14px 16px; min-width: 0; }
.h-ab-chat-top { display: flex; gap: 10px; align-items: center; }
.h-ab .h-ab-chat-top img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: center 8%; border: 1.5px solid var(--gold); }
.h-ab-chat-top span { display: flex; flex-direction: column; }
.h-ab-chat-top b { color: var(--gold); font-size: 14px; }
.h-ab-chat-top small { color: var(--mut); font-size: 11px; }
.h-ab-msg { align-self: flex-start; max-width: 88%; padding: 9px 13px; border-radius: 14px 14px 14px 4px; background: rgba(62, 72, 104, 0.65); font-size: 13px; line-height: 1.45; color: var(--txt); }
.h-ab-msg.me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: linear-gradient(180deg, #ffe0a3, #e9b25f); color: #1d1608; }
.h-ab-msg.typing { display: flex; gap: 4px; padding: 12px 14px; }
.h-ab-msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: #cfd6e4; opacity: 0.8; }
.h-ab-chat-in { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); color: var(--mut); font-size: 12px; }
.h-ab-chat-in svg { flex: none; color: var(--gold); }
.h-ab-scene { position: absolute; right: 0; top: 50%; transform: translateY(-46%); width: 40%; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 230, 190, 0.45); background: #0e1426; box-shadow: 0 24px 60px rgba(2, 4, 12, 0.7), 0 0 26px rgba(255, 196, 110, 0.15); }
.h-ab-scene > img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.h-ab-scene b { display: block; padding: 10px 12px 0; font: 600 14px var(--sans); color: var(--cream); }
.h-ab-scene div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px 12px 12px; }
.h-ab-scene div img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.12); }
.h-ab-scene div img.on { border-color: var(--gold); box-shadow: 0 0 8px rgba(255, 196, 110, 0.5); }
.h-ab-game-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.h-ab-game-feats li { display: flex; gap: 12px; align-items: center; font-size: 14.5px; color: var(--txt); }
.h-ab-game-feats svg { flex: none; color: var(--gold); }

/* Три способа играть */
.h-ab-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.h-ab-mode { display: flex; gap: 18px; align-items: flex-start; border-radius: 16px; padding: 20px 22px; color: var(--gold); }
.h-ab-mode > svg { flex: none; margin-top: 2px; filter: drop-shadow(0 0 6px rgba(255, 200, 120, 0.45)); }
.h-ab-mode.best { border-color: rgba(242, 199, 127, 0.8); box-shadow: 0 0 26px rgba(255, 196, 110, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.h-ab .h-ab-mode h3 { font: 600 17px var(--sans); color: var(--txt); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; }
.h-ab-mode h3 em { font: 600 10.5px var(--sans); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: #ffe6b4; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(242, 199, 127, 0.55); }
.h-ab-mode p { color: #d6dce7; font-size: 13.5px; line-height: 1.55; }

/* Для кого */
.h-ab-who { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.h-ab-who-card { border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.h-ab-who-card img { display: block; width: 100%; aspect-ratio: 16 / 9.5; object-fit: cover; object-position: center 25%; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent); }
.h-ab-who-card > div { position: relative; margin-top: -26px; padding: 0 20px 20px; }
.h-ab .h-ab-who-card h3 { display: flex; align-items: center; gap: 12px; font: 600 17px var(--sans); color: var(--txt); margin-bottom: 8px; }
.h-ab-who-card h3 svg { flex: none; color: var(--gold); filter: drop-shadow(0 0 6px rgba(255, 200, 120, 0.45)); }
.h-ab-who-card p { color: #d6dce7; font-size: 13.5px; line-height: 1.55; }

/* Где играть + ценности */
.h-ab-duo { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px, 3vw, 50px); align-items: center; }
.h-ab-where { display: grid; grid-template-columns: 0.95fr 1fr; gap: 30px; align-items: center; }
.h-ab-duo h2 { font-size: clamp(24px, 2vw, 30px); }
.h-ab-where p { color: #d6dce7; font-size: 14px; line-height: 1.65; }
.h-ab-dev { position: relative; padding: 0 10% 24px 6%; }
.h-ab-laptop { position: relative; border-radius: 12px 12px 4px 4px; border: 6px solid #1c2338; border-bottom-width: 10px; background: #0b1020; box-shadow: 0 24px 50px rgba(2, 4, 12, 0.6), 0 0 40px rgba(255, 196, 110, 0.16); }
.h-ab-laptop::after { content: ''; position: absolute; left: -6%; right: -6%; bottom: -20px; height: 10px; border-radius: 0 0 14px 14px; background: linear-gradient(180deg, #3a4258, #1a2032); }
.h-ab-laptop img { display: block; width: 100%; height: auto; border-radius: 3px; }
.h-ab-phone { position: absolute; right: 0; bottom: 0; width: 25%; aspect-ratio: 9 / 18; border-radius: 16px; border: 4px solid #1c2338; overflow: hidden; background: #0b1020; box-shadow: 0 18px 40px rgba(2, 4, 12, 0.7), 0 0 20px rgba(255, 196, 110, 0.22); }
.h-ab .h-ab-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
.h-ab-plat { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.h-ab-plat a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(255, 246, 232, 0.35); background: rgba(14, 20, 38, 0.45); font-size: 13px; font-weight: 600; transition: border-color 0.2s; }
.h-ab-plat a:hover, .h-ab-plat a.on { border-color: var(--gold); }
.h-ab-plat a.on { color: #ffe6b4; box-shadow: 0 0 14px rgba(255, 196, 110, 0.2); }
.h-ab-values { border-left: 1px solid rgba(255, 236, 210, 0.16); padding-left: clamp(24px, 2.5vw, 44px); }
.h-ab-values ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; }
.h-ab-values li { display: flex; gap: 12px; align-items: flex-start; color: var(--gold); }
.h-ab-values li svg { flex: none; }

/* Что дальше */
.h-ab-road-s::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 58%; z-index: -1; background: url(https://selidar.com/site/ab-road.webp) 72% 55% / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-composite: intersect; }
.h-ab-road { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; position: relative; max-width: min(1060px, 76%); }
.h-ab-road::before { content: ''; position: absolute; left: 26px; right: 0; top: 26px; height: 1px; background: linear-gradient(90deg, rgba(242, 199, 127, 0.75), rgba(242, 199, 127, 0.1)); }
.h-ab-road li { position: relative; display: flex; flex-direction: column; gap: 5px; }
.h-ab-road li > span { position: relative; width: 52px; height: 52px; margin-bottom: 8px; border-radius: 50%; display: grid; place-items: center; color: var(--gold); background: #141c33; border: 1px solid rgba(242, 199, 127, 0.55); box-shadow: 0 0 16px rgba(255, 196, 110, 0.25); }
.h-ab-road b { font-size: 15px; color: var(--txt); }
.h-ab-road small { font-size: 13px; line-height: 1.45; color: var(--mut); }

/* Цитата */
.h-ab-quote { position: relative; isolation: isolate; text-align: center; padding: clamp(80px, 9vw, 150px) 16px clamp(60px, 6vw, 100px); }
.h-ab-quote::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(var(--bg)) 0%, rgba(var(--bg), 0.2) 30%, rgba(var(--bg), 0.2) 72%, rgb(var(--bg)) 100%), url(https://selidar.com/site/ab-quote.webp) center 64% / cover no-repeat; }
.h-ab-quote p { font: italic 400 clamp(26px, 2.8vw, 44px)/1.25 var(--serif); color: var(--cream); text-shadow: 0 2px 20px rgba(8, 12, 26, 0.85); }
.h-ab-quote small { display: block; margin-top: 10px; color: #f6cc85; font: italic 16px var(--serif); text-shadow: 0 2px 12px rgba(8, 12, 26, 0.9); }

/* Вопросы: тёмные карточки в две колонки на фоне ночного моря */
.h-ab-faq-s::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(var(--bg)) 0%, rgba(var(--bg), 0.35) 18%, rgba(var(--bg), 0.45) 75%, rgb(var(--bg)) 100%), url(https://selidar.com/site/ab-sea.webp) center 30% / cover no-repeat; }
.h-ab-faq-head { text-align: center; max-width: 860px; margin: 0 auto clamp(20px, 2vw, 30px); }
.h-ab-faq-head .h-ab-sub { margin: 0 auto; }
.h-ab-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; align-items: start; }
.h-ab-faq > div { display: grid; gap: 14px; }
.h-ab-q { border-radius: 14px; background: linear-gradient(180deg, rgba(15, 20, 40, 0.94), rgba(9, 13, 28, 0.94)); border: 1px solid rgba(255, 230, 190, 0.24); box-shadow: 0 10px 30px rgba(2, 4, 12, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: border-color 0.2s, box-shadow 0.2s; }
.h-ab-q:hover { border-color: rgba(242, 199, 127, 0.6); }
.h-ab-q.open { border-color: rgba(242, 199, 127, 0.9); background: linear-gradient(180deg, rgba(62, 48, 30, 0.95), rgba(13, 17, 34, 0.96) 75%); box-shadow: 0 0 28px rgba(255, 196, 110, 0.2), 0 12px 32px rgba(2, 4, 12, 0.5); }
.h-ab .h-ab-q h3 { font: 600 15.5px/1.4 var(--sans); color: var(--txt); letter-spacing: 0; padding: 0; }
.h-ab-q button { width: 100%; display: flex; align-items: center; gap: 16px; padding: 17px 20px; background: none; border: 0; cursor: pointer; text-align: left; }
.h-ab-q button em { flex: none; min-width: 30px; font: italic 400 22px var(--serif); color: var(--gold); text-shadow: 0 0 12px rgba(255, 200, 120, 0.35); }
.h-ab-q button span { flex: 1; }
.h-ab-q button i { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--gold); border: 1px solid rgba(242, 199, 127, 0.6); transition: transform 0.25s, background 0.25s; }
.h-ab-q.open button i { transform: rotate(45deg); background: rgba(242, 199, 127, 0.16); }
.h-ab-q p { display: none; padding: 0 22px 20px 66px; color: #e6eaf1; font-size: 14.5px; line-height: 1.7; }
.h-ab-q.open p { display: block; }

/* Разделение блоков: тёмные полосы и фоновые картинки (разделитель сверху — .h-band::before) */
.h-ab-dark::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4, 7, 18, 0.46), rgba(4, 7, 18, 0.34)); }
.h-ab-bg::after { content: ''; position: absolute; inset: 0; z-index: -1; background-repeat: no-repeat; background-size: cover; }
.h-ab-bg-a::after { background-image: linear-gradient(90deg, rgba(var(--bg), 0.35), rgba(var(--bg), 0.72) 45%, rgba(var(--bg), 0.72)), url(https://selidar.com/site/bgA.webp); background-position: center, right center; }
.h-ab-bg-b::after { background-image: linear-gradient(90deg, rgba(var(--bg), 0.6), rgba(var(--bg), 0.2) 60%, rgba(var(--bg), 0.4)), url(https://selidar.com/site/bgB.webp); background-position: center, right center; }
.h-ab-bg-nebula::after { background-image: linear-gradient(180deg, rgba(var(--bg), 0.35), rgba(var(--bg), 0.5)), url(https://selidar.com/site/ab-nebula.webp); background-position: center, center 35%; }
.h-ab-bg-desk::after { background-image: linear-gradient(180deg, rgba(var(--bg), 0.45), rgba(var(--bg), 0.6)), url(https://selidar.com/site/ab-desk.webp); background-position: center, center 62%; }
.h-ab-why-s::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4, 7, 18, 0.55) 0%, rgba(4, 7, 18, 0.5) 50%, rgba(4, 7, 18, 0.05) 85%), url(https://selidar.com/site/ab-portal.webp) 100% 42% / 62% auto no-repeat, rgba(4, 7, 18, 0.4); }

/* Зачем мы создали Selidar */
.h-ab-why { display: grid; grid-template-columns: 1.7fr 0.6fr; gap: clamp(28px, 4vw, 70px); align-items: center; }
.h-ab-why > div { display: grid; gap: 14px; max-width: 860px; }
.h-ab-why p { color: #dfe4ec; font-size: 15.5px; line-height: 1.75; }
.h-ab-why ul { list-style: none; margin: 0; padding: 26px 28px; border-radius: 16px; background: rgba(9, 13, 28, 0.78); border: 1px solid rgba(255, 230, 190, 0.26); box-shadow: 0 14px 34px rgba(2, 4, 12, 0.5); backdrop-filter: blur(8px); display: grid; gap: 22px; }
.h-ab-why li { display: flex; gap: 14px; align-items: flex-start; color: var(--gold); }
.h-ab-why li svg { flex: none; filter: drop-shadow(0 0 6px rgba(255, 200, 120, 0.45)); }
.h-ab-why span { display: flex; flex-direction: column; gap: 3px; color: var(--mut); font-size: 13px; line-height: 1.45; }
.h-ab-why b { color: var(--txt); font-size: 15px; font-weight: 600; }

/* Жанры (текст для поисковиков) */
.h-ab-genres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.h-ab-genre { display: flex; flex-direction: column; gap: 12px; padding: 24px 26px; border-radius: 16px; background: rgba(9, 13, 28, 0.66); border: 1px solid rgba(255, 230, 190, 0.22); box-shadow: 0 12px 30px rgba(2, 4, 12, 0.4); backdrop-filter: blur(8px); }
.h-ab .h-ab-genre h3 { display: flex; align-items: center; gap: 12px; font-size: clamp(19px, 1.4vw, 22px); }
.h-ab-genre h3 svg { flex: none; color: var(--gold); filter: drop-shadow(0 0 6px rgba(255, 200, 120, 0.45)); }
.h-ab-genre p { color: #dbe1ea; font-size: 14.5px; line-height: 1.7; }
.h-ab-genre a { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-weight: 600; font-size: 13.5px; }
.h-ab-genre a:hover { color: #ffe6b4; }

/* Технологии */
.h-ab-tech { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.h-ab-techi { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 16px; }
.h-ab-techi > span { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; color: var(--gold); border: 1px solid rgba(242, 199, 127, 0.5); background: rgba(242, 199, 127, 0.08); box-shadow: 0 0 18px rgba(255, 196, 110, 0.15); }
.h-ab .h-ab-techi h3 { font-size: clamp(19px, 1.4vw, 22px); }
.h-ab-techi p { color: #d6dce7; font-size: 14px; line-height: 1.65; }

/* Призыв */
.h-ab-cta { position: relative; isolation: isolate; min-height: clamp(360px, 32vw, 500px); display: flex; align-items: center; padding: 60px 0; }
.h-ab-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--bg), 0.9) 0%, rgba(var(--bg), 0.5) 36%, rgba(var(--bg), 0) 62%), linear-gradient(180deg, rgb(var(--bg)) 0%, transparent 22%, transparent 80%, rgb(var(--bg)) 100%), url(https://selidar.com/site/ab-cta.webp) center 60% / cover no-repeat; }
.h-ab .h-ab-cta h2 { font-size: clamp(32px, 3.2vw, 50px); font-style: italic; }
.h-ab-cta p { color: #e3e8f0; font-size: 16px; margin: 12px 0 26px; max-width: 520px; }

@media (max-width: 1180px) {
  .h-ab-worlds { grid-template-columns: repeat(3, 1fr); }
  .h-ab-how { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .h-ab-how li + li::before { display: none; }
  .h-ab-game { grid-template-columns: 1fr; }
  .h-ab-game-feats { grid-template-columns: repeat(2, 1fr); }
  .h-ab-modes { grid-template-columns: 1fr; }
  .h-ab-faq { grid-template-columns: 1fr; }
  .h-ab-who { grid-template-columns: repeat(2, 1fr); }
  .h-ab-duo { grid-template-columns: 1fr; }
  .h-ab-values { border-left: 0; padding-left: 0; }
  .h-ab-road { grid-template-columns: repeat(3, 1fr); row-gap: 28px; max-width: none; }
  .h-ab-road::before { display: none; }
  .h-ab-genres, .h-ab-tech { grid-template-columns: repeat(2, 1fr); }
  .h-ab-why { grid-template-columns: 1fr; }
  .h-ab-why ul { grid-template-columns: repeat(3, 1fr); }
  .h-ab-vs-s::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 46%; z-index: -1; background: url(https://selidar.com/site/ab-vs.webp) 70% center / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-composite: intersect; }
}
@media (max-width: 760px) {
  .h-ab-hero { padding: 120px 0 50px; min-height: 0; }
  .h-ab-hero::before { background: linear-gradient(180deg, rgba(8, 12, 26, 0.35) 0%, rgba(8, 12, 26, 0.55) 50%, rgb(var(--bg)) 100%), url(https://selidar.com/site/ab-hero.webp) 62% 30% / cover no-repeat; }
  .h-ab-hero .h-btn.lg, .h-ab-cta .h-btn.lg { min-width: 0; width: 100%; }
  .h-ab-what, .h-ab-where { grid-template-columns: 1fr; }
  .h-ab-feats { grid-template-columns: 1fr; gap: 14px; }
  .h-ab-feats li { border-left: 0; padding-left: 0; }
  .h-ab-vs { grid-template-columns: 1fr; gap: 12px; }
  .h-ab-vs-arrow { justify-self: center; transform: rotate(90deg); }
  .h-ab-head { flex-direction: column; gap: 0; margin-bottom: 14px; }
  .h-ab-worlds { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .h-ab-world { padding: 12px; }
  .h-ab-how, .h-ab-who, .h-ab-values ul, .h-ab-game-feats { grid-template-columns: 1fr; }
  .h-ab-game-mock { padding-right: 0; }
  .h-ab-chat { grid-template-columns: 1fr; }
  .h-ab-chat-main { padding-right: 16px; }
  .h-ab-chat-rail, .h-ab .h-ab-chat-who { display: none; }
  .h-ab-road-s::after { width: 100%; opacity: 0.35; }
  .h-ab-genres, .h-ab-tech, .h-ab-faq, .h-ab-why ul { grid-template-columns: 1fr; }
  .h-ab-q p { padding-left: 20px; }
  .h-ab-q button { padding: 15px 16px; gap: 12px; }
  .h-ab-scene { position: relative; transform: none; width: 78%; margin: -30px 0 0 auto; }
  .h-ab-road { grid-template-columns: 1fr 1fr; }
  .h-ab-cta::before { background: linear-gradient(180deg, rgb(var(--bg)) 0%, rgba(var(--bg), 0.5) 40%, rgba(var(--bg), 0.85) 100%), url(https://selidar.com/site/ab-cta.webp) 65% center / cover no-repeat; }
}

/* ── Страница «Миры» (/worlds): фото на весь первый экран (высота как у главной), флагманы, разделы по 3 карточки; низ — точно по варианту 1 ── */
.h-w-c { text-align: center; }
/* Первый экран */
.h-w-hero { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 707px; }
.h-w-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 760px 360px at calc(var(--pad) + 320px) 46%, rgba(10, 15, 32, 0.62), transparent 100%), linear-gradient(180deg, rgba(10, 15, 32, 0.35) 0%, transparent 16%, transparent 66%, rgba(14, 22, 42, 0.85) 100%), url(https://selidar.com/site/w-hero.webp) center 38% / cover no-repeat; }
.h-w-hero-txt { display: flex; flex-direction: column; gap: 22px; padding: 130px 0 40px; }
.h-w-hero h1 { font-size: clamp(40px, 4.4vw, 66px); text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); }
.h-w-hero-txt > p { max-width: 560px; font-size: 17px; line-height: 1.55; color: #f1f3f7; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7); }
.h-w-feats { display: grid !important; grid-template-columns: repeat(6, 1fr); }
.h-w-feats .h-feat { cursor: pointer; transition: color 0.2s; }
.h-w-feats .h-feat:hover b { color: #ffe6b4; }

/* Заголовок блока */
.h-w-head { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; margin-bottom: 24px; }
.h-w-head h2 { display: flex; align-items: center; gap: 14px; margin: 0; }
.h-w-head h2 svg { color: var(--gold); filter: drop-shadow(0 0 8px rgba(255, 200, 120, 0.7)); }
.h-w-head p { color: var(--mut); font-size: 14.5px; }

/* Флагманы: три афиши */
.h-w-flags { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.h-w-flag { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 10px; aspect-ratio: 4 / 4.6; padding: 26px; border-radius: 20px; overflow: hidden; background-size: cover; background-repeat: no-repeat; border: 1px solid rgba(255, 230, 190, 0.35); box-shadow: 0 20px 50px rgba(2, 4, 12, 0.55); transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; }
.h-w-flag::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 12, 26, 0) 35%, rgba(8, 12, 26, 0.7) 65%, rgba(8, 12, 26, 0.95) 100%); }
.h-w-flag:hover { transform: translateY(-4px); border-color: rgba(242, 199, 127, 0.85); box-shadow: 0 24px 56px rgba(3, 6, 16, 0.6), 0 0 30px rgba(255, 196, 110, 0.22); }
.h-w-flag small { font: 600 11.5px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.h-ab .h-w-flag h3 { font: italic 400 clamp(34px, 2.8vw, 44px)/1.05 var(--serif); color: var(--cream); }
.h-w-flag p { color: #e8ecf3; font-size: 15px; line-height: 1.55; max-width: 380px; }
.h-w-flag .h-btn { margin-top: 6px; }

/* Подборки 6 в ряд */
.h-w-colls { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.h-w-coll { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 3px; height: 150px; padding: 14px 34px 14px 16px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 230, 190, 0.3); background-position: center; background-size: cover; text-align: left; cursor: pointer; box-shadow: 0 12px 30px rgba(2, 4, 12, 0.45); transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; }
.h-w-coll::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 12, 26, 0.05) 15%, rgba(8, 12, 26, 0.55) 50%, rgba(8, 12, 26, 0.92) 100%); }
.h-w-coll:hover { transform: translateY(-3px); border-color: rgba(242, 199, 127, 0.85); }
.h-w-coll b { font: 400 20px/1.15 var(--serif); color: var(--cream); }
.h-w-coll small { font-size: 12px; color: #dfe4ec; }
.h-w-coll > svg { position: absolute; right: 12px; bottom: 16px; color: var(--cream); }

/* Фильтр */
.h-w-filter-wrap { position: sticky; top: 70px; z-index: 20; padding: 12px 0; background: linear-gradient(180deg, rgba(10, 15, 32, 0.94), rgba(10, 15, 32, 0.84)); backdrop-filter: blur(10px); border-top: 1px solid rgba(255, 236, 210, 0.14); border-bottom: 1px solid rgba(255, 236, 210, 0.14); }
.h-w-filter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; overflow-x: auto; scrollbar-width: none; }
.h-w-filter::-webkit-scrollbar { display: none; }
.h-w-filter button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 12px; border: 1px solid rgba(255, 246, 232, 0.25); background: rgba(14, 20, 38, 0.5); color: var(--txt); font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.h-w-filter button svg { color: var(--gold); }
.h-w-filter button:hover { border-color: rgba(242, 199, 127, 0.6); }
.h-w-filter button.on { border-color: var(--gold); color: #ffe6b4; background: linear-gradient(180deg, rgba(110, 84, 44, 0.55), rgba(40, 32, 22, 0.55)); box-shadow: 0 0 16px rgba(255, 196, 110, 0.3); }

/* Разделы каталога */
.h-w-cat { scroll-margin-top: 140px; }
.h-w-cat::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--bg), 0.86), rgba(var(--bg), 0.8)), var(--cimg) center / cover no-repeat; }
.h-w-cat.h-ab-dark::after { background: linear-gradient(180deg, rgba(5, 8, 20, 0.9), rgba(5, 8, 20, 0.84)), var(--cimg) center / cover no-repeat; }
.h-w-cat-travel { --cimg: url(https://selidar.com/site/s-varun.webp); }
.h-w-cat-life { --cimg: url(https://selidar.com/site/w-lumen.webp); }
.h-w-cat-space { --cimg: url(https://selidar.com/site/space.webp); }
.h-w-cat-fantasy { --cimg: url(https://selidar.com/site/w-alterium.webp); }
.h-w-cat-minds { --cimg: url(https://selidar.com/site/s-hall.webp); }
.h-w-cat-growth { --cimg: url(https://selidar.com/site/w-shambala.webp); }
.h-w-cat-head { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; margin-bottom: 26px; }
.h-w-cat-head > span { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: var(--gold); border: 1px solid rgba(242, 199, 127, 0.55); background: rgba(242, 199, 127, 0.08); box-shadow: 0 0 18px rgba(255, 196, 110, 0.2); }
.h-w-cat-head h2 { margin-bottom: 6px; }
.h-w-cat-head p { max-width: 980px; color: #dfe4ec; font-size: 15px; line-height: 1.7; }
.h-w-cat-head > em { display: flex; flex-direction: column; align-items: center; padding: 10px 18px; border-radius: 14px; border: 1px solid rgba(255, 230, 190, 0.25); background: rgba(9, 13, 28, 0.6); font-style: normal; font-size: 12px; color: var(--mut); white-space: nowrap; }
.h-w-cat-head > em b { font: 600 28px/1.1 var(--serif); color: #f6cc85; }
.h-w-route { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.h-w-route li { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-radius: 14px; border: 1px solid rgba(255, 230, 190, 0.25); background: rgba(9, 13, 28, 0.62); color: var(--gold); }
.h-w-route li + li::before { content: '→'; position: absolute; left: -18px; top: 50%; transform: translateY(-50%); color: var(--gold); font-size: 18px; text-shadow: 0 0 8px rgba(255, 200, 120, 0.6); }
.h-w-route span { display: flex; flex-direction: column; color: var(--mut); font-size: 12.5px; }
.h-w-route b { color: var(--txt); font-size: 15px; }

/* Карточка мира — вертикальная (вариант 1) */
.h-w-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.h-w-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, rgba(22, 28, 52, 0.94), rgba(12, 16, 34, 0.96)); border: 1px solid rgba(255, 230, 190, 0.26); box-shadow: 0 14px 34px rgba(2, 4, 12, 0.5); transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; }
.h-w-card:hover { transform: translateY(-3px); border-color: rgba(242, 199, 127, 0.75); box-shadow: 0 18px 40px rgba(3, 6, 16, 0.55), 0 0 22px rgba(255, 196, 110, 0.16); }
.h-w-card-img { position: relative; isolation: isolate; aspect-ratio: 16 / 8.6; display: flex; align-items: flex-end; padding: 14px 18px; background: center / cover no-repeat; }
.h-w-card-img::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 50%, rgba(12, 16, 34, 0.9) 100%); }
.h-ab .h-w-card-img h3 { font: italic 400 30px/1.1 var(--serif); color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7); }
.h-w-badge { position: absolute; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font: 600 11.5px var(--sans); font-style: normal; color: #ffe6b4; background: rgba(20, 16, 10, 0.6); border: 1px solid rgba(246, 207, 134, 0.75); backdrop-filter: blur(6px); }
.h-w-badge.flag { color: #f0e2ff; border-color: rgba(200, 160, 255, 0.8); }
.h-w-badge.soon { color: #e8ecf3; border-color: rgba(255, 246, 232, 0.45); background: rgba(10, 14, 30, 0.65); }
.h-w-card-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 18px; }
.h-w-genre { font-size: 12.5px; color: #8fb6ff; }
.h-w-card p { color: #dbe1ea; font-size: 14px; line-height: 1.55; }
.h-w-card-foot { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--mut); }
.h-w-card-foot > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.h .h-w-play { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 10px; font: 600 12.5px var(--sans); color: #1d1608; background: linear-gradient(180deg, #ffe7b0 0%, #f2c272 55%, #dea153 100%); box-shadow: 0 0 14px rgba(255, 190, 100, 0.35); white-space: nowrap; }
.h .h-w-play.ghost { color: #ffe6b4; background: rgba(14, 20, 38, 0.55); border: 1px solid rgba(242, 199, 127, 0.55); box-shadow: none; }

/* Как работают миры — 6 в ряд */
.h-w-how { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.h-w-how li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.h-w-how li > span { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: var(--gold); border: 1px solid rgba(242, 199, 127, 0.55); background: rgba(12, 16, 34, 0.7); box-shadow: 0 0 20px rgba(255, 196, 110, 0.25); margin-bottom: 4px; }
.h-w-how b { font-size: 15.5px; color: var(--txt); }
.h-w-how p { font-size: 13.5px; line-height: 1.55; color: #d6dce7; }

/* Найди свой мир — вариант 1 */
.h-w-find { position: relative; isolation: isolate; padding: clamp(40px, 3.6vw, 60px) 0; }
.h-w-find::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(900px 200px at 50% 0%, rgba(90, 140, 255, 0.12), transparent 70%), linear-gradient(180deg, rgba(5, 8, 20, 0.5), rgba(5, 8, 20, 0.3)); }
.h-w-find-head { display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap; margin-bottom: 26px; }
.h-ab .h-w-find-head h2 { font: italic 400 clamp(36px, 3.2vw, 50px) var(--serif); background: linear-gradient(180deg, #ffd7d4, #f4a9a6); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(255, 160, 160, 0.35)); }
.h-w-find-head p { color: #dfe4ec; font-size: 15px; }
.h-w-find-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.h-w-find-card { --c: 242, 199, 127; position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px 46px 24px 22px; border-radius: 16px; border: 1px solid rgba(var(--c), 0.55); background: radial-gradient(120% 140% at 0% 0%, rgba(var(--c), 0.14), transparent 60%), linear-gradient(180deg, rgba(20, 26, 48, 0.85), rgba(12, 16, 34, 0.9)); box-shadow: 0 0 22px rgba(var(--c), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: transform 0.25s, box-shadow 0.25s; }
.h-w-find-card:hover { transform: translateY(-3px); box-shadow: 0 0 30px rgba(var(--c), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.h-w-find-card.teal { --c: 72, 214, 210; }
.h-w-find-card.violet { --c: 176, 124, 255; }
.h-w-find-card.blue { --c: 92, 152, 255; }
.h-w-find-card b { display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 600; color: #fff; }
.h-w-find-card.teal b { color: #6fe6e1; }
.h-w-find-card b svg { flex: none; color: rgb(var(--c)); filter: drop-shadow(0 0 8px rgba(var(--c), 0.7)); }
.h-w-find-card p { color: #e3e8f0; font-size: 14.5px; line-height: 1.55; }
.h-w-find-card > svg { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: #e3e8f0; }

/* Создай свой мир — вариант 1 */
.h-w-create { position: relative; isolation: isolate; min-height: clamp(420px, 34vw, 540px); display: flex; align-items: center; padding: 50px 0; border-top: 1px solid rgba(140, 170, 255, 0.35); box-shadow: inset 0 14px 30px -20px rgba(120, 160, 255, 0.5); }
.h-w-create::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 12, 26, 0.92) 0%, rgba(8, 12, 26, 0.7) 32%, rgba(8, 12, 26, 0.1) 55%, rgba(8, 12, 26, 0) 70%), linear-gradient(180deg, transparent 75%, rgba(8, 12, 26, 0.8) 100%), url(https://selidar.com/site/w-create.webp) right 40% / cover no-repeat; }
.h-w-create-in { position: relative; }
.h-w-create-txt { max-width: 560px; display: flex; flex-direction: column; gap: 18px; }
.h-ab .h-w-create-txt h2 { font: italic 400 clamp(40px, 3.6vw, 58px) var(--serif); color: #f6cc85; text-shadow: 0 0 22px rgba(255, 200, 120, 0.35); }
.h-w-create-txt > p { color: #e8ecf3; font-size: 17px; line-height: 1.6; }
.h-w-create-txt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.h-w-create-txt li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #e8ecf3; }
.h-w-create-txt li svg { flex: none; color: var(--gold); filter: drop-shadow(0 0 6px rgba(255, 200, 120, 0.6)); }
.h-w-create-txt .h-row { margin-top: 8px; }
.h-w-create-menu { position: absolute; left: 47%; top: 50%; transform: translateY(-50%); list-style: none; margin: 0; padding: 10px; width: 210px; border-radius: 16px; border: 1px solid rgba(120, 170, 255, 0.45); background: rgba(10, 18, 40, 0.72); backdrop-filter: blur(8px); box-shadow: 0 0 30px rgba(80, 140, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08); display: grid; gap: 4px; }
.h-w-create-menu li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14.5px; color: #e3e8f0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.h-w-create-menu li svg { color: #cfe0ff; }
.h-w-create-menu li.on { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); }
.h-w-create-menu li.on svg { color: var(--gold); }

/* Цифры — вариант 1 */
.h-w-numbers { position: relative; isolation: isolate; padding: clamp(70px, 6vw, 110px) 0 clamp(40px, 4vw, 60px); }
.h-w-numbers::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 12, 26, 0.7) 0%, rgba(8, 12, 26, 0.15) 30%, rgba(8, 12, 26, 0.35) 70%, rgb(var(--bg)) 100%), url(https://selidar.com/site/space.webp) center 100% / cover no-repeat; }
.h-w-numbers ul { list-style: none; margin-inline: auto; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.h-w-numbers li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 6px 10px; border-left: 1px solid rgba(255, 236, 210, 0.2); color: var(--gold); }
.h-w-numbers li:first-child { border-left: 0; }
.h-w-numbers li svg { filter: drop-shadow(0 0 8px rgba(255, 200, 120, 0.6)); }
.h-w-numbers b { font: 600 clamp(34px, 3vw, 46px)/1.1 var(--serif); color: #f6cc85; text-shadow: 0 0 18px rgba(255, 200, 120, 0.35); }
.h-w-numbers b.word { font-size: clamp(24px, 2vw, 30px); padding-top: 8px; }
.h-w-numbers span { color: #e8ecf3; font-size: 15px; }

@media (max-width: 1180px) {
  .h-w-feats { grid-template-columns: repeat(3, 1fr); row-gap: 14px; }
  .h-w-colls { grid-template-columns: repeat(3, 1fr); }
  .h-w-flags, .h-w-cards { grid-template-columns: repeat(2, 1fr); }
  .h-w-flags > :last-child:nth-child(odd), .h-w-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .h-w-flags > :last-child:nth-child(odd) { aspect-ratio: 16 / 7; }
  .h-w-how { grid-template-columns: repeat(3, 1fr); }
  .h-w-find-grid { grid-template-columns: repeat(2, 1fr); }
  .h-w-create-menu { display: none; }
  .h-w-filter { display: flex; }
}
@media (max-width: 760px) {
  .h-w-hero { min-height: 0; }
  .h-w-hero::before { background: linear-gradient(180deg, rgba(10, 15, 32, 0.45), rgba(10, 15, 32, 0.6) 55%, rgb(var(--bg))), url(https://selidar.com/site/w-hero.webp) 70% center / cover no-repeat; }
  .h-w-hero-txt { padding-top: 110px; }
  .h .h-w-hero .h-btn.lg, .h .h-w-create .h-btn.lg { min-width: 0; width: 100%; flex: none; }
  .h-w-feats { grid-template-columns: repeat(2, 1fr); }
  .h-w-colls { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .h-w-coll { height: 120px; }
  .h-w-coll b { font-size: 17px; }
  .h-w-filter-wrap { top: 60px; }
  .h-w-flags, .h-w-cards, .h-w-find-grid, .h-w-route { grid-template-columns: 1fr; }
  .h-w-flags > :last-child:nth-child(odd) { aspect-ratio: 4 / 4.6; }
  .h-w-how { grid-template-columns: repeat(2, 1fr); }
  .h-w-route li + li::before { display: none; }
  .h-w-cat-head { grid-template-columns: auto 1fr; }
  .h-w-cat-head > em { display: none; }
  .h-w-card-foot { flex-wrap: wrap; }
  .h .h-w-play { margin-left: 0; width: 100%; justify-content: center; padding: 10px; }
  .h-w-create::before { background: linear-gradient(180deg, rgba(8, 12, 26, 0.55), rgba(8, 12, 26, 0.85) 60%), url(https://selidar.com/site/w-create.webp) 75% center / cover no-repeat; }
  .h-w-numbers ul { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .h-w-numbers li:nth-child(3) { border-left: 0; }
}

/* ── Страница «Персонажи» (/characters): каркас как у «Миров», карточки-портреты по 4 в ряд ── */
.h-c-hero::before { background: radial-gradient(ellipse 760px 360px at calc(var(--pad) + 320px) 46%, rgba(10, 15, 32, 0.66), transparent 100%), linear-gradient(180deg, rgba(10, 15, 32, 0.35) 0%, transparent 16%, transparent 66%, rgba(14, 22, 42, 0.85) 100%), url(https://selidar.com/site/c-hero.webp) center 30% / cover no-repeat; }
.h-c-feats { grid-template-columns: repeat(5, 1fr); }
.h-c-filter { grid-template-columns: repeat(6, 1fr); }
.h-c-star .h-w-badge { left: auto; }
.h-c-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.h-c-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, rgba(22, 28, 52, 0.94), rgba(12, 16, 34, 0.96)); border: 1px solid rgba(255, 230, 190, 0.26); box-shadow: 0 14px 34px rgba(2, 4, 12, 0.5); transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; }
.h-c-card:hover { transform: translateY(-3px); border-color: rgba(242, 199, 127, 0.75); box-shadow: 0 18px 40px rgba(3, 6, 16, 0.55), 0 0 22px rgba(255, 196, 110, 0.16); }
.h-c-card-img { position: relative; isolation: isolate; aspect-ratio: 4 / 4.4; display: flex; align-items: flex-end; padding: 14px 16px; background-size: cover; background-repeat: no-repeat; }
.h-c-card-img::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 50%, rgba(12, 16, 34, 0.92) 100%); }
.h-c-card-img > div { display: flex; flex-direction: column; gap: 2px; }
.h-ab .h-c-card-img h3 { font: italic 400 27px/1.1 var(--serif); color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7); }
.h-c-card-img small { font-size: 12.5px; color: var(--gold); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); }
.h-c-card-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; }
.h-c-card-body p { color: #dbe1ea; font-size: 13.5px; line-height: 1.55; }
.h-c-traits { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.h-c-traits li { padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(255, 246, 232, 0.28); font-size: 11.5px; color: #e3e8f0; }
.h .h-c-card-body .h-w-play { margin: auto 0 0; justify-content: center; padding: 10px; }
.h-c-create::before { background: linear-gradient(90deg, rgba(8, 12, 26, 0.92) 0%, rgba(8, 12, 26, 0.7) 32%, rgba(8, 12, 26, 0.1) 55%, rgba(8, 12, 26, 0) 70%), linear-gradient(180deg, transparent 75%, rgba(8, 12, 26, 0.8) 100%), url(https://selidar.com/site/c-create.webp) right 40% / cover no-repeat; }
@media (max-width: 1180px) {
  .h-c-cards { grid-template-columns: repeat(2, 1fr); }
  .h-c-feats { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 760px) {
  .h-c-hero::before { background: linear-gradient(180deg, rgba(10, 15, 32, 0.45), rgba(10, 15, 32, 0.6) 55%, rgb(var(--bg))), url(https://selidar.com/site/c-hero.webp) 60% center / cover no-repeat; }
  .h-c-feats { grid-template-columns: repeat(2, 1fr); }
  .h-c-feats > :last-child { grid-column: 1 / -1; }
  .h-c-cards { gap: 12px; }
  .h-ab .h-c-card-img h3 { font-size: 21px; }
  .h-c-card-body p { font-size: 12.5px; }
  .h-c-create::before { background: linear-gradient(180deg, rgba(8, 12, 26, 0.55), rgba(8, 12, 26, 0.85) 60%), url(https://selidar.com/site/c-create.webp) 75% center / cover no-repeat; }
}

/* ── Страница «Обучение» (/learning): каркас «Миров»/«Персонажей» ── */
.h-l-hero::before { background: radial-gradient(ellipse 760px 360px at calc(var(--pad) + 320px) 46%, rgba(10, 15, 32, 0.66), transparent 100%), linear-gradient(180deg, rgba(10, 15, 32, 0.35) 0%, transparent 16%, transparent 66%, rgba(14, 22, 42, 0.85) 100%), url(https://selidar.com/site/l-hero.webp) 60% 40% / cover no-repeat; }
.h-l-hero h1 em { display: block; }
.h-l-hero .h-w-hero-txt > p { max-width: 520px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 14px rgba(0, 0, 0, 0.8); }
.h-l-langs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.h-l-lang .h-c-card-img { aspect-ratio: 16 / 10; }
.h-l-lang .h-w-badge:not(.soon) { color: #d9ffe6; border-color: rgba(120, 220, 160, 0.8); }
.h-l-flag { position: absolute; left: 14px; top: 12px; min-width: 40px; height: 40px; padding: 0 8px; border-radius: 12px; display: grid; place-items: center; font: 700 14px var(--sans); color: #ffe6b4; background: rgba(10, 14, 30, 0.7); border: 1px solid rgba(242, 199, 127, 0.6); backdrop-filter: blur(6px); }
.h-l-lesson { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 70px); align-items: center; }
.h-l-p { color: #dfe4ec; font-size: 15.5px; line-height: 1.7; margin-bottom: 22px; }
.h-l-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.h-l-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255, 230, 190, 0.22); background: rgba(9, 13, 28, 0.6); }
.h-l-steps em { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--sans); font-style: normal; color: #1d1608; background: linear-gradient(180deg, #ffe7b0, #dea153); box-shadow: 0 0 12px rgba(255, 190, 100, 0.5); }
.h-l-steps span { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--mut); }
.h-l-steps b { font-size: 14.5px; color: var(--txt); }
.h-l-chat { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 20px; background: rgba(12, 17, 36, 0.92); border: 1px solid rgba(255, 230, 190, 0.3); box-shadow: 0 24px 60px rgba(2, 4, 12, 0.6), 0 0 30px rgba(255, 196, 110, 0.1); }
.h-l-chat .h-ab-msg { font-size: 14px; max-width: 86%; }
.h-l-fix, .h-l-word { display: block; margin-top: 8px; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.45; }
.h-l-fix { background: rgba(242, 199, 127, 0.14); color: #ffe6b4; border-left: 2px solid var(--gold); }
.h-l-word { background: rgba(120, 170, 255, 0.14); color: #cfe0ff; border-left: 2px solid #8fb6ff; }
.h-l-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 26px; }
.h-l-level { display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 18px; }
.h-l-level.best { border-color: rgba(242, 199, 127, 0.8); box-shadow: 0 0 26px rgba(255, 196, 110, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.h-l-level b { font: 600 34px/1 var(--serif); color: #f6cc85; text-shadow: 0 0 16px rgba(255, 200, 120, 0.35); }
.h-ab .h-l-level h3 { font: 600 18px var(--sans); color: var(--txt); }
.h-l-level p { color: #d6dce7; font-size: 14px; line-height: 1.6; }
.h-l .h-ab-vs-s::after { content: none; }
.h-l .h-ab-vs { max-width: none; }
.h-l-cta::before { background: linear-gradient(90deg, rgba(var(--bg), 0.9) 0%, rgba(var(--bg), 0.5) 36%, rgba(var(--bg), 0) 62%), linear-gradient(180deg, rgb(var(--bg)) 0%, transparent 22%, transparent 80%, rgb(var(--bg)) 100%), url(https://selidar.com/site/l-cta.webp) center 25% / cover no-repeat; }
@media (max-width: 1180px) {
  .h-l-langs, .h-l-levels { grid-template-columns: repeat(2, 1fr); }
  .h-l-levels > :last-child { grid-column: 1 / -1; }
  .h-l-lesson { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .h-l-hero::before { background: linear-gradient(180deg, rgba(10, 15, 32, 0.45), rgba(10, 15, 32, 0.6) 55%, rgb(var(--bg))), url(https://selidar.com/site/l-hero.webp) 65% center / cover no-repeat; }
  .h-l-langs, .h-l-levels, .h-l-steps { grid-template-columns: 1fr; }
  .h-l-cta::before { background: linear-gradient(180deg, rgb(var(--bg)) 0%, rgba(var(--bg), 0.5) 40%, rgba(var(--bg), 0.85) 100%), url(https://selidar.com/site/l-cta.webp) 65% center / cover no-repeat; }
}

/* ── Страница «Практики» (/mindfulness) ── */
.h-p-hero::before { background: radial-gradient(ellipse 760px 360px at calc(var(--pad) + 320px) 46%, rgba(10, 15, 32, 0.62), transparent 100%), linear-gradient(180deg, rgba(10, 15, 32, 0.35) 0%, transparent 16%, transparent 66%, rgba(14, 22, 42, 0.85) 100%), url(https://selidar.com/site/p-hero.webp) 60% 45% / cover no-repeat; }
.h-p-hero h1 em { display: block; }
.h-p-dreams { position: relative; isolation: isolate; padding: clamp(60px, 5vw, 90px) 0; }
.h-p-dreams::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 12, 26, 0.8) 0%, rgba(8, 12, 26, 0.4) 45%, rgba(8, 12, 26, 0.05) 75%), linear-gradient(180deg, rgba(8, 12, 26, 0.35), transparent 25%, transparent 70%, rgba(8, 12, 26, 0.75)), url(https://selidar.com/site/p-dreams.webp) center 40% / cover no-repeat; }
.h-p-dreams-txt { max-width: 720px; display: grid; gap: 14px; margin-bottom: 30px; }
.h-p-dreams-txt p { color: #e3e8f0; font-size: 16px; line-height: 1.7; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); }
.h-p-night { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.h-p-night li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: 18px; background: rgba(9, 13, 28, 0.72); border: 1px solid rgba(255, 230, 190, 0.26); backdrop-filter: blur(8px); box-shadow: 0 14px 34px rgba(2, 4, 12, 0.5); }
.h-p-night li > span { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; color: var(--gold); border: 1px solid rgba(242, 199, 127, 0.5); background: rgba(242, 199, 127, 0.08); box-shadow: 0 0 18px rgba(255, 196, 110, 0.2); }
.h-p-night em { position: absolute; right: 18px; top: 14px; font: italic 400 34px var(--serif); color: rgba(246, 204, 133, 0.5); }
.h-p-night b { font-size: 17px; color: var(--txt); }
.h-p-night p { color: #d6dce7; font-size: 14px; line-height: 1.6; }
.h-p-care { display: grid; grid-template-columns: auto 1fr auto; gap: 18px 28px; align-items: center; padding: 18px 24px; border-radius: 16px; background: rgba(9, 13, 28, 0.8); border: 1px solid rgba(120, 220, 160, 0.35); }
.h-p-care > b { display: flex; align-items: center; gap: 10px; color: #d9ffe6; font-size: 15px; white-space: nowrap; }
.h-p-care > b svg { color: #7ee2a8; }
.h-p-care ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.h-p-care li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: #dfe4ec; }
.h-p-care li svg { flex: none; margin-top: 2px; color: #7ee2a8; }
.h-p-mentors { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.h-p-mentor { display: grid; grid-template-columns: 42% 1fr; min-height: 280px; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, rgba(22, 28, 52, 0.94), rgba(12, 16, 34, 0.96)); border: 1px solid rgba(255, 230, 190, 0.26); box-shadow: 0 14px 34px rgba(2, 4, 12, 0.5); }
.h-p-mentor > i { position: relative; background-size: cover; background-repeat: no-repeat; }
.h-p-mentor > div { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.h-ab .h-p-mentor h3 { font: italic 400 32px/1.1 var(--serif); color: var(--cream); }
.h-p-mentor small { color: var(--gold); font-size: 13px; }
.h-p-mentor p { color: #dbe1ea; font-size: 14.5px; line-height: 1.6; }
.h .h-p-mentor .h-w-play { margin: auto 0 0; align-self: flex-start; }
.h-p-cta::before { background: linear-gradient(90deg, rgba(var(--bg), 0.9) 0%, rgba(var(--bg), 0.5) 36%, rgba(var(--bg), 0) 62%), linear-gradient(180deg, rgb(var(--bg)) 0%, transparent 22%, transparent 80%, rgb(var(--bg)) 100%), url(https://selidar.com/site/p-cta.webp) center 35% / cover no-repeat; }
@media (max-width: 1180px) {
  .h-p-care { grid-template-columns: 1fr; }
  .h-p-mentors { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .h-p-hero::before { background: linear-gradient(180deg, rgba(10, 15, 32, 0.45), rgba(10, 15, 32, 0.6) 55%, rgb(var(--bg))), url(https://selidar.com/site/p-hero.webp) 70% center / cover no-repeat; }
  .h-p-night, .h-p-care ul { grid-template-columns: 1fr; }
  .h-w-head h2 { display: block; }
  .h-p-mentor { grid-template-columns: 1fr; }
  .h-p-mentor > i { aspect-ratio: 16 / 11; }
  .h-p-cta::before { background: linear-gradient(180deg, rgb(var(--bg)) 0%, rgba(var(--bg), 0.5) 40%, rgba(var(--bg), 0.85) 100%), url(https://selidar.com/site/p-cta.webp) 65% center / cover no-repeat; }
}

/* ===== «Тарифы» (/pricing) ===== */
.h-t-hero::before { background: radial-gradient(ellipse 760px 380px at calc(var(--pad) + 320px) 46%, rgba(10, 15, 32, 0.72), transparent 100%), linear-gradient(180deg, rgba(10, 15, 32, 0.35) 0%, transparent 16%, transparent 66%, rgba(14, 22, 42, 0.85) 100%), url(https://selidar.com/site/t-hero.webp) 60% 40% / cover no-repeat; }
.h-t-hero h1 em { display: block; }
.h-t-hero .h-w-hero-txt > p { max-width: 540px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 14px rgba(0, 0, 0, 0.8); }
.h-t-pick { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.h-t-pick li { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 20px; border-radius: 18px; background: linear-gradient(180deg, rgba(22, 28, 52, 0.94), rgba(12, 16, 34, 0.96)); border: 1px solid rgba(255, 230, 190, 0.26); box-shadow: 0 14px 34px rgba(2, 4, 12, 0.5); }
.h-t-pick li > span { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: var(--gold); border: 1px solid rgba(242, 199, 127, 0.5); background: rgba(242, 199, 127, 0.08); box-shadow: 0 0 18px rgba(255, 196, 110, 0.2); }
.h-t-pick b { font-size: 17px; color: var(--txt); }
.h-t-pick p { color: #d6dce7; font-size: 14px; line-height: 1.6; }
.h-t-pick a { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-size: 14px; font-weight: 600; text-decoration: none; }
.h-t-plans-head { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; margin-bottom: 30px; }
.h-t-plans-head p { color: #dfe4ec; max-width: 640px; font-size: 15.5px; }
.h-t-toggle { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(9, 13, 28, 0.75); border: 1px solid rgba(255, 230, 190, 0.3); }
.h-t-toggle button { border: 0; cursor: pointer; padding: 9px 20px; border-radius: 999px; background: transparent; color: #dfe4ec; font: 600 14px var(--sans); }
.h-t-toggle button.on { background: linear-gradient(180deg, #ffe7b0, #e9b25f); color: #1d1608; }
.h-t-toggle em { font-style: normal; margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; background: rgba(126, 226, 168, 0.18); color: #9ff0c1; }
.h-t-toggle button.on em { background: rgba(29, 22, 8, 0.15); color: #1d1608; }
.h-t-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 380px)); justify-content: center; gap: 26px; }
.h .h-t-plan { padding: 28px 28px 24px; gap: 10px; background: linear-gradient(180deg, rgba(22, 28, 52, 0.92), rgba(12, 16, 34, 0.95)); border: 1px solid rgba(255, 230, 190, 0.26); }
.h .h-t-plan.accent { background: linear-gradient(180deg, rgba(92, 76, 58, 0.75), rgba(22, 26, 44, 0.92)); transform: translateY(-8px); }
.h-t-plan .h-plan-name { font: italic 400 30px var(--serif); color: var(--cream); }
.h-t-who { color: var(--mut); font-size: 13.5px; }
.h-t-plan .h-plan-price { font-size: 38px; border: 0; padding: 6px 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.h-t-old { font-size: 16px; color: var(--mut); text-decoration: line-through; font-weight: 400; }
.h-t-billed { color: #9ff0c1; font-size: 12.5px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 236, 210, 0.16); }
.h .h-t-plan .h-checks.xs { font-size: 14px; gap: 10px; margin-bottom: 8px; flex: 1; }
.h-t-plan .h-checks svg, .h-t-tour .h-checks svg, .h-t-local .h-checks svg { flex: none; margin-top: 2px; color: var(--gold); }
.h-t-demo { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 26px; color: var(--mut); font-size: 13.5px; text-align: center; }
.h-t-demo svg { color: var(--gold); flex: none; }
.h-t-table-wrap { max-width: 1080px; margin: 26px auto 0; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255, 230, 190, 0.26); background: rgba(12, 16, 34, 0.9); box-shadow: 0 14px 34px rgba(2, 4, 12, 0.5); }
.h-t-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.h-t-table th, .h-t-table td { padding: 14px 20px; text-align: center; border-top: 1px solid rgba(255, 238, 214, 0.09); }
.h-t-table th { border-top: 0; background: rgba(255, 236, 210, 0.05); font: italic 400 22px var(--serif); color: var(--cream); }
.h-t-table th:first-child { font: 600 13px var(--sans); color: var(--mut); text-transform: uppercase; letter-spacing: 0.06em; }
.h-t-table th:first-child, .h-t-table td:first-child { text-align: left; color: var(--txt); width: 40%; }
.h-t-table .accent { background: rgba(242, 199, 127, 0.07); }
.h-t-table th.accent { color: #f6cc85; }
.h-t-table td svg { color: var(--gold); vertical-align: middle; }
.h-t-table td small { color: #dfe4ec; font-size: 13.5px; }
.h-t-no { color: rgba(255, 255, 255, 0.28); }
.h-t-tours { position: relative; isolation: isolate; padding: clamp(60px, 5vw, 90px) 0; }
.h-t-tours::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 12, 26, 0.85) 0%, rgba(8, 12, 26, 0.45) 50%, rgba(8, 12, 26, 0.15) 80%), linear-gradient(180deg, rgba(8, 12, 26, 0.4), transparent 25%, transparent 55%, rgba(8, 12, 26, 0.85)), url(https://selidar.com/site/s-varun.webp) center 45% / cover no-repeat; }
.h-t-tours-txt { max-width: 700px; display: grid; gap: 14px; margin-bottom: 30px; }
.h-t-tours-txt p { color: #e3e8f0; font-size: 16px; line-height: 1.7; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); }
.h-t-tours-txt > b { display: inline-flex; align-items: center; gap: 8px; color: #f6cc85; font-size: 15px; }
.h-t-tour-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.h-t-tour { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 18px; background: rgba(9, 13, 28, 0.78); border: 1px solid rgba(255, 230, 190, 0.26); backdrop-filter: blur(8px); box-shadow: 0 14px 34px rgba(2, 4, 12, 0.5); }
.h-t-tour.best { border: 1.5px solid #f6cf86; box-shadow: 0 0 30px rgba(255, 190, 100, 0.3), 0 14px 34px rgba(2, 4, 12, 0.5); }
.h-t-tour .h-plan-name { font: italic 400 26px var(--serif); color: var(--cream); }
.h-t-tour-price { font-size: 32px; font-weight: 600; color: #fff; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 236, 210, 0.16); }
.h-t-tour.best .h-t-tour-price { color: var(--gold); }
.h-t-tour-price small { font-size: 13px; color: var(--mut); font-weight: 400; }
.h .h-t-tour .h-checks.xs { font-size: 14px; gap: 9px; flex: 1; }
.h-t-packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.h-t-pack { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 6px 18px; align-items: center; padding: 22px 24px; border-radius: 18px; background: linear-gradient(180deg, rgba(22, 28, 52, 0.94), rgba(12, 16, 34, 0.96)); border: 1px solid rgba(255, 230, 190, 0.26); box-shadow: 0 14px 34px rgba(2, 4, 12, 0.5); }
.h-t-pack.best { border: 1.5px solid #f6cf86; background: linear-gradient(180deg, rgba(92, 76, 58, 0.6), rgba(22, 26, 44, 0.92)); box-shadow: 0 0 30px rgba(255, 190, 100, 0.3); }
.h-t-coin { grid-row: span 2; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; color: #1d1608; background: radial-gradient(circle at 35% 30%, #fff1c9, #e9b25f 70%); box-shadow: 0 0 20px rgba(255, 196, 110, 0.45); }
.h-t-pack > div { color: var(--mut); font-size: 14px; }
.h-t-pack > div b { font-size: 26px; color: var(--txt); }
.h-t-pack > div small { display: block; color: #9ff0c1; font-size: 12.5px; margin-top: 2px; }
.h-t-pack > strong { font-size: 22px; color: var(--gold); }
.h .h-t-pack .h-btn { grid-column: 1 / -1; margin-top: 10px; justify-content: center; }
.h-ab .h-t-spend-t { margin: 34px 0 16px; font: 600 15px var(--sans); color: var(--mut); text-transform: uppercase; letter-spacing: 0.06em; }
.h-t-spend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.h-t-spend li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 16px; background: rgba(255, 236, 210, 0.04); border: 1px solid rgba(255, 230, 190, 0.16); }
.h-t-spend li > span { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--gold); border: 1px solid rgba(242, 199, 127, 0.45); background: rgba(242, 199, 127, 0.08); }
.h-t-spend b { font-size: 22px; color: var(--txt); }
.h-t-spend b small { font-size: 13px; color: var(--mut); font-weight: 400; }
.h-t-spend p { color: #d6dce7; font-size: 13.5px; line-height: 1.5; margin-top: 2px; }
.h-t-local { position: relative; isolation: isolate; min-height: 560px; display: flex; align-items: center; padding: clamp(60px, 5vw, 90px) 0; }
.h-t-local::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 12, 26, 0.92) 0%, rgba(8, 12, 26, 0.7) 38%, rgba(8, 12, 26, 0.05) 70%), linear-gradient(180deg, rgba(8, 12, 26, 0.5), transparent 20%, transparent 80%, rgba(8, 12, 26, 0.6)), url(https://selidar.com/site/t-local.webp) 70% 55% / cover no-repeat; }
.h-t-local-txt { position: relative; max-width: 560px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.h-t-local-txt .h-w-badge { position: static; }
.h-t-local-txt p { color: #e3e8f0; font-size: 16px; line-height: 1.7; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); }
.h-t-local .h-checks { font-size: 15px; color: var(--txt); margin-bottom: 8px; }
.h-t-cta::before { background: linear-gradient(90deg, rgba(var(--bg), 0.92) 0%, rgba(var(--bg), 0.55) 34%, rgba(var(--bg), 0) 55%), linear-gradient(180deg, rgb(var(--bg)) 0%, transparent 22%, transparent 80%, rgb(var(--bg)) 100%), url(https://selidar.com/site/t-cta.webp) 20% 45% / cover no-repeat; }
.h-t-cta h2 em { display: block; }
.h-t-plans-head h2 { margin: 0; }
@media (max-width: 1180px) {
  .h-t-pick, .h-t-spend { grid-template-columns: repeat(2, 1fr); }
  .h-t-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .h .h-t-plan { padding: 22px 20px; }
  .h-t-packs, .h-t-tour-row { gap: 16px; }
  .h-t-pack { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .h-t-coin { grid-row: auto; }
}
@media (max-width: 760px) {
  .h-t-hero::before { background: linear-gradient(180deg, rgba(10, 15, 32, 0.45), rgba(10, 15, 32, 0.6) 55%, rgb(var(--bg))), url(https://selidar.com/site/t-hero.webp) 72% center / cover no-repeat; }
  .h-t-pick, .h-t-spend, .h-t-plans, .h-t-packs, .h-t-tour-row { grid-template-columns: 1fr; }
  .h .h-t-plan.accent { transform: none; }
  .h-t-table { table-layout: fixed; }
  .h-t-table th, .h-t-table td { padding: 10px 4px; font-size: 12.5px; }
  .h-t-table th:first-child, .h-t-table td:first-child { width: 31%; padding-left: 10px; }
  .h-t-table th { font-size: 14px; }
  .h-t-table th:first-child { font-size: 10px; letter-spacing: 0.02em; }
  .h-t-table td small { font-size: 11px; }
  .h-t-local::after { background: linear-gradient(180deg, rgba(8, 12, 26, 0.55), rgba(8, 12, 26, 0.85) 45%, rgba(8, 12, 26, 0.95)), url(https://selidar.com/site/t-local.webp) 70% top / cover no-repeat; }
  .h-t-cta::before { background: linear-gradient(180deg, rgb(var(--bg)) 0%, rgba(var(--bg), 0.5) 40%, rgba(var(--bg), 0.85) 100%), url(https://selidar.com/site/t-cta.webp) 65% center / cover no-repeat; }
}

/* ===== «Создателям» (/creators) ===== */
.h-cr-hero::before { background: radial-gradient(ellipse 760px 380px at calc(var(--pad) + 320px) 50%, rgba(10, 15, 32, 0.74), transparent 100%), linear-gradient(180deg, rgba(10, 15, 32, 0.35) 0%, transparent 16%, transparent 66%, rgba(14, 22, 42, 0.85) 100%), url(https://selidar.com/site/cr-hero.webp) 60% 20% / cover no-repeat; }
.h-cr-hero h1 em { display: block; }
.h-cr-hero .h-w-hero-txt > p { max-width: 560px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 14px rgba(0, 0, 0, 0.8); }
.h-cr-mock { display: grid; grid-template-columns: 210px 1fr 300px; grid-template-rows: auto 1fr; max-width: 1180px; margin: 0 auto; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255, 230, 190, 0.3); background: rgba(12, 16, 34, 0.92); box-shadow: 0 24px 60px rgba(2, 4, 12, 0.6), 0 0 30px rgba(255, 196, 110, 0.1); font-size: 12.5px; }
.h-cr-mock-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 236, 210, 0.1); background: rgba(255, 236, 210, 0.03); }
.h-cr-mock-top b { display: inline-flex; align-items: center; gap: 8px; color: var(--cream); font-size: 14px; }
.h-cr-mock-top b svg { color: var(--gold); }
.h-cr-mock-top span { color: var(--mut); margin-right: auto; }
.h-cr-mock-top i { font-style: normal; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-weight: 600; background: linear-gradient(180deg, #ffe7b0, #e9b25f); color: #1d1608; }
.h-cr-mock-top i.ghost { background: transparent; color: var(--txt); border: 1px solid rgba(255, 236, 210, 0.3); }
.h-cr-mock-nav { list-style: none; margin: 0; padding: 12px; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid rgba(255, 236, 210, 0.08); }
.h-cr-mock-nav small { display: block; color: var(--gold); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 3px; }
.h-cr-mock-nav span { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; color: #cfd6e3; }
.h-cr-mock-nav span.on { background: rgba(242, 199, 127, 0.12); color: var(--txt); }
.h-cr-mock-nav em { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.h-cr-mock-nav em { display: block; padding: 0; border: 0; box-shadow: none; }
.h-cr-mock-nav em.d-ok { background: #7ee2a8; }
.h-cr-mock-nav em.d-part { background: #f2c77f; }
.h-cr-mock-nav em.d-warn { background: #e07a7a; box-shadow: 0 0 8px #e07a7a; }
.h-cr-mock-main { display: flex; flex-direction: column; gap: 14px; padding: 16px; min-width: 0; }
.h-cr-mock-hero { min-height: 170px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 16px; border-radius: 14px; background: linear-gradient(90deg, rgba(8, 12, 26, 0.85), rgba(8, 12, 26, 0.1) 70%), url(https://selidar.com/site/s-elysium.webp) center / cover no-repeat; border: 1px solid rgba(255, 236, 210, 0.15); }
.h-cr-mock-hero b { font: italic 400 30px var(--serif); color: var(--cream); }
.h-cr-mock-hero small { color: #dfe4ec; }
.h-cr-mock-bars { display: grid; gap: 7px; padding: 14px; border-radius: 14px; background: rgba(255, 236, 210, 0.04); border: 1px solid rgba(255, 236, 210, 0.1); }
.h-cr-mock-bars > small { color: var(--mut); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; }
.h-cr-mock-bars div { display: grid; grid-template-columns: 90px 1fr 40px; gap: 10px; align-items: center; color: #dfe4ec; }
.h-cr-mock-bars i { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.h-cr-mock-bars s { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #e9b25f, #ffe7b0); }
.h-cr-mock-bars em { font-style: normal; color: var(--gold); text-align: right; }
.h-cr-mock-issue { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; color: #f3c9c9; background: rgba(224, 122, 122, 0.1); border: 1px solid rgba(224, 122, 122, 0.35); }
.h-cr-mock-issue u { margin-left: auto; text-decoration: none; color: var(--gold); white-space: nowrap; }
.h-cr-mock-co { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-left: 1px solid rgba(255, 236, 210, 0.08); background: rgba(255, 236, 210, 0.02); }
.h-cr-mock-co > small { display: flex; align-items: center; gap: 6px; color: var(--gold); font-weight: 600; font-size: 12px; }
.h-cr-mock-co p { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); color: #dfe4ec; line-height: 1.5; }
.h-cr-mock-co p.me { align-self: flex-end; background: rgba(242, 199, 127, 0.14); color: var(--txt); }
.h-cr-mock-sug { display: grid; gap: 10px; padding: 12px; border-radius: 12px; border: 1px solid rgba(242, 199, 127, 0.5); background: rgba(242, 199, 127, 0.06); }
.h-cr-mock-sug b { color: var(--txt); font-weight: 600; line-height: 1.4; }
.h-cr-mock-sug span { display: flex; gap: 6px; flex-wrap: wrap; }
.h-cr-mock-sug i { font-style: normal; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255, 236, 210, 0.3); color: var(--txt); font-size: 11.5px; }
.h-cr-mock-sug i.gold { background: linear-gradient(180deg, #ffe7b0, #e9b25f); color: #1d1608; border: 0; font-weight: 600; }
.h-cr-groups { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; max-width: 1180px; margin: 28px auto 0; }
.h-cr-groups > div { padding: 18px; border-radius: 16px; background: rgba(9, 13, 28, 0.78); border: 1px solid rgba(255, 230, 190, 0.22); backdrop-filter: blur(6px); }
.h-cr-groups b { display: block; font: italic 400 22px var(--serif); color: #f6cc85; margin-bottom: 8px; }
.h-cr-groups ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.h-cr-groups li { color: #dfe4ec; font-size: 13.5px; padding-left: 14px; position: relative; }
.h-cr-groups li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.h-cr-co::after { background: linear-gradient(90deg, rgba(8, 12, 26, 0.92) 0%, rgba(8, 12, 26, 0.72) 40%, rgba(8, 12, 26, 0.1) 72%), linear-gradient(180deg, rgba(8, 12, 26, 0.5), transparent 20%, transparent 80%, rgba(8, 12, 26, 0.6)), url(https://selidar.com/site/cr-studio.webp) 70% 50% / cover no-repeat; }
.h-cr-safe { grid-template-columns: repeat(3, 1fr); margin-top: 26px; }
.h-cr-vs::after { background-image: url(https://selidar.com/site/w-create.webp); }
.h-cr-earn { margin-top: 26px; }
.h-cr-early { display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; align-items: center; }
.h-cr-early p { color: #e3e8f0; font-size: 16px; line-height: 1.7; margin: 14px 0 24px; max-width: 560px; }
.h-cr-who { padding: 24px; border-radius: 18px; background: rgba(9, 13, 28, 0.8); border: 1px solid rgba(255, 230, 190, 0.26); box-shadow: 0 14px 34px rgba(2, 4, 12, 0.5); }
.h-cr-who > small { display: block; color: var(--mut); text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; margin-bottom: 14px; }
.h-cr-who ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.h-cr-who li { display: flex; align-items: center; gap: 12px; color: var(--txt); font-size: 14.5px; line-height: 1.35; }
.h-cr-who li span { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: var(--gold); border: 1px solid rgba(242, 199, 127, 0.45); background: rgba(242, 199, 127, 0.08); }
.h-cr-cta::before { background: linear-gradient(90deg, rgba(var(--bg), 0.92) 0%, rgba(var(--bg), 0.6) 34%, rgba(var(--bg), 0) 58%), linear-gradient(180deg, rgb(var(--bg)) 0%, transparent 22%, transparent 80%, rgb(var(--bg)) 100%), url(https://selidar.com/site/cr-cta.webp) center 55% / cover no-repeat; }
.h-cr-cta h2 em { display: block; }
@media (max-width: 1180px) {
  .h-cr-mock { grid-template-columns: 180px 1fr; }
  .h-cr-mock-co { grid-column: 1 / -1; border-left: 0; border-top: 1px solid rgba(255, 236, 210, 0.08); }
  .h-cr-groups { grid-template-columns: repeat(3, 1fr); }
  .h-cr-early { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  .h-cr-hero::before { background: linear-gradient(180deg, rgba(10, 15, 32, 0.45), rgba(10, 15, 32, 0.6) 55%, rgb(var(--bg))), url(https://selidar.com/site/cr-hero.webp) 62% top / cover no-repeat; }
  .h-cr-mock { grid-template-columns: 1fr; }
  .h-cr-mock-nav { display: none; }
  .h-cr-mock-top span, .h-cr-mock-top i.ghost { display: none; }
  .h-cr-mock-top b { margin-right: auto; }
  .h-cr-groups, .h-cr-safe, .h-cr-who ul { grid-template-columns: 1fr; }
  .h-cr-co::after { background: linear-gradient(180deg, rgba(8, 12, 26, 0.55), rgba(8, 12, 26, 0.85) 45%, rgba(8, 12, 26, 0.95)), url(https://selidar.com/site/cr-studio.webp) 60% top / cover no-repeat; }
  .h-cr-cta::before { background: linear-gradient(180deg, rgb(var(--bg)) 0%, rgba(var(--bg), 0.5) 40%, rgba(var(--bg), 0.85) 100%), url(https://selidar.com/site/cr-cta.webp) 60% center / cover no-repeat; }
  .h .h-cr-early .h-btn.lg, .h .h-cr-cta .h-btn.lg { min-width: 0; width: 100%; flex: none; }
}

/* ===== «Состояние сервиса» (/status) ===== */
.h-st-hero::before { background: radial-gradient(ellipse 760px 400px at calc(var(--pad) + 320px) 50%, rgba(10, 15, 32, 0.74), transparent 100%), linear-gradient(180deg, rgba(10, 15, 32, 0.35) 0%, transparent 16%, transparent 66%, rgba(14, 22, 42, 0.85) 100%), url(https://selidar.com/site/st-hero.webp) 70% 40% / cover no-repeat; }
.h-st-hero .h-w-hero-txt { gap: 20px; padding-top: 110px; }
.h-st-hero .h-w-hero-txt > p { max-width: 540px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 14px rgba(0, 0, 0, 0.8); }
.h-st-overall { --c: 242, 199, 127; align-self: flex-start; display: flex; align-items: center; gap: 16px; padding: 14px 22px 14px 18px; border-radius: 16px; background: rgba(9, 13, 28, 0.82); border: 1px solid rgba(var(--c), 0.6); box-shadow: 0 0 26px rgba(var(--c), 0.22); backdrop-filter: blur(8px); }
.h-st-overall.ok { --c: 126, 226, 168; } .h-st-overall.degraded { --c: 242, 199, 127; } .h-st-overall.down { --c: 224, 122, 122; } .h-st-overall.loading { --c: 180, 190, 210; }
.h-st-overall > i { width: 16px; height: 16px; border-radius: 50%; flex: none; background: rgb(var(--c)); box-shadow: 0 0 0 5px rgba(var(--c), 0.18), 0 0 16px rgb(var(--c)); animation: h-st-pulse 2s ease-in-out infinite; }
.h-st-overall b { display: block; font-size: 20px; color: rgb(var(--c)); }
.h-st-overall small { color: #cfd6e3; font-size: 13px; }
@keyframes h-st-pulse { 50% { box-shadow: 0 0 0 9px rgba(var(--c), 0.06), 0 0 22px rgb(var(--c)); } }
.h .h-st-hero button.h-btn { cursor: pointer; font: 600 15px/1.2 var(--sans); }
.h-st-feats { grid-template-columns: repeat(4, 1fr); }
.h-st-feats .h-feat b { font-variant-numeric: tabular-nums; }
.h-st-parts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.h-st-parts li { --c: 180, 190, 210; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: 14px 16px; padding: 22px; border-radius: 18px; background: linear-gradient(180deg, rgba(22, 28, 52, 0.94), rgba(12, 16, 34, 0.96)); border: 1px solid rgba(255, 230, 190, 0.22); box-shadow: 0 14px 34px rgba(2, 4, 12, 0.5); }
.h-st-parts li.ok, .h-st-legend li.ok { --c: 126, 226, 168; } .h-st-parts li.slow, .h-st-legend li.slow { --c: 242, 199, 127; } .h-st-parts li.down, .h-st-legend li.down { --c: 224, 122, 122; }
.h-st-parts li > span { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; color: var(--gold); border: 1px solid rgba(242, 199, 127, 0.5); background: rgba(242, 199, 127, 0.08); }
.h-st-parts b { font-size: 17px; color: var(--txt); }
.h-st-parts p { color: #d6dce7; font-size: 14px; line-height: 1.55; margin-top: 4px; }
.h-st-parts em { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(255, 236, 210, 0.1); font: 600 14px var(--sans); font-style: normal; color: rgb(var(--c)); font-variant-numeric: tabular-nums; }
.h-st-parts em i, .h-st-legend li > i { width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--c)); box-shadow: 0 0 10px rgb(var(--c)); }
.h-st-legend { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.h-st-legend li { --c: 180, 190, 210; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 12px; padding: 20px 22px; border-radius: 16px; background: rgba(9, 13, 28, 0.8); border: 1px solid rgba(var(--c), 0.45); backdrop-filter: blur(6px); }
.h-st-legend li > i { width: 14px; height: 14px; }
.h-st-legend b { color: rgb(var(--c)); font-size: 16px; }
.h-st-legend p { grid-column: 1 / -1; color: #d6dce7; font-size: 14px; line-height: 1.55; }
@media (max-width: 1180px) {
  .h-st-parts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .h-st-hero::before { background: linear-gradient(180deg, rgba(10, 15, 32, 0.5), rgba(10, 15, 32, 0.65) 55%, rgb(var(--bg))), url(https://selidar.com/site/st-hero.webp) 75% center / cover no-repeat; }
  .h-st-feats { grid-template-columns: 1fr 1fr; }
  .h-st-parts, .h-st-legend { grid-template-columns: 1fr; }
  .h-st-overall { align-self: stretch; }
}

/* ===== «Контакты» (/contacts) ===== */
.h-ct-hero::before { background: radial-gradient(ellipse 760px 400px at calc(var(--pad) + 320px) 50%, rgba(10, 15, 32, 0.74), transparent 100%), linear-gradient(180deg, rgba(10, 15, 32, 0.35) 0%, transparent 16%, transparent 66%, rgba(14, 22, 42, 0.85) 100%), url(https://selidar.com/site/ct-hero.webp) 65% 30% / cover no-repeat; }
.h-ct-hero h1 em { display: block; }
.h-ct-hero .h-w-hero-txt > p { max-width: 540px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 14px rgba(0, 0, 0, 0.8); }
.h-ct-mails { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.h-ct-mails li { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px 20px; border-radius: 18px; background: linear-gradient(180deg, rgba(22, 28, 52, 0.94), rgba(12, 16, 34, 0.96)); border: 1px solid rgba(255, 230, 190, 0.22); box-shadow: 0 14px 34px rgba(2, 4, 12, 0.5); }
.h-ct-mails li > span { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; color: var(--gold); border: 1px solid rgba(242, 199, 127, 0.5); background: rgba(242, 199, 127, 0.08); box-shadow: 0 0 18px rgba(255, 196, 110, 0.2); }
.h-ct-mails b { font-size: 17px; color: var(--txt); }
.h-ct-mails p { color: #d6dce7; font-size: 14px; line-height: 1.55; flex: 1; }
.h-ct-mails li > div { display: flex; align-items: center; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(255, 236, 210, 0.1); }
.h-ct-mails a { color: var(--gold); font-weight: 600; font-size: 15px; text-decoration: none; margin-right: auto; overflow-wrap: anywhere; }
.h-ct-mails button { flex: none; cursor: pointer; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 236, 210, 0.3); background: transparent; color: #dfe4ec; font: 600 12px var(--sans); }
.h-ct-mails button:hover { border-color: var(--gold); color: var(--gold); }
.h-ct-write { display: grid; grid-template-columns: 1.35fr 1fr; gap: 26px; align-items: start; }
.h-ct-form, .h-ct-panel { padding: 28px; border-radius: 20px; background: rgba(9, 13, 28, 0.85); border: 1px solid rgba(255, 230, 190, 0.26); box-shadow: 0 14px 34px rgba(2, 4, 12, 0.5); backdrop-filter: blur(8px); }
.h-ct-form { display: flex; flex-direction: column; gap: 16px; }
.h-ab .h-ct-form h2 { margin-bottom: 4px; }
.h-ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.h-ct-form label { display: flex; flex-direction: column; gap: 7px; }
.h-ct-form label > span { color: var(--mut); font-size: 13px; }
.h-ct-form input, .h-ct-form select, .h-ct-form textarea { width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 236, 210, 0.2); background: rgba(255, 255, 255, 0.04); color: var(--txt); font: 400 15px var(--sans); outline: none; resize: vertical; }
.h-ct-form select option { background: #141a30; }
.h-ct-form input:focus, .h-ct-form select:focus, .h-ct-form textarea:focus { border-color: rgba(242, 199, 127, 0.7); box-shadow: 0 0 0 3px rgba(242, 199, 127, 0.12); }
.h .h-ct-form .h-btn { align-self: flex-start; cursor: pointer; font: 600 15px/1.2 var(--sans); }
.h-ct-note { display: flex; gap: 8px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: rgba(242, 199, 127, 0.08); border: 1px solid rgba(242, 199, 127, 0.4); color: #f3e6cc; font-size: 14px; line-height: 1.5; }
.h-ct-note svg { flex: none; margin-top: 2px; color: var(--gold); }
.h-ct-side { display: flex; flex-direction: column; gap: 22px; }
.h-ct-panel > small { display: block; color: var(--mut); text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; margin-bottom: 14px; }
.h-ct-quick { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.h-ct-quick a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; text-decoration: none; background: rgba(255, 236, 210, 0.04); border: 1px solid rgba(255, 236, 210, 0.1); color: var(--gold); transition: border-color 0.2s; }
.h-ct-quick a:hover { border-color: rgba(242, 199, 127, 0.6); }
.h-ct-quick span { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; border: 1px solid rgba(242, 199, 127, 0.45); background: rgba(242, 199, 127, 0.08); }
.h-ct-quick b { display: block; color: var(--txt); font-size: 15px; }
.h-ct-quick small { color: var(--mut); font-size: 13px; }
.h-ct-panel .h-checks { font-size: 14.5px; color: var(--txt); }
.h-ct-panel .h-checks svg { flex: none; margin-top: 2px; color: var(--gold); }
.h-ct-social { position: relative; isolation: isolate; min-height: 620px; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(60px, 5vw, 90px) 0; }
.h-ct-social::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 12, 26, 0.55) 0%, rgba(8, 12, 26, 0.1) 30%, rgba(8, 12, 26, 0.35) 55%, rgba(8, 12, 26, 0.9) 100%), url(https://selidar.com/site/ct-community.webp) center 60% / cover no-repeat; }
.h-ct-social > .h-shell { display: flex; flex-direction: column; justify-content: space-between; gap: 140px; height: 100%; }
.h-ct-social-txt { max-width: 640px; display: grid; gap: 12px; }
.h-ct-social-txt p { color: #e3e8f0; font-size: 16px; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); }
.h-ct-nets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.h-ct-nets a { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; box-sizing: border-box; padding: 22px; border-radius: 18px; text-decoration: none; background: rgba(9, 13, 28, 0.8); border: 1px solid rgba(255, 230, 190, 0.26); backdrop-filter: blur(10px); box-shadow: 0 14px 34px rgba(2, 4, 12, 0.5); transition: border-color 0.2s, transform 0.2s; }
.h-ct-nets a:hover { border-color: rgba(242, 199, 127, 0.7); transform: translateY(-3px); }
.h-ct-nets span { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--gold); border: 1px solid rgba(242, 199, 127, 0.5); background: rgba(242, 199, 127, 0.08); margin-bottom: 6px; }
.h-ct-nets b { font-size: 18px; color: var(--txt); }
.h-ct-nets small { color: var(--gold); font-size: 13.5px; }
.h-ct-nets i { font-style: normal; color: var(--txt); font-weight: 600; font-size: 14px; margin-top: 6px; }
.h-ct-nets p { color: #d6dce7; font-size: 13.5px; line-height: 1.5; }
@media (max-width: 1180px) {
  .h-ct-mails { grid-template-columns: repeat(2, 1fr); }
  .h-ct-write { grid-template-columns: 1fr; }
  .h-ct-nets { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .h-ct-hero::before { background: linear-gradient(180deg, rgba(10, 15, 32, 0.5), rgba(10, 15, 32, 0.65) 55%, rgb(var(--bg))), url(https://selidar.com/site/ct-hero.webp) 68% center / cover no-repeat; }
  .h-ct-mails, .h-ct-row, .h-ct-nets { grid-template-columns: 1fr; }
  .h-ct-form, .h-ct-panel { padding: 20px; }
  .h .h-ct-form .h-btn { align-self: stretch; }
  .h-ct-social > .h-shell { gap: 60px; }
}

/* ===== Формы сайта: «Уведомить», «Оставить заявку», «Контакты» ===== */
.h button.h-w-play, .h button.h-btn { font-family: var(--sans); cursor: pointer; }
.h button.h-w-play.ghost { background: transparent; }
.h button.h-btn:disabled { opacity: 0.6; cursor: wait; }
.h-nf-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.h-nf-back { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(4, 6, 14, 0.7); backdrop-filter: blur(6px); animation: h-nf-in 0.18s ease-out; }
@keyframes h-nf-in { from { opacity: 0; } }
.h-nf { position: relative; width: min(440px, 100%); box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 20px; background: linear-gradient(180deg, rgba(26, 32, 58, 0.98), rgba(12, 16, 34, 0.98)); border: 1px solid rgba(242, 199, 127, 0.55); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 196, 110, 0.15); color: var(--txt); text-align: left; }
.h-nf > b { font: italic 400 28px var(--serif); color: var(--cream); padding-right: 30px; }
.h-nf > p { color: #d6dce7; font-size: 14.5px; line-height: 1.6; }
.h-nf input { width: 100%; box-sizing: border-box; padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(255, 236, 210, 0.25); background: rgba(255, 255, 255, 0.05); color: var(--txt); font: 400 15px var(--sans); outline: none; }
.h-nf input:focus { border-color: rgba(242, 199, 127, 0.7); box-shadow: 0 0 0 3px rgba(242, 199, 127, 0.12); }
.h .h-nf .h-btn { justify-content: center; }
.h-nf-x { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 236, 210, 0.25); background: transparent; color: var(--txt); font-size: 20px; line-height: 1; cursor: pointer; }
.h-nf-ok { padding: 14px; border-radius: 12px; color: #c9f5da !important; background: rgba(126, 226, 168, 0.1); border: 1px solid rgba(126, 226, 168, 0.4); }
.h-nf-err { color: #f3b4b4; font-size: 13px; }
.h-ct-note.ok { background: rgba(126, 226, 168, 0.1); border-color: rgba(126, 226, 168, 0.45); color: #d6f7e3; }
.h-ct-note.ok svg { color: #7ee2a8; }
.h.h-nf-root { min-height: 0; background: none; }

/* ===== Главная: «Свежее в блоге» ===== */
.h-blog { padding: calc(var(--gap-y) - 10px) 0 var(--gap-y); }
.h-blog-head h2 { font-style: italic; color: #f2c77f; }
.h-blog-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.h-blog-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, rgba(22, 28, 52, 0.94), rgba(12, 16, 34, 0.96)); border: 1px solid rgba(255, 230, 190, 0.22); box-shadow: 0 14px 34px rgba(2, 4, 12, 0.5); transition: transform 0.25s, border-color 0.25s; }
.h-blog-card:hover { transform: translateY(-4px); border-color: rgba(242, 199, 127, 0.6); }
.h .h-blog-img { position: relative; display: block; height: 210px; background-size: cover; background-position: center; }
.h-blog-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(12, 16, 34, 0.6)); }
.h-blog-img .h-w-badge { z-index: 1; left: 12px; right: auto; }
.h-blog-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.h-blog-body small { color: var(--mut); font-size: 12.5px; }
.h .h-blog-body h3 { font-size: 21px; line-height: 1.25; }
.h .h-blog-body h3 a:hover { color: var(--gold); }
.h-blog-body p { color: #d6dce7; font-size: 14px; line-height: 1.55; flex: 1; }
.h-blog-acts { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.h .h-blog-more { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); font-size: 14px; font-weight: 600; }
@media (max-width: 1180px) { .h-blog-row { grid-template-columns: 1fr 1fr; } .h-blog-card:nth-child(3) { grid-column: 1 / -1; } .h-blog-card:nth-child(3) .h-blog-img { height: 260px; } }
@media (max-width: 760px) { .h-blog-row { grid-template-columns: 1fr; } .h-blog-card:nth-child(3) .h-blog-img { height: 210px; } }

/* ===== «Вдвоём» (/together) ===== */
.h-tg-hero::before { background: radial-gradient(ellipse 760px 400px at calc(var(--pad) + 320px) 50%, rgba(10, 15, 32, 0.74), transparent 100%), linear-gradient(180deg, rgba(10, 15, 32, 0.35) 0%, transparent 16%, transparent 66%, rgba(14, 22, 42, 0.85) 100%), url(https://selidar.com/site/tg-hero.webp) 70% 45% / cover no-repeat; }
.h-tg-hero h1 em { display: block; }
.h-tg-hero .h-w-hero-txt > p { max-width: 560px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 14px rgba(0, 0, 0, 0.8); }
.h .h-tg-hero button.h-btn, .h .h-tg-cta button.h-btn { font: 600 15px/1.2 var(--sans); cursor: pointer; }
.h-tg-steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: none; }
.h-tg-steps li { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px 22px; border-radius: 18px; background: rgba(9, 13, 28, 0.78); border: 1px solid rgba(255, 230, 190, 0.26); backdrop-filter: blur(8px); box-shadow: 0 14px 34px rgba(2, 4, 12, 0.5); }
.h-tg-steps li > span { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: var(--gold); border: 1px solid rgba(242, 199, 127, 0.5); background: rgba(242, 199, 127, 0.08); box-shadow: 0 0 18px rgba(255, 196, 110, 0.2); }
.h-tg-steps em { position: absolute; right: 18px; top: 12px; font: italic 400 38px var(--serif); color: rgba(246, 204, 133, 0.5); }
.h-tg-steps b { font-size: 17px; color: var(--txt); }
.h-tg-steps p { color: #d6dce7; font-size: 14px; line-height: 1.6; }
.h-tg-guide { grid-template-columns: repeat(3, 1fr); }
.h-tg-form::after { background: linear-gradient(90deg, rgba(8, 12, 26, 0.92) 0%, rgba(8, 12, 26, 0.72) 40%, rgba(8, 12, 26, 0.1) 72%), linear-gradient(180deg, rgba(8, 12, 26, 0.5), transparent 20%, transparent 80%, rgba(8, 12, 26, 0.6)), url(https://selidar.com/site/tg-distance.webp) 75% 50% / cover no-repeat; }
.h-tg-moment::after { background: linear-gradient(90deg, rgba(8, 12, 26, 0.82) 0%, rgba(8, 12, 26, 0.45) 45%, rgba(8, 12, 26, 0.08) 75%), linear-gradient(180deg, rgba(8, 12, 26, 0.35), transparent 25%, transparent 65%, rgba(8, 12, 26, 0.8)), url(https://selidar.com/site/tg-propose.webp) center 45% / cover no-repeat; }
.h-tg-moment .h-p-care { grid-template-columns: auto 1fr; }
.h-tg-album { display: grid; grid-template-columns: 1.05fr 1fr; gap: 50px; align-items: center; }
.h-tg-album-img { min-height: 440px; border-radius: 22px; background: url(https://selidar.com/site/tg-album.webp) center / cover no-repeat; border: 1px solid rgba(255, 230, 190, 0.26); box-shadow: 0 20px 50px rgba(2, 4, 12, 0.55); }
.h-tg-album > div:last-child { display: flex; flex-direction: column; gap: 16px; }
.h-tg-album p { color: #dfe4ec; font-size: 15.5px; line-height: 1.7; }
.h-tg-album .h-checks { font-size: 14.5px; color: var(--txt); }
.h-tg-album .h-checks svg { flex: none; margin-top: 2px; color: var(--gold); }
.h-tg-price { margin-top: 8px; padding: 20px 22px; border-radius: 16px; background: linear-gradient(120deg, rgba(64, 52, 40, 0.5), rgba(18, 22, 40, 0.9)); border: 1px solid rgba(246, 207, 134, 0.55); }
.h-tg-price b { display: block; font: 400 24px var(--serif); color: var(--cream); margin-bottom: 6px; }
.h-tg-price b em { color: var(--gold); }
.h-tg-price p { font-size: 14px; }
.h-tg-cta::before { background: linear-gradient(90deg, rgba(var(--bg), 0.92) 0%, rgba(var(--bg), 0.55) 34%, rgba(var(--bg), 0) 58%), linear-gradient(180deg, rgb(var(--bg)) 0%, transparent 22%, transparent 80%, rgb(var(--bg)) 100%), url(https://selidar.com/site/tg-cta.webp) center 55% / cover no-repeat; }
.h-tg-cta h2 em { display: block; }
@media (max-width: 1180px) {
  .h-tg-steps { grid-template-columns: 1fr 1fr; }
  .h-tg-guide { grid-template-columns: 1fr 1fr; }
  .h-tg-album { grid-template-columns: 1fr; gap: 28px; }
  .h-tg-album-img { min-height: 320px; }
}
@media (max-width: 760px) {
  .h-tg-hero::before { background: linear-gradient(180deg, rgba(10, 15, 32, 0.5), rgba(10, 15, 32, 0.65) 55%, rgb(var(--bg))), url(https://selidar.com/site/tg-hero.webp) 72% center / cover no-repeat; }
  .h-tg-steps, .h-tg-guide { grid-template-columns: 1fr; }
  .h-tg-form::after { background: linear-gradient(180deg, rgba(8, 12, 26, 0.55), rgba(8, 12, 26, 0.85) 45%, rgba(8, 12, 26, 0.95)), url(https://selidar.com/site/tg-distance.webp) 60% top / cover no-repeat; }
  .h-tg-cta::before { background: linear-gradient(180deg, rgb(var(--bg)) 0%, rgba(var(--bg), 0.5) 40%, rgba(var(--bg), 0.85) 100%), url(https://selidar.com/site/tg-cta.webp) 65% center / cover no-repeat; }
  .h .h-tg-hero .h-btn.lg, .h .h-tg-cta .h-btn.lg { width: 100%; min-width: 0; flex: none; }
}
.h-logo { flex: none; white-space: nowrap; }

/* ===== «Условия использования» (/terms) и другие юридические страницы ===== */
.h-lg-hero::before { background: radial-gradient(ellipse 760px 400px at calc(var(--pad) + 320px) 50%, rgba(10, 15, 32, 0.76), transparent 100%), linear-gradient(180deg, rgba(10, 15, 32, 0.35) 0%, transparent 16%, transparent 62%, rgba(14, 22, 42, 0.9) 100%), url(https://selidar.com/site/lg-hero.webp) 70% 45% / cover no-repeat; }
.h-lg-hero h1 em { display: block; }
.h-lg-hero .h-w-hero-txt > p { max-width: 560px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 14px rgba(0, 0, 0, 0.8); }
.h .h-lg-hero .h-w-hero-txt > p.h-lg-edition { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--gold); }
.h-lg-draft { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; padding: 14px 20px; border-radius: 14px; background: rgba(12, 17, 34, 0.78); border: 1px solid rgba(246, 207, 134, 0.5); backdrop-filter: blur(10px); color: #f3e6cc; font-size: 14px; }
.h-lg-draft svg { flex: none; color: var(--gold); }
.h-lg-brief { grid-template-columns: repeat(3, 1fr); margin-top: 26px; }
.h-lg-wrap { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: start; }
.h-lg-toc { position: sticky; top: 92px; max-height: calc(100vh - 110px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(242, 199, 127, 0.35) transparent; padding: 22px; border-radius: 18px; background: linear-gradient(180deg, rgba(22, 28, 52, 0.94), rgba(12, 16, 34, 0.96)); border: 1px solid rgba(255, 230, 190, 0.24); box-shadow: 0 14px 34px rgba(2, 4, 12, 0.45); }
.h-lg-toc > b { display: block; margin-bottom: 12px; font: 400 21px var(--serif); color: var(--cream); }
.h-lg-toc ol { list-style: none; margin: 0 0 16px; padding: 0; display: grid; }
.h .h-lg-toc a { display: flex; gap: 10px; padding: 7px 8px; border-radius: 10px; color: #cfd6e3; font-size: 13.5px; line-height: 1.35; }
.h-lg-toc a em { flex: none; min-width: 18px; font-style: normal; color: var(--mut); }
.h .h-lg-toc a:hover { color: var(--txt); background: rgba(242, 199, 127, 0.06); }
.h .h-lg-toc a.on { color: var(--txt); background: rgba(242, 199, 127, 0.12); }
.h-lg-toc a.on em { color: var(--gold); }
.h .h-lg-toc .h-btn { width: 100%; padding: 9px 14px; font: 600 13px var(--sans); cursor: pointer; }
.h-lg-text { max-width: 820px; color: #e3e8f0; font-size: 16.5px; line-height: 1.8; }
.h-lg-text h2 { display: flex; align-items: center; gap: 14px; margin: 2em 0 0.7em; font-size: clamp(26px, 2.2vw, 32px); scroll-margin-top: 96px; }
.h-lg-text h2:first-child { margin-top: 0; }
.h-lg-num { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid rgba(242, 199, 127, 0.75); background: rgba(242, 199, 127, 0.08); box-shadow: 0 0 14px rgba(255, 196, 110, 0.2); font: 400 18px var(--serif); color: var(--gold); }
.h-lg-text p { margin: 0 0 1em; }
.h-lg-text strong { color: #fff; font-weight: 600; }
.h .h-lg-text a { color: var(--gold); text-decoration: underline; text-decoration-color: rgba(242, 199, 127, 0.4); text-underline-offset: 3px; }
.h-lg-text ul { margin: 0 0 1em; padding-left: 1.2em; }
.h-lg-text li { margin: 0.35em 0; }
.h-lg-text li::marker { color: var(--gold); }
.h-lg-op { display: grid; grid-template-columns: 280px 1fr; margin: 0 0 1.5em; border-radius: 16px; overflow: hidden; border: 1px solid rgba(242, 199, 127, 0.4); background: linear-gradient(180deg, rgba(22, 19, 30, 0.96), rgba(12, 11, 20, 0.98)); font-size: 15px; }
.h-lg-op dt, .h-lg-op dd { margin: 0; padding: 13px 20px; border-bottom: 1px solid rgba(242, 199, 127, 0.14); }
.h-lg-op dt { color: #f6cc85; font: italic 400 16px var(--serif); }
.h-lg-op dd { color: #fff; }
.h-lg-op dd.tbd { color: var(--mut); font-style: italic; }
.h-lg-op dt:nth-last-of-type(1), .h-lg-op dd:last-of-type { border-bottom: 0; }
.h .h-lg-top { display: inline-block; margin-top: 10px; font-size: 14px; text-decoration: none; }
@media (max-width: 1180px) {
  .h-lg-wrap { grid-template-columns: 1fr; gap: 30px; }
  .h-lg-toc { position: static; max-height: none; }
  .h-lg-toc ol { grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .h-lg-brief { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .h-lg-hero::before { background: linear-gradient(180deg, rgba(10, 15, 32, 0.55), rgba(10, 15, 32, 0.7) 55%, rgb(var(--bg))), url(https://selidar.com/site/lg-hero.webp) 70% center / cover no-repeat; }
  .h-lg-brief, .h-lg-toc ol { grid-template-columns: 1fr; }
  .h-lg-text { font-size: 15.5px; }
  .h-lg-op { grid-template-columns: 1fr; }
  .h-lg-op dt { border-bottom: 0; padding-bottom: 0; }
}
@media print {
  .h-top, .h-panel-m, .h-foot, .h-lg-toc, .h-lg-hero::before, .h-ab-dark, .h-lg-top { display: none !important; }
  .h, .h-lg-text, .h-lg-text strong, .h-lg-op dd { background: #fff !important; color: #000 !important; }
  .h-lg-wrap { display: block; }
}
.h.h-lg { overflow: visible; overflow-x: clip; }
.h-lg-privacy .h-lg-hero::before { background: radial-gradient(ellipse 760px 400px at calc(var(--pad) + 320px) 50%, rgba(10, 15, 32, 0.76), transparent 100%), linear-gradient(180deg, rgba(10, 15, 32, 0.35) 0%, transparent 16%, transparent 62%, rgba(14, 22, 42, 0.9) 100%), url(https://selidar.com/site/pv-hero.webp) 70% 50% / cover no-repeat; }
@media (max-width: 760px) { .h-lg-privacy .h-lg-hero::before { background: linear-gradient(180deg, rgba(10, 15, 32, 0.55), rgba(10, 15, 32, 0.7) 55%, rgb(var(--bg))), url(https://selidar.com/site/pv-hero.webp) 70% center / cover no-repeat; } }