:root{
  --bg: #0b0c10;
  --bg-2:#0f1117;

  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.62);
  --muted-2: rgba(255,255,255,.45);

  /* =============================
     Brand palette (corporate)
     Primary = corporate blue (actions)
     Secondary = cyan (decorative glows)
     Semantic colors are separate
     ============================= */
  --accent:#0f62fe;            /* primary action */
  --accent-2:#4589ff;          /* hover */
  --accent-rgb: 15,98,254;
  --accent-2-rgb: 69,137,255;

  --glow-rgb: 130,207,255;     /* secondary (glows / decor) */

  --danger: #da1e28;           /* semantic error (keep red only for errors) */
  --danger-rgb: 218,30,40;

  --success: #198038;          /* semantic success (optional) */
  --success-rgb: 25,128,56;

  --glass: rgba(16,18,26,.55);
  --glass-strong: rgba(16,18,26,.72);
  --surface: rgba(16,18,26,.55);
  --surface-2: rgba(16,18,26,.40);

  --card-bg: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  --card-bg-solid: rgba(16,18,26,.55);

  /* ✅ FIX: soft sections — убираем длинный вертикальный градиент (он даёт banding/полосы и “прыгает” на zoom).
     Теперь: сплошная заливка + fade только внутри padding через mask (см. .section--soft::before). */
  --header-h: 74px;
  --section-pad: 86px;

  /* Длина fade сверху/снизу для soft-секций.
     Должна быть меньше, чем --section-pad, чтобы fade жил в пустом padding (не под текстом). */
  --soft-edge: calc(var(--section-pad) - 22px);

  /* Сплошная заливка для soft-секций (без длинного градиента по высоте). */
  --soft-surface: rgba(255,255,255,.022);

  /* Reusable SVG noise (grain) */
  --noise-svg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27160%27%20height%3D%27160%27%20viewBox%3D%270%200%20160%20160%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.8%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27/%3E%3C/filter%3E%3Crect%20width%3D%27160%27%20height%3D%27160%27%20filter%3D%27url(%2523n)%27%20opacity%3D%270.35%27/%3E%3C/svg%3E");

  --border: rgba(255,255,255,.10);
  --border-2: rgba(255,255,255,.08);
  --border-3: rgba(255,255,255,.06);

  --header-bg: rgba(9,10,15,.65);
  --header-border: var(--border-3);

  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --shadow-soft: 0 10px 25px rgba(0,0,0,.35);

  --input-bg: rgba(9,10,15,.55);
  --input-bg-focus: rgba(9,10,15,.72);

  --radius: 18px;
  --radius-sm: 14px;
  --max: 1280px;

  /* Cursor orbs */
  --cursor-rgb: var(--glow-rgb);
  --cursor-a-1: 0.06;
  --cursor-a-2: 0.04;
  --cursor-blur: 22px;

  /* Hero parallax visibility */
  --hero-float-color: rgba(var(--glow-rgb),.78);
  --hero-float-opacity: 0.24;

  --focus-ring: rgba(var(--accent-rgb),.45);
}

html.theme-dark{ color-scheme: dark; }

html.theme-light{
  color-scheme: light;

  --bg:#f8f8fb;
  --bg-2:#ffffff;

  --text: rgba(15,16,20,.92);
  --muted: rgba(15,16,20,.62);
  --muted-2: rgba(15,16,20,.45);

  --border: rgba(15,16,20,.12);
  --border-2: rgba(15,16,20,.10);
  --border-3: rgba(15,16,20,.08);

  --glass: rgba(255,255,255,.65);
  --glass-strong: rgba(255,255,255,.86);
  --surface: rgba(255,255,255,.78);
  --surface-2: rgba(255,255,255,.62);

  --card-bg: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.68));
  --card-bg-solid: rgba(255,255,255,.78);

  /* ✅ same soft logic in light theme */
  --soft-surface: rgba(15,16,20,.032);

  --shadow: 0 18px 50px rgba(15,16,20,.14);
  --shadow-soft: 0 10px 25px rgba(15,16,20,.10);

  --input-bg: rgba(255,255,255,.84);
  --input-bg-focus: rgba(255,255,255,.96);

  /* on light: branded cursor */
  --cursor-rgb: var(--accent-rgb);
  --cursor-a-1: 0.045;
  --cursor-a-2: 0.03;

  /* on light: keep parallax visible but softer */
  --hero-float-color: rgba(var(--glow-rgb),.62);
  --hero-float-opacity: 0.14;
}

html,body{height:100%;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);

  /* ✅ фон НЕ на body (иначе растягивается на всю страницу и даёт "стыки") */
  background: var(--bg);

  overflow-x:hidden;
}

