/* ==========================================================================
   LaserLand — главная страница
   Секции из дизайна Claude Design («LaserLand Home.dc.html»):
   первый экран, вселенные, праздники.
   Остальные блоки страницы берут стили из style.css (сборка «Лазертаг»)
   и из модулей сайта (llqs / llpe / llmap).
   ========================================================================== */

/* Фирменные цвета из colors_and_type.css — style.css переопределяет часть из них
   под палитру страницы «Лазертаг», поэтому держим свои под скоупом главной. */
.ll-home{
  --hh-wave:clamp(84px,11vw,190px);   /* высота волнообразного стыка 1-го и 2-го блоков */
  --llh-cyan:#00AAD4; --llh-violet:#C374BC; --llh-green:#9DC443;
  --llh-yellow:#FFBE2B; --llh-orange:#FF7800; --llh-pink:#EE3164;
  --ll-pattern-underlay:rgb(27,39,71);
}
.ll-home .hh-mark--cyan  {background:var(--llh-cyan);}
.ll-home .hh-mark--violet{background:var(--llh-violet);}
.ll-home .hh-mark--green {background:var(--llh-green);}
.ll-home .hh-mark--yellow{background:var(--llh-yellow);}
.ll-home .hh-mark--orange{background:var(--llh-orange);}
.ll-home .hh-mark--pink  {background:var(--llh-pink);}

/* ленты постеров в блоке «Праздники» */
@keyframes hhRibUp    { from{transform:translate3d(0,0,0);}    to{transform:translate3d(0,-50%,0);} }
@keyframes hhRibDown  { from{transform:translate3d(0,-50%,0);} to{transform:translate3d(0,0,0);} }
@keyframes hhRibLeft  { from{transform:translate3d(0,0,0);}    to{transform:translate3d(-50%,0,0);} }
@keyframes hhRibRight { from{transform:translate3d(-50%,0,0);} to{transform:translate3d(0,0,0);} }

/* ==========================================================================
   1. ПЕРВЫЙ ЭКРАН
   ========================================================================== */
/* Первый экран v2: видео на фоне, синий с фиолетовым фильтр, текст по центру.
   Референс — meowwolf.com: полноэкранное видео, всё содержимое посередине. */
.ll-home .hh--video{
  position:relative; z-index:2; overflow:hidden; background:#0A1730; color:#fff;
  /* Нижний край режем волной, а не рисуем поверх фигурой: под вырезом лежит
     второй блок со своим анимированным фоном — иначе в зоне волны получалась
     плоская тёмная полоса, не совпадающая с фоном второго блока. */
  --wave-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1440 V84 C1240,140 1010,90 720,58 C430,26 210,132 0,74 Z' fill='%23fff'/%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(#000,#000), var(--wave-mask);
          mask-image:linear-gradient(#000,#000), var(--wave-mask);
  -webkit-mask-size:100% calc(100% - var(--hh-wave) + 1px), 100% var(--hh-wave);
          mask-size:100% calc(100% - var(--hh-wave) + 1px), 100% var(--hh-wave);
  -webkit-mask-position:left top, left bottom;
          mask-position:left top, left bottom;
  -webkit-mask-repeat:no-repeat, no-repeat;
          mask-repeat:no-repeat, no-repeat;
}
.ll-home .hh-still,
.ll-home .hh-video{
  position:absolute; inset:0; z-index:0; display:block;
  width:100%; height:100%; object-fit:cover;
}
/* видео лежит в разметке следом, поэтому закрывает картинку, как только пойдёт */
.ll-home .hh-video{background:transparent;}
.ll-home .hh-tint{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(78% 62% at 50% 34%, rgba(105,47,230,.46) 0%, rgba(105,47,230,0) 72%),
    radial-gradient(60% 55% at 88% 82%, rgba(0,120,212,.34) 0%, rgba(0,120,212,0) 70%),
    linear-gradient(180deg, rgba(8,20,44,.66) 0%, rgba(24,20,74,.62) 48%, rgba(10,23,48,.86) 100%);
}
/* Лёгкое притемнение у нижней кромки — но не до сплошного цвета: иначе между
   видео и волной появляется плоская синяя полоса. Границу рисует сама волна. */
.ll-home .hh--video::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:26%;
  z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,23,48,0) 0%, rgba(10,23,48,.34) 100%);
}
.ll-home .hh--video .hh-in{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:0; max-width:1100px; margin:0 auto;
  min-height:min(88vh,880px); padding:140px 24px clamp(150px,15vw,220px);
}
.ll-home .hh--video .hh-copy{
  align-items:center; text-align:center; max-width:900px; gap:26px;
}
.ll-home .hh--video .hh-lead{max-width:720px;}
.ll-home .hh--video .hh-actions{justify-content:center;}


@media (max-width:1199px){
  .ll-home{--hh-wave:56px;}
  .ll-home .hh--video .hh-in{
    min-height:min(70vh,560px); padding:88px 20px 44px;
  }
  .ll-home .hh--video .hh-copy{gap:20px;}
}
@media (prefers-reduced-motion: reduce){
  .ll-home .hh-video{display:none;}
  .ll-home .hh--video{
    background:#0A1730 url("/wp-content/uploads/laserland-home-v2/assets/img/home/dir-lasertag.webp") center/cover no-repeat;
  }
}

/* ==========================================================================
   1.4 КАРТОЧКИ НАПРАВЛЕНИЙ
   Визуал карточек не менялся с первой версии; раскладку задаёт блок,
   в котором они лежат (сейчас — 3D-стопка «Вселенных»).
   ========================================================================== */
.ll-home .hh-copy{
  position:relative; z-index:2; display:flex; flex-direction:column; gap:30px;
  max-width:660px; min-width:0;
}
.ll-home .hh-title{
  font-family:var(--font-display); color:#fff;
  font-size:clamp(42px,4.2vw,62px); line-height:1.03; font-weight:900;
  text-transform:uppercase; letter-spacing:-.015em; text-wrap:balance;
}
.ll-home .hh-title em{font-style:normal;color:var(--ll-cyan);}
.ll-home .hh-lead{
  margin:0; font-size:20px; line-height:1.55; font-weight:400;
  color:rgba(255,255,255,.74); max-width:580px; text-wrap:pretty;
}
.ll-home .hh-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:4px;}

