/* ==========================================================================
   visual.css — добавленный визуальный слой сайта.
   Подключается ПОСЛЕ style.css и только дополняет его.
   Разметку и текст базового сайта не меняем: недостающие узлы создаёт visual.js.

   Разделы: hero → виды моих работ.
   ========================================================================== */

:root {
  --header-h: 76px;
}

/* --- сцена ---------------------------------------------------------------- */

.hero { position: relative; isolation: isolate; }
.hero > :not(.hero-media) { position: relative; z-index: 1; }

/* Полноэкранная подложка: вырывается из .page на всю ширину окна
   и заходит под липкую шапку. */
.hero-media {
  position: absolute;
  top: calc(-1 * var(--header-h));
  left: 50%;
  z-index: -1;
  width: 100vw;
  height: calc(100% + var(--header-h));
  overflow: hidden;
  transform: translateX(-50%);
  pointer-events: none;
  contain: paint;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 56%, rgba(0, 0, 0, 0) 100%);
}

.hero-video,
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero-canvas { opacity: 1; transition: opacity 1s ease; }

.hero-video {
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.4s ease;
}

/* Когда реальный ролик загрузился — он выходит вперёд,
   а сгенерированная анимация уходит в подсветку. */
.hero.has-video .hero-video { opacity: .64; }
.hero.has-video .hero-canvas { opacity: .34; }

/* --- читаемость текста ---------------------------------------------------- */

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 54% at 20% 44%, rgba(255, 173, 51, .13), transparent 68%),
    radial-gradient(42% 44% at 80% 20%, rgba(79, 156, 255, .10), transparent 70%),
    linear-gradient(90deg, rgba(7, 8, 13, .88) 0%, rgba(7, 8, 13, .58) 44%, rgba(7, 8, 13, .26) 72%, rgba(7, 8, 13, .52) 100%),
    linear-gradient(180deg, rgba(7, 8, 13, .78) 0%, transparent 26%, transparent 68%, rgba(7, 8, 13, .5) 100%);
}

/* Плёночное зерно — снимает «цифровую» гладкость градиентов. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- подача контента ------------------------------------------------------ */

.hero h1 { text-shadow: 0 2px 34px rgba(0, 0, 0, .5); }
.hero-lead { text-shadow: 0 1px 20px rgba(0, 0, 0, .45); }

@keyframes heroRise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

.hero h1 span,
.hero-lead span,
.hero-actions .button {
  animation: heroRise .95s cubic-bezier(.22, .61, .36, 1) both;
}

.hero h1 span:nth-child(1)     { animation-delay: .05s; }
.hero h1 span:nth-child(2)     { animation-delay: .14s; }
.hero-lead span:nth-child(1)   { animation-delay: .26s; }
.hero-lead span:nth-child(2)   { animation-delay: .32s; }
.hero-actions .button:nth-child(1) { animation-delay: .44s; }
.hero-actions .button:nth-child(2) { animation-delay: .5s; }

.hero-actions .button-primary {
  box-shadow: 0 10px 34px rgba(255, 173, 51, .26);
}
.hero-actions .button-primary:hover {
  box-shadow: 0 14px 42px rgba(255, 173, 51, .42);
}
.hero-actions .button-secondary {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: rgba(255, 255, 255, .06);
}

/* --- адаптив -------------------------------------------------------------- */

