/* ============================================================
   RPHelp — оформление публичной главной (до входа)
   Тёмная тема + оранжевый акцент. Грузится только на /
   (templates/header.php при $landingMode).

   Контент главной не менялся — только внешний вид.
   Классы намеренно префиксованы lp- и не совпадают с
   классами Bootstrap (.btn, .btn-primary и т.д.), иначе
   правила Bootstrap их перебивают.
   ============================================================ */

:root{
  --lp-bg:            #0a0708;
  --lp-card:          #161010;
  --lp-card-hover:    #1c1310;
  --lp-line:          rgba(255, 138, 61, .16);
  --lp-line-strong:   rgba(255, 138, 61, .45);
  --lp-orange:        #ff5a1f;
  --lp-orange-2:      #ff8a3d;
  --lp-text:          #f6f1ee;
  --lp-muted:         #a99b95;
  --lp-radius:        18px;
  --lp-shadow:        0 18px 45px rgba(0, 0, 0, .55);
}

/* Глобальные правила селектора ограничены телом лендинга,
   чтобы не задеть остальные страницы (style.css грузится везде). */
body.lp-landing{
  margin:0;
  /* html body.lp-landing (0,1,2) — на одном уровне с
     html[data-theme="dark"] body, но идёт позже в каскаде,
     поэтому тёмный фон лендинга не перебивается пользовательской темой. */
  background-color:var(--lp-bg);
  background-image:
    radial-gradient(900px 480px at 85% -10%, rgba(255,90,31,.08), transparent 65%),
    radial-gradient(760px 420px at -10% 22%, rgba(255,138,61,.05), transparent 60%);
  color:var(--lp-text);
  font-family:'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* clip, а не hidden: hidden ломает sticky-элементы */
  overflow-x:clip;
}
html body.lp-landing{
  /* (0,1,2) — на одном уровне с html[data-theme="dark"] body,
     но идёт позже в каскаде, поэтому пользовательская тема
     не перебивает тёмный фон лендинга. */
  background-color:var(--lp-bg);
  color:var(--lp-text);
}
body.lp-landing a{ text-decoration:none; }
body.lp-landing img{ max-width:100%; display:block; }

.lp-container{
  width:100%;
  max-width:1140px;
  margin:0 auto;
  padding:0 20px;
}

.lp-accent{ color:var(--lp-orange-2); }

/* ---------------- Кнопки ---------------- */
.lp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  border:0;
  cursor:pointer;
  font-family:inherit;
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  padding:.95rem 2.1rem;
  border-radius:999px;
  transition:transform .18s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.lp-btn--primary{
  color:#fff;
  background:linear-gradient(135deg, var(--lp-orange) 0%, var(--lp-orange-2) 100%);
  box-shadow:0 10px 30px rgba(255,90,31,.35);
}
.lp-btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 42px rgba(255,90,31,.5);
  color:#fff;
}
.lp-btn--ghost{
  color:var(--lp-text);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.16);
}
.lp-btn--ghost:hover{
  transform:translateY(-2px);
  border-color:var(--lp-line-strong);
  color:var(--lp-orange-2);
  background:rgba(255,90,31,.08);
}

/* ---------------- Герой ---------------- */
.lp-hero{
  position:relative;
  isolation:isolate;
  padding:110px 0 130px;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(720px 420px at 50% 30%, rgba(255,90,31,.16), transparent 70%),
    var(--lp-bg);
}
/* Фон-картинка в отдельном слое, чтобы её можно было приглушить
   независимо от остального оформления. Если hero-bg.jpg нет —
   под ним остаются градиенты. */