/* кнопки первого экрана */
.ll-home .hh-btn{
  border:none; cursor:pointer; font-family:inherit;
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:19px 32px; border-radius:6px; font-size:16px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; white-space:nowrap;
  transition:background 160ms ease, transform 120ms ease;
}
.ll-home .hh-btn--primary{background:var(--ll-orange);color:#fff;}
.ll-home .hh-btn--primary:hover{background:var(--ll-orange-80);color:#fff;}
.ll-home .hh-btn--ghost{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff;
  animation:llPulse 2.8s ease-in-out infinite;
}
.ll-home .hh-btn--ghost:hover{background:rgba(255,255,255,.16);color:#fff;}
.ll-home .hh-btn:active{transform:scale(.97);}

/* стопка карточек направлений */

.ll-home .hh-card{position:absolute;top:0;left:0;width:430px;}
.ll-home .hh-card-in{
  position:relative; width:100%; aspect-ratio:3/4; border-radius:22px; overflow:hidden;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 60px rgba(3,8,22,.5);
}
.ll-home .hh-card.is-front .hh-card-in{
  box-shadow:0 34px 80px rgba(3,8,22,.62), 0 0 0 1px rgba(255,255,255,.06);
}
.ll-home .hh-card-in>img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.ll-home .hh-shade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,20,44,.72) 0%, rgba(8,20,44,0) 34%,
             rgba(8,20,44,0) 52%, rgba(8,20,44,.86) 100%);
}
.ll-home .hh-veil{
  position:absolute; inset:0; pointer-events:none;
  background:transparent; transition:background 400ms ease;
}
.ll-home .hh-top{
  position:absolute; top:18px; left:18px; right:18px;
  display:flex; align-items:center; gap:10px; pointer-events:none;
}
.ll-home .hh-mark{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:900; color:#08142C;
}
.ll-home .hh-name{display:flex;flex-direction:column;line-height:1.2;}
.ll-home .hh-name b{font-size:16px;font-weight:700;color:#fff;}
.ll-home .hh-name i{
  font-style:normal; font-size:11px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.6);
}
.ll-home .hh-foot{
  position:absolute; left:18px; right:18px; bottom:18px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  opacity:0; pointer-events:none; transition:opacity 320ms ease;
}
.ll-home .hh-card.is-front .hh-foot{opacity:1;pointer-events:auto;}
.ll-home .hh-foot>span{
  font-size:14px; font-weight:400; line-height:1.35;
  color:rgba(255,255,255,.72); max-width:56%; text-wrap:pretty;
}
.ll-home .hh-more{
  flex:none; border:none; cursor:pointer; font-family:inherit;
  padding:13px 20px; border-radius:6px; background:#fff; color:#08142C;
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  transition:background 160ms ease;
}
.ll-home .hh-more:hover{background:#C4F5FF;color:#08142C;}
.ll-home .hh-more:active{transform:scale(.97);}

.ll-home .hh-arrows{display:flex;align-items:center;gap:30px;}
.ll-home .hh-arrow{
  border:none; background:none; padding:4px 0; cursor:pointer;
  color:rgba(255,255,255,.9); display:flex; align-items:center;
  transition:color 160ms ease, transform 160ms ease;
}
.ll-home .hh-arrow:hover{color:var(--ll-cyan);}
.ll-home .hh-arrow svg{width:46px;height:20px;display:block;}
.ll-home .hh-arrow--prev:active{transform:translateX(-3px);}
.ll-home .hh-arrow--next:active{transform:translateX(3px);}

/* --- первый экран: мобильная раскладка --- */
@media (max-width:1199px){
  .ll-home .hh-copy{gap:22px;max-width:none;text-align:center;align-items:center;}
  .ll-home .hh-title{font-size:32px;line-height:1.07;letter-spacing:-.01em;}
  .ll-home .hh-lead{font-size:17px;line-height:1.5;}
  .ll-home .hh-actions{flex-direction:column;gap:12px;width:100%;margin-top:0;}
  .ll-home .hh-btn{width:100%;padding:18px 24px;}
  .ll-home .hh-btn--ghost{animation:none;}
  .ll-home .hh-card-in{border-radius:18px;}
  .ll-home .hh-top{top:14px;left:14px;right:14px;}
  .ll-home .hh-mark{width:32px;height:32px;font-size:13px;}
  .ll-home .hh-name b{font-size:15px;}
  .ll-home .hh-name i{font-size:10px;}
  .ll-home .hh-foot{left:14px;right:14px;bottom:14px;gap:10px;}
  .ll-home .hh-foot>span{font-size:13px;max-width:54%;}
  .ll-home .hh-more{padding:11px 16px;font-size:12px;}
  .ll-home .hh-arrows{gap:26px;padding-left:20px;}
  .ll-home .hh-arrow svg{width:42px;height:18px;}
}

/* ==========================================================================
   1.5 ВСЕЛЕННЫЕ — заголовок по центру, под ним 3D-стопка карточек
   Механика и раскладка — из блока «Игровые режимы» сборки «Лазертаг»
   (perspective 1600px, соседние карточки развёрнуты и уменьшены, номера снизу).
   Визуал самих карточек прежний.
   ========================================================================== */
.ll-home .hu2{
  position:relative; overflow:hidden; background:#0A1730; color:#fff;
  margin-top:calc(var(--hh-wave) * -1); padding-top:var(--hh-wave);
}
.ll-home .hu2::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 50% at 14% 4%, rgba(105,47,230,.22) 0%, rgba(105,47,230,0) 62%);
}
.ll-home .hu2-in{
  position:relative; z-index:1; max-width:1400px; margin:0 auto;
  padding:clamp(40px,4.5vw,72px) clamp(20px,4.4vw,64px) clamp(64px,7vw,104px);
}
.ll-home .hu2-head{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center; max-width:820px; margin:0 auto clamp(34px,4vw,52px);
}
.ll-home .hu2-head .eyebrow{color:var(--llh-cyan);margin:0 0 -4px;}
.ll-home .hu2-title{
  margin:0; font-family:var(--font-display); color:#fff !important;
  font-size:clamp(30px,3.4vw,50px); line-height:1.06; font-weight:900;
  text-transform:uppercase; letter-spacing:-.015em; text-wrap:balance;
}
.ll-home .hu2-lead{
  margin:0; font-size:clamp(16px,1.3vw,19px); line-height:1.55;
  color:rgba(255,255,255,.72); text-wrap:pretty;
}

