/* WLG Digital Design System, рабочий срез для секции под Hero
   Токены из брендбука (февраль 2023) и решений владелицы 21.08.2026.
   Автор: Tom, 21.08.2026. Живой сайт не затронут. */

:root{
  /* Цвет: брендбук */
  --emerald:#005151;
  --emerald-deep:#003C3C;
  --yellow:#F3AE3D;
  --sky:#AFD6E6;
  --nautical:#285885;
  --white:#FFFFFF;
  --ink:#12211F;          /* текст на белом, не чистый чёрный */
  --ink-soft:#4A5A58;
  --rule:#D8E2E0;

  /* Кегли: шкала 78/44/21/16 сохранена по её решению 21.08 */
  --t-display:78px;
  --t-section:44px;
  --t-lead:21px;
  --t-body:16px;
  --t-small:14px;
  --t-label:12px;

  /* Интерлиньяж отдельным значением на каждую роль текста */
  --lh-display:1.02;
  --lh-section:1.08;
  --lh-lead:1.45;
  --lh-body:1.55;
  --lh-label:1.2;

  /* Шаг вертикали: предпочтительная система, не закон */
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:96px; --s7:140px;

  --page:1280px;          /* контейнер страницы */
  --measure:66ch;         /* мера чтения, отдельно от контейнера */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Montserrat,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:var(--t-body); line-height:var(--lh-body);
  color:var(--ink); background:var(--white);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--page); margin:0 auto; padding:0 40px}

/* Основной текст выключен по ширине: её решение, пересмотру не подлежит.
   Чтобы не было дыр, мера ограничена и включены переносы. */
p.body{
  text-align:justify; hyphens:auto; -webkit-hyphens:auto;
  max-width:var(--measure); margin:0 0 var(--s3);
}
p.lead{
  font-size:var(--t-lead); line-height:var(--lh-lead);
  text-align:justify; hyphens:auto; max-width:60ch; margin:0 0 var(--s4);
}
/* Короткий служебный текст может идти по левому краю: её правка 1 */
.label{
  font-size:var(--t-label); line-height:var(--lh-label);
  letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  text-align:left; color:var(--ink-soft);
}
h1,h2,h3{margin:0 0 var(--s3); font-weight:600; text-align:left}
h1{font-size:var(--t-display); line-height:var(--lh-display); letter-spacing:-.02em}
h2{font-size:var(--t-section); line-height:var(--lh-section); letter-spacing:-.01em}
h3{font-size:var(--t-lead); line-height:1.25}

/* ---------- Шапка ---------- */
.top{background:var(--emerald); color:var(--white)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; height:84px}
.logo{font-size:26px; font-weight:700; letter-spacing:.04em; color:var(--yellow)}
.nav{display:flex; gap:28px; font-size:var(--t-small); font-weight:500}
.nav a{color:var(--white); text-decoration:none; opacity:.92}
.nav a:hover{opacity:1; text-decoration:underline; text-underline-offset:4px}

/* ---------- Hero ---------- */
.hero{background:var(--emerald); color:var(--white); padding:var(--s7) 0 var(--s6)}
.hero h1{color:var(--white); max-width:14ch}
.hero h1 em{font-style:normal; color:var(--yellow)}
.hero .sub{
  font-size:var(--t-lead); line-height:var(--lh-lead); max-width:52ch;
  margin:var(--s4) 0 var(--s5); color:rgba(255,255,255,.92);
  text-align:justify; hyphens:auto;
}
.cta-row{display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center}
.btn{
  display:inline-block; padding:16px 30px; font-weight:600; font-size:var(--t-body);
  text-decoration:none; border:2px solid transparent; transition:.15s;
}
.btn-primary{background:var(--yellow); color:var(--emerald-deep)}
.btn-primary:hover{background:#ffc25e}
.btn-ghost{border-color:rgba(255,255,255,.55); color:var(--white)}
.btn-ghost:hover{border-color:var(--white); background:rgba(255,255,255,.08)}

/* Полоса доказательств: часть Hero */
.proof{border-top:1px solid rgba(255,255,255,.18); margin-top:var(--s6)}
.proof ul{list-style:none; display:flex; margin:0; padding:var(--s4) 0 0; gap:var(--s5); flex-wrap:wrap}
.proof .n{font-size:32px; font-weight:600; color:var(--yellow); line-height:1.1}
.proof .c{font-size:var(--t-small); color:rgba(255,255,255,.8); margin-top:6px; max-width:20ch}

/* ---------- Общее для секции ---------- */
.section{padding:var(--s7) 0}
.section .head{margin-bottom:var(--s5); display:grid;
   grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:var(--s5); align-items:end}
.section .head .titles{grid-column:1}
.section .head .intro{grid-column:2; align-self:end}
.section .head h2{margin-bottom:0}
.section .head p.body{margin-bottom:0}
.section .head .label{margin-bottom:var(--s2)}
.hairline{height:1px; background:var(--rule); border:0; margin:0}

/* Метка происхождения цифры */
.src{font-size:var(--t-label); color:var(--ink-soft); letter-spacing:.04em; text-transform:none}

@media (max-width:900px){
  :root{--t-display:40px; --t-section:28px; --t-lead:18px; --t-body:16px;
        --s7:72px; --s6:56px; --s5:40px}
  .wrap{padding:0 20px}
  .nav{display:none}
  .hero{padding:var(--s6) 0 var(--s5)}
  .hero h1{max-width:none}
  .hero .sub{text-align:left}      /* на узкой мере выключка даёт дыры */
  p.body,p.lead{text-align:left}
  .proof ul{gap:var(--s3) var(--s4)}
  .section .head{grid-template-columns:1fr; gap:var(--s3)}
  .section .head .titles,.section .head .intro{grid-column:1}
  .cta-row .btn{flex:1 1 100%; text-align:center}
}