/* =======================================================================
   Reset
======================================================================= */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { overflow-x: hidden; }         /* страховка от горизонтального скролла */
body {
  margin: 0;
  font-family: Kodchasan, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  color: #fff;
  background: #0663d6;
  overflow-x: clip;                   /* Safari 16+ — ещё надёжнее, чем hidden */
}
img { max-width: 100%; height: auto; display: block; }

/* =======================================================================
   Variables
======================================================================= */
:root{
  --page-edge: 64px;
  --circle-size: clamp(220px, min(calc(100svh - 336px), calc(100vw - 128px)), 560px);
}

/* =======================================================================
   Loader
======================================================================= */
.loader{
  position: fixed;
  inset: 0;
  background: #0f1f30;
  display: grid;
  place-items: center;
  z-index: 9999;
}
.loader__svg{ width: var(--circle-size); height: var(--circle-size); }

/* =======================================================================
   Hero (desktop-first)
======================================================================= */
.hero, .hero--first, .hero--second { position: relative; }

.hero{
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px;
}

/* First screen circle overlay */
.hero--first{ --circleOverlay: 1; }
.hero--first::before{
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: var(--circle-size); height: var(--circle-size);
  border-radius: 50%;
  background: radial-gradient(circle at center,
    #0b6bf0 0%,
    #0b6bf0 49%,
    rgba(11,107,240,.6) 52%,
    rgba(6,99,214,.15) 60%,
    transparent 66%);
  z-index: 0; pointer-events: none;
  opacity: var(--circleOverlay);
}

