/* =========================================================================
   КАЙФ — дизайн-система
   Темно-синяя база · электрик-акцент · стеклянные панели · мягкое свечение
   Порядок: токены → база → типографика → компоненты → секции → утилиты
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. ТОКЕНЫ
   ------------------------------------------------------------------------- */
:root{
  /* Фон и поверхности — глубокий изумруд */
  --bg:            #06140F;
  --bg-2:          #081A13;
  --bg-3:          #0A211A;
  --surface:       rgba(255,255,255,.05);
  --surface-2:     rgba(255,255,255,.08);
  --surface-3:     rgba(255,255,255,.12);
  --border:        rgba(255,255,255,.11);
  --border-2:      rgba(255,255,255,.18);
  --border-brand:  rgba(31,208,138,.42);

  /* Акцент — зеленый + золото */
  --brand-700:     #0F8A59;
  --brand-600:     #12A067;
  --brand-500:     #18C07E;
  --brand-400:     #2ADF97;
  --brand-300:     #7FE7BF;
  --gold:          #CBA24A;
  --gold-2:        #E0BC66;
  --cyan:          #CBA24A;            /* legacy-имя: теперь золото */
  --grad:          linear-gradient(135deg,#18C07E 0%,#2ADF97 55%,#CBA24A 130%);
  /* Кнопки: яркий зеленый, текст ТЕМНЫЙ (см. .btn--primary) */
  --grad-cta:      linear-gradient(180deg,#1FD08A 0%,#12A067 100%);
  --grad-gold:     linear-gradient(180deg,#E0BC66 0%,#C79B3F 100%);
  --grad-soft:     linear-gradient(135deg,rgba(24,192,126,.18),rgba(203,162,74,.10));

  /* Семантика */
  --ok:            #2ADF97;
  --warn:          #E0BC66;
  --err:           #FF6B5B;

  /* Текст */
  --text:          #EAF4EE;
  --text-2:        #A9C2B6;
  --text-3:        #7E9689;

  /* Типографика */
  --f-head: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-accent: 'Playfair Display', Georgia, serif;

  --t-h1:    clamp(2.1rem, 1.35rem + 3.3vw, 4rem);
  --t-h2:    clamp(1.6rem, 1.2rem + 1.75vw, 2.7rem);
  --t-h3:    clamp(1.2rem, 1.06rem + 0.6vw, 1.55rem);
  --t-h4:    clamp(1.05rem, 1rem + 0.28vw, 1.2rem);
  --t-lead:  clamp(1rem, 0.95rem + 0.35vw, 1.18rem);
  --t-sm:    0.9rem;
  --t-xs:    0.8rem;
  --t-2xs:   0.72rem;

  /* Отступы: сетка 4/8 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 28px;

  --maxw: 1220px;
  --gutter: clamp(16px,4vw,32px);

  --shadow:      0 18px 50px rgba(0,0,0,.45);
  --glow:        0 14px 38px rgba(24,192,126,.42);
  --glow-soft:   0 0 0 1px rgba(31,208,138,.22), 0 20px 46px rgba(24,192,126,.18);

  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 74px;
}

/* -------------------------------------------------------------------------
   2. БАЗА
   ------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* Фоновая атмосфера: теплое зелено-золотое свечение по краям */
  background-image:
    radial-gradient(950px 560px at 82% -6%, rgba(24,192,126,.22), transparent 60%),
    radial-gradient(720px 460px at 6% 14%, rgba(203,162,74,.10), transparent 60%);
  background-repeat:no-repeat;
  background-attachment:fixed;
}

img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul,ol{list-style:none}

:focus-visible{outline:2px solid var(--brand-400);outline-offset:3px;border-radius:6px}

::selection{background:rgba(24,192,126,.35);color:#fff}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:860px}
.wrap--wide{max-width:none;padding-inline:clamp(20px,4vw,72px)}

.skip{
  position:absolute;left:16px;top:-100px;z-index:200;
  background:var(--brand-500);color:#fff;padding:12px 18px;border-radius:10px;font-weight:600;
  transition:top .2s var(--ease);
}
.skip:focus{top:16px}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* -------------------------------------------------------------------------
   3. ТИПОГРАФИКА
   ------------------------------------------------------------------------- */
h1,h2,h3,h4,h5{font-family:var(--f-head);font-weight:800;line-height:1.14;letter-spacing:-.025em;text-wrap:balance}

.h1{font-size:var(--t-h1);line-height:1.06;letter-spacing:-.035em}
.h2{font-size:var(--t-h2)}
.h3{font-size:var(--t-h3);font-weight:700}
.h4{font-size:var(--t-h4);font-weight:700}

.lead{font-size:var(--t-lead);color:var(--text-2);max-width:64ch;text-wrap:pretty}
.muted{color:var(--text-2)}
.dim{color:var(--text-3)}

/* Слово-акцент с градиентом — как в шапке макета */
.grad-text{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
}
/* Акцентное слово в заголовке героя — Playfair золотом */
.hero .grad-text{
  font-family:var(--f-accent);font-style:italic;font-weight:600;letter-spacing:0;
  background:none;color:var(--gold-2);-webkit-text-fill-color:var(--gold-2);
}

/* Надзаголовок секции */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:var(--t-xs);font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brand-400);
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--brand-500);flex:none}
.eyebrow--center{justify-content:center}
.eyebrow--center::after{content:"";width:26px;height:1px;background:var(--brand-500);flex:none}

.price{font-weight:700;color:var(--gold-2);white-space:nowrap;font-variant-numeric:tabular-nums}

/* -------------------------------------------------------------------------
   4. КНОПКИ
   ------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 26px;border-radius:100px;
  font-weight:600;font-size:.97rem;line-height:1.2;text-align:center;
  transition:transform .18s var(--ease),box-shadow .22s var(--ease),
             background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{flex:none;transition:transform .2s var(--ease)}
.btn:hover svg{transform:translateX(3px)}

.btn--primary{background:var(--grad-cta);color:#06231A;font-weight:700;box-shadow:var(--glow)}
.btn--primary:hover{box-shadow:0 16px 44px rgba(24,192,126,.55)}
.btn--gold{background:var(--grad-gold);color:#26200B;font-weight:700;box-shadow:0 14px 36px rgba(203,162,74,.42)}
.btn--gold:hover{box-shadow:0 16px 44px rgba(203,162,74,.55)}

.btn--outline{border:1px solid var(--border-2);color:var(--text);background:var(--surface)}
.btn--outline:hover{border-color:var(--border-brand);background:var(--surface-2)}

.btn--ghost{color:var(--brand-300);padding-inline:8px;min-height:44px}
.btn--ghost:hover{color:var(--brand-400)}

.btn--sm{min-height:44px;padding:10px 20px;font-size:var(--t-sm)}
.btn--wide{width:100%}

/* -------------------------------------------------------------------------
   5. ШАПКА
   ------------------------------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:120;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease),background .25s var(--ease),backdrop-filter .25s var(--ease);
}
.header.is-stuck{
  border-bottom-color:var(--border);
  background:rgba(6,20,15,.82);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.header__in{display:flex;align-items:center;gap:var(--s5);min-height:var(--header-h)}

/* Телефон в шапке */
.header__phone{display:none;font-weight:700;font-size:var(--t-sm);color:var(--text);white-space:nowrap}
@media(min-width:1100px){.header__phone{display:inline-block}}
.header__phone:hover{color:var(--brand-400)}

/* Виджет контактов (в стиле Битрикс24) */
.cw{position:fixed;right:32px;bottom:36px;z-index:95;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.cw__fab{
  position:relative;width:60px;height:60px;border-radius:50%;flex:none;display:grid;place-items:center;color:#06231A;
  background:var(--grad-cta);box-shadow:0 0 30px -6px rgba(24,192,126,.7),0 14px 30px -10px rgba(0,0,0,.7);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.cw__fab:hover{transform:translateY(-2px)}
.cw__fab::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(24,192,126,.55);animation:cwPulse 2.6s var(--ease) infinite}
@keyframes cwPulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
.cw__i-close{display:none}
.cw.is-open .cw__i-open{display:none}
.cw.is-open .cw__i-close{display:block}
.cw.is-open .cw__fab::before{display:none}

.cw__panel{
  width:300px;max-width:calc(100vw - 40px);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,#0e241c,#0a1a14);border:1px solid var(--border-2);
  box-shadow:0 0 60px -20px rgba(24,192,126,.5),0 24px 60px -24px rgba(0,0,0,.8);
  animation:cwUp .22s var(--ease);
}
@keyframes cwUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cw__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.cw__title{font-weight:700;font-size:var(--t-sm)}
.cw__close{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--text-3);flex:none}
.cw__close:hover{color:var(--text);background:var(--surface)}
.cw__body{padding:12px;display:flex;flex-direction:column;gap:8px}
.cw__opt{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;border:1px solid var(--border);background:var(--surface);text-align:left;color:var(--text);width:100%;transition:border-color .16s var(--ease),background .16s var(--ease)}
.cw__opt:hover{border-color:var(--border-brand);background:var(--surface-2)}
.cw__ico{width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;background:rgba(24,192,126,.14);color:var(--brand-400)}
.cw__opt-t{display:flex;flex-direction:column;font-weight:600;font-size:var(--t-sm);line-height:1.25}
.cw__opt-t small{font-weight:400;font-size:var(--t-2xs);color:var(--text-3);margin-top:2px}
.cw__chev{margin-left:auto;color:var(--text-3);display:inline-flex;transition:transform .2s var(--ease)}
.cw__call-toggle.is-open .cw__chev{transform:rotate(180deg)}
.cw__callform{display:flex;flex-direction:column;gap:8px;padding:2px 2px 4px}
.cw__callform input[type=tel]{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border-2);background:var(--surface);color:var(--text);font:inherit}
.cw__callform input[type=tel]::placeholder{color:var(--text-3)}
.cw__callform input[type=tel]:focus{outline:none;border-color:var(--brand-500)}
.cw__label{font-size:var(--t-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin:6px 2px 0}
.cw__msgrs{display:flex;gap:8px}
.cw__msgr{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 6px;border-radius:12px;border:1px solid var(--border);background:var(--surface);color:var(--brand-400);transition:border-color .16s var(--ease),background .16s var(--ease)}
.cw__msgr:hover{border-color:var(--border-brand);background:var(--surface-2)}
.cw__msgr b{font-weight:800;font-size:15px}
.cw__msgr span{font-size:var(--t-2xs);color:var(--text-2);font-weight:500}
.cw__msgr--gold{color:var(--gold-2)}
@media(max-width:560px){.cw{right:16px;bottom:18px}.cw__fab{width:54px;height:54px}}

.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-head);font-weight:800;letter-spacing:-.02em;font-size:1.06rem;flex:none}
.logo__mark{
  width:34px;height:34px;border-radius:11px;flex:none;
  background:var(--grad);display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(24,192,126,.42);
}
.logo__mark svg{width:19px;height:19px;color:#fff}

/* Навигация-«таблетка», как в макете */
.nav{
  display:none;margin-inline:auto;align-items:center;gap:2px;
  padding:5px;border:1px solid var(--border);border-radius:100px;background:var(--surface);
}
.nav a{
  display:inline-flex;align-items:center;min-height:38px;padding:0 15px;border-radius:100px;white-space:nowrap;
  font-size:var(--t-sm);color:var(--text-2);transition:color .18s var(--ease),background .18s var(--ease);
}
.nav a:hover{color:var(--text);background:var(--surface-2)}
.nav a[aria-current="page"]{color:#fff;background:rgba(24,192,126,.22);box-shadow:inset 0 0 0 1px var(--border-brand)}

.header__cta{display:none}

.burger{
  margin-left:auto;position:relative;width:46px;height:46px;flex:none;
  border:1px solid var(--border);border-radius:12px;background:var(--surface);
}
.burger span{position:absolute;left:13px;width:20px;height:1.6px;background:var(--text);border-radius:2px;
  transition:transform .22s var(--ease),opacity .18s var(--ease)}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:22px}
.burger span:nth-child(3){top:28px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.mobile-nav{
  max-height:0;overflow:hidden;padding-inline:var(--gutter);
  border-top:1px solid transparent;
  transition:max-height .34s var(--ease),padding .34s var(--ease);
}
.mobile-nav.is-open{max-height:560px;padding-block:var(--s4) var(--s5);border-top-color:var(--border)}
.mobile-nav ul{display:grid;gap:2px}
.mobile-nav a{display:block;padding:12px 14px;border-radius:12px;color:var(--text-2);font-size:1.02rem}
.mobile-nav a[aria-current="page"]{color:#fff;background:rgba(24,192,126,.18)}
.mobile-nav .btn{margin-top:var(--s4)}

@media(min-width:1060px){
  .nav{display:inline-flex}
  .header__cta{display:inline-flex}
  .burger,.mobile-nav{display:none}
}

/* -------------------------------------------------------------------------
   6. СЕКЦИИ И ЗАГОЛОВКИ
   ------------------------------------------------------------------------- */
.section{padding-block:var(--s9);position:relative}
.section--tight{padding-block:var(--s8)}
.section--flush-top{padding-top:0}
section[id]{scroll-margin-top:calc(var(--header-h) + 16px)}

.section__head{max-width:72ch;margin-bottom:var(--s7);display:grid;gap:var(--s4)}
.section__head--center{margin-inline:auto;text-align:center;justify-items:center}
.section__head--center .lead{margin-inline:auto}

@media(min-width:768px){
  .section{padding-block:var(--s10)}
  .section--tight{padding-block:var(--s9)}
}
/* Объявлено после медиазапроса, иначе он перебьет обнуление отступа */
.section--flush-top{padding-top:0}

/* -------------------------------------------------------------------------
   7. HERO
   ------------------------------------------------------------------------- */
/* Первый экран занимает ровно одну высоту окна за вычетом шапки.
   svh, а не vh: на мобильных не прыгает при появлении адресной строки. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  margin-top:calc(var(--header-h) * -1);
  min-height:100svh;display:grid;grid-template-rows:1fr auto;
  padding-block:calc(var(--header-h) + var(--s5)) var(--s5);
}
@supports not (min-height:100svh){ .hero{min-height:100vh} }
.hero__main{align-self:center}
.hero__foot{
  align-self:end;display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;
  margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--border);
}
.hero__foot-l{font-size:var(--t-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);flex:none}
.hero__marq{position:relative;flex:1;min-width:0;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 5%,#000 92%,transparent);}
.hero__marq-track{display:flex;align-items:center;width:max-content;animation:heroMarq 62s linear infinite}
.hero__marq:hover .hero__marq-track{animation-play-state:paused}
.hero__marq-track li{font-weight:600;font-size:var(--t-sm);color:var(--text-2);white-space:nowrap;padding-inline:17px;position:relative}
.hero__marq-track li::after{content:"";position:absolute;right:-1px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:var(--text-3);opacity:.5}
@keyframes heroMarq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.hero__marq-track{animation:none}}

/* Фон героя — зелено-золотое свечение (без фото и без сеток) */
.hero__bg{display:none}
.hero__veil{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 560px at 78% 6%, rgba(24,192,126,.28), transparent 58%),
    radial-gradient(780px 520px at 16% 112%, rgba(24,192,126,.16), transparent 60%),
    radial-gradient(520px 360px at 92% 96%, rgba(203,162,74,.12), transparent 60%),
    linear-gradient(180deg, rgba(6,20,15,.35) 0%, transparent 42%, var(--bg) 100%);
}

/* Композиция первого экрана: текст слева, стеклянный дашборд справа */
.hero__grid{display:grid;gap:var(--s6);align-items:center}
@media(min-width:920px){ .hero__grid{grid-template-columns:1.02fr .98fr;gap:var(--s8)} }
.hero__kicker{
  font-family:var(--f-accent);font-style:italic;font-weight:600;
  font-size:clamp(1.15rem,1rem + .7vw,1.5rem);color:var(--gold-2);margin-bottom:var(--s3);
}
.hero .h1{max-width:16ch}
.hero__lead{margin:var(--s4) 0 0;color:var(--text-2);max-width:46ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.hero__trust{display:flex;align-items:center;gap:9px;margin-top:var(--s5);font-size:var(--t-sm);color:var(--text-3)}
.hero__trust b{color:var(--gold-2);font-weight:700}
.hero__trust svg{color:var(--brand-400);flex:none}

.hero__panel{position:relative}
.hero__panel::before{
  content:"";position:absolute;inset:-10% -8%;z-index:-1;
  background:radial-gradient(closest-side, rgba(24,192,126,.38), transparent 72%);
  filter:blur(24px);
}
.hero__panel .dash{box-shadow:0 0 80px -26px rgba(24,192,126,.5), var(--shadow)}
.hero__panel .kpis{grid-template-columns:repeat(2,1fr)}

/* Световые потоки на фоне героя */
.hero__streaks{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none;filter:blur(.6px)}

/* Глубина: наклон дашборда + плавающие чипы над сценой */
.hero__panel{transform-style:preserve-3d}
.hero__chip{
  position:absolute;z-index:3;display:inline-flex;align-items:center;
  padding:9px 14px;border-radius:12px;font-size:var(--t-2xs);font-weight:600;white-space:nowrap;color:var(--text);
  background:linear-gradient(180deg,rgba(22,34,28,.94),rgba(12,22,18,.94));
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 16px 38px -14px rgba(0,0,0,.85);backdrop-filter:blur(6px);
}
.hero__chip b{font-weight:800;color:var(--brand-400)}
.hero__chip--top{top:-16px;right:-12px}
.hero__chip--bot{top:62%;left:-26px;color:var(--text-2)}
.hero__chip .dotmark{width:8px;height:8px;border-radius:50%;background:var(--gold-2);box-shadow:0 0 10px 1px var(--gold-2)}
@media(min-width:920px){
  .hero__panel{transform:perspective(1600px) rotateY(-9deg) rotateX(3deg);transition:transform .6s var(--ease)}
  .hero__panel:hover{transform:perspective(1600px) rotateY(-3deg) rotateX(1deg)}
  .hero__chip{transform:translateZ(70px)}
}

/* Подсказка о прокрутке — единственная анимация на первом экране */
.hero__scroll{
  position:absolute;left:50%;bottom:26px;translate:-50% 0;z-index:1;
  display:inline-flex;flex-direction:column;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:var(--t-2xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);transition:color .2s var(--ease);
}
.hero__scroll:hover{color:var(--brand-400)}
.hero__scroll span{
  width:26px;height:40px;border:1px solid var(--border-2);border-radius:100px;
  display:grid;justify-items:center;padding-top:8px;
}
.hero__scroll span::before{
  content:"";width:3px;height:7px;border-radius:2px;background:var(--brand-400);
  animation:scrollHint 1.9s var(--ease) infinite;
}
@keyframes scrollHint{
  0%{transform:translateY(0);opacity:0}
  25%{opacity:1}
  75%{transform:translateY(13px);opacity:0}
  100%{transform:translateY(13px);opacity:0}
}

/* На узких экранах черта у надзаголовка только мешает переносу */
@media(max-width:520px){
  .hero__eyebrow::before,.hero__eyebrow::after{display:none}
  .hero__eyebrow{display:block}
}

/* Экраны ниже 700 px: отдаем место контенту, подсказку убираем */
@media(max-height:700px){
  .hero{min-height:auto;padding-block:var(--s7) var(--s8)}
  .hero__scroll{display:none}
}
@media(min-width:900px){.hero{padding-block:var(--s9)}}

/* Внутренние страницы: компактный герой + хлебные крошки */
.page-hero{padding-block:var(--s7) var(--s7);position:relative}
.page-hero .h1{max-width:20ch}
.page-hero .lead{margin-top:var(--s5)}
.page-hero__actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}

.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--t-xs);color:var(--text-3);margin-bottom:var(--s5)}
.crumbs a{color:var(--text-2)}
.crumbs a:hover{color:var(--brand-400)}
.crumbs li{display:inline-flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"/";color:var(--text-3)}

