:root{
  /* Base colors */
  --color-ink-grey:#1B1F23;           /* плотнее текст */
  --color-porcelain:#F4F1EE;          /* фоновая бумага, был у вас */

  /* Brand stops (из брендбука) */
  --brand-1:#7FB8FF;  /* голубой */
  --brand-2:#AFA4FF;  /* лиловый */
  --brand-3:#FF97AA;  /* коралл */

  /* Gradients (обновлены под брендбук) */
  --grad-touch:linear-gradient(135deg,var(--brand-1) 0%,var(--brand-2) 50%,var(--brand-3) 100%);
  --grad-fresh:linear-gradient(135deg,var(--brand-1) 0%,rgba(175,164,255,.35) 50%,rgba(255,151,170,.30) 100%);
  --grad-soft: linear-gradient(135deg,rgba(175,164,255,.25) 0%, rgba(244,241,238,.60) 50%, rgba(127,184,255,.25) 100%);

  /* Доп. градиент «из лого» — для заголовков/акцентов */
  --logo-grad:linear-gradient(90deg,#5B8CFF 0%, #6C4DFF 45%, #79C6A3 100%);

  /* Spacing / Radii / Shadows / Motion — как было */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:32px;--space-8:40px;--space-9:48px;--space-10:64px;--space-11:80px;--space-12:96px;
  --radius-s:12px;--radius-m:16px;--radius-l:24px;--radius-xl:32px;
  --shadow-s:0 2px 8px rgba(0,0,0,.06);
  --shadow-m:0 6px 20px rgba(0,0,0,.08);
  --shadow-l:0 14px 40px rgba(0,0,0,.12);
  --easing-smooth:cubic-bezier(.22,.61,.36,1);
  --duration-fast:150ms;--duration-base:250ms;--duration-slow:450ms;
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--color-porcelain);color:var(--color-ink-grey);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

.container{max-width:1180px;margin:0 auto;padding:0 24px}
.section{padding:var(--space-12) 0}

/* Typography */
.h1{font-family:Manrope,Inter,sans-serif;font-weight:800;font-size:48px;line-height:1.16;margin:0 0 12px}
.h2{font-family:Manrope,Inter,sans-serif;font-weight:800;font-size:36px;line-height:1.2;margin:0 0 12px}
.sub{font-size:18px;line-height:1.6;max-width:68ch;opacity:.9}
.muted{opacity:.75}
.grad-text{background:var(--grad-touch);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Utility: логотипный градиент для заголовков */
.grad-logo{background:var(--logo-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Utility: цветная полоска у мокапов/устройств/картинок */
.device-stripe{height:6px;background:var(--grad-fresh)}

.footnote{font-size:12px;margin-top:8px}

/* Buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 20px;border:none;border-radius:24px;cursor:pointer;transition:transform var(--duration-base) var(--easing-smooth),box-shadow var(--duration-base) var(--easing-smooth);font-weight:600}
.btn-sm{padding:10px 14px;border-radius:20px;font-size:14px}
.btn-primary{color:#fff;background:var(--grad-touch);box-shadow:var(--shadow-m);overflow:hidden}
.btn-primary:hover{transform:translateY(-1px) scale(1.02);box-shadow:var(--shadow-l)}
.btn-secondary{background:var(--color-porcelain);color:var(--color-ink-grey);border:1px solid rgba(58,58,58,.12);box-shadow:var(--shadow-s)}
.btn-secondary:hover{background:linear-gradient(135deg, rgba(127,184,255,.18), rgba(175,164,255,.18), rgba(255,151,170,.18)), rgba(216,243,229,.18), rgba(255,214,194,.18))}
.shimmer{position:absolute;inset:0;background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);transform:translateX(-100%)}
.btn-primary:hover .shimmer{animation:slide var(--duration-slow) var(--easing-smooth)}
@keyframes slide{to{transform:translateX(100%)}}

/* Nav */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid rgba(58,58,58,.08)}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.brand{font-family:Manrope,Inter,sans-serif;font-weight:800;letter-spacing:.3px}
/* Красивые ссылки в меню с градиентным подчёркиванием */
.nav-links a{
  position: relative;
  padding: 10px 12px;
  border-radius: 16px;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--easing-smooth),
              transform var(--duration-fast) var(--easing-smooth);
}

.nav-links a:hover{
  background: linear-gradient(135deg,
              rgba(207,230,255,.16),
              rgba(216,243,229,.14),
              rgba(255,214,194,.12));
}

.nav-links a::after{
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: 6px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--easing-smooth);
  pointer-events: none;
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after{ transform: scaleX(1); }

.nav-links a:active{ transform: translateY(1px); }

/* чтобы лого не тянулось */
.brand{ flex: 0 0 auto; }
/* Красивые ссылки в меню с градиентным подчёркиванием */
.nav-links a{
  position: relative;
  padding: 10px 12px;
  border-radius: 16px;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--easing-smooth),
              transform var(--duration-fast) var(--easing-smooth);
}

.nav-links a:hover{
  background: linear-gradient(135deg,
              rgba(207,230,255,.16),
              rgba(216,243,229,.14),
              rgba(255,214,194,.12));
}

.nav-links a::after{
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: 6px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--easing-smooth);
  pointer-events: none;
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after{ transform: scaleX(1); }

.nav-links a:active{ transform: translateY(1px); }

/* чтобы лого не тянулось */
.brand{ flex: 0 0 auto; }

.brand{ display:inline-flex; align-items:center; text-decoration:none; }
.brand img{ height:64px; width:auto; display:block; }
@media (max-width:480px){ .brand img{ height:26px; } }

/* Hero */
.hero{
  background:
    /* ослабленный светлый оверлей, чтобы фон был виден */
    linear-gradient(180deg, rgba(244,241,238,.30), rgba(244,241,238,.12)),
    url('/images/fon.JPG') center/cover no-repeat;
  border-bottom:1px solid rgba(58,58,58,.06);
}


.hero-inner{display:grid;gap:24px;grid-template-columns:1.1fr .9fr;align-items:center}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.kpis{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.kpi{padding:12px 16px;background:rgba(244,241,238,.65);border:1px solid rgba(58,58,58,.08);border-radius:16px;box-shadow:var(--shadow-s);display:flex;flex-direction:column}
.hero-visual .device{border-radius:24px;border:1px solid rgba(58,58,58,.08);box-shadow:var(--shadow-m);overflow:hidden;background:#fff}
.device-stripe{height:6px;background:var(--grad-fresh)}
.device-screen{height:360px;display:grid;place-items:center;background:linear-gradient(180deg, rgba(244,241,238,.9), rgba(244,241,238,.6))}
.touch-points{display:flex;gap:14px}
.touch-points span{width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(207,230,255,.65), 0 0 0 12px rgba(233,215,254,.45), 0 0 0 20px rgba(255,214,194,.35)}

/* Offer */
.offer-grid{display:grid;gap:32px;grid-template-columns:1fr 1fr;align-items:start}
.offer-visual{position:sticky;top:88px;height:fit-content}
.offer-glass{background:rgba(244,241,238,.72);backdrop-filter:blur(8px);border:1px solid rgba(58,58,58,.08);border-radius:24px;box-shadow:var(--shadow-m);padding:24px}
.offer-badge{display:inline-block;background:rgba(207,230,255,.35);border:1px solid rgba(58,58,58,.08);border-radius:12px;padding:6px 10px;margin-bottom:10px}
.offer-note{font-size:20px;line-height:1.5}
.offer-steps{display:flex;flex-direction:column;gap:20px}
.step{background:#fff;border:1px solid rgba(58,58,58,.08);border-radius:20px;box-shadow:var(--shadow-s);padding:18px}
.step h3{margin:0 0 6px}
.step.active{outline:3px solid rgba(207,230,255,.6)}
/* === Offer (второй блок): мобильная адаптация === */
@media (max-width: 980px){
  .offer-grid{ grid-template-columns: 1fr; gap: 16px; }
  .offer-visual{ position: static; top: auto; height: auto; }   /* был sticky — выключаем */
  .offer-glass{ padding: 16px; border-radius: 16px; }
  .offer-steps{ gap: 12px; }
  .step{ padding: 14px; border-radius: 16px; transform: none !important; }
  .step.active{ outline-width: 2px; box-shadow: var(--shadow-m); }
  .rowtitle{ gap: 8px; }
  .num{ width: 22px; height: 22px; font-size: 11px; }
  .offer-note{ font-size: 16px; line-height: 1.45; }
}
@media (max-width: 640px){
  .step h3{ font-size: 16px; }
  #offer .muted, #offer p{ font-size: 14px; line-height: 1.5; }
  #offer .chip{ font-size: 12px; }
}
/* на всякий случай отрезаем возможный горизонтальный скролл */
#offer{ overflow-x: hidden; }
/* === Offer: desktop sticky (левая колонка) === */
@media (min-width: 981px){
  #offer .offer-visual{
    position: sticky;
    top: var(--sticky-top, 88px);        /* подгони под свою шапку */
    align-self: start;
    max-height: calc(100vh - var(--sticky-top, 88px) - 24px);
    overflow-y: auto;                    /* отдельный вертикальный скролл */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    z-index: 2;
  }
  #offer .offer-grid{ overflow: visible; }
}

/* === Offer: mobile accordion (левая колонка не sticky) === */
@media (max-width: 980px){
  #offer .offer-visual{
    position: static;
    top: auto;
    max-height: none;
    overflow: visible;
  }

  /* карточка-«шаг» как аккордеон без доп. разметки */
  #offer .step{
    overflow: hidden;
    border-radius: 16px;
    transition: max-height 320ms ease;
    max-height: 56px;                    /* высота «шапки» в закрытом виде */
  }
  #offer .step .rowtitle{
    display: flex; align-items: center;
    min-height: 56px; cursor: pointer;
  }
  #offer .step.is-open{
    max-height: 1200px;                  /* заведомо больше контента */
  }
  /* чтобы текст/чипы внутри шага не ломали строку заголовка */
  #offer .step *{ word-break: break-word; }
}