.lp-hero::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg, rgba(10,7,8,.66) 0%, rgba(10,7,8,.78) 60%, rgba(10,7,8,.94) 100%),
    url('/public/img/hero-bg.jpg') center 40% / cover no-repeat;
  filter:saturate(.98) brightness(.98) contrast(.92);
  opacity:.88;
}
.lp-hero::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:180px;
  background:linear-gradient(180deg, transparent, var(--lp-bg));
  z-index:-1;
}
.lp-hero__title{
  font-size:clamp(2rem, 5.2vw, 3.5rem);
  line-height:1.14;
  font-weight:800;
  letter-spacing:-.01em;
  margin:0 0 1.1rem;
  text-shadow:0 6px 30px rgba(0,0,0,.6);
}
.lp-hero__title .lp-accent{
  background:linear-gradient(120deg, var(--lp-orange) 10%, var(--lp-orange-2) 90%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:inline-block;
}
.lp-hero__lead{
  max-width:640px;
  margin:0 auto 2.3rem;
  color:#cfc4bf;
  font-size:clamp(.98rem, 1.5vw, 1.1rem);
}
.lp-hero__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.9rem;
  margin-bottom:1.4rem;
}
.lp-hero__note{
  color:var(--lp-muted);
  font-size:.9rem;
  margin:0;
}
.lp-hero__note a{
  color:var(--lp-orange-2);
  font-weight:600;
  border-bottom:1px dashed rgba(255,138,61,.5);
}
.lp-hero__note a:hover{ color:#fff; border-bottom-color:#fff; }

/* ---------------- Заголовки секций ---------------- */
.lp-section{ padding:92px 0; }
.lp-section--tight{ padding-top:0; }

.lp-heading{
  text-align:center;
  font-size:clamp(1.65rem, 3.4vw, 2.35rem);
  font-weight:800;
  letter-spacing:-.01em;
  margin:0 0 .9rem;
}
.lp-sub{
  text-align:center;
  color:var(--lp-muted);
  max-width:660px;
  margin:0 auto 3rem;
}

/* ---------------- Карточки функций ---------------- */
.lp-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1.6rem;
}
.lp-card{
  position:relative;
  border-radius:var(--lp-radius);
  background:var(--lp-card);
  border:1px solid var(--lp-line);
  overflow:hidden;
  cursor:pointer;
  box-shadow:var(--lp-shadow);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.lp-card:hover{
  transform:translateY(-6px);
  background:var(--lp-card-hover);
  border-color:var(--lp-line-strong);
  box-shadow:0 0 0 1px rgba(255,90,31,.25), 0 24px 55px rgba(255,90,31,.18);
}
.lp-card__media{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#0d0908;
}
.lp-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}
.lp-card:hover .lp-card__media img{ transform:scale(1.05); }
.lp-card__media::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,7,8,.15) 0%, rgba(10,7,8,.55) 70%, rgba(22,16,16,.95) 100%);
}
.lp-card__play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  opacity:.85;
  transition:opacity .25s ease, transform .25s ease;
}
.lp-card__play i{
  display:flex;
  align-items:center;
  justify-content:center;
  width:60px;
  height:60px;
  border-radius:50%;
  font-size:1.5rem;
  color:#fff;
  background:rgba(255,90,31,.85);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 8px 26px rgba(255,90,31,.45);
}
.lp-card:hover .lp-card__play{ opacity:1; transform:scale(1.06); }

.lp-card__body{
  position:relative;
  z-index:3;
  margin:-58px 16px 16px;
  padding:16px 18px 18px;
  border-radius:14px;
  background:rgba(18,13,11,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.07);
}
.lp-card__title{
  font-size:1.05rem;
  font-weight:700;
  margin:0 0 .4rem;
}
.lp-card__text{
  color:var(--lp-muted);
  font-size:.88rem;
  line-height:1.55;
  margin:0;
}

/* ---------------- Сообщество ---------------- */
.lp-community{
  position:relative;
  border-radius:26px;
  padding:56px 32px;
  text-align:center;
  background:
    radial-gradient(600px 260px at 50% 0%, rgba(255,90,31,.16), transparent 70%),
    linear-gradient(180deg, #151010, #0e0a09);
  border:1px solid var(--lp-line);
  box-shadow:var(--lp-shadow);
  overflow:hidden;
}
.lp-community__title{
  font-size:clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight:800;
  margin:0 0 .7rem;
}
.lp-community__text{
  color:var(--lp-muted);
  max-width:560px;
  margin:0 auto 2rem;
}
.lp-community__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.9rem;
}
.lp-btn--social{
  color:#fff;
  background:rgba(255,255,255,.04);
  border:1px solid var(--lp-line-strong);
}
.lp-btn--social:hover{
  transform:translateY(-2px);
  color:#fff;
  background:linear-gradient(135deg, var(--lp-orange), var(--lp-orange-2));
  border-color:transparent;
  box-shadow:0 12px 32px rgba(255,90,31,.35);
}
.lp-btn--social i{ font-size:1.1rem; }

/* ---------------- Футер ---------------- */
.lp-footer{
  margin-top:70px;
  border-top:1px solid var(--lp-line);
  background:#070505;
  padding:28px 0;
  text-align:center;
}
.lp-footer p{
  margin:0;
  color:#7d716c;
  font-size:.85rem;
}

/* ---------------- Модальное окно видео ---------------- */
.lp-modal{
  position:fixed;
  inset:0;
  z-index:1050;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(5,3,3,.86);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.lp-modal.is-open{ display:flex; }
.lp-modal__dialog{
  width:min(960px, 100%);
  background:#100b0a;
  border:1px solid var(--lp-line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.lp-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.lp-modal__title{
  margin:0;
  font-size:1rem;
  font-weight:700;
}
.lp-modal__close{
  background:none;
  border:0;
  color:var(--lp-muted);
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
}
.lp-modal__close:hover{ color:#fff; }
.lp-modal__ratio{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
}
.lp-modal__ratio iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* ---------------- Появление при скролле ----------------
   Начальное скрытие вешает скрипт (reveal-pending), а не CSS:
   если JS не выполнится, контент просто останется видимым. */
.reveal.reveal-pending{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.reveal-pending.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal.reveal-pending{ opacity:1; transform:none; transition:none; }
}

/* ---------------- Адаптив ---------------- */
@media (max-width: 900px){
  .lp-hero{ padding:80px 0 100px; }
}
@media (max-width: 760px){
  .lp-grid{ grid-template-columns:minmax(0,1fr); gap:1.2rem; }
  .lp-section{ padding:64px 0; }
  .lp-community{ padding:40px 20px; }
}