/* Second screen */
.hero--second { background: #1F2937; }
.hero--second .accent{ color:#59d36f; font-style: normal; }
.hero--second .hero__title--long{ max-width: calc(100vw - 128px); }
/* Desktop: title left, circle right */
.hero--second .hero__title{
  right: auto;
  left: var(--page-edge);
  top: calc(50% - (var(--circle-size) / 2));
  z-index: 2;
}
.hero--second .hero__title span{
  font-size: clamp(32px, calc(var(--circle-size) / 6), 96px);
  line-height: 1.05;
}

/* Content box */
.hero__content{
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: min(88vh, 720px);
  z-index: 1;
}

/* Title (desktop absolute) */
.hero__title{
  position: absolute;
  right: calc(50% + 80px);
  top: calc(50% - (var(--circle-size) / 2) + (var(--circle-size) / 8));
  margin: 0;
  line-height: 1;
  font-weight: 200;
  letter-spacing: 0;
  z-index: 2;
  text-align: left;
  max-width: calc(50vw - 80px - 64px);
}
.hero__title span{
  display: block;
  font-size: calc(var(--circle-size) / 4);
}

/* Badge */
.hero__badge{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
}
.badge__img{
  height: var(--circle-size);
  width: auto; object-fit: contain; display: block;
}

/* CTA (desktop absolute) */
.hero__cta{
  position: absolute;
  right: 64px;
  left: calc(50% + (var(--circle-size) / 2) + 48px);
  top: calc(50% + (var(--circle-size) / 2));
  transform: translateY(-100%);
  text-align: left;
  max-width: 520px;
}
.hero__subtitle{
  opacity: .9;
  font-size: calc(var(--circle-size) / 32);
  letter-spacing: .06em;
  margin: 16px 0;
  text-transform: uppercase;
  font-weight: 200;
  line-height: 1.35;
  width: min(48vw, 520px);
  display: block;
}
.hero__subtitle::before,
.hero__subtitle::after{
  content: "";
  display: block;
  height: 1px;
  background: rgba(255,255,255,.6);
  width: min(48vw, 520px);
  margin: 0 0 16px 0;
}
.hero__subtitle::after{ margin: 16px 0 0 0; }

.hero__button{
  display: inline-flex; gap: 10px; align-items: center;
  padding: 0; color: #fff; text-decoration: none;
  font-size: calc(var(--circle-size) / 32);
  letter-spacing: .06em; text-transform: uppercase;
  font-weight: 200; line-height: 1.35;
  margin-top: 16px; max-width: min(48vw, 520px);
  width: fit-content; white-space: nowrap;
}
.hero__button::after{ content: "\2197"; font-size: calc(var(--circle-size) / 40); line-height: 1; }
.hero__button:hover{ background: transparent; }

/* =======================================================================
   Responsive
======================================================================= */

/* Tablet: lift title a bit; move CTA below badge */
@media (max-width: 1100px){
  .hero__title{
    top: calc(50% - (var(--circle-size) / 2) - (var(--circle-size) / 8) - 80px);
  }
  .hero__cta{
    right: auto; left: 50%;
    top: calc(50% + (var(--circle-size) / 2) + 24px);
    transform: translate(-50%, 0);
    max-width: min(92vw, 520px);
    text-align: left;
  }
  .hero__subtitle{ width: 100%; }
  .hero__subtitle::before, .hero__subtitle::after{ width: 100%; }
}

/* Mobile: stack (title → badge → CTA), centered; remove absolutes
   ВАЖНО: убираем vw-ширины у детей, чтобы паддинги контейнера не
   раздвигали страницу >100vw (типичный баг на iOS). */
@media (max-width: 900px){
  :root{
    --page-edge: clamp(16px, 4vw, 28px);         /* компактнее поля */
    --circle-size: clamp(200px, 60vw, 420px);
  }

  .hero__content{
    display: grid;
    grid-template-areas:
      "title"
      "badge"
      "cta";
    grid-template-rows: auto auto auto;
    align-content: center;
    justify-items: center;
    gap: clamp(16px, 4vh, 32px);
    padding-inline: var(--page-edge);
    padding-block: clamp(24px, 6vh, 40px);
    height: auto;
    min-height: 100svh;
    max-width: 100%;                           /* не шире вьюпорта */
  }

  /* Заголовок: ширина от контейнера, переносы включены */
  .hero__title{
    position: static !important;
    right: auto; left: auto; top: auto;
    grid-area: title; margin: 0;
    text-align: center !important;
    max-width: min(100%, 600px) !important;    /* БЕЗ vw */
  }
  .hero__title span{
    font-size: clamp(28px, 9vw, 48px);
    line-height: 1.12;
    overflow-wrap: anywhere;                   /* спасает от длинных слов/эм-дэша */
    hyphens: auto;
  }
  .hero--second .hero__title--long{ max-width: min(100%, 600px) !important; }

  /* Бейдж и картинка — тоже без vw */
  .hero__badge{
    position: static; transform: none; grid-area: badge;
    max-width: 100%;
  }
  .badge__img{ width: min(100%, var(--circle-size)); height: auto; }

  /* CTA — ширина от контейнера, не от вьюпорта */
  .hero__cta{
    position: static; left: auto; right: auto; top: auto; transform: none;
    grid-area: cta;
    width: 100%;                 /* БЕЗ vw */
    max-width: 560px;
    text-align: center;
  }
  .hero__subtitle{
    width: 100%;
    font-size: clamp(12px, 3.7vw, 16px);
  }
  .hero__subtitle::before, .hero__subtitle::after{ width: 100%; }
  .hero__button{
    white-space: normal; word-break: break-word;
    font-size: clamp(12px, 3.7vw, 16px);
    max-width: 100%;            /* БЕЗ vw */
  }

  /* Второй экран — принудительно как первый (центр) */
  .hero.hero--second .hero__title{ left:auto !important; }
}

/* Narrow phones: reduce decoration and tighten spacing */
@media (max-width: 520px){
  :root{
    --circle-size: clamp(180px, min(calc(100svh - 200px), calc(100vw - 48px)), 480px);
  }
  .hero__subtitle::before, .hero__subtitle::after{ display: none; }
  .hero__content{ gap: clamp(12px, 5vh, 24px); }
  .hero__title span{ font-size: clamp(26px, 8.5vw, 42px); }
}