/* ===========================
   TOKENS — Telegram palette
   =========================== */
:root {
  --font: 'Inter', system-ui, -apple-system, sans-serif;

  --text-xs:   clamp(0.75rem,  0.7rem  + 0.2vw,  0.8125rem);
  --text-sm:   clamp(0.875rem, 0.82rem + 0.25vw, 0.9375rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.6vw,  1.375rem);
  --text-xl:   clamp(1.375rem, 1.1rem  + 1.1vw,  2rem);
  --text-2xl:  clamp(1.75rem,  1rem    + 2.5vw,  3rem);
  --text-3xl:  clamp(2.25rem,  0.8rem  + 4vw,    4rem);

  --sp-1:0.25rem; --sp-2:0.5rem;  --sp-3:0.75rem; --sp-4:1rem;
  --sp-5:1.25rem; --sp-6:1.5rem;  --sp-8:2rem;    --sp-10:2.5rem;
  --sp-12:3rem;   --sp-16:4rem;   --sp-20:5rem;   --sp-24:6rem;

  --r-sm:0.5rem; --r-md:0.75rem; --r-lg:1rem; --r-xl:1.25rem; --r-2xl:1.5rem; --r-full:9999px;

  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease-in:  cubic-bezier(0.4,0,1,1);
  --t-ui:     200ms cubic-bezier(0.16,1,0.3,1);

  --content: 1100px;
}

/* LIGHT */
:root, [data-theme="light"] {
  --color-bg:          #ffffff;
  --color-bg2:         #f4f4f5;
  --color-surface:     #ffffff;
  --color-surface2:    #f4f4f5;
  --color-border:      #e4e4e7;
  --color-divider:     #ebebec;
  --color-text:        #0d0d0f;
  --color-text2:       #333333;
  --color-muted:       #707579;
  --color-faint:       #b0b0b8;

  --color-primary:     #2aabee;
  --color-primary-d:   #1e96d4;
  --color-primary-bg:  rgba(42,171,238,0.10);
  --color-primary-glow:rgba(42,171,238,0.25);
  --color-primary-inv: #ffffff;

  --color-section2:    #f4f4f5;

  --glass-bg:    rgba(255,255,255,0.72);
  --glass-border:rgba(255,255,255,0.5);

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.09);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.13);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.18);
}

/* DARK */
[data-theme="dark"] {
  --color-bg:          #17212b;
  --color-bg2:         #232e3c;
  --color-surface:     #232e3c;
  --color-surface2:    #2b3a4a;
  --color-border:      #344455;
  --color-divider:     #2e3d4e;
  --color-text:        #f0f0f4;
  --color-text2:       #e0e0e8;
  --color-muted:       #8a9ab4;
  --color-faint:       #546b85;

  --color-primary:     #2aabee;
  --color-primary-d:   #3db8f5;
  --color-primary-bg:  rgba(42,171,238,0.14);
  --color-primary-glow:rgba(42,171,238,0.22);
  --color-primary-inv: #ffffff;

  --color-section2:    #232e3c;

  --glass-bg:    rgba(23,33,43,0.75);
  --glass-border:rgba(255,255,255,0.08);

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.35);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.55);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.65);
}

/* ===========================
   BASE
   =========================== */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html {
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  scroll-behavior:smooth;
  scroll-padding-top:68px;
}

body {
  font-family:var(--font);
  font-size:var(--text-base);
  color:var(--color-text);
  background:var(--color-bg);
  min-height:100dvh;
  overflow-x:hidden;
  transition:background .25s ease, color .25s ease;
}

img,svg { display:block; max-width:100%; }
ul { list-style:none; }
input,button,textarea,select { font:inherit; color:inherit; }
h1,h2,h3 { text-wrap:balance; line-height:1.15; }
p { text-wrap:pretty; line-height:1.65; }
button { cursor:pointer; background:none; border:none; }
a { color:inherit; text-decoration:none; transition:opacity var(--t-ui); }
a:hover { opacity:.85; }
::selection { background:rgba(42,171,238,.22); }
:focus-visible { outline:2px solid var(--color-primary); outline-offset:3px; border-radius:var(--r-sm); }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ===========================
   LAYOUT
   =========================== */
.container { width:100%; max-width:var(--content); margin-inline:auto; padding-inline:clamp(var(--sp-5),5vw,var(--sp-12)); }
.section { padding-block:clamp(var(--sp-12),8vw,var(--sp-24)); }
.section-label { display:inline-flex; align-items:center; gap:var(--sp-2); font-size:var(--text-xs); font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--color-primary); margin-bottom:var(--sp-4); }
.section-title { font-size:var(--text-2xl); font-weight:800; color:var(--color-text); letter-spacing:-.025em; line-height:1.15; }
.section-head { text-align:center; margin-bottom:clamp(var(--sp-10),5vw,var(--sp-16)); }

/* ===========================
   ANIMATIONS
   =========================== */