html.theme-light body{
  /* ✅ тоже убираем градиенты с body */
  background: var(--bg);
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
*{box-sizing:border-box;}
button,input,textarea{font:inherit; color:inherit;}
::selection{background: rgba(var(--accent-rgb),.25);}

:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.container{
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

/* anchor offset under sticky header */
.section[id]{
  scroll-margin-top: calc(var(--header-h) + 18px);
}

/* =============================
   Global glows (only)
   ============================= */
.bg-layer{
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;

  /* ✅ ВЕСЬ задний фон теперь тут (fixed к viewport) — никаких "склеек" при zoom/scroll */
  background: linear-gradient(180deg, #090a0f 0%, var(--bg) 100%);
}

/* Light theme: свой чистый фон */
html.theme-light .bg-layer{
  background: linear-gradient(180deg, #ffffff 0%, #f6f7fb 100%);
}

/* ✅ Доп. нижнее свечение (мягкое, через blur — без полос/бэндинга) */
.bg-layer::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-360px;
  width: 1200px;
  height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 35%, rgba(var(--accent-rgb),.26), transparent 70%);
  filter: blur(90px);
  opacity: .55;
  pointer-events:none;
}

html.theme-light .bg-layer::before{
  opacity: .35;
}

/* =========================================================
   Anti-banding: лёгкий "grain" поверх фона
   Убирает "полосы" на градиентах (особенно в dark theme)
   ========================================================= */
.bg-layer::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  /* SVG noise (feTurbulence) - tiny, repeats seamlessly */
  background-image: var(--noise-svg);
  background-repeat: repeat;

  /* насколько заметно зерно */
  opacity: .12;

  /* делает шум очень мягким, без грязи */
  mix-blend-mode: soft-light;

  /* мелкий performance-хак против артефактов */
  transform: translateZ(0);
}

/* В light теме зерно слабее */
html.theme-light .bg-layer::after{
  opacity: .08;
}

.bg-glow{
  position: absolute;
  pointer-events:none;
  filter: blur(40px);
  opacity:.55;
}
.bg-glow--a{
  width: 520px;
  height: 520px;
  left: -140px;
  top: 140px;
  background: radial-gradient(circle at 30% 30%, rgba(var(--accent-rgb),.30), transparent 60%);
}
.bg-glow--b{
  width: 560px;
  height: 560px;
  right: -160px;
  top: 420px;
  background: radial-gradient(circle at 70% 30%, rgba(var(--glow-rgb),.22), transparent 62%);
}

/* content above glows */
.header, main, footer{
  position: relative;
  z-index: 1;
}

/* =============================
   Header
   ============================= */
.header{
  position: sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
}
html.theme-light .header{
  box-shadow: 0 10px 30px rgba(15,16,20,.06);
}

.header__inner{
  height: var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:-.02em;
}
.brand__mark{
  width:26px;
  height:26px;
  border-radius:8px;
  display:grid;
  place-items:center;
  color: var(--accent);
  background: rgba(var(--accent-rgb),.10);
  box-shadow: 0 8px 22px rgba(var(--accent-rgb),.18);
}
.brand__name{font-size:16px;}

.nav{
  display:none;
  align-items:center;
  gap:22px;
  font-size:14px;
  color: var(--muted);
}
.nav__link{padding:6px 2px;}
.nav__link:hover{color: var(--text);}

.header__actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.header__cta{display:none;}
.header__link{
  display:none;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--muted);
  font-size: 14px;
}
.header__link:hover{
  color: var(--text);
  border-color: var(--border);
  background: var(--glass);
}

.icon-btn{
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--border);
  background: var(--glass);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.icon-btn:hover{
  transform: translateY(-1px);
  border-color: var(--border-2);
  background: var(--glass-strong);
}
.icon{width:20px; height:20px;}

.burger{
  width:42px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--border);
  background: var(--glass);
  cursor:pointer;
  display:grid;
  place-items:center;
  gap:4px;
  padding:0;
}
.burger span{
  width:18px;
  height:2px;
  background: var(--text);
  border-radius:2px;
  display:block;
  transition: transform .22s ease, opacity .22s ease;
}

.mobile-nav{
  display:none;
  padding: 10px 20px 18px;
  border-top: 1px solid var(--header-border);
  background: var(--header-bg);
}
.mobile-nav__link{
  display:block;
  padding: 12px 4px;
  color: var(--muted);
}
.mobile-nav__link:hover{color: var(--text);}

/* CTA in mobile menu: make it реально читаемым и “primary” в обеих темах */
.mobile-nav__btn{
  display:block;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--accent);
  border: 1px solid rgba(var(--accent-rgb),.35);
  color: #fff;
  text-align:center;
  box-shadow: 0 16px 40px rgba(var(--accent-rgb),.16);
}
.mobile-nav__btn:hover{
  background: var(--accent-2);
}

.header.is-open .mobile-nav{display:block;}
.header.is-open .burger span:nth-child(1){transform: translateY(6px) rotate(45deg);}
.header.is-open .burger span:nth-child(2){opacity:0;}
.header.is-open .burger span:nth-child(3){transform: translateY(-6px) rotate(-45deg);}

/* Pills */
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--glass);
}
.pill--accent{
  border-color: rgba(var(--accent-rgb),.35);
  color: var(--accent);
  background: rgba(var(--accent-rgb),.08);
}
.pill--muted{
  background: rgba(var(--accent-rgb),.08);
  border-color: rgba(var(--accent-rgb),.22);
  color: var(--accent);
}

.center{text-align:center;}
.accent{color: var(--accent);}

.accent-underline{
  color: var(--accent);
  position:relative;
  display:inline-block;
  padding-bottom: 6px;
}
.accent-underline__svg{
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  color: var(--accent);
  opacity:.95;
}
.accent-underline--small{padding-bottom:4px;}
.accent-underline--small .accent-underline__svg{bottom:-5px; opacity:.85;}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid transparent;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  font-weight:600;
  letter-spacing:-.01em;
}
.btn:active{transform: translateY(1px);}

.btn--small{
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
}

.btn--primary{
  background: var(--accent);
  color: #fff;
  box-shadow: 0 18px 40px rgba(var(--accent-rgb),.22);
}
.btn--primary:hover{background: var(--accent-2); transform: translateY(-1px);}

.btn--ghost{
  background: var(--glass);
  border-color: var(--border);
  color: var(--text);
}
.btn--ghost:hover{border-color: var(--border-2); transform: translateY(-1px); background: var(--glass-strong);}

.btn--block{width:100%;}
.btn__icon{display:grid; place-items:center;}
.btn__icon .icon{width:18px; height:18px;}

@media (min-width: 980px){
  .header__inner{position:relative;}
  .nav{display:flex; position:absolute; left:50%; transform:translateX(-50%);}
  .burger{display:none;}
  .mobile-nav{display:none !important;}
  .header__cta{display:inline-flex;}
  .header__link{display:inline-flex;}
}

/* =============================
   HERO
   ============================= */
.hero{
  padding: 0;
  position:relative;
}

.hero__inner{
  position: relative;
  z-index: 1;

  text-align:center;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding: 26px 0 64px;
}

