/* базовые переменные — поправь под свою палитру */
:root{
  --bg: #0e2a4a;                /* фон хиро/страницы если нужен контраст */
  --text: #0e1b2b;
  --muted: #5b728f;
  --brand: #2f74ff;             /* акцент */
  --card-bg: #ffffff;
  --card-shadow: 0 8px 24px rgba(15, 23, 42, .08);
  --radius: 16px;
}

.advantages{
  padding: 64px 0 24px;
}
.advantages__head{
  max-width: 960px;
  margin: 0 auto 32px;
  text-align: center;
  padding: 0 16px;
}
.advantages__title{
  font-size: 32px;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 8px;
}
.advantages__subtitle{
  color: var(--muted);
  margin: 0;
}

/* grid на flex */
.advantages__list{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}
.advantages__item{
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  border-radius: var(--radius);
  padding: 22px 20px;
  flex: 1 1 calc(100% - 20px);  /* mobile: 1 в ряд */
  min-width: 260px;
  max-width: 100%;
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;
  position: relative;
  overflow: hidden;
}
.advantages__item:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 40px rgba(15,23,42,.12);
}
.advantages__icon-wrap{
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(47,116,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  transition: transform .25s ease;
}
.advantages__item:hover .advantages__icon-wrap{
  transform: translateY(-2px);
}
.advantages__icon{
  width: 28px;
  height: 28px;
  display: block;
}

.advantages__item-title{
  font-size: 18px;
  margin: 0 0 6px;
  color: var(--text);
}
.advantages__text{
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
}

/* responsive колонки (flex-basis) */
@media (min-width: 600px){
  .advantages__item{ flex: 1 1 calc(50% - 20px); } /* 2 в ряд */
}
@media (min-width: 1024px){
  .advantages__item{ flex: 1 1 calc(33.333% - 20px); } /* 3 в ряд */
}

/* метрики */
.metrics{
  margin: 28px auto 0;
  padding: 12px 0;
  background: linear-gradient(90deg, rgba(47,116,255,.08), rgba(47,116,255,0));
}
.metrics__list{
  list-style: none;
  margin: 0 auto;
  padding: 0 16px;
  max-width: 1200px;

  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  justify-content: space-between;
}
.metrics__item{
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.metrics__value{
  font-size: 24px;
  font-weight: 700;
  color: var(--brand);
  line-height: 1;
}
.metrics__label{
  color: var(--muted);
  font-size: 14px;
}

/* появление при скролле */
.js-reveal{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s ease, transform .5s ease;
}
.js-reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}


/* kub */
#cubeCanvas{transition:all 180ms linear;transform:scale(0.8);width:100%;height:clamp(320px, 40vw, 570px);display:block;background:transparent;cursor:grab;}
#cubeCanvas:hover{transform:scale(1);}
#cubeCanvas:active{cursor:grabbing;transform:scale(1);}
.box-content-right{display:flex;justify-content:center;align-items:center;position:relative;}
.box-content-right::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 400px at 50% 40%, rgba(106,0,255,0.25), transparent 70%);z-index:-1;}
@media screen and (max-width: 768px){
#cubeCanvas{transform:scale(1);}
.box-content-left_button{margin:2rem auto;}
}
@media (max-width: 575px){
.box-content-outer-flex{gap:1rem;}
#bg-video{max-width:330%;pointer-events:none;}
#cubeCanvas{transform:scale(0.8);}
}
@media (max-width: 390px){
#bg-video{max-width:426%;pointer-events:none;}
.box-content-left_h1{font-size:1.8rem;}
.box-content-left_h1_p{font-size:1.1rem;}
.box-content-left_p{font-size:1rem;}
}
/* end kub */
