/* Relacord — сайт. Бренд — от тизера relacord.com: чёрный фон, белый текст,
   слово Relacord само работает знаком. Строение — от discord.com 2019–2023
   годов: главный экран, полосы «перечень + текст», «Узнайте первыми», подвал
   с колонками. Набор — тоже в духе discord.com: заголовки — широкий жирный
   Montserrat заглавными (у них — Ginto Nord), текст — Onest. Весь текст
   белый, без серого: главное от второстепенного отличают размер и
   начертание. Нарисованное — только картинка главного экрана; остальное —
   набор, тонкие линии и свет.
   Кнопки — таблетки с пружинистым откликом. */

/* ── Montserrat и Onest, свой хостинг. SIL OFL 1.1 — /assets/fonts/*-OFL.txt ─
   Файлы с Google Fonts, вариативные: один файл на все начертания. Латиница и
   кириллица — отдельными файлами: английская страница кириллицу не грузит
   вовсе, браузер берёт файл по unicode-range. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700 900;font-display:swap;src:url('/assets/fonts/montserrat-latin.6438d7b8ea.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-weight:700 900;font-display:swap;src:url('/assets/fonts/montserrat-cyrillic.0b00fbd6ed.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/onest-latin.cc61cbd632.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:'Onest';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fonts/onest-cyrillic.c3f4223046.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  /* Чёрный тизера; разделы чередуются едва заметно светлее. */
  --bg:#050505;
  --bg-2:#0A0A0B;
  --bg-3:#111113;
  --bg-foot:#050505;
  /* Текст — только белый: серый удешевлял сайт. Главное от второстепенного
     отличают размер и начертание, а не яркость. */
  --ink:#FFFFFF;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  /* яркий синий главного экрана: плашка «Скоро» */
  --blue:#2B34B5;
  --font:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  /* заголовки и знак — широкий жирный Montserrat, как Ginto Nord у discord.com */
  --display:'Montserrat','Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  /* сильный ease-out — для откликов и появлений, ease-in-out — для движения на
     месте, пружина с лёгким перелётом — для кнопок, как на консоли */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-spring:cubic-bezier(.34,1.45,.64,1);
  --wrap:1180px;
  --gutter:clamp(20px,4.5vw,56px);
  --top-h:76px;
  /* кольцо фокуса: зазор цвета фона и белая обводка */
  --ring:0 0 0 3px var(--bg),0 0 0 6px #FFFFFF;
  color-scheme:dark;
}

/* Словесный знак — Montserrat ExtraBold. Весь текст на сайте — одного цвета,
   без переливов. */
.wordmark{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.04em;line-height:.9;color:var(--ink)}

/* ── Основа ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--top-h) + 16px);
  background:var(--bg);
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;color:var(--ink);background:var(--bg);
  font-family:var(--font);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,p,ol,ul,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
svg{display:block}
::selection{background:rgba(255,255,255,.9);color:#050505}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:12px}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.page{position:relative;overflow-x:clip}
.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter) * 2);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:16px;top:-60px;z-index:60;padding:10px 16px;border-radius:999px;background:#fff;color:#050505;font-weight:600;transition:top .2s var(--ease-out)}
.skip:focus{top:12px}

/* ── Шапка «Пульт» ───────────────────────────────────────────────────────── */
/* Вся шапка — одна капсула по центру, как меню игровой консоли: слово
   Relacord, страницы «Команда» и «Принципы», «Скачать» и язык. Полосы под
   шапкой нет: при прокрутке капсула остаётся сверху, а страница идёт под
   ней. Капсула — жидкое стекло, как кот на картинке главного экрана: небо
   просвечивает сквозь него синим, а текст страницы — мягким светом. Стекло
   тёмное и сильно размытое, чтобы подписи читались и над крупными
   заголовками. Страницы — таблетки без рамок: под курсором проступает
   подложка, у открытой она есть всегда, нажатие — короткое сжатие. На узком
   экране «Скачать» остаётся на главном экране, а подписи — пока влезают. */
.top{position:sticky;top:0;z-index:40;height:var(--top-h)}
.top-inner{height:100%;display:flex;align-items:center;justify-content:center}
.top-bar{
  position:relative;isolation:isolate;
  display:flex;align-items:center;gap:2px;max-width:100%;height:56px;padding:6px;border-radius:999px;
  box-shadow:0 20px 48px -20px rgba(0,0,0,.9);
}
/* Стекло — подложкой под капсулой, а не на ней самой: размытие на капсуле
   выключило бы размытие у списка языков под ней. Сверху стекло чуть
   светлее, как выпуклое; по кромке в 1 px — блики слева сверху и справа
   снизу, между ними — тонкая линия; по краю изнутри — мягкий свет толщины. */