.hero__pill{margin: 0 auto 22px;}
.hero__title{
  margin:0 auto 18px;
  font-size: clamp(46px, 6.6vw, 96px);
  line-height: 1.02;
  letter-spacing:-.04em;
  font-weight:800;
  text-wrap: balance;
}
.hero__subtitle{
  margin: 0 auto 28px;
  max-width: 900px;
  color: var(--muted);
  font-size: clamp(16px, 2.2vw, 22px);
  line-height: 1.55;
  text-wrap: pretty;
}
.hero__actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom: 26px;
}
.hero__bullets{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  flex-wrap:wrap;
  color: var(--muted-2);
  font-size: 14px;
}
.bullet{display:flex; align-items:center; gap:10px;}
.bullet__dot{
  width:7px; height:7px;
  border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 0 5px rgba(var(--accent-rgb),.10);
}

/* HERO parallax layer (ONLY hero) */
.hero-parallax{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}

/* floats */
.hero-parallax .bg-float{
  position:absolute;
  color: var(--hero-float-color);
  opacity: var(--o, var(--hero-float-opacity));
  filter: drop-shadow(0 18px 60px rgba(var(--glow-rgb),.10));
  will-change: transform;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
}

.hero-parallax .bg-float__inner{
  will-change: transform;
}
.hero-parallax .bg-float__inner--soft{
  animation: floatSoft 12s ease-in-out infinite;
}

@keyframes floatSoft{
  0%,100%{ transform: translate3d(0,0,0) }
  50%{ transform: translate3d(0,-14px,0) }
}

.hero-parallax .bg-icon{
  display:block;
  opacity: .95;
}

/* per element placement + sizing */
.hero-parallax .bg-float--star{
  left: clamp(-40px, 4vw, 90px);
  top: clamp(110px, 11vh, 240px);
  --o: calc(var(--hero-float-opacity) + 0.04);
}
.hero-parallax .bg-icon--star{ width: 160px; height: 160px; }

.hero-parallax .bg-float--bubble{
  right: clamp(10px, 6vw, 150px);
  top: clamp(120px, 12vh, 260px);
  --o: calc(var(--hero-float-opacity) - 0.02);
}

.hero-parallax .bg-float--chat{
  left: clamp(140px, 18vw, 320px);
  top: clamp(150px, 24vh, 360px);
  --o: calc(var(--hero-float-opacity) - 0.06);
}
.hero-parallax .bg-icon--chat{ width: 92px; height: 92px; }

.hero-parallax .bg-float--bolt{
  right: clamp(280px, 26vw, 560px);
  top: clamp(170px, 28vh, 420px);
  --o: calc(var(--hero-float-opacity) - 0.06);
}
.hero-parallax .bg-icon--bolt{ width: 78px; height: 78px; }

.hero-parallax .bg-float--spark{
  left: clamp(220px, 30vw, 560px);
  bottom: clamp(40px, 12vh, 140px);
  --o: calc(var(--hero-float-opacity) - 0.08);
}
.hero-parallax .bg-icon--spark{ width: 62px; height: 62px; }

/* Bubble itself */
.hero-parallax .bg-bubble{
  position: relative;
  width: 172px;
  height: 108px;
  border-radius: 30px;
  border: 1px solid rgba(var(--accent-rgb),.18);
  background: rgba(var(--accent-rgb),.06);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html.theme-light .hero-parallax .bg-bubble{
  background: rgba(255,255,255,.62);
  border-color: rgba(var(--accent-rgb),.14);
}

.hero-parallax .bg-bubble::after{
  content:"";
  position:absolute;
  left: 34px;
  bottom: -10px;
  width: 22px;
  height: 22px;
  background: inherit;
  border-left: 1px solid rgba(var(--accent-rgb),.18);
  border-bottom: 1px solid rgba(var(--accent-rgb),.18);
  transform: rotate(45deg);
  border-radius: 7px;
}
html.theme-light .hero-parallax .bg-bubble::after{
  border-left-color: rgba(var(--accent-rgb),.14);
  border-bottom-color: rgba(var(--accent-rgb),.14);
}

.hero-parallax .bg-bubble__label{
  font-weight: 800;
  letter-spacing: -.03em;
  font-size: 34px;
  line-height: 1;
}
.hero-parallax .bg-bubble__plane{
  width: 22px;
  height: 22px;
  opacity: .95;
}

/* Cursor-follow orbs (hero only) */
.hero-parallax .cursor-orb{
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 999px;
  background: radial-gradient(circle at 50% 50%, rgba(var(--cursor-rgb), var(--cursor-a, .05)), transparent 60%);
  filter: blur(var(--cursor-blur));
  transform:
    translate3d(calc(var(--x, -999) * 1px), calc(var(--y, -999) * 1px), 0)
    translate(-50%, -50%);
  will-change: transform;
  opacity: 1;
  z-index: 0;
}
.hero-parallax .cursor-orb--1{
  width: 520px;
  height: 520px;
  --cursor-a: var(--cursor-a-1);
}
.hero-parallax .cursor-orb--2{
  width: 760px;
  height: 760px;
  --cursor-a: var(--cursor-a-2);
}

/* floats above orbs */
.hero-parallax .bg-float{ z-index: 1; }

/* don’t show cursor FX on touch */
@media (pointer: coarse){
  .hero-parallax .cursor-orb{display:none;}
}

/* =============================
   Sections
   ============================= */
.section{
  padding: var(--section-pad) 0;
  position:relative;
}

/* ✅ FIX: soft sections — solid tint + masked fade in paddings (no long gradient => no banding stripes) */
.section--soft{
  background: none;
  border: none;
  isolation: isolate;
}

.section--soft::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;

  /* solid tint + grain */
  background-image:
    var(--noise-svg),
    linear-gradient(0deg, var(--soft-surface), var(--soft-surface));
  background-repeat: repeat, no-repeat;
  background-blend-mode: soft-light, normal;

  /* fade only in top/bottom padding */
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 var(--soft-edge),
    #000 calc(100% - var(--soft-edge)),
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 var(--soft-edge),
    #000 calc(100% - var(--soft-edge)),
    transparent 100%
  );
}

