/* ==========================================================================
   ARKHE — автоматизация продаж на n8n и ИИ-агентах
   Dark Acid: почти чёрный фон, объёмное зелёное свечение, стеклянные панели,
   плавающий док-навигатор и крупная двухтоновая типографика.
   ========================================================================== */

:root{
  /* --- ground --- */
  --bg:            #040705;
  --bg-2:          #06100a;
  --bg-3:          #0a1a10;

  /* --- ink --- */
  --ink:           #ffffff;
  --ink-2:         rgba(226,255,235,.66);
  --ink-3:         rgba(226,255,235,.42);
  --ink-4:         rgba(226,255,235,.24);
  --ink-5:         rgba(226,255,235,.13);

  /* --- accent (одна переменная меняет всю палитру) --- */
  --acid:          #35e06a;
  --acid-2:        #8dff62;
  --acid-3:        #dcff45;
  --acid-dim:      rgba(53,224,106,.5);
  --acid-soft:     rgba(53,224,106,.14);
  --acid-faint:    rgba(53,224,106,.06);
  --acid-deep:     #0b3a20;

  /* --- surfaces --- */
  --glass:         rgba(255,255,255,.032);
  --glass-2:       rgba(255,255,255,.055);
  --line:          rgba(255,255,255,.09);
  --line-2:        rgba(255,255,255,.05);
  --line-acid:     rgba(53,224,106,.28);

  --shadow:        0 40px 80px -50px rgba(0,0,0,1);
  --shadow-acid:   0 30px 80px -40px rgba(53,224,106,.35);

  --r-lg: 26px;
  --r-md: 16px;
  --r-sm: 10px;
  --r-pill: 999px;

  --display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --sans:    'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --ease: cubic-bezier(.2,.7,.25,1);
  --container: 1240px;
}

*,*::before,*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img,svg,canvas{ display:block; max-width:100%; }
:where(a, a:link, a:visited, a:hover, a:active){ color: inherit !important; text-decoration: none !important; }
button{ font: inherit; color: inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

::selection{ background: var(--acid-soft); color: var(--ink); }

:focus-visible{
  outline: 1px solid var(--acid);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ==========================================================================
   АТМОСФЕРА
   ========================================================================== */
.atmos{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(70% 50% at 50% -10%, rgba(53,224,106,.10), transparent 70%),
    radial-gradient(50% 40% at 10% 90%, rgba(53,224,106,.06), transparent 70%),
    radial-gradient(60% 50% at 95% 40%, rgba(140,255,98,.05), transparent 70%);
}
.vignette{
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(0,0,0,.72) 100%);
}
.grain{
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .5; mix-blend-mode: overlay;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
}

/* декоративные 3D-рендеры из assets — перекрашены в зелёный и растворены в фоне */
.deco{
  position: absolute; z-index: 0; pointer-events: none;
  mix-blend-mode: screen; opacity: .5;
  filter: hue-rotate(-88deg) saturate(1.45) brightness(.92) contrast(1.05) blur(.4px);
}
.deco img{
  width: 100%; height: 100%; object-fit: contain;
  -webkit-mask-image: radial-gradient(closest-side, #000 34%, transparent 76%);
          mask-image: radial-gradient(closest-side, #000 34%, transparent 76%);
}
.deco.cool{ filter: hue-rotate(-135deg) saturate(1.3) brightness(.9) contrast(1.06); }

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
  z-index: 3;
}
section{ position: relative; z-index: 2; padding: clamp(70px, 5.85vw, 117px) 0; }
.rule{ height:1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }

/* ==========================================================================
   ТИПОГРАФИКА
   ========================================================================== */
.tag{
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono);
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-3);
}
.tag::before, .tag::after{ color: var(--acid); opacity:.75; }
.tag::before{ content: "["; }
.tag::after{ content: "]"; }