.top-bar::before,.top-bar::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none}
.top-bar::before{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 50%),rgba(14,14,16,.6);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:inset 0 0 10px rgba(255,255,255,.05),inset 0 1px 1px rgba(255,255,255,.08);
}
.top-bar::after{
  padding:1px;
  background:
    radial-gradient(34% 140% at 10% 0%,rgba(255,255,255,.55),rgba(255,255,255,0)),
    radial-gradient(34% 140% at 90% 100%,rgba(255,255,255,.3),rgba(255,255,255,0)),
    rgba(255,255,255,.08);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
/* Кто просит систему убавить прозрачность, получает сплошную капсулу. */
@media (prefers-reduced-transparency:reduce){
  .top-bar::before{background:#0E0E10;-webkit-backdrop-filter:none;backdrop-filter:none}
}
.brand{
  flex:none;font-family:var(--display);font-size:22px;font-weight:800;line-height:1.2;letter-spacing:-.03em;color:var(--ink);
}
.top-bar .brand{padding:0 16px 0 18px;font-size:19px}
.tabs{display:flex;gap:2px}
.tab{
  display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 17px;border-radius:999px;
  font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--ink);white-space:nowrap;
  -webkit-tap-highlight-color:transparent;transition:background-color .2s ease,transform .35s var(--ease-spring);
}
.tab .i{display:none;width:20px;height:20px;flex:none}
.tab:active{transform:scale(.94);transition-duration:.12s}
.tab:focus-visible{border-radius:999px}
.tab[aria-current]{background:rgba(255,255,255,.12)}
@media (hover:hover) and (pointer:fine){.tab:not([aria-current]):hover{background:rgba(255,255,255,.08)}}
.top-dl{
  display:inline-flex;align-items:center;gap:9px;height:44px;margin:0 4px 0 8px;padding:0 8px 0 18px;border:0;border-radius:999px;
  background:#FFFFFF;color:var(--bg);font-size:15px;font-weight:600;white-space:nowrap;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .35s var(--ease-spring),box-shadow .25s ease;
}
.top-dl .tag{height:28px;padding:0 10px}
.top-dl:active{transform:scale(.95);transition-duration:.12s}
@media (hover:hover) and (pointer:fine){.top-dl:hover{transform:scale(1.04);box-shadow:var(--ring)}}
/* Язык — круглая кнопка с глобусом, как кнопки соцсетей в подвале: глобус
   сразу говорит, что здесь меняют язык. Под ней — список языков стеклом,
   как окно «Скачать». Без JS список открывает сам <details>. */
.lang{position:relative;flex:none}
.lang-toggle{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--ink);
  background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  list-style:none;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:background-color .2s ease,color .2s ease,box-shadow .25s ease,transform .35s var(--ease-spring);
}
.lang-toggle .i{width:20px;height:20px}
.lang-toggle::-webkit-details-marker{display:none}
.lang-toggle:focus-visible{border-radius:50%}
.lang-toggle:active{transform:scale(.94);transition-duration:.12s}
.lang[open] .lang-toggle{background:#FFFFFF;color:var(--bg)}
.lang-menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:50;
  min-width:184px;max-height:min(420px,calc(100svh - var(--top-h) - 24px));overflow-y:auto;
  padding:6px;border-radius:18px;
  background:rgba(20,20,22,.92);-webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.1),0 30px 80px -20px rgba(0,0,0,.9);
  transform-origin:calc(100% - 28px) 0;
}
.lang[open] .lang-menu{animation:lang-in .3s var(--ease-spring)}
@keyframes lang-in{from{opacity:0;transform:translateY(-4px) scale(.96)}}
.lang-menu a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:9px 12px;border-radius:12px;font-size:15px;font-weight:500;color:var(--ink);
  transition:color .15s ease,background-color .15s ease;
}
.lang-menu a[aria-current]{color:var(--ink)}
.lang-check{width:16px;height:16px;flex:none;visibility:hidden}
.lang-menu a[aria-current] .lang-check{visibility:visible}
.lang-menu a:focus-visible{box-shadow:inset 0 0 0 2px #FFFFFF;border-radius:12px}
@media (hover:hover) and (pointer:fine){
  .lang-toggle:hover{background:rgba(255,255,255,.14);box-shadow:var(--ring);transform:scale(1.06)}
  .lang[open] .lang-toggle:hover{background:#FFFFFF}
  .lang-menu a:hover{color:var(--ink);background:rgba(255,255,255,.08)}
}
/* Узкий экран: «Скачать» — только на главном экране, капсула ниже. */
@media (max-width:999px){
  .top-bar{height:52px;padding:5px}
  .top-bar .brand{padding:0 12px 0 14px;font-size:18px}
  .tab{height:42px;padding:0 14px}
  .top-dl{display:none}
  .lang{margin-left:6px}
  .lang-toggle{width:42px;height:42px}
}
/* Телефон: поля у шапки и у пунктов меньше — так «Команда» и «Принципы»
   влезают подписями от 360 px (замерено: в 360 px остаётся около 9 px). */
@media (max-width:419px){
  .top-inner{padding:0 12px}
  .top-bar .brand{padding:0 8px 0 12px;font-size:17px}
  .tab{padding:0 10px;font-size:14px}
  .lang{margin-left:2px}
}
/* Уже 360 px подписи не влезают: вместо них значки, подписи остаются для
   экранных дикторов. */
@media (max-width:359px){
  .tab{width:42px;padding:0}
  .tab .i{display:block}
  .tab span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ── Кнопки ─────────────────────────────────────────────────────────────── */
/* Таблетки, как на консоли: под курсором кнопка подрастает и получает белое
   кольцо фокуса, нажатие — короткое сжатие. */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:50px;padding:0 24px;border:0;border-radius:999px;
  font-size:16px;font-weight:600;letter-spacing:-.005em;white-space:nowrap;
  cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:transform .35s var(--ease-spring),box-shadow .25s ease,background-color .25s ease,color .25s ease;
}
.btn .i{width:19px;height:19px;flex:none}
.btn-lg{height:58px;padding:0 30px;font-size:17px}
.btn-sm{height:40px;padding:0 16px;font-size:14px;gap:8px}
.btn-sm .i{width:15px;height:15px}
.btn-light{background:#FFFFFF;color:var(--bg);box-shadow:0 16px 44px -18px rgba(255,255,255,.45)}
/* тёмная таблетка рядом с белой — как «Open Discord in your browser», только
   на чёрном её держит тонкая обводка */
.btn-dark{background:rgba(255,255,255,.04);color:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.btn-ghost{background:rgba(255,255,255,.1);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.btn-quiet{background:rgba(255,255,255,.07);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:scale(1.045)}
  .btn-light:hover{box-shadow:var(--ring),0 20px 56px -16px rgba(255,255,255,.5)}
  .btn-dark:hover{background:rgba(255,255,255,.1);box-shadow:var(--ring)}
  .btn-ghost:hover,.btn-quiet:hover{background:rgba(255,255,255,.15);box-shadow:var(--ring)}
}
.btn:focus-visible{box-shadow:var(--ring)}
.btn:active{transform:scale(.96);transition-duration:.12s}
.tag{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-feature-settings:"case";
  /* синяя, а не серая: та же плашка на любой кнопке */
  background:var(--blue);color:var(--ink);
}

/* ── Надзаголовки ───────────────────────────────────────────────────────── */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-feature-settings:"case";
  color:var(--ink);
}

/* ── Главный экран ──────────────────────────────────────────────────────── */
/* Небо в цветах discord.com: лозунг под тонкой чертой, подзаголовок и кнопки,
   рядом — картинка (раскладка — у .hero-split ниже). Экран не короче окна.
   То же небо открывает «Команду» и «Принципы», только баннером, — это
   .hero-banner ниже. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  margin-top:calc(var(--top-h) * -1);
  min-height:min(115svh,1140px);display:flex;align-items:center;
  padding:calc(var(--top-h) + clamp(40px,7vh,88px)) 0 clamp(120px,18vh,200px);
  /* Фон — по замерам главного экрана discord.com (у них это картинка
     BG-2025.png, сам файл не копируем — это их графика). Цвета сняты в 72
     точках их экрана 1440 × 900: левый верхний угол почти чёрный (#000002),
     к правому нижнему — яркий синий (#2B34B5), правый край светлее левого.
     Поверх — небо: холст .hero-sky, его рисует sky.js. */
  background:
    /* цветовое поле: 32 × 20 медианных цветов, снятых с их фона без надписей
       и картинок (1440 × 900), — картинка 32 × 20 пикселей, которую браузер
       плавно растягивает на весь экран */
    url("data:image/png;base64,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") 0 0/100% 100% no-repeat,
    #11126A;
  /* Внизу — ровный край без перехода в чёрный и тонкая светлая линия по
     нему. Из трёх вариантов (скругление, дуга горизонта, линия) выбрана
     линия. */
  box-shadow:inset 0 -1px 0 rgba(200,205,255,.35);
}
/* Небо — холст во весь экран под текстом: звёзды, лучи, сигналы между
   звёздами и метеоры рисует sky.js. Под ним — свет за курсором, как на
   плитках, только шире и тише. */
.hero-sky{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .8s ease;
  background:radial-gradient(560px circle at var(--mx,50%) var(--my,50%),rgba(201,198,255,.07),transparent 70%);
}
@media (hover:hover) and (pointer:fine){.hero:hover::before{opacity:1}}
/* вторая кнопка на этом экране — наша, не цвета Discord: полупрозрачное белое
   «стекло» с тонкой обводкой, синий фон просвечивает */
.hero .btn-dark{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
@media (hover:hover) and (pointer:fine){.hero .btn-dark:hover{background:rgba(255,255,255,.18);box-shadow:var(--ring)}}
.hero-inner{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-mark{margin-top:clamp(26px,4vh,40px);font-size:clamp(76px,16.5vw,236px);padding-bottom:.06em}
/* при первом показе заголовок проявляется из размытия и чуть собирается */
.js .hero-mark.reveal{transform:scale(1.04);filter:blur(18px);transition:opacity 1.6s var(--ease-out),transform 1.8s var(--ease-out),filter 1.6s var(--ease-out)}
.js .hero-mark.reveal.in{transform:none;filter:none}
/* черта под знаком, как на тизере: ярче в середине, гаснет к краям */
.hero-mark::after{content:"";display:block;width:min(46%,420px);height:1px;margin:clamp(18px,2.4vw,30px) auto 0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent)}
/* Лозунг — заглавными, широким жирным Montserrat, как у discord.com, но
   спокойного размера: главное на этом экране — цвет фона и небо. Имя
   Relacord стоит в шапке и в подвале. Две строки, каждая — своя. */
.hero-head{margin-top:0;font-family:var(--display);font-size:clamp(30px,3.9vw,58px);font-weight:900;line-height:1.04;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
.hero-head span{display:block}
/* лозунг — только у картинки для соцсетей (og.mjs), там рядом нет шапки;
   набран так же, как лозунг на сайте */
.hero-slogan{margin-top:clamp(22px,3vw,34px);font-family:var(--display);font-size:clamp(22px,2.4vw,34px);font-weight:900;line-height:1.2;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink);text-wrap:balance}
.hero-lede{margin-top:18px;max-width:31em;font-size:clamp(16.5px,1.25vw,18.5px);line-height:1.6;color:var(--ink);text-wrap:pretty}
/* обе кнопки — одной ширины, по самой широкой из двух */
.hero-cta{margin-top:38px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:max-content;max-width:100%}
/* Картинка рядом с текстом, как у discord.com: двое переписываются, а
   ИИ-помощник работает. Она главнее текста и крупнее его. Фон у неё
   прозрачный: герои висят прямо в небе главного экрана, и звёзды sky.js
   видны между ними. На узком экране она над лозунгом, от края до края окна
   (в разметке она после текста — порядок меняет order); с 1000 px — две
   колонки, текст по левому краю. Картинка медленно покачивается. */
.hero-copy{width:100%;display:flex;flex-direction:column;align-items:center}
.hero-art{order:-1;display:block;width:calc(100% + var(--gutter) * 2);max-width:760px;margin-bottom:clamp(4px,2vw,24px)}
.hero-art img{display:block;width:100%;height:auto}
@media (prefers-reduced-motion:no-preference){
  .hero-art img{animation:hero-float 8s ease-in-out infinite alternate}
}
@keyframes hero-float{from{transform:translateY(-6px)}to{transform:translateY(6px)}}
@media (min-width:1000px){
  /* Колонка текста — по самому тексту, но не шире 38 %; остальное —
     картинке. Лозунг здесь чуть меньше, чтобы и в узкой колонке остаться
     двумя строками. */
  .hero-split{display:grid;grid-template-columns:fit-content(38%) minmax(0,1fr);align-items:center;column-gap:clamp(16px,1.6vw,24px);text-align:left}
  .hero-split .hero-head{font-size:clamp(32px,3.1vw,46px)}
  .hero-split .hero-copy{align-items:flex-start}
  /* в колонке текста кнопки рядом не помещаются — друг под другом */
  .hero-split .hero-cta{grid-template-columns:minmax(0,1fr)}
  /* черта под лозунгом — от левого края и гаснет вправо */
  .hero-split .hero-mark::after{margin-left:0;background:linear-gradient(90deg,rgba(255,255,255,.4),transparent)}
  .hero-art{order:0;width:100%;max-width:none;margin-bottom:0}
  /* справа она проявляется следом за текстом */
  .js .hero-art.reveal{transition-delay:.25s}
  /* картинка шире своей колонки и заходит в правое поле — до 16 px от края
     окна, но не дальше чем на 240 px */
  .hero-art img{width:calc(100% + min(240px, var(--gutter) - 16px + max(0px, (100vw - var(--wrap)) / 2 - var(--gutter))));max-width:none}
}
@media (max-width:720px){
  /* На телефоне — тоже во весь экран и чуть с запасом: svh — высота окна с
     видимой адресной строкой, такой экран и открывается. Запас прячет низ
     под край, и чёрный следующий раздел снизу не выглядывает. vh — для
     браузеров без svh. Сверху воздуха меньше: над лозунгом стоит картинка,
     и обе кнопки должны уместиться в первый экран. */
  .hero{min-height:calc(100vh + 48px);min-height:calc(100svh + 48px);padding-top:calc(var(--top-h) + clamp(12px,3vh,32px));padding-bottom:clamp(72px,12vh,120px)}
  .hero-cta{grid-template-columns:minmax(0,1fr);width:100%}
}
/* «Команда» и «Принципы» открываются тем же небом, но баннером: высота — по
   приветствию, а не во всё окно, — владелец просил примерно вдвое ниже
   прежнего первого экрана, но не впритык к тексту. Под шапкой-капсулой и под
   текстом — воздух, снизу его больше. Картинки пока нет, черты под
   заголовком тоже. */
.hero.hero-banner{min-height:0;padding:calc(var(--top-h) + clamp(24px,3vw,44px)) 0 clamp(44px,5vw,72px)}
/* На телефоне надзаголовка нет — открытая страница и так отмечена в шапке, —
   а подзаголовок чуть мельче: иначе у принципов, где заголовок в четыре
   строки, баннер выходит больше половины прежнего экрана. При 15,5 px
   подзаголовок принципов и в 360 px — в четыре строки, а не в пять. */
@media (max-width:720px){
  .hero-banner .eyebrow{display:none}
  .hero-banner .h1{margin-top:0}
  .hero-banner .lede{font-size:15.5px}
}

/* ── Разделы ────────────────────────────────────────────────────────────── */
/* Разделы разделены тонкой чертой и едва заметной сменой фона — как полосы на
   discord.com тех лет, только в чёрном. */
.section{position:relative;padding:clamp(96px,12vw,160px) 0;background:var(--bg);border-top:1px solid var(--line)}
/* Ссылки «#раздел»: под шапку встаёт содержимое раздела, а не его пустой
   верхний отступ. «#download» — кнопки главного экрана: туда ведём на самый
   верх страницы (большой отступ упирается в начало), чтобы экран был целым. */
.section[id]{scroll-margin-top:calc(24px - clamp(96px,12vw,160px))}
#download{scroll-margin-top:100vh}
.section-alt{background:var(--bg-2)}
.section-head{max-width:860px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.section-head-left{margin:0;align-items:flex-start;text-align:left}
.h1,.h2{
  margin-top:18px;font-family:var(--display);font-size:clamp(28px,3.2vw,46px);font-weight:900;line-height:1.06;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance;color:var(--ink);
}
.h2-xl{font-size:clamp(30px,4.1vw,60px)}
/* Заголовок внутренней страницы — чуть крупнее самых крупных разделов
   главной. На телефоне — от 30 px: при 34 px «Люди, которые строят
   Relacord.» в 360 px занимал четыре строки, теперь три, а в 375 px — две. */
.h1{font-size:clamp(30px,5vw,68px);line-height:1.02}
.lede{margin-top:20px;max-width:36em;font-size:clamp(17px,1.3vw,19px);line-height:1.6;color:var(--ink);text-wrap:pretty}

/* ── Встроенный ИИ ──────────────────────────────────────────────────────── */
/* Космос — только у главного экрана, здесь его нет: фон — тот же, что у
   «Приватности» (.section-alt в разметке), без эффектов. Примеров
   переписки, схем и значков нет. */
.ai .section-head{max-width:960px}
.ai .h2 span{display:block}
.ai .lede{max-width:34em}
/* на телефоне каждая фраза заголовка — своей строкой */
@media (max-width:420px){.ai .h2{font-size:clamp(24px,7.4vw,30px)}}
/* Плашка — одна на весь рассказ об агенте, в стиле плиток «Возможностей»:
   та же поверхность, кромка, скругление и свет за курсором (значения — как
   у .tile; меняете там — поменяйте и здесь), тот же кегль названия, поля и
   текст. Главное в плашке — «Внутри Relacord»: название заглавными в одну
   строку, фраза о том, как глубоко встроен агент, и три умения в ряд,
   каждое под тонкой чертой, как пункты приватности. Ниже, за тонкой чертой
   во всю ширину, — «Для любых дел»: мельче и в одну строку с фразой. На
   узком экране всё — друг под другом. */
.ai-pane{
  position:relative;isolation:isolate;overflow:hidden;margin-top:clamp(48px,6vw,80px);border-radius:28px;
  background:linear-gradient(180deg,#121214,#0B0B0C);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.07);
}
.ai-pane::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.1),transparent 70%);
}
@media (hover:hover) and (pointer:fine){.ai-pane:hover::before{opacity:1}}
.ai-main{padding:clamp(24px,2.4vw,34px)}
.ai-main-title{font-family:var(--display);font-size:clamp(24px,2.5vw,36px);font-weight:900;line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
.ai-main-text{margin-top:14px;max-width:34em;font-size:16px;line-height:1.55;text-wrap:pretty}
.ai-skills{margin-top:clamp(28px,3vw,40px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,34px)}
.ai-skill{padding-top:18px;border-top:1px solid var(--line-2)}
.ai-skill-title{font-size:clamp(17px,1.4vw,19px);font-weight:700;line-height:1.25;letter-spacing:-.01em}
.ai-skill-text{margin-top:8px;font-size:16px;line-height:1.55;text-wrap:pretty}
.ai-also{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 28px;padding:clamp(18px,2vw,26px) clamp(24px,2.4vw,34px);border-top:1px solid var(--line)}
.ai-also-title{font-family:var(--display);font-size:clamp(17px,1.5vw,20px);font-weight:900;line-height:1.1;letter-spacing:-.01em;text-transform:uppercase}
.ai-also-text{font-size:16px;line-height:1.55}
/* в три колонки умения влезают только на широком экране */
@media (max-width:960px){.ai-skills{grid-template-columns:minmax(0,1fr)}}
/* название и на телефоне — в одну строку: самое длинное, «ВНУТРИ
   RELACORD», при 6,5vw влезает от 320 px */
@media (max-width:760px){.ai-main-title{font-size:clamp(20px,6.5vw,28px)}}

/* ── Возможности: плитки ────────────────────────────────────────────────── */
/* Сетка 3 × 2, первая плитка — на две колонки. В каждой — номер сверху,
   крупное имя и строка текста внизу. Свет идёт за курсором. */
/* две фразы заголовка — каждая своей строкой: точек в заголовках нет */
.features .h2 span{display:block}
.bento{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tile{
  position:relative;isolation:isolate;overflow:hidden;min-height:clamp(240px,24vw,320px);
  display:flex;flex-direction:column;padding:clamp(24px,2.4vw,34px);border-radius:28px;
  background:linear-gradient(180deg,#121214,#0B0B0C);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.07);
}
.tile::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.1),transparent 70%);
}
.tile-wide{grid-column:span 2}
/* Значок — огромная бледная «тень», которая выходит из правого верхнего угла
   и срезана краем плитки: читается как форма, а не как отдельная иконка. Тот
   же приём, что в админке мини-приложения Scale VPN (.hub-echo). Справа
   сверху, а не снизу: так он не ложится на имя плитки. Толщина линии — в
   единицах значка 24 × 24, на ~250 px это около 5 px. */
.tile-n{position:relative;z-index:1;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--ink);font-feature-settings:"tnum"}
.tile-name,.tile-text{position:relative;z-index:1}
.tile-icon{
  position:absolute;z-index:0;top:-34px;right:-34px;pointer-events:none;
  width:clamp(190px,18vw,260px);aspect-ratio:1;color:#FFFFFF;opacity:.09;
  transition:opacity .4s ease,transform .8s var(--ease-out);
}
.tile-wide .tile-icon{width:clamp(220px,22vw,320px);top:-46px;right:-30px}
.tile-icon .icon{width:100%;height:100%;stroke-width:.5}
.icon{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.tile:hover .tile-icon{opacity:.16;transform:translate(-6px,6px)}}
@media (max-width:600px){.tile-icon,.tile-wide .tile-icon{width:170px;top:-28px;right:-28px}}
/* имя — одного размера во всех плитках, и в широкой тоже */
.tile-name{
  margin-top:auto;padding-top:40px;font-family:var(--display);font-size:clamp(24px,2.5vw,36px);font-weight:900;line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink);
}
.tile-text{margin-top:14px;max-width:26em;font-size:16px;line-height:1.55;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.tile:hover::before{opacity:1}}
@media (max-width:900px){
  .bento{grid-template-columns:1fr 1fr}
  .tile-wide{grid-column:span 2}
}
@media (max-width:600px){
  .bento{grid-template-columns:1fr}
  .tile-wide{grid-column:auto}
  .tile{min-height:0}
  .tile-name{padding-top:64px}
}
/* Имена плиток одного ряда стоят на одной линии, даже если описания разной
   длины: плитки ряда делят три общие строки сетки — верх, имя и описание
   (subgrid), и строка описаний высотой по самому длинному из них. Высоту
   плитки задаёт верхняя строка. Без subgrid — прежняя раскладка флексом. */