/* keep content above the soft overlay */
.section--soft > .container{
  position: relative;
  z-index: 1;
}

.section__head{margin-bottom: 40px;}
.section__title{
  margin: 14px 0 14px;
  font-size: clamp(28px, 3.5vw, 52px);
  letter-spacing:-.03em;
  font-weight:800;
  text-wrap: balance;
}
.section__lead{
  margin: 0 auto;
  max-width: 920px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* Grid */
.grid{display:grid; gap:18px;}
.grid--3{grid-template-columns: repeat(1, minmax(0,1fr));}
.grid--2{grid-template-columns: repeat(1, minmax(0,1fr)); gap:22px;}
@media (min-width: 880px){
  .grid--3{grid-template-columns: repeat(3, minmax(0,1fr)); gap:22px;}
  .grid--2{grid-template-columns: repeat(2, minmax(0,1fr)); gap:26px;}
}

/* Cards */
.card{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  position:relative;
  overflow:hidden;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.card:hover{
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb),.35);
  box-shadow: var(--shadow);
}
.card__title{
  margin: 0 0 10px;
  font-size: 18px;
  letter-spacing:-.02em;
}
.card__text{
  margin:0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}
.card__cap{
  position:absolute;
  inset:0 0 auto 0;
  height: 54px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb),.20), rgba(var(--accent-rgb),0));
  opacity:.55;
  pointer-events:none;
}

/* Feature cards */
.feature{
  padding: 74px 18px 18px;
  min-height: 230px;
}
.feature__icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  color: var(--accent);
  background: rgba(var(--accent-rgb),.10);
  border: 1px solid rgba(var(--accent-rgb),.22);
  position:absolute;
  top: 14px;
  left: 18px;
}

/* Mini cards */
.mini{padding: 18px;}
.mini__mark{
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb),.30);
  background: rgba(var(--accent-rgb),.10);
  display:grid;
  place-items:center;
  margin-bottom: 12px;
}
.check{
  width: 9px; height: 9px;
  border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.12);
}

/* Stats */
.stats{
  margin-top: 34px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:18px;
  text-align:center;
}
.stat{
  padding: 22px 16px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border-2);
}
.stat__num{
  font-size: 44px;
  font-weight:800;
  letter-spacing:-.04em;
  margin-bottom: 6px;
}
.stat__label{
  color: var(--muted-2);
  font-size: 13px;
}
@media (min-width: 880px){
  .stats{grid-template-columns: repeat(4, minmax(0,1fr));}
}

/* =============================
   Steps FIX (arrows + numbers)
   ============================= */
.step{
  padding: 22px 24px 24px;
  min-height: 270px;
  overflow: visible; /* so arrow can live in the gap */
}

/* Make all content above the big number */
.step > :not(.step__num){
  position: relative;
  z-index: 1;
}

.step__num{
  position:absolute;
  right: 12px;
  bottom: 8px;
  top: auto;
  transform: none;
  font-size: clamp(92px, 8vw, 128px);
  font-weight:800;
  letter-spacing:-.08em;
  color: rgba(var(--accent-rgb),.12);
  line-height: 1;
  pointer-events:none;
  z-index: 0;
}
html.theme-light .step__num{ color: rgba(var(--accent-rgb),.08); }

.step__icon{
  width: 46px; height: 46px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  color: var(--accent);
  background: rgba(var(--accent-rgb),.10);
  border: 1px solid rgba(var(--accent-rgb),.22);
  margin-bottom: 14px;
}

/* Arrow: centered inside grid gap (gap desktop = 22px => half = 11px) */
.step__arrow{ display:none; }
@media (min-width: 880px){
  .step__arrow{
    display:grid;
    place-items:center;
    position:absolute;
    right: -11px;
    top: 50%;
    transform: translate(50%, -50%);
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(var(--accent-rgb),.10);
    border: 1px solid rgba(var(--accent-rgb),.22);
    color: rgba(var(--accent-rgb),.78);
    font-size: 18px;
    box-shadow: 0 14px 30px rgba(var(--accent-rgb),.10);
    pointer-events:none;
    z-index: 2;
  }
  .step:last-child .step__arrow{ display:none !important; }
}

/* Marquee */
.marquee{
  position:relative;
  overflow:hidden;
  padding: 4px 0;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track{
  display:flex;
  gap: 18px;
  width: max-content;
  animation: marquee 38s linear infinite;
}
@keyframes marquee{
  from{transform: translateX(0);}
  to{transform: translateX(-50%);}
}
.testimonial{
  width: min(440px, 88vw);
  padding: 26px;
  border: 1px solid var(--border);
  background: var(--card-bg-solid);
}
.testimonial:hover{
  transform:none;
  border-color: var(--border);
  box-shadow: var(--shadow-soft);
}
.testimonial__quote{
  color: var(--accent);
  font-size: 34px;
  line-height: 1;
  margin-bottom: 10px;
}
.testimonial__text{
  margin:0 0 16px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
  opacity: .92;
}
.testimonial__meta{display:flex; flex-direction:column; gap:4px;}
.testimonial__name{font-weight:700;}
.testimonial__role{color: var(--muted-2); font-size: 12px;}

/* Big cards */
.big{border-color: var(--border);}
.big__hero{
  height: 160px;
  /* ✅ FIX: убрали вертикальный градиент — он давал заметную “полосу” на стыке hero/body и усиливался на zoom */
  background: none;
  position:relative;
}
.big__icon{
  position:absolute;
  top: 30px;
  left: 30px;
  width: 84px; height: 84px;
  color: rgba(var(--accent-rgb),.35);
  transform: rotate(-8deg);
  opacity:.85;
}
.big__body{padding: 18px 20px 20px;}
.big__category{
  font-size: 12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.95;
  margin-bottom: 6px;
}
.big__title{
  margin:0 0 10px;
  font-size: 20px;
  letter-spacing:-.02em;
}
.big__text{
  margin:0 0 14px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 14px;
}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 10px;}
.chip{
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border);
  background: var(--glass);
  padding: 6px 10px;
  border-radius: 999px;
}