@media (max-width: 760px) {
  :root { --header-h: 92px; }
  .hero-scrim {
    background:
      radial-gradient(70% 40% at 30% 34%, rgba(255, 173, 51, .14), transparent 70%),
      linear-gradient(180deg, rgba(7, 8, 13, .82) 0%, rgba(7, 8, 13, .35) 30%, rgba(7, 8, 13, .5) 72%, rgba(7, 8, 13, .3) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 span,
  .hero-lead span,
  .hero-actions .button { animation: none; }
}


/* ==========================================================================
   Виды моих работ
   Базовая сетка (3 + 2) остаётся как есть — меняется наполнение плитки:
   у каждой свой акцент и знак, номер уходит в угол, заголовок садится вниз.
   ========================================================================== */

.service-grid article {
  position: relative;
  overflow: hidden;
  min-height: 208px;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background:
    radial-gradient(120% 92% at 0% 0%, color-mix(in srgb, var(--tile) 13%, transparent), transparent 62%),
    linear-gradient(145deg, rgba(35, 38, 48, .88), rgba(15, 17, 24, .94));
  transition: transform .32s cubic-bezier(.22, .61, .36, 1), border-color .32s ease,
              box-shadow .32s ease, opacity .6s ease, translate .6s cubic-bezier(.22, .61, .36, 1);
}

/* Знак услуги. Маска, а не картинка, — поэтому красится акцентом плитки. */
.service-grid article::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 24px;
  width: 30px;
  height: 30px;
  background: var(--tile);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  opacity: .92;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tile) 42%, transparent));
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}

/* Акцентная риска в верхнем углу: при наведении разбегается по всей кромке. */
.service-grid article::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 2px;
  background: var(--tile);
  box-shadow: 0 0 12px color-mix(in srgb, var(--tile) 65%, transparent);
  transition: width .4s cubic-bezier(.22, .61, .36, 1);
}

/* Нумерация убрана. Скрываем стилями, а не правкой разметки. */
.service-grid article > span,
.process-grid li > span,
.faq-item > span { display: none; }

.service-grid article:nth-child(4),
.service-grid article:nth-child(5) { grid-column: span 2; }

.service-grid h3 {
  margin: auto 0 0;
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.22;
  letter-spacing: -.015em;
}