/* сцена: карточки лежат друг на друге, активная по центру */
/* Высоту сцены задаём стилями, а не скриптом: раньше её выставлял home.js
   после разбора страницы, блок вырастал с нуля и утаскивал вниз всё, что под
   ним — это давало CLS 0,18. Формула та же, что была в скрипте:
   ширина карточки 30 % сцены (не больше 340 px), высота = ширина * 4/3 + 64. */
.ll-home .hu2-in{container-type:inline-size;}
.ll-home .hu2-stage{
  position:relative; perspective:1600px; touch-action:pan-y;
  height:517px;                                   /* запас для браузеров без cqw */
  height:calc(min(340px, 30cqw) * 4 / 3 + 64px);
}
.ll-home .hu2-stage .hh-card{
  position:absolute; top:0; left:50%; cursor:pointer;
  transition:transform 620ms cubic-bezier(.2,.7,.2,1), opacity 480ms ease;
}

/* вкладки с названиями вселенных под стопкой */
.ll-home .hu2-tabs{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:10px; margin-top:clamp(26px,3vw,40px);
}
.ll-home .hu2-tab{
  cursor:pointer; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.05);
  padding:11px 20px; border-radius:999px; font-family:inherit; white-space:nowrap;
  color:rgba(255,255,255,.62); font-size:14px; font-weight:700;
  text-transform:uppercase; letter-spacing:.04em;
  transition:color 200ms ease, background 200ms ease, border-color 200ms ease;
}
.ll-home .hu2-tab:hover{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);}
.ll-home .hu2-tab.is-active{
  background:var(--llh-cyan); border-color:var(--llh-cyan); color:#08142C;
}

@media (max-width:759px){
  .ll-home .hu2-stage{height:341px;height:calc(min(240px, 62cqw) * 4 / 3 + 64px);}
  .ll-home .hu2-in{padding:36px 20px 56px;}
  .ll-home .hu2-head{margin-bottom:26px;}
  .ll-home .hu2-title{font-size:30px;line-height:1.08;}
  /* вкладок шесть — в строку они не влезают, поэтому горизонтальная лента */
  .ll-home .hu2-tabs{
    margin-top:22px; gap:8px; flex-wrap:nowrap; justify-content:flex-start;
    overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
    padding:0 20px; margin-left:-20px; margin-right:-20px;
    scroll-snap-type:x proximity;
    mask-image:linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
  }
  .ll-home .hu2-tabs::-webkit-scrollbar{display:none;}
  .ll-home .hu2-tab{flex:none;padding:10px 16px;font-size:13px;scroll-snap-align:center;}
  /* карточка на мобильной узкая — подпись и кнопка не помещаются в строку */
  .ll-home .hu2-stage .hh-foot{
    flex-direction:column; align-items:stretch; gap:8px; left:14px; right:14px; bottom:14px;
  }
  .ll-home .hu2-stage .hh-foot>span{max-width:none;font-size:12px;}
  .ll-home .hu2-stage .hh-more{padding:11px 14px;font-size:11px;text-align:center;}
}
@media (prefers-reduced-motion: reduce){
  .ll-home .hu2-stage .hh-card{transition:none;}
}


/* Анимированный фон второго блока — перенесён с первого экрана первой версии
   (гео-страницы, блок «Анимированный фон hero»). */