/* -------------------------------------------------------------------------
   8. МОКАП ЭКРАНА (визуал первого экрана)
   ------------------------------------------------------------------------- */
.mock{
  position:relative;text-align:left;
  border:1px solid var(--border);border-radius:var(--r-xl);
  background:linear-gradient(180deg,rgba(14,32,25,.9),rgba(7,18,13,.9));
  box-shadow:var(--shadow),0 0 90px rgba(24,192,126,.16);
  overflow:hidden;
}
.mock__bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02)}
.mock__dots{display:flex;gap:6px}
.mock__dots i{width:9px;height:9px;border-radius:50%;background:var(--surface-3)}
.mock__url{
  flex:1;max-width:340px;margin-inline:auto;padding:5px 14px;border-radius:100px;
  background:rgba(255,255,255,.05);border:1px solid var(--border);
  font-size:var(--t-2xs);color:var(--text-3);text-align:center;
}
.mock__body{display:grid;gap:var(--s5);padding:var(--s5)}
@media(min-width:900px){.mock__body{grid-template-columns:0.9fr 1.18fr;padding:var(--s6);gap:var(--s6);align-items:center}}

.mock__pitch h3{font-size:clamp(1.3rem,1rem + 1.4vw,2rem);margin-bottom:var(--s3)}
.mock__pitch p{color:var(--text-2);font-size:var(--t-sm);margin-bottom:var(--s5)}
.mock__pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:100px;background:var(--grad-cta);color:#fff;font-size:var(--t-sm);font-weight:600}

