/* ============================================================
   DL Studio — стили.
   Порядок: переменные → база → шапка → секции → адаптив.
   Всё в одном файле специально: один запрос, быстрая загрузка.
   ============================================================ */

:root{
  --bg:      #0b0b0c;
  --bg-2:    #111113;
  --bg-3:    #17171a;
  --line:    rgba(255,255,255,.09);
  --line-2:  rgba(255,255,255,.16);
  --text:    #f2f0ed;
  --muted:   #8d8a85;
  --accent:  #dda94f;

  --pad:     clamp(20px, 5vw, 72px);   /* боковые поля страницы */
  --gap:     clamp(56px, 9vw, 130px);  /* воздух между секциями */

  --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Inter,
          "Segoe UI", Roboto, Arial, sans-serif;
}

*,*::before,*::after{ 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:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{ margin:0; font-weight:600; letter-spacing:-.03em; line-height:1.05; }
p{ margin:0 0 1em; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

::selection{ background:var(--accent); color:#000; }

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

/* Плёночное зерно — один SVG-шум, без картинок */
.grain{
  position:fixed; inset:-50%;
  pointer-events:none; z-index:9;
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ============================================================
   ШАПКА
   ============================================================ */

.header{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:16px;
  padding:14px var(--pad);
  background:rgba(11,11,12,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}

.brand{ display:flex; align-items:baseline; gap:7px; margin-right:auto; }
.brand__mark{
  font-weight:700; letter-spacing:-.04em; font-size:19px; color:var(--accent);
}
.brand__name{
  font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}

.nav{ display:none; gap:28px; font-size:14px; color:var(--muted); }
.nav a{ transition:color .2s; }
.nav a:hover{ color:var(--text); }

.header__right{ display:flex; align-items:center; gap:14px; }

.lang{
  display:flex; align-items:center; gap:5px;
  font-size:12px; letter-spacing:.1em; color:var(--muted);
}
.lang button{ padding:3px 1px; transition:color .2s; }
.lang button:hover{ color:var(--text); }
.lang button.is-active{ color:var(--accent); }

/* Кнопки */
.btn{
  display:inline-block;
  padding:14px 26px;
  background:var(--accent); color:#0b0b0c;
  font-size:15px; font-weight:600; letter-spacing:-.01em;
  border-radius:2px;
  transition:transform .2s, filter .2s;
}
.btn:hover{ filter:brightness(1.1); transform:translateY(-1px); }
.btn--sm{ padding:9px 15px; font-size:13px; }

.link-arrow{
  font-size:15px; color:var(--muted);
  border-bottom:1px solid var(--line-2); padding-bottom:2px;
  transition:color .2s, border-color .2s;
}
.link-arrow::after{ content:" →"; }
.link-arrow:hover{ color:var(--text); border-color:var(--accent); }

/* ============================================================
   ЭКРАН 1 — ШОУРИЛ
   ============================================================ */

.hero{ padding:clamp(44px,9vw,86px) var(--pad) 0; }

.eyebrow{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-bottom:22px;
}

.hero__title{
  font-size:clamp(34px, 8.4vw, 92px);
  max-width:16ch;
  margin-bottom:22px;
}

.hero__lede{
  font-size:clamp(16px, 2.1vw, 19px);
  color:var(--muted);
  max-width:56ch;
  margin-bottom:clamp(30px,5vw,46px);
}

/* Плеер: обложка + клик → подгружается iframe (страница грузится быстро) */
.player{
  position:relative;
  aspect-ratio:16/9;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
}
.player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.player__poster{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  width:100%;
  background:
    radial-gradient(120% 80% at 50% 40%, rgba(221,169,79,.10), transparent 60%),
    linear-gradient(160deg, #1b1b1f 0%, #0e0e10 55%, #141417 100%);
  background-size:cover; background-position:center;
  transition:filter .35s;
}
.player__poster:hover{ filter:brightness(1.12); }
/* С обложкой добавляем затемнение, иначе подпись теряется на светлом кадре */
.player__poster.has-poster{
  background-image:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.12) 55%), var(--poster);
}

.player__play{
  width:clamp(56px,9vw,84px); aspect-ratio:1;
  border:1px solid var(--line-2);
  border-radius:50%;
  display:grid; place-items:center;
  background:rgba(11,11,12,.35);
  backdrop-filter:blur(4px);
  transition:border-color .3s, background .3s, transform .3s;
}
.player__play::after{
  content:"";
  border-left:clamp(13px,2vw,18px) solid var(--text);
  border-top:clamp(8px,1.2vw,11px) solid transparent;
  border-bottom:clamp(8px,1.2vw,11px) solid transparent;
  margin-left:4px;
}
.player__poster:hover .player__play{
  border-color:var(--accent); background:rgba(221,169,79,.14); transform:scale(1.05);
}

.player__label{
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
/* Подсказка «заменить» — удалить, когда вставишь настоящее видео */
.player__hint{
  font-size:11px; letter-spacing:.06em;
  color:rgba(221,169,79,.65);
  border:1px dashed rgba(221,169,79,.35);
  padding:3px 9px; border-radius:2px;
}

.hero__cta{
  display:flex; align-items:center; flex-wrap:wrap; gap:22px;
  margin-top:28px;
}

/* ============================================================
   ОБЩЕЕ ДЛЯ СЕКЦИЙ
   ============================================================ */

.section{
  padding:var(--gap) var(--pad) 0;
  scroll-margin-top:70px;   /* чтобы липкая шапка не накрывала заголовок */
}

.section__head{
  display:flex; align-items:baseline; gap:16px;
  padding-bottom:22px; margin-bottom:clamp(28px,4vw,44px);
  border-bottom:1px solid var(--line);
}
.section__num{
  font-size:12px; letter-spacing:.16em; color:var(--accent);
}
.section__head h2{ font-size:clamp(26px,4.6vw,46px); }

/* ============================================================
   УСЛУГИ
   ============================================================ */

.cards{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }

.card{
  background:var(--bg);
  padding:clamp(24px,4vw,38px);
  transition:background .3s;
}
.card:hover{ background:var(--bg-2); }
.card__num{
  display:block; font-size:11px; letter-spacing:.18em; color:var(--accent); margin-bottom:20px;
}
.card h3{ font-size:clamp(19px,2.6vw,24px); margin-bottom:12px; }
.card p{ color:var(--muted); font-size:15px; margin:0; max-width:44ch; }

/* Строчка «что получаешь» — конкретика, которой клиенту не хватает больше всего */
.card__deliv{
  margin-top:16px !important;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-size:13.5px;
  color:var(--muted);
}
.card__deliv::first-line{ color:var(--text); }

/* ============================================================
   ОТРАСЛИ — ворота на нишевые страницы с главной
   ============================================================ */

.industries{ display:grid; gap:12px; }

.industry{
  display:grid; gap:8px;
  padding:clamp(22px,3.4vw,32px);
  border:1px solid var(--line);
  border-radius:3px;
  background:var(--bg-2);
  transition:border-color .25s, background .25s, transform .25s;
}
.industry:hover{
  border-color:var(--accent);
  background:var(--bg-3);
  transform:translateY(-2px);
}
.industry__tag{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
}
.industry__name{
  font-size:clamp(19px,2.6vw,24px); font-weight:600; letter-spacing:-.02em;
}
.industry__name::after{ content:" →"; color:var(--muted); }
.industry__line{ font-size:14px; color:var(--muted); max-width:46ch; }

@media (min-width:760px){
  .industries{ grid-template-columns:1fr 1fr; }
}

/* ============================================================
   НИШЕВЫЕ СТРАНИЦЫ (medical.html, legal.html)
   ============================================================ */

.hero--niche{ padding-bottom:0; }
.hero--niche .hero__title{ max-width:20ch; }

/* Математика клиента — считаем его деньгами, а не своими */
.roi{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line);
}
.roi li{ background:var(--bg); padding:24px 22px; display:grid; gap:6px; }
.roi b{ font-size:clamp(26px,3.4vw,34px); font-weight:600; letter-spacing:-.03em; }
.roi span{ font-size:13px; color:var(--muted); }
.roi__note{ margin:22px 0 0; color:var(--muted); font-size:15px; max-width:62ch; }

/* Founding-предложение */
.founding{
  border:1px solid var(--line-2);
  border-left:2px solid var(--accent);
  background:var(--bg-2);
  padding:clamp(24px,4vw,40px);
}
.founding p{ color:var(--muted); max-width:62ch; }
.founding b{ color:var(--text); }
.founding__lead{
  color:var(--text) !important;
  font-size:clamp(19px,2.6vw,24px);
  line-height:1.35; letter-spacing:-.02em;
  margin-bottom:18px;
}
/* Честный абзац — намеренно приглушён, но не спрятан */
.founding__honest{
  border-top:1px solid var(--line);
  padding-top:18px;
  font-size:14px;
}

@media (min-width:640px){
  .roi{ grid-template-columns:repeat(3,1fr); }
}

/* Цены «от» под карточками услуг */
.rates{
  list-style:none; margin:34px 0 0; padding:0;
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line);
}
.rates li{
  background:var(--bg); padding:22px;
  display:grid; gap:5px;
}
.rates__what{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
}
.rates b{
  font-size:clamp(24px,3vw,30px); font-weight:600;
  letter-spacing:-.03em; white-space:nowrap;
}
.rates__sub{ font-size:13px; color:var(--muted); }
.rates__note{ margin:14px 0 0; font-size:13px; color:var(--muted); max-width:64ch; }

@media (min-width:640px){
  .rates{ grid-template-columns:repeat(3,1fr); }
}

/* Обещание под карточками услуг (пока закомментировано в HTML) */
.pledge{
  margin:26px 0 0;
  padding:22px 24px;
  border-left:2px solid var(--accent);
  background:var(--bg-2);
  color:var(--muted);
  font-size:15px;
  max-width:70ch;
}

/* ============================================================
   РАБОТЫ
   ============================================================ */

/* Подпись над сеткой работ */
.work__note{
  color:var(--muted);
  font-size:15px;
  max-width:62ch;
  margin:-8px 0 26px;
}
.work__note b{ color:var(--text); font-weight:600; }

.work{ display:grid; gap:12px; }

.tile{
  position:relative;
  aspect-ratio:16/10;
  width:100%;
  padding:0;
  display:block; text-align:left;
  border:1px solid var(--line);
  border-radius:3px;
  overflow:hidden;
  background:
    linear-gradient(200deg, rgba(221,169,79,.07), transparent 55%),
    linear-gradient(150deg, #1a1a1e, #0d0d0f);
  background-size:cover; background-position:center;
  transition:border-color .3s, transform .3s;
}
.tile.has-poster{ background-image:linear-gradient(to top, rgba(0,0,0,.72), transparent 55%), var(--poster); }
.tile:hover{ border-color:var(--line-2); transform:translateY(-2px); }

.tile::after{   /* штриховка-заглушка, пропадает когда есть обложка */
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 12px, transparent 12px 24px);
}
.tile.has-poster::after{ display:none; }

.tile__meta{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; flex-direction:column; gap:4px;
  padding:18px 20px;
  background:linear-gradient(to top, rgba(9,9,10,.92), transparent);
}
.tile__tag{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
}
.tile__title{ font-size:16px; font-weight:500; letter-spacing:-.01em; }

/* Строчка «ещё из рубрики» под сеткой */
.work__more{ margin:18px 0 0; font-size:14px; color:var(--muted); }
.work__more a{
  color:var(--text); border-bottom:1px solid var(--line-2); padding-bottom:1px;
  transition:color .2s, border-color .2s;
}
.work__more a:hover{ color:var(--accent); border-color:var(--accent); }

/* ============================================================
   ОБО МНЕ
   ============================================================ */

.about{ display:grid; gap:clamp(26px,4vw,54px); }

.about__photo{
  position:relative;
  aspect-ratio:4/5;
  max-width:340px;
  border:1px solid var(--line);
  border-radius:3px;
  /* Лёгкое затемнение поверх — чтобы светло-серый фон студии
     не выбивался из тёмной страницы */
  background-image:
    linear-gradient(to bottom, rgba(11,11,12,.28), rgba(11,11,12,.52)),
    url(assets/portrait.jpg);
  background-size:cover; background-position:center top;
}

.about__text p{ color:var(--muted); max-width:58ch; }
.about__text .lead{
  color:var(--text);
  font-size:clamp(19px,2.8vw,25px);
  line-height:1.35; letter-spacing:-.02em;
  margin-bottom:20px;
}

.facts{
  list-style:none; margin:32px 0 0; padding:0;
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line);
}
.facts li{
  background:var(--bg); padding:18px 20px;
  display:flex; flex-direction:column; gap:3px;
}
.facts b{ font-size:20px; letter-spacing:-.02em; font-weight:600; }
.facts span{ font-size:13px; color:var(--muted); }

/* ============================================================
   КОНТАКТЫ + ПОДВАЛ
   ============================================================ */

.contact__lede{
  font-size:clamp(17px,2.4vw,22px);
  line-height:1.45; letter-spacing:-.02em;
  max-width:48ch; margin-bottom:clamp(30px,4vw,46px);
}

/* ============================================================
   ФОРМА ОБРАТНОЙ СВЯЗИ
   ============================================================ */

.cform{ max-width:720px; margin:0 0 40px; }
.cform__bot{ display:none !important; }

.cform label{ display:block; margin-bottom:16px; }
.cform label > span{
  display:block; margin-bottom:7px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.cform input,
.cform textarea{
  width:100%;
  padding:13px 15px;
  font:inherit; font-size:16px;      /* 16px — иначе iPhone зумит при фокусе */
  color:var(--text);
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:3px;
  transition:border-color .2s, background .2s;
}
.cform input:focus,
.cform textarea:focus{
  outline:none; border-color:var(--accent); background:var(--bg-3);
}
.cform textarea{ resize:vertical; min-height:92px; }
.cform button{ border:0; cursor:pointer; }

.cform__status{ margin:14px 0 0; font-size:14px; min-height:1.2em; }
.cform__status.is-ok{ color:var(--accent); }
.cform__status.is-err{ color:#e2725b; }

.cform__or{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 14px;
}

@media (min-width:640px){
  .cform__row{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
}

.contact{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px; background:var(--line);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.contact li{
  background:var(--bg);
  padding:20px 0;
  display:flex; flex-direction:column; gap:4px;
}
.contact__label{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.contact a{
  font-size:clamp(21px,3.6vw,32px);
  letter-spacing:-.03em;
  width:fit-content;
  border-bottom:1px solid transparent;
  transition:color .2s, border-color .2s;
}
.contact a:hover{ color:var(--accent); border-color:var(--accent); }

.footer{
  margin-top:var(--gap);
  padding:26px var(--pad);
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  align-items:center;
  font-size:12px; letter-spacing:.06em; color:var(--muted);
}
.footer a{
  border-bottom:1px solid var(--line-2); padding-bottom:1px;
  transition:color .2s, border-color .2s;
}
.footer a:hover{ color:var(--accent); border-color:var(--accent); }

/* Ссылки на нишевые страницы */
.footer__niches{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; }
.footer__label{ opacity:.6; }

/* ============================================================
   МОДАЛЬНОЕ ОКНО (работы)
   ============================================================ */

.modal{
  position:fixed; inset:0; z-index:50;
  display:grid; place-items:center;
  padding:var(--pad);
  background:rgba(6,6,7,.94);
  backdrop-filter:blur(8px);
}
.modal[hidden]{ display:none; }
.modal__frame{
  width:min(1100px,100%); aspect-ratio:16/9;
  background:#000; border:1px solid var(--line);
}
.modal__frame iframe{ width:100%; height:100%; border:0; display:block; }
.modal__close{
  position:absolute; top:14px; right:18px;
  font-size:34px; line-height:1; color:var(--muted);
  padding:8px; transition:color .2s;
}
.modal__close:hover{ color:var(--text); }

/* ============================================================
   АДАПТИВ — база выше написана под телефон
   ============================================================ */

@media (min-width:640px){
  .work{ grid-template-columns:1fr 1fr; }
  .facts{ grid-template-columns:repeat(3,1fr); }
  .contact li{ flex-direction:row; align-items:baseline; gap:24px; padding:22px 0; }
  .contact__label{ width:110px; flex:none; }
}

@media (min-width:900px){
  .nav{ display:flex; }
  .cards{ grid-template-columns:1fr 1fr; }
}

@media (min-width:1100px){
  .cards{ grid-template-columns:repeat(4,1fr); }
  /* Работ сейчас 4 → сетка 2×2. Станет 6 — можно вернуть repeat(3,1fr) */
  .work{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .about{ grid-template-columns:340px 1fr; align-items:start; }
  .section__head{ margin-bottom:52px; }

  /* На десктопе поджимаем текст, чтобы шоурил попадал в первый экран */
  .hero{ padding-top:52px; }
  .hero__title{ font-size:clamp(52px,4.8vw,70px); max-width:19ch; margin-bottom:18px; }
  .hero__lede{ margin-bottom:32px; }
  /* Ширина плеера ограничена так, чтобы его высота влезала в экран */
  .player{ max-width:calc((100vh - 260px) * 16 / 9); }
}

/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}