
:root{--bg:#070707;--card:#111;--text:#f5f5f5;--muted:#a7a7a7;--line:#242424;--accent:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;line-height:1.4}
a{color:inherit;text-decoration:none}.wrap{max-width:1240px;margin:auto;padding:0 28px}
header{position:fixed;top:0;left:0;right:0;z-index:20;background:rgba(7,7,7,.75);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{font-weight:900;letter-spacing:-1px;font-size:25px}.logo span{font-weight:400;color:#888}
.navlinks{display:flex;gap:28px;font-size:14px;color:#bbb}.navlinks a{white-space:nowrap}.navlinks a:hover{color:#fff}
@media(max-width:1180px){.navlinks{gap:16px;font-size:13px}}
@media(max-width:940px){.navlinks{display:none}}

.lang{display:flex;gap:6px;margin-left:auto;margin-right:16px}
.lang button{background:none;border:0;padding:6px 4px;color:#777;font:inherit;font-size:12px;font-weight:700;letter-spacing:1px;cursor:pointer}
.lang button:hover{color:#ddd}
.lang button.on{color:#fff;border-bottom:2px solid #fff}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 20px;border-radius:5px;background:#fff;color:#000;font-weight:800;border:1px solid #fff}.btn.dark{background:transparent;color:#fff}.btn:hover{transform:translateY(-1px)}
.hero{min-height:100vh;display:flex;align-items:flex-end;position:relative;overflow:hidden;background:
radial-gradient(circle at 70% 35%,rgba(255,255,255,.13),transparent 25%),
linear-gradient(180deg,rgba(0,0,0,.2),#070707 90%);}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.8),rgba(0,0,0,.18)),url("https://www.bsr.kz/hero.jpg") center/cover no-repeat;opacity:.65}
.hero-content{position:relative;padding:150px 0 90px;min-width:0}.eyebrow{text-transform:uppercase;letter-spacing:4px;color:#aaa;font-size:12px;margin-bottom:20px}.hero h1{font-size:clamp(54px,9vw,132px);line-height:.85;letter-spacing:-7px;margin:0 0 30px;font-weight:950}.hero h1 em{font-style:normal;color:#777}.hero p{font-size:20px;color:#ccc;max-width:680px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:70px}.stat{padding:28px 10px;border-right:1px solid var(--line)}.stat:last-child{border:0}.stat b{font-size:32px}.stat span{display:block;color:#888;font-size:12px;text-transform:uppercase;letter-spacing:1px;margin-top:5px}
section{padding:110px 0}.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:42px}.kicker{color:#888;text-transform:uppercase;letter-spacing:3px;font-size:11px}.section-head h2{font-size:clamp(38px,5vw,72px);letter-spacing:-3px;margin:8px 0 0;line-height:.95}.section-head p{max-width:420px;color:#999}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{border:1px solid var(--line);background:var(--card) center/cover no-repeat;min-height:300px;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}.card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(0,0,0,.9));z-index:0}.card>*{position:relative;z-index:1}.num{font-size:12px;color:#777;position:absolute!important;top:22px;left:24px}.card h3{font-size:30px;margin:0 0 8px}.card p{color:#aaa;margin:0}.wide{grid-column:span 2}
.equipment{display:grid;grid-template-columns:1.2fr .8fr;border-top:1px solid var(--line)}.eq{padding:32px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:25px}.eq h3{font-size:25px;margin:0 0 7px}.eq p{color:#999;margin:0}.eq strong{white-space:nowrap}
.about{background:#f1f1f1;color:#090909}.about .kicker,.about p{color:#555}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}.about h2{font-size:clamp(40px,6vw,80px);line-height:.9;letter-spacing:-4px;margin:10px 0 30px}.check{border-top:1px solid #ccc;padding:18px 0;font-weight:700}
.projects{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.project{min-height:380px;background:#151515 center/cover no-repeat;border:1px solid var(--line);padding:28px;display:flex;align-items:flex-end;position:relative;overflow:hidden}.project:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.88))}.project>*{position:relative}.project h3{font-size:30px;margin:0}.project p{color:#ccc}
.cta{background:#fff;color:#000}.cta h2{font-size:clamp(45px,7vw,95px);letter-spacing:-5px;line-height:.9;margin:0 0 25px}.cta p{color:#555;font-size:18px;max-width:600px}.form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:35px}.form input,.form textarea{width:100%;padding:18px;border:1px solid #ccc;background:#fafafa;font:inherit}.form textarea{grid-column:1/-1;min-height:130px}.form button{cursor:pointer}
footer{padding:45px 0;border-top:1px solid var(--line);color:#888}.foot{display:flex;justify-content:space-between;gap:20px}.foot b{color:#fff}
@media(max-width:800px){.navlinks{display:none}.lang{margin-right:10px}.wrap{padding:0 18px}.hero h1{letter-spacing:-4px}.stats{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-right:0}.grid,.projects,.about-grid{grid-template-columns:1fr}.wide{grid-column:auto}.equipment{grid-template-columns:1fr}.form{grid-template-columns:1fr}.form textarea{grid-column:auto}.section-head{display:block}.section-head p{margin-top:20px}.foot{display:block}.foot>*{margin-bottom:12px}}

/* BIG SOUND — brands strip inside first screen */
.hero{padding-bottom:0}
.hero .brands-marquee{
  position:relative;
  z-index:3;
  width:100%;
  margin-top:20px;
  padding:18px 0 20px;
  border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.10);
  overflow:hidden;
  background:rgba(0,0,0,.22);
}
.hero .brands-label{
  max-width:1240px;
  margin:0 auto 12px;
  padding:0 28px;
  color:#8d8d8d;
  text-transform:uppercase;
  letter-spacing:2.8px;
  font-size:10px;
  font-weight:500;
}
.hero .brands-track{
  display:flex;
  width:max-content;
  animation:brandsScroll 25s linear infinite;
}
.hero .brands-group{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.hero .brand-item{
  display:flex;
  align-items:center;
  font-size:clamp(22px,2.4vw,34px);
  font-weight:700;
  letter-spacing:-1.2px;
  color:#f2f2f2;
  padding:0 24px;
  white-space:nowrap;
  line-height:1;
}
.hero .brand-item span{
  color:#ededed;
  font-size:10px;
  margin-left:24px;
}
@keyframes brandsScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.hero .brands-marquee:hover .brands-track{animation-play-state:paused}
@media(max-width:800px){
  .hero .brands-marquee{margin-top:10px;padding:15px 0 17px}
  .hero .brands-label{padding:0 18px;font-size:9px;letter-spacing:2.2px}
  .hero .brand-item{font-size:21px;padding:0 17px}
  .hero .brand-item span{margin-left:17px}
}

.hero .beams{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:4;display:none}
@supports (mask-image:conic-gradient(#000,#000)) or (-webkit-mask-image:conic-gradient(#000,#000)){.hero .beams{display:block}}
.beam{position:absolute;top:-12%;height:140%;width:clamp(260px,30vw,470px);display:block;
 background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,.16) 55%,rgba(255,255,255,0) 92%);
 -webkit-mask-image:conic-gradient(from 0deg at 50% 0,transparent 169deg,#000 176deg 184deg,transparent 191deg);
 mask-image:conic-gradient(from 0deg at 50% 0,transparent 169deg,#000 176deg 184deg,transparent 191deg);
 transform-origin:50% 0;mix-blend-mode:screen;opacity:.55;will-change:transform}
.beam.b1{left:-4%;animation:beamSweep 9s ease-in-out -2s infinite alternate}
.beam.b2{left:34%;opacity:.4;animation:beamSweep 12.5s ease-in-out -7s infinite alternate-reverse}
.beam.b3{left:70%;opacity:.45;animation:beamSweep 10.5s ease-in-out -5s infinite alternate}
@keyframes beamSweep{from{transform:rotate(-26deg)}to{transform:rotate(24deg)}}
@media(max-width:800px){.beam.b2{display:none}}

.section-head{position:relative}
.spotlit .section-head:before{content:"";position:absolute;top:-70%;left:-8%;width:56%;height:170%;
 background:radial-gradient(closest-side ellipse at 50% 50%,rgba(255,255,255,.11),transparent 100%);
 opacity:0;transition:opacity 1.4s ease .6s;pointer-events:none}
.spotlit.lit .section-head:before{opacity:1}
@media(prefers-reduced-motion:reduce){.hero .beams,.spotlit .section-head:before{display:none}}

#big-sound-projects{overflow:hidden;padding:30px 0;margin:-30px 0}
#big-sound-projects .gallery-track{display:flex;gap:14px;width:max-content;animation:galleryScroll 75s linear infinite}
#big-sound-projects .gallery-group{display:flex;gap:14px;flex-shrink:0}
#big-sound-projects article{width:clamp(260px,32vw,430px);flex-shrink:0;background:#111;border:1px solid var(--line);overflow:hidden;position:relative;cursor:pointer;transition:transform .22s ease-out;will-change:transform}
#big-sound-projects img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
#big-sound-projects .g-caption{padding:18px 20px 22px}
#big-sound-projects .g-cat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#888}
#big-sound-projects .g-caption h3{margin:7px 0 0;font-size:24px}
#big-sound-projects:hover .gallery-track{animation-play-state:paused}

@keyframes galleryScroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 7px))}}
@media(max-width:700px){#big-sound-projects article{width:78vw}}
@media(prefers-reduced-motion:reduce){#big-sound-projects{overflow-x:auto}#big-sound-projects .gallery-track{animation:none}#big-sound-projects .gallery-group[aria-hidden]{display:none}}

.g-lightbox{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.93);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
.g-lightbox.open{opacity:1;pointer-events:auto}
.g-lightbox img{max-width:92vw;max-height:86vh;object-fit:contain;display:block;cursor:pointer}
.g-lightbox button{font:inherit;color:#fff;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.25);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .15s}
.g-lightbox button:hover{background:rgba(255,255,255,.18)}
.g-lightbox .g-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;font-size:30px;line-height:1}
.g-lightbox .g-prev{left:18px}
.g-lightbox .g-next{right:18px}
.g-lightbox .g-close{position:absolute;top:16px;right:18px;width:44px;height:44px;font-size:20px}
.g-lightbox .g-count{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#aaa;font-size:13px;letter-spacing:.12em}
@media(max-width:700px){.g-lightbox .g-nav{width:44px;height:44px;font-size:24px}.g-lightbox .g-prev{left:8px}.g-lightbox .g-next{right:8px}}

.fab{position:fixed;right:18px;bottom:18px;z-index:30;display:flex;flex-direction:column;gap:10px}
.fab a{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(17,17,17,.92);border:1px solid rgba(255,255,255,.16);box-shadow:0 4px 18px rgba(0,0,0,.45);backdrop-filter:blur(8px);transition:transform .15s,border-color .15s}
.fab a:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.45)}
.fab svg{width:24px;height:24px;display:block}
.fab-wa svg{fill:#25d366}
.fab-ig svg{stroke:#e4405f}.fab-ig svg .dot{fill:#e4405f;stroke:none}
.fab-gis svg{fill:#5fbb31}
@media(max-width:700px){.fab{right:12px;bottom:12px;gap:8px}.fab a{width:46px;height:46px}.fab svg{width:21px;height:21px}}
@media(prefers-reduced-motion:reduce){.fab a{transition:none}.fab a:hover{transform:none}}

.btn.social{position:relative;z-index:0;overflow:hidden;transition:color .3s ease .85s,border-color .85s,transform .15s}
.fab a{position:relative;z-index:0;overflow:hidden}
.btn.social:before,.btn.social:after,.fab a:before,.fab a:after{content:"";position:absolute;left:50%;top:50%;width:190px;height:190px;margin:-95px 0 0 -95px;border-radius:50%;z-index:-1;opacity:0;filter:blur(10px);pointer-events:none;transition:transform 1.2s cubic-bezier(.5,.06,.13,1),opacity .3s linear,filter 1.2s ease}
.btn.social:before{transform:rotate(-230deg) translateX(115px) scale(.22)}
.btn.social:after{transform:rotate(-50deg) translateX(115px) scale(.22)}
.btn.social:hover:before,.btn.social:hover:after,.fab a:hover:before,.fab a:hover:after{opacity:1;filter:blur(0)}
.btn.social:hover:before{transform:rotate(0deg) translateX(0) scale(1.12)}
.btn.social:hover:after{transform:rotate(180deg) translateX(0) scale(1.12)}
.fab a:before,.fab a:after{width:96px;height:96px;margin:-48px 0 0 -48px;transition:transform .84s cubic-bezier(.5,.06,.13,1),opacity .25s linear,filter .84s ease}
.fab a:before{transform:rotate(-230deg) translateX(62px) scale(.25)}
.fab a:after{transform:rotate(-50deg) translateX(62px) scale(.25)}
.fab a:hover:before{transform:rotate(0deg) translateX(0) scale(1.05)}
.fab a:hover:after{transform:rotate(180deg) translateX(0) scale(1.05)}
.btn-wa:before,.btn-wa:after,.fab-wa:before,.fab-wa:after{background:#25d366}
.btn-ig:before,.fab-ig:before{background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888)}
.btn-ig:after,.fab-ig:after{background:linear-gradient(225deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888)}
.fab-gis:before,.fab-gis:after{background:#5fbb31}
.btn-wa:hover{color:#04150c;border-color:#25d366}
.btn-ig:hover{color:#fff;border-color:#cc2366}
.fab svg{position:relative;z-index:1;transition:fill .3s ease .6s,stroke .3s ease .6s}
.fab-wa:hover{border-color:#25d366}.fab-wa:hover svg{fill:#fff}
.fab-ig:hover{border-color:#d62976}.fab-ig:hover svg{stroke:#fff}.fab-ig:hover svg .dot{fill:#fff}
.fab-gis:hover{border-color:#5fbb31}.fab-gis:hover svg{fill:#fff}
@media(prefers-reduced-motion:reduce){.btn.social,.btn.social:before,.btn.social:after,.fab a:before,.fab a:after,.fab svg{transition:none}}
