/* ТЗ-23 Часть Б — ролевые лендинги (diver). Океанский бренд BRAND.md
   по prototype_diver_landing.html. Cormorant + DM Sans (self-host, base.html). */
.lid-role{
  --bteal:#0fb8c9; --bteal-hi:#4dd9e8; --bcoral:#e8604a;
  --bdeep:#02080f; --bocean:#0a2040; --bocean2:#1a3a5c;
  --bcream:#f4f0eb; --bcream2:#f0ede7; --bink:#0a2040; --bmuted:#5a6b80; --bborder:#e6e0d6;
  --bserif:var(--font-head,"Cormorant Garamond",Georgia,serif);
  --bsans:var(--font-text,"DM Sans",system-ui,sans-serif);
  background:var(--bcream); color:var(--bink); font-family:var(--bsans); line-height:1.6;
}
.lid-role h1,.lid-role h2,.lid-role h3{font-family:var(--bserif);font-weight:600;line-height:1.1;letter-spacing:.01em}
.lid-role .lid-role-wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.lid-role a{color:inherit;text-decoration:none}

/* hero */
.lid-role-hero{position:relative;color:#fff;text-align:center;
  background:linear-gradient(180deg,rgba(2,8,15,.55),rgba(10,32,64,.78)),
    url('/static/video/hero-poster.webp') center/cover no-repeat;
  background-color:var(--bocean);padding:120px 0 130px}
.lid-role-hero .kicker{font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--bteal-hi);font-weight:700}
.lid-role-hero h1{font-size:68px;margin:18px 0 14px;color:#fff;font-weight:700}
.lid-role-hero p{font-size:20px;max-width:620px;margin:0 auto 30px;color:#e7eef4}
.lid-role-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.lid-role-btn{display:inline-block;padding:14px 30px;border-radius:999px;font-weight:700;font-size:15px;transition:.15s}
.lid-role-btn.primary{background:var(--bteal);color:#022}
.lid-role-btn.primary:hover{background:var(--bteal-hi)}
.lid-role-btn.ghost{border:1.5px solid rgba(255,255,255,.55);color:#fff}
.lid-role-btn.ghost:hover{border-color:var(--bteal-hi);color:var(--bteal-hi)}

/* mission */
.lid-role-mission{background:var(--bocean2);color:#eaf1f6;text-align:center;padding:54px 0}
.lid-role-mission h2{font-size:34px;color:#fff;margin-bottom:12px}
.lid-role-mission p{max-width:680px;margin:0 auto;font-size:17px;color:#c8d6e2}

/* steps */
.lid-role-section{padding:84px 0}
.lid-role-section.cream{background:var(--bcream)}
.lid-role-section.cream2{background:var(--bcream2)}
.lid-role-stephead{display:flex;align-items:baseline;gap:18px;margin-bottom:34px}
.lid-role-num{font-family:var(--bserif);font-size:60px;font-weight:700;color:var(--bteal);line-height:1}
.lid-role-stephead h2{font-size:38px}
.lid-role-stephead .lead{color:var(--bmuted);font-size:17px;margin-top:6px}
.lid-role-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.lid-role-card{background:#fff;border:1px solid var(--bborder);border-radius:14px;padding:26px 22px}
.lid-role-card .ic{width:42px;height:42px;border-radius:10px;background:rgba(15,184,201,.12);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.lid-role-card .ic svg{width:22px;height:22px;stroke:var(--bteal);fill:none;stroke-width:1.8}
.lid-role-card h3{font-size:21px;margin-bottom:8px;color:var(--bink)}
.lid-role-card p{font-size:14.5px;color:var(--bmuted)}

/* CTA */
.lid-role-cta{background:linear-gradient(135deg,var(--bocean),var(--bdeep));color:#fff;text-align:center;padding:96px 0}
.lid-role-cta h2{font-size:46px;margin-bottom:14px;color:#fff}
.lid-role-cta p{font-size:18px;color:#cfe0ec;max-width:560px;margin:0 auto 30px}

@media(max-width:900px){
  .lid-role-cards{grid-template-columns:repeat(2,1fr)}
  .lid-role-hero h1{font-size:48px}
}
@media(max-width:560px){
  .lid-role-cards{grid-template-columns:1fr}
  .lid-role-hero h1{font-size:38px}
  .lid-role-stephead{flex-direction:column;gap:6px}
}