.display{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(39px, 4.5vw, 90px);
  line-height: .92;
  letter-spacing: -0.045em;
}
.display-sm{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(28px, 2.4vw, 48px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.muted-ink{ color: var(--ink-3); }

/* круглый глиф-акцент внутри заголовка (как ⊙ в референсе) */
.glyph{
  display: inline-grid; place-items:center;
  width: .62em; height: .62em;
  margin: 0 .12em -0.02em;
  border-radius: 50%;
  border: 1px solid var(--line-acid);
  background: radial-gradient(circle at 50% 50%, var(--acid) 0 22%, transparent 60%);
  box-shadow: 0 0 24px -4px var(--acid-dim);
  vertical-align: baseline;
  animation: glyphPulse 2.6s ease-in-out infinite;
}
@keyframes glyphPulse{
  0%,100%{ transform: scale(1); box-shadow: 0 0 24px -4px var(--acid-dim); }
  50%{ transform: scale(1.14); box-shadow: 0 0 30px -2px var(--acid-dim); }
}
@media (prefers-reduced-motion: reduce){ .glyph{ animation: none; } }

.lede{
  font-size: clamp(15px, 1.15vw, 17.5px);
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 62ch;
}
.small{ font-size: 13px; color: var(--ink-3); line-height: 1.55; }
.mono{
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-4);
}

.section-head{ margin-bottom: clamp(33px, 2.8vw, 56px); }
.section-head .tag{ margin-bottom: 22px; }
.section-head.center{ text-align:center; }
.section-head.center .lede{ margin: 20px auto 0; text-align:center; }

/* ==========================================================================
   КНОПКИ
   ========================================================================== */
.pill{
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 16px 13px 22px;
  border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500; letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.pill .dot{
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 0 3px rgba(53,224,106,.22), 0 0 18px 1px var(--acid-dim);
  flex: 0 0 auto;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.pill-light{
  background: #f4fff7; color: #06120b !important;
  box-shadow: 0 12px 34px -18px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.7);
}
.pill-light:hover{ transform: translateY(-2px); box-shadow: 0 20px 44px -20px rgba(53,224,106,.5); }
.pill-light:hover .dot{ transform: scale(1.12); box-shadow: 0 0 0 4px rgba(53,224,106,.28), 0 0 26px 2px var(--acid); }

.pill-ghost{
  background: var(--glass); color: var(--ink) !important;
  border: 1px solid var(--line);
  backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  padding: 13px 22px;
}
.pill-ghost:hover{ background: var(--glass-2); border-color: var(--line-acid); transform: translateY(-2px); }

.pill-lg{ padding: 16px 18px 16px 26px; font-size: 15px; }
.pill-sm{ padding: 10px 12px 10px 17px; font-size: 12.5px; }
.pill-sm .dot{ width: 11px; height: 11px; }

.text-link{
  display:inline-flex; align-items:center; gap:9px;
  font-size: 14px; color: var(--ink-2) !important;
  transition: color .25s var(--ease), gap .25s var(--ease);
}
.text-link::after{ content:"→"; color: var(--acid); }
.text-link:hover{ color: var(--ink) !important; gap: 13px; }

/* ==========================================================================
   ВЕРХНЯЯ ПАНЕЛЬ
   ========================================================================== */
.topbar{
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 16px clamp(16px, 1.55vw, 31px);
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.topbar-actions{ display: flex; align-items: center; gap: 10px; }
.topbar.is-stuck{
  background: rgba(4,7,5,.62);
  backdrop-filter: blur(20px) saturate(1.6) brightness(1.06);
  -webkit-backdrop-filter: blur(20px) saturate(1.6) brightness(1.06);
  border-bottom-color: var(--line-2);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.06);
}
.brand{
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 15px; letter-spacing: .06em;
}
.brand-mark{
  width: 44px; height: 44px; flex:0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(53,224,106,.45));
  transition: filter .3s var(--ease);
}
.brand:hover .brand-mark{
  filter: drop-shadow(0 0 16px rgba(53,224,106,.7));
}
.brand span.thin{ color: var(--ink-3) !important; font-weight: 400; }

/* ==========================================================================
   ПЛАВАЮЩИЙ ДОК-НАВИГАТОР (подпись дизайна)
   ========================================================================== */
.dock{
  position: fixed; z-index: 60;
  left: 50%; bottom: 20px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px;
  padding: 6px;
  border-radius: var(--r-pill);
  background: rgba(8,14,10,.6);
  border: 1px solid var(--line);
  backdrop-filter: blur(22px) saturate(1.7) brightness(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.7) brightness(1.08);
  box-shadow: 0 24px 50px -28px rgba(0,0,0,1), inset 0 1px 0 rgba(255,255,255,.09);
  max-width: calc(100vw - 32px);
  overflow: auto hidden;
  scrollbar-width: none;
}
.dock::-webkit-scrollbar{ display:none; }
.dock a{
  position: relative;
  padding: 9px 17px;
  border-radius: var(--r-pill);
  font-size: 13px; color: var(--ink-3) !important;
  white-space: nowrap;
  transition: color .3s var(--ease), background .3s var(--ease);
}
.dock a:hover{ color: var(--ink-2) !important; }
.dock a.is-active{
  color: var(--ink) !important;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.dock a.is-active::after{
  content:""; position:absolute; left:50%; bottom:3px; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius:50%;
  background: var(--acid); box-shadow: 0 0 10px 1px var(--acid-dim);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 90px 0 110px;
  overflow: clip;
}
.hero-scene{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  overflow: clip;
}
/* объёмное свечение сверху — «god rays» референса */
.hero-rays{
  position: absolute; left: 50%; top: -26%;
  width: 130vw; height: 105vh; transform: translateX(-50%);
  background:
    radial-gradient(42% 52% at 50% 0%, rgba(216,255,69,.20), transparent 62%),
    radial-gradient(60% 70% at 50% 6%, rgba(53,224,106,.24), transparent 68%),
    conic-gradient(from 168deg at 50% 0%, transparent 0 6%, rgba(53,224,106,.13) 14%, transparent 22%, transparent 78%, rgba(140,255,98,.11) 86%, transparent 94%);
  filter: blur(28px);
  opacity: .95;
  animation: auroraPulse 13s ease-in-out infinite;
  transform-origin: 50% 0%;
}
@keyframes auroraPulse{
  0%,100%{ transform: translateX(-50%) scale(1); opacity: .88; }
  50%{ transform: translateX(-50%) scale(1.045); opacity: 1; }
}
@media (prefers-reduced-motion: reduce){ .hero-rays{ animation: none; } }
.hero-floor{
  position: absolute; left: 50%; bottom: -12%; transform: translateX(-50%);
  width: 120vw; height: 44vh;
  background: radial-gradient(50% 60% at 50% 100%, rgba(53,224,106,.16), transparent 70%);
  filter: blur(30px);
}

/* ---------- расщепляющийся блик, следующий за курсором (объёмная дисперсия света) ---------- */
.hero-split{
  position: absolute; inset: 0; z-index: 2;
  opacity: 0;
  transition: opacity .6s var(--ease);
}
.hero-split.is-active{ opacity: .45; }
.hero-split i{
  position: absolute; top: 0; left: 0;
  width: 240px; height: 240px;
  margin: -120px 0 0 -120px;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(32px);
  will-change: transform;
}
.hero-split i:nth-child(1){ background: radial-gradient(circle, rgba(53,224,106,.32), transparent 68%); }
.hero-split i:nth-child(2){ background: radial-gradient(circle, rgba(140,255,98,.22), transparent 68%); }
.hero-split i:nth-child(3){ background: radial-gradient(circle, rgba(216,255,69,.16), transparent 68%); }
@media (prefers-reduced-motion: reduce), (hover: none){ .hero-split{ display: none; } }
.hero-object{
  position: absolute; left: 50%; top: 50%;
  width: min(60vh, 660px); aspect-ratio: 1;
  transform: translate(-50%,-52%);
  mix-blend-mode: screen;
  filter: hue-rotate(-88deg) saturate(1.7) brightness(.96) contrast(1.12);
  opacity: .92;
  will-change: transform;
}
.hero-object img{
  width:100%; height:100%; object-fit: contain;
  -webkit-mask-image: radial-gradient(closest-side, #000 52%, transparent 86%);
          mask-image: radial-gradient(closest-side, #000 52%, transparent 86%);
}
.hero-scene canvas{ position:absolute; inset:0; width:100%; height:100%; }

.hero-inner{ position: relative; z-index: 4; }
.hero-headline{ margin-top: clamp(16px, 1.15vw, 23px); }
.hero-h1{
  display: grid;
  grid-template-columns: max-content minmax(0, max-content);
  justify-content: start;
  align-items: start;
  gap: 0 clamp(16px, 2.4vw, 48px);
  text-shadow: 0 14px 60px rgba(0,0,0,.55);
}
.hero-h1 .hl-b{ padding-bottom: .012em; }
.hero-note{
  margin: clamp(16px, 1.1vw, 22px) 0 0 auto;
  max-width: 34ch;
  font-size: 13px; line-height: 1.55; color: var(--ink-3);
  padding-left: 14px;
  border-left: 1px solid var(--line-acid);
}
.hero-actions{
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  margin-top: clamp(26px, 1.8vw, 36px);
}

/* ---------- вход на первый экран: последовательное проявление ---------- */
[data-hero-in]{
  opacity: 0; transform: translateY(18px) scale(.985); filter: blur(7px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
.hero.is-loaded [data-hero-in]{ opacity: 1; transform: none; filter: blur(0); }
.hero.is-loaded [data-hero-in="1"]{ transition-delay: .05s; }
.hero.is-loaded [data-hero-in="2"]{ transition-delay: .18s; }
.hero.is-loaded [data-hero-in="3"]{ transition-delay: .32s; }
.hero.is-loaded [data-hero-in="4"]{ transition-delay: .46s; }
.hero.is-loaded [data-hero-in="5"]{ transition-delay: .6s; }
@media (prefers-reduced-motion: reduce){
  [data-hero-in]{ opacity:1 !important; transform:none !important; filter:none !important; transition:none !important; }
}

.hero-stats{
  display: flex; flex-wrap: wrap; gap: clamp(18px, 2.2vw, 44px);
  margin-top: clamp(35px, 2.5vw, 50px);
  padding-top: 26px;
  border-top: 1px solid var(--line-2);
}
.hero-stat{ flex: 0 0 auto; }
.hero-stat b{
  display:block;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(21px, 1.35vw, 27px); line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.hero-stat b.wide{ min-width: 190px; }
.hero-stat b em{ font-style: normal; color: var(--acid); }
.hero-stat > span{
  display:block; margin-top: 8px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4);
}

.hero-corner{
  position: absolute; z-index: 4; bottom: 26px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-4);
  display: flex; align-items: center; gap: 10px;
}
.hero-corner.left{ left: clamp(16px, 1.55vw, 31px); }
.hero-corner.right{ right: clamp(16px, 1.55vw, 31px); }
.hero-corner .bar{
  display:block; width: 46px; height:1px;
  background: linear-gradient(90deg, var(--acid), transparent);
}
.hero-corner .caret{ color: var(--acid); animation: bob 2.4s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform: translateY(0); opacity:.5 } 50%{ transform: translateY(4px); opacity:1 } }

/* ==========================================================================
   СЕКЦИЯ С ЛУЧОМ
   ========================================================================== */
.beam-section{ position: relative; overflow: clip; padding-top: clamp(62px, 4.7vw, 94px); }
.beam-converge{
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%;
  opacity: .8;
}
.beam-grid{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1.05fr) minmax(0,.72fr);
  gap: 32px;
  align-items: start;
  min-height: 46vh;
}
.beam-stage{
  position: absolute; inset: -12% -6% -34%;
  z-index: 0; pointer-events: none;
  display: grid; place-items: end center;
}
.beam-core{
  position: relative;
  width: 3px; height: 52vh;
  background: linear-gradient(to top, var(--acid-3) 0%, var(--acid-2) 18%, var(--acid) 42%, rgba(53,224,106,0) 92%);
  filter: blur(1px);
  transform-origin: bottom center;
}
.beam-core::before{
  content:""; position:absolute; left:50%; bottom:0; transform: translateX(-50%);
  width: 36vh; height: 58vh;
  background: conic-gradient(from 173deg at 50% 100%, transparent 0 5%, rgba(53,224,106,.28) 12%, rgba(216,255,69,.16) 50%, rgba(53,224,106,.28) 88%, transparent 95%);
  filter: blur(38px);
  opacity: .8;
  animation: beamHaloBreathe 5.5s ease-in-out infinite;
}
.beam-core::after{
  content:""; position:absolute; left:50%; bottom:-6%; transform: translateX(-50%);
  width: 24vh; height: 14vh; border-radius: 50%;
  background: radial-gradient(circle, rgba(216,255,69,.55), rgba(53,224,106,.2) 45%, transparent 72%);
  filter: blur(26px);
  animation: beamHaloBreathe 5.5s ease-in-out infinite reverse;
}
@keyframes beamHaloBreathe{
  0%,100%{ opacity: .65; transform: translateX(-50%) scale(.96); }
  50%{ opacity: 1; transform: translateX(-50%) scale(1.04); }
}

/* ---------- импульсы, бегущие вверх по лучу — «заявки стекаются в точку» ---------- */
.beam-pulse{
  position: absolute; left: 50%; bottom: 0;
  width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%;
  background: var(--acid-3);
  box-shadow: 0 0 10px 3px var(--acid-dim), 0 0 22px 6px rgba(216,255,69,.3);
  opacity: 0;
  animation: beamPulseRise 3.2s cubic-bezier(.35,0,.25,1) infinite;
}
.beam-pulse:nth-child(1){ animation-delay: 0s; }
.beam-pulse:nth-child(2){ animation-delay: 1.07s; }
.beam-pulse:nth-child(3){ animation-delay: 2.14s; }
@keyframes beamPulseRise{
  0%{ transform: translateY(0) scale(.4); opacity: 0; }
  10%{ opacity: 1; transform: translateY(-8%) scale(1); }
  85%{ opacity: .65; }
  100%{ transform: translateY(-100%) scale(1.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .beam-core::before, .beam-core::after{ animation: none; }
  .beam-pulse{ display: none; }
}
.beam-left{ position: relative; z-index: 3; }
.beam-left .display-sm{ max-width: 17ch; }
.beam-left .pill{ margin-top: 34px; }
.beam-right{
  position: relative; z-index: 3;
  justify-self: end; align-self: end;
  max-width: 34ch; padding-bottom: 10px;
}
.beam-right .tag{ margin-bottom: 14px; }

/* ==========================================================================
   СЕТЬ ИНТЕГРАЦИЙ (full-bleed canvas)
   ========================================================================== */
.network{
  position: relative;
  padding: 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--bg), #030603 45%, var(--bg));
  overflow: clip;
}
.network-canvas-wrap{
  position: relative;
  height: clamp(320px, 46vh, 480px);
}
.network-canvas-wrap canvas{
  position:absolute; inset:0; width:100%; height:100%;
  -webkit-mask-image: radial-gradient(72% 68% at 50% 45%, #000 45%, transparent 88%);
          mask-image: radial-gradient(72% 68% at 50% 45%, #000 45%, transparent 88%);
}
.network-overlay{
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: center;
  pointer-events: none;
}
.network-overlay .container{ pointer-events: auto; }
.network-overlay .display-sm{ max-width: 20ch; text-shadow: 0 10px 40px rgba(0,0,0,.7); }
.network-overlay .tag{ margin-bottom: 20px; }

.pain{
  padding: clamp(39px, 2.95vw, 59px) 0 clamp(62px, 4.3vw, 86px);
}
.pain-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  overflow: hidden;
}
.pain-cell{
  background: var(--bg);
  padding: 26px 22px 30px;
  transition: background .4s var(--ease);
}
.pain-cell:hover{ background: #071009; }
.pain-cell .n{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em;
  color: var(--acid); opacity: .8;
}
.pain-cell p{ margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }

/* ==========================================================================
   СКАН-ПАНЕЛЬ: СЦЕНАРИЙ АГЕНТА
   ========================================================================== */
.scan-section{ overflow: clip; }
.scan-outer{ position: relative; }
.scan-glow{
  position: absolute; left: 50%; transform: translateX(-50%);
  width: min(70%, 640px); height: 220px;
  background: radial-gradient(50% 60% at 50% 50%, rgba(216,255,69,.34), rgba(53,224,106,.16) 40%, transparent 72%);
  filter: blur(42px);
  pointer-events: none; z-index: 0;
}
.scan-glow.top{ top: -110px; }
.scan-glow.bottom{ bottom: -110px; }

.scan-panel{
  position: relative; z-index: 2;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(53,224,106,.07), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.07);
  padding: clamp(21px, 1.8vw, 36px);
  overflow: hidden;
}
.scan-frame{
  position: relative;
  border-radius: var(--r-md);
  padding: clamp(23px, 2.1vw, 42px) clamp(16px, 1.55vw, 31px);
  background:
    radial-gradient(60% 80% at 50% 40%, rgba(53,224,106,.08), transparent 70%),
    #030604;
  overflow: hidden;
}
/* угловые скобы как в сканере референса */
.scan-frame::before, .scan-frame::after,
.scan-frame > .brace-b::before, .scan-frame > .brace-b::after{
  content:""; position:absolute; width: 30px; height: 30px;
  border-color: var(--acid); border-style: solid; border-width: 0;
  opacity: .9;
}
.scan-frame::before{ top: 16px; left: 16px; border-top-width:1.5px; border-left-width:1.5px; border-top-left-radius: 6px; }
.scan-frame::after{ top: 16px; right: 16px; border-top-width:1.5px; border-right-width:1.5px; border-top-right-radius: 6px; }
.scan-frame > .brace-b::before{ bottom: 16px; left: 16px; border-bottom-width:1.5px; border-left-width:1.5px; border-bottom-left-radius: 6px; }
.scan-frame > .brace-b::after{ bottom: 16px; right: 16px; border-bottom-width:1.5px; border-right-width:1.5px; border-bottom-right-radius: 6px; }

.scan-line{
  position: absolute; left: 0; right: 0; height: 2px; top: 0;
  background: linear-gradient(90deg, transparent, var(--acid-2), transparent);
  box-shadow: 0 0 22px 3px rgba(53,224,106,.55);
  opacity: .85;
  animation: scanmove 5.6s var(--ease) infinite;
}
@keyframes scanmove{
  0%{ transform: translateY(4%); opacity:0 }
  12%{ opacity:.9 }
  88%{ opacity:.9 }
  100%{ transform: translateY(calc(100% - 6px)); opacity:0 }
}
@media (prefers-reduced-motion: reduce){ .scan-line{ animation: none; opacity:.4; top: 50%; } }

.flow{
  position: relative; z-index: 2;
  display: grid; gap: 2px;
  max-width: 620px; margin: 0 auto;
}
.flow-row{
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 22px;
  align-items: center; gap: 14px;
  padding: 15px 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.022);
  transition: border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.flow-row:hover{ border-color: var(--line-acid); background: rgba(53,224,106,.05); transform: translateX(4px); }
.flow-row .idx{ font-family: var(--mono); font-size: 11px; color: var(--acid); opacity:.85; }
.flow-row .label{ font-size: 14.5px; color: var(--ink); }
.flow-row .node{
  width: 9px; height: 9px; border-radius: 50%; justify-self: end;
  border: 1px solid var(--line-acid);
  background: radial-gradient(circle, var(--acid) 0 40%, transparent 60%);
  box-shadow: 0 0 12px 1px rgba(53,224,106,.4);
}
.scan-meta{
  position: relative; z-index: 3;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  margin-top: 26px;
}
.scan-meta .stamp{ font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .12em; }
.scan-meta .stamp strong{ display:block; margin-top: 6px; color: var(--ink); font-weight: 500; letter-spacing: .2em; font-size: 12px; }

/* ==========================================================================
   ЦЕНТРАЛЬНЫЙ ЗАГОЛОВОК НАД ПОЛЕМ ЧАСТИЦ
   ========================================================================== */
.field-section{
  position: relative;
  padding: clamp(97px, 8.2vw, 164px) 0;
  overflow: clip;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.field-canvas{
  position: absolute; inset: 0; z-index: 0;
}
.field-canvas canvas{
  position:absolute; inset:0; width:100%; height:100%;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 82%);
          mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 82%);
}
.field-section .display-sm{
  position: relative; z-index: 3;
  max-width: 22ch; margin: 0 auto; text-align: center;
  text-shadow: 0 12px 50px rgba(0,0,0,.8);
}
.field-section .lede{ position:relative; z-index:3; margin: 22px auto 0; text-align:center; max-width: 52ch; }

/* ==========================================================================
   BENTO: УСЛУГИ
   ========================================================================== */
.bento{
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 14px;
}
.tile{
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.042), rgba(255,255,255,.012));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  padding: clamp(19px, 1.25vw, 25px);
  overflow: hidden;
  transition: border-color .45s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.tile:hover{
  border-color: var(--line-acid);
  transform: translateY(-3px);
  box-shadow: var(--shadow), var(--shadow-acid), inset 0 1px 0 rgba(255,255,255,.08);
}
.tile-glow{
  position: absolute; z-index: 0; pointer-events: none;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(53,224,106,.3), transparent 66%);
  filter: blur(30px);
  opacity: .6;
}
/* нулевая специфичность — любое собственное правило position у ребёнка
   (например, position:absolute для декоративного элемента) должно выигрывать */
:where(.tile > *){ position: relative; z-index: 2; }
.tile .tag{ margin-bottom: 18px; }
.tile h3{
  font-family: var(--display); font-weight: 500;
  font-size: clamp(17px, 0.9vw, 18px); line-height: 1.2; letter-spacing: -0.03em;
}
.tile p{ margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.tile-list{
  display: grid; gap: 8px;
  margin-top: 16px;
}
.tile-list li{
  position: relative;
  padding-left: 20px;
  font-size: 13px; line-height: 1.5; color: var(--ink-2);
}
.tile-list li::before{
  content: "✓";
  position: absolute; left: 0; top: 0;
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  color: var(--acid);
}
.tile .outcome{
  display:inline-flex; align-items:center; gap: 8px;
  margin-top: 20px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--acid);
}
.tile .outcome::before{ content:"→"; }

.t-wide{ grid-column: span 4; }
.t-half{ grid-column: span 3; }
.t-third{ grid-column: span 2; }
.t-stat{ grid-column: span 2; display: flex; flex-direction: column; justify-content: space-between; min-height: 210px; }
.t-stat b{
  font-family: var(--display); font-weight:500;
  font-size: clamp(35px, 2.55vw, 51px); line-height: .92; letter-spacing: -0.05em;
}
.t-stat b em{ font-style: normal; color: var(--acid); }
.t-stat span{ margin-top: 14px; font-size: 13.5px; color: var(--ink-2); }

.icon-row{ display: flex; gap: 10px; margin-bottom: 20px; }
.icon-chip{
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: rgba(53,224,106,.07);
  color: var(--acid);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 22px -10px var(--acid-dim);
}
.icon-chip svg{ width: 18px; height: 18px; }

.chips{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chip{
  padding: 7px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.chip:hover{ border-color: var(--line-acid); color: var(--ink); }

.tile-media{
  position: relative;
  min-height: 260px;
  padding: 0;
  display: flex; align-items: flex-end;
}
.tile-media .media-img{
  position: absolute; inset: 0; z-index: 0;
  mix-blend-mode: screen; opacity: .62;
  filter: hue-rotate(-118deg) saturate(1.5) brightness(.85) contrast(1.1);
}
.tile-media .media-img img{ width:100%; height:100%; object-fit: cover; }
.tile-media::after{
  content:""; position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, transparent 20%, rgba(3,6,4,.86) 78%);
}
.tile-media .media-body{ position: relative; z-index: 3; padding: clamp(19px, 1.25vw, 25px); }

/* ==========================================================================
   КЕЙСЫ: 3D-КАРУСЕЛЬ
   ========================================================================== */
.cases{ overflow: clip; }
.case-stage{
  position: relative;
  height: clamp(380px, 44vh, 460px);
  perspective: 1600px;
  perspective-origin: 50% 45%;
  margin-top: 10px;
  touch-action: pan-y;
  cursor: grab;
}
.case-stage.is-dragging{ cursor: grabbing; }
.case-stage-glow{
  position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%);
  width: 70%; height: 180px;
  background: radial-gradient(50% 60% at 50% 60%, rgba(53,224,106,.22), transparent 70%);
  filter: blur(38px); pointer-events:none;
}
.case-card{
  position: absolute; top: 50%; left: 50%;
  width: min(560px, 82vw);
  transform-style: preserve-3d;
  will-change: transform, opacity;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(53,224,106,.09), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.014));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
  padding: clamp(19px, 1.35vw, 27px);
  overflow: hidden;
}
.case-head{ display:flex; align-items:flex-start; justify-content: space-between; gap: 16px; }
.case-head-title{ min-width: 0; }
.case-index{
  display: block; margin-bottom: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-4);
}
.case-crm{ margin-top: 2px; flex: 0 0 auto; }
.case-card h3{
  font-family: var(--display); font-weight: 500;
  font-size: clamp(19px, 1.15vw, 23px); letter-spacing: -0.035em; line-height: 1.1;
}
.case-crm{
  padding: 6px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line-acid);
  background: rgba(53,224,106,.09);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--acid);
  white-space: nowrap;
}
.case-sub{ margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }
.case-body{ margin-top: 22px; display: grid; gap: 16px; }
.case-block .k{
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--acid); opacity: .85;
}
.case-block p{ margin-top: 7px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }

