/* ===== Посадочная «Бампербол»: спортивно и весело, голубой + жёлтый ===== */
.lp-bb{--b:#2f7fd8;--b2:#123e73;--bt:#e9f4ff;--sky:#8fd3ff;--y:#ffd23f}
.lp-bb .kicker{color:var(--b)}
.lp-bb .btn{border-radius:999px}
.bb-btn{background:var(--y);color:#1f1f22}.bb-btn:hover{background:#ffe066;color:#1f1f22}
.bb-bg{background:var(--bt)}

/* Заглушка фото */
.bb-ph{display:block;width:100%;object-fit:cover;background:#e6f2fe}

/* Первый экран */
.bb-hero{position:relative;overflow:hidden;color:#fff;background:var(--b2)}
.bb-hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bb-hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,48,92,.95) 25%,rgba(18,62,115,.7) 55%,rgba(18,62,115,.15)),linear-gradient(0deg,rgba(10,30,60,.6),transparent 50%)}
.bb-bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.55),rgba(143,211,255,.15) 45%,rgba(143,211,255,.05) 70%);border:2px solid rgba(255,255,255,.35);pointer-events:none;animation:bbfloat 7s ease-in-out infinite}
.bb-bubble--1{width:180px;height:180px;right:6%;top:12%}
.bb-bubble--2{width:110px;height:110px;right:28%;bottom:10%;animation-delay:-3s}
@keyframes bbfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.bb-hero__in{position:relative;z-index:1;padding-top:64px;padding-bottom:56px;display:flex;flex-wrap:wrap;gap:36px;align-items:flex-end;min-height:600px}
.bb-hero__text{flex:1 1 560px;display:flex;flex-direction:column;gap:20px}
.bb-chips{display:flex;flex-wrap:wrap;gap:8px}
.bb-chips span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);padding:6px 14px;border-radius:999px;font-size:14px;font-weight:700}
.bb-hero h1{font-family:var(--head);font-weight:700;font-size:clamp(40px,5.4vw,78px);line-height:1;text-transform:uppercase}
.bb-hero h1 span{color:var(--y)}
.bb-hero p{font-size:19px;line-height:1.55;color:#e3eefb;max-width:600px}
.bb-hero__price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.bb-hero__price b{font-family:var(--head);font-size:52px;line-height:1;color:var(--y)}
.bb-hero__price span{font-size:16px;color:#e3eefb}
.bb-quick{flex:0 1 380px;background:#fff;color:var(--ink);border-radius:12px;padding:26px;display:flex;flex-direction:column;gap:12px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.bb-quick h2{font-family:var(--head);font-size:26px;text-transform:uppercase}

/* Что это */
.bb-what{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.bb-what__item{background:var(--bt);border-radius:12px;padding:26px;display:flex;flex-direction:column;gap:10px}
.bb-what__ico{width:68px;height:68px;border-radius:50%;background:var(--b);color:#fff;display:flex;align-items:center;justify-content:center}
.bb-what__item b{font-size:19px}
.bb-what__item span{font-size:15px;color:var(--text);line-height:1.55}

/* Для кого */
.bb-who{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.bb-who__card{background:#fff;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(18,62,115,.08)}
.bb-who__card .bb-ph{height:170px}
.bb-who__card>div:last-child{padding:20px;display:flex;flex-direction:column;gap:8px}
.bb-who__card h3{font-family:var(--head);font-size:22px;text-transform:uppercase;line-height:1.1}
.bb-who__card p{font-size:14px;color:var(--text);line-height:1.5}

/* Игры */
.bb-games{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.bb-game{border:3px solid var(--sky);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:8px}
.bb-game b{font-family:var(--head);font-size:44px;line-height:1;color:var(--b)}
.bb-game h3{font-family:var(--head);font-size:26px;text-transform:uppercase}
.bb-game p{font-size:15px;color:var(--text);line-height:1.5}

/* Площадки */
.bb-places{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.bb-place{background:#fff;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 24px rgba(18,62,115,.08)}
.bb-place>img,.bb-place>.bb-ph{height:200px;width:100%;object-fit:cover}
.bb-place__body{padding:22px;display:flex;flex-direction:column;gap:10px;flex-grow:1}
.bb-tag{align-self:flex-start;background:var(--y);color:#1f1f22;font-size:12px;font-weight:800;padding:5px 12px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em}
.bb-place h3{font-family:var(--head);font-size:28px;text-transform:uppercase}
.bb-place p{font-size:15px;color:var(--text);line-height:1.5}
.bb-place b{margin-top:auto;font-size:17px;color:var(--b2)}

/* Тарифы: голубые акценты */
.lp-bb .packs{background:linear-gradient(135deg,#123e73 0%,#0e2f57 55%,#0b1f3a 100%)}
.lp-bb .pack--best{outline-color:var(--y)}
.lp-bb .pack__flag{background:var(--y)}
.lp-bb .pack .btn--orange{background:var(--y)}

/* Допы */
.bb-adds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.bb-add{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:22px 12px;border-radius:12px;background:var(--bt);border:2px solid #d4e8fb}
.bb-add__ico{width:72px;height:72px;border-radius:50%;background:var(--y);color:#1f1f22;display:flex;align-items:center;justify-content:center}
.bb-add b{font-size:15px}
.bb-add em{font-style:normal;font-weight:800;color:var(--b)}

/* Галерея */

/* Шаги */
.bb-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:s}
.bb-steps>div{position:relative;padding:24px;border-radius:12px;background:var(--bt);display:flex;flex-direction:column;gap:8px}
.bb-steps b{width:44px;height:44px;border-radius:50%;background:var(--b);color:#fff;font-family:var(--head);font-size:22px;display:flex;align-items:center;justify-content:center}
.bb-steps h3{font-size:18px}
.bb-steps p{font-size:14px;color:var(--text);line-height:1.5}

@media (max-width:1000px){
  .bb-who,.bb-games,.bb-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bb-adds{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .bb-what,.bb-places{grid-template-columns:1fr}
  .bb-hero__in{min-height:0;padding-top:40px}
  .bb-bubble--1{width:110px;height:110px}
  .bb-bubble--2{display:none}
}
@media (max-width:520px){
  .bb-who,.bb-games,.bb-steps{grid-template-columns:1fr}
}