/* Дашборд-панель внутри мокапа */
.dash{
  border:1px solid var(--border);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  padding:var(--s4);display:flex;flex-direction:column;gap:var(--s4);
  box-shadow:0 14px 44px rgba(0,0,0,.30);
}
.dash__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dash__id{display:flex;flex-direction:column;gap:2px}
.dash__title{font-weight:700;font-size:var(--t-sm)}
.dash__sub{font-size:var(--t-2xs);color:var(--text-3)}
.dash__period{font-size:var(--t-2xs);color:var(--text-2);padding:4px 12px;border-radius:100px;border:1px solid var(--border);background:rgba(255,255,255,.03);white-space:nowrap}

.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:560px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{
  border:1px solid var(--border);border-radius:12px;padding:10px 12px;
  background:rgba(255,255,255,.025);display:flex;flex-direction:column;gap:3px;
}
.kpi__l{font-size:var(--t-2xs);color:var(--text-3)}
.kpi__v{font-size:1.05rem;font-weight:800;letter-spacing:-.01em;line-height:1.1}
.kpi__d{font-size:var(--t-2xs);font-weight:700;color:var(--ok)}

/* Столбчатая диаграмма — чистый CSS, без картинок */
.chart{
  border:1px solid var(--border);border-radius:var(--r);padding:var(--s4);
  background:rgba(255,255,255,.03);
}
.chart__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s4);font-size:var(--t-2xs);color:var(--text-3)}
.chart__badge{color:var(--ok);font-weight:700;background:rgba(51,214,159,.12);border:1px solid rgba(51,214,159,.28);padding:2px 10px;border-radius:100px}
.chart__plot{
  position:relative;height:172px;
  background-image:repeating-linear-gradient(to top,rgba(255,255,255,.05) 0 1px,transparent 1px 34px);
}
.chart__bars{display:flex;align-items:flex-end;gap:7px;height:100%}
.chart__bars i{
  flex:1;border-radius:6px 6px 3px 3px;min-height:6px;
  background:linear-gradient(180deg,var(--brand-400),rgba(24,192,126,.15));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  transform-origin:bottom;animation:grow .9s var(--ease) both;
}
.chart__bars i:nth-child(n+7){background:linear-gradient(180deg,var(--cyan),rgba(203,162,74,.18))}
@keyframes grow{from{transform:scaleY(.05);opacity:.2}to{transform:scaleY(1);opacity:1}}
.chart__mark{position:absolute;top:-4px;bottom:0;left:50%;border-left:1px dashed rgba(203,162,74,.55)}
.chart__mark b{
  position:absolute;top:-6px;left:7px;white-space:nowrap;font-weight:600;
  font-size:9px;color:var(--cyan);background:rgba(203,162,74,.10);
  border:1px solid rgba(203,162,74,.32);padding:1px 7px;border-radius:100px;
}
.chart__months{display:flex;gap:7px;margin-top:8px}
.chart__months span{flex:1;text-align:center;font-size:9px;color:var(--text-3)}
.chart__legend{display:flex;gap:var(--s4);margin-top:var(--s3);font-size:var(--t-2xs);color:var(--text-3)}
.chart__legend span{display:inline-flex;align-items:center;gap:6px}
.chart__legend i{width:8px;height:8px;border-radius:3px;background:var(--brand-400)}
.chart__legend span:last-child i{background:var(--cyan)}