.case-controls{
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 26px;
}
.case-arrow{
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--glass);
  display: grid; place-items: center;
  color: var(--ink-2);
  transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.case-arrow:hover{ border-color: var(--line-acid); color: var(--ink); background: rgba(53,224,106,.08); transform: scale(1.06); }
.case-dots{ display: flex; gap: 8px; }
.case-dots button{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-5); padding: 0;
  transition: all .3s var(--ease);
}
.case-dots button.is-active{
  width: 24px; border-radius: var(--r-pill);
  background: var(--acid); box-shadow: 0 0 14px 1px var(--acid-dim);
}

/* ==========================================================================
   ЖИВЫЕ ДИАЛОГИ — реальные переписки с ИИ-агентами
   ========================================================================== */
.proof{ margin-top: clamp(56px, 6vw, 96px); }
.proof-title{
  margin-top: 20px;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(24px, 2vw, 34px); line-height: 1.14; letter-spacing: -0.03em;
  max-width: 22ch;
}
.proof-grid{
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px;
}
.proof-card{
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.042), rgba(255,255,255,.012));
  backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;
  contain: paint;
  transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.proof-card:hover{
  border-color: var(--line-acid);
  transform: translateY(-3px);
  box-shadow: var(--shadow), var(--shadow-acid), inset 0 1px 0 rgba(255,255,255,.08);
}
/* ---------- окно чата: живая переписка, а не скриншот ---------- */
.chat-window{
  position: relative;
  border-bottom: 1px solid var(--line-2);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
  contain: paint;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(53,224,106,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.008) 40%, rgba(0,0,0,.15)),
    #050a06;
  backdrop-filter: blur(10px) saturate(1.35);
  -webkit-backdrop-filter: blur(10px) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.chat-window-head{
  display: flex; align-items: center; gap: 7px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-2);
}
.chat-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-5);
}
.chat-dot:first-child{ background: rgba(255,110,110,.55); }
.chat-dot:nth-child(2){ background: rgba(255,210,90,.55); }
.chat-dot:nth-child(3){ background: rgba(53,224,106,.55); }
.chat-window-title{
  margin-left: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em;
  color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-live{
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--acid);
}
.chat-live i{
  width: 6px; height: 6px; border-radius: 50%; background: var(--acid);
  box-shadow: 0 0 8px 1px var(--acid-dim);
  animation: pulseDot 2.2s ease-in-out infinite;
}
@keyframes pulseDot{ 0%,100%{ opacity:.4; transform:scale(.85); } 50%{ opacity:1; transform:scale(1.1); } }
@media (prefers-reduced-motion: reduce){ .chat-live i{ animation: none; } }

