/* 
style.css — базовые стили сайта (ОПТИМИЗИРОВАНО)
Ключевые настройки цветов/размеров — в design-tokens.css (подключается из HTML).
*/

*{box-sizing:border-box}
html,body{
  padding: 0;
  padding-bottom: 96px;
height:100%}

body{
  margin: 0;
  padding: 0;
  padding-bottom: 96px;

  color: var(--ink);
  background:
    radial-gradient(1200px 800px at -10% -10%, rgba(15,74,78,.20) 0, transparent 60%),
    radial-gradient(1200px 800px at 120% 0%,  rgba(10,60,63,.20) 0, transparent 60%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg1) 80%, transparent),
      color-mix(in srgb, var(--bg2) 80%, transparent)
    ),
    url("images/photo6.png") top center / 100% auto no-repeat,
    #0a1f22;

  font-family: var(--font-family);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  overflow-x: hidden;
  font-size: var(--font-size-base);
}

body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    linear-gradient(transparent calc(var(--grid-size) - 1px), rgba(95,245,217,.08) var(--grid-size)),
    linear-gradient(90deg, transparent calc(var(--grid-size) - 1px), rgba(95,245,217,.08) var(--grid-size));
  background-size:var(--grid-size) var(--grid-size);
  mix-blend-mode:screen;
  opacity:.2;           /* было .5 → делаем 20% */
  z-index:0;
}

/* ===== Layout primitives ===== */
.wrap{
  max-width: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding:0;
  position: relative;
  z-index: 1;
}
/* Full-bleed container for backgrounds and media stretching edge-to-edge */
.wrap-bleed{
  max-width: 100vw;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0;
  padding-right: 0;
}

.screen{ min-height: 100svh; display:grid; place-items:center; position:relative; overflow:hidden; padding: clamp(12px, 3vw, 28px); }
.tone-1{ background: linear-gradient(180deg, rgba(6,34,37,.75), rgba(4,21,24,.75)); }
.tone-2{ background: linear-gradient(180deg, rgba(9,44,47,.75), rgba(5,26,29,.75)); }
.tone-3{ background: linear-gradient(180deg, rgba(10,35,50,.75), rgba(7,20,33,.75)); }

/* Панели — прозрачные, без рамок/уголков (новый дизайн) */
.panel{ background:transparent; border:none; box-shadow:none; border-radius: var(--radius-panel); }
.panel::before, .panel::after{ display:none !important; }

/* ===== Brand ===== */
.brand{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;margin-bottom:6px;color:var(--ink-dim)}
.chip {
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  font-size: 20px;  /* ← увеличенный размер текста */
  color: #5ff5d9;
  font-weight: 200; /* опционально для акцента */
}
.dot{width:8px;height:8px;background:var(--ink);box-shadow:0 0 12px var(--ink);border-radius:50%}

/* ===== Typography ===== */
h1{
  font:600 var(--h1-size)/var(--h1-line-height) var(--font-family);
  margin:0 0 14px;
  letter-spacing:1px;
  color:var(--ink-strong);
  text-transform:uppercase;
  text-shadow:0 0 18px rgba(95,245,217,.25);
}
h2{
  font:600 var(--h2-size)/var(--h2-line-height) var(--font-family);
  margin:0 0 10px;letter-spacing:.6px;color:var(--ink-strong);text-transform:uppercase
}
h2::before{content:"[ ";color:var(--ink-dim)}
h2::after{content:" ]";color:var(--ink-dim)}
.subtitle{color:var(--subtitle-color);margin-bottom:16px}
.h3{ font: normal var(--font-size-base)/var(--line-height-base) var(--font-family); color: var(--ink-strong); letter-spacing: var(--letter-spacing-base); text-transform:none; display:inline;}
.kbd{padding: 1px 3px;border:var(--border-width) var(--border-style) var(--ink-dim);display:inline-block;margin:0 4px}
.center{text-align:center}
.full-bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}

/* ===== CTA / Buttons ===== */
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;color:var(--cta-text);
  background:var(--cta);
  padding:var(--btn-padding-y) var(--btn-padding-x);
  border:none;
  font:var(--btn-font-weight) var(--btn-font-size) var(--font-family);
  box-shadow:var(--btn-shadow);
  transition:transform .08s ease, box-shadow .18s ease, opacity .2s ease;
  letter-spacing:.4px;
  border-radius:var(--btn-radius);
}
.cta:hover{transform:translateY(-1px);box-shadow:var(--btn-shadow-hover)}