@supports (grid-template-rows:subgrid){
  .bento{grid-auto-rows:minmax(clamp(104px,11vw,150px),auto) auto auto}
  .tile{grid-row:span 3;display:grid;grid-template-rows:subgrid;row-gap:0;min-height:0}
  @media (max-width:600px){.bento{grid-auto-rows:auto}}
}


/* ── Пронумерованные пункты приватности ────────────────────────────────── */
/* Без значков и цветных плашек: номер, заголовок и текст под тонкой чертой.
   Два пункта — по центру и не шире заголовка раздела: во всю ширину их
   строки растягивались бы, а справа оставалась бы пустая колонка. */
.points{margin-top:clamp(48px,6vw,80px);display:grid;gap:clamp(28px,3vw,44px) clamp(24px,3vw,40px)}
.points-2{grid-template-columns:repeat(2,1fr);max-width:860px;margin-left:auto;margin-right:auto}
.points-3{grid-template-columns:repeat(3,1fr)}
.points-4{grid-template-columns:repeat(4,1fr)}
.point{padding-top:22px;border-top:1px solid var(--line-2)}
.point-n{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--ink);font-feature-settings:"tnum"}
.point-title{margin-top:18px;font-size:clamp(19px,1.6vw,22px);font-weight:700;line-height:1.25;letter-spacing:-.01em}
.point-text{margin-top:10px;font-size:16px;line-height:1.62;color:var(--ink)}
.privacy-note{margin:clamp(40px,5vw,56px) auto 0;max-width:46em;text-align:center;font-size:15px;line-height:1.6;color:var(--ink);text-wrap:balance}
@media (max-width:1100px){.points-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.points-2,.points-3{grid-template-columns:1fr}}
@media (max-width:620px){.points-4{grid-template-columns:1fr}}