.chat-body{
  display: grid; gap: 9px; align-content: start;
  padding: 16px;
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(53,224,106,.35) transparent;
}
.chat-body::-webkit-scrollbar{ width: 5px; }
.chat-body::-webkit-scrollbar-track{ background: transparent; }
.chat-body::-webkit-scrollbar-thumb{ background: rgba(53,224,106,.35); border-radius: 4px; }
.chat-body::-webkit-scrollbar-thumb:hover{ background: rgba(53,224,106,.55); }

/* лёгкая подсказка «есть ещё сообщения» сверху/снизу окна */
.chat-window::before, .chat-window::after{
  content:""; position: absolute; left: 0; right: 0; z-index: 2;
  height: 22px; pointer-events: none;
}
.chat-window::before{ top: 45px; background: linear-gradient(180deg, #050a06, transparent); }
.chat-window::after{ bottom: 0; background: linear-gradient(0deg, #050a06, transparent); }

.chat-msg{
  position: relative;
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 13px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--ink);
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  opacity: 0; transform: translateY(9px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.chat-msg.is-in{ opacity: 1; transform: none; }
.chat-msg .who{
  display: block; margin-bottom: 4px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-4);
}
.chat-msg.client{
  justify-self: end;
  background: rgba(53,224,106,.11);
  border-color: rgba(53,224,106,.3);
}
.chat-msg.agent.success{
  background: rgba(53,224,106,.08);
  border-color: rgba(53,224,106,.32);
}
.chat-msg.agent.success .who{ color: var(--acid); }

/* ---------- «агент печатает…» ---------- */
.chat-typing{
  justify-self: start;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 11px 14px;
  border-radius: 13px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  height: 0; padding-top: 0; padding-bottom: 0; margin: -4.5px 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .25s var(--ease), height .25s var(--ease), padding .25s var(--ease), margin .25s var(--ease);
}
.chat-typing.is-active{
  opacity: 1; height: 30px; padding: 11px 14px; margin: 0;
}
.chat-typing i{
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-3);
  animation: chatTypingBounce 1.1s ease-in-out infinite;
}
.chat-typing i:nth-child(2){ animation-delay: .15s; }
.chat-typing i:nth-child(3){ animation-delay: .3s; }
@keyframes chatTypingBounce{ 0%,60%,100%{ transform: translateY(0); opacity:.5; } 30%{ transform: translateY(-3px); opacity:1; } }

@media (prefers-reduced-motion: reduce){
  .chat-msg{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .chat-typing{ display: none !important; }
}

.proof-card figcaption{
  position: relative; z-index: 2;
  padding: 16px 18px 20px;
  display: grid; gap: 6px;
}
.proof-card .k{
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--acid);
}
.proof-card .d{ font-size: 13px; line-height: 1.55; color: var(--ink-2); }

@media (max-width: 1080px){
  .proof-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
}
@media (max-width: 780px){
  .proof-grid{ grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}

/* ==========================================================================
   О СЕБЕ
   ========================================================================== */
.about-lead{ text-align: center; max-width: 24ch; margin: 0 auto; }
.about-copy{ margin: 22px auto 0; text-align: center; max-width: 58ch; }
.about-grid{
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px; margin-top: clamp(30px, 2.2vw, 44px);
}
.monogram{
  width: 74px; height: 74px; border-radius: 20px;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 25px; font-weight: 500; letter-spacing: -0.02em;
  border: 1px solid var(--line-acid);
  background: radial-gradient(120% 120% at 30% 20%, rgba(53,224,106,.22), rgba(255,255,255,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 40px -18px var(--acid);
}
.pull{
  font-family: var(--display); font-weight: 500;
  font-size: clamp(17px, 1vw, 20px); line-height: 1.32; letter-spacing: -0.03em;
}

.about-card{
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 24px;
}

/* ---------- таймлайн этапов работы ---------- */
.about-timeline{
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.042), rgba(255,255,255,.012));
  backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  padding: clamp(22px, 2.4vw, 32px);
  display: grid; gap: 24px;
}
.about-timeline::before{
  content:"";
  position: absolute; left: calc(clamp(22px, 2.4vw, 32px) + 3.5px); top: 34px; bottom: 34px;
  width: 1px;
  background: linear-gradient(180deg, var(--acid) 0%, rgba(53,224,106,.35) 55%, rgba(53,224,106,.08) 100%);
}
.about-step{
  position: relative;
  padding-left: 24px;
}
.about-step::before{
  content:"";
  position: absolute; left: 0; top: 4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 0 3px var(--bg-2), 0 0 10px 1px var(--acid-dim);
}
.about-step-num{
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--acid); opacity: .85;
}
.about-step h4{
  margin-top: 7px;
  font-family: var(--display); font-weight: 500;
  font-size: 17px; letter-spacing: -0.025em;
}
.about-step p{
  margin-top: 6px;
  font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
}

/* ==========================================================================
   ПРОЦЕСС
   ========================================================================== */
.process-wrap{ position: relative; margin-top: 12px; }
.process-track{
  position: relative; height: 1px; background: var(--line-2); margin-bottom: 34px;
}
.process-fill{
  position:absolute; left:0; top:0; height:1px; width:0;
  background: linear-gradient(90deg, var(--acid-3), var(--acid));
  box-shadow: 0 0 14px 1px var(--acid-dim);
}
.process{
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(14px, 1.35vw, 27px);
}
.step .num{
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--acid);
}
.step h3{
  margin-top: 14px;
  font-family: var(--display); font-weight: 500; font-size: 20px; letter-spacing: -0.03em;
}
.step p{ margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.step .time{
  display:inline-block; margin-top: 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-4);
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ display: grid; gap: 0; border-top: 1px solid var(--line-2); }
.faq-item{
  border-bottom: 1px solid var(--line-2);
  cursor: pointer;
  transition: background .35s var(--ease);
}
.faq-item:hover{ background: rgba(255,255,255,.018); }
.faq-head{
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 4px;
}
.faq-head h3{
  font-family: var(--display); font-weight: 500;
  font-size: clamp(14px, 0.8vw, 16px); letter-spacing: -0.025em;
}
.faq-sign{
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  color: var(--acid); font-size: 15px; line-height: 1;
  transition: transform .4s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.faq-item.is-open .faq-sign{ transform: rotate(135deg); border-color: var(--line-acid); background: rgba(53,224,106,.1); }
.faq-body{
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease);
}
.faq-item.is-open .faq-body{ grid-template-rows: 1fr; }
.faq-body-inner{ overflow: hidden; }
.faq-body-inner p{
  padding: 0 60px 26px 4px;
  font-size: 14.5px; line-height: 1.65; color: var(--ink-2);
  max-width: 72ch;
}

/* ==========================================================================
   КОНТАКТ
   ========================================================================== */
.contact{ position: relative; overflow: clip; padding: clamp(88px, 7.4vw, 148px) 0; }
.contact-canvas{ position:absolute; inset:0; z-index:0; }
.contact-canvas canvas{ position:absolute; inset:0; width:100%; height:100%; }
.contact-inner{ position: relative; z-index: 3; text-align: center; }
.contact-inner .display-sm{ max-width: 14ch; margin: 0 auto; text-shadow: 0 14px 60px rgba(0,0,0,.8); }
.contact-inner .lede{ margin: 20px auto 0; text-align:center; max-width: 46ch; }
.contact-inner .pill{ margin-top: 32px; }
.contact-actions{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
  margin-top: 32px;
}
.contact-actions .pill{ margin-top: 0; }
.contact-list{
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1px; margin-top: clamp(44px, 3.35vw, 67px);
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  overflow: hidden;
  text-align: left;
}
.contact-list .item{ background: rgba(4,7,5,.7); backdrop-filter: blur(10px); padding: 24px 22px 28px; }
.contact-list .item .k{
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--acid);
}
.contact-list .item p{ margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

/* ==========================================================================
   ПОДВАЛ
   ========================================================================== */
footer{
  position: relative; z-index: 2;
  border-top: 1px solid var(--line-2);
  padding: clamp(49px, 3.6vw, 72px) 0 130px;
  overflow: clip;
}
.footer-grid{
  display: grid; grid-template-columns: minmax(0,1.2fr) repeat(2, minmax(0,.44fr));
  gap: 40px;
}
.footer-word{
  display: flex; align-items: center; gap: clamp(12px, 0.85vw, 17px);
  font-family: var(--display); font-weight: 500;
  font-size: clamp(30px, 2.8vw, 56px); line-height: .98; letter-spacing: -0.05em;
}
.footer-logo{
  width: clamp(56px, 3.75vw, 75px); height: clamp(56px, 3.75vw, 75px);
  flex: 0 0 auto; object-fit: contain;
  filter: drop-shadow(0 0 18px rgba(53,224,106,.45));
}
.footer-word .dim{ color: var(--ink-4); display: block; font-size: .32em; margin-top: .22em; letter-spacing: -0.01em; }
.footer-col .tag{ margin-bottom: 20px; }
.footer-col ul{ display: grid; gap: 12px; }
.footer-col a{ font-size: 14px; color: var(--ink-2) !important; transition: color .25s var(--ease); }
.footer-col a:hover{ color: var(--ink) !important; }
.footer-base{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: clamp(39px, 3.1vw, 62px);
  padding-top: 24px; border-top: 1px solid var(--line-2);
}
.footer-base span{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); }
.footer-legal{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4) !important; transition: color .25s var(--ease); }
.footer-legal:hover{ color: var(--ink-2) !important; }