/* Плашки-логотипы «нам доверяют» */
.logos{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;margin-top:var(--s6)}
.logos__t{width:100%;text-align:center;font-size:var(--t-xs);color:var(--text-3);margin-bottom:var(--s3);letter-spacing:.06em;text-transform:uppercase}
.logos span{
  padding:9px 18px;border:1px solid var(--border);border-radius:100px;background:var(--surface);
  font-size:var(--t-sm);color:var(--text-2);font-weight:600;
}

/* -------------------------------------------------------------------------
   9. КАРТОЧКИ ВОЗМОЖНОСТЕЙ (ряд из 4 плиток под героем)
   ------------------------------------------------------------------------- */
.tiles{display:grid;gap:var(--s3);grid-template-columns:repeat(2,1fr);margin-block:0 var(--s4);position:relative;z-index:2}
@media(min-width:900px){.tiles{grid-template-columns:repeat(4,1fr);gap:var(--s4)}}

/* Плитки без обводки — носителем служит сама иллюстрация */
.tile{
  position:relative;display:grid;gap:8px;justify-items:start;text-align:left;
  padding:0;border:none;background:none;
  transition:transform .22s var(--ease);
}
.tile:hover{transform:translateY(-5px)}
.tile:hover .tile__vis{border-color:var(--border-brand);box-shadow:0 0 36px -12px rgba(24,192,126,.6)}

/* Иконка-чип направления */
.tile__ic{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;color:var(--brand-400);margin-bottom:6px;
  background:linear-gradient(180deg,rgba(24,192,126,.20),rgba(24,192,126,.05));
  border:1px solid var(--border-brand);
  box-shadow:0 0 24px -8px rgba(24,192,126,.55), inset 0 0 0 1px rgba(255,255,255,.05);
}
.tile__ic svg{width:25px;height:25px}

/* Мини-иллюстрации направлений */
.tile__vis{position:relative;width:100%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;margin-bottom:16px;
  background:linear-gradient(180deg,rgba(6,20,15,.7),rgba(5,14,10,.7));border:1px solid rgba(255,255,255,.08)}
.tile__vis::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 130%,rgba(24,192,126,.20),transparent 60%)}
.vis__badge{position:absolute;top:10px;left:10px;z-index:3;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:#2ADF97;background:rgba(24,192,126,.16);border:1px solid rgba(31,208,138,.42)}
.vis__kpi{position:absolute;top:10px;right:10px;z-index:3;font-size:11px;font-weight:800;color:#06231A;background:#2ADF97;padding:3px 9px;border-radius:100px}
.vis__bars{position:absolute;inset:14px;display:flex;align-items:flex-end;gap:5px;z-index:2}
.vis__bars i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#2ADF97,rgba(18,160,103,.18))}
.vis__bars--mix i:nth-child(n+4){background:linear-gradient(180deg,#E0BC66,rgba(203,162,74,.22))}
.vis__kanban{position:absolute;inset:14px;display:flex;gap:6px;z-index:2}
.vis__kanban .kcol{flex:1;display:flex;flex-direction:column;gap:5px;background:rgba(255,255,255,.035);border-radius:7px;padding:6px}
.vis__kanban .kcol b{height:11px;border-radius:3px;background:rgba(42,223,151,.35)}
.vis__kanban .kcol b:first-child{background:rgba(42,223,151,.7)}
.vis__browser{position:absolute;inset:12px;border-radius:9px;overflow:hidden;display:flex;flex-direction:column;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);z-index:2}
.vis__browser .bdots{display:flex;gap:4px;padding:7px 9px;border-bottom:1px solid rgba(255,255,255,.08)}
.vis__browser .bdots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.22)}
.vis__browser .bbody{flex:1;padding:0 11px;display:flex;flex-direction:column;gap:6px;justify-content:center}
.vis__browser .bh{height:9px;width:66%;border-radius:3px;background:rgba(42,223,151,.65)}
.vis__browser .bl{height:6px;width:88%;border-radius:3px;background:rgba(255,255,255,.14)}
.vis__browser .bbtn{height:15px;width:46px;border-radius:5px;background:linear-gradient(180deg,#20D992,#12A067)}
.tile__t{font-family:var(--f-head);font-weight:700;font-size:1.05rem;padding-inline:2px}
.tile__d{font-size:var(--t-sm);color:var(--text-3);line-height:1.5;padding-inline:2px}

/* Активная — акцент свечением визуала и зеленым заголовком, без коробки */
.tile--active .tile__vis{border-color:var(--border-brand);box-shadow:0 0 42px -12px rgba(24,192,126,.75)}
.tile--active .tile__t{color:var(--brand-400)}

@media(min-width:900px){
  .tiles{gap:var(--s5)}
  .tile__t{font-size:1.12rem}
}

/* -------------------------------------------------------------------------
   10. ПОЛОСА ЦИФР
   ------------------------------------------------------------------------- */
.stats{
  display:grid;gap:var(--s5);align-items:center;
  padding:var(--s7) var(--s6);border-radius:var(--r-lg);border:none;
  background:
    radial-gradient(640px 220px at 50% -10%, rgba(24,192,126,.12), transparent 70%),
    linear-gradient(180deg, rgba(24,192,126,.09), rgba(24,192,126,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.stats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.stats__i{text-align:center}
.stats__v{
  font-family:var(--f-head);font-weight:800;font-size:clamp(2.8rem,2rem + 3.4vw,4.4rem);
  line-height:1;letter-spacing:-.04em;
  background:none;color:var(--brand-400);-webkit-text-fill-color:var(--brand-400);
  text-shadow:0 0 30px rgba(24,192,126,.55);
}
.stats__k{margin-top:6px;font-size:var(--t-xs);color:var(--text-3)}
@media(min-width:900px){
  .stats{grid-template-columns:1fr auto;padding:var(--s6) var(--s7)}
  .stats__grid{grid-template-columns:repeat(3,1fr);gap:var(--s6)}
  .stats__i{text-align:left}
}

/* Принципы — пилюли со свечеными точками */
.marquee{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:var(--s7);
}
.marquee li{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-head);font-weight:700;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);
  padding:10px 18px;border-radius:100px;border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
}
.marquee li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand-400);box-shadow:0 0 9px 1px rgba(24,192,126,.75);flex:none}

/* -------------------------------------------------------------------------
   11. УНИВЕРСАЛЬНАЯ КАРТОЧКА
   ------------------------------------------------------------------------- */
.grid{display:grid;gap:var(--s4)}
.grid>*{min-width:0}
.card>*{min-width:0}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:1fr}
@media(min-width:560px){.grid--4{grid-template-columns:1fr 1fr}}
@media(min-width:700px){.grid--2{grid-template-columns:1fr 1fr}.grid--3{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}}

.card{
  position:relative;display:flex;flex-direction:column;gap:var(--s4);height:100%;
  padding:var(--s6) var(--s5);border-radius:var(--r-lg);
  border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(14,32,25,.62),rgba(8,20,15,.62));
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);
}
.card:hover{transform:translateY(-4px);border-color:var(--border-brand);box-shadow:var(--glow-soft)}
.card__ico{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:var(--grad-soft);border:1px solid var(--border);color:var(--brand-400);
}
.card__t{font-family:var(--f-head);font-weight:700;font-size:var(--t-h3);overflow-wrap:anywhere}
.card__d{color:var(--text-2);font-size:var(--t-sm);line-height:1.65}
.card__list{display:grid;gap:10px;margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--border)}
.card__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);font-size:var(--t-sm)}
.card__row span{color:var(--text-2)}
.card__link{display:inline-flex;align-items:center;gap:8px;color:var(--brand-400);font-weight:600;font-size:var(--t-sm)}
.card__link svg{transition:transform .2s var(--ease)}
.card:hover .card__link svg{transform:translateX(4px)}

