/* =========================================================
   Design tokens
   ========================================================= */
:root{
  --red: 		#F20B36;
  --red-deep:	#D40A2E;
  --navy:		#1F1D4B;
  --blue:		#222A76;
	
  --ink:		#12122C;
  --cream:		#FFF6EC;
  --cream-2:	#F9EDE0;

  --white:		#FFFFFF;

  --font-text:		'Golos Text', 'Segoe UI', Arial, sans-serif;
  --font-display:	'Alter Aves Update', 'Golos Text', Arial, sans-serif;

  --container: min(1720px, 100% - 2 * clamp(20px, 5.2vw, 100px));

	--fs-hero-p:  clamp(16px, 1.3vw, 24px);
	--fs-h2:      clamp(44px, 4.4vw, 84px);
	--fs-promo:   clamp(21px, 1.88vw, 36px);
	--fs-quote:   clamp(14px, 0.84vw, 16px);
	--fs-name:    clamp(18px, 1.04vw, 20px);
	--fs-position:clamp(13px, 0.73vw, 14px);
	--fs-btn:     clamp(16px, 0.94vw, 18px);
	
  --fs-badge:   clamp(2.6rem, 1.15rem + 5.6vw, 6.65rem);
  
  --radius-lg: 14px;
  --radius-md: 8px;
  --radius-pill: 999px;

  color-scheme: light;
}

*,*::before,*::after{box-sizing:border-box}
html{
	scroll-behavior: smooth;
	scrollbar-color: var(--red) var(--cream);
}
body{
  margin:0;
  font-family:var(--font-text);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:inherit;text-decoration:none}

nobr { white-space: nowrap; }





.container{/*width:var(--container);*/ margin-inline:auto; max-width: 69rem; padding-left: 3rem; padding-right: 3rem;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width: 1000px){
	.container{ padding-left: 2rem; padding-right: 2rem; } 
}
@media (max-width: 750px){
	.container{ padding-left: 1.3rem; padding-right: 1.3rem; } 
}

/* reveal-on-scroll (soft fade-in of blocks, per design notes) */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease, transform .7s ease}
.reveal.is-visible{opacity:1;transform:none}

/* ---------- Buttons ---------- */
.btn{
	display:inline-flex;align-items:center;justify-content:center;
	border-radius:var(--radius-pill);
	font-family:var(--font-text);
	font-weight:600;
	font-size:var(--fs-btn);
	line-height: 100%;
	letter-spacing:.02em;
	white-space:nowrap;
	transition: transform 300ms ease, background-color 300ms ease, color 300ms ease;
	height: clamp(51px, 2.92vw, 56px);
	padding:0 1.6rem;
}

.btn:active{transform:translateY(0)}
.btn--white{background:var(--white);color:var(--navy);}
.btn--white:hover{color:var(--blue)}
.btn--navy{background:var(--navy);color:var(--white); }
.btn--navy:hover{background:var(--blue)}

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position:relative;z-index:20;
  padding:clamp(16px,2vw,30px) 0 0;
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo img{ height: 3rem;}
@media (max-width: 750px){
	.logo img{ height: 2.7rem;}
}

.header-banner{
  display:flex;
  align-items:center;gap:20px;
  margin-left:auto;
}
.header-banner p{
  margin:0;color:var(--white);font-size: clamp(14px, 0.82vw, 16px); line-height: 120%;text-align:left;
}
@media (max-width: 750px){
  .header-banner p {display:none}
}

.header-banner .btn { font-size: 14px; height: clamp(36px,2.08vw,40px); margin-bottom: 0.1rem; }


/* =========================================================
   Hero
   ========================================================= */

/* ---------- Фоновый визуализатор волны ---------- */
  #wave-canvas{
    position: absolute; top: 45%; left:0;
    transform:translateY(-50%) scale(var(--waveScale));
    width:100vw; pointer-events:none; z-index:0;
    /*-webkit-mask-image:linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
    mask-image:linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);*/
	
	mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
  }

	@media (max-width: 750px){
		 #wave-canvas{ transform: scale(2); top: 30%; }
	}

	.wave-wrapper { overflow-x: hidden; width: 100%; position: absolute; inset:0; top: -10rem; background: var(--red); }

.hero{
  position:relative;
  background:var(--red);
  color:var(--white);
  padding-bottom:clamp(48px,7vw,120px);
  /*overflow-x:hidden;*/
}
/*
.hero::before{
  content:"";
  position:absolute; 
  top: 0%; left: 0; width: 100%;
  height:70%;
  background:url('../assets/images/hero-bg2.webp') center/cover no-repeat;
  mix-blend-mode:screen;
  opacity:.9;
  pointer-events:none;
}
*/
.site-header{ /*background:var(--red) */}
.hero-deco{position:absolute;pointer-events:none;z-index:2;filter:drop-shadow(0 6px 16px rgba(0,0,0,.12))}
.hero-deco--peace{     	left: -6rem;  top: 9rem; width: 9rem; transform:rotate(3deg)}
.hero-deco--heart{ 		right: -5rem; top: 1rem; width: 6rem; transform:rotate(20deg)}
.hero-deco--star1{  	right: -9rem; bottom: -1rem;  width: 6rem; }
.hero-deco--sparkle{ position:absolute; width:clamp(14px,2vw,40px); opacity:.9 }