/* ==========================================================================
   COOKIE-БАННЕР
   ========================================================================== */
.cookie-banner{
  position: fixed; z-index: 70;
  left: 20px; bottom: 96px;
  width: min(380px, calc(100vw - 40px));
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px;
  border-radius: var(--r-md);
  background: rgba(8,14,10,.86);
  border: 1px solid var(--line);
  backdrop-filter: blur(22px) saturate(1.7) brightness(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.7) brightness(1.08);
  box-shadow: var(--shadow);
}
.cookie-banner[hidden]{ display: none; }
.cookie-banner-text{ display: flex; flex-direction: column; gap: 10px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.cookie-banner-actions{ display: flex; align-items: center; gap: 10px; }
.cookie-banner-actions .pill{ flex: 1 1 auto; justify-content: center; }

@media (max-width: 640px){
  .cookie-banner{ left: 12px; right: 12px; width: auto; bottom: 92px; }
}

/* ==========================================================================
   ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ
   ========================================================================== */
[data-rise]{
  opacity: 0; transform: translateY(26px) scale(.975); filter: blur(5px);
  transition: opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease);
}
[data-rise].is-in{ opacity: 1; transform: none; filter: blur(0); }
@media (prefers-reduced-motion: reduce){
  [data-rise]{ opacity:1 !important; transform:none !important; filter:none !important; transition:none; }
}

