/* ===== Balatskiy — стили из макета (Balatskiy Red / Mobile) ===== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:#0c0a0b;color:#ffffff;font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:#ff2a1f;text-decoration:none}
a:hover{opacity:.75}
::selection{background:#e10600;color:#0c0a0b}
input,textarea,select,button{font-family:inherit}
input::placeholder,textarea::placeholder{color:#7d7370}
img{display:block;max-width:100%}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes marqCases{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes sweep{0%{transform:translateX(-180%) skewX(-18deg)}55%{transform:translateX(320%) skewX(-18deg)}100%{transform:translateX(320%) skewX(-18deg)}}
@keyframes glowpulse{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes spinslow{to{transform:rotate(360deg)}}
@keyframes popin{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}

@media(max-width:700px){
  .bk-modal{grid-template-columns:1fr !important}
  .bk-aside{display:none !important}
  .case-hero{grid-template-columns:1fr !important}
  .about-row{grid-template-columns:1fr !important}
}
@media(max-width:860px){
  .pf-split{grid-template-columns:1fr !important}
  .rv-split{grid-template-columns:1fr !important}
  .pf-trio{grid-template-columns:1fr !important}
  .ab-grid{grid-template-columns:1fr !important}
  .mx-wave{display:none !important}
  .ft-grid{grid-template-columns:1fr !important}
}

/* --- состояния, которых в макете не было отдельным CSS (style-hover/focus/before) --- */
.brand-item{transition:color .3s,text-shadow .3s}
.brand-item:hover{color:#e10600;text-shadow:0 0 30px rgba(225,6,0,.45)}

.case-slide{transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s}
.case-slide:hover{transform:translateY(-12px) scale(1.02);border-color:#e10600;box-shadow:0 26px 60px rgba(0,0,0,.6);z-index:3}

.mix-row{transition:background .25s}
.mix-row:hover{background:rgba(225,6,0,.05)}
.mix-play{transition:background .25s,color .25s}
.mix-play:hover{background:#e10600;color:#fff}

.btn-shine{position:relative;overflow:hidden;isolation:isolate}
.btn-shine::before{content:'';position:absolute;top:0;left:0;width:38%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transform:translateX(-180%) skewX(-18deg);animation:sweep 5.5s ease-in-out infinite;pointer-events:none}

.btn-ghost-inv{transition:background .3s,color .3s,border-color .3s}
.btn-ghost-inv:hover{background:#fff;color:#0c0a0b;border-color:#fff}

.case-card{transition:border-color .3s,transform .3s}
.case-card:hover{border-color:#e10600;transform:translateY(-4px)}

.btn-outline-red{transition:background .3s}
.btn-outline-red:hover{background:#e10600}

.bk-input{transition:border-color .25s}
.bk-input:focus{border-color:#e10600}

.bk-opt{transition:border-color .25s,transform .25s}
.bk-opt:hover{border-color:#e10600;transform:translateX(3px)}

.nav-link{transition:color .25s,border-color .25s}
.nav-link:hover{color:#ff2a1f}

/* плавное появление секций (прогрессивно: скрываем только при JS) */
html.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
html.js [data-reveal].in{opacity:1;transform:none}

/* модалка бронирования */
.bk-overlay{position:fixed;inset:0;z-index:100;background:rgba(6,5,5,.88);backdrop-filter:blur(12px);
  display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.bk-overlay[hidden]{display:none}