/* Ссылка-обертка на всю карточку без потери доступности */
.card__cover{position:absolute;inset:0;border-radius:inherit}

.badge{
  display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:100px;
  font-size:var(--t-2xs);font-weight:600;letter-spacing:.02em;
  border:1px solid var(--border-brand);background:rgba(24,192,126,.12);color:var(--brand-300);
}
.badge--ok{border-color:rgba(51,214,159,.4);background:rgba(51,214,159,.1);color:var(--ok)}
.badge--warn{border-color:rgba(255,176,32,.4);background:rgba(255,176,32,.1);color:var(--warn)}

/* -------------------------------------------------------------------------
   12. ЭТАПЫ РАБОТЫ
   ------------------------------------------------------------------------- */
.steps{display:grid;gap:var(--s4);counter-reset:step}
@media(min-width:820px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{
  position:relative;padding:var(--s6) var(--s5);border-radius:var(--r-lg);
  border:1px solid var(--border);background:var(--surface);
}
.step__n{
  font-family:var(--f-head);font-weight:800;font-size:2rem;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:var(--s4);
}
.step__t{font-family:var(--f-head);font-weight:700;font-size:var(--t-h4);margin-bottom:10px}
.step__d{font-size:var(--t-sm);color:var(--text-2)}
.step__term{margin-top:var(--s4);font-size:var(--t-2xs);color:var(--text-3);letter-spacing:.06em;text-transform:uppercase}

/* -------------------------------------------------------------------------
   13. ТАБЛИЦА-СПИСОК (аудиты, форматы, цены)
   ------------------------------------------------------------------------- */
.rows{border-top:1px solid var(--border)}
.row{
  display:grid;gap:var(--s2);padding:var(--s5) var(--s3);
  border-bottom:1px solid var(--border);transition:background .2s var(--ease);
}
.row:hover{background:rgba(255,255,255,.02)}
.row__n{font-family:var(--f-head);font-weight:700;font-size:1.05rem}
.row__d{font-size:var(--t-sm);color:var(--text-2)}
.row__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s4);font-size:var(--t-sm)}
.row__term{font-size:var(--t-2xs);color:var(--text-3);letter-spacing:.06em;text-transform:uppercase}
@media(min-width:900px){
  .row{grid-template-columns:minmax(0,1.5fr) minmax(0,1.6fr) minmax(0,.9fr);gap:var(--s5);align-items:baseline}
  .row__meta{justify-content:flex-end;text-align:right}
}

/* -------------------------------------------------------------------------
   14. ТАРИФЫ
   ------------------------------------------------------------------------- */
.plans{display:grid;gap:var(--s4)}
@media(min-width:900px){.plans{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.plan{
  display:flex;flex-direction:column;gap:var(--s4);padding:var(--s6) var(--s5);
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(14,32,25,.6),rgba(8,20,15,.6));
}
.plan--featured{border-color:var(--border-brand);box-shadow:var(--glow-soft);position:relative}
.plan--featured::after{
  content:"Чаще всего выбирают";position:absolute;top:-13px;left:50%;translate:-50% 0;
  padding:5px 14px;border-radius:100px;background:var(--grad-cta);color:#fff;
  font-size:var(--t-2xs);font-weight:700;white-space:nowrap;
}
.plan__t{font-family:var(--f-head);font-weight:700;font-size:var(--t-h3)}
.plan__for{font-size:var(--t-sm);color:var(--text-2)}
.plan__p{font-family:var(--f-head);font-weight:800;font-size:1.9rem;letter-spacing:-.03em}
.plan__p small{display:block;font-size:var(--t-xs);font-weight:500;color:var(--text-3);letter-spacing:0;margin-top:4px}
.plan__f{display:grid;gap:10px;padding-top:var(--s4);border-top:1px solid var(--border);font-size:var(--t-sm);color:var(--text-2)}
.plan__f li{display:flex;gap:10px}
.plan__f svg{flex:none;margin-top:5px;color:var(--brand-400)}
.plan .btn{margin-top:auto}

/* -------------------------------------------------------------------------
   15. ОТЗЫВЫ
   ------------------------------------------------------------------------- */
.quotes{display:grid;gap:var(--s4)}
@media(min-width:900px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{
  display:flex;flex-direction:column;gap:var(--s4);padding:var(--s6) var(--s5);
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
}
.quote__stars{display:flex;gap:3px;color:var(--warn)}
.quote__txt{color:var(--text);line-height:1.7;font-size:var(--t-sm)}
.quote__who{display:flex;align-items:center;gap:var(--s3);margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--border)}
.quote__av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--grad-soft);border:1px solid var(--border);font-weight:700;color:var(--brand-300)}
.quote__n{font-weight:600;font-size:var(--t-sm)}
.quote__r{font-size:var(--t-2xs);color:var(--text-3)}

/* -------------------------------------------------------------------------
   16. FAQ
   ------------------------------------------------------------------------- */
