/* ==========================================================
   RETACH HOME — BLOK1
   Moved from index.html preserving original cascade order.
   ========================================================== */

/* === blok1-ring-fix-styles START === */
/* === BLOK1 FIX: два круга рядом + корректная маска/слои === */
.hero-visual{
  position: relative;
  display: grid;
  grid-auto-flow: column;            /* ← рядом */
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 28px);
  min-height: clamp(300px, 32vw, 380px); /* ← добавь это */
}

.gold-ring{
  --ring-size: 300px;
  --ring-width: 14px;

  position: relative;
  width: var(--ring-size);
  height: var(--ring-size);
  border-radius: 50%;

  /* Кольцо = градиент в бордере (супер-гладкие края) + золотая заливка внутри */
  border: var(--ring-width) solid transparent;
  background:
    radial-gradient(140% 140% at 50% 12%,
      #F6E27A 0%, #D4AF37 42%, #8F6B1F 100%) padding-box,   /* внутренняя заливка */
    conic-gradient(from -30deg,
      #8F6B1F, #D4AF37, #F6E27A, #D4AF37, #8F6B1F) border-box; /* ободок */
  box-shadow: 0 20px 60px rgba(0,0,0,.30);
  overflow: visible; /* верх картинки может выходить за край */
}


/* картинка всегда целиком внутри круга */
/* стало: не обрезаем верх и вообще не кропим */
.gold-ring img{
  position: absolute;
  left: 50%;
  top: 50%;

  /* базовый размер = внутренний диаметр кольца */
  width: calc(var(--ring-size) - 2*var(--ring-width));
  height: calc(var(--ring-size) - 2*var(--ring-width));

  /* увеличиваем изображение, но поднимаем его так,
     чтобы НИЗ оставался на месте и совпадал с окружностью */
  transform:
    translate(-50%, -50%)
    translateY(calc((1 - var(--img-scale)) * (var(--ring-size) - 2*var(--ring-width)) / 2))
    scale(var(--img-scale));

  object-fit: contain;
  z-index: 1;

  /* скругляем ТОЛЬКО нижние углы радиусом внутреннего круга,
     скорректированным на масштаб, чтобы дуга совпала «встык» */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius:  calc(((var(--ring-size) / 2 - var(--ring-width)) / var(--img-scale)) * 1.25);
border-bottom-right-radius: calc(((var(--ring-size) / 2 - var(--ring-width)) / var(--img-scale)) * 1.25);

}


/* золото рисуем СВЕРХУ как «пончик», который не перекроет центр */


/* на всякий случай: глушим старую абсолютную раскладку «малого круга» */
.ring-small{
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
}

/* (опционально) на очень узких экранах можно поставить один под другим
@media (max-width: 900px){ .hero-visual{ grid-auto-flow: row; } }
*/
/* === blok1-ring-fix-styles END === */

/* === blok1-diagonal-bg START === */
/* Общий фон первого блока: светлая пастель + тёмный клин 1/3 по диагонали */
  .hero-blok1{
    /* положение диагонали: сверху/снизу (проценты по ширине) */
    --split-top: 36%;     /* точка на верхней кромке */
    --split-bottom: 30%;  /* точка на нижней кромке */
    /* цвета */

    --gold-glow: rgba(231,198,117,.18);
    --light-1: color-mix(in oklab, var(--brand-1, #7FB8FF) 22%, #fff 78%);
    --light-2: color-mix(in oklab, var(--brand-2, #AFA4FF) 18%, #fff 82%);
    --light-3: color-mix(in oklab, var(--brand-3, #FF97AA) 14%, #fff 86%);

    position: relative;
    isolation: isolate;               /* свой стек слоёв */
    background: linear-gradient(135deg, var(--light-1), var(--light-2), var(--light-3));
  }

  /* Тёмный клин слева (1/3), с лёгким золотым свечением */
  .hero-blok1::before{
    content:"";
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(80% 60% at 22% 18%, var(--gold-glow) 0%, rgba(231,198,117,0) 60%),
      linear-gradient(180deg, #000, #0b0b0b 65%, #000);
    /* диагональный клин: слева 0 → вправо уходит под углом */
    clip-path: polygon(0 0, var(--split-top) 0, var(--split-bottom) 100%, 0 100%);
  }

  /* Контент над фоном */
  .hero-blok1 .hero-container{ position:relative; z-index:1; }

  .hero-visual.hero-visual--row{
  display: grid;
  grid-auto-flow: column;
  align-items: end;
  justify-content: center;
  gap: clamp(16px, 3vw, 28px);
}

.hero-item{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;                /* расстояние между кругом и подписью */
}

.hero-label{
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: .2px;
  color: #fff;
  background: rgba(0,0,0,.45);   /* читается и на светлом, и на тёмном фоне */
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.15);
}
/* === blok1-diagonal-bg END === */

/* === blok1-anim START === */
/* Двигаем ВЕСЬ круг (кольцо+картинку) вместе */
.hero-item .gold-ring{
  transition: transform .16s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
  transform-origin: 50% 12%;
  cursor: pointer;
}

/* Мелкая «вибрация будильника» для бизнеса: короткий импульс, потом пауза */
.hero-item--biz .gold-ring{
  animation: micro-buzz 4.8s ease-in-out infinite;
}

/* Наведение: ТОЛЬКО сдвиг по оси X + лёгкое увеличение */
.hero-item--biz:hover .gold-ring,
.hero-item--biz:focus-within .gold-ring{
  animation: none;
  transform: translateX(8px) scale(1.02);
}
.hero-item--mkt:hover .gold-ring,
.hero-item--mkt:focus-within .gold-ring{
  transform: translateX(-8px) scale(1.02);
}

/* Кадры «микро-вибрации» — очень маленькие углы, быстрое затухание */
@keyframes micro-buzz{
  0%, 7%, 100% { transform: rotate(0deg); }
  1% { transform: rotate(0.8deg); }
  2% { transform: rotate(-0.8deg); }
  3% { transform: rotate(0.6deg); }
  4% { transform: rotate(-0.6deg); }
  5% { transform: rotate(0.35deg); }
  6% { transform: rotate(-0.35deg); }
}

/* Уважение настроек пользователя */
@media (prefers-reduced-motion: reduce){
  .hero-item--biz .gold-ring{ animation: none !important; }
}
/* === blok1-anim END === */

/* === blok1-swap START === */
/* слева — слот для переезда круга */
.hero-text .hero-swap-slot{ display:none; place-items:start; }
.hero-blok1.is-selected .hero-text > *:not(.hero-swap-slot){
  opacity:0; transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease;
  height:0; margin:0; pointer-events:none;
}
.hero-blok1.is-selected .hero-text .hero-swap-slot{
  display:grid; min-height: 240px;
}
/* ставим круг дальше влево */
.hero-text .hero-swap-slot > .gold-ring{
  margin-left: clamp(-36px, -6vw, -12px); /* смещение влево */
  margin-right: 0;
  justify-self: start;
}

/* правый блок: текст появляется ТОЛЬКО по команде show-alt */
.hero-alttext{
  display:none; opacity:0; transform: translateY(8px);
  transition: opacity .34s cubic-bezier(.2,.7,.2,1), transform .34s cubic-bezier(.2,.7,.2,1);
  grid-column: 2; grid-row: 1; align-self: center;
}
.hero-blok1.show-alt .hero-alttext{ display:block; }
.hero-blok1.show-alt .hero-alttext.is-in{ opacity:1; transform:none; }

/* прячем оба круга при выборе */
.hero-blok1.is-selected .hero-visual .hero-item{
  opacity:0; visibility:hidden; pointer-events:none; transition: opacity .2s ease;
}

/* отключаем «вибрацию» у бизнеса в режиме выбора */
.hero-blok1.is-selected .hero-item--biz .gold-ring{ animation:none !important; }
.hero-blok1.is-selected .hero-item .gold-ring{
  transition: transform 1.10s cubic-bezier(.22,.61,.36,1); /* ещё плавнее */
}


/* кнопка «назад» */
.hero-back{
  position:absolute; z-index:5; top:12px; left:12px;
  width:40px; height:40px; border-radius:999px;
  display:none; align-items:center; justify-content:center;
  background: rgba(0,0,0,.45); color:#fff; border:1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px); cursor:pointer;
}
.hero-back::before{
  content:""; width:10px; height:10px;
  border-left:2px solid currentColor; border-bottom:2px solid currentColor;
  transform: rotate(45deg); margin-left:2px;
}
.hero-back:active{ transform: translateY(1px); }

/* показываем стрелку только в режиме выбора */
.hero-blok1.is-selected .hero-back{ display:flex; }
/* Текст справа — чёрный */
.hero-alttext{ color:#1B1F23; }
.hero-alttext h2,
.hero-alttext p,
.hero-alttext li{ color:#1B1F23; }

/* Кнопки: первичная — как была (белая), «ghost» — чёрный текст */
.hero-alttext .btn-primary{ color:#fff; }
.hero-alttext .btn-ghost{ color:#1B1F23; }
.hero-blok1 .hero-container,
.hero-blok1 .hero-text .hero-swap-slot { overflow: visible !important; }
/* === blok1-swap END === */


/* === blok1-mobile START === */
@media (max-width: 900px){

  /* ========= Вертикальный фон: верх 1/3 тёмный (с наклоном), низ 2/3 светлый ========= */
  .hero-blok1{
    --light-1: #EEF2FF;
    --light-2: #F3EFFF;
    --light-3: #FFEFF2;
    --gold-glow: rgba(231,198,117,.18);
    --v-split: 34%;   /* высота тёмной части слева */
    --v-tilt:  6%;    /* насколько ниже граница справа (наклон) */

    position: relative;
    isolation: isolate;
    background: linear-gradient(180deg, var(--light-1), var(--light-2), var(--light-3));
  }
  .hero-blok1::before{
    content:"";
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background:
      radial-gradient(80% 60% at 50% 20%, var(--gold-glow) 0%, rgba(231,198,117,0) 60%),
      linear-gradient(180deg, #000, #0b0b0b 65%, #000);
    /* Наклонная граница: слева — var(--v-split), справа — var(--v-split)+var(--v-tilt) */
    clip-path: polygon(
      0 0, 100% 0,
      100% calc(var(--v-split) + var(--v-tilt)),
      0   var(--v-split)
    );
  }

  /* ========= Порядок блоков: СНАЧАЛА текст, ниже — картинки, затем текст ниши ========= */
  .hero-blok1 .hero-container{
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    row-gap: 14px;
    position: relative;
    z-index: 1;
    overflow: visible !important;   /* не режем контент на мобиле */
  }
  .hero-blok1 .hero-text   { order: 1; }
  .hero-blok1 .hero-visual { order: 2; }
  .hero-blok1 .hero-alttext{
    order: 3 !important;            /* ВСЕГДА под картинкой */
    grid-column: 1 / -1 !important; /* переопределяем десктоп */
    grid-row: auto !important;
    margin-top: 8px;
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .34s cubic-bezier(.2,.7,.2,1), transform .34s cubic-bezier(.2,.7,.2,1);
    color:#111;
  }
  .hero-blok1.show-alt .hero-alttext{ display:block; }
  .hero-blok1.show-alt .hero-alttext.is-in{ opacity:1; transform:none; }

  /* ========= Слот для круга (после клика круг переезжает ВВЕРХ, в текст) ========= */
  .hero-blok1 .hero-text .hero-swap-slot{
    display: none;
    place-items: center;
    min-height: 220px;              /* стаб. место под круг; НЕ влияет на десктоп */
  }
  .hero-blok1.is-selected .hero-text > *:not(.hero-swap-slot){
    opacity:0; transform: translateY(-6px);
    height:0; margin:0; pointer-events:none;
    transition: opacity .22s ease, transform .22s ease;
  }
  .hero-blok1.is-selected .hero-text .hero-swap-slot{
    display: grid;
  }
  .hero-blok1 .hero-text .hero-swap-slot > .gold-ring{
    margin: 0 auto; justify-self: center;
  }

  /* ========= Колонка с кругами ========= */
  .hero-visual.hero-visual--row{
    display: grid;
    grid-auto-flow: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 0;
  }
  .hero-item{ display:flex; flex-direction:column; align-items:center; gap:8px; }
  .hero-label{
    padding:6px 10px; border-radius:10px; font-size:13px; font-weight:600;
    color:#fff; background:rgba(0,0,0,.45); backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.15);
  }

  /* ========= Одинаковый размер колец на мобиле ========= */
  .hero-visual .gold-ring{
    --ring-size: 240px !important;
    --ring-width: 12px !important;
    --img-scale: 1.28 !important;
  }


  /* ========= Жесты на мобиле (лёгкий сдвиг при тапе) ========= */
  .hero-item--biz:active .gold-ring,
  .hero-item--biz:focus-within .gold-ring{ transform: translateY(-8px) scale(1.02); }
  .hero-item--mkt:active .gold-ring,
  .hero-item--mkt:focus-within .gold-ring{ transform: translateY( 8px) scale(1.02); }

  /* ========= Кнопка «назад» компактнее на мобиле ========= */
  .hero-back{ top:8px; left:8px; width:36px; height:36px; }
}
/* === blok1-mobile END === */

/* === blok1-pointer-over START === */
/* Указатель рисуем ПРЯМО ВНУТРИ .hero-item (они уже position:relative) */
  .hero-pointer{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 120px;
    height: 120px;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.9);
    filter: drop-shadow(0 6px 18px rgba(0,0,0,.25));
    transition: opacity .28s ease, transform .28s ease;
  }

  .hero-pointer lottie-player{
    width: 100%;
    height: 100%;
  }

  /* Лёгкий наклон под бизнес */
  .hero-pointer--biz{
    transform: translate(-50%, -50%) rotate(-8deg) scale(.9);
  }
  .hero-pointer--biz.is-in{
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-8deg) scale(1);
  }

  /* И под маркетолога */
  .hero-pointer--mkt{
    transform: translate(-50%, -50%) rotate(8deg) scale(.9);
  }
  .hero-pointer--mkt.is-in{
    opacity: 1;
    transform: translate(-50%, -50%) rotate(8deg) scale(1);
  }

  @media (max-width: 900px){
    .hero-pointer{
      width: 104px;
      height: 104px;
    }
  }

  @media (prefers-reduced-motion: reduce){
    .hero-pointer{ display:none; }
  }
/* === blok1-pointer-over END === */