.fade-up {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .65s var(--ease-out), transform .65s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.fade-up.visible { opacity:1; transform:translateY(0); }

.reveal {
  opacity:0;
  transform:translateY(20px);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
  transition-delay:var(--rd,0ms);
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* ===========================
   BUTTON
   =========================== */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-8);
  border-radius:var(--r-full);
  font-size:var(--text-sm); font-weight:600; letter-spacing:.03em; white-space:nowrap;
  cursor:pointer; border:none;
  transition:background var(--t-ui), box-shadow var(--t-ui), transform var(--t-ui), opacity var(--t-ui);
}
.btn--lg  { padding:var(--sp-4) var(--sp-10); font-size:var(--text-base); }
.btn--sm  { padding:var(--sp-2) var(--sp-5); font-size:var(--text-xs); }

.btn--primary { background:var(--color-primary); color:#fff; }
.btn--primary:hover { background:var(--color-primary-d); opacity:1; }

.btn--tg {
  background:linear-gradient(135deg,#2aabee 0%,#229ed9 100%);
  box-shadow:0 4px 20px var(--color-primary-glow);
}
.btn--tg:hover  { transform:translateY(-2px); box-shadow:0 8px 32px rgba(42,171,238,.45); opacity:1; }
.btn--tg:active { transform:translateY(0); box-shadow:0 2px 12px var(--color-primary-glow); }

/* Glow pulse */
.btn--glow { position:relative; }
.btn--glow::after {
  content:'';
  position:absolute; inset:-4px;
  border-radius:inherit;
  background:linear-gradient(135deg,#2aabee,#229ed9);
  filter:blur(12px);
  opacity:0;
  z-index:-1;
  transition:opacity .3s ease;
}
.btn--glow:hover::after { opacity:.45; }

/* ===========================
   HEADER — Apple glassmorphism
   =========================== */
.header {
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:62px;
  transition:transform .4s var(--ease-out);
}

.header__glass {
  position:absolute; inset:0;
  background:var(--glass-bg);
  backdrop-filter:blur(20px) saturate(1.8);
  -webkit-backdrop-filter:blur(20px) saturate(1.8);
  border-bottom:1px solid var(--glass-border);
  box-shadow:0 1px 0 rgba(0,0,0,.06), var(--shadow-sm);
  transition:background .25s ease, border-color .25s ease, box-shadow .3s ease;
}

.header--scrolled .header__glass {
  box-shadow:0 1px 0 rgba(0,0,0,.08), 0 4px 24px rgba(0,0,0,.1);
}

.header--hidden { transform:translateY(-100%); }

.header__inner {
  position:relative; z-index:1;
  display:flex; align-items:center; gap:var(--sp-8); height:100%;
}

/* Logo */
.logo { display:flex; align-items:center; gap:var(--sp-3); flex-shrink:0; }
.logo__text { font-size:var(--text-base); font-weight:500; color:var(--color-text); letter-spacing:-.01em; }
.logo__text strong { font-weight:800; color:var(--color-primary); }

.logo__img {
  height: 44px;
  width: 44px;
  display: block;
  object-fit: contain;
  transition: opacity .3s ease, transform .4s var(--ease-out), filter .4s ease;
}
.logo:hover .logo__img { transform: scale(1.03); filter: drop-shadow(0 0 8px rgba(42,171,238,0.4)); }

/* Light theme: show light logo, hide dark */
:root .logo__img--light,
[data-theme="light"] .logo__img--light { display: block; }
[data-theme="light"] .logo__img--dark  { display: none; }

/* Dark theme: show dark logo, hide light */
[data-theme="dark"] .logo__img--light { display: none; }
[data-theme="dark"] .logo__img--dark  { display: block; }

/* Default fallback (system dark) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .logo__img--light { display: none; }
  :root:not([data-theme]) .logo__img--dark  { display: block; }
}

/* Nav */
.nav { display:flex; align-items:center; gap:var(--sp-6); margin-left:auto; }

.nav__link {
  font-size:var(--text-sm); font-weight:500;
  color:var(--color-muted);
  position:relative; padding-block:var(--sp-1);
  transition:color var(--t-ui);
}
.nav__link::after {
  content:''; position:absolute; bottom:-2px; left:0; right:0;
  height:1.5px; background:var(--color-primary);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-ui);
}
.nav__link:hover { color:var(--color-text); opacity:1; }
.nav__link:hover::after { transform:scaleX(1); }
.nav__link.active { color:var(--color-primary); }
.nav__link.active::after { transform:scaleX(1); }

.header__right { display:flex; align-items:center; gap:var(--sp-4); margin-left:var(--sp-4); }

.theme-toggle {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:var(--r-full);
  color:var(--color-muted);
  transition:color var(--t-ui), background var(--t-ui);
}
.theme-toggle:hover { color:var(--color-primary); background:var(--color-primary-bg); }

/* Burger */
.burger { display:none; flex-direction:column; gap:5px; width:44px; height:44px; padding:10px; justify-content:center; align-items:center; cursor:pointer; position:relative; z-index:10; }
.burger span { display:block; height:2px; width:100%; background:#0d0d0f; transition:transform .3s ease, opacity .3s ease; transform-origin:center; }
[data-theme="dark"] .burger span { background:#ffffff; }
.burger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity:0; }
.burger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* Mobile nav */
.mobile-nav {
  position:absolute; top:62px; left:0; right:0;
  background:var(--glass-bg); backdrop-filter:blur(20px) saturate(1.8);
  -webkit-backdrop-filter:blur(20px) saturate(1.8);
  border-bottom:1px solid var(--glass-border);
  padding:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-4);
  transform:translateY(-110%); opacity:0;
  transition:transform .4s var(--ease-out), opacity .3s ease;
  pointer-events:none;
}
.mobile-nav.open { transform:translateY(0); opacity:1; pointer-events:auto; }
.mobile-nav__link { font-size:var(--text-lg); font-weight:500; color:var(--color-text); padding-block:var(--sp-2); }

/* ===========================
   HERO
   =========================== */
.hero {
  position:relative; min-height:100svh;
  display:flex; flex-direction:column;
  padding-top:62px; overflow:hidden;
  background:var(--color-bg);
}

/* Background effects */
.hero__bg { position:absolute; inset:0; pointer-events:none; z-index:0; }

.hero__glow {
  position:absolute; border-radius:50%;
  filter:blur(90px); pointer-events:none;
}
.hero__glow--1 {
  width:600px; height:600px;
  background:radial-gradient(circle,rgba(42,171,238,.18) 0%,transparent 70%);
  top:-180px; right:-120px;
  animation:glow-drift1 16s ease-in-out infinite alternate;
}
.hero__glow--2 {
  width:400px; height:400px;
  background:radial-gradient(circle,rgba(34,158,217,.12) 0%,transparent 70%);
  bottom:-80px; left:-100px;
  animation:glow-drift2 20s ease-in-out infinite alternate;
}
.hero__glow--3 {
  width:200px; height:200px;
  background:radial-gradient(circle,rgba(42,171,238,.1) 0%,transparent 70%);
  top:40%; left:30%;
  animation:glow-drift3 12s ease-in-out infinite alternate;
}

@keyframes glow-drift1 { from{transform:translate(0,0) scale(1)} to{transform:translate(40px,30px) scale(1.1)} }
@keyframes glow-drift2 { from{transform:translate(0,0)} to{transform:translate(-25px,20px) scale(1.08)} }
@keyframes glow-drift3 { from{transform:translate(0,0) scale(1)} to{transform:translate(20px,-30px) scale(1.15)} }

.hero__particles { position:absolute; inset:0; width:100%; height:100%; opacity:.5; }

.hero__inner {
  position:relative; z-index:1; flex:1;
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center; gap:clamp(var(--sp-10),6vw,var(--sp-20));
  padding-block:var(--sp-20);
  width:100%;
}

.hero__content { display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-6); }

.hero__badge {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-4);
  background:var(--color-primary-bg);
  border:1px solid rgba(42,171,238,.25);
  border-radius:var(--r-full);
  font-size:var(--text-xs); font-weight:600;
  color:var(--color-primary); letter-spacing:.06em;
  backdrop-filter:blur(8px);
}