/* ── Команда ────────────────────────────────────────────────────────────── */
/* Карточки — как плитки «Возможностей»: та же поверхность, кромка,
   скругление и свет за курсором (значения — как у .tile). Сверху —
   квадратное фото во всю ширину, под ним имя заглавными и роль. Ряд уже
   страницы, чтобы фото в 640 px оставались чёткими и на плотных экранах.
   Заголовок страницы — в первом экране, поэтому раздел начинается прямо с
   карточек. На узком экране — друг под другом. */
.people{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.person{
  position:relative;isolation:isolate;overflow:hidden;padding-bottom:clamp(24px,2.4vw,32px);border-radius:28px;
  background:linear-gradient(180deg,#121214,#0B0B0C);
}
/* свет — под содержимым, кромка — поверх фото: иначе фото её закрыло бы */
.person::before,.person::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.person::before{
  z-index:-1;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.1),transparent 70%);
}
.person::after{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.07)}
.person-photo{display:block;aspect-ratio:1;overflow:hidden}
.person-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.person-name,.person-role,.person-note{padding:0 clamp(22px,2.2vw,30px)}
.person-name{margin-top:clamp(20px,2vw,26px);font-family:var(--display);font-size:clamp(24px,2.5vw,34px);font-weight:900;line-height:1.02;letter-spacing:-.01em;text-transform:uppercase}
.person-role{margin-top:10px;font-size:16px;font-weight:600;line-height:1.4}
.person-note{margin-top:6px;font-size:16px;line-height:1.55;text-wrap:pretty}
@media (hover:hover) and (pointer:fine){
  .person:hover::before{opacity:1}
  .person:hover .person-photo img{transform:scale(1.03)}
}
@media (max-width:760px){.people{max-width:440px;grid-template-columns:minmax(0,1fr)}}
/* AI First. Заголовок перекликается с лозунгом главного экрана, поэтому, как
   и там, каждая фраза — своей строкой. Пункты — .points-3 в ряд. */