.ll-home .hu2 .hero__aurora{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.ll-home .hu2 .hero__aurora span{position:absolute;display:block;border-radius:50%;}
.ll-home .hu2 .hero__aurora-a,
.ll-home .hu2 .hero__aurora-b,
.ll-home .hu2 .hero__aurora-c{
  filter:blur(60px); mix-blend-mode:screen; will-change:transform, opacity;
}
.ll-home .hu2 .hero__aurora-a{
  width:70vw; height:70vw; max-width:900px; max-height:900px;
  top:-28%; left:50%; margin-left:-35vw;
  background:radial-gradient(circle, rgba(124,58,237,.95) 0%, rgba(107,60,214,0) 66%);
  animation:ll-aurora-a 24s ease-in-out infinite;
}
.ll-home .hu2 .hero__aurora-b{
  width:55vw; height:55vw; max-width:720px; max-height:720px;
  top:6%; left:-12%;
  background:radial-gradient(circle, rgba(0,170,212,.70) 0%, rgba(0,170,212,0) 68%);
  animation:ll-aurora-b 30s ease-in-out infinite;
}
.ll-home .hu2 .hero__aurora-c{
  width:48vw; height:48vw; max-width:620px; max-height:620px;
  bottom:-18%; right:-8%;
  background:radial-gradient(circle, rgba(238,49,100,.55) 0%, rgba(238,49,100,0) 68%);
  animation:ll-aurora-c 27s ease-in-out infinite;
}
.ll-home .hu2 .hero__rays{
  position:absolute; inset:-30%; border-radius:0;
  background:repeating-linear-gradient(
    108deg,
    rgba(255,255,255,0) 0px,
    rgba(255,255,255,0) 90px,
    rgba(160,190,255,.07) 92px,
    rgba(160,190,255,.07) 96px,
    rgba(255,255,255,0) 100px,
    rgba(255,255,255,0) 240px
  );
  mask-image:radial-gradient(70% 60% at 55% 25%, #000 0%, transparent 72%);
  -webkit-mask-image:radial-gradient(70% 60% at 55% 25%, #000 0%, transparent 72%);
  animation:ll-rays 34s linear infinite;
  will-change:transform;
}

@keyframes ll-aurora-a{
  0%,100%{transform:translate3d(0,0,0) scale(1);       opacity:.85;}
  50%    {transform:translate3d(6%,8%,0) scale(1.14);  opacity:1;}
}
@keyframes ll-aurora-b{
  0%,100%{transform:translate3d(0,0,0) scale(1.05);    opacity:.7;}
  50%    {transform:translate3d(12%,-6%,0) scale(.92); opacity:.95;}
}
@keyframes ll-aurora-c{
  0%,100%{transform:translate3d(0,0,0) scale(1);        opacity:.6;}
  50%    {transform:translate3d(-10%,-8%,0) scale(1.18);opacity:.85;}
}
@keyframes ll-rays{
  from{transform:translate3d(-6%,0,0);}
  to  {transform:translate3d(6%,0,0);}
}
@media (prefers-reduced-motion: reduce){
  .ll-home .hu2 .hero__aurora span{animation:none !important;}
}
   НАДЗАГОЛОВКИ БЛОКОВ
   Единый вид по образцу модуля карты центров: «/// КОНТАКТЫ»
   (llmap-public.css → .llmap-eyebrow::before{content:'/// '}).
   Цвет у каждого блока остаётся свой — менялись только символы.
   ========================================================================== */
.ll-home .eyebrow{font-weight:800;}
.ll-home .eyebrow::before,
.ll-home .llpe-eyebrow::before{content:"/// ";}

/* В акции надзаголовок был с оранжевой чертой вместо символов — меняем на «///». */
.ll-home .eyebrow-dash{display:block;}
.ll-home .eyebrow-dash::before{
  content:"/// "; width:auto; height:auto; margin:0; background:none;
}

/* Надзаголовки секций из дизайна */
.ll-home .hu-head .eyebrow,
.ll-home .hp-head .eyebrow{color:var(--llh-cyan);margin:0 0 -4px;}

/* ==========================================================================
   2. ВСЕЛЕННЫЕ
   ========================================================================== */
.ll-home .hu{
  position:relative; background:#0A1730;
  padding:clamp(64px,7vw,116px) clamp(20px,4.4vw,64px) clamp(72px,8vw,128px);
}
.ll-home .hu-dots{
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:26px 26px; opacity:.45;
}
.ll-home .hu-in{
  position:relative; max-width:1600px; margin:0 auto;
  display:flex; flex-direction:column; gap:clamp(34px,4vw,56px);
}
.ll-home .hu-head{display:flex;flex-direction:column;gap:18px;max-width:900px;}
.ll-home .hu-head h2{
  margin:0; font-family:var(--font-display); color:#fff;
  font-size:clamp(30px,3.4vw,50px); line-height:1.06; font-weight:900;
  text-transform:uppercase; letter-spacing:-.015em; text-wrap:balance;
}
.ll-home .hu-head p{
  margin:0; font-size:clamp(16px,1.3vw,19px); line-height:1.55;
  color:rgba(255,255,255,.72); max-width:660px; text-wrap:pretty;
}
.ll-home .hu-grid{
  display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(14px,1.4vw,22px);
}
.ll-home .hu-card{
  position:relative; display:block; border-radius:20px; overflow:hidden;
  text-decoration:none; color:#fff;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  transition:transform 240ms cubic-bezier(.22,.61,.36,1), border-color 240ms ease, box-shadow 240ms ease;
}
.ll-home .hu-card:hover{
  color:#fff; transform:translateY(-6px);
  border-color:rgba(255,255,255,.28); box-shadow:0 26px 60px rgba(3,8,22,.55);
}
.ll-home .hu-card>img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
/* Плитка шире кадра — cover срезает по вертикали от центра. На фото боулинга
   головы у самого верха, поэтому кадр прижимаем к верхней кромке. */
.ll-home .hu-card--keep-top>img{object-position:50% 0;}
.ll-home .hu-shade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,20,44,.30) 0%, rgba(8,20,44,.05) 38%,
             rgba(8,20,44,.78) 78%, rgba(6,14,34,.94) 100%);
}
.ll-home .hu-foot{
  position:absolute; left:22px; right:22px; bottom:20px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
}
.ll-home .hu-text{display:flex;flex-direction:column;gap:7px;min-width:0;}
.ll-home .hu-text b{
  font-size:clamp(20px,1.6vw,26px); line-height:1.06; font-weight:900;
  text-transform:uppercase; letter-spacing:-.01em;
}
.ll-home .hu-text span{
  font-size:15px; line-height:1.4; font-weight:400;
  color:rgba(255,255,255,.76); text-wrap:pretty;
}
.ll-home .hu-go{
  flex:none; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24);
  display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:700;
}
/* раскладка плиток — десктоп */
@media (min-width:1200px){
  .ll-home .hu-card{grid-column:span 4;min-height:300px;}
  .ll-home .hu-card--big{grid-column:span 6;min-height:420px;}
  .ll-home .hu-card--big .hu-text b{font-size:clamp(26px,2.4vw,36px);}
  .ll-home .hu-card--tall{grid-column:span 3;min-height:420px;}
}
/* раскладка плиток — мобильная */
@media (max-width:1199px){
  .ll-home .hu-card{grid-column:span 6;min-height:236px;}
  .ll-home .hu-card--big{grid-column:span 12;min-height:300px;}
  .ll-home .hu-card--wide{grid-column:span 12;min-height:300px;order:10;}
  .ll-home .hu-foot{left:16px;right:16px;bottom:16px;}
  .ll-home .hu-text span{font-size:13px;}
  .ll-home .hu-go{width:40px;height:40px;font-size:17px;}
}
/* В две колонки подпись успевает разъехаться на четыре строки и налезть на
   стрелку — подрезаем её и уменьшаем кружок. */