/* ==========================================================================
   LIQUID GLASS — подвижный блик, следующий за курсором/касанием
   ========================================================================== */
.sheen{ isolation: isolate; }
/* нулевая специфичность — не должна перебивать position:fixed/absolute
   у .topbar/.dock/.case-card, но добавляет relative там, где его ещё нет */
:where(.sheen){ position: relative; }
.sheen::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius: inherit;
  background: radial-gradient(240px 240px at var(--sx,50%) var(--sy,0%), rgba(255,255,255,.16), rgba(255,255,255,.03) 46%, transparent 72%);
  opacity: 0;
  transition: opacity .55s var(--ease);
}
.sheen::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.1) 0%, transparent 30%);
  opacity: .55;
  mix-blend-mode: screen;
}
.sheen:hover::before, .sheen.is-touched::before{ opacity: 1; }
/* нулевая специфичность — любое собственное правило position у ребёнка
   (абсолютно позиционированные декорации, бейджи с якорем к краю и т.п.)
   должно выигрывать вместо этого общего сброса */
:where(.sheen > *){ position: relative; z-index: 2; }
@media (hover: none){
  .sheen::before{ opacity: .4; }
}

/* ==========================================================================
   АДАПТИВ
   ========================================================================== */
@media (max-width: 1080px){
  .bento{ grid-template-columns: repeat(4, minmax(0,1fr)); }
  .t-wide{ grid-column: span 4; }
  .t-half{ grid-column: span 2; }
  .t-third{ grid-column: span 2; }
  .t-stat{ grid-column: span 2; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-word{ grid-column: 1 / -1; }
  .pain-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .process{ grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 34px; }
}

@media (max-width: 860px){
  .hero{ min-height: 92svh; padding: 84px 0 100px; }
  .hero-h1{ grid-template-columns: 1fr; gap: 0; align-items: start; }
  .hero-note{ margin-left: 0; max-width: 40ch; }
  .display{ font-size: clamp(34px, 7.6vw, 53px); }
  .hero-corner.right{ display: none; }
  .beam-grid{ grid-template-columns: 1fr; min-height: 0; }
  .beam-right{ justify-self: start; margin-top: 46vh; }
  .beam-stage{ inset: 6% 0 12%; place-items: start center; }
  .beam-core{ height: 46vh; }
  .beam-core::before{ width: 60vw; height: 52vh; }
  .about-grid{ grid-template-columns: 1fr; }
  .contact-list{ grid-template-columns: 1fr; }
  .faq-body-inner p{ padding-right: 20px; }
  .scan-meta{ flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px){
  .container{ padding: 0 20px; }
  .bento{ grid-template-columns: 1fr; }
  .t-wide,.t-half,.t-third,.t-stat{ grid-column: span 1; }
  .pain-grid{ grid-template-columns: 1fr; }
  .process{ grid-template-columns: 1fr; }
  .hero-stats{ gap: 20px 34px; }
  .footer-grid{ grid-template-columns: 1fr; }
  .dock a{ padding: 9px 13px; font-size: 12.5px; }
  .topbar{ padding: 14px 18px; }
  .topbar-actions{ gap: 8px; }
  .topbar-actions .pill-lead{ display: none; } /* «Написать в » → просто Telegram / MAX */
  .case-stage{ height: clamp(400px, 54vh, 480px); }
  .case-card{ width: min(560px, 90vw); }
}

@media (max-width: 420px){
  .brand span.thin{ display: none; }
  .brand-mark{ width: 34px; height: 34px; }
  .topbar .pill-sm{ padding: 8px 10px 8px 13px; font-size: 11.5px; gap: 8px; }
}

/* ==========================================================================
   КАЛЬКУЛЯТОР ЭКОНОМИИ
   ========================================================================== */
.calc-section{ position: relative; overflow: clip; }
.calc-canvas{ position: absolute; inset: 0; z-index: 0; }
.calc-canvas canvas{
  position:absolute; inset:0; width:100%; height:100%;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 82%);
          mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 82%);
}
.calc-head{ position: relative; z-index: 2; margin-bottom: clamp(30px, 2.2vw, 44px); }
.calc-head .display-sm{ max-width: 22ch; }