@media (max-width: 1000px){
	.hero-deco--peace{ width:clamp(66px,9.4vw,180px); left: -4vw; top: 27vw; }
	.hero-deco--heart{ width:clamp(42px,6.3vw,120px); right: 4vw; top: -2vw; }
	.hero-deco--star1{ width:clamp(44px,6.3vw,121px); right: -1vw; bottom: -2vw; }
}

.hero-inner{position:relative;z-index:2;text-align:center;padding-top:clamp(60px,7vw,130px)}

.v_ritme { /*padding:clamp(18px,3.6vw,54px) clamp(20px,5vw,70px) clamp(30px,6vw,86px);*/ }
.v_ritme article { position: relative; /*aspect-ratio: 1000/513;*/ aspect-ratio: 789/409; width: 100%; }
.v_ritme article img { position: absolute; inset: 0; width: 100%; }
.v_ritme article > img { z-index: 1; }


.v_ritme svg {  position: absolute; aspect-ratio: 44/49; width: 6.6%; top: 70.5%; left: 47.5%; z-index: 5; color: white; transition: 300ms; }
.v_ritme svg:hover { transform: scale(1.1); cursor: pointer; color: var(--cream); }

.v_ritme .play {  position: absolute;  z-index: 5; cursor: pointer;  }
.v_ritme .play.desktop { aspect-ratio: 253/89; width: 32.1%; top: 67.5%; left: 33.5%; }
.v_ritme .play.mobile { aspect-ratio: 129/56; width: 40.95%; top: 62%; left: 35%; }


.v_ritme .play::before,
	.v_ritme .play::after { position: absolute; width: 100%; height: 100%; inset: 0; transition: opacity 500ms; content: ''; display: block; }

.v_ritme .play.desktop::before 	{ opacity: 1; background: url('../assets/images/start0.svg') 0 0 / cover no-repeat; }
.v_ritme .play.desktop::after 	{ opacity: 0; background: url('../assets/images/start1.svg') 0 0 / cover no-repeat; }
.v_ritme .play.desktop:hover::before 	{ opacity: 0 }
.v_ritme .play.desktop:hover::after 	{ opacity: 1 }

.v_ritme .play.mobile::before { opacity: 1; background: url('../assets/images/start_mobile.svg') 0 0 / cover no-repeat; }

.v_ritme .mobile { display: none; }
@media (max-width: 750px){
	.v_ritme .desktop { display: none; }
	.v_ritme .mobile { display: block; }
}

.badge{
  position:relative;
  margin:0 auto clamp(28px,3vw,48px);
  max-width: 790px;
}
.badge-shape{
  position:relative;
  border:3px solid var(--white);
  border-radius:clamp(50px,10vw,110px);
  padding:clamp(18px,3.6vw,54px) clamp(20px,5vw,70px) clamp(30px,6vw,86px);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0));
}



.badge-shape::after{
  content:"";
  position:absolute;
  right:clamp(6%,10%,14%);
  bottom:clamp(-14%,-8%,-4%);
  width:56%;
  aspect-ratio:1.55;
  border:3px solid var(--white);
  border-radius:clamp(40px,8vw,90px);
  background:var(--red);
  z-index:0;
}
.badge-line{
  position:relative;z-index:1;
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  font-size:var(--fs-badge);
  line-height:.92;
  margin:0;
}
.badge-line--two{ text-align:right; margin-top:.15em }


.hero-text{
  max-width:52ch;margin:0 auto clamp(24px,3vw,40px);
  font-size:var(--fs-hero-p);
  line-height: 120%;
}
@media (max-width: 750px){
	.hero-text{ text-align: left; }
}

/* =========================================================
   Team / sound section
   ========================================================= */
.team-section{
  position:relative;
  background:var(--white);
  padding:clamp(56px,7vw,150px) 0 clamp(48px,6vw,120px);
  overflow: hidden;
}
.team-title{
  font-family:var(--font-display);
  text-transform:uppercase;
  font-weight: normal;
  font-size:var(--fs-h2);
  line-height:100%;
  margin:0 0 clamp(28px,4vw,64px);
  color:var(--ink);
}
.team-swiper{
  padding-bottom:4px;
  cursor:grab;
  overflow: visible;
}
.team-swiper:active{cursor:grabbing}
.team-swiper .swiper-slide{height:auto}

.team-card{
  background:var(--cream);
  border-radius:var(--radius-lg);
  padding: 24px;
  height:100%;
  display:flex;flex-direction:column;
}
@media (max-width: 1280px){
	.team-card{ padding: 20px; }
}
@media (max-width: 750px){
	.team-card{ padding: 1.3rem; }
}