@media (max-width:560px){
  .ll-home .hu-card:not(.hu-card--big):not(.hu-card--wide) .hu-text span{
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .ll-home .hu-foot{gap:10px;}
  .ll-home .hu-go{width:34px;height:34px;font-size:15px;}
}

/* ==========================================================================
   3. ПРАЗДНИКИ
   ========================================================================== */
.ll-home .hp{
  position:relative; background:#FFFFFF;
  padding:clamp(56px,6vw,96px) clamp(20px,4.4vw,64px) clamp(72px,8vw,120px);
}
.ll-home .hp-in{
  position:relative; max-width:1600px; margin:0 auto;
  display:flex; flex-direction:column; gap:clamp(14px,1.4vw,22px);
}
.ll-home .hp-big{
  position:relative; border-radius:22px; overflow:hidden;
  background:#0C1B3C;   /* однородный фон, как в шаблоне Open9 (.action__body) */
  border:1px solid rgba(8,20,44,.10);
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(24px,2.4vw,40px);
}
.ll-home .hp-mesh{
  position:absolute; inset:0; z-index:0; display:block;
  width:100%; height:100%; pointer-events:none;
}
.ll-home .hp-copy{
  position:relative; z-index:10;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:18px; padding:clamp(28px,3vw,48px);
}
/* Заголовок секции. style.css красит все h2 в белый с !important — секция
   светлая, поэтому возвращаем тёмный. */
.ll-home .hp-head{
  display:flex; flex-direction:column; gap:16px; max-width:900px;
  margin:0 0 clamp(16px,1.8vw,28px);
}
.ll-home .hp-head h2{
  margin:0; font-family:var(--font-display); color:#00244A !important;
  font-size:clamp(30px,3.4vw,50px); line-height:1.06; font-weight:900;
  text-transform:uppercase; letter-spacing:-.015em; text-wrap:balance;
}
.ll-home .hp-head p{
  margin:0; font-size:clamp(16px,1.3vw,19px); line-height:1.55;
  color:rgba(8,20,44,.70); max-width:760px; text-wrap:pretty;
}

/* Заголовок большой карточки — не h2: на блок приходится один h2, и он у секции. */
.ll-home .hp-title{
  font-family:var(--font-display); color:#fff;
  font-size:clamp(26px,2.6vw,40px); line-height:1.06; font-weight:900;
  text-transform:uppercase; letter-spacing:-.015em; text-wrap:balance;
}
.ll-home .hp-copy p{
  margin:0; font-size:clamp(15px,1.15vw,18px); line-height:1.55;
  color:rgba(255,255,255,.76); max-width:560px; text-wrap:pretty;
}
.ll-home .hp-price{
  color:#fff; font-size:clamp(24px,2.1vw,32px); font-weight:900; letter-spacing:-.01em;
}
.ll-home .hp-cta{
  border:none; cursor:pointer; font-family:inherit;
  display:inline-flex; align-items:center; gap:10px;
  padding:18px 30px; border-radius:6px; background:var(--ll-orange); color:#fff;
  font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  transition:background 160ms ease;
}
.ll-home .hp-cta:hover{background:var(--ll-orange-80);color:#fff;}
.ll-home .hp-cta:active{transform:scale(.97);}

/* Косые ленты — десктоп. Приём из шаблона Open9 (.action__body + .bg-home7):
   лента не обрезается своей колонкой и не прикрыта градиентом, а просто выходит
   за край карточки и обрезается её overflow:hidden. Фон при этом однороден. */
.ll-home .hp-ribbons{position:relative;box-sizing:border-box;min-height:400px;}
.ll-home .hp-ribbons-in{
  position:absolute; top:-34%; bottom:-34%; left:50%; z-index:1;
  /* Ширина колонок резиновая: на 1200-1300 px три колонки фиксированной ширины
     после поворота подходят вплотную к тексту. */
  display:grid; grid-template-columns:repeat(3,clamp(110px,10.4vw,150px));
  grid-template-rows:1fr; gap:clamp(12px,1.2vw,16px);
  transform:translateX(-50%) rotate(-14deg); transform-origin:center;
}
.ll-home .hp-rib{height:100%;overflow:hidden;}
.ll-home .hp-rib-run{display:flex;flex-direction:column;gap:18px;}
.ll-home .hp-rib--a .hp-rib-run{animation:hhRibUp 34s linear infinite;}
.ll-home .hp-rib--b .hp-rib-run{animation:hhRibDown 40s linear infinite;}
.ll-home .hp-rib--c .hp-rib-run{animation:hhRibUp 46s linear infinite;}
.ll-home .hp-rib-run:hover{animation-play-state:paused;}
.ll-home .hp-poster{
  flex:none; width:100%; border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
}
.ll-home .hp-rib--a .hp-poster{aspect-ratio:9/16;}  /* постеры программ — родная пропорция, без обрезки */
.ll-home .hp-rib--b .hp-poster,
.ll-home .hp-rib--c .hp-poster{aspect-ratio:3/4;}   /* фотографии праздников */
.ll-home .hp-poster img{width:100%;height:100%;object-fit:cover;display:block;}
/* косые ленты — мобильная версия (горизонтальные) */
.ll-home .hp-ribbons-mob{
  position:relative; overflow:hidden; display:none; flex-direction:column; gap:14px;
  padding:0 0 clamp(28px,5vw,36px);
}
.ll-home .hp-ribbons-mob .hp-rib{height:auto;}
.ll-home .hp-ribbons-mob .hp-rib-run{flex-direction:row;gap:14px;width:max-content;}
.ll-home .hp-ribbons-mob .hp-rib--a .hp-rib-run{animation:hhRibLeft 30s linear infinite;}
.ll-home .hp-ribbons-mob .hp-rib--b .hp-rib-run{animation:hhRibRight 36s linear infinite;}
.ll-home .hp-ribbons-mob .hp-rib--a .hp-poster{width:113px;height:200px;aspect-ratio:auto;}
.ll-home .hp-ribbons-mob .hp-rib--b .hp-poster{width:150px;height:200px;aspect-ratio:auto;}
/* карточки форматов */
.ll-home .hp-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.4vw,22px);
}
.ll-home .hp-card{
  display:flex; flex-direction:column; border-radius:20px; overflow:hidden;
  background:#F4F7FB; border:1px solid rgba(8,20,44,.10);
}
.ll-home .hp-card-pic{position:relative;width:100%;aspect-ratio:16/11;overflow:hidden;}
.ll-home .hp-card-pic img{width:100%;height:100%;object-fit:cover;display:block;}
.ll-home .hp-card-pic i{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,20,44,.10) 40%, rgba(8,20,44,.86) 100%);
}
.ll-home .hp-card-pic b{
  position:absolute; left:20px; right:20px; bottom:16px; color:#fff;
  font-size:clamp(17px,1.4vw,21px); line-height:1.1; font-weight:900;
  text-transform:uppercase; letter-spacing:-.01em;
}
.ll-home .hp-card-body{
  flex:1 1 auto; display:flex; flex-direction:column; gap:18px; padding:20px 20px 22px;
}
.ll-home .hp-card-body p{
  margin:0; flex:1 1 auto; font-size:15px; line-height:1.5;
  color:rgba(8,20,44,.70); text-wrap:pretty;
}
.ll-home .hp-card-price{color:#08142C;font-size:19px;font-weight:900;letter-spacing:-.01em;}
.ll-home .hp-card-actions{display:flex;gap:10px;flex-wrap:wrap;}
.ll-home .hp-btn{
  cursor:pointer; font-family:inherit; padding:14px 20px; border-radius:6px;
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  transition:background 160ms ease; text-decoration:none; display:inline-flex;
  align-items:center; justify-content:center; line-height:1;
}
.ll-home .hp-btn--ghost{
  background:transparent; border:1px solid rgba(8,20,44,.24); color:#08142C;
}
.ll-home .hp-btn--ghost:hover{background:rgba(8,20,44,.06);color:#08142C;}
.ll-home .hp-btn--solid{border:none;background:var(--ll-orange);color:#fff;}
.ll-home .hp-btn--solid:hover{background:var(--ll-orange-80);color:#fff;}
.ll-home .hp-btn:active{transform:scale(.97);}

@media (max-width:1199px){
  .ll-home .hp-rib--c{display:none;}
  .ll-home .hp-big{grid-template-columns:1fr;}
  .ll-home .hp-ribbons{display:none;}
  .ll-home .hp-ribbons-mob{display:flex;}
  .ll-home .hp-grid{grid-template-columns:1fr;}
}

/* На узких экранах карточки форматов — свайп-карусель, как на остальных
   страницах LaserLand (правило: сетки карточек не превращаем в простыню). */
@media (max-width:760px){
  .ll-home .hp-grid{
    display:flex !important; grid-template-columns:none !important;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; gap:14px; padding-bottom:14px; scrollbar-width:thin;
  }
  .ll-home .hp-grid>*{flex:0 0 85% !important;scroll-snap-align:start;}
  .ll-home .hp-grid::-webkit-scrollbar{height:6px;}
  .ll-home .hp-grid::-webkit-scrollbar-thumb{background:rgba(0,170,212,.45);border-radius:3px;}
}

/* Галерея «Как это выглядит»: вертикальную прокрутку страницы оставляем
   браузеру, горизонтальный жест забирает свайп ленты (app.js). */
.ll-home .gallery-vp{touch-action:pan-y;}
.ll-home .gallery-track img{-webkit-user-drag:none;user-select:none;}

/* Заголовки блоков из сборки «Лазертаг» (акция «Раннее бронирование», галерея)
   не задавали шрифт и на сайте наследовали Roboto темы — выбивались из
   остальных заголовков страницы. Приводим к общему виду: Rubik 900. */
.ll-home .ll-offer__title,
.ll-home .ll-offer__tail,
.ll-home .gallery h2{font-family:var(--font-display);}
.ll-home .ll-offer__title{font-weight:900;line-height:1.06;letter-spacing:-.015em;}

/* style.css (сборка «Лазертаг») красит ВСЕ h1/h2 в белый с !important — страница
   там тёмная целиком. На главной модули стоят на светлом фоне, возвращаем им
   тёмный заголовок. */
.ll-home [data-llpe-theme="light"] .llpe-title,
.ll-home [data-llmap-theme="light"] .llmap-title{color:#00244A !important;}

/* Модуль «Акции и события» — единственный заголовок в обычном регистре и весом
   800. Приводим к остальным заголовкам страницы: капслок, 900.
   Вес модуль задаёт как `.llpe-section[data-llpe-theme] .llpe-title` с !important,
   поэтому нужен селектор не ниже по весу. Всё под скоупом .ll-home — на других
   страницах сайта модуль не меняется. */
.ll-home .llpe-title{text-transform:uppercase;}
.ll-home .llpe-section[data-llpe-theme] .llpe-title{font-weight:900 !important;}

/* Тема laser-land рисует оранжевую черту под каждой h2 — на наших блоках убираем. */
.ll-home h2::before{content:none !important;display:none !important;background:none !important;}

/* ==========================================================================
   4. ЦЕНТРЫ СЕТИ (над картой центров)
   H1 страницы + карточки восьми центров. Цвета типов те же, что у модуля
   карты: LaserLand — оранжевый, EXOTAG — циан.
   ========================================================================== */
.ll-home .cc{
  position:relative; overflow:hidden;
  background:
    radial-gradient(60% 50% at 12% 0%, rgba(105,47,230,.24) 0%, rgba(105,47,230,0) 60%),
    linear-gradient(180deg,#0A1730 0%,#0C1B3C 60%,#08142C 100%);
  padding:clamp(64px,7vw,110px) clamp(20px,4.4vw,64px) clamp(72px,8vw,120px);
  color:#fff;
}
.ll-home .cc-dots-layer{
  position:absolute; inset:0; pointer-events:none; opacity:.45;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:26px 26px;
}
.ll-home .cc-in{
  position:relative; max-width:1600px; margin:0 auto;
  display:flex; flex-direction:column; gap:clamp(32px,3.6vw,52px);
}
.ll-home .cc-head{display:flex;flex-direction:column;gap:16px;max-width:900px;}
.ll-home .cc-head .eyebrow{color:var(--llh-cyan);margin:0 0 -4px;}
.ll-home .cc-head h1{
  margin:0; font-family:var(--font-display); color:#fff;
  font-size:clamp(28px,3.2vw,46px); line-height:1.06; font-weight:900;
  text-transform:uppercase; letter-spacing:-.015em; text-wrap:balance;
}
.ll-home .cc-head p{
  margin:0; font-size:clamp(16px,1.3vw,19px); line-height:1.55;
  color:rgba(255,255,255,.72); max-width:760px; text-wrap:pretty;
}

/* сетка: 4 в ряд на десктопе, 2 в ряд на мобильной */
.ll-home .cc-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.4vw,22px);
}

/* Сетка: по три карточки в ряд. Именно flex, а не grid — тогда неполный
   последний ряд (у нас 8 карточек: 3 + 3 + 2) центрируется сам. */
.ll-home .cc-grid{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:clamp(14px,1.4vw,22px);
}
/* Карточка — сплошной цветной прямоугольник, фото лежит сверху и внизу
   растворяется в этом цвете маской. Так сделано в референсе (meowwolf.com):
   не подсветка поверх кадра, а плавный переход кадра в фон карточки. */
.ll-home .cc-card{
  --cc-accent:var(--llh-orange); --cc-bg:#2A1B4E;
  flex:0 0 calc((100% - 2 * clamp(14px,1.4vw,22px)) / 3);
  max-width:calc((100% - 2 * clamp(14px,1.4vw,22px)) / 3);
  position:relative;
  display:flex; flex-direction:column; overflow:hidden; text-decoration:none;
  border-radius:18px; background:var(--cc-bg); color:#fff;
  transition:transform 240ms cubic-bezier(.22,.61,.36,1), box-shadow 240ms ease;
}
.ll-home .cc-card--exotag{--cc-accent:var(--llh-cyan); --cc-bg:#0C3A50;}
.ll-home .cc-card:hover{
  color:#fff; transform:translateY(-6px);
  box-shadow:0 26px 60px rgba(3,8,22,.55);
}
/* Затенение — на всю карточку, включая цветную часть под названием.
   Название и метро лежат выше и остаются читаемыми. */
.ll-home .cc-card::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:rgba(6,14,34,.82); opacity:0; transition:opacity 240ms ease;
}

/* фото: низ кадра сходит на нет, открывая цвет карточки */
.ll-home .cc-pic{position:relative;display:block;width:100%;aspect-ratio:4/3;}
.ll-home .cc-pic>img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 420ms cubic-bezier(.22,.61,.36,1);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.55) 82%,rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.55) 82%,rgba(0,0,0,0) 100%);
}
.ll-home .cc-card:hover .cc-pic>img{transform:scale(1.04);}
.ll-home .cc-chip{
  position:absolute; top:10px; left:10px; z-index:4;
  padding:5px 10px; border-radius:999px; background:var(--cc-accent); color:#08142C;
  font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
}

