/* DVIZH PERM — dvizhperm.ru
   Чистая верстка: светлая тема, крупный текст, комфортная длина строки.
   Шрифты только системные — никаких внешних подключений. */

:root{
  --bg:#f7f6f2;
  --surface:#ffffff;
  --text:#15171b;
  --muted:#63686f;
  --line:#e4e1da;
  --accent:#ffc400;
  --accent-deep:#8a6400;
  --dark:#121316;
  --radius:16px;
  --shadow:0 1px 2px rgba(20,22,26,.04), 0 8px 24px rgba(20,22,26,.06);
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:18px;
  line-height:1.7;
  font-weight:400;
  text-rendering:optimizeLegibility;
}

img{max-width:100%; height:auto; display:block}

a{color:inherit; text-decoration:none}

:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:6px}

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

.skip{
  position:absolute; left:-9999px; top:0; background:var(--dark); color:#fff;
  padding:12px 18px; border-radius:0 0 10px 0; z-index:100;
}
.skip:focus{left:0}

/* ---------- Шапка ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:rgba(247,246,242,.86);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; min-height:64px;
}
.wordmark{display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.02em; font-size:17px}
.wordmark__badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:9px; background:var(--dark); color:var(--accent);
  font-weight:800; font-size:16px; overflow:hidden;
}
.wordmark__badge img{width:100%; height:100%; object-fit:contain; display:block}
.wordmark__city{background:linear-gradient(transparent 62%, var(--accent) 62%); padding:0 2px}
.nav{display:flex; align-items:center; gap:6px}
.nav a{
  padding:9px 14px; border-radius:999px; font-size:15.5px; color:var(--muted);
  transition:background .18s ease, color .18s ease;
}
.nav a:hover{background:#efece5; color:var(--text)}
.nav .nav__tg{
  background:var(--dark); color:#fff; font-weight:600;
}
.nav .nav__tg:hover{background:#000; color:#fff}
.nav .nav__page{
  background:var(--surface); border:1px solid var(--line); color:var(--text);
  font-weight:600; letter-spacing:.03em;
}
.nav .nav__page:hover{background:var(--accent); border-color:var(--accent); color:#14150f}
.nav .nav__page[aria-current="page"]{background:var(--accent); border-color:var(--accent); color:#14150f}
@media (max-width:860px){
  .nav a.nav__section{display:none}
}

/* ---------- Hero (без фото: глубокий градиент) ---------- */
.hero{
  position:relative; isolation:isolate; color:#fff; overflow:hidden;
  background:radial-gradient(130% 120% at 12% 0%, #23262d 0%, #16181d 48%, #0d0e11 100%);
}
.hero::after{
  content:""; position:absolute; inset:auto 0 0 0; height:38%; z-index:-1;
  background:linear-gradient(180deg, rgba(13,14,17,0) 0%, rgba(13,14,17,.75) 100%);
}
.hero__image{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 45%;
  z-index:-2;
}
.hero__veil{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(13,14,17,.52) 0%, rgba(13,14,17,.42) 45%, rgba(13,14,17,.78) 100%);
}
@media (max-width:640px){
  .hero__image{object-position:50% 35%}
}
.hero__inner{position:relative; z-index:1; padding:clamp(72px,14vw,168px) 22px clamp(48px,9vw,104px); max-width:1120px; margin:0 auto}
.eyebrow{
  margin:0 0 18px; font-size:13.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
}
.hero__title{
  margin:0; font-weight:800; letter-spacing:-.02em; line-height:1.03;
  font-size:clamp(38px, 8.4vw, 82px);
  display:flex; flex-direction:column; gap:.06em;
  text-shadow:0 2px 22px rgba(0,0,0,.55);
}
.hero__title em{font-style:normal; background:linear-gradient(transparent 60%, var(--accent) 60%)}
.hero__title b{color:var(--accent)}
.hero__lead{
  margin:clamp(24px,4vw,38px) 0 0; max-width:46ch;
  font-size:clamp(17px,2.2vw,20px); color:#f2f0ea; line-height:1.6;
  text-shadow:0 2px 16px rgba(0,0,0,.6);
}
.hero .eyebrow{text-shadow:0 2px 14px rgba(0,0,0,.6)}
.hero__lead p{margin:0 0 8px}
.hero__lead p:last-child{margin-bottom:0; color:#c9c6bf}

/* ---------- Секции ---------- */
.section{padding:clamp(56px,9vw,104px) 0}
.section--tight{padding-top:clamp(40px,6vw,72px)}
.kicker{
  margin:0 0 16px; font-size:13.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-deep);
}
h2{
  margin:0 0 20px; font-weight:800; letter-spacing:-.015em; line-height:1.15;
  font-size:clamp(26px,4.2vw,40px); max-width:26ch;
}
.prose p{margin:0 0 18px; max-width:66ch; color:#2c3037}
.prose p:last-child{margin-bottom:0}
.rule{height:1px; background:var(--line); border:0; margin:0}

/* ---------- Что тебя ждёт ---------- */
.cards{
  display:grid; gap:20px; margin-top:34px;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.card__body{padding:22px 22px 24px}
.card__num{
  display:inline-block; font-size:13px; font-weight:800; letter-spacing:.12em;
  color:var(--accent-deep); margin-bottom:8px;
}
.card h3{margin:0; font-size:19.5px; font-weight:700; letter-spacing:-.01em}
.card p{margin:8px 0 0; font-size:16px; color:var(--muted); line-height:1.6}
.card__note{color:var(--muted); font-size:16px}

/* ---------- Лента ---------- */
.feed__head{display:flex; flex-wrap:wrap; align-items:baseline; gap:12px; margin-bottom:26px}
.feed__head h2{margin:0}
.feed__tag{
  font-size:14.5px; font-weight:600; color:var(--muted);
  border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:5px 12px;
}
.posts{display:grid; gap:18px}
.post{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px 22px 18px;
}
.post__top{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.post__avatar{
  width:38px; height:38px; border-radius:11px; background:var(--dark); color:var(--accent);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:800; letter-spacing:.04em; flex:0 0 auto;
}
.post__who{font-weight:700; font-size:16px; line-height:1.3}
.post__date{display:block; font-size:14px; color:var(--muted); font-weight:400}
.post__text{margin:0; color:#2c3037}
.post__text p{margin:0 0 10px; max-width:70ch}
.post__text p:last-child{margin-bottom:0}
.post__img{margin:16px 0 4px; display:flex; justify-content:flex-start}
.post__img img{
  width:auto; height:auto;
  max-width:min(100%, 460px);
  max-height:360px;
  border-radius:12px; border:1px solid var(--line);
}
.post__link{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-weight:600; font-size:15.5px; color:var(--accent-deep);
}
.post__link:hover{text-decoration:underline}
.feed__all{
  display:inline-flex; align-items:center; gap:8px; margin-top:22px;
  padding:12px 20px; border-radius:999px; border:1.5px solid var(--dark);
  font-weight:600; font-size:16px;
}
.feed__all:hover{background:var(--dark); color:#fff}

/* ---------- Страница «Скоро» (МЕРЧ) ---------- */
.soon{padding:clamp(64px,12vw,148px) 0 clamp(56px,10vw,120px)}
.soon__inner{max-width:44ch; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px}
.soon__badge{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:#14150f; font-weight:700; font-size:14px;
  letter-spacing:.1em; text-transform:uppercase;
  padding:8px 16px; border-radius:999px;
}
.soon h1{
  margin:0; font-weight:800; letter-spacing:-.02em; line-height:1.02;
  font-size:clamp(46px,12vw,96px);
}
.soon p{margin:0; color:var(--muted); font-size:18.5px}
.soon__back{
  display:inline-flex; align-items:center; gap:8px; margin-top:10px;
  padding:13px 24px; border-radius:999px; border:1.5px solid var(--dark); font-weight:600;
}
.soon__back:hover{background:var(--dark); color:#fff}

/* ---------- CTA ---------- */
.cta{
  background:var(--dark); color:#fff; border-radius:0;
}
.cta__inner{
  padding:clamp(48px,8vw,92px) 0; display:flex; flex-direction:column; align-items:flex-start; gap:14px;
}
.cta__kicker{margin:0; font-size:15px; color:#a9a7a0}
.cta h2{margin:0; color:#fff; max-width:30ch}
.cta__btn{
  display:inline-flex; align-items:center; gap:10px; margin-top:12px;
  background:var(--accent); color:#14150f; font-weight:700; font-size:17px;
  padding:15px 26px; border-radius:999px;
  transition:transform .16s ease, background .16s ease;
}
.cta__btn:hover{background:#ffd23d; transform:translateY(-1px)}

/* ---------- Подвал ---------- */
.footer{border-top:1px solid var(--line); background:var(--bg)}
.footer__inner{
  display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between;
  padding:28px 0; font-size:15.5px; color:var(--muted);
}
.footer a:hover{color:var(--text); text-decoration:underline}
.footer__brand{font-weight:700; color:var(--text); letter-spacing:.02em}
.footer__note{flex:1 1 100%; font-size:14px; color:#8b9099}

/* ---------- Наши сборы ---------- */
.collects__media{
  position:relative; margin-top:32px; aspect-ratio:16/9; width:100%;
  border-radius:var(--radius); overflow:hidden; background:#0d0e11;
  border:1px solid var(--line); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
}
.collects__media video, .collects__media img{width:100%; height:100%; object-fit:cover; display:block}
.collects__media--vertical{aspect-ratio:9/16; width:100%; max-width:400px; margin-left:auto; margin-right:auto}
.collects__figure{margin:0}
.collects__figure .collects__meta{text-align:center}
.collects__soon{color:#9a958a; font-size:15.5px; letter-spacing:.02em}
.collects__meta{margin:14px 0 0; color:var(--muted); font-size:15px}

@media (max-width:640px){
  body{font-size:17px}
  .hero__inner{padding-top:64px}
  .post{padding:18px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important; animation:none !important}
}

/* ---------- Анонсы встреч ---------- */
.meetup{
  margin-top:28px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
}
.meetup__head{
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 22px;
  padding:22px 24px; border-bottom:1px solid var(--line);
  background:linear-gradient(120deg, #1b1d22 0%, #121316 60%, #1f1c12 100%);
  color:#fff;
}
.meetup__date{
  flex:0 0 auto; margin:0; text-align:center; line-height:1;
  background:var(--accent); color:#14150f; border-radius:14px;
  padding:12px 16px; min-width:96px;
}
.meetup__date b{display:block; font-size:34px; font-weight:800; letter-spacing:-.02em}
.meetup__date span{display:block; margin-top:4px; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.meetup__intro{flex:1 1 260px; min-width:0}
.meetup__tag{
  display:inline-block; margin-bottom:8px; font-size:12.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent);
}
.meetup__title{margin:0; font-size:clamp(22px,3.4vw,30px); font-weight:800; letter-spacing:-.01em; line-height:1.2}
.meetup__when{margin:8px 0 0; color:#c9c6bf; font-size:16px}
.meetup__count{
  flex:0 0 auto; margin:0; text-align:right; color:#c9c6bf; font-size:13.5px;
  line-height:1.35; padding-left:8px; border-left:1px solid rgba(255,255,255,.16);
}
.meetup__count b{display:block; color:#fff; font-size:20px; font-weight:800; letter-spacing:-.01em}
.meetup__body{padding:24px}
.meetup__lead{margin:0 0 22px; max-width:70ch}
.meetup__facts{margin:0 0 22px; display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.meetup__facts > div{
  background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:14px 16px;
}
.meetup__facts dt{
  font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-deep);
}
.meetup__facts dd{margin:6px 0 0; font-size:16.5px; color:var(--text)}
.meetup__program{
  background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:18px 20px;
}
.meetup__program-title{
  margin:0 0 10px; font-size:12.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-deep);
}
.meetup__program ul{margin:0; padding:0; list-style:none; display:grid; gap:6px}
.meetup__program li{padding-left:16px; position:relative}
.meetup__program li::before{
  content:""; position:absolute; left:0; top:.72em; width:6px; height:6px;
  border-radius:50%; background:var(--accent);
}
.meetup__actions{margin-top:22px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px}
.meetup__btn{
  background:var(--accent); color:#14150f; font-weight:700; font-size:16.5px;
  padding:14px 24px; border-radius:999px;
  transition:transform .16s ease, background .16s ease;
}
.meetup__btn:hover{background:#ffd23d; transform:translateY(-1px)}
.meetup__btn--ghost{background:transparent; color:var(--text); border:1.5px solid var(--accent)}
.meetup__btn--ghost:hover{background:rgba(255,196,0,.14)}
.meetup__hint{margin:12px 0 0; font-size:15px; color:var(--muted)}
.meetup__link{color:var(--muted); font-size:16px; text-decoration:underline; text-underline-offset:3px}
.meetup__link:hover{color:var(--text)}

@media (max-width:640px){
  .meetup__head{padding:18px; gap:14px}
  .meetup__date{min-width:84px; padding:10px 14px}
  .meetup__date b{font-size:28px}
  .meetup__count{text-align:left; border-left:0; padding-left:0}
  .meetup__body{padding:18px}
}

/* ---------- Кнопки (hero) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 26px; border-radius:999px; font-size:17px; font-weight:700;
  border:1px solid transparent; transition:transform .16s ease, background .16s ease, border-color .16s ease;
}
.btn--accent{background:var(--accent); color:#14150f}
.btn--accent:hover{background:#ffd23d; transform:translateY(-1px)}
.btn--ghost{border-color:rgba(255,255,255,.55); color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-1px)}
.hero__actions{margin-top:clamp(26px,4vw,36px); display:flex; flex-wrap:wrap; gap:14px}

/* ---------- Ссылка на чат в меню ---------- */
.nav a.nav__chat{
  background:var(--accent); color:#14150f; font-weight:700;
}
.nav a.nav__chat:hover{background:#ffd23d; color:#14150f}

/* ---------- CTA: две кнопки ---------- */
.cta__actions{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.cta__btn--ghost{
  background:transparent; color:inherit; border:1px solid rgba(255,255,255,.5);
}
.cta__btn--ghost:hover{background:rgba(255,255,255,.12); transform:translateY(-1px)}

/* ---------- Карусель фото со сборов ---------- */
.carousel{margin-top:clamp(34px,6vw,60px)}
.carousel__head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:10px; margin-bottom:16px;
}
.carousel__title{margin:0; font-size:clamp(20px,3vw,26px); font-weight:800; letter-spacing:-.01em}
.carousel__counter{margin:0; color:var(--muted); font-size:15px; font-variant-numeric:tabular-nums}
.carousel__counter b{color:var(--text)}
.carousel__viewport{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; padding-bottom:6px;
  scrollbar-width:none;
}
.carousel__viewport::-webkit-scrollbar{display:none}
.carousel__slide{
  flex:0 0 100%; margin:0; scroll-snap-align:center;
  aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden;
  background:#0d0e11; border:1px solid var(--line); box-shadow:var(--shadow);
}
.carousel__slide img{width:100%; height:100%; object-fit:cover; display:block}
.carousel__empty{
  margin:0; padding:clamp(28px,7vw,56px) 22px; text-align:center;
  background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius);
  color:var(--muted); font-size:16.5px;
}
.carousel__nav{display:flex; gap:10px; justify-content:center; margin-top:16px}
.carousel__btn{
  width:46px; height:46px; border-radius:999px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); color:var(--text);
  font-size:19px; line-height:1; transition:background .16s ease, border-color .16s ease;
}
.carousel__btn:hover{background:var(--accent); border-color:var(--accent); color:#14150f}

@media (min-width:760px){
  .carousel__slide{flex-basis:calc(50% - 7px)}
}
@media (min-width:1040px){
  .carousel__slide{flex-basis:calc(33.333% - 9px)}
}