.ai-first .section-head{max-width:960px}
.ai-first .h2 span{display:block}
.ai-first .lede{max-width:38em}
/* на телефоне каждая фраза заголовка — своей строкой */
@media (max-width:420px){.ai-first .h2{font-size:clamp(24px,7.4vw,30px)}}

/* ── Принципы ───────────────────────────────────────────────────────────── */
/* Манифест: три опоры одна под другой, с большим воздухом между ними, и
   строение у всех трёх одно — так страница читается сверху вниз, а не
   вразброс. Опору открывает номер на черте во всю ширину; черта, как под
   лозунгом главного экрана, гаснет вправо. Под ней слева — название
   заглавными, справа — главная мысль одной крупной фразой и под ней два-три
   коротких абзаца с обычными отступами, без черт. Название и главная мысль
   начинаются вровень. Колонки — поровну: в 5/12 не влезало «НАД ДАННЫМИ»
   (после «над» сборка ставит неразрывный пробел, при 56 px это 500 px), а
   строка абзацев выходит около 65 знаков. На узком экране всё — друг под
   другом, и текст не шире удобной для чтения строки. Шапка страницы — в
   первом экране, и она шире обычной, чтобы заголовок встал в две строки, а
   не в три; строки подзаголовка — поровну. Раздел начинается прямо с
   первой опоры. */