.hero__title {
  font-size:var(--text-3xl); font-weight:900;
  overflow-wrap: break-word;
  word-break: break-word;
  color:var(--color-text); letter-spacing:-.035em; line-height:1.05;
}
.hero__title-accent {
  color:var(--color-primary);
  text-shadow:0 0 40px rgba(42,171,238,.35);
}

.hero__sub { font-size:var(--text-lg); color:var(--color-muted); max-width:46ch; line-height:1.7; }
.hero__sub strong { color:var(--color-text); font-weight:700; }

.hero__cta-wrap { display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-3); }

.hero__hint {
  display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--text-xs); color:var(--color-muted);
}

/* Phone mockup */
.hero__visual {
  display:flex; justify-content:center; align-items:center;
  position:relative; padding:40px 64px 30px 64px;
}

.hero__phone {
  position:relative; width:260px;
  background:var(--color-surface2);
  border-radius:20px; overflow:visible;
  box-shadow:var(--shadow-xl), 0 0 0 1px var(--color-border), 0 0 60px rgba(42,171,238,.12);
  animation:phone-float 6s ease-in-out infinite alternate;
}
.hero__phone-header { border-radius:20px 20px 0 0; overflow:hidden; }
.hero__phone-body   { border-radius:0 0 20px 20px; overflow:hidden; }
[data-theme="dark"] .hero__phone { background:var(--color-surface); }

@keyframes phone-float { from{transform:translateY(0) rotate(-1deg)} to{transform:translateY(-14px) rotate(1.5deg)} }