/* подпись: название и метро */
.ll-home .cc-body{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:4px 16px 22px; text-align:center;
  position:relative; z-index:3;
}
.ll-home .cc-name{
  font-family:var(--font-display); color:#fff;
  font-size:clamp(15px,1.15vw,18px); line-height:1.2; font-weight:900;
  text-transform:uppercase; letter-spacing:-.01em;
}
.ll-home .cc-metro{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; line-height:1.35; color:rgba(255,255,255,.82);
}
.ll-home .cc-metro::before{
  content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--cc-accent);
}
/* кружки цвета линии метро; на пересадочной — по одному на линию.
   Цвета — build/metro-lines.json. Станции нет в справочнике — остаётся
   кружок цвета бренда (::before выше). */
.ll-home .cc-metro:has(.cc-mdots)::before{content:none;}
.ll-home .cc-mdots{display:inline-flex;gap:3px;flex:none;}
.ll-home .cc-mdots i{
  display:block; width:9px; height:9px; border-radius:50%;
  box-shadow:0 0 0 1.5px rgba(255,255,255,.85);
}

/* подробности — только при наведении курсором */
.ll-home .cc-over{
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; justify-content:center; gap:12px;
  padding:20px 18px;
  opacity:0; visibility:hidden; transition:opacity 240ms ease, visibility 240ms ease;
}
.ll-home .cc-over-addr{
  font-size:13px; line-height:1.45; color:#fff; font-weight:700;
}
.ll-home .cc-perks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px;}
.ll-home .cc-perks li{
  position:relative; padding-left:16px; font-size:12.5px; line-height:1.4;
  color:rgba(255,255,255,.82);
}
.ll-home .cc-perks li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:8px; height:2px; background:var(--cc-accent);
}
@media (hover:hover) and (pointer:fine){
  .ll-home .cc-card:hover::after{opacity:1;}
  .ll-home .cc-card:hover .cc-over{opacity:1;visibility:visible;}
}
/* на тач-экранах курсора нет — подробности не показываем вовсе */
@media (hover:none),(pointer:coarse){
  .ll-home .cc-over{display:none;}
}