.faq{border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s5);
  padding:var(--s5) var(--s3);cursor:pointer;list-style:none;
  font-family:var(--f-head);font-weight:700;font-size:1.02rem;line-height:1.45;
  transition:color .18s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brand-400)}
.faq__sign{position:relative;flex:none;width:22px;height:22px;margin-top:3px}
.faq__sign::before,.faq__sign::after{content:"";position:absolute;left:2px;right:2px;top:50%;height:1.8px;background:currentColor;border-radius:2px;transition:transform .25s var(--ease)}
.faq__sign::after{transform:rotate(90deg)}
.faq details[open] .faq__sign::after{transform:rotate(90deg) scaleX(0)}
.faq__a{padding:0 var(--s3) var(--s5);color:var(--text-2);max-width:78ch;line-height:1.7}
.faq__a p+p{margin-top:var(--s3)}
.faq__a ul{margin-top:var(--s3);display:grid;gap:8px}
.faq__a li{display:flex;gap:10px}
.faq__a li::before{content:"";flex:none;width:6px;height:6px;border-radius:2px;background:var(--brand-500);margin-top:9px}

/* -------------------------------------------------------------------------
   17. CTA-ПОЛОСА
   ------------------------------------------------------------------------- */
.cta{
  position:relative;overflow:hidden;
  padding:var(--s8) var(--s5);border-radius:var(--r-xl);
  border:1px solid var(--border-brand);
  background:linear-gradient(135deg,rgba(18,160,103,.28),rgba(203,162,74,.12)),rgba(8,20,15,.9);
  text-align:center;
}
.cta::before{
  content:"";position:absolute;inset:auto 0 -60% 50%;translate:-50% 0;
  width:min(700px,120%);height:320px;
  background:radial-gradient(ellipse at center,rgba(24,192,126,.4),transparent 65%);
  pointer-events:none;
}
.cta>*{position:relative}
.cta .lead{margin:var(--s4) auto 0}
.cta__actions{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center;margin-top:var(--s6)}
.cta__note{margin-top:var(--s5);font-size:var(--t-xs);color:var(--text-2)}
@media(min-width:820px){.cta{padding:var(--s9) var(--s8)}}

/* -------------------------------------------------------------------------
   18. ФОРМЫ
   ------------------------------------------------------------------------- */
.form-block{
  display:grid;gap:var(--s7);padding:var(--s6) var(--s5);
  border:1px solid var(--border);border-radius:var(--r-xl);
  background:linear-gradient(180deg,rgba(14,32,25,.7),rgba(8,20,15,.7));
}
@media(min-width:980px){.form-block{grid-template-columns:1fr 1fr;gap:var(--s9);padding:var(--s8) var(--s7);align-items:start}}

.form{display:grid;gap:var(--s4)}
.field{display:grid;gap:8px}
.field label{font-size:var(--t-sm);font-weight:600;color:var(--text-2)}
.field input,.field textarea,.field select{
  width:100%;min-height:52px;padding:14px 16px;
  background:rgba(5,13,9,.7);border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--text);font:inherit;font-size:1rem;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.field textarea{min-height:112px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(24,192,126,.18);
}
.field [aria-invalid="true"]{border-color:var(--err)}
.err{font-size:var(--t-2xs);color:var(--err)}

.consent{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-xs);color:var(--text-2);line-height:1.5}
.consent input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--brand-500)}
.consent a{color:var(--brand-300);text-decoration:underline;text-underline-offset:2px}

.form__ok{
  display:none;gap:12px;align-items:flex-start;padding:var(--s4);
  border:1px solid rgba(51,214,159,.4);border-radius:var(--r-sm);background:rgba(51,214,159,.08);
  font-size:var(--t-sm);
}
.form__ok.is-on{display:flex}

.checklist{display:grid;gap:var(--s4)}
.checklist li{display:flex;gap:12px;font-size:var(--t-sm);color:var(--text-2);line-height:1.6}
.checklist svg{flex:none;margin-top:4px;color:var(--brand-400)}

/* Оффер «Аудит + дашборд окупаемости» */
.offer{
  position:relative;display:grid;gap:var(--s5);overflow:hidden;
  border:1px solid var(--border-2);border-radius:var(--r-xl);
  background:
    radial-gradient(620px 320px at 94% -10%, rgba(24,192,126,.16), transparent 62%),
    radial-gradient(420px 260px at 4% 120%, rgba(203,162,74,.08), transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  box-shadow:0 0 80px -30px rgba(24,192,126,.5), var(--shadow);
  padding:var(--s7);
}
@media(min-width:900px){.offer{grid-template-columns:minmax(0,1fr) 330px;gap:var(--s7);align-items:center}}
.offer__main .eyebrow{margin-bottom:var(--s3)}
.offer__main h2{margin-bottom:var(--s3)}
.offer__card{
  position:relative;border:1px solid var(--border-brand);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(24,192,126,.16),rgba(24,192,126,.035));
  padding:var(--s6) var(--s5);display:grid;gap:12px;text-align:center;
  box-shadow:0 0 54px -18px rgba(24,192,126,.6), inset 0 1px 0 rgba(255,255,255,.07);
}
.offer__price{font-family:var(--f-head);font-weight:800;font-size:2.7rem;line-height:1;letter-spacing:-.02em;color:var(--text)}
.offer__price span{display:block;font-size:var(--t-2xs);font-weight:700;color:var(--gold-2);letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.offer__meta{font-size:var(--t-2xs);color:var(--text-2)}
.offer__note{font-size:var(--t-2xs);color:var(--text-3);line-height:1.5;margin-top:4px}

/* Светящийся разделитель секций */
.sec-divider{position:relative;height:78px;margin:var(--s6) 0 var(--s4)}
.sec-divider svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 0 9px rgba(24,192,126,.45))}
.sec-divider__label{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;white-space:nowrap;
  font-family:var(--f-accent);font-style:italic;font-weight:600;font-size:1.1rem;color:var(--gold-2);
  padding:0 20px;background:var(--bg);
}

/* Вейтлист приложения */
.waitlist{
  display:grid;gap:var(--s5);
  border:1px solid var(--border);border-radius:var(--r-lg);
  background:
    radial-gradient(120% 140% at 100% 0,rgba(24,192,126,.12),transparent 60%),
    linear-gradient(180deg,rgba(14,32,25,.72),rgba(8,20,15,.72));
  padding:var(--s6);
}
@media(min-width:900px){.waitlist{grid-template-columns:minmax(0,1fr) 360px;gap:var(--s7);align-items:center}}
.waitlist__form{display:grid;gap:14px}
.waitlist__note{font-size:var(--t-2xs);color:var(--text-3);line-height:1.5;margin:0}
.waitlist__note a{color:var(--text-2);text-decoration:underline}

/* honeypot (антиспам) */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* строка-вход в прайсе «с этого начать» */
.row--lead{background:rgba(24,192,126,.06);box-shadow:inset 3px 0 0 var(--brand-400)}
.row--lead .price{color:var(--brand-400)}

/* Контакты */
.contacts{display:grid;gap:var(--s4)}
@media(min-width:820px){.contacts{grid-template-columns:repeat(3,1fr)}}
.contact{
  display:grid;gap:10px;padding:var(--s5);border:1px solid var(--border);
  border-radius:var(--r);background:var(--surface);
}
.contact__k{display:flex;align-items:center;gap:7px;font-size:var(--t-2xs);color:var(--text-3);letter-spacing:.1em;text-transform:uppercase}
.contact__k svg{flex:none}
.contact__v{font-family:var(--f-head);font-weight:700;font-size:1.05rem}
.contact__v a:hover{color:var(--brand-400)}