/* Pricing */
.pricing{margin-top: 12px;}
.price{ padding: 22px; overflow: visible; }
.price__head{margin-bottom: 16px;}
.price__name{margin:0 0 6px; font-size: 20px; font-weight:800; letter-spacing:-.02em;}
.price__desc{color: var(--muted-2); font-size: 13px; margin-bottom: 10px;}
.price__value{font-size: 34px; font-weight:800; letter-spacing:-.04em; line-height: 1.1;}
.price__from{font-size: 13px; color: var(--muted-2); font-weight:600; margin-right: 6px;}
.price__unit{font-size: 14px; color: var(--muted-2); font-weight:600; margin-left: 6px;}
.price__list{
  list-style:none;
  padding:0;
  margin: 0 0 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  color: var(--text);
  font-size: 13px;
  opacity: .92;
}
.price__list li{ position:relative; padding-left: 26px; }
.price__list li::before{
  content:"✓";
  position:absolute;
  left:0;
  top: 1px;
  width: 18px;
  height: 18px;
  display:grid;
  place-items:center;
  border-radius: 8px;
  color: rgba(var(--accent-rgb),.95);
  font-weight:800;
}
.price--hot{
  border-color: rgba(var(--accent-rgb),.65);
  box-shadow: 0 28px 70px rgba(var(--accent-rgb),.12);
  background:
    radial-gradient(800px 220px at 50% 0%, rgba(var(--accent-rgb),.18), transparent 60%),
    var(--card-bg);
}
.price__badge{
  position:absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight:700;
  letter-spacing:-.01em;
  box-shadow: 0 16px 40px rgba(var(--accent-rgb),.22);
}
.pricing__note{
  margin-top: 26px;
  text-align:center;
  color: var(--muted-2);
  font-size: 13px;
}

/* Start section */
.start-card__text{
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}
.start-card__actions{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 10px;
}
@media (min-width: 560px){
  .start-card__actions{ grid-template-columns: 1fr 1fr; }
}

/* Contact */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 980px){
  .contact-grid{grid-template-columns: 2fr 1fr; gap: 22px;}
}
.form-card{
  padding: 22px;
  border: 1px solid var(--border);
  background: var(--card-bg-solid);
  box-shadow: var(--shadow);
}
.form-card__title{
  font-weight:800;
  letter-spacing:-.02em;
  margin-bottom: 10px;
  font-size: 18px;
}
.form{display:flex; flex-direction:column; gap:14px;}
.form__row{display:grid; grid-template-columns: 1fr; gap: 12px;}
@media (min-width: 680px){
  .form__row{grid-template-columns: 1fr 1fr;}
}
.field{display:flex; flex-direction:column; gap:8px;}
.field__label{font-size: 13px; color: var(--text); font-weight:600;}
.field__input{
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 12px;
  outline: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.field__input:focus{
  border-color: rgba(var(--accent-rgb),.45);
  background: var(--input-bg-focus);
  transform: scale(1.01);
}
.field__input--area{resize: vertical; min-height: 130px;}

.form__hint{
  min-height: 18px;
  font-size: 13px;
  color: var(--muted-2);
}
/* ❗️Error is semantic -> keep red here */
.form__hint.is-error{ color: rgba(var(--danger-rgb),.90); }
.form__hint.is-ok{ color: var(--muted-2); }

.info{
  padding: 18px;
  display:flex;
  align-items:flex-start;
  gap: 14px;
  border: 1px solid var(--border);
  background: var(--card-bg-solid);
}
.info:hover{transform: translateY(-4px); box-shadow: var(--shadow);}
.info__icon{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  color: var(--accent);
  background: rgba(var(--accent-rgb),.10);
  border: 1px solid rgba(var(--accent-rgb),.22);
  flex: 0 0 auto;
}
.info__title{font-weight:700; margin-bottom: 4px;}
.info__text{color: var(--muted-2); font-size: 13px; line-height: 1.5;}

/* Auth pages */
.auth{ padding: 70px 0; }
.auth__inner{ max-width: 560px; margin: 0 auto; }
.auth__lead{
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}
.auth__links{
  margin-top: 12px;
  display:flex;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted-2);
  font-size: 13px;
}
.auth__links a{
  color: rgba(var(--accent-rgb),.92);
  font-weight:600;
}
.auth__links a:hover{ text-decoration: underline; }

/* Footer (no hard border line) */
.footer{
  background: var(--glass);
  padding: 44px 0;
  position: relative;
}
.footer::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--border-3), transparent);
  pointer-events:none;
  opacity:.85;
}
.footer__inner{
  display:grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 920px){
  .footer__inner{grid-template-columns: 2fr 1fr 1fr;}
}
.footer__title{font-weight:800; margin-bottom: 10px;}
.footer__text{color: var(--muted-2); font-size: 13px; line-height: 1.6; margin: 6px 0;}
.footer__link{
  display:block;
  padding: 6px 0;
  color: var(--muted);
}
.footer__link:hover{color: var(--text);}
.footer__copy{margin-top: 14px; color: var(--muted-2); font-size: 12px; opacity:.85;}
.brand--footer .brand__mark{box-shadow:none;}