.principles-head{max-width:1000px}
.principles-head .lede{text-wrap:balance}
.pillars{display:grid;gap:clamp(80px,10vw,144px)}
.pillar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,80px);align-items:start}
.pillar-n{grid-column:1 / -1;display:flex;align-items:center;gap:18px;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.08em;font-feature-settings:"tnum"}
.pillar-n::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.4),transparent)}
.pillar-title{margin-top:clamp(28px,3.4vw,44px);font-family:var(--display);font-size:clamp(30px,3.9vw,56px);font-weight:900;line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
.pillar-body{margin-top:clamp(28px,3.4vw,44px);max-width:40em}
.pillar-lead{font-size:clamp(20px,1.85vw,27px);font-weight:600;line-height:1.36;letter-spacing:-.017em;text-wrap:balance}
.pillar-text{margin-top:12px;font-size:17px;line-height:1.6;text-wrap:pretty}
.pillar-lead + .pillar-text{margin-top:16px}
/* В одну колонку название занимает всю ширину и может быть крупнее — но
   мельче заголовка страницы (.h1 — 5vw). */
@media (max-width:960px){
  .pillar{grid-template-columns:minmax(0,1fr)}
  .pillar-title{font-size:clamp(30px,4.6vw,48px)}
  .pillar-body{margin-top:18px}
}


/* на самых узких экранах длинная подпись («Подписаться на @relacord_app»)
   иначе съедает поля кнопки */
@media (max-width:400px){.btn-lg{padding:0 18px;font-size:16px}}
@media (max-width:360px){.btn-lg{padding:0 14px;gap:8px;font-size:15px}}

/* ── Подвал ─────────────────────────────────────────────────────────────── */
/* Колонки ссылок слева, под чертой — имя, строка о сайте и кнопка. */
.foot{position:relative;overflow:hidden;padding:clamp(64px,8vw,96px) 0 40px;background:var(--bg-foot);border-top:1px solid var(--line)}
.foot-top{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:flex-start;gap:40px}
.foot-social{display:flex;gap:12px}
.foot-x{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:background-color .2s ease,transform .35s var(--ease-spring),box-shadow .25s ease}
.foot-x .i{width:18px;height:18px}
.foot-x .i-tg{width:22px;height:22px}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,200px));gap:24px clamp(32px,6vw,96px)}
.foot-h{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-feature-settings:"case";color:var(--ink)}
.foot-col ul{margin-top:16px;display:flex;flex-direction:column;gap:11px}
/* ссылки белые, как весь текст; под курсором проступает подчёркивание */
.foot-col a{font-size:15.5px;color:var(--ink);text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.3em;transition:text-decoration-color .2s ease}
.foot-glyph{display:inline-block;width:15px;height:15px;vertical-align:-2px}
.foot-col a[aria-current]{color:var(--ink);font-weight:600}
.foot-bottom{margin-top:clamp(48px,6vw,72px);padding-top:28px;border-top:1px solid var(--line);display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px}
.foot-copy{font-size:13.5px;color:var(--ink)}
.foot-bottom .foot-social{margin-left:auto}
@media (hover:hover) and (pointer:fine){
  .foot-col a:hover{text-decoration-color:currentColor}
  .foot-x:hover{background:rgba(255,255,255,.14);transform:scale(1.08);box-shadow:var(--ring)}
}
@media (max-width:820px){.foot-top{flex-direction:column-reverse}}
@media (max-width:560px){
  .foot-cols{grid-template-columns:1fr 1fr}
  .foot-bottom .foot-social{margin-left:0}
}

