/* ============================================================
   HOW ARE YOU TODAY? — дизайн-система «Тёплый рассвет»
   Вдохновлено Headspace: тёплый крем, закатный оранжевый,
   очень скруглённые карточки, блобы-персонажи с лицами,
   арки-«рассветы» между секциями. Никаких жёстких теней
   и обводок — всё мягкое, плоское, дружелюбное.
   ============================================================ */
:root{
  --ink:#3B3A43;         /* тёплый графит — текст */
  --ink-soft:#716D78;    /* вторичный текст */
  --cream:#FAF4EA;       /* основной фон */
  --white:#FFFDF9;       /* карточки */
  --sun:#EF8A4E;         /* закатный оранжевый — главный акцент */
  --sun-deep:#DE7038;
  --peach:#F8DCC2;
  --sky:#C4DBEA;
  --sky-tint:#EAF2F7;
  --butter:#F6DC9C;
  --butter-tint:#FBF1DA;
  --lilac:#D9CFE9;
  --mint:#CDE2C8;
  --rose:#F2C6BE;

  --display:'Rubik', system-ui, sans-serif;
  --body:'Nunito', system-ui, sans-serif;

  --r:28px;
  --shadow:0 14px 34px rgba(59,58,67,.10);
  --shadow-lift:0 22px 44px rgba(59,58,67,.16);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  background:var(--cream);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  line-height:1.6;
  font-size:16px;
}
::selection{background:var(--sun);color:var(--white)}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button{font-family:inherit}

.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 24px}
.wrap--narrow{max-width:860px}

h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.3px}

.kicker{
  display:inline-block;
  font-family:var(--display);font-weight:600;
  font-size:13px;letter-spacing:.4px;
  color:var(--sun-deep);
  background:rgba(239,138,78,.12);
  border-radius:999px;padding:7px 16px;
}

/* ---------- кнопки-пилюли ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:600;font-size:16.5px;
  border:none;border-radius:999px;
  padding:17px 32px;cursor:pointer;
  background:var(--ink);color:var(--white);
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);background:#4A4854}
.btn:active{transform:translateY(0);box-shadow:var(--shadow)}
.btn .arr{transition:transform .2s ease;font-family:var(--body);font-weight:800}
.btn:hover .arr{transform:translateX(4px)}

.btn--sun{background:var(--sun);color:#FFF}
.btn--sun:hover{background:var(--sun-deep)}
.btn--ghost{background:var(--white);color:var(--ink)}
.btn--ghost:hover{background:#FFF}

/* ---------- бейджи ---------- */
.tag{
  display:inline-block;
  font-family:var(--display);font-weight:600;
  font-size:12px;letter-spacing:.4px;
  border-radius:999px;padding:6px 14px;
  background:var(--mint);color:#3E5A3A;
}
.tag--soon{background:#EEE9E0;color:var(--ink-soft)}

/* ---------- арки-«рассветы» между секциями ---------- */
.arc{display:block;width:100%;height:64px;margin-bottom:-1px}
.arc svg{width:100%;height:100%}

/* ---------- декоративные пузыри ---------- */
.bub{
  position:absolute;border-radius:50%;
  opacity:.55;pointer-events:none;z-index:0;
  animation:drift 12s ease-in-out infinite;
}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(-16px,20px)}}

/* ---------- появление при загрузке / скролле ---------- */
.in{opacity:0;transform:translateY(22px);animation:rise .8s cubic-bezier(.2,.7,.3,1) forwards}
.in-1{animation-delay:.05s}.in-2{animation-delay:.16s}.in-3{animation-delay:.27s}
.in-4{animation-delay:.38s}.in-5{animation-delay:.49s}.in-6{animation-delay:.3s}
@keyframes rise{to{opacity:1;transform:none}}
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s ease}
.rv.on{opacity:1;transform:none}

/* ============ NAV ============ */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(250,244,234,.9);
  backdrop-filter:blur(10px);
}
.nav .wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:16px;padding-bottom:16px;max-width:1120px;
}
.logo{
  font-family:var(--display);font-weight:700;font-size:16px;
  display:flex;align-items:center;gap:10px;
}
.logo .face{width:30px;height:30px;flex:0 0 auto}
.nav .btn{padding:11px 22px;font-size:14.5px;box-shadow:none}
.nav .btn:hover{box-shadow:var(--shadow)}

/* Вход через Telegram. Блок скрыт до ответа «кто я»: «Войти», мигнувшее
   человеку, который уже вошёл, — это сообщение о том, что его не узнали.
   Наполняет его /auth.js, разметка на странице — пустой <span id="auth">. */