.service-grid article:nth-child(1) { --tile: #4f9cff; --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273.5%27%20y%3D%277.5%27%20width%3D%2717%27%20height%3D%2712.5%27%20rx%3D%274%27%2F%3E%3Cpath%20d%3D%27M12%207.5V4.2%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%272.9%27%20r%3D%271.3%27%20fill%3D%27white%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%2713.4%27%20r%3D%271.35%27%20fill%3D%27white%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2715%27%20cy%3D%2713.4%27%20r%3D%271.35%27%20fill%3D%27white%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M9.6%2017h4.8%27%2F%3E%3C%2Fsvg%3E"); }
.service-grid article:nth-child(2) { --tile: #33d6b4; --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%276%27%20y%3D%272.5%27%20width%3D%2712%27%20height%3D%2719%27%20rx%3D%273%27%2F%3E%3Crect%20x%3D%278.6%27%20y%3D%276%27%20width%3D%276.8%27%20height%3D%275%27%20rx%3D%271.4%27%2F%3E%3Cpath%20d%3D%27M8.6%2014.2h6.8M8.6%2017.2h4%27%2F%3E%3C%2Fsvg%3E"); }
.service-grid article:nth-child(3) { --tile: #9a7cff; --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%2718%27%20height%3D%2716%27%20rx%3D%273%27%2F%3E%3Cpath%20d%3D%27M3%209h18M9.5%209v11%27%2F%3E%3Cpath%20d%3D%27M12.6%2012.6h5.6M12.6%2016.1h3.4%27%2F%3E%3C%2Fsvg%3E"); }
.service-grid article:nth-child(4) { --tile: #ffad33; --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cellipse%20cx%3D%2712%27%20cy%3D%276%27%20rx%3D%277%27%20ry%3D%273%27%2F%3E%3Cpath%20d%3D%27M5%206v6c0%201.66%203.13%203%207%203s7-1.34%207-3V6%27%2F%3E%3Cpath%20d%3D%27M5%2012v6c0%201.66%203.13%203%207%203s7-1.34%207-3v-6%27%2F%3E%3C%2Fsvg%3E"); }
.service-grid article:nth-child(6) { --tile: #ff8fab; --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%274.5%27%20width%3D%2713%27%20height%3D%2713%27%20rx%3D%273%27%2F%3E%3Cpath%20d%3D%27M2.5%208.6h13%27%2F%3E%3Ccircle%20cx%3D%275.4%27%20cy%3D%276.5%27%20r%3D%27.85%27%20fill%3D%27white%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%278%27%20cy%3D%276.5%27%20r%3D%27.85%27%20fill%3D%27white%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M5.5%2012h4.2M5.5%2014.8h2.6%27%2F%3E%3Cpath%20d%3D%27m21%2012.4-5.3%205.3-2.7.8.8-2.7%205.3-5.3a1.35%201.35%200%200%201%201.9%201.9Z%27%2F%3E%3C%2Fsvg%3E"); }
.service-grid article:nth-child(5) { --tile: #8fa3c4; --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%2718%27%20height%3D%276.5%27%20rx%3D%272%27%2F%3E%3Crect%20x%3D%273%27%20y%3D%2713.5%27%20width%3D%2718%27%20height%3D%276.5%27%20rx%3D%272%27%2F%3E%3Ccircle%20cx%3D%276.8%27%20cy%3D%277.25%27%20r%3D%271%27%20fill%3D%27white%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%276.8%27%20cy%3D%2716.75%27%20r%3D%271%27%20fill%3D%27white%27%20stroke%3D%27none%27%2F%3E%3Cpath%20d%3D%27M10.6%207.25h6.8M10.6%2016.75h6.8%27%2F%3E%3C%2Fsvg%3E"); }

@media (hover: hover) and (pointer: fine) {
  .service-grid article:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--tile) 52%, transparent);
    box-shadow: 0 20px 46px rgba(0, 0, 0, .38);
  }
  .service-grid article:hover::before { transform: scale(1.08); }
  .service-grid article:hover::after { width: 100%; }
}

/* Сенсорный экран: наводить нечем, поэтому плитка выглядит завершённой сразу —
   риска сделана во всю кромку, а отклик даёт нажатие. */
@media (hover: none) {
  .service-grid article::after { width: 100%; opacity: .5; }
  .service-grid article:active { transform: scale(.985); }
  .service-grid article:active::after { opacity: .9; }
}

@media (max-width: 980px) {
  .service-grid article,
  .service-grid article:nth-child(4),
  .service-grid article:nth-child(5) { grid-column: span 3; }
}

/* Общее для всех трёх секций. Переходы объявлены у самих карточек,
   здесь только начальное состояние и очередь появления. */
[data-reveal] > * { opacity: 0; translate: 0 18px; }
[data-reveal] > *.is-visible { opacity: 1; translate: 0 0; }
[data-reveal] > *:nth-child(2) { transition-delay: .06s; }
[data-reveal] > *:nth-child(3) { transition-delay: .12s; }
[data-reveal] > *:nth-child(4) { transition-delay: .18s; }
[data-reveal] > *:nth-child(5) { transition-delay: .24s; }
[data-reveal] > *:nth-child(6) { transition-delay: .30s; }
[data-reveal] > *:nth-child(7) { transition-delay: .36s; }
[data-reveal] > *:nth-child(8) { transition-delay: .42s; }

@media (max-width: 760px) {
  /* Сбрасываем span: иначе в одноколоночной сетке он плодит лишний столбец. */
  .service-grid article,
  .service-grid article:nth-child(4),
  .service-grid article:nth-child(5) {
    grid-column: auto;
    min-height: 156px;
    padding: 20px;
  }
  .service-grid article::before { top: 19px; left: 20px; width: 26px; height: 26px; }
  .service-grid article > span { top: 20px; right: 20px; }
  .service-grid h3 { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] > * { opacity: 1; translate: none; }
}


/* ==========================================================================
   Этапы работы
   Номера убраны, поэтому очерёдность держат знаки и линии-перемычки в зазорах
   сетки: слева направо на широком экране, сверху вниз на узком.
   ========================================================================== */

.process-grid li {
  position: relative;
  min-height: 196px;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background:
    radial-gradient(120% 92% at 0% 0%, color-mix(in srgb, var(--step) 13%, transparent), transparent 62%),
    linear-gradient(145deg, rgba(35, 38, 48, .88), rgba(15, 17, 24, .94));
  transition: transform .32s cubic-bezier(.22, .61, .36, 1), border-color .32s ease,
              box-shadow .32s ease, opacity .6s ease, translate .6s cubic-bezier(.22, .61, .36, 1);
}

.process-grid li::before {
  content: "";
  position: absolute;
  top: 23px;
  left: 24px;
  width: 30px;
  height: 30px;
  background: var(--step);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  opacity: .92;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--step) 42%, transparent));
  transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}