/* Reveal animations */
.reveal{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-0{transition-delay: 0ms;}
.reveal--delay-1{transition-delay: 80ms;}
.reveal--delay-2{transition-delay: 160ms;}
.reveal--delay-3{transition-delay: 240ms;}
.reveal--delay-4{transition-delay: 320ms;}

.reveal-stagger .reveal{transition-delay: 0ms;}
.reveal-stagger .reveal.is-visible:nth-child(1){transition-delay: 0ms;}
.reveal-stagger .reveal.is-visible:nth-child(2){transition-delay: 80ms;}
.reveal-stagger .reveal.is-visible:nth-child(3){transition-delay: 160ms;}
.reveal-stagger .reveal.is-visible:nth-child(4){transition-delay: 240ms;}
.reveal-stagger .reveal.is-visible:nth-child(5){transition-delay: 320ms;}
.reveal-stagger .reveal.is-visible:nth-child(6){transition-delay: 400ms;}
.reveal-stagger .reveal.is-visible:nth-child(7){transition-delay: 480ms;}
.reveal-stagger .reveal.is-visible:nth-child(8){transition-delay: 560ms;}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  .marquee__track{animation:none;}
  .card,.btn,.icon-btn{transition:none;}
  .hero-parallax .bg-float__inner{animation:none;}
}


/* ===================================================================
   FIX PACK (UI clean-up)
   1) Убираем стрелки в "Как это работает"
   2) Добавляем аккуратные разделители секций при скролле
   3) Уплотняем карточки "Сценарии" (меньше пустоты, ровнее высота)
   4) Правим light theme (header + soft-секции без серого затемнения)
   =================================================================== */

/* 0) Чуть адаптивнее вертикальные отступы секций + новые переменные */
:root{
  /* На мобиле меньше “пустоты”, на десктопе сохраняем воздух */
  --section-pad: clamp(72px, 7vw, 86px);

  /* Прозрачность soft-секций */
  --soft-opacity: 1;

  /* Свечение разделителя секций */
  --divider-glow: rgba(var(--glow-rgb),.18);
}

/* Light theme: нормальный светлый header + soft-секции не серые, а брендовые */
html.theme-light{
  /* Header не должен оставаться “чёрным” */
  --header-bg: rgba(255,255,255,.72);

  /* Soft-секции: лёгкий брендовый тинт */
  --soft-surface: rgba(var(--accent-rgb),.028);
  --soft-opacity: .78;

  /* Divider чуть тише */
  --divider-glow: rgba(var(--glow-rgb),.10);
}

/* 1) Разделители секций: тонкая линия + мягкий glow сверху */
.section{
  isolation: isolate; /* создаём аккуратный слой для псевдоэлементов */
}

.section::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height: 78px;            /* живёт в верхнем padding */
  pointer-events:none;
  z-index:0;

  background:
    radial-gradient(700px 90px at 50% 0%, var(--divider-glow), transparent 70%),
    linear-gradient(90deg, transparent, var(--border-3), transparent);

  background-repeat:no-repeat;
  background-size: 100% 100%, 100% 1px;  /* линия — 1px */
  background-position: center, center top;
  opacity: .75;
}

/* Контент поверх разделителей */
.section > .container{
  position: relative;
  z-index: 1;
}

/* 2) Soft-секции: контролируем прозрачность */
.section--soft::before{
  opacity: var(--soft-opacity);
}

/* Light theme: в soft-секциях убираем “грязный” шумовой слой */
html.theme-light .section--soft::before{
  background-image: linear-gradient(0deg, var(--soft-surface), var(--soft-surface));
  background-repeat: no-repeat;
  background-blend-mode: normal;
}

/* 3) "Как это работает": стрелки убираем полностью */
.step__arrow{
  display:none !important;
}

/* 4) Чуть плотнее карточки (меньше “воздуха” там, где он выглядит пустотой) */
.feature{
  padding: 68px 18px 18px;
  min-height: 220px;
}

/* Steps: не держим огромную min-height на мобиле */
.step{
  overflow:hidden;     /* стрелки больше не нужны — не даём ничему “вылезать” */
  min-height: auto;
}
@media (min-width: 880px){
  .step{ min-height: 250px; }
}

/* 5) Сценарии: меньше пустоты в верхнем hero + более собранная композиция */
.big{
  display:flex;
  flex-direction:column;
}

.big__hero{
  height: 112px; /* было 160px — отсюда и “пустота” */
  position:relative;
  border-bottom: 1px solid var(--border-3);

  background:
    radial-gradient(520px 220px at 20% 0%, rgba(var(--accent-rgb),.18), transparent 60%);
}

html.theme-light .big__hero{
  background:
    radial-gradient(520px 220px at 20% 0%, rgba(var(--accent-rgb),.10), transparent 60%);
}

.big__icon{
  top: 18px;
  left: 20px;
  width: 64px;
  height: 64px;
  color: rgba(var(--accent-rgb),.42);
  opacity: .9;
}

.big__body{
  padding: 16px 20px 18px;
  display:flex;
  flex-direction:column;
  flex: 1 1 auto;
}

.big__text{
  margin: 0 0 12px;
}

.chips{
  margin-top:auto;    /* чипсы вниз — карточки выглядят ровнее */
  margin-bottom: 0;   /* убираем лишний “хвост” */
}

/* 6) Тарифы: кнопки ровно по низу (меньше ощущения “разного роста”) */
.price{
  display:flex;
  flex-direction:column;
  height: 100%;
}

.price__list{
  flex: 1 1 auto;
}

.price .btn{
  margin-top:auto;
}


/* ===================================================================
   UPDATE PACK (layout + pricing + hero decor)
   1) Pills (“# ...”) spacing
   2) Less-saturated primary buttons
   3) More + varied hero parallax shapes (AI + plane split)
   4) Feature cards header layout (title next to icon)
   5) About mini cards header layout (title next to dot)
   6) Workflow steps header layout (title next to icon)
   7) Scenarios cards header layout (category + title in head)
   8) Pricing: 4 plans (Free / Pro / Unlimited / Business)
   9) Start: remove “Время ответа” card and align nicely
   =================================================================== */

/* 2) Primary button: make it more “calm” (keep brand, less neon) */
:root{
  --action: #2f6fed;
  --action-2: #275ed3;
  --action-rgb: 47,111,237;
  --action-2-rgb: 39,94,211;

  /* keep existing --accent as section highlight color, but use calmer action for buttons */
}

.btn--primary{
  background: var(--action) !important;
  box-shadow: 0 18px 40px rgba(var(--action-rgb),.18) !important;
}
.btn--primary:hover{
  background: var(--action-2) !important;
}