/* -------------------------------------------------------------------------
   19. КЕЙСЫ И БЛОГ
   ------------------------------------------------------------------------- */
.case__seg{font-size:var(--t-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--brand-400);font-weight:600}
.case__res{display:grid;gap:10px;padding-top:var(--s4);border-top:1px solid var(--border)}
.case__row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);font-size:var(--t-sm)}
.case__row span{color:var(--text-2)}
.case__row b{color:var(--ok);font-variant-numeric:tabular-nums}

.post__meta{display:flex;flex-wrap:wrap;gap:var(--s3);font-size:var(--t-2xs);color:var(--text-3)}
.post__meta time{color:var(--text-3)}

/* Оглавление статьи / боковая колонка */
.split{display:grid;gap:var(--s7)}
@media(min-width:1000px){.split{grid-template-columns:minmax(0,1fr) 320px;gap:var(--s8);align-items:start}}
.aside{
  position:sticky;top:calc(var(--header-h) + 20px);
  display:grid;gap:var(--s4);padding:var(--s5);
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
}
.aside h3{font-size:var(--t-h4)}
.aside ul{display:grid;gap:10px;font-size:var(--t-sm)}
.aside a{color:var(--text-2)}
.aside a:hover{color:var(--brand-400)}

/* Текстовый контент (политика, статьи) */
.prose{max-width:76ch}
.prose h2{font-size:var(--t-h2);margin:var(--s7) 0 var(--s4)}
.prose h3{font-size:var(--t-h3);margin:var(--s6) 0 var(--s3)}
.prose p{color:var(--text-2);margin-bottom:var(--s4)}
.prose ul,.prose ol{display:grid;gap:10px;margin-bottom:var(--s5);color:var(--text-2)}
.prose ul li{display:flex;gap:12px}
.prose ul li::before{content:"";flex:none;width:6px;height:6px;border-radius:2px;background:var(--brand-500);margin-top:9px}
.prose ol{counter-reset:n}
.prose ol li{display:flex;gap:12px;counter-increment:n}
.prose ol li::before{content:counter(n);flex:none;width:22px;color:var(--brand-400);font-weight:700;font-size:var(--t-sm)}
.prose a{color:var(--brand-300);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--text)}

/* -------------------------------------------------------------------------
   20. ПОДВАЛ
   ------------------------------------------------------------------------- */
.footer{border-top:1px solid var(--border);padding-block:var(--s8) var(--s6);background:rgba(5,13,9,.6)}
.footer__grid{display:grid;gap:var(--s6)}
@media(min-width:760px){.footer__grid{grid-template-columns:1.6fr 1fr 1fr}}
@media(min-width:1040px){.footer__grid{grid-template-columns:1.7fr 1fr 1fr 1fr}}
.footer h3{font-size:var(--t-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s4);font-weight:700}
.footer ul{display:grid;gap:12px}
.footer a{font-size:var(--t-sm);color:var(--text-2);transition:color .18s var(--ease)}
.footer a:hover{color:var(--brand-400)}
.footer__about{font-size:var(--t-sm);color:var(--text-2);margin-top:var(--s4);max-width:42ch}
.footer__soc{display:flex;gap:10px;margin-top:var(--s5)}
.footer__soc a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  border:1px solid var(--border);background:var(--surface);color:var(--text-2)}
.footer__soc a:hover{border-color:var(--border-brand);color:var(--brand-400)}
.footer__bottom{
  margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;
  font-size:var(--t-xs);color:var(--text-3);
}

/* -------------------------------------------------------------------------
   21. ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ + ДОСТУПНОСТЬ
   ------------------------------------------------------------------------- */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
}

/* -------------------------------------------------------------------------
   22. УТИЛИТЫ
   ------------------------------------------------------------------------- */
.center{text-align:center}
.mt-4{margin-top:var(--s4)} .mt-5{margin-top:var(--s5)} .mt-6{margin-top:var(--s6)}
.mt-7{margin-top:var(--s7)} .mt-8{margin-top:var(--s8)}
.mb-5{margin-bottom:var(--s5)} .mb-6{margin-bottom:var(--s6)}
.flex-wrap{display:flex;flex-wrap:wrap;gap:var(--s3)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{padding:6px 13px;border-radius:100px;border:1px solid var(--border);background:var(--surface);
  font-size:var(--t-xs);color:var(--text-2)}

/* -------------------------------------------------------------------------
   РАЗБАВЛЕНИЕ: разные трактовки блоков по секциям (уход от «коробки в коробке»)
   ------------------------------------------------------------------------- */

/* Полоса-фон секции: мягкое зеленое свечение сверху, без рамок */
.section--band{
  background:
    radial-gradient(760px 300px at 50% -8%, rgba(24,192,126,.10), transparent 68%),
    linear-gradient(180deg, rgba(24,192,126,.05), rgba(203,162,74,.02) 55%, transparent);
}
.section--band::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(31,208,138,.5),transparent);
  opacity:.65;
}