/* Перемычка живёт ровно в зазоре сетки и связывает шаг со следующим. */
.process-grid li::after {
  content: "";
  position: absolute;
  top: 38px;
  left: 100%;
  width: 14px;
  height: 1px;
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--step) 75%, transparent),
              color-mix(in srgb, var(--step) 8%, transparent));
}

.process-grid li:last-child::after { display: none; }

.process-grid h3 {
  margin: auto 0 0;
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.22;
  letter-spacing: -.015em;
}

@media (hover: hover) and (pointer: fine) {
  .process-grid li:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--step) 52%, transparent);
    box-shadow: 0 20px 46px rgba(0, 0, 0, .38);
  }
  .process-grid li:hover::before { transform: scale(1.08); }
}

@media (hover: none) {
  .process-grid li:active { transform: scale(.985); }
}

.process-grid li:nth-child(1) { --step: #ffad33; --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274.5%27%20width%3D%2718%27%20height%3D%2713%27%20rx%3D%274%27%2F%3E%3Cpath%20d%3D%27M8.5%2017.5v3.4l4.2-3.4%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%2711%27%20r%3D%271.15%27%20fill%3D%27white%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2711%27%20r%3D%271.15%27%20fill%3D%27white%27%20stroke%3D%27none%27%2F%3E%3Ccircle%20cx%3D%2715%27%20cy%3D%2711%27%20r%3D%271.15%27%20fill%3D%27white%27%20stroke%3D%27none%27%2F%3E%3C%2Fsvg%3E"); }
.process-grid li:nth-child(2) { --step: #33d6b4; --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202.8%203%207.4l9%204.6%209-4.6z%27%2F%3E%3Cpath%20d%3D%27M3%2012.4%2012%2017l9-4.6%27%2F%3E%3Cpath%20d%3D%27M3%2016.9%2012%2021.5l9-4.6%27%2F%3E%3C%2Fsvg%3E"); }
.process-grid li:nth-child(3) { --step: #4f9cff; --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8.4%207.6%203.8%2012l4.6%204.4%27%2F%3E%3Cpath%20d%3D%27M15.6%207.6%2020.2%2012l-4.6%204.4%27%2F%3E%3Cpath%20d%3D%27M13.6%205.6%2010.4%2018.4%27%2F%3E%3C%2Fsvg%3E"); }
.process-grid li:nth-child(4) { --step: #9a7cff; --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202.6c2.9%202.4%204.5%205.7%204.5%209.3v3.6h-9v-3.6c0-3.6%201.6-6.9%204.5-9.3Z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%279.8%27%20r%3D%271.9%27%2F%3E%3Cpath%20d%3D%27M7.5%2013.4%205%2016.5v2.6l2.5-1.7M16.5%2013.4%2019%2016.5v2.6l-2.5-1.7%27%2F%3E%3Cpath%20d%3D%27M10.3%2018.6c.4%201.5%201%202.4%201.7%202.4s1.3-.9%201.7-2.4%27%2F%3E%3C%2Fsvg%3E"); }

/* Два столбца: у второй карточки перемычка указывала бы в край строки. */
@media (max-width: 980px) {
  .process-grid li:nth-child(2)::after { display: none; }
}

/* Один столбец: связь разворачивается вертикально, в зазор под карточкой. */
@media (max-width: 760px) {
  .process-grid li { min-height: 156px; padding: 20px; }
  .process-grid li::before { top: 19px; left: 20px; width: 26px; height: 26px; }
  .process-grid li::after {
    top: 100%;
    left: 32px;
    width: 1px;
    height: 14px;
    background: linear-gradient(180deg,
                color-mix(in srgb, var(--step) 75%, transparent),
                color-mix(in srgb, var(--step) 8%, transparent));
  }
  .process-grid li:nth-child(2)::after { display: block; }
  .process-grid li:last-child::after { display: none; }
  .process-grid h3 { font-size: 18px; }
}


/* ==========================================================================
   FAQ
   Ответ раскрывается по нажатию. Кнопку и обёртку ответа создаёт visual.js,
   поэтому без скрипта на странице видны и вопрос, и ответ — ничего
   не остаётся спрятанным навсегда.
   ========================================================================== */

.faq-item {
  position: relative;
  overflow: hidden;
  min-height: 0;
  display: block;
  padding: 0;
  transition: border-color .3s ease, background .3s ease,
              opacity .6s ease, translate .6s cubic-bezier(.22, .61, .36, 1);
}

/* Полоса слева зажигается у раскрытого вопроса. */
.faq-item::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--brand);
  opacity: 0;
  transition: opacity .3s ease;
}

.faq-item.is-open { border-color: rgba(255, 173, 51, .38); }
.faq-item.is-open::before { opacity: 1; }

.faq-copy { display: block; }
.faq-copy h3 { margin: 0; }

.faq-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 23px;
  color: inherit;
  font: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.faq-toggle::after {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background: var(--brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m6%209.5%206%206%206-6%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m6%209.5%206%206%206-6%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  opacity: .65;
  transition: transform .32s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
}

.faq-item.is-open .faq-toggle::after { transform: rotate(180deg); opacity: 1; }

.faq-toggle:focus-visible { outline: 2px solid rgba(255, 255, 255, .85); outline-offset: -4px; }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .42s cubic-bezier(.22, .61, .36, 1), opacity .3s ease;
}

.faq-item.is-open .faq-answer { opacity: 1; }
.faq-answer p { margin: 0; padding: 0 23px 22px; max-width: 900px; }

@media (hover: hover) and (pointer: fine) {
  .faq-item:hover { border-color: rgba(255, 173, 51, .3); }
  .faq-item:hover .faq-toggle::after { opacity: 1; }
}

@media (hover: none) {
  .faq-toggle:active { background: rgba(255, 255, 255, .035); }
}

@media (max-width: 760px) {
  .faq-toggle { padding: 17px 16px; gap: 12px; }
  .faq-toggle::after { width: 18px; height: 18px; }
  .faq-answer p { padding: 0 16px 18px; }
}



/* ==========================================================================
   Контакты
   У каждого канала свой цвет и знак — тем же языком, что плитки услуг.
   Рядом с адресом кнопка копирования: mailto: открывается далеко не у всех,
   а выделять адрес пальцем на телефоне мучительно.
   ========================================================================== */

.contact { position: relative; isolation: isolate; }

/* Тёплое пятно под финальным блоком: взгляд доходит до конца страницы
   и останавливается на действии, а не улетает в пустоту. */
.contact::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(58% 68% at 76% 52%, rgba(255, 173, 51, .11), transparent 70%),
    radial-gradient(48% 58% at 18% 42%, rgba(79, 156, 255, .06), transparent 72%);
}

.contact-slot { position: relative; }

.contact-link {
  position: relative;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  column-gap: 16px;
  border-color: color-mix(in srgb, var(--channel) 58%, transparent);
  background:
    radial-gradient(110% 130% at 0% 0%, color-mix(in srgb, var(--channel) 14%, transparent), transparent 62%),
    linear-gradient(135deg, rgba(38, 40, 48, .96), rgba(17, 19, 26, .96));
  box-shadow: 0 0 18px color-mix(in srgb, var(--channel) 17%, transparent);
  transition: transform .28s cubic-bezier(.22, .61, .36, 1), box-shadow .28s ease, border-color .28s ease;
}

.contact-link::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: center;
  width: 34px;
  height: 34px;
  background: var(--channel);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--channel) 45%, transparent));
}