.mobile-nav__btn{
  background: var(--action) !important;
  border-color: rgba(var(--action-rgb),.35) !important;
  box-shadow: 0 16px 40px rgba(var(--action-rgb),.14) !important;
}
.mobile-nav__btn:hover{ background: var(--action-2) !important; }

.price__badge{
  background: var(--action) !important;
  box-shadow: 0 16px 40px rgba(var(--action-rgb),.18) !important;
}

/* Make focus ring match action buttons */
:root{ --focus-ring: rgba(var(--action-rgb),.45); }

/* 1) Pills: more space between tag and headline (tag “above”) */
.hero__pill{
  margin: 0 auto 40px !important; /* ~2x */
}

.section__head .pill{
  margin-bottom: 22px;
}

/* title spacing inside section heads: gap controlled by pill margin */
.section__head .section__title{
  margin-top: 0 !important;
}

/* 3) Hero: more decor + AI/plane split */
.hero-parallax .bg-bubble{
  /* allow per-variant sizing via CSS vars */
  width: var(--bw, 172px) !important;
  height: var(--bh, 108px) !important;
  border-radius: 28px;
}

.hero-parallax .bg-bubble--ai{
  --bw: 136px;
  --bh: 92px;
}
.hero-parallax .bg-bubble--plane{
  --bw: 118px;
  --bh: 86px;
}

/* little “badge” look for plane bubble */
.hero-parallax .bg-bubble--plane{
  justify-content: center;
  gap: 0;
}

.hero-parallax .bg-float--ai{
  right: clamp(30px, 7vw, 190px);
  top: clamp(110px, 12vh, 250px);
  --o: calc(var(--hero-float-opacity) - 0.01);
}
.hero-parallax .bg-float--plane{
  right: clamp(120px, 16vw, 380px);
  top: clamp(210px, 26vh, 420px);
  --o: calc(var(--hero-float-opacity) - 0.05);
}

.hero-parallax .bg-float--cloud{
  left: clamp(10px, 7vw, 180px);
  bottom: clamp(40px, 10vh, 160px);
  --o: calc(var(--hero-float-opacity) - 0.08);
}
.hero-parallax .bg-icon--cloud{ width: 110px; height: 110px; }

.hero-parallax .bg-float--db{
  left: clamp(90px, 14vw, 260px);
  top: clamp(86px, 12vh, 210px);
  --o: calc(var(--hero-float-opacity) - 0.09);
}
.hero-parallax .bg-icon--db{ width: 74px; height: 74px; }

.hero-parallax .bg-float--headset{
  right: clamp(70px, 18vw, 470px);
  bottom: clamp(60px, 12vh, 180px);
  --o: calc(var(--hero-float-opacity) - 0.09);
}
.hero-parallax .bg-icon--headset{ width: 70px; height: 70px; }

.hero-parallax .bg-float--bot{
  left: clamp(260px, 36vw, 620px);
  top: clamp(110px, 18vh, 300px);
  --o: calc(var(--hero-float-opacity) - 0.10);
}
.hero-parallax .bg-icon--bot{ width: 66px; height: 66px; }

/* On small screens: hide some extra floats to avoid clutter */
@media (max-width: 520px){
  .hero-parallax .bg-float--db,
  .hero-parallax .bg-float--headset,
  .hero-parallax .bg-float--bot{
    display:none;
  }
}

/* 4) Features: title in header next to icon */
.feature{
  padding: 18px !important;
  min-height: 220px;
  display:flex;
  flex-direction:column;
}
.feature__head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 12px;
}
.feature__icon{
  position: static !important;
  top:auto !important;
  left:auto !important;
  margin:0;
  flex: 0 0 auto;
}
.feature__title{
  margin:0 !important;
  line-height: 1.25;
}

/* 5) About mini: put title next to blue dot */
.mini__head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 10px;
}
.mini__mark{ margin:0 !important; }
.mini .card__title{ margin:0 !important; }

/* 6) Workflow: title next to icon */
.step__head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 12px;
}
.step__icon{ margin:0 !important; }
.step .card__title{ margin:0 !important; }

/* 7) Scenarios: header with icon + category + title */
.big{
  overflow:hidden;
}
.big__head{
  display:flex;
  align-items:center;
  gap:14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-3);
  background:
    radial-gradient(520px 220px at 20% 0%, rgba(var(--accent-rgb),.16), transparent 60%);
}
html.theme-light .big__head{
  background:
    radial-gradient(520px 220px at 20% 0%, rgba(var(--accent-rgb),.10), transparent 60%);
}

.big__icon{
  position: static !important;
  top:auto !important;
  left:auto !important;
  transform:none !important;
  width: 48px !important;
  height: 48px !important;
  color: rgba(var(--accent-rgb),.52) !important;
  opacity: .95 !important;
  flex: 0 0 auto;
}
.big__head-text{
  min-width: 0;
}
.big__category{
  margin:0 0 4px !important;
  font-size: 11px;
}
.big__title{
  margin:0 !important;
  font-size: 18px;
}

/* Make body a bit tighter since head exists now */
.big__body{
  padding: 14px 18px 18px !important;
}

/* 8) Pricing: responsive 4-plan grid */
.grid--4{ grid-template-columns: repeat(1, minmax(0,1fr)); }