.hero__phone-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-4) var(--sp-5);
  background:var(--color-primary);
  color:#fff;
}
.hero__phone-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.45); }
.hero__phone-name { font-size:var(--text-sm); font-weight:600; color:#fff; }
.hero__phone-online { font-size:10px; color:rgba(255,255,255,.75); }

.hero__phone-body {
  padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3); min-height:190px;
}

.msg { display:flex; flex-direction:column; max-width:80%; }
.msg--in  { align-self:flex-start; }
.msg--out { align-self:flex-end; }
.msg__bubble {
  padding:var(--sp-3) var(--sp-4);
  font-size:var(--text-xs); line-height:1.5; font-weight:500;
  border-radius:14px;
}
.msg--in .msg__bubble {
  background:var(--color-surface); color:var(--color-text);
  border:1px solid var(--color-border); border-bottom-left-radius:4px;
}
[data-theme="dark"] .msg--in .msg__bubble { background:var(--color-surface2); }
.msg--out .msg__bubble { background:var(--color-primary); color:#fff; border-bottom-right-radius:4px; }
.msg__time { font-size:10px; color:var(--color-faint); margin-top:2px; }
.msg--out .msg__time { text-align:right; }

/* Floating stats */
.fstat {
  position:absolute; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:var(--sp-3) var(--sp-4);
  background:var(--glass-bg); border:1px solid var(--glass-border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-md);
  backdrop-filter:blur(12px) saturate(1.5);
  -webkit-backdrop-filter:blur(12px) saturate(1.5);
}
.fstat--1 { top:-14px; right:-48px; animation:fstat-bob1 5s ease-in-out infinite alternate; }
.fstat--2 { bottom:30px; left:-52px; animation:fstat-bob2 6s ease-in-out infinite alternate; }
.fstat--3 { bottom:-14px; right:-32px; animation:fstat-bob3 7s ease-in-out infinite alternate; }

@keyframes fstat-bob1 { from{transform:translateY(0)} to{transform:translateY(-8px)} }
@keyframes fstat-bob2 { from{transform:translateY(0)} to{transform:translateY(-6px)} }
@keyframes fstat-bob3 { from{transform:translateY(0)} to{transform:translateY(-5px)} }

.fstat__num { font-size:var(--text-lg); font-weight:900; color:var(--color-primary); line-height:1; }
.fstat__lbl { font-size:10px; font-weight:500; color:var(--color-muted); }

/* Metrics bar */
.hero__metrics {
  position:relative; z-index:1;
  background:var(--glass-bg);
  backdrop-filter:blur(16px) saturate(1.6);
  -webkit-backdrop-filter:blur(16px) saturate(1.6);
  border-top:1px solid var(--glass-border);
}
.hero__metrics-inner {
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:var(--sp-10); padding-block:var(--sp-6);
}
.hm-item { display:flex; align-items:baseline; flex-wrap:wrap; gap:0; justify-content:center; }
.hm-num,.hm-sfx,.hm-prefix { font-size:var(--text-xl); font-weight:900; color:var(--color-primary); line-height:1; letter-spacing:-.03em; }
.hm-lbl { display:block; width:100%; text-align:center; font-size:var(--text-xs); color:var(--color-muted); margin-top:var(--sp-1); }
.hm-divider { width:1px; height:40px; background:var(--color-divider); flex-shrink:0; }

/* ===========================
   FACTS
   =========================== */
.facts { background:var(--color-section2); }

.facts__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6); }

.fact-card {
  display:flex; flex-direction:column; gap:var(--sp-5);
  padding:var(--sp-8);
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--r-2xl); box-shadow:var(--shadow-sm);
  transition:border-color var(--t-ui), box-shadow var(--t-ui), transform var(--t-ui);
}
.fact-card:hover {
  border-color:var(--color-primary);
  box-shadow:var(--shadow-md), 0 0 0 3px var(--color-primary-bg);
  transform:translateY(-4px);
}
.fact-card__icon {
  width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  background:var(--color-primary-bg); border-radius:var(--r-lg);
}
.fact-card h3 { font-size:var(--text-base); font-weight:700; color:var(--color-text); margin-bottom:var(--sp-2); }
.fact-card p  { font-size:var(--text-sm); color:var(--color-muted); line-height:1.65; }

/* ===========================
   PROCESS — Порядок работы
   =========================== */
.process { background:var(--color-bg); }

.process__steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  position:relative;
  padding-inline: var(--sp-4);
}

.step {
  position:relative;
  padding-right:var(--sp-4);
}

.step__connector {
  position:absolute;
  top: 30px;
  right: -20px;
  width:40px;
  z-index:2;
  pointer-events:none;
}
.step__connector svg { width:100%; height:auto; }

.step--last .step__connector { display:none; }
.step--last { padding-right:0; }