.contact-link span { grid-column: 2; grid-row: 1; }
.contact-link strong { grid-column: 2; grid-row: 2; }
.contact-link i { grid-column: 3; grid-row: 1 / 3; margin-right: 48px; color: var(--channel); }

.contact-link[href^="https://t.me"] { --channel: #4f9cff; --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21.4%203.9%202.9%2010.8c-.85.32-.83%201.55.03%201.84l4.72%201.58%201.79%205.2c.28.8%201.3.98%201.83.32l2.4-2.98%204.7%203.45c.66.49%201.6.13%201.77-.67l3.2-14.7c.18-.83-.63-1.5-1.44-1.2z%27%2F%3E%3Cpath%20d%3D%27m7.65%2014.22%2011.1-8.3-8.6%209.6-.2%203.9%27%2F%3E%3C%2Fsvg%3E"); }
.contact-link[href^="mailto:"] { --channel: #ffad33; --icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272.5%27%20y%3D%274.5%27%20width%3D%2719%27%20height%3D%2715%27%20rx%3D%273%27%2F%3E%3Cpath%20d%3D%27m3.7%207.2%207.1%205.05a2%202%200%200%200%202.4%200l7.1-5.05%27%2F%3E%3C%2Fsvg%3E"); }

/* Кнопка копирования — сосед ссылки, а не её потомок: кнопка внутри <a>
   недопустима и ломала бы переход. */
.contact-copy-btn {
  --copy-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%279%27%20y%3D%279%27%20width%3D%2711.5%27%20height%3D%2711.5%27%20rx%3D%272.5%27%2F%3E%3Cpath%20d%3D%27M6.5%2015H6a2.5%202.5%200%200%201-2.5-2.5V6A2.5%202.5%200%200%201%206%203.5h6.5A2.5%202.5%200%200%201%2015%206v.5%27%2F%3E%3C%2Fsvg%3E");
  --check-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%271.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m5%2012.6%204.6%204.6L19%207.6%27%2F%3E%3C%2Fsvg%3E");
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 18px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: 12px;
  transform: translateY(-50%);
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease;
}

.contact-copy-btn::before {
  content: "";
  width: 19px;
  height: 19px;
  background: var(--muted);
  -webkit-mask: var(--copy-icon) center / contain no-repeat;
  mask: var(--copy-icon) center / contain no-repeat;
  transition: background .25s ease;
}

.contact-copy-btn::after {
  content: "Скопировано";
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  padding: 6px 10px;
  color: #0e1014;
  background: #33d6b4;
  border-radius: 8px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.contact-copy-btn.is-done { background: rgba(51, 214, 180, .12); border-color: rgba(51, 214, 180, .55); }
.contact-copy-btn.is-done::before { background: #33d6b4; -webkit-mask-image: var(--check-icon); mask-image: var(--check-icon); }
.contact-copy-btn.is-done::after { opacity: 1; transform: translateY(0); }

.contact-copy-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, .85); outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
  .contact-link:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--channel) 82%, transparent);
    box-shadow: 0 0 28px color-mix(in srgb, var(--channel) 34%, transparent);
  }
  .contact-copy-btn:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 173, 51, .5); }
  .contact-copy-btn:hover::before { background: var(--text); }
}