.calc-grid{
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px;
  align-items: stretch;
}
.calc-panel{
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.042), rgba(255,255,255,.012));
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  padding: clamp(21px, 1.4vw, 28px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
}
.calc-panel-glow{
  position: absolute; left: 50%; top: 48%; z-index: 0; pointer-events: none;
  width: 320px; height: 320px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(53,224,106,.14), transparent 68%);
  filter: blur(30px);
}
:where(.calc-panel > *){ position: relative; z-index: 1; }
.calc-fields{ display: grid; gap: 26px; }
.calc-field{ display: grid; gap: 14px; }
.calc-field-head{
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
.calc-field label{ font-size: 14px; color: var(--ink-2); }
.calc-field b{
  font-family: var(--display); font-weight: 500;
  font-size: 21px; letter-spacing: -0.03em; white-space: nowrap;
  transition: transform .25s var(--ease);
}
.calc-field b.is-ticking{ transform: scale(1.08); color: var(--acid-2); }
.calc-field input[type="range"]{
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, var(--acid) 0%, var(--acid) var(--pct,50%), var(--line) var(--pct,50%), var(--line) 100%);
  cursor: pointer; outline: none;
}
.calc-field input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: #f4fff7;
  box-shadow: 0 0 0 3px rgba(53,224,106,.22), 0 4px 14px -4px rgba(0,0,0,.7);
  cursor: pointer;
  transition: transform .25s var(--ease);
}
.calc-field input[type="range"]:hover::-webkit-slider-thumb,
.calc-field input[type="range"]:active::-webkit-slider-thumb{ transform: scale(1.15); }
.calc-field input[type="range"]::-moz-range-thumb{
  width: 16px; height: 16px; border-radius: 50%; border: 0;
  background: #f4fff7;
  box-shadow: 0 0 0 3px rgba(53,224,106,.22);
  cursor: pointer;
}
.calc-field input[type="range"]::-moz-range-track{
  height: 3px; border-radius: 3px; background: var(--line);
}
.calc-method{
  padding-top: 24px;
  border-top: 1px solid var(--line-2);
}
.calc-method-label{
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--acid); opacity: .85;
}
.calc-method-formula{
  margin-top: 12px;
  font-family: var(--display); font-weight: 500;
  font-size: 14.5px; letter-spacing: -0.01em; line-height: 1.5;
  color: var(--ink);
}
.calc-method-formula i{ font-style: normal; color: var(--acid); padding: 0 1px; }
.calc-method .tile-list{ margin-top: 16px; }