.step__inner {
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--r-2xl); padding:var(--sp-8);
  height:100%;
  transition:border-color var(--t-ui), box-shadow var(--t-ui), transform var(--t-ui), background var(--t-ui);
  position:relative; overflow:hidden;
}

.step__inner::before {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(135deg, var(--color-primary-bg) 0%, transparent 60%);
  opacity:0;
  transition:opacity var(--t-ui);
}

.step.visible .step__inner { border-color:var(--color-primary); }
.step.visible .step__inner::before { opacity:1; }

.step--active .step__inner {
  background:linear-gradient(135deg, var(--color-primary) 0%, #1a8ecf 100%);
  border-color:transparent;
  box-shadow:var(--shadow-md), 0 0 30px rgba(42,171,238,.3);
  color:#fff;
}
.step--active .step__inner::before { display:none; }

.step__num {
  font-size:var(--text-3xl); font-weight:900; line-height:1;
  color:var(--color-primary); margin-bottom:var(--sp-5);
  letter-spacing:-.04em;
  transition:color var(--t-ui);
}
.step--active .step__num { color:rgba(255,255,255,.4); }

.step__content h3 {
  font-size:var(--text-base); font-weight:700;
  color:var(--color-text); margin-bottom:var(--sp-4);
  transition:color var(--t-ui);
}
.step--active .step__content h3 { color:#fff; }

.step__content ul { display:flex; flex-direction:column; gap:var(--sp-2); }
.step__content li {
  font-size:var(--text-sm); color:var(--color-muted);
  padding-left:var(--sp-5); position:relative; line-height:1.5;
  transition:color var(--t-ui);
}
.step--active .step__content li { color:rgba(255,255,255,.85); }
.step__content li::before {
  content:'';
  position:absolute; left:0; top:7px;
  width:6px; height:6px; border-radius:50%;
  background:var(--color-primary);
  transition:background var(--t-ui);
}
.step--active .step__content li::before { background:rgba(255,255,255,.6); }

/* Progress line under steps */
.process__steps::after {
  content:'';
  position:absolute; top:32px; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg, var(--color-primary) 0%, rgba(42,171,238,.1) 100%);
  z-index:0;
  pointer-events:none;
}

/* Step hover effect (non-active) */
.step:not(.step--active) .step__inner:hover {
  border-color:var(--color-primary);
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
}

/* ===========================
   CASES
   =========================== */
.cases { background:var(--color-section2); }

.cases__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-6); margin-bottom:clamp(var(--sp-10),5vw,var(--sp-16)); }

.case-card {
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--r-2xl); padding:var(--sp-8);
  box-shadow:var(--shadow-sm);
  position:relative; overflow:hidden;
  transition:border-color var(--t-ui), box-shadow var(--t-ui), transform var(--t-ui);
}
.case-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--color-primary),#229ed9); }
.case-card:hover { border-color:var(--color-primary); box-shadow:var(--shadow-md), 0 0 24px var(--color-primary-glow); transform:translateY(-3px); }

.case-card__tag { display:inline-block; padding:4px 12px; background:var(--color-primary-bg); border-radius:var(--r-full); font-size:var(--text-xs); font-weight:600; color:var(--color-primary); margin-bottom:var(--sp-5); }
.case-card__head { display:flex; align-items:center; gap:var(--sp-4); margin-bottom:var(--sp-6); }
.case-card__ava { width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:var(--color-primary-bg); border-radius:var(--r-md); color:var(--color-primary); flex-shrink:0; }
.case-card__niche { font-size:var(--text-base); font-weight:700; color:var(--color-text); }
.case-card__sub { font-size:var(--text-xs); color:var(--color-muted); margin-top:2px; }

.case-card__stats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); padding:var(--sp-5); background:var(--color-bg2); border-radius:var(--r-lg); margin-bottom:var(--sp-5); border:1px solid var(--color-divider); }
.case-stat { display:flex; flex-direction:column; align-items:center; gap:3px; }
.case-stat__val { font-size:var(--text-lg); font-weight:800; color:var(--color-primary); line-height:1; }
.case-stat__key { font-size:11px; color:var(--color-muted); font-weight:500; text-align:center; line-height:1.3; }

.case-card__desc { font-size:var(--text-sm); color:var(--color-muted); line-height:1.65; }

.cases__cta {
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); text-align:center;
  padding:clamp(var(--sp-10),5vw,var(--sp-16)) var(--sp-6);
  background:var(--color-primary-bg); border:1px solid rgba(42,171,238,.2);
  border-radius:var(--r-2xl);
  position:relative; overflow:hidden;
}
.cases__cta::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 100%, rgba(42,171,238,.08) 0%, transparent 70%);
  pointer-events:none;
}
.cases__cta-note { font-size:var(--text-sm); color:var(--color-muted); }

/* ===========================
   FOOTER
   =========================== */
