:root{
  --txt-main:#e9e9e9;
  --txt-dim: rgba(255,255,255,.88);
  --accent:#7c92a0;
}

/* Градиентный заголовок */
.gradient-text{
  text-align:center;
  background: linear-gradient(to right, #e9e9e9 0%, #7c92a0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
          background-clip: text;
          color: transparent;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: .02em;
  margin: 0 0 10px 0;
}

/* Обёртка секции — визуально на фоне сайта */
.certificates-container{
  max-width:1200px;
  margin:0 auto;
  padding:8px 12px 0;
  text-align:center;
  background:transparent;
}

/* Годы: одна строка, минимализм */
.years-container{
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  color: var(--txt-dim);
  font-weight:700;
  margin:8px 0 18px;
  padding-bottom:6px;
}
.years-container::-webkit-scrollbar{ height:6px; }
.years-container::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:10px; }

.year{
  display:inline-block;
  padding:6px 4px;
  margin:0 2px;
  color: rgba(233,233,233,.8);
  cursor:pointer;
  position:relative;
  transition: color .2s ease;
}
.year:hover{ color:#e9e9e9; }
.year.active{ color:#e9e9e9; }
.year.active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px;
  height:2px; border-radius:2px;
  background: var(--accent);
}

/* Галерея */
.certificates-gallery{
  display:flex; flex-wrap:wrap;
  gap:15px; justify-content:center;
}
.certificate{ display:none; width:auto; text-align:center; }
.certificate img{
  width:250px; height:auto;
  border-radius:10px;
  border:1px solid rgba(124,146,160,.28);
  background:#0e0e0e;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  transition: transform .25s ease;
  cursor:pointer;
}
.certificate img:hover{ transform: scale(1.035); }

/* Модалка */
.modal{
  display:none; position:fixed; inset:0; z-index:1000;
  background-color: rgba(0,0,0,0.85);
  justify-content:center; align-items:center;
  padding:24px;
}
.modal-content{
  max-width: 92vw; max-height: 90vh; object-fit: contain;
  border-radius:12px; border:1px solid rgba(124,146,160,.35);
  box-shadow: 0 28px 60px rgba(0,0,0,.45);
  background:#0e0e0e;
}
.close{
  position:absolute; top:16px; right:20px;
  font-size:30px; color:#fff; cursor:pointer;
  user-select:none;
}

@media (max-width:768px){
  .certificate img{ width: 200px; }
}