.go-bot.cta{
  background:var(--cta1);
  box-shadow:var(--btn-primary-shadow);
  padding:var(--btn-primary-padding-y) var(--btn-primary-padding-x);
  color:#fff;
}
.go-bot.cta:hover{ box-shadow:var(--btn-primary-shadow-hover); }

/* Унификация размеров кнопок/тайлов */
.go-bot.cta, .agency .tile{ 
  width: 100%;
  min-height: var(--btn-min-height);
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
}

.micro{font-size:var(--micro-size);color:var(--ink-dim);margin-top:10px}
.micro a{color:var(--ink);text-decoration:none;border-bottom:var(--border-width) var(--border-style) var(--ink-dim)}
.micro a:hover{color:var(--ink-strong);border-bottom-color:var(--ink-strong)}

/* ===== Tiles / Steps ===== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.step{padding: 8px; background: rgba(255,255,255,.03); border-radius: 10px}
.agency{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tile{
  background:var(--cta);
  color:var(--cta-text);
  font: var(--btn-font-weight) var(--btn-font-size) var(--font-family);
  padding: var(--btn-primary-padding-y) var(--btn-primary-padding-x);
  letter-spacing:.2px;
  box-shadow: var(--btn-shadow);
  text-transform:uppercase;
  text-decoration:none;
  border-radius:var(--tile-radius);
  line-height:1.15;
}

/* ===== Footer ===== */
footer{margin:24px auto 16px;color:var(--ink-dim);font-size:13px;text-align:center}
footer a{color:var(--ink);text-decoration:none;border-bottom:var(--border-width) var(--border-style) var(--ink-dim)}
footer a:hover{color:var(--ink-strong);border-bottom-color:var(--ink-strong)}

/* ===== Cookie banner ===== */
#cookie-banner{
  position:fixed;left:50%;bottom:12px;transform:translateX(-50%);
  width:min(980px,92vw);padding: 7px 7px;
  display:none;
  background:rgba(0,0,0,.55);
  border:var(--border-width) var(--border-style) var(--panel-border);
  box-shadow:0 0 24px rgba(54,231,207,.25);
  z-index:999;
  backdrop-filter: blur(2px);
}
#cookie-banner.show{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}
#cookie-banner p{margin:0;color:var(--ink);font-size:14px;line-height:1.45;text-align:left}
#cookie-banner a{color:var(--ink-strong);text-decoration:none;border-bottom:var(--border-width) var(--border-style) var(--ink-dim)}
#cookie-accept{
  white-space:nowrap;
  padding:10px 14px;border:none;cursor:pointer;
  font:var(--btn-font-weight) 14px var(--font-family);
  color:var(--cta-text);background:var(--cta);
  box-shadow:0 0 18px rgba(54,231,207,.45);
  border-radius: var(--btn-radius);
}

/* ===== Galleries ===== */
/* About-bot / Index */
#plan-look .gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  justify-content:center;
  align-items:start;
}
#plan-look .gallery img{
  width:100%;
  height:auto;
  object-fit:cover;
  border:var(--gallery-border-width) solid var(--accent-primary);
  box-shadow:var(--gallery-glow);
  display:block;
}

/* New index section gallery */
#about-bot .wrap{ display:grid; gap:12px; }
#about-bot .grid{ display:grid; gap:14px; grid-template-columns: repeat(3, 1fr); }
#about-bot .grid img{
  width:100%; height:auto; object-fit: cover;
  border: var(--gallery-border-width) solid var(--accent-primary);
  box-shadow: var(--gallery-glow);
}

#hero{
  position: relative;
  isolation: isolate;
  overflow: visible;              
  background: none;               
}

/* Полупрозрачный фон поверх фото (20%) */
#hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,31,34,.20), rgba(10,31,34,.20));
  pointer-events:none;
  z-index: 2;                     /* фон-оверлей выше фото, ниже текста */
}

/* Декоративное свечение поверх фона */
#hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(800px 500px at 30% 10%, rgba(126,60,224,.22), transparent 60%);
  pointer-events:none;
  z-index: 3;
}