.nav-right{display:flex;align-items:center;gap:14px}
.auth{display:flex;align-items:center;gap:10px;font-size:14px}
.auth-btn{
  font-family:var(--display);font-weight:600;font-size:14.5px;
  background:none;border:0;padding:0;cursor:pointer;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px;
}
.auth-btn:hover{color:var(--sun-deep)}
.auth-me{font-weight:600;color:var(--ink);max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-link,
.auth-out{background:none;border:0;padding:0;cursor:pointer;font-size:13px;color:var(--ink-soft);text-decoration:underline}
.auth-note{font-size:13px;color:var(--ink-soft)}
@media (max-width:640px){
  /* На узком экране в шапке остаётся имя (оно же ссылка в кабинет) и запасная
     ссылка в бота. Прячем только подпись «ждём подтверждения» и «выйти»: рядом
     с длинным логотипом они дают четыре элемента в строку, и человек перестаёт
     видеть главное — что его узнали. Выйти можно из кабинета.
     Правила нарочно привязаны к .nav: те же классы работают и в кабинете, где
     прятать ничего не надо, и запасная ссылка в бота нужна на мобиле сильнее,
     чем где-либо ещё — там переход уводит в другое приложение. */
  .nav .auth-note, .nav .auth-out{display:none}
  .nav-right{gap:10px}
  .auth-me{max-width:10ch}
}
.back{
  font-family:var(--display);font-weight:600;font-size:14.5px;
  color:var(--ink-soft);display:inline-flex;align-items:center;gap:8px;
  transition:color .15s ease;
}
.back:hover{color:var(--ink)}

/* ============ ЛЕНТА-ЧИПСЫ ============ */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:8px 0 0}
.chip{
  font-family:var(--display);font-weight:600;font-size:13.5px;
  background:var(--white);border-radius:999px;padding:9px 18px;
  box-shadow:var(--shadow);color:var(--ink-soft);
  display:inline-flex;align-items:center;gap:8px;
}
.chip i{font-style:normal}

/* ============ СЕКЦИИ ============ */
section{position:relative}
.pad{padding:96px 0}
.sec-head{max-width:620px;margin-bottom:52px}
.sec-head--center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head .kicker{margin-bottom:18px}
.sec-head h2{font-size:clamp(26px,3.6vw,40px);line-height:1.18}
.sec-head p{margin-top:14px;font-size:17px;color:var(--ink-soft)}

/* ---------- карточки ---------- */
.card{
  background:var(--white);border-radius:var(--r);
  box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift)}

/* ---------- блоб-персонаж ---------- */
.blobby{width:72px;height:72px}
.blobby--big{width:96px;height:96px}