.footer {
  padding-block:var(--sp-8);
  border-top:1px solid var(--color-divider);
  background:var(--color-section2);
}
.footer__inner { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5); flex-wrap:wrap; }
.footer__copy { font-size:var(--text-xs); color:var(--color-faint); }
.footer__links { display:flex; gap:var(--sp-6); }
.footer__links a { font-size:var(--text-xs); color:var(--color-faint); transition:color var(--t-ui); }
.footer__meta-note{ font-size:var(--text-xs); color:var(--color-faint); transition:color var(--t-ui);}
.footer__links a:hover { color:var(--color-primary); opacity:1; }

/* ===========================
   RESPONSIVE
   =========================== */
@media (max-width:860px) {
  .nav, .nav__cta { display:none; }
  .burger { display:flex; margin-left:auto; }

  .hero__inner { grid-template-columns:1fr; padding-block:var(--sp-16); text-align:center; }
  .hero__content { align-items:center; }
  .hero__cta-wrap { align-items:center; }
  .hero__visual { order:-1; padding:30px 60px 20px; }

  .facts__grid { grid-template-columns:1fr; }
  .cases__grid { grid-template-columns:1fr; }

  .process__steps {
    grid-template-columns:1fr;
    gap:var(--sp-4);
  }
  .process__steps::after { display:none; }
  .step { padding-right:0; }
  .step__connector { display:none; }

  .footer__inner { flex-direction:column; align-items:center; text-align:center; }
  .hero__metrics-inner { gap:var(--sp-6); }
  .hm-divider { display:none; }
}

@media (max-width:600px) {
  .hero__title { font-size:clamp(1.8rem,8vw,2.5rem); }
  .btn--lg { padding:var(--sp-4) var(--sp-6); font-size:var(--text-sm); }
  .hero__visual { padding:20px 40px; }
  .fstat--3 { display:none; }
  .case-card__stats { grid-template-columns:1fr 1fr; }
}

/* ===========================
   PROCESS STEP ANIMATION (JS-triggered)
   =========================== */
.step__inner { will-change:transform; }

.step-line-animate {
  stroke-dashoffset:100;
  stroke-dasharray:100;
  animation:drawLine .8s var(--ease-out) forwards;
}

@keyframes drawLine {
  to { stroke-dashoffset:0; }
}

/* Connecting arrows animate when steps become visible */
.step.visible .step__connector path {
  stroke-dasharray:80;
  stroke-dashoffset:80;
  animation:drawArrow .6s var(--ease-out) forwards;
  animation-delay:var(--rd, 0ms);
}

@keyframes drawArrow {
  to { stroke-dashoffset:0; }
}

/* ===========================
   TELEGRAM WIDGET
   =========================== */
.tg-widget {
  position: fixed;
  bottom: var(--sp-6);
  right: var(--sp-6);
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-4);
}

/* Кнопка */
.tg-btn {
  position: relative;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2aabee 0%, #229ed9 100%);
  box-shadow: 0 4px 24px rgba(42,171,238,0.45);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: none;
  transition: transform .3s var(--ease-out), box-shadow .3s ease;
  animation: tg-btn-appear .5s var(--ease-out) both;
}
.tg-btn:hover { transform: scale(1.08); box-shadow: 0 8px 32px rgba(42,171,238,0.55); }
.tg-btn:active { transform: scale(0.96); }

@keyframes tg-btn-appear {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.tg-btn__badge {
  position: absolute;
  top: -2px; right: -2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #ff3b30;
  color: #fff;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--color-bg);
  animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.15); }
}

.tg-btn__badge.hidden { display: none; }

/* Пузырь */
.tg-bubble {
  width: 300px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  transform-origin: bottom right;
  animation: bubble-in .35s var(--ease-out) both;
}

.tg-bubble.hidden {
  animation: bubble-out .25s var(--ease-in) both;
  pointer-events: none;
}

@keyframes bubble-in {
  from { opacity: 0; transform: scale(0.85) translateY(12px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
@keyframes bubble-out {
  from { opacity: 1; transform: scale(1)    translateY(0); }
  to   { opacity: 0; transform: scale(0.85) translateY(12px); }
}

.tg-bubble__header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: linear-gradient(135deg, #2aabee 0%, #229ed9 100%);
}

.tg-bubble__avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.tg-bubble__name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: #fff;
}

.tg-bubble__status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.8);
  margin-top: 2px;
}

.tg-bubble__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 6px #4ade80;
  animation: dot-pulse 2s ease-in-out infinite;
}

@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

.tg-bubble__close {
  margin-left: auto;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  cursor: pointer; border: none;
  transition: background var(--t-ui);
  flex-shrink: 0;
}
.tg-bubble__close:hover { background: rgba(255,255,255,0.3); }

.tg-bubble__body {
  padding: var(--sp-5) var(--sp-5) 0;
}

.tg-bubble__msg {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.6;
  padding: var(--sp-4);
  background: var(--color-primary-bg);
  border-radius: var(--r-lg);
  border: 1px solid rgba(42,171,238,0.15);
}