@media (min-width: 740px){
  .grid--4{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; }
}
@media (min-width: 1140px){
  .grid--4{ grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
}

/* 9) Start: align side cards nicely */
.contact-grid__side{
  display:grid;
  gap: 18px;
}

/* keep side column tidy on desktop too */
@media (min-width: 980px){
  .contact-grid__side{ gap: 22px; }
}

/* =========================================================
   PATCH (по задачам из сообщения)
   1) HERO: убрать "рамки" у AI/самолётика + добавить 2-3 иконки
   2) FEATURES: увеличить высоту шапки (card__cap), чтобы не резала иконку/текст
   3) SCENARIOS: иконка + категория рядом, заголовок ниже
   ========================================================= */

/* 1) HERO bubbles: без обводки/рамки (AI + plane) */
.hero-parallax .bg-bubble{
  border: none !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}
html.theme-light .hero-parallax .bg-bubble{
  border: none !important;
  box-shadow: 0 18px 50px rgba(15,16,20,.08);
}
.hero-parallax .bg-bubble::after{
  border-left: none !important;
  border-bottom: none !important;
}

/* 1b) NEW hero floats placement + sizing */
.hero-parallax .bg-float--gear{
  left: clamp(40px, 10vw, 230px);
  bottom: clamp(180px, 30vh, 520px);
  --o: calc(var(--hero-float-opacity) - 0.11);
}
.hero-parallax .bg-icon--gear{ width: 72px; height: 72px; }

.hero-parallax .bg-float--shield{
  right: clamp(-10px, 3vw, 120px);
  bottom: clamp(220px, 34vh, 560px);
  --o: calc(var(--hero-float-opacity) - 0.12);
}
.hero-parallax .bg-icon--shield{ width: 70px; height: 70px; }

.hero-parallax .bg-float--chart{
  right: clamp(220px, 32vw, 760px);
  bottom: clamp(10px, 7vh, 120px);
  --o: calc(var(--hero-float-opacity) - 0.12);
}
.hero-parallax .bg-icon--chart{ width: 64px; height: 64px; }

@media (max-width: 520px){
  .hero-parallax .bg-float--gear,
  .hero-parallax .bg-float--shield,
  .hero-parallax .bg-float--chart{
    display:none;
  }
}

/* 2) FEATURES: шапку (card__cap) чуть ниже конца иконки */
.feature .card__cap{
  height: 78px;
}

/* 3) SCENARIOS: иконка + категория в одну строку, заголовок ниже */
.big__head{
  display:block !important;
}

.big__meta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 6px;
}

/* уменьшаем контейнер иконки (раньше был 48px и давал “далеко”) */
.big__meta .big__icon{
  width: 20px !important;
  height: 20px !important;
  position: static !important;
  transform: none !important;
  opacity: .9 !important;
  color: rgba(var(--accent-rgb),.85) !important;
  display:grid;
  place-items:center;
}

.big__meta .big__icon .icon{
  width: 20px;
  height: 20px;
}

.big__category{
  margin:0 !important;
  line-height: 1;
}

.big__title{
  margin:0 !important;
}


/* =========================================================
   USER TWEAKS (requested)
   1) FEATURES: cap doesn't overlap text + a touch more spacing
   2) SECTION DIVIDER: wider x2 and a bit dimmer
   3) HERO PARALLAX: icons visible in both themes (esp. light)
   4) HERO AI + PLANE: remove bubble рамка/background -> pure icon/text
   ========================================================= */

/* 1) Features: put decorative cap BEHIND content (so it never "overlaps") */
.feature{
  position: relative;
}
.feature .card__cap{
  z-index: 0;
}
.feature > :not(.card__cap){
  position: relative;
  z-index: 1;
}
/* small extra breathing room under header */
.feature .card__text{
  margin-top: 6px;
}

/* 2) Divider between sections: wider glow + slightly dimmer */
:root{
  --divider-glow: rgba(var(--glow-rgb),.12);
}
html.theme-light{
  --divider-glow: rgba(var(--glow-rgb),.08);
}

.section::after{
  background:
    radial-gradient(1400px 110px at 50% 0%, var(--divider-glow), transparent 70%),
    linear-gradient(90deg, transparent, var(--border-3), transparent);
  opacity: .56;
}

/* 3) Light theme: make parallax icons readable (was too faint) */
html.theme-light{
  --hero-float-color: rgba(var(--accent-rgb),.72);
  --hero-float-opacity: 0.26;
}

/* 4) AI + plane: no bubble (no background, no tail, no border) */
.hero-parallax .bg-bubble{
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.hero-parallax .bg-bubble::after{
  display:none !important;
}

/* slightly bigger plane so it looks like other icons */
.hero-parallax .bg-bubble__plane{
  width: 34px;
  height: 34px;
  opacity: .95;
}

/* AI text: a bit more "icon-like" */
.hero-parallax .bg-bubble__label{
  font-size: 40px;
  letter-spacing: -.05em;
  opacity: .92;
}

/* =========================================================
   FINAL FIXES (по твоим 3 пунктам)
   1) HERO параллакс: робот выше/левее, молния выше/правее
   2) Переходы секций: без растянутых светлых “полос”
   3) Features: больше воздуха между шапкой и текстом
   ========================================================= */

/* 2) Soft-секции: fade короче и чуть менее контрастный (меньше “полосатости”) */
:root{
  --soft-edge: clamp(16px, 2.2vw, 26px);
  --soft-opacity: .90;
  --soft-surface: rgba(255,255,255,.018);
}

/* 2) Разделитель секций: вместо широкой полосы — короткий мягкий glow */
.section::after{
  height: 42px;
  background: radial-gradient(900px 70px at 50% 0%, var(--divider-glow), transparent 72%);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  opacity: .34;
}

/* 2) На soft-секциях разделитель не нужен (там и так есть подложка) */
.section--soft::after{
  content: none;
}

/* 3) Features: нормальный отступ между шапкой и текстом */
.feature__head{
  margin-bottom: 16px;
}
.feature .card__text{
  margin-top: 0;
}

/* 1) HERO: корректировка позиций (только на desktop, чтобы не лезло в текст на мобиле) */
@media (min-width: 900px){
  /* Голова робота — чуть выше и левее */
  .hero-parallax .bg-float--bot{
    left: clamp(200px, 30vw, 540px);
    top: clamp(80px, 14vh, 240px);
  }

  /* Молния — выше и правее, подальше от текста */
  .hero-parallax .bg-float--bolt{
    right: clamp(170px, 18vw, 440px);
    top: clamp(120px, 20vh, 320px);
  }
}