/* =========================
   Base / Variables
========================= */
:root{
  --bg: #fff;
  --text-main: #27393a;
  --news: #ffd400;

  /* desktop hub */
  --circleSize: clamp(190px, 20vw, 260px);
  --offset: clamp(200px, 21vw, 280px);

  /* mobile sizing */
  --circleMobileMax: 260px;
  --circleMobileMax420: 210px;
}

*{ box-sizing: border-box; }

html, body{
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text-main);
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

a{ color: inherit; }
a:hover{ color: #1f2d2f; }

h1, h2, h3{
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* =========================
   Layout
========================= */
.home-hero{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

/* HUB */
.hub{
  position: relative;
  width: min(980px, 92vw);
  height: min(720px, 86vh);
}

/* Центр */
.hub__center{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  pointer-events: none;
}

.hub__logo{
  width: clamp(180px, 22vw, 320px);
  height: auto;
  display: block;
}

/* Если используешь текст вместо картинки */
.hub__name{
  text-align: center;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: 0.02em;
  font-size: clamp(36px, 4.6vw, 64px);
}

/* NEWS */
.news-badge{
  position: absolute;
  top: 14%;
  right: 18%;
  z-index: 10;

  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;

  color: var(--news);
  border: 2px solid var(--news);
  text-decoration: none;

  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;

  animation: newsBlink 1.1s infinite;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
  transform-origin: center;
}

.news-badge:hover,
.news-badge:focus-visible{
  transform: scale(1.10);
  outline: none;
  background: rgba(255, 212, 0, 0.12);
  box-shadow: 0 0 0 4px rgba(255, 212, 0, 0.18);
}

@keyframes newsBlink{
  0%, 100%{ opacity: 1; }
  50%{ opacity: 0.25; }
}

/* =========================
   Circles (desktop / tablet)
========================= */
.circle{
  position: absolute;
  width: var(--circleSize);
  height: var(--circleSize);
  border-radius: 50%;
  overflow: hidden;
  text-decoration: none;
  outline: none;
  box-shadow: none;
  transition: transform 180ms ease;
}

/* белая "дымка" снизу + слева */
.circle::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 30% 75%,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.85) 28%,
      rgba(255,255,255,0.55) 45%,
      rgba(255,255,255,0.0) 65%
    );
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}

.circle__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* подпись внутри круга */
.circle__label{
  position: absolute;
  left: 50%;
  bottom: 22%;
  transform: translateX(-50%) translateY(10px);

  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;

  font-weight: 800;
  font-size: clamp(8px, 0.95vw, 14px);
  letter-spacing: 0.03em;
  text-transform: uppercase;

  color: var(--text-main);
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
}

/* Показ при наведении/фокусе */
.circle:hover::after,
.circle:focus-visible::after{
  opacity: 1;
}

.circle:hover .circle__label,
.circle:focus-visible .circle__label{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Позиционирование крестом (desktop) */
.circle--top{
  left: 50%;
  top: calc(50% - var(--offset));
  transform: translate(-50%, -50%);
}
.circle--bottom{
  left: 50%;
  top: calc(50% + var(--offset));
  transform: translate(-50%, -50%);
}
.circle--left{
  top: 50%;
  left: calc(50% - var(--offset));
  transform: translate(-50%, -50%);
}
.circle--right{
  top: 50%;
  left: calc(50% + var(--offset));
  transform: translate(-50%, -50%);
}

/* hover scale не ломает translate */
.circle--top:hover, .circle--top:focus-visible{ transform: translate(-50%, -50%) scale(1.03); }
.circle--bottom:hover, .circle--bottom:focus-visible{ transform: translate(-50%, -50%) scale(1.03); }
.circle--left:hover, .circle--left:focus-visible{ transform: translate(-50%, -50%) scale(1.03); }
.circle--right:hover, .circle--right:focus-visible{ transform: translate(-50%, -50%) scale(1.03); }

/* =========================
   Responsive (tablet)
========================= */
@media (max-width: 900px){
  :root{
    --circleSize: clamp(170px, 26vw, 230px);
    --offset: clamp(160px, 24vw, 220px);
  }
}

/* =========================
   Responsive (mobile)
   Без !important: делаем отдельную моб. раскладку,
   и явно переопределяем свойства, которые были на desktop.
========================= */
@media (max-width: 768px){

  /* убираем вертикальное центрирование, чтобы не было пустот */
  .home-hero{
    place-items: start center;
    padding: 16px;
  }

  /* HUB становится сеткой */
  .hub{
    width: min(520px, 92vw);
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-items: start;

    /* место под логотип в углу */
    padding-top: 86px;
  }

  /* ЛОГО: в верхний левый угол */
  .hub__center{
    position: absolute;
    left: 12px;
    top: 12px;
    transform: none;
    display: block;
    margin: 0;
  }

  .hub__logo{
    width: 140px;
    max-width: 60vw;
  }

  /* NEWS: в верхний правый угол */
  .news-badge{
    position: absolute;
    top: 12px;
    right: 12px;
    margin: 0;
  }

  /* Отключаем крест (координаты) и абсолют у кружков */
  .circle{
    position: relative;
    left: auto;
    top: auto;
    right: auto;
    bottom: auto;
    transform: none;

    width: 100%;
    max-width: var(--circleMobileMax);
    height: auto;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
  }

  /* Чтобы hover-scale не вмешивался в мобилке */
  .circle--top:hover,
  .circle--bottom:hover,
  .circle--left:hover,
  .circle--right:hover,
  .circle--top:focus-visible,
  .circle--bottom:focus-visible,
  .circle--left:focus-visible,
  .circle--right:focus-visible{
    transform: scale(1.02);
  }

  /* На мобилке hover нет — показываем всегда */
  .circle::after{
    opacity: 1;
  }

  .circle__label{
    opacity: 1;
    transform: translateX(-50%);
    bottom: 14%;
    font-size: clamp(9px, 2.8vw, 13px);
  }
}

/* Очень узкие телефоны — 1 колонка + кружки меньше */
@media (max-width: 420px){
  .hub{
    grid-template-columns: 1fr;
  }

  .circle{
    max-width: var(--circleMobileMax420);
  }
}