/* === Century Gothic (self-host) === */
@font-face{
  font-family: "CenturyGothic";
  src:
    url("/fonts/CenturyGothic.woff2") format("woff2"),
    url("/fonts/CenturyGothic.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "CenturyGothic";
  src:
    url("/fonts/CenturyGothic-Bold.woff2") format("woff2"),
    url("/fonts/CenturyGothic-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* не даём браузеру «дорисовывать» жир/курсив */
html,body{
  font-synthesis-weight: none;
  font-synthesis-style: none;
}


/* ===================== BASE ===================== */
:root { --blue:#00aaff; --txt:#ffffff; }
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:'Manrope',sans-serif;
  background:#0b1224;
  color:var(--txt);
  overflow-x:hidden;
}
.container{ width:88%; max-width:1300px; margin:0 auto; }

/* ===================== HEADER ===================== */
.header{ position:absolute; top:0; width:100%; z-index:10; padding:24px 0; }
.header__wrap{ display:flex; justify-content:space-between; align-items:center; gap:24px; }
.header__logo{ text-align:center; }
.logo-title{ font-size:24px; font-weight:700; letter-spacing:.5px; }
.logo-line{ width:82px; height:2px; background:var(--blue); margin:6px auto; }
.logo-subtitle{ font-size:13px; opacity:.75; }
.header__nav a{ margin:0 18px; color:#fff; text-decoration:none; font-weight:500; transition:.25s; }
.header__nav a:hover{ color:var(--blue); }
.header__contacts{ display:flex; align-items:center; gap:14px; }
.header__phone{ display:flex; flex-direction:column; }
.header__phone a{ color:#fff; text-decoration:none; font-weight:700; }
.header__phone span{ font-size:12px; opacity:.7; }
.btn-header{
  background:var(--blue); color:#fff; text-decoration:none; font-weight:700;
  border-radius:8px; padding:10px 18px; transition:.25s; margin-left: 32px;
}
.btn-header:hover{ filter:brightness(.95); }

/* ===================== HERO ===================== */
.hero{
  position:relative; min-height:100vh;
  background:url('img/newton_back_1.jpg') center/cover no-repeat;
  overflow:hidden;
}

/* СЕТКА: текст + иллюстрация. Так комп можно “прибить” к заголовку. */
.hero__wrap{
  position:relative; z-index:3;
  display:grid;
  grid-template-columns: 760px 1fr;  /* фикс. колонка под текст + свободная под комп */
  align-items:center;
  column-gap:40px;
  padding-top:170px;
}

/* ---- ШИРОКИЙ ЗАГОЛОВОК (колонка не сжимается) ---- */
.hero__content{
  width:760px;                 /* фиксируем ширину — заголовок широкий */
}
.hero__content h1{
  font-size:56px; line-height:1.12; margin:0 0 22px;
  width:720px;                 /* длина строки как на Тильде */
  max-width:none;
}
.hero__content p{
  font-size:18px; color:#cbd3e2; max-width:520px; margin:0 0 36px;
}
.btn-main{
  display:inline-block; background:var(--blue); color:#fff; text-decoration:none; font-weight:700;
  border-radius:10px; padding:16px 32px;
  box-shadow:0 6px 0 #052b45, 0 20px 40px rgba(0,170,255,.15);
  transition:.25s;
}
.btn-main:hover{ transform:translateY(-2px); }

/* ===================== GALAXY (звёзды + туман) ===================== */
.galaxy{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.stars{
  position:absolute; inset:0;
  background:url('img/stars.png') repeat; background-size:512px 512px;
  opacity:.55; animation:moveStars 120s linear infinite;
}
.nebula{
  position:absolute; inset:0;
  background:
    radial-gradient(800px 320px at 50% 86%, rgba(0,136,255,.18), transparent 70%),
    radial-gradient(600px 600px at 28% 34%, rgba(70,40,130,.32), transparent 70%),
    radial-gradient(600px 600px at 72% 58%, rgba(30,90,180,.26), transparent 70%);
  mix-blend-mode:screen; opacity:.35; animation:moveNebula 200s ease-in-out infinite;
}
@keyframes moveStars{ from{background-position:0 0} to{background-position:0 -2000px} }
@keyframes moveNebula{ 0%{transform:scale(1) translate(0,0)} 50%{transform:scale(1.06) translate(-2%,-3%)} 100%{transform:scale(1) translate(0,0)} }

/* ===================== ILLUSTRATION ===================== */
.hero__image{
  position:relative;
  justify-self:start;      /* прижать блок иллюстрации к началу сетки */
  overflow:visible;
  /* ключ: двигаем ВЕСЬ блок влево к заголовку адаптивно */
  margin-left: calc(-18vw);
  top: 36px;
}
.glow{
  position:absolute; bottom:-90px; left: calc(-18vw + 120px);
  width:780px; height:300px;
  background:radial-gradient(circle at center, rgba(0,136,255,.35), transparent 70%);
  filter:blur(50px); z-index:1;
}

/* Комп просто чуть вниз (без translateX, чтобы не “уплывал”) */
.main-illustration{
  position:relative; z-index:2; max-width:1000px;
  transform: translateY(140px);
}

/* Бабблы (привязали к новому отступу) */
.bubble{ position:absolute; z-index:4; filter:drop-shadow(0 8px 18px rgba(0,0,0,.25)); }
.bubble-1{ top:-35px; right: calc(309px + 6vw); width:20%; animation:float1 6s ease-in-out infinite; }
.bubble-2{ top:135px; right: calc(414px + 6vw); width:20%; animation:float2 7s ease-in-out infinite; }

/* Плюсы — левее */
.plus{ position:absolute; z-index:4; opacity:.95; transition:transform .35s ease; }
.plus:hover{ animation:wiggle .6s ease-in-out both; }
.plus-1{ top:72px;  right: calc(340px + 6vw); max-width:56px; }
.plus-2{ top:58px; left:35%;  max-width:42px; }
.plus-3{ top:-51px; right: calc(190px + 6vw); max-width:54px; }
.plus-4{ top:209px; left:25%;  max-width:54px; }

@keyframes float1{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes float2{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(10px)} }
@keyframes wiggle{
  0%{transform:translate3d(0,0,0) rotate(0)}
  30%{transform:translate3d(-2px,-3px,0) rotate(-6deg)}
  60%{transform:translate3d(3px,2px,0) rotate(5deg)}
  100%{transform:translate3d(0,0,0) rotate(0)}
}

/* ===================== REVEAL (on-load) ===================== */
.reveal{ opacity:0; transform:translateY(14px) scale(.98); animation:reveal .7s cubic-bezier(.22,.8,.24,1) forwards; animation-delay:var(--d,0ms); }
@keyframes reveal{ to{opacity:1; transform:none} }
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;animation:none} .stars,.nebula{animation:none} }

/* ===================== RESPONSIVE ===================== */
/* Планшет — чуть меньше отступ влево */
@media (max-width:1200px){
  .hero__wrap{ grid-template-columns:700px 1fr; }
  .hero__content{ width:700px; }
  .hero__content h1{ width:660px; }
  .hero__image{ margin-left: calc(-10vw); }
  .glow{ left: calc(-10vw + 100px); }
}

/* Мобильная — как на Тильде */
@media (max-width:900px){
  .hero__wrap{
    display:flex; flex-direction:column; align-items:center;
    gap:28px; padding-top:138px; text-align:center;
  }
  .hero__content{ width:auto; }
  .hero__content h1{ width:auto; font-size:42px; line-height:1.22; margin:0 0 16px; }
  .hero__content p{ margin:0 0 24px; }
  .btn-main{ padding:14px 26px; }

  .hero__image{ margin-left:0; }
  .main-illustration{ max-width:360px; transform:translateY(6px); }
  .glow{ left:50%; transform:translateX(-50%); width:360px; height:180px; bottom:-56px; }

  /* мобильные бабблы/плюсы — как на твоём скрине Тильды */
  .bubble-1{ top:-6px; left:54%; right:auto; max-width:150px; }
  .bubble-2{ top:68px; left:24%; right:auto; max-width:158px; }
  .plus-1{ top:-14px; left:68%; max-width:26px; }
  .plus-2{ top:18px;  left:40%; max-width:22px; }
  .plus-3{ top:148px; left:73%; max-width:28px; }
  .plus-4{ top:208px; left:50%; max-width:20px; }
}

/* Очень узкие */
@media (max-width:420px){
  .logo-line{ width:64px; }
  .hero__content h1{ font-size:38px; }
  .main-illustration{ max-width:330px; }
}

/* ===== MOBILE PATCH — чистая шапка, крупный заголовок, комп внизу ===== */
@media (max-width:900px){

  /* Шапка: скрываем навигацию, оставляем телефон + иконки */
  .header__nav{ display:none !important; }

  .header__wrap{
    padding-inline: 8px;
    gap: 12px;
  }

  /* Контакты: телефон + 2 круглых месcенджера */
  .header__contacts{
    gap:10px;
  }

  /* телефон компактно, двумя строками */
  .header__phone a{
    font-size:14px;
    line-height:1.05;
  }
  .header__phone span{
    font-size:10px;
    opacity:.6;
  }

  /* любые ссылки-иконки в .header__contacts делаем круглыми кнопками */
  .header__contacts a:not(.header__phone a){
    width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
    border-radius:999px; background:rgba(255,255,255,.08);
    box-shadow:0 6px 16px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06);
    backdrop-filter:blur(4px);
  }
  .header__contacts a:not(.header__phone a):active{ transform:scale(.96); }

  /* Герой: колонка по центру */
  .hero__wrap{
    display:flex; flex-direction:column; align-items:center;
    text-align:center; gap:22px; padding-top:161px;
  }

  .hero__content{ width:100%; max-width:560px; }
  .hero__content h1{
    font-size:44px; line-height:1.18; margin:0 0 14px;
    letter-spacing:-.2px;
  }
  .hero__content p{
    margin:0 0 22px; color:#c9d2e3;
  }

  .btn-main{
    padding:15px 28px; border-radius:12px; font-weight:800;
    box-shadow:0 10px 26px rgba(0,170,255,.25), 0 6px 0 #052b45;
  }

  /* Иллюстрация: внизу крупно и по центру */
  .hero__image{ margin-left:0 !important; top:0 !important; order:3; width:100%; }
  .main-illustration{
    width:min(82vw, 420px); max-width:420px;
    transform:none !important; margin:25px auto 0; right:48px;
  }
  .glow{
    left:50% !important; transform:translateX(-50%);
    width:min(82vw, 420px); height:180px; bottom:-56px;
  }

  /* Бабблы как на тильде */
  .bubble-1{ top:-4px; left:56%; right:auto; width:82px; max-width:82px; }
  .bubble-2{ top:70px; left:10%;  right:auto; width:82px; max-width:82px; }

  /* Плюсы вокруг иллюстрации */
  .plus-1{ top:-16px; left:70%;  max-width:26px; }
  .plus-2{ top:20px;  left:41%;  max-width:22px; }
  .plus-3{ top:150px; left:74%;  max-width:28px; }
  .plus-4{ top:212px; left:50%;  max-width:20px; }

  /* Немного более «звёздное» небо на мобилке */
  .stars{ background-size:420px 420px; opacity:.62; }
}

/* ultra-mobile подправка */
@media (max-width:420px){
  .hero__content h1{ font-size:38px; line-height:1.2; }
  .main-illustration{ width:min(86vw, 360px); }
  .glow{ width:min(86vw, 360px); }
  .bubble-1{ width:140px; } .bubble-2{ width:148px; }
}
/* === MOBILE PATCH: оставить только номер + WA/Telegram === */
@media (max-width:900px){

  /* убрать кнопку "Позвонить вам?" в шапке */
  .btn-header{ display:none !important; }

  /* скрыть подпись с режимом работы под номером */
  .header__phone span,
  .header__time{ display:none !important; }

  /* компактнее блок контактов */
  .header__contacts{ gap:10px; }

  /* круглые кнопки для иконок мессенджеров (если ещё не стилизованы) */
  .header__contacts a:not(.header__phone a){
    width:36px; height:36px;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:999px; background:rgba(255,255,255,.08);
    box-shadow:0 6px 16px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06);
    backdrop-filter:blur(4px);
  }
  .header__contacts a:not(.header__phone a):active{ transform:scale(.96); }
}
/* === mini-patch: WA/TG под номером на мобиле === */
@media (max-width:900px){
  /* скрыть кнопку "Позвонить вам?" и время под номером */
  .btn-header{ display:none !important; }
  .header__phone span,
  .header__time{ display:none !important; }

  /* разрешаем перенос строк в контактах */
  .header__contacts{ display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }

  /* номер занимает 1-ю строку полностью, выравниваем вправо */
  .header__phone{ flex:0 0 100%; text-align:right; line-height:1.05; }
  .header__phone a{ font-size:16px; font-weight:800; color:#fff; text-decoration:none; }

  /* все иконки (WA/TG) становятся во 2-ю строку под номером */
  .header__contacts a:not(.header__phone a){
    order:2; width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center;
    border-radius:999px; background:rgba(255,255,255,.08);
  }
}

/* === header icons (desktop + mobile) === */
.header__contacts{ display:flex; align-items:center; gap:14px; }

/* общая кнопка-иконка */
.header__contacts .ico{
  width:36px; height:36px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08);
  box-shadow:0 6px 16px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06);
  backdrop-filter:blur(4px);
  transition:transform .15s ease, background-color .15s ease;
  text-decoration:none; position:relative; overflow:hidden;
}
.header__contacts .ico:active{ transform:scale(.96); }

/* рисуем пиктограмму через маску, чтобы цвет менять через color */
.header__contacts .ico::before{
  content:""; width:20px; height:20px; background:currentColor;
  -webkit-mask-position:center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:contain;
          mask-position:center;         mask-repeat:no-repeat;         mask-size:contain;
}

/* Telegram */
.header__contacts .tg{ color:#26A4E3; }
.header__contacts .tg:hover{ background:rgba(38,164,227,.18); }
.header__contacts .tg::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.6 15.2l-.4 5.4c.6 0 .9-.3 1.2-.6l2.8-2.7 5.8 4.3c1 .6 1.7.3 2-.9l3.7-17.2v0c.4-1.9-.7-2.7-2.1-2.2L1.7 9.7c-1.8.7-1.8 1.7-.3 2.1l5.5 1.7L19.6 5c.7-.5 1.3-.2.8.3L9.6 15.2z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9.6 15.2l-.4 5.4c.6 0 .9-.3 1.2-.6l2.8-2.7 5.8 4.3c1 .6 1.7.3 2-.9l3.7-17.2v0c.4-1.9-.7-2.7-2.1-2.2L1.7 9.7c-1.8.7-1.8 1.7-.3 2.1l5.5 1.7L19.6 5c.7-.5 1.3-.2.8.3L9.6 15.2z'/></svg>");
}

/* WhatsApp */
.header__contacts .wa{ color:#25D366; }
.header__contacts .wa:hover{ background:rgba(37,211,102,.18); }
.header__contacts .wa::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 3.9A10 10 0 0 0 4.4 18.6L3 22.7l4.2-1.1A10 10 0 0 0 20 3.9zm-8 16.6a8.5 8.5 0 0 1-4.3-1.2l-.3-.2-2.5.7.7-2.4-.2-.3A8.5 8.5 0 1 1 12 20.5zm4.8-6.3c-.3-.2-1.8-.9-2-.9s-.5-.1-.8.2c-.2.3-.9 1-1 1.2-.2.2-.4.2-.7.1-1.9-.9-3.1-2.8-3.3-3.2-.2-.3 0-.5.1-.6l.3-.3c.1-.1.2-.3.3-.5.1-.2 0-.4 0-.6s-.8-2-1.1-2.7c-.3-.7-.6-.6-.8-.6h-.7c-.2 0-.6.1-.9.4-.3.3-1.2 1.2-1.2 2.9s1.2 3.3 1.4 3.5c.2.2 2.3 3.6 5.6 5 .8.3 1.4.5 1.8.6.8.3 1.6.3 2.2.2.7-.1 2.1-.9 2.4-1.8.3-1 .3-1.7.2-1.8-.1-.1-.3-.2-.6-.4z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 3.9A10 10 0 0 0 4.4 18.6L3 22.7l4.2-1.1A10 10 0 0 0 20 3.9zm-8 16.6a8.5 8.5 0 0 1-4.3-1.2l-.3-.2-2.5.7.7-2.4-.2-.3A8.5 8.5 0 1 1 12 20.5zm4.8-6.3c-.3-.2-1.8-.9-2-.9s-.5-.1-.8.2c-.2.3-.9 1-1 1.2-.2.2-.4.2-.7.1-1.9-.9-3.1-2.8-3.3-3.2-.2-.3 0-.5.1-.6l.3-.3c.1-.1.2-.3.3-.5.1-.2 0-.4 0-.6s-.8-2-1.1-2.7c-.3-.7-.6-.6-.8-.6h-.7c-.2 0-.6.1-.9.4-.3.3-1.2 1.2-1.2 2.9s1.2 3.3 1.4 3.5c.2.2 2.3 3.6 5.6 5 .8.3 1.4.5 1.8.6.8.3 1.6.3 2.2.2.7-.1 2.1-.9 2.4-1.8.3-1 .3-1.7.2-1.8-.1-.1-.3-.2-.6-.4z'/></svg>");
}

/* чуть крупнее иконки на ретине */
@media (min-width:1200px){
  .header__contacts .ico{ width:38px; height:38px; }
  .header__contacts .ico::before{ width:22px; height:22px; }
}

/* === HOTFIX: вернуть видимость кнопки === */
.hero .btn-main{
  display:inline-block !important;
  background:#00aaff !important;   /* fallback-цвет */
  color:#fff !important;
  padding:16px 32px !important;
  border-radius:12px !important;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 6px 0 #052b45, 0 20px 40px rgba(0,170,255,.15);
  position:relative; z-index:2;
  transform:none; transition:transform .18s ease;
}
.hero .btn-main:hover{ transform:translateY(-2px); }

/* ===================== QUALITY ===================== */
.quality{
  background:#111828;            /* чуть светлее героя */
  padding:72px 0 48px;
  position:relative;
}
.quality__wrap{ text-align:center; }

.quality__title{
  font-size:42px; line-height:1.2; margin:0 0 10px;
  font-weight:800;
}
.quality__lead{
  margin:0 0 40px; color:#cbd3e2; font-size:18px;
}

.quality__grid{
  display:grid; gap:36px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}

/* карточка */
.qcard{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px;
  padding:34px 22px 26px;
  box-shadow: 0 20px 40px rgba(0,0,0,.25) inset, 0 10px 30px rgba(0,0,0,.18);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.qcard:hover{
  transform: translateY(-6px);
  border-color: rgba(0,170,255,.35);
  box-shadow: 0 0 0 1px rgba(0,170,255,.18) inset, 0 26px 46px rgba(0,170,255,.18);
}

/* иконка + «неоновое» свечение */
.qcard__icon{
  display:inline-grid; place-items:center;
  width:132px; height:132px; margin:0 auto 18px;
  border-radius:999px;
  background: radial-gradient(60% 60% at 50% 40%, rgba(0,170,255,.12), rgba(0,170,255,.04));
  position:relative;
  filter: drop-shadow(0 8px 24px rgba(0,170,255,.22));
}

.qcard__icon svg{
  width:72px; height:72px;
  stroke:#1ec8ff; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round;
  filter: drop-shadow(0 0 10px rgba(30,200,255,.45));
  transition: transform .35s ease;
}
.qcard:hover .qcard__icon svg{ transform: scale(1.06); }

/* лучики-вспышки */
.qcard__rays{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(3px 3px at 20% 15%, rgba(0,170,255,.9), transparent 60%),
    radial-gradient(3px 3px at 82% 18%, rgba(0,170,255,.9), transparent 60%),
    radial-gradient(3px 3px at 16% 82%, rgba(0,170,255,.9), transparent 60%),
    radial-gradient(3px 3px at 78% 84%, rgba(0,170,255,.9), transparent 60%);
  opacity:.18; transition:opacity .3s ease;
}
.qcard:hover .qcard__rays{ opacity:.35; }

.qcard__title{
  font-size:18px; line-height:1.45; margin:0; color:#eaf3ff;
}

/* reveal (если уже есть класс .reveal в проекте — он применится сам) */
.reveal{ opacity:0; transform:translateY(14px) scale(.98); animation:reveal .7s cubic-bezier(.22,.8,.24,1) forwards; animation-delay:var(--d,0ms); }
@keyframes reveal{ to{ opacity:1; transform:none; } }

/* адаптив */
@media (max-width:1100px){
  .quality__title{ font-size:36px; }
}
@media (max-width:900px){
  .quality{ padding:56px 0 40px; }
  .quality__grid{ grid-template-columns:1fr; gap:22px; }
  .qcard{ padding:28px 20px; }
}
/* === PATCH: типографика + продолжение галактики в блоке QUALITY === */

/* 1) Заголовки на Inter, текст на Manrope */
:root{
  --font-head: "Inter", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-text: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.quality{ font-family: var(--font-text); }
.quality__title{ font-family: var(--font-head); }

/* 2) Увеличенные размеры/контрасты */
.quality{ padding: 90px 0 56px; }
.quality__title{
  font-size: 48px;      /* было ~42 */
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.quality__lead{
  font-size: 20px;      /* было 18 */
  line-height: 1.55;
  color:#D7E0F2;
  margin: 0 0 46px;
}
.qcard__title{
  font-size: 17px;      /* было 18, но плотнее → читается лучше */
  line-height: 1.55;
  color:#EAF3FF;
  letter-spacing: .1px;
}

/* 3) Продолжаем галактику из хиро в этот блок */
.quality{
  position: relative;
  overflow: hidden;
  background: #0f1529;  /* чуть темнее, чтобы совпасть с хиро */
}
/* слой со звездами */
.quality::before{
  content:"";
  position:absolute; inset:0;
  background: url('img/stars.png') repeat;
  background-size: 512px 512px;
  opacity: .42;                 /* немного слабее, чем в хиро */
  animation: qualityStars 120s linear infinite;
  z-index: 0;
}
/* мягкое свечение/градиент для плавного перехода от героя */
.quality::after{
  content:"";
  position:absolute; inset: -20% -10% auto -10%;
  height: 260px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0,136,255,.22) 0%, rgba(0,136,255,0) 65%),
    linear-gradient(180deg, rgba(7,14,32,0) 0%, rgba(7,14,32,.25) 100%);
  filter: blur(10px);
  z-index: 0;
}
@keyframes qualityStars{
  from{ background-position: 0 0; }
  to  { background-position: 0 -2000px; }
}

/* контент поверх звёзд */
.quality__wrap,
.quality__grid,
.qcard{ position: relative; z-index: 1; }

/* чуть крупнее “неон” у иконок */
.qcard__icon{ filter: drop-shadow(0 10px 28px rgba(0,170,255,.28)); }
.qcard__icon svg{
  filter: drop-shadow(0 0 12px rgba(30,200,255,.55));
}

/* адаптив */
@media (max-width: 1100px){
  .quality__title{ font-size: 42px; }
}
@media (max-width: 900px){
  .quality{ padding: 68px 0 44px; }
  .quality__title{ font-size: 36px; }
  .quality__lead{ font-size: 18px; margin-bottom: 32px; }
}

/* чтобы цвет/свечение были такими же, как у остальных */
.qcard__icon svg{ overflow:visible; }
.qcard__icon svg,
.qcard__icon .icon-people{ color:#1ec8ff; }

/* ===== ABOUT: крупнее фото, бейдж по центру, больше контента ===== */
.about{ position:relative; overflow:hidden; background:#0f1529; padding:96px 0 84px; }
.about__galaxy{ position:absolute; inset:0; z-index:0; }
.about .stars{ opacity:.55; background-size:512px 512px; }
.about .nebula{
  opacity:.34;
  background:
    radial-gradient(820px 340px at 22% 82%, rgba(0,136,255,.22), transparent 70%),
    radial-gradient(520px 520px at 78% 18%, rgba(70,40,130,.26), transparent 70%),
    radial-gradient(520px 520px at 60% 70%, rgba(30,90,180,.22), transparent 70%);
}

.about__wrap{
  position:relative; z-index:1;
  display:grid; align-items:center; column-gap:56px;
  grid-template-columns: 640px 1fr;              /* шире колонка под фото */
}

/* Фото слева: крупнее и «прижатое» к тексту */
.about__photo{ position:relative; }
.about__img{
  position:relative; display:block;
  width:100%; max-width: clamp(520px, 42vw, 700px); /* КРУПНЕЕ */
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.35));
}
.about__glow{
  position:absolute; bottom:-52px; left:7%;
  width:88%; height:260px; filter:blur(44px);
  background: radial-gradient(closest-side, rgba(0,136,255,.37), transparent 70%);
  z-index:0;
}

/* Бейдж по центру изображения */
.ceo-badge{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:18px; z-index:2;
  background: rgba(12,18,36,.78);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px; padding:10px 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(6px);
}
.ceo-badge__name{ font-weight:800; letter-spacing:.2px; }
.ceo-badge__role{ font-size:12px; opacity:.78; }

/* Типографика и объём текста */
.about__title{
  font-family: var(--font-head, "Inter", sans-serif);
  font-size:48px; line-height:1.16; margin:0 0 12px; font-weight:800;
}
.about__lead{ color:#d5def0; font-size:18px; line-height:1.7; margin:0 0 12px; }
.about__text{ color:#c7d0e4; font-size:17px; line-height:1.7; margin:0 0 14px; }
.about__facts{ list-style:none; padding:0; margin:0 0 28px; color:#eaf3ff; }
.about__facts li{ margin:0 0 10px; line-height:1.6; }
.about__facts b{ color:#9fddff; font-weight:800; }

.about__cta{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.about__note{ font-size:13px; opacity:.78; }

/* Адаптив под планшет/мобайл */
@media (max-width:1200px){
  .about__wrap{ grid-template-columns:540px 1fr; column-gap:40px; }
  .about__title{ font-size:42px; }
}
@media (max-width:900px){
  .about{ padding:72px 0 56px; }
  .about__wrap{ grid-template-columns:1fr; row-gap:22px; text-align:center; }
  .about__img{ margin:0 auto; max-width:min(76vw, 420px); }
  .ceo-badge{ position:static; transform:none; margin:-3px auto 0; }
  .about__facts{ text-align:left; margin:0 auto 26px; max-width:640px; }
  .about__title{ font-size:36px; }
}

/* ===== PATCH: ABOUT (desktop) — бейдж выше + крупнее типографика ===== */
@media (min-width: 901px){

  /* фото можно сделать чуть крупнее, чтобы пропорции совпали со вторым скрином */
  .about__img{
    max-width: clamp(560px, 44vw, 760px);
  }

  /* бейдж по центру фото и выше — на уровень груди */
  .ceo-badge{
    top: auto;                 /* сбрасываем, если было top */
    bottom: 42%;               /* ↑ подними/опусти, если нужно (+/– 3–5%) */
    left: 50%;
    transform: translate(-50%, 50%);
    padding: 12px 16px;
    background: rgba(12,18,36,.82);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .ceo-badge__name{
    font-family: var(--font-head, "Inter", sans-serif);
    font-weight: 800;
    font-size: 18px;           /* было меньше — сделали крупнее */
    letter-spacing: .2px;
    line-height: 1.15;
  }
  .ceo-badge__role{
    font-family: var(--font-text, "Manrope", sans-serif);
    font-size: 12px;
    opacity: .85;
    line-height: 1.2;
  }

  /* типографика в правой колонке — крупнее и «воздушнее» */
  .about__title{ font-size: 56px; line-height: 1.12; margin-bottom: 14px; }
  .about__lead { font-size: 20px; line-height: 1.75; }
  .about__text { font-size: 19px; line-height: 1.75; }
  .about__facts li{ font-size: 17px; line-height: 1.7; }
  .about__facts b{ color:#5ccfff; font-weight: 800; }
}

/* ===== PATCH: ABOUT — типографика как на скрине + синие акценты ===== */
@media (min-width:901px){
  /* Крупнее заголовки и абзацы рядом с фото */
  .about__title{ font-size:56px; line-height:1.12; letter-spacing:-.01em; }
  .about__lead { font-size:20px; line-height:1.78; }
  .about__text { font-size:20px; line-height:1.78; }
  .about__facts li{ font-size:18px; line-height:1.7; }
}

/* Единый шрифт и плотность как в примере */
.about__content{
  font-family: var(--font-text, "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  letter-spacing:.1px;
}

/* Синие смысловые акценты — используем <span class="hl">...</span> */
.about .hl{
  color: var(--blue);
  font-weight: 800;
}

/* Если хочется подсвечивать жирное внутри списков тоже */
.about__facts b{ color: var(--blue); font-weight:800; }

/* Небольшой ап к кнопке, чтобы визуально балансировала крупный текст */
.about__cta .btn-main{ padding:18px 34px; border-radius:12px; font-weight:800; }

/* Надпись «как на оригинале» + синие акценты */
.about__content .use-gothic,
.about__content .hl{
  font-family: "CenturyGothic", Arial, sans-serif;
}

/* Размеры на десктопе — как на твоём примере */
@media (min-width:901px){
  .about__content .use-gothic{
    font-weight: 700;           /* Century Gothic bold */
    font-size: 20px;
    line-height: 1.78;
    letter-spacing: .1px;
  }
  .about__content .hl{
    font-weight: 700;
    color: var(--blue);
  }
}

/* при желании — имя на бейдже тоже CG */
.ceo-badge__name{
  font-family: "CenturyGothic", Arial, sans-serif;
  font-weight: 700;
}

/* ===== PATCH: ABOUT — Century Gothic для всего блока + крупнее шрифты ===== */
/* Важно: предполагаем, что @font-face CenturyGothic уже подключен (как договорились) */

.about :where(h2, p, li, .ceo-badge__name, .ceo-badge__role){
  font-family: "CenturyGothic","Century Gothic","URW Gothic",Arial,sans-serif !important;
  letter-spacing: .1px;
}

/* Синие смысловые акценты */
.about .hl{
  color: var(--blue);
  font-weight: 700;
}

/* Крупнее типографика на десктопе */
@media (min-width:901px){
  .about__title{ font-size:56px; line-height:1.12; letter-spacing:-.01em; }
  .about__lead { font-size:20px; line-height:1.78; }
  .about__text { font-size:20px; line-height:1.78; }

  /* Увеличить пункты: "7+ лет опыта", "Сайты/квизы/каталоги" и т.п. */
  .about__facts li{ font-size:20px; line-height:1.7; }

  /* Подчеркнуть смысл в пунктах — жирным синим для b */
  .about__facts b{
    color: var(--blue);
    font-weight: 700;
  }

  /* Бейдж — тот же шрифт, чуть крупнее имя */
  .ceo-badge__name{ font-size:18px; font-weight:700; }
  .ceo-badge__role{ font-size:12px; opacity:.85; }
}

/* ===== PATCH: ABOUT — центр заголовка/кнопки + читаемость бейджа ===== */

/* 1) Заголовок "Кто мы" по центру (только десктоп) */
@media (min-width:901px){
  .about__title{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }
}

/* 2) Кнопка "Обсудить проект" по центру (и на моб., и на десктопе) */
.about__cta{
  display:flex;
  justify-content:center;   /* центрируем */
  text-align:center;
  gap:18px;
}
.about__cta .btn-main{
  margin:0;                 /* убираем возможные внешние отступы слева/справа */
}

/* 3) Бейдж на фото — повысить читаемость */
.ceo-badge{
  padding:12px 16px;
  background: rgba(10,16,32,.88);                /* темнее фон */
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ceo-badge__name{
  font-family:"CenturyGothic","Century Gothic","URW Gothic",Arial,sans-serif;
  font-weight:700;
  font-size:16px;           /* крупнее */
  letter-spacing:.2px;
  text-shadow:0 1px 2px rgba(0,0,0,.35);   /* контраст по светлой рубашке */
}
.ceo-badge__role{
  font-family:"CenturyGothic","Century Gothic","URW Gothic",Arial,sans-serif;
  font-size:12.5px;         /* немного крупнее */
  opacity:.95;              /* лучше читается */
  text-shadow:0 1px 1px rgba(0,0,0,.3);
}

/* ===================== FOOTER ===================== */
.footer{
  position: relative;
  background:#0b1224;
  color:#d9e5ff;
  padding: 64px 0 0;
  overflow:hidden;
  font-family: var(--font-text, "Manrope", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
}

.footer__galaxy{ position:absolute; inset:0; z-index:0; }
.footer__stars{
  position:absolute; inset:0;
  background:url('img/stars.png') repeat;
  background-size:512px 512px;
  opacity:.42; animation:footerStars 120s linear infinite;
}
.footer__nebula{
  position:absolute; inset:-20% -10% auto -10%; height:260px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(0,136,255,.22) 0%, rgba(0,136,255,0) 65%),
    linear-gradient(180deg, rgba(7,14,32,0) 0%, rgba(7,14,32,.25) 100%);
  filter: blur(10px);
}
@keyframes footerStars{ from{background-position:0 0} to{background-position:0 -2000px} }

.footer__wrap{
  position:relative; z-index:1;
  display:grid; gap:32px;
  grid-template-columns: 1.2fr .8fr .8fr 1.2fr;
  align-items:start;
}

/* Бренд */
.fcol--brand{ padding-right:18px; }
.fbrand{ text-decoration:none; color:#fff; display:inline-grid; gap:4px; }
.fbrand__title{ font-family: var(--font-head,"Inter",sans-serif); font-weight:800; font-size:28px; letter-spacing:.4px;}
.fbrand__line{ width:84px; height:2px; background:var(--blue,#00aaff); }
.fbrand__sub{ font-size:12px; opacity:.7; }

.flead{ margin:14px 0 18px; color:#c7d5ef; max-width:420px; }

.fcta{
  display:inline-block; margin-bottom:16px;
  background:var(--blue,#00aaff); color:#fff; text-decoration:none;
  font-weight:800; border-radius:12px; padding:13px 22px;
  box-shadow:0 6px 0 #052b45, 0 20px 40px rgba(0,170,255,.15);
}
.fcta:hover{ transform:translateY(-1px); transition:.18s ease; }

.fphone{ display:flex; flex-direction:column; gap:2px; margin-top:6px; }
.fphone__link{ color:#fff; text-decoration:none; font-weight:800; font-size:18px; }
.fphone__link:hover{ color:var(--blue,#00aaff); }
.fphone__time{ font-size:12px; opacity:.65; }

.fsocial{ display:flex; gap:10px; margin-top:14px; }
.fsocial__ico{
  width:40px; height:40px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08);
  box-shadow:0 6px 16px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.06);
  backdrop-filter:blur(4px);
  color:#fff; text-decoration:none; position:relative;
}
.fsocial__ico::before{
  content:""; width:22px; height:22px; background:currentColor;
  -webkit-mask-position:center; -webkit-mask-repeat:no-repeat; -webkit-mask-size:contain;
          mask-position:center;         mask-repeat:no-repeat;         mask-size:contain;
}
.fsocial__ico--tg{ color:#26A4E3; }
.fsocial__ico--tg::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M9.6 15.2l-.4 5.4c.6 0 .9-.3 1.2-.6l2.8-2.7 5.8 4.3c1 .6 1.7.3 2-.9l3.7-17.2c.4-1.9-.7-2.7-2.1-2.2L1.7 9.7c-1.8.7-1.8 1.7-.3 2.1l5.5 1.7L19.6 5c.7-.5 1.3-.2.8.3L9.6 15.2z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M9.6 15.2l-.4 5.4c.6 0 .9-.3 1.2-.6l2.8-2.7 5.8 4.3c1 .6 1.7.3 2-.9l3.7-17.2c.4-1.9-.7-2.7-2.1-2.2L1.7 9.7c-1.8.7-1.8 1.7-.3 2.1l5.5 1.7L19.6 5c.7-.5 1.3-.2.8.3L9.6 15.2z'/></svg>");
}
.fsocial__ico--wa{ color:#25D366; }
.fsocial__ico--wa::before{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M20 3.9A10 10 0 0 0 4.4 18.6L3 22.7l4.2-1.1A10 10 0 0 0 20 3.9zm-8 16.6a8.5 8.5 0 0 1-4.3-1.2l-.3-.2-2.5.7.7-2.4-.2-.3A8.5 8.5 0 1 1 12 20.5zm4.8-6.3c-.3-.2-1.8-.9-2-.9s-.5-.1-.8.2c-.2.3-.9 1-1 1.2-.2.2-.4.2-.7.1-1.9-.9-3.1-2.8-3.3-3.2-.2-.3 0-.5.1-.6l.3-.3c.1-.1.2-.3.3-.5.1-.2 0-.4 0-.6s-.8-2-1.1-2.7c-.3-.7-.6-.6-.8-.6h-.7c-.2 0-.6.1-.9.4-.3.3-1.2 1.2-1.2 2.9s1.2 3.3 1.4 3.5c.2.2 2.3 3.6 5.6 5 .8.3 1.4.5 1.8.6.8.3 1.6.3 2.2.2.7-.1 2.1-.9 2.4-1.8.3-1 .3-1.7.2-1.8-.1-.1-.3-.2-.6-.4z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M20 3.9A10 10 0 0 0 4.4 18.6L3 22.7l4.2-1.1A10 10 0 0 0 20 3.9zm-8 16.6a8.5 8.5 0 0 1-4.3-1.2l-.3-.2-2.5.7.7-2.4-.2-.3A8.5 8.5 0 1 1 12 20.5zm4.8-6.3c-.3-.2-1.8-.9-2-.9s-.5-.1-.8.2c-.2.3-.9 1-1 1.2-.2.2-.4.2-.7.1-1.9-.9-3.1-2.8-3.3-3.2-.2-.3 0-.5.1-.6l.3-.3c.1-.1.2-.3.3-.5.1-.2 0-.4 0-.6s-.8-2-1.1-2.7c-.3-.7-.6-.6-.8-.6h-.7c-.2 0-.6.1-.9.4-.3.3-1.2 1.2-1.2 2.9s1.2 3.3 1.4 3.5c.2.2 2.3 3.6 5.6 5 .8.3 1.4.5 1.8.6.8.3 1.6.3 2.2.2.7-.1 2.1-.9 2.4-1.8.3-1 .3-1.7.2-1.8-.1-.1-.3-.2-.6-.4z'/></svg>");
}

/* Колонки */
.fcol .fhead{
  font-family: var(--font-head,"Inter",sans-serif);
  font-size:15px; letter-spacing:.12em; text-transform:uppercase;
  color:#9ecfff; margin:4px 0 14px; opacity:.9;
}
.flist{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.flist a{ color:#dbe6ff; text-decoration:none; opacity:.85; }
.flist a:hover{ color:#fff; }

.fcol--glass{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow: inset 0 20px 40px rgba(0,0,0,.15);
}
.fmini{ margin:4px 0 12px; color:#c7d5ef; font-size:14px; }
.fbtns{ display:grid; gap:10px; }
.fbtn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  border-radius:12px; padding:12px 14px; text-decoration:none; color:#fff; font-weight:800;
  box-shadow:0 8px 22px rgba(0,0,0,.25);
}
.fbtn--tg{ background:#2496dc; }
.fbtn--tg:hover{ filter:brightness(.95); }
.fbtn--wa{ background:#2cc66b; }
.fbtn--wa:hover{ filter:brightness(.95); }

/* Низ */
.footer__bottom{ position:relative; z-index:1; margin-top:36px; border-top:1px solid rgba(255,255,255,.06); }
.footer__bottom_wrap{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 0 24px; gap:16px;
}
.fcopy{ color:#a9b8d6; opacity:.8; }

.ftop{
  width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.08);
  box-shadow:0 8px 18px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.06);
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  position:relative;
}
.ftop::before{
  content:""; width:18px; height:18px; background:currentColor; color:#dbe6ff;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M12 7l-7 7h4v4h6v-4h4z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M12 7l-7 7h4v4h6v-4h4z'/></svg>") center/contain no-repeat;
}

/* Адаптив */
@media (max-width:1100px){
  .footer__wrap{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:780px){
  .footer{ padding-top:52px; }
  .footer__wrap{ grid-template-columns:1fr; }
  .fcol--brand{ order:-1; }
  .footer__bottom_wrap{ flex-direction:column; align-items:flex-start; }
}

/* === PITCH badge: mobile fix — компактная «плашка» по тексту === */
@media (max-width: 900px){
  section.pitch .ceo-badge.pitch__badge,
  section.pitch .pitch__badge.ceo-badge{
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;

    display: inline-flex !important;      /* shrink-to-content */
    flex-direction: column !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;

    padding: 8px 12px !important;         /* без лишнего воздуха */
    border-radius: 12px !important;       /* НЕ круг */
    width: auto !important;
    max-width: 88vw !important;           /* на всякий случай */

    background: rgba(7,14,32,.84) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.28) !important;

    white-space: normal !important;       /* переносы строк ок */
    overflow: visible !important;
    margin: 10px auto 0 !important;       /* под фото и по центру */
  }

  /* отключаем любые «украшения», которые могли расширять плашку */
  section.pitch .ceo-badge.pitch__badge::before,
  section.pitch .ceo-badge.pitch__badge::after{
    content: none !important;
    display: none !important;
  }

  section.pitch .ceo-badge.pitch__badge .ceo-badge__name,
  section.pitch .ceo-badge.pitch__badge .ceo-badge__role{
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
  }

  /* выравниваем контейнер фото, чтобы бейдж центрировался под ним */
  section.pitch .pitch__photo{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
}

/* сама секция с кейсами по нишам */
.cases-niches {
  position: relative;
  background-color: #0b1224; /* или тот же тёмный цвет, что фон сайта */
  padding-top: 100px;
  padding-bottom: 100px;
  overflow: visible; /* важно: не обрезаем фон звёзд по высоте карточек */
}

/* космический фон внутри этой секции */
.cases-niches__galaxy {
  position: absolute;
  inset: 0;            /* top:0; right:0; bottom:0; left:0; */
  z-index: 0 !important;
  pointer-events: none;
  /* остальное (stars/nebula и т.д.) уже задаётся классом .galaxy */
}

/* сам контент (заголовок, грид карточек) поверх космоса */
.cases-niches .container {
  position: relative;
  z-index: 2;
}