/* Calculator */
.segment-switch{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 16px}
.segment-switch .seg{padding:10px 14px;border-radius:16px;border:1px solid rgba(58,58,58,.12);background:#fff;cursor:pointer}
.segment-switch .seg.active{background:rgba(207,230,255,.35)}
.calc-panels{border:1px solid rgba(58,58,58,.08);border-radius:24px;box-shadow:var(--shadow-s);background:#fff}
.calc-form{display:none;padding:20px}
.calc-form.active{display:block}
.form-grid{display:grid;gap:16px;grid-template-columns:1fr 1fr}
.field{display:flex;flex-direction:column;gap:6px}
input,textarea{width:100%;padding:12px 14px;border-radius:16px;border:1px solid rgba(58,58,58,.12);background:#fff;box-shadow:inset 0 0 0 9999px rgba(255,255,255,.4);transition:border-color var(--duration-fast) var(--easing-smooth),box-shadow var(--duration-fast) var(--easing-smooth)}
input:focus,textarea:focus{outline:none;border-color:#CFE6FF;box-shadow:0 0 0 4px rgba(207,230,255,.45)}
.calc-output{margin-top:16px}
.result{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
.result .divider{grid-column:1/-1;height:1px;background:rgba(58,58,58,.1);margin:4px 0}
.result .grow{grid-column:1/-1}
.result strong{font-size:20px}
.result .pos{color:#1a7f37}
.result .neg{color:#a61b1b}
.hint{font-size:12px;opacity:.7;margin-top:6px}

/* Cases */
.cards-grid{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)}
.cards-grid.three{grid-template-columns:repeat(3,1fr)}
.case-card,.price-card{background:#fff;border:1px solid rgba(58,58,58,.08);border-radius:24px;box-shadow:var(--shadow-s);overflow:hidden}
.case-card .media{height:160px}
.grad-touch{background:var(--grad-touch)}
.grad-fresh{background:var(--grad-fresh)}
.grad-soft{background:var(--grad-soft)}
.case-card .content{padding:16px}
.case-card h3{margin:0 0 8px}
.case-card ul{margin:0;padding-left:18px}

/* Pricing */
.price-card{display:flex;flex-direction:column}
.pc-head{padding:16px 18px;font-weight:700}
.pc-body{list-style:disc;margin:0;padding:14px 22px;flex:1}
.pc-foot{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-top:1px solid rgba(58,58,58,.08)}
.price{font-weight:700}

/* Contact */
.contact-grid{display:grid;gap:24px;grid-template-columns:1fr 1fr;align-items:start}
.form{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid rgba(58,58,58,.08);border-radius:24px;box-shadow:var(--shadow-s);padding:20px}
.checkbox{display:flex;gap:10px;align-items:center;font-size:14px}
.w-full{width:100%}
.ticks{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
.ticks li{position:relative;padding-left:22px}
.ticks li::before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg, rgba(127,184,255,.18), rgba(175,164,255,.18), rgba(255,151,170,.18))}

/* Footer */
.footer{padding:40px 0;border-top:1px solid rgba(58,58,58,.08);background:#fff}
.footer-inner{display:flex;align-items:center;justify-content:space-between}

/* Responsive */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr}
  .offer-grid{grid-template-columns:1fr}
  .cards-grid,.cards-grid.three{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .h1{font-size:36px}
  .h2{font-size:28px}
  .cards-grid,.cards-grid.three{grid-template-columns:1fr}
}


/* --- VS (Без нас / С нами) --- */
.vs-grid{display:grid;gap:20px;grid-template-columns:1fr 1.35fr;align-items:start}
.vs-tabs{display:flex;gap:8px;flex-wrap:wrap}
.vs-tabs .tab{padding:10px 14px;border-radius:16px;border:1px solid rgba(58,58,58,.12);background:#fff;cursor:pointer}
.vs-tabs .tab.active{background:rgba(207,230,255,.35)}
.vs-panels{background:#fff;border:1px solid rgba(58,58,58,.08);border-radius:24px;box-shadow:var(--shadow-s);padding:20px}
.vs-panel .mini-mocks{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:12px}
.vs-panel .mock{height:90px;border-radius:16px;border:1px solid rgba(58,58,58,.08);box-shadow:var(--shadow-s);background:linear-gradient(135deg, rgba(127,184,255,.18), rgba(175,164,255,.18), rgba(255,151,170,.18)), rgba(216,243,229,.25), rgba(255,214,194,.25))}
.vs-panel .mock.form{background:#fff;position:relative;overflow:hidden}
.vs-panel .mock.form::before{content:"";position:absolute;left:12px;top:16px;right:12px;height:12px;border-radius:8px;background:rgba(58,58,58,.12)}
.vs-panel .mock.form::after{content:"";position:absolute;left:12px;top:40px;right:30%;height:12px;border-radius:8px;background:rgba(58,58,58,.12)}
.vs-panel .mock.events{position:relative}
.vs-panel .mock.events::before{content:"● ● ●";position:absolute;left:12px;top:14px;opacity:.5}
.vs-panel .mock.map{background:var(--grad-fresh)}
.vs-panel .dimmed .mock{opacity:.6;filter:grayscale(.2)}
.vs-panel .broken{box-shadow:inset 0 0 0 3px rgba(166,27,27,.15)}
.vs-panel .noisy::before{content:"✖ ✖ ✖";position:absolute;left:12px;top:14px;opacity:.5}

@media (max-width:980px){
  .vs-grid{grid-template-columns:1fr}
}
/* Навигация на мобиле: только лого + кнопка */
@media (max-width: 760px){
  .nav-inner{ gap:8px; }                 /* чуть компактнее шапку */
  .nav-links a:not(.btn){ display:none; }/* скрыть все пункты, кроме кнопки */
}