:root{
  --text:#e3e3e3; --muted:#b8c3d4; --strong:#fdfdfd;
  --panel:#232427; --panel2:#1e1f22; --border:rgba(255,255,255,.12);
  --brand:#FFD700; --brand-2:#ffea77;
}

/* === Фон как на главной (кружочки + текстура) === */
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background-color:#1e1f22;
  background-image:
    radial-gradient(1200px 700px at 20% 25%, rgba(255,255,255,.05), rgba(255,255,255,0) 60%),
    radial-gradient(1200px 800px at 80% 75%, rgba(255,255,255,.035), rgba(255,255,255,0) 65%),
    radial-gradient(circle, rgba(0,0,0,.40) 24%, rgba(0,0,0,0) 25%),
    radial-gradient(circle, rgba(255,255,255,.09) 28%, rgba(255,255,255,0) 29%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 2px, rgba(0,0,0,0) 2px 8px);
  background-size:cover, cover, 26px 26px, 26px 26px, auto;
  background-position:center, center, 0 0, 0 0, 0 0;
  background-blend-mode:normal, normal, normal, overlay, multiply;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

main{ padding-bottom:40px }

/* hero */
.about-hero{ text-align:center; padding:60px 20px 24px }

/* ЛОГО (увеличено + пульсация) */
.about-hero__logo{
  width:clamp(180px, 32vw, 360px);
  height:auto;
  margin-bottom:18px;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.6))
          drop-shadow(0 0 20px rgba(255,215,0,.45));
  animation: aboutLogoPulse 3.6s ease-in-out infinite;
  transform-origin:center;
}
@keyframes aboutLogoPulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.12); }
  100%{ transform:scale(1); }
}

.about-hero h1{ margin:0 0 8px; font-size:clamp(26px,4.6vw,40px); color:var(--strong) }
.about-hero .lead{ margin:0 auto; color:var(--muted); max-width:920px }

/* who */
.about-who{ padding:10px 16px }
.about-who .card{
  max-width:1000px; margin:0 auto; padding:22px 22px 18px; text-align:center;
  background:linear-gradient(180deg, var(--panel), var(--panel2));
  border:1px solid var(--border); border-radius:18px;
}

/* ================== stats ================== */
.about-stats{
  max-width:1000px;
  margin:18px auto;
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  padding:0 16px;
}
.stat{
  background:linear-gradient(180deg, #262729, #1f2023);
  border:1px solid var(--border);
  border-radius:16px;
  text-align:center;
  padding:24px 12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.stat__num{ color:var(--strong); font-weight:800; font-size:22px; margin-bottom:6px }
.stat__txt{ color:var(--muted); font-size:15px }

/* advantages */
.about-adv{ max-width:1100px; margin:20px auto; padding:0 16px }
.about-adv h2{ text-align:center; color:var(--strong); margin:0 0 12px }
.about-adv .grid{ display:grid; gap:12px; grid-template-columns:repeat(4,1fr) }
.about-adv .item{
  background:linear-gradient(180deg, var(--panel), var(--panel2));
  border:1px solid var(--border); border-radius:16px; padding:16px;
}
.about-adv .icon{ font-size:22px; margin-bottom:6px }
.about-adv h3{ margin:0 0 6px; color:var(--strong); font-size:18px }
.about-adv p{ margin:0; color:var(--muted) }

/* timeline */
.about-timeline{ max-width:1000px; margin:24px auto; padding:0 16px }
.about-timeline h2{ text-align:center; margin:0 0 12px; color:var(--strong) }
.timeline{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.timeline li{
  display:grid; grid-template-columns:36px 1fr; gap:12px; align-items:start;
  background:linear-gradient(180deg, #262729, #1f2023);
  border:1px solid var(--border); border-radius:14px; padding:12px;
}
.timeline .step{
  width:36px; height:36px; display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(180deg, var(--brand), var(--brand-2)); color:#111; font-weight:800;
}
.timeline h4{ margin:0 0 4px; color:var(--strong) }
.timeline p{ margin:0; color:var(--muted) }

/* certs */
.about-certs{ max-width:1100px; margin:22px auto; padding:0 16px; text-align:center }
.about-certs h2{ color:var(--strong); margin:0 0 12px }
.certs{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px }
.certs img{
  width:100%; height:120px; object-fit:contain; background:#1b1c1f; border:1px solid var(--border); border-radius:12px; padding:10px
}

/* ================== CAROUSEL (фикс высоты + маска) ================== */
.carousel{
  position:relative;
  max-width:min(1100px, calc(100vw - 32px));
  margin:24px auto;
}
.carousel__viewport{
  position:relative;
  width:100%;
  height:clamp(220px, 48vw, 520px);
  overflow:hidden;
  border-radius:16px;
  background:#1b1c1f;
}
.carousel__track{
  display:flex;
  height:100%;
  transition:transform .5s ease;
  will-change:transform;
  gap:0; /* исключаем промежутки */
}
.slide, .carousel figure{ margin:0; } /* убираем дефолтные маргины figure */
.slide{ flex:0 0 100%; height:100%; position:relative; }
.slide img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  border-radius:16px;
}
.carousel__btn{
  position:absolute; top:50%;
  transform:translateY(-50%);
  width:40px; height:40px;
  border:none; cursor:pointer;
  border-radius:50%;
  background:rgba(0,0,0,.45);
  color:#fff; font-size:22px;
  display:grid; place-items:center;
  z-index:2;
}
.carousel__btn:hover{ background:rgba(0,0,0,.65); }
.carousel__btn.prev{ left:10px; }
.carousel__btn.next{ right:10px; }
.carousel__dots{
  display:flex; justify-content:center; gap:8px;
  margin-top:10px;
}
.carousel__dots button{
  width:10px; height:10px;
  border:none; border-radius:50%;
  background:#777; cursor:pointer;
}
.carousel__dots button[aria-selected="true"]{ background:var(--brand); }

/* ================== cta ================== */
.about-cta{ padding:22px 16px 38px }
.about-cta .box{
  max-width:1000px; margin:0 auto; text-align:center;
  background:linear-gradient(180deg, #262729, #1e1f22);
  border:1px solid var(--border); border-radius:20px;
  padding:28px;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.about-cta h2{ margin:0 0 12px; color:var(--strong); font-size:22px }
.about-cta p{ margin:0 0 20px; color:var(--muted) }
.about-cta .btn{
  padding:12px 28px; border-radius:14px;
  text-decoration:none; font-weight:700;
  display:inline-block;
  background:linear-gradient(180deg, var(--brand), var(--brand-2));
  color:#111; font-size:16px;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  transition:.25s;
}
.about-cta .btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.55);
}

/* адаптив */
@media (max-width:980px){
  .about-adv .grid{ grid-template-columns:repeat(2,1fr) }
  .certs{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:560px){
  .about-hero{ padding-top:46px }
  .about-hero__logo{ width:clamp(140px, 50vw, 280px); }
  .about-adv .grid{ grid-template-columns:1fr }
  .certs{ grid-template-columns:1fr }
  .carousel__viewport{ height:clamp(200px, 58vw, 380px); }
}