/* Картинка геро-блока: на всю ширину, без обрезания низа, сохраняет пропорции */
#hero .hero-photo{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;       /* на всю ширину экрана */
  height: auto;       /* сохраняем пропорции => низ не обрежется */
  max-width: none;
  z-index: 1;         /* под полупрозрачным фоном, над «настоящим» бэкграундом страницы */
  pointer-events: none;
  display:block;
}

/* Контент поверх всего */
#hero .wrap{ position: relative; z-index: 4; }

/* Главная кнопка (sticky) */
.sticky-cta{ position: relative; z-index: 2; display:flex; flex-direction:column; align-items:center; gap:8px;
  transition: transform 220ms ease-in-out, box-shadow 220ms ease-in-out, background-color 220ms ease-in-out; will-change: transform; }
#sticky-spacer{ transition: height 220ms ease-in-out; }
.sticky-cta.stuck{
  position: fixed; top:0; left:0; right:0; width:100%;
  margin:0; padding:8px 12px;
  background:#0a1f22; backdrop-filter: blur(8px);
  border-bottom: var(--border-width) var(--border-style) var(--panel-border);
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
  z-index: 2147483647 !important;
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center;
  transform: translateY(0);
}
.sticky-cta.stuck-enter{ transform: translateY(-12px); }
.sticky-cta.unstuck-enter{ transform: translateY(-8px); }
.sticky-cta .micro{ background: rgba(255,255,255,.08); color:#b3bcc3; border-radius:8px; padding:3px 5px; text-align:center; }
.sticky-cta.stuck .micro{ background: rgba(255,255,255,.12); color:#b3bcc3; }

/* В хиро — центрируем CTA и подпись */
#hero #sticky-cta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;  /* было center */
  gap:8px;
  margin-left: 7cm;        /* отступ от левого края главная кнопка (от wrap) */
  margin-top: 40x;        /* поднять/опустить кнопку */
}
#hero #sticky-cta .micro{ text-align:center; margin-top:8px; }

/* ===== Header & Off‑canvas menu (встраивается в sticky) ===== */
.header{
  position: absolute;
  top: 1cm;                 /* сверху 2см */
  left: 2cm;                /* слева 2см */
  right: 2cm;               /* справа 2см */
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-start;  /* содержимое будет прижато к левому краю внутри */
  padding: 0.5cm 2cm;       /* внутренние отступы: сверху/снизу 0.5см, слева/справа 2см */
}
.header .brand-mini{
  display: inline-flex; gap: 10px; align-items: center; color: var(--ink-dim);
  font-size: 14px;
}

.burger:hover{ transform: translateY(-1px); }







/* ===== Cards carousel ===== */
.carousel{
  display: flex; gap: 14px; overflow-x: auto; padding: 6px 2px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  cursor: grab;
}

/* === CONTROL: параметры размеров карточек (меняйте здесь) ===
   --card-w: ширина карточки
   --card-h: высота карточки (общая)
   --card-media-h: высота окна под фото внутри карточки
*/
#control{
  /* Responsive card width: close to half of viewport on desktops, full on mobile */
  --card-w: clamp(300px, 46vw, 620px);

  /* 576×800 portrait images — make image nearly as wide as card, accounting for 16px padding left/right */
  --img-w: min(576px, calc(var(--card-w) - 32px));
  --img-h: calc(var(--img-w) * (800 / 576));

  /* Vertical offset (preserve existing setting if referenced) */
  --control-offset-y: var(--control-offset-y, 0px);
}
.carousel::-webkit-scrollbar{ height: 8px; }
.carousel::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.2); border-radius: 8px; }
.card{
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  height: auto;
  box-sizing: border-box;

  display: grid;
  grid-template-rows: auto auto;
  gap: 0;                 /* чтобы уложиться ровно в общую высоту */
  padding: 0;             /* без паддингов, иначе «съедят» размеры */

  background: rgba(255,255,255,.04);
  border-radius: 12px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Изображение — центрируем и задаём точные габариты 360×756.25 */
#control .card img{
  width: var(--img-w);
  height: auto;
  aspect-ratio: 576 / 800;
  display: block;
  margin: 0 auto 10px;
  object-fit: cover;
  border-radius: 10px;
}

/* Подпись — в полоске 5.75px (текст не будет читаемым при такой высоте) */
#control .card .text{
  color: #fff;
  font-size: var(--micro-size);
  text-align: center;
  height: auto;
  line-height: 1.4;
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
}