.tg-bubble__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin: 0 auto var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
  background: linear-gradient(135deg, #2aabee 0%, #229ed9 100%);
  color: #fff;
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: box-shadow var(--t-ui), transform var(--t-ui), opacity var(--t-ui);
  box-shadow: 0 4px 16px rgba(42,171,238,0.35);
}
.tg-bubble__btn:hover { box-shadow: 0 6px 24px rgba(42,171,238,0.5); transform: translateY(-1px); opacity: 1; }

@media (max-width: 400px) {
  .tg-widget { bottom: var(--sp-4); right: var(--sp-4); }
  .tg-bubble { width: calc(100vw - 2rem); }
}

/* Форма внутри виджета */
.tg-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: 0 var(--sp-5) var(--sp-5);
}

.tg-input {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-bg2);
  border: 1px solid var(--color-border);
  border-radius: var(--r-lg);
  font-size: var(--text-sm);
  color: var(--color-text);
  outline: none;
  transition: border-color var(--t-ui), box-shadow var(--t-ui);
  font-family: var(--font);
  resize: none;
}
.tg-input::placeholder { color: var(--color-faint); }
.tg-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-bg);
}

.tg-textarea { min-height: 72px; }

.tg-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  background: linear-gradient(135deg, #2aabee 0%, #229ed9 100%);
  color: #fff;
  border: none;
  border-radius: var(--r-full);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow var(--t-ui), transform var(--t-ui), opacity var(--t-ui);
  box-shadow: 0 4px 16px rgba(42,171,238,0.35);
  font-family: var(--font);
}
.tg-submit:hover  { box-shadow: 0 6px 20px rgba(42,171,238,0.5); transform: translateY(-1px); }
.tg-submit:active { transform: translateY(0); }
.tg-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.tg-success {
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
}
.tg-success p {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.6;
}

/* 6 карточек в 2 ряда */
.facts__grid--6 {
  grid-template-columns: repeat(3, 1fr);
}

.facts__note {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin-top: var(--sp-8);
}

/* Ссылка в кейсе */
.case-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  margin-top: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  background: var(--color-primary-bg);
  border-radius: var(--r-full);
  border: 1px solid rgba(42,171,238,.2);
  transition: background var(--t-ui), box-shadow var(--t-ui), transform var(--t-ui), opacity var(--t-ui);
}
.case-card__link:hover {
  background: rgba(42,171,238,.18);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--color-primary-glow);
  opacity: 1;
}

/* Секция диагностика */
.diag { background: var(--color-primary-bg); }

.diag__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  padding: clamp(var(--sp-10), 5vw, var(--sp-16)) var(--sp-6);
  background: var(--color-surface);
  border: 1px solid rgba(42,171,238,.2);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-md), 0 0 60px rgba(42,171,238,.07);
  position: relative;
  overflow: hidden;
}

.diag__inner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(42,171,238,.08) 0%, transparent 70%);
  pointer-events: none;
}

.diag__title {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -.02em;
}

.diag__sub {
  font-size: var(--text-lg);
  color: var(--color-muted);
  line-height: 1.65;
}

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

/* Hero — кнопки в столбик */
.hero__cta-wrap {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: var(--sp-3) !important;
}

@media (max-width: 860px) {
  .hero__cta-wrap { align-items: center !important; }
}

/* Первая кнопка (PDF) чуть прозрачнее / другой стиль */
.hero__btn-pdf {
  background: linear-gradient(135deg, rgba(42,171,238,0.15) 0%, rgba(34,158,217,0.15) 100%) !important;
  border: 1px solid rgba(42,171,238,0.4);
  color: var(--color-primary) !important;
  box-shadow: none !important;
}
.hero__btn-pdf:hover {
  background: linear-gradient(135deg, rgba(42,171,238,0.25) 0%, rgba(34,158,217,0.25) 100%) !important;
  box-shadow: 0 4px 16px rgba(42,171,238,0.2) !important;
}

/* Кейсы — крупные цифры */
.case-stat__val {
  font-size: var(--text-2xl) !important;
  letter-spacing: -0.03em;
}

/* Кейсы — кнопки на одном уровне (прижать к низу карточки) */
.case-card {
  display: flex;
  flex-direction: column;
}
.case-card__desc {
  flex: 1;
}
.case-card__link {
  margin-top: auto !important;
  align-self: flex-start;
}

/* ===========================
   ФИНАЛЬНЫЕ ФИКСЫ АДАПТИВА
   =========================== */