@media (hover: none) {
  .contact-link:active { transform: scale(.99); }
  .contact-copy-btn:active { background: rgba(255, 255, 255, .1); }
}

@media (max-width: 760px) {
  /* Стрелка на телефоне не несёт смысла — карточка и так нажимается целиком,
     а место нужно адресу, чтобы он не переносился посреди слова. */
  .contact-link i { display: none; }
  .contact-link { grid-template-columns: 30px minmax(0, 1fr); column-gap: 11px; padding: 17px 18px; }
  .contact-link::before { width: 26px; height: 26px; }

  /* Кнопка уходит в верхний угол, к подписи, и освобождает нижнюю строку.
     Адрес получает всю ширину карточки — иначе он либо рвался по букве,
     либо, если перенос запретить, лез под кнопку. */
  .contact-copy-btn { top: 12px; right: 12px; width: 44px; height: 44px; transform: none; }
  .contact-link span { padding-right: 58px; font-size: 11px; }
  .contact-link strong { font-size: clamp(14px, 4.4vw, 18px); }
}

/* ==========================================================================
   Тач-экран: гасим наведение, доставшееся от базовых стилей.
   Без этого после касания кнопка залипает в приподнятом состоянии —
   палец убрали, а :hover на ней остался.
   ========================================================================== */