/* ---------- формы ---------- */
label{
  display:block;font-family:var(--display);font-weight:600;
  font-size:14px;margin:20px 0 8px;
}
label .opt{color:var(--ink-soft);font-weight:400;font-size:13px}
input[type="email"], textarea{
  width:100%;border:2px solid #E8E0D3;border-radius:18px;
  background:var(--white);padding:14px 18px;
  font-family:var(--body);font-size:15.5px;color:var(--ink);
  outline:none;transition:border-color .15s ease, box-shadow .15s ease;
  resize:vertical;
}
input[type="email"]:focus, textarea:focus{
  border-color:var(--sun);box-shadow:0 0 0 4px rgba(239,138,78,.15);
}
textarea{min-height:92px}
.err{display:none;font-size:13px;font-weight:700;color:#C25B3F;margin-top:6px}
.fine{margin-top:14px;font-size:12.5px;color:var(--ink-soft)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* Согласия под формой. Галочки не проставлены заранее — это требование юриста,
   а не вопрос вкуса: проставленная за человека галочка согласием не является.
   Ссылки на документы открываются в новом окне, чтобы заполненная форма не
   уехала вместе с вкладкой. Нажатие по самой ссылке галочку не переключает —
   браузер не отдаёт клик метке, если попали в интерактивный элемент внутри. */
.consent{display:flex;gap:9px;align-items:flex-start;margin-top:12px;
         font-size:12.5px;line-height:1.5;color:var(--ink-soft);text-align:left;cursor:pointer}
.consent input{flex:0 0 auto;width:16px;height:16px;margin:2px 0 0;accent-color:var(--sun)}
.consent a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* ============ FOOTER ============ */
footer{
  background:var(--ink);color:#D8D4CC;
  padding:44px 0;margin-top:-1px;
}
footer .wrap{
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  font-size:13.5px;
}
footer .logo{color:var(--white);font-size:14px}

/* Юридический блок — отдельной строкой под основным рядом, а не внутри него.
   Основной ряд уже переносится на мобиле, и три ссылки плюс реквизиты в той же
   флекс-строке превращались бы в кашу из обрывков. Адреса документов — `/docs/`,
   а не `legal/`: имена папки в репозитории и на сайте разъезжаются сознательно,
   потому что адреса вида /docs/personal_data_consent.pdf записаны в согласиях
   клиентов и заморожены. Цена: при открытии файлом с диска ссылки не работают —
   они рассчитаны на корень домена. */
footer .wrap.legal{
  flex-direction:column;align-items:flex-start;gap:9px;
  margin-top:22px;padding-top:18px;
  border-top:1px solid rgba(216,212,204,.18);
  font-size:12px;line-height:1.5;color:#A9A49B;
}
footer .legal-links{display:flex;flex-wrap:wrap;gap:6px 18px}
footer .wrap.legal a{color:#D8D4CC;text-decoration:underline;text-underline-offset:2px}
footer .wrap.legal a:hover{color:var(--white)}

/* ============ МОДАЛКА ============ */
.modal-veil{
  position:fixed;inset:0;z-index:100;
  background:rgba(59,58,67,.4);
  display:none;align-items:center;justify-content:center;
  padding:20px;backdrop-filter:blur(3px);
}
.modal-veil.open{display:flex;animation:veil .25s ease}
@keyframes veil{from{opacity:0}to{opacity:1}}
.modal{
  width:100%;max-width:470px;
  border-radius:32px;background:var(--white);
  box-shadow:0 30px 80px rgba(59,58,67,.3);
  padding:38px 34px;position:relative;
  animation:pop .35s cubic-bezier(.2,1.3,.4,1);
}
@keyframes pop{from{transform:translateY(28px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.modal .x{
  position:absolute;top:16px;right:16px;
  width:36px;height:36px;border:none;border-radius:50%;
  background:var(--cream);cursor:pointer;font-size:14px;font-weight:800;color:var(--ink-soft);
  transition:transform .15s ease, background .15s ease;
}
.modal .x:hover{transform:rotate(90deg);background:var(--peach)}
.modal .tag{margin-bottom:16px}
.modal h3{font-size:21px;line-height:1.3;margin-bottom:8px}
.modal .sub{font-size:14.5px;color:var(--ink-soft);margin-bottom:8px}
.modal .btn{width:100%;justify-content:center;margin-top:26px}
.modal .fine{text-align:center}
.modal .done{display:none;text-align:center;padding:14px 0 4px}
.modal .done .face{width:72px;margin:0 auto 16px}
.modal .done h3{margin-bottom:8px}
.modal .done p{font-size:14.5px;color:var(--ink-soft)}
.modal.sent form{display:none}
.modal.sent .done{display:block}

/* ---------- заглушки-страницы ---------- */
.hero-sub{
  position:relative;overflow:hidden;text-align:center;
  padding:84px 0 64px;
}
.hero-sub .wrap{position:relative;z-index:2}
.hero-sub .blobby--big{margin:0 auto 26px}
.hero-sub h1{font-size:clamp(30px,4.4vw,48px);line-height:1.12;margin-top:18px}
.hero-sub .lead{margin:18px auto 0;max-width:54ch;font-size:17.5px;color:var(--ink-soft)}
.hero-sub .kicker{margin-top:4px}
.hero-sub .btn{margin-top:34px}

.stub-wrap{padding:40px 0 100px}
.stub-card{
  background:var(--white);border-radius:36px;
  box-shadow:var(--shadow);
  padding:46px 44px;position:relative;overflow:hidden;
}
.stub-card h2{font-size:clamp(21px,2.8vw,27px);line-height:1.25;margin:16px 0 10px}
.stub-card .sub{font-size:15.5px;color:var(--ink-soft);max-width:56ch}
.stub-card .btn{margin-top:26px}
.stub-card input[type="email"], .stub-card textarea{max-width:480px}
.stub-card .done{display:none;padding:8px 0}
.stub-card .done .face{width:72px;margin-bottom:16px}
.stub-card form.sent{display:none}
.stub-card form.sent + .done{display:block}
.stub-card .bub{opacity:.35}

@media (max-width:640px){
  .pad{padding:64px 0}
  .hero-sub{padding:56px 0 44px}
  .stub-card{padding:32px 24px;border-radius:28px}
  .modal{padding:30px 24px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}