.team-card__media{
  position:relative;
  width:clamp(280px,18.75vw,360px);
  margin:0 auto clamp(40px,2.71vw,52px);
}
.progress-ring{
  --p:0;
  aspect-ratio:1;
  border-radius:50%;
  padding:clamp(5px,0.31vw,6px);
  background:conic-gradient(var(--red) calc(var(--p)*1%), rgba(31,29,75,.12) 0);
  transition:background .1s linear;
}
.progress-ring__inner{
  background:var(--cream);
  border-radius:50%;
  padding: clamp(6px,0.42vw,8px);
  height:100%;
}
.team-card__photo{
  width:100%;height:100%;object-fit:cover;border-radius:50%;aspect-ratio:1;
  background: var(--red);
}
.play-btn{
  position:absolute;left:50%;bottom:clamp(-36px, -1.89vw, -24px);
  transform:translateX(-50%);
  width:clamp(62px,4.2vw,80px);height:clamp(62px,4.2vw,80px);
  border-radius:50%;
  background:var(--red);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease, background-color .2s ease;
  /*box-shadow:0 8px 20px rgba(242,11,54,.35);*/
}
.play-btn:hover{ background:var(--red-deep) }
.play-btn svg{width: 60%;height:60%;fill:var(--white)}
.play-btn .icon-pause{display:none}
.play-btn.is-playing .icon-play{display:none}
.play-btn.is-playing .icon-pause{display:block}

.team-card__quote{
  margin:0 0 clamp(16px,1.6vw,24px);
  font-size:var(--fs-quote);
  line-height: 120%;
  color:var(--ink);
  flex:1;
}
.team-card__name{margin:0 0 4px;font-weight:600;font-size:var(--fs-name)}
.team-card__position{margin:0;font-size:var(--fs-position);color:var(--ink);line-height:120%}

.team-nav{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin-top:clamp(28px,3vw,56px);
}
.nav-btn{
  width: 2.8rem; height:2.8rem;border-radius:50%;
  background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  transition:background-color .3s ease, transform .3s ease;
}
.nav-btn:hover{background:var(--blue);}
.nav-btn svg{width: 62.5%;height:62.5%;stroke:var(--white);fill:none}
.nav-btn.swiper-button-disabled{opacity:.4;pointer-events:none}


.team-card audio { width: 100%; margin-top: 1rem; display: none; }

/* =========================================================
   Promo banner
   ========================================================= */
.promo{
  position:relative;
  background:var(--white);
  padding:0 0 clamp(56px,6vw,110px);
  overflow: hidden;
}
.promo-card{
  position:relative;
  max-width: 700px; margin-inline:auto;
   background:url('../assets/images/golos_bg.webp') center/cover no-repeat;
  border-radius:var(--radius-lg);
  padding: 2rem;
  text-align:center;
}
@media (max-width:750px){
	.promo-card{ padding: 1.5rem 1rem; }
}

.promo-card::before{
  content:"";position:absolute;inset:0.5rem;
  border:1px solid rgba(255,255,255,1);
  border-radius:calc(var(--radius-lg) - 2px);
  pointer-events:none;
}
.promo-card p{
  position:relative;z-index:1;
  margin:0 0 clamp(18px,2.4vw,28px);
  color:var(--white);
  font-size:var(--fs-promo);
  line-height: 120%;
}
.promo-card .btn{position:relative;z-index:1}
.promo-deco{position:absolute;pointer-events:none;z-index:0; }
.promo-deco--star {left: -5.3vw;	bottom:0rem;	width:clamp(87px,8.75vw,168px)}
.promo-deco--hands{right: -9.4vw;	bottom:0.1rem; 	width:clamp(108px,12.2vw,234px); transform:rotate(5deg)}

@media (max-width:750px){
	.promo-deco--star,
	.promo-deco--hands { bottom: 4vw; }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  background:var(--cream-2);
  padding: clamp(20px,1.56vw,30px) 0;
}
.site-footer .container{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:14px 28px;
}
.footer-copy{margin:0;font-size:14px; line-height:120%;}
.footer-links{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.footer-links a{font-size:14px}

@media (max-width:750px){
	.footer-links{ flex-direction: column; align-items: start; }
}
.footer-vacancy{font-weight:600}
.footer-vacancy:hover { color: var(--blue); }

.a11y-toggle{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;
  padding: 0;
}
.a11y-toggle:hover{ color: var(--blue); }
.a11y-toggle svg{width:1.2rem; height: 1.2rem;stroke:var(--navy);fill:none;stroke-width:1.6; position: relative; top: 1px;}
.a11y-toggle svg:nth-child(2) { display: none; }
.a11y-toggle[aria-pressed="true"] svg:nth-child(1) { display: none; }
.a11y-toggle[aria-pressed="true"] svg:nth-child(2) { display: inline; }

/* =========================================================
   Accessible mode
   ========================================================= */
body.a11y-mode{
  filter:grayscale(1);
}
body.a11y-mode a,
body.a11y-mode button{outline-offset:2px}
body.a11y-mode *:focus-visible{outline:3px solid #000 !important}


/* =========================================================
   Responsive tweaks
   ========================================================= */
@media (max-width:767px){
  .badge-shape{border-radius:40px;padding:16px 18px 30px}
  .badge-shape::after{border-radius:30px}
  .promo-card{border-radius:16px}
}