.calc-result{
  position: relative;
  border: 1px solid var(--line-acid);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(53,224,106,.16), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  padding: clamp(21px, 1.4vw, 28px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
  overflow: hidden;
}
.calc-result-glow{
  position: absolute; top: -110px; right: -70px; z-index: 0; pointer-events: none;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(53,224,106,.32), transparent 66%);
  filter: blur(34px);
}
:where(.calc-result > *){ position: relative; z-index: 2; }
.calc-result .tag{ color: var(--acid); }
.calc-result .tag::before, .calc-result .tag::after{ opacity: 1; }
.calc-hours{
  display:block; margin-top: 16px;
  font-family: var(--display); font-weight: 500;
  font-size: clamp(40px, 3.05vw, 61px); line-height: .94; letter-spacing: -0.05em;
  transition: transform .3s var(--ease);
}
.calc-hours.is-ticking{ transform: scale(1.03); }
.calc-hours .unit{ font-size: .4em; color: var(--ink-3); letter-spacing: 0; }
.calc-result-note{ margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.calc-metrics{
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px;
  background: var(--line-2); border: 1px solid var(--line-2);
  border-radius: var(--r-md); overflow: hidden;
}
.calc-metrics .m{ background: rgba(4,7,5,.72); padding: 18px; }
.calc-metrics b{
  display:block; font-family: var(--display); font-weight: 500;
  font-size: 25px; letter-spacing: -0.035em;
}
.calc-metrics span{
  display:block; margin-top: 8px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-4);
}
.calc-result .pill{ justify-content: center; }

@media (max-width: 860px){
  .calc-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   PERF-LITE — облегчённый режим для браузеров/устройств, которые не тянут
   backdrop-filter, blend-режимы и вечные анимации на GPU (типичный случай —
   Яндекс.Браузер без аппаратного ускорения или слабое железо). Класс
   .perf-lite ставится в script.js по UA и/или по замеру реального FPS.
   Ничего не ломает: у всех панелей уже есть непрозрачный градиентный фон
   под backdrop-filter, поэтому без блюра они остаются читаемыми.
   ========================================================================== */
html.perf-lite .topbar.is-stuck,
html.perf-lite .dock,
html.perf-lite .pill-ghost,
html.perf-lite .scan-panel,
html.perf-lite .tile,
html.perf-lite .proof-card,
html.perf-lite .contact-list .item,
html.perf-lite .calc-panel,
html.perf-lite .calc-result{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.perf-lite .grain{ display: none; }
html.perf-lite .deco,
html.perf-lite .sheen::after{
  mix-blend-mode: normal !important;
}
html.perf-lite .hero-split{ display: none; }

html.perf-lite .glyph,
html.perf-lite .hero-rays,
html.perf-lite .hero-corner .caret,
html.perf-lite .beam-core::before,
html.perf-lite .beam-core::after,
html.perf-lite .scan-line,
html.perf-lite .chat-live i{
  animation: none !important;
}
html.perf-lite .beam-pulse{ display: none; }