/* ── Ответ на «Скачать» ─────────────────────────────────────────────────── */
.soon{
  inset:0;margin:auto;height:fit-content;width:min(370px,calc(100vw - 32px));
  padding:22px;border:0;border-radius:24px;
  background:rgba(20,20,22,.92);-webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);
  color:var(--ink);text-align:left;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.1),0 30px 80px -20px rgba(0,0,0,.9);
  opacity:0;transform:translateY(-4px) scale(.96);transform-origin:var(--origin,50% 0);
  transition:opacity .15s var(--ease-out),transform .15s var(--ease-out),overlay .15s allow-discrete,display .15s allow-discrete;
}
.soon:popover-open{
  opacity:1;transform:none;
  transition:opacity .22s var(--ease-out),transform .45s var(--ease-spring),overlay .22s allow-discrete,display .22s allow-discrete;
}
@starting-style{.soon:popover-open{opacity:0;transform:translateY(-4px) scale(.96)}}
.soon::backdrop{background:transparent}
.soon-title{font-size:17px;font-weight:600;letter-spacing:-.015em}
.soon-text{margin-top:8px;font-size:15px;line-height:1.55;color:var(--ink)}
.soon-actions{margin-top:18px;display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px}

/* ── Появление первого экрана ───────────────────────────────────────────── */
/* .reveal — только у первого экрана: на главной у заголовка, подзаголовка,
   кнопок и картинки, у «Команды» и «Принципов» — у надзаголовка, заголовка
   и подзаголовка. Они проявляются при загрузке. Блоки ниже при прокрутке не
   анимируются. Скрыто только при работающем JS (метку ставит head.js до
   отрисовки). Если site.js не загрузился, js-pending остаётся и через 2,5 с
   всё проявляется само. */