/* УСЛУГИ + «что вы получаете»: заполненные мягкие панели без видимой обводки */
.grid--soft .card{
  border:none;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 34px -24px rgba(0,0,0,.85);
}
.grid--soft .card:hover{
  border:none;transform:translateY(-4px);
  background:linear-gradient(180deg, rgba(24,192,126,.10), rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 22px 50px -22px rgba(24,192,126,.42);
}

/* КЕЙСЫ: обводка осознанная, низ с цифрами — заполненная зеленая плашка на всю ширину */
.grid--cases .card{overflow:hidden;background:linear-gradient(180deg, rgba(8,20,15,.5), rgba(8,20,15,.22))}
.grid--cases .case__res{
  margin:var(--s2) calc(var(--s5) * -1) calc(var(--s6) * -1);
  padding:var(--s4) var(--s5) var(--s5);
  border-top:1px solid var(--border-brand);
  background:linear-gradient(180deg, rgba(24,192,126,.13), rgba(24,192,126,.04));
}

/* ОТЗЫВЫ: без рамки, крупная золотая кавычка, только тонкий разделитель у автора */
.quote{border:none;background:none;padding:var(--s5) 0;position:relative}
.quote::before{
  content:"\201C";position:absolute;top:-.28em;left:-2px;
  font-family:var(--f-accent);font-size:5rem;line-height:1;
  color:rgba(203,162,74,.26);pointer-events:none;
}
.quote__txt{position:relative}

/* БЛОГ: без коробки, сверху градиентная «обложка» */
.grid--posts .card{border:none;background:none;padding:0;gap:var(--s4)}
.grid--posts .card::before{
  content:"";display:block;height:130px;border-radius:var(--r);
  background:
    radial-gradient(120px 82px at 78% 20%, rgba(203,162,74,.24), transparent 70%),
    linear-gradient(135deg, rgba(24,192,126,.2), rgba(6,20,15,.62));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:box-shadow .22s var(--ease)
}
.grid--posts .card:hover{transform:translateY(-4px);box-shadow:none;border:none}
.grid--posts .card:hover::before{box-shadow:inset 0 0 0 1px var(--border-brand), 0 18px 40px -20px rgba(24,192,126,.5)}

/* «Что я говорю сразу»: акцентные карточки с золотой полосой слева, без полной обводки */
.grid--accent .card{
  border:none;background:none;border-radius:0 var(--r) var(--r) 0;
  padding:var(--s3) var(--s4) var(--s3) var(--s5);
  box-shadow:inset 3px 0 0 var(--warn)
}
.grid--accent .card:hover{
  transform:none;border:none;
  background:linear-gradient(90deg, rgba(224,188,102,.09), transparent 70%);
  box-shadow:inset 3px 0 0 var(--warn)
}

/* -------------------------------------------------------------------------
   СВЕТЛЫЕ ЗОНЫ (paper): чередование темно-зеленого и белого по всему сайту
   ------------------------------------------------------------------------- */
:root{ --ink:#12241C; --ink-2:#55655B; --paper:#FAF8F3; --paper-2:#FAF8F3; }

.paper{position:relative;color:var(--ink);
  background:var(--paper)}
.paper.section{background:var(--paper)}
.paper--band{padding-block:var(--s7)}
/* гасим темные фоны/полосы внутри светлой зоны */
.paper.section--band::before{display:none}
/* тонкая линия на стыке темное->светлое */
.paper + .paper{margin-top:0}

/* Заголовки/лиды/бровки */
.paper .h2{color:var(--ink)}
.paper .lead{color:var(--ink-2)}
.paper .eyebrow{color:#0E8F5E}
.paper .eyebrow::before,.paper .eyebrow--center::after{background:#18C07E}
.paper .sec-divider__label{color:#B8862B;background:transparent}
.paper .sec-divider svg{filter:drop-shadow(0 0 6px rgba(203,162,74,.35))}

/* Карточки (обычные + grid--soft) — сплошной белый */
.paper .card,.paper .grid--soft .card{
  border:1px solid rgba(18,36,28,.10);background:#fff;
  box-shadow:0 18px 40px -28px rgba(30,50,40,.5)}
.paper .card:hover,.paper .grid--soft .card:hover{
  border-color:rgba(24,160,103,.5);background:#fff;
  box-shadow:0 24px 50px -26px rgba(24,160,103,.35)}
.paper .card__t{color:var(--ink)}
.paper .card__d{color:var(--ink-2)}
.paper .card__ico{color:#0E8F5E;border-color:rgba(24,160,103,.28);
  background:linear-gradient(180deg,rgba(24,192,126,.14),rgba(24,192,126,.04))}
.paper .card__list{border-top-color:rgba(18,36,28,.10)}
.paper .card__row span{color:var(--ink-2)}
.paper .card__link{color:#0E8F5E}
.paper .price{color:#B8862B}
.paper .badge{border-color:rgba(24,160,103,.35);background:rgba(24,160,103,.08);color:#0E7A50}
.paper .badge--warn{border-color:rgba(184,134,43,.4);background:rgba(203,162,74,.14);color:#9a6f1e}

/* Плитки направлений — белые визуалы */
.paper .tile__vis{background:#fff;border:1px solid rgba(18,36,28,.10)}
.paper .tile__vis::after{display:none}
.paper .tile__t{color:var(--ink)}
.paper .tile__d{color:var(--ink-2)}
.paper .vis__bars i{background:linear-gradient(180deg,#18C07E,rgba(24,160,103,.2))}
.paper .vis__kanban .kcol{background:rgba(18,36,28,.05)}
.paper .vis__kanban .kcol b{background:rgba(24,160,103,.4)}
.paper .vis__kanban .kcol b:first-child{background:rgba(24,160,103,.85)}
.paper .vis__browser{background:#F3EFE6;border-color:rgba(18,36,28,.10)}
.paper .vis__browser .bdots{border-bottom-color:rgba(18,36,28,.08)}
.paper .vis__browser .bdots i{background:rgba(18,36,28,.2)}
.paper .vis__browser .bh{background:rgba(24,160,103,.75)}
.paper .vis__browser .bl{background:rgba(18,36,28,.14)}
.paper .tile:hover .tile__vis{border-color:rgba(24,160,103,.5);box-shadow:0 16px 34px -18px rgba(24,160,103,.4)}
.paper .tile--active .tile__vis{border-color:rgba(203,162,74,.55);
  box-shadow:0 0 0 1px rgba(203,162,74,.4),0 20px 40px -20px rgba(203,162,74,.4)}
.paper .tile--active .tile__t{color:#9a6f1e}

/* Отзывы на светлом */
.paper .quote__txt,.paper .quote__n{color:var(--ink)}
.paper .quote__r{color:var(--ink-2)}
.paper .quote__who{border-top-color:rgba(18,36,28,.12)}
.paper .quote::before{color:rgba(184,134,43,.32)}
.paper .quote__stars{color:#C9962E}
.paper .quote__av{color:#0E7A50;border-color:rgba(24,160,103,.3);
  background:linear-gradient(180deg,rgba(24,192,126,.16),rgba(203,162,74,.1))}

/* Блог: обложка на светлом */
.paper .grid--posts .card::before{
  background:radial-gradient(120px 82px at 78% 20%,rgba(203,162,74,.3),transparent 70%),
    linear-gradient(135deg,rgba(24,160,103,.24),rgba(18,36,28,.85));
  box-shadow:inset 0 0 0 1px rgba(18,36,28,.08)}
.paper .grid--posts .card:hover::before{box-shadow:inset 0 0 0 1px rgba(24,160,103,.5),0 18px 40px -20px rgba(24,160,103,.4)}
.paper .post__meta,.paper .post__meta time{color:var(--ink-2)}

/* Кнопки на светлом */
.paper .btn--outline{border-color:rgba(18,36,28,.2);color:var(--ink);background:rgba(18,36,28,.03)}
.paper .btn--outline:hover{border-color:rgba(24,160,103,.5);background:rgba(24,160,103,.06)}

/* Плавные переходы на границах темное<->светлое (затухание по краям paper) */
.paper{position:relative}
.paper::before,.paper::after{content:"";position:absolute;left:0;right:0;
  height:clamp(70px,8vw,120px);pointer-events:none;z-index:-1}
.paper::before{top:0;background:linear-gradient(180deg,var(--bg),transparent)}
.paper::after{bottom:0;background:linear-gradient(0deg,var(--bg),transparent)}
/* на внутренних стыках светлое-светлое затухание не нужно */
.paper + .paper::before{display:none}
.paper:has(+ .paper)::after{display:none}

/* --- Светлый-доминантный: доп.компоненты в светлых зонах --- */
/* Статистика: без свечения, крупные темно-зеленые цифры */
.paper .stats{border:none;box-shadow:none;
  background:radial-gradient(640px 220px at 50% -10%,rgba(24,160,103,.10),transparent 70%)}
.paper .stats__v,.paper .stats__v.grad-text{
  background:none;color:#0E8F5E;-webkit-text-fill-color:#0E8F5E;text-shadow:none}
.paper .stats__k{color:var(--ink-2)}

/* Шаги процесса: белые карточки, номер градиентом */
.paper .step{border:1px solid rgba(18,36,28,.10);background:#fff;
  box-shadow:0 18px 40px -28px rgba(30,50,40,.5)}
.paper .step__t{color:var(--ink)}
.paper .step__d{color:var(--ink-2)}
.paper .step__term{color:#8a988f}

/* Кейсы: числа/подписи на белом */
.paper .case__seg{color:#0E8F5E}
.paper .case__row span{color:var(--ink-2)}
.paper .case__row b{color:#0E7A50}

/* FAQ на светлом */
.paper .faq,.paper .faq details{border-color:rgba(18,36,28,.12)}
.paper .faq summary{color:var(--ink)}
.paper .faq summary:hover{color:#0E8F5E}
.paper .faq__a{color:var(--ink-2)}
.paper .faq__a li::before{background:#18C07E}

/* градиентный текст (номера шагов и т.п.) чуть темнее для белого */
.paper .step__n{background:linear-gradient(135deg,#0E8F5E,#B8862B);
  -webkit-background-clip:text;background-clip:text;color:transparent}