/* ===== Page-specific tweaks ===== */
/* INDEX: текст слева, CTA центрируется самим блоком */
.page-index :where(p, .subtitle, .micro, li, .step, footer, #cookie-banner p){ text-align:left !important; text-justify:auto !important; }
.page-index .hero-panel .subtitle, .page-index .hero-panel p, .page-index .hero-panel li{ text-align:left !important; text-justify:auto !important; }

@media (min-width: 961px){
  #hero .go-bot.cta{ width:30%; min-height: var(--btn-min-height); } /*ширина главной кнопки*/
}

/* Responsive: steps/tiles in одну колонку, галереи */
@media (max-width:960px){
  .steps,.agency{grid-template-columns:1fr}
}
@media (max-width:980px){
  #plan-look .gallery, #about-bot .grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:560px){
  #about-bot .grid{ grid-template-columns: 1fr; }
  #hero .go-bot.cta{ width: 100%; min-width: 0; }
}
@media (max-width:420px){
  h1{font-size:calc(var(--h1-size) - 10px)}
  .wrap{padding:22px}
}
@media (max-width:380px){
  .go-bot.cta{ padding-top: calc(var(--btn-primary-padding-y) + 2px); padding-bottom: calc(var(--btn-primary-padding-y) + 2px); }
}
@media (max-width: 560px){
  #hero #sticky-cta{
    margin-left: 0;         /* убираем левый отступ на мобильных */
    align-items: stretch;   /* кнопка снова на всю ширину */
  }
}
.hero-title{
  margin-left: 2cm;
  margin-top: 200px;
}
/* HERO: позиция подписи «активируй…» */
#hero .kicker{
  margin-top: 70px;   /* опускаем ниже заголовка */
  margin-left: 7cm;   /* сдвигаем вправо относительно левого края wrap */
  max-width: 100%;
}

/* На мобильных — вернуть к обычной сетке */
@media (max-width: 560px){
  #hero .kicker{
    margin-left: 0;
    margin-top: 12px;
  }
}
/* === Custom neon list style === */
.custom-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 16px 0;
}

.custom-list li {
  position: relative;
  padding-left: 1.5em;
  margin: 0.5em 0;
}

.custom-list li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: #00fff7;
  font-weight: bold;
  text-shadow: 0 0 5px #00fff7,
               0 0 10px #00e6ff,
               0 0 20px #00bfff;
  animation: neon-flicker 2s infinite alternate;
}

@keyframes neon-flicker {
  0% {
    opacity: 1;
    text-shadow: 0 0 4px #00fff7,
                 0 0 8px #00e6ff,
                 0 0 15px #00bfff;
  }
  50% {
    opacity: 0.7;
    text-shadow: 0 0 2px #00fff7,
                 0 0 4px #00e6ff,
                 0 0 8px #00bfff;
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 6px #00fff7,
                 0 0 12px #00e6ff,
                 0 0 24px #00bfff;
  }
}
/* kbd: видимый контур независимо от глобальных токенов */
.kbd{
  border: 1px solid var(--ink-dim) !important;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  padding: 1px 4px; /* чуть комфортнее */
}
/* Локальная тёмная прозрачная подложка только под блок манифеста */
#manifest{ 
  position: relative; 
  padding: clamp(12px, 3vw, 28px) 0; 
  isolation: isolate;
  margin-top: 60px; 
}

#manifest .shade-box{
  margin-left: 2%;                           /* отступ от левого края */
  margin-right: 2%;
  background: rgba(5,19,22,.66);              /* тёмная прозрачная подложка */
  border: 1px solid rgba(85,247,224,.25);     /* лёгкий контур */
  border-radius: 14px;
  padding: 18px 60px;
  box-shadow: 0 10px 34px rgba(0,0,0,.35) inset,
              0 0 24px rgba(126,60,224,.12);
  position: relative;
  top: 0; /* поднимет только подложку с текстом */
}
#manifest .wrap{
  padding-left: var(--page-pad);
  padding-right: var(--page-pad);
}

/* Рамка вокруг .kbd независимо от глобальных токенов */
.kbd{
  border: 1px solid var(--ink-dim) !important;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  padding: 1px 4px;
}