@media (hover: none) {
  .button:hover,
  .project-open:hover,
  .back-to-top:hover { transform: none; }
  .button:active, .project-open:active { transform: scale(.98); }

  /* После касания пункт меню сохраняет :hover и :focus-visible и остаётся
     подсвеченным, хотя палец давно убран. Гасим оба состояния — на тач-экране
     подсветку задаёт только текущий раздел. */
  .nav-links a:hover,
  .nav-links a:focus,
  .nav-links a:focus-visible { color: #c8ccd5; }

  .nav-links a.is-current,
  .nav-links a.is-current:hover,
  .nav-links a.is-current:focus,
  .nav-links a.is-current:focus-visible { color: var(--brand); }
}

/* Кнопка «наверх» уходит только там, где реально перекрывает нажимаемое —
   на карточках Telegram и почты. Выше и ниже них она остаётся на месте. */
.back-to-top.is-blocked { opacity: 0; visibility: hidden; pointer-events: none; }


/* ==========================================================================
   Подвал
   Второй надписи справа не хватало: строка растянута на две стороны,
   и с одним элементом справа оставалась дыра.
   ========================================================================== */

/* Большой запас снизу больше не нужен: кнопка «наверх» паркуется выше
   подвала и на него не наезжает. Оставляем немного воздуха, чтобы
   страница не обрывалась вплотную к кромке. */
footer { gap: 16px; min-height: 0; padding: 30px 0 22px; }
footer span + span { color: #5c626e; }

@media (max-width: 760px) {
  footer { padding: 24px 0 18px; }
}


/* ==========================================================================
   Шапка
   ========================================================================== */

/* У шапки объявлен position: sticky, но она не липла — ни здесь, ни на
   боевом сайте. Причина в overflow-x: hidden на html и body: браузер
   пересчитывает overflow-y в auto, оба становятся контейнерами прокрутки,
   и sticky перестаёт работать. clip обрезает по горизонтали так же,
   но контейнера прокрутки не создаёт.
   Там, где clip не поддерживается, объявление игнорируется и остаётся
   прежнее поведение — ничего не ломается. */
html,
body { overflow-x: clip; }

.site-header {
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease,
              -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease;
}

/* Над hero шапка остаётся прозрачной. Как только страница тронулась —
   набирает плотность, иначе ссылки поехали бы поверх карточек. */
.site-header.is-stuck {
  background: rgba(8, 9, 14, .82);
  border-bottom-color: rgba(255, 173, 51, .26);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .38);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
}

/* Текущий раздел. Подчёркивание рисуем псевдоэлементом, чтобы не трогать
   высоту строки и не дёргать раскладку шапки. */
.nav-links a { position: relative; }
.nav-links a.is-current { color: var(--brand); }

.nav-links a.is-current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--brand);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(255, 173, 51, .65);
}

@media (max-width: 760px) {
  .nav-links a.is-current::after { bottom: -3px; height: 1.5px; }
}


/* ==========================================================================
   Заголовок
   ========================================================================== */

/* Акцент на том, чем занят сайт: взгляду нужна точка входа,
   иначе заголовок читается сплошной белой плитой. */
.hero h1 em {
  font-style: normal;
  color: var(--brand);
}

/* Заголовок стал длиннее, а строки на широком экране стоят с запретом переноса.
   Урезать пришлось не только предел, но и скорость роста: при базовых 5.4vw
   строка не помещалась ни при какой ширине окна — она растёт быстрее контейнера. */
.hero h1 { font-size: clamp(34px, 4.7vw, 66px); }

@media (max-width: 760px) {
  /* Переносы, заданные для широкого экрана, на узком дают рваный блок:
     «задач» и «данных» повисают по одному. Отпускаем строки и включаем
     балансировку — текст разложится сам и ровнее. */
  .hero h1 span,
  .hero-lead span { display: inline; }
  .hero h1 span + span::before,
  .hero-lead span + span::before { content: " "; }
  .hero h1,
  .hero-lead { text-wrap: balance; }
}