@media (max-width:1199px){
  .ll-home .cc-card{
    flex-basis:calc((100% - clamp(14px,1.4vw,22px)) / 2);
    max-width:calc((100% - clamp(14px,1.4vw,22px)) / 2);
  }
  .ll-home .cc-over{display:none;}
  .ll-home .cc-body{padding:12px 12px 16px;}
  .ll-home .cc-metro{font-size:12px;}
}

/* ==========================================================================
   5. SEO-БЛОК НА СВЕТЛОМ ФОНЕ
   В сборке «Лазертаг» блок тёмный, поэтому все его цвета переопределяем.
   ========================================================================== */
.ll-home .seo.on-light{
  background:var(--surface-muted,#F4F6FA);
  color:var(--fg-on-light-1,#00244A);
}
.ll-home .seo.on-light .dots-layer{display:none;}
.ll-home .seo.on-light .eyebrow{color:var(--llh-violet);}
.ll-home .seo.on-light .seo-head h2{color:#00244A !important;}
.ll-home .seo.on-light .seo-head p{color:rgba(0,36,74,.72);}

.ll-home .seo.on-light .seo-tab{
  background:#fff; border-color:rgba(0,36,74,.14); color:rgba(0,36,74,.78);
}
.ll-home .seo.on-light .seo-tab:hover{background:rgba(0,36,74,.06);color:#00244A;}
.ll-home .seo.on-light .seo-tab.is-active{background:#692FE6;border-color:#692FE6;color:#fff;}

.ll-home .seo.on-light .seo-panels{
  background:#fff; border-color:rgba(0,36,74,.10);
  box-shadow:0 12px 34px rgba(0,36,74,.06);
}
.ll-home .seo.on-light .seo-panel,
.ll-home .seo.on-light .seo-prose{color:rgba(0,36,74,.76);}
.ll-home .seo.on-light .seo-prose strong,
.ll-home .seo.on-light .seo-panel strong{color:#00244A;}
.ll-home .seo.on-light .h3-like{color:#00244A;}
.ll-home .seo.on-light .seo-panel li{color:rgba(0,36,74,.76);}

/* --- таблицы цен --- */
.ll-home .price-title{
  margin:26px 0 12px; font-family:var(--font-display); color:#00244A;
  font-size:clamp(17px,1.4vw,21px); line-height:1.2; font-weight:900;
  text-transform:uppercase; letter-spacing:-.01em;
}
.ll-home .seo-panel>.price-title:first-child{margin-top:0;}
.ll-home .price-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 14px;}
.ll-home .price{
  width:100%; min-width:520px; border-collapse:collapse;
  font-size:14px; line-height:1.35; color:#00244A;
}
.ll-home .price th,
.ll-home .price td{
  padding:11px 12px; text-align:left; border-bottom:1px solid rgba(0,36,74,.10);
  vertical-align:middle;
}
.ll-home .price thead th{
  background:rgba(0,36,74,.05); font-weight:800; font-size:13px;
  text-transform:uppercase; letter-spacing:.03em; white-space:nowrap;
}
.ll-home .price tbody th{font-weight:800;white-space:nowrap;}
.ll-home .price tbody tr:last-child th,
.ll-home .price tbody tr:last-child td{border-bottom:none;}
.ll-home .price td s{color:rgba(0,36,74,.42);margin-right:6px;}
.ll-home .price td em{
  display:block; font-style:normal; font-size:12px; font-weight:700; color:var(--llh-orange);
}
.ll-home .price td.is-empty{color:rgba(0,36,74,.32);}
/* --- свёрнутые таблицы (аренда лазертага) --- */
/* На <details> — раскрытие работает без скрипта и доступно с клавиатуры. */
.ll-home .acc{
  margin:0 0 12px; border:1px solid rgba(0,36,74,.14); border-radius:10px;
  background:#fff; overflow:hidden;
}
.ll-home .acc>summary{
  cursor:pointer; list-style:none; padding:14px 46px 14px 16px; position:relative;
  font-family:var(--font-display); color:#00244A;
  font-size:clamp(15px,1.2vw,17px); line-height:1.25; font-weight:900;
  text-transform:uppercase; letter-spacing:-.01em;
  transition:background 160ms ease;
}
.ll-home .acc>summary::-webkit-details-marker{display:none;}
.ll-home .acc>summary:hover{background:rgba(0,36,74,.04);}
.ll-home .acc>summary::after{
  content:""; position:absolute; right:18px; top:50%; width:10px; height:10px;
  margin-top:-6px; border-right:2px solid var(--llh-violet); border-bottom:2px solid var(--llh-violet);
  transform:rotate(45deg); transition:transform 200ms ease;
}
.ll-home .acc[open]>summary{background:rgba(105,47,230,.06);}
.ll-home .acc[open]>summary::after{transform:rotate(-135deg);margin-top:-2px;}
.ll-home .acc-body{padding:4px 16px 2px;border-top:1px solid rgba(0,36,74,.10);}
.ll-home .acc-body .price-wrap{margin-top:14px;}

.ll-home .price-note{
  margin:0 0 14px; font-size:13px; line-height:1.55; color:rgba(0,36,74,.62);
}
.ll-home .price-note ul{margin:6px 0 0;padding-left:20px;}
.ll-home .price-note li{margin-bottom:5px;}

@media (max-width:759px){
  .ll-home .seo.on-light .seo-tabs{
    flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin;
  }
  .ll-home .price{min-width:460px;font-size:13px;}
  .ll-home .price th,.ll-home .price td{padding:9px 10px;}
  .ll-home .acc>summary{padding:12px 38px 12px 13px;font-size:14px;}
  .ll-home .acc-body{padding:2px 13px;}
}

/* ==========================================================================
   1.7 ДЛЯ КОГО
   Раскладка по референсу (open9, home-5): средняя карточка прямая и ниже,
   боковые развёрнуты и приподняты. Таймеров и лайков нет — только затемнение
   у нижней кромки и подпись.
   ========================================================================== */
.ll-home .who{
  position:relative; overflow:hidden; color:var(--fg-on-light-1,#00244A);
  background:linear-gradient(180deg,#FFFFFF 0%,#F1F4FA 100%);
  padding:clamp(60px,6.5vw,104px) clamp(20px,4.4vw,64px) clamp(90px,9vw,140px);
}
.ll-home .who-in{
  position:relative; z-index:1; max-width:1400px; margin:0 auto;
  display:flex; flex-direction:column; gap:clamp(30px,3.6vw,54px);
}
.ll-home .who-head{
  display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center;
}
.ll-home .who-head .eyebrow{color:var(--llh-violet);margin:0 0 -4px;}
.ll-home .who-head h2{
  margin:0; font-family:var(--font-display); color:#00244A !important;
  font-size:clamp(28px,3.2vw,46px); line-height:1.06; font-weight:900;
  text-transform:uppercase; letter-spacing:-.015em; text-wrap:balance;
}

.ll-home .who-grid{
  display:flex; justify-content:center; align-items:flex-start;
  gap:clamp(16px,2.2vw,36px);
}
.ll-home .who-card{
  position:relative; margin:0; flex:0 1 clamp(240px,26vw,380px);
  aspect-ratio:3/4; border-radius:22px; overflow:hidden;
  background:rgba(0,36,74,.06);
  box-shadow:0 26px 56px rgba(0,36,74,.24);
  transition:transform 320ms cubic-bezier(.22,.61,.36,1), box-shadow 320ms ease;
}
.ll-home .who-card>img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
}
.ll-home .who-fade{
  position:absolute; left:0; right:0; bottom:0; height:46%; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,14,34,0) 0%, rgba(6,14,34,.62) 52%, rgba(6,14,34,.92) 100%);
}
.ll-home .who-cap{
  position:absolute; left:0; right:0; bottom:clamp(18px,2vw,28px);
  padding:0 16px; text-align:center;
  font-family:var(--font-display); color:#fff;
  font-size:clamp(17px,1.55vw,24px); line-height:1.15; font-weight:900;
  text-transform:uppercase; letter-spacing:-.01em;
}

/* наклон: боковые развёрнуты и приподняты, средняя прямая и опущена */
.ll-home .who-card:nth-child(1){transform:rotate(-8deg) translateY(-16px);}
.ll-home .who-card:nth-child(2){transform:translateY(30px);}
.ll-home .who-card:nth-child(3){transform:rotate(8deg) translateY(-16px);}
.ll-home .who-card:nth-child(1):hover{transform:rotate(-4deg) translateY(-28px);}
.ll-home .who-card:nth-child(2):hover{transform:translateY(16px);}
.ll-home .who-card:nth-child(3):hover{transform:rotate(4deg) translateY(-28px);}
.ll-home .who-card:hover{box-shadow:0 32px 68px rgba(0,36,74,.32);}

/* На узких экранах наклон превращает ряд в кашу — карточки выпрямляем
   и пускаем свайп-каруселью, как остальные сетки на странице. */
/* На узких экранах карусели нет — все три карточки видны сразу. Наклон
   уменьшаем, иначе в тесном ряду они наезжают друг на друга. */
@media (max-width:900px){
  .ll-home .who{padding-bottom:clamp(56px,8vw,80px);}
  .ll-home .who-grid{gap:clamp(6px,1.6vw,14px);}
  .ll-home .who-card{flex:1 1 0;min-width:0;}
  .ll-home .who-card:nth-child(1){transform:rotate(-4deg) translateY(-8px);}
  .ll-home .who-card:nth-child(2){transform:translateY(12px);}
  .ll-home .who-card:nth-child(3){transform:rotate(4deg) translateY(-8px);}
  .ll-home .who-card:nth-child(1):hover{transform:rotate(-4deg) translateY(-8px);}
  .ll-home .who-card:nth-child(2):hover{transform:translateY(12px);}
  .ll-home .who-card:nth-child(3):hover{transform:rotate(4deg) translateY(-8px);}
  .ll-home .who-cap{
    bottom:clamp(8px,2vw,16px); padding:0 6px;
    font-size:clamp(10px,2.9vw,16px); letter-spacing:0;
  }
  .ll-home .who-fade{height:52%;}
  .ll-home .who-card{border-radius:14px;}
}
@media (prefers-reduced-motion: reduce){
  .ll-home .who-card{transition:none;}
}