/* === CONTROL: вертикальный сдвиг блока ===
   Меняйте переменную --control-offset-y, чтобы поднять/опустить блок #control целиком.
   Пример:  --control-offset-y: -40px;  (поднять на 40 пикселей)
            --control-offset-y:  60px;  (опустить на 60 пикселей)
*/
#control{ --control-offset-y: 100px; }
#control .wrap{ transform: translateY(var(--control-offset-y)); }


/* === CONTROL: кнопки прокрутки (треугольники / киберпанк) === */
.control-nav{display: grid; grid-auto-flow: column; gap: 8px; align-items: center; justify-content: flex-end; /* слева от карусели */ margin-bottom: 0; /* над карточками */ margin-left: auto; flex: 0 0 auto; max-width: 100%;  margin-left:auto; flex:0 0 auto; align-items:center; z-index:7; }
.ctrl-btn{appearance: none; border: 1px solid rgba(85,247,224,.45); background: linear-gradient(180deg, rgba(8,28,31,.9), rgba(4,18,21,.9)); color: #5ff5d9; border-radius: 10px; padding: 6px 8px; cursor: pointer; box-shadow: 0 0 18px rgba(54,231,207,.25), inset 0 0 12px rgba(126,60,224,.25); transition: transform .08s ease, box-shadow .18s ease; min-width: 44px; min-height: 44px;  min-width:44px; min-height:44px; display:inline-grid; place-items:center; }
.ctrl-btn:hover{ transform: translateY(-1px); box-shadow: 0 0 22px rgba(54,231,207,.35), inset 0 0 14px rgba(126,60,224,.35); }
.ctrl-btn:active{ transform: translateY(0); }
.ctrl-btn svg{ display:block }

.carousel.dragging{ cursor: grabbing; }

/* Шапка "Управление" с заголовком и стрелками */
#control .control-header{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
  width: 100%;

  padding-left: 1.5px;
  padding-right: 1.5px;
  box-sizing: border-box;
}

#control .carousel{
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
#control .control-header h2{ margin: 0; }

#control .carousel{ width:100%; overflow-y:hidden; }

/* === Fixes for CONTROL carousel === */
.carousel, .carousel *{ -webkit-user-select: none; user-select: none; }
#control .carousel{ overflow-x: auto; }

/* Disable native image dragging over Splide to allow mouse-drag scrolling */


/* == CONTROL x Splide: адаптация под визуальную систему == */
#control .splide {
  overflow: hidden;
  padding: 6px 2px 12px;
  max-width: 100%;
  direction: ltr;
}

#control .splide__list {
  align-items: stretch;
}

#control .splide__slide {
  width: var(--card-w) !important;
  flex: 0 0 var(--card-w);
}

#control .splide__slide .card{
  width: var(--card-w);
  max-width: var(--card-w);
  flex: 1 1 auto;
}

#control .splide__pagination{
  position: static;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

#control .splide__pagination__page {
  background: rgba(255,255,255,.35);
  opacity: 1;
}

#control .splide__pagination__page.is-active {
  background: #5ff5d9;
  box-shadow: 0 0 8px rgba(95,245,217,.75);
}

#control .control-nav .ctrl-btn { pointer-events: auto; }

/* Disable native image dragging over Splide to allow mouse-drag scrolling */
#control .control-splide img { -webkit-user-drag: none; user-select: none; }

/* == Splide adjustments (control slider) == */
#control .splide{ overflow: hidden; padding: 6px 2px 12px; }
#control .splide__list{ align-items: stretch; }
#control .splide__slide{ width: var(--card-w) !important; flex: 0 0 var(--card-w); }
#control .splide__slide .card{ width: var(--card-w); max-width: var(--card-w); }
#control .splide__pagination{ position: static; margin-top: 8px; gap: 6px; }
#control .splide__pagination__page{ background: rgba(255,255,255,.35); opacity: 1; }
#control .splide__pagination__page.is-active{ background: #5ff5d9; box-shadow: 0 0 8px rgba(95,245,217,.75); }



/* === CONTROL: layout fixes (stretch to full width; no grid centering; no clipping) === */
#control{ display:block; overflow:visible; }
#control.screen{ display:block; }             /* override .screen grid centering */
#control .wrap{ width:100%; margin:0; }       /* keep full width */
#control .splide{ width:100%; }               /* slider spans container */
#control .splide__track{ overflow:visible; }  /* don't clip arrows/pagination */
#control .splide__list{ justify-content:flex-start; } /* align list to left edge */