/* --- Бургер — гарантированная видимость --- */
@media (max-width: 860px) {
  .burger {
    display: flex !important;
    flex-direction: column;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    z-index: 300;
    flex-shrink: 0;
  }
  .burger span {
    display: block !important;
    height: 2px;
    width: 22px;
    background: #0d0d0f;
    border-radius: 2px;
    transition: transform .3s ease, opacity .3s ease;
    transform-origin: center;
  }
  [data-theme="dark"] .burger span { background: #ffffff; }

  /* Hero — кнопки на мобилке по центру и растянуть */
  .hero__cta-wrap { align-items: stretch !important; }
  .btn--lg { width: 100%; }

  /* Кейсы — одна колонка, нормальные отступы */
  .cases__grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .case-card { padding: var(--sp-6); }
  .case-card__stats { grid-template-columns: repeat(3, 1fr); }

  /* Шаги — увеличить отступы на мобилке */
  .step__inner { padding: var(--sp-6) !important; }
}

@media (max-width: 600px) {
  /* Hero визуал — убрать лишний padding */
  .hero__visual { padding: 20px 30px !important; }
  .hero__phone { width: 220px; }

  /* Кейсы — статы в 2 колонки если не умещаются */
  .case-card__stats { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .case-stat__val { font-size: var(--text-xl) !important; }

  /* Шаги — компактнее */
  .step__inner { padding: var(--sp-5) !important; }
  .step__num { font-size: var(--text-2xl) !important; }

  /* Порядок работы — убрать лишний padding с сетки */
  .process__steps { padding-inline: 0; }
}

/* ===========================
   ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ КЕЙСОВ
   =========================== */
.cases__scroll {
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-4);
  margin-bottom: clamp(var(--sp-6), 4vw, var(--sp-10));
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) var(--color-surface2);
}

.cases__scroll::-webkit-scrollbar { height: 4px; }
.cases__scroll::-webkit-scrollbar-track { background: var(--color-surface2); border-radius: 2px; }
.cases__scroll::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 2px; }

.case-card--scroll {
  flex: 0 0 calc(50% - var(--sp-3));
  scroll-snap-align: start;
  min-width: 300px;
}

@media (max-width: 700px) {
  .case-card--scroll {
    flex: 0 0 85vw;
  }
}

/* ===========================
   СПИСКИ В КАРТОЧКАХ ЭКОСИСТЕМЫ
   =========================== */
.fact-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: 0;
  margin: 0;
}

.fact-list li {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.55;
  padding-left: var(--sp-5);
  position: relative;
}

.fact-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}

.step--active .fact-list li { color: rgba(255,255,255,.85); }
.step--active .fact-list li::before { background: rgba(255,255,255,.6); }

/* ===========================
   КАРУСЕЛЬ КЕЙСОВ — КРАСИВАЯ
   =========================== */

/* Навигация */
.cases__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.cases__arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted, var(--color-muted));
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--t-ui), border-color var(--t-ui),
              color var(--t-ui), transform var(--t-ui), box-shadow var(--t-ui);
  flex-shrink: 0;
}
.cases__arrow:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-bg);
  transform: scale(1.08);
  box-shadow: 0 0 0 4px var(--color-primary-bg);
}
.cases__arrow:active:not(:disabled) { transform: scale(0.96); }
.cases__arrow:disabled { opacity: 0.3; cursor: not-allowed; }

/* Точки */
.cases__dots {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}
.cases__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  cursor: pointer;
  transition: background var(--t-ui), transform var(--t-ui), width var(--t-ui);
  border: none;
  padding: 0;
}
.cases__dot.active {
  background: var(--color-primary);
  transform: scale(1.2);
  width: 22px;
  border-radius: var(--r-full);
}

/* Обёртка скролла */
.cases__scroll {
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  padding-bottom: var(--sp-2);
  /* Скрываем скроллбар визуально */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cases__scroll::-webkit-scrollbar { display: none; }

/* Карточка в карусели */
.case-card--scroll {
  flex: 0 0 calc(50% - var(--sp-3));
  scroll-snap-align: start;
  min-width: 300px;
  /* Анимация появления при входе во вью */
  transition:
    border-color var(--t-ui),
    box-shadow var(--t-ui),
    transform 0.4s var(--ease-out),
    opacity 0.4s var(--ease-out);
}

/* Неактивные карточки чуть тускнее */
.case-card--scroll.is-offscreen {
  opacity: 0.45;
  transform: scale(0.97);
}

@media (max-width: 700px) {
  .case-card--scroll {
    flex: 0 0 88vw;
  }
}

/* ===========================
   КЕЙСЫ: сетка на десктопе, карусель на мобилке
   =========================== */

/* Навигация (стрелки + точки) — только на мобилке */
.cases__nav { display: none; }

/* На десктопе — обычная сетка 2x2 */
@media (min-width: 701px) {
  .cases__scroll {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-6);
    overflow: visible !important;
    scroll-snap-type: none;
    padding-bottom: 0;
  }

  .case-card--scroll {
    flex: none !important;
    min-width: 0 !important;
    width: auto !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .case-card--scroll.is-offscreen {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* На мобилке — карусель */
@media (max-width: 700px) {
  .cases__nav { display: flex; }

  .cases__scroll {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
  }
}