.js .reveal{opacity:0;transform:translateY(18px);filter:blur(6px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out)}
.js .reveal.in{opacity:1;transform:none;filter:none}
.js-pending .reveal{animation:reveal-fallback 0s linear 2.5s forwards}
@keyframes reveal-fallback{to{opacity:1;transform:none;filter:none}}

/* Без движения: ничего не всплывает и не мигает, кнопки не пружинят. */
@media (prefers-reduced-motion:reduce){
  .js .reveal{transform:none;filter:none;transition:opacity .4s ease}
  .hero-mark,.lang-menu{animation:none!important}
  .js .hero-mark.reveal{transform:none;filter:none}
  .btn,.foot-x{transition:box-shadow .2s ease,background-color .2s ease}
  .tab,.top-dl,.lang-toggle{transition:box-shadow .2s ease,background-color .2s ease}
  .person:hover .person-photo img{transform:none}
}

/* ── 404 ────────────────────────────────────────────────────────────────── */
.nf{min-height:100svh;display:grid;place-items:center;background:radial-gradient(60% 55% at 50% 0%,rgba(255,255,255,.09),transparent 70%),var(--bg)}
.nf-main{width:100%;max-width:720px;padding:48px 24px;display:flex;flex-direction:column;align-items:center;text-align:center}
.nf-code{margin-top:40px;font-size:clamp(120px,24vw,240px)}
.nf-title{margin-top:28px;font-family:var(--display);font-size:clamp(24px,3.4vw,36px);font-weight:900;line-height:1.1;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance}
.nf-text{margin-top:12px;font-size:18px;color:var(--ink)}
.nf-links{margin-top:32px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}