/* Center pagination precisely under the track */
#control .splide__pagination{
  position: static;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 0;
  margin-right: 0;
}


#control .control-header{ overflow: visible; width: 100%; }


/* === Sticky CTA: центр + бургер справа, управляемые размеры === */
.sticky-cta.stuck{
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.sticky-cta.stuck .go-bot.cta{
  width: var(--sticky-btn-width);
  min-height: var(--sticky-btn-height);
}
.sticky-cta.stuck .micro{ display: none; }
.sticky-cta 
.sticky-cta.stuck 

/* === Dropdown menu: белый фон, серые записи, ширина = кнопка + бургер === */




.menu a:hover{ background: #f3f4f6; color: #111827; }

/* === Floating clone CTA topbar === */





/* === Animated Burger Button === */

.burger {
  position: relative;
  border: none;
  background: transparent;
  width: 40px;
  height: 26px;
  cursor: pointer;
}
.burger::before,
.burger::after {
  content: '';
  left: 0;
  position: absolute;
  display: block;
  width: 100%;
  height: 4px;
  border-radius: 10px;
  background: #fff;
}
.burger::before {
  top: 0;
  box-shadow: 0 11px 0 #fff;
  transition: box-shadow .3s .15s, top .3s .15s, transform .3s;
}
.burger::after {
  bottom: 0;
  transition: bottom .3s .15s, transform .3s;
}
.burger.active::before {
  top: 11px;
  transform: rotate(45deg);
  box-shadow: 0 6px 0 rgba(0,0,0,0);
  transition: box-shadow .15s, top .3s, transform .3s .15s;
}
.burger.active::after {
  bottom: 11px;
  transform: rotate(-45deg);
  transition: bottom .3s, transform .3s .15s;
}



/* === Floating CTA (button + burger) === */
.floating-cta{
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translate(-50%, -16px);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  z-index: 20000;
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  pointer-events: none; /* контейнер не перехватывает клики */
}
.floating-cta.show{
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: none;
}
.floating-cta .cta,
.floating-cta .burger{
  pointer-events: auto;
}
.floating-cta .go-bot.cta{
  width: var(--sticky-btn-width);
  min-height: var(--sticky-btn-height);
}

/* === Dropdown menu (under the topbar) === */
.menu{
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: min(92vw, var(--sticky-btn-width));
  max-height: 70svh;
  background: #fff;
  color: #374151;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.15);
  overflow: auto;
  z-index: 20005;
  padding: 10px;
  display: none;
  pointer-events: auto;
}

.menu.open{ display: block; }
.menu .menu-inner{ display: grid; gap: 6px; padding: 4px; }
.menu a{
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  background: transparent;
  color: #6B7280;
  transition: background .15s ease, color .15s ease;
}
.menu a:hover{ background: #F3F4F6; color: #111827; }

#about-bot{
  margin-top: -200px; /* поднимет секцию на 80px вверх */
}
/* === ABOUT-BOT: фото под прозрачным оверлеем (аналог hero) === */
#about-bot{
  position: relative;        /* создаём контекст для ::before/::after */
  isolation: isolate;
  overflow: hidden;
}

/* Фото — под оверлеем */
#about-bot .about-photo{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;        /* как в hero */
  height: auto;
  max-width: none;
  z-index: 1;          /* фото ниже оверлея */
  pointer-events: none;
  display: block;
}

/* Полупрозрачная подложка поверх фото */
#about-bot::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10,31,34,0.8),  /* 0.8 = 80% плотности, регулируй 0..1 */
    rgba(10,31,34,0.8)
  );
  pointer-events: none;
  z-index: 2;          /* выше фото */
}

/* Доп. свечение, как в hero (можно ослабить) */
#about-bot::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 500px at 30% 10%, rgba(126,60,224,.22), transparent 60%);
  pointer-events: none;
  z-index: 3;
}

/* Контент — самый верх */
#about-bot .wrap{
  position: relative;
  z-index: 4;
}
#about-bot::before,
#about-bot::after{
  display:block !important;
}
/* Специальный стиль для FAQ */
.faq-section{
  margin-top: -400px;
  display: block;
  text-align: left;
}

.faq-section .wrap{
  display: block;
  text-align: left;
}

.faq-section h2{
  text-align: left;
  margin-left: 0;
}

.faq-section details{
  margin-left: clamp(20px, 5vw, 60px); /* аккуратный отступ вопросов */
}