/* ═══════════════════════════════════════════════════════════════
   TOKENS — единственное место, где заданы цвета, шрифты, отступы.
   Меняешь значение здесь → меняется на всём сайте.
═══════════════════════════════════════════════════════════════ */
:root{
  /* ── Цвета (перенесено из старого кода, без изменений) ── */
  --blue:#2563EB; --blue-d:#1a4fd4; --blue-l:#EFF4FF; --blue-ll:#F5F8FF;
  --gold:#C99A2E; --gold-l:#FBF4E3;
  --g50:#F8F9FC; --g100:#EEF0F8; --g200:#DDE1F0;
  --g400:#9AA3B8; --g600:#5A6380; --g900:#0A1628;
  --muted:#64748B;
  --text:#0F1A2E;

  /* ── Градиенты ── */
  --grad-blue:linear-gradient(135deg,#2563EB,#1a4fd4);
  --grad-gold:linear-gradient(135deg,#D4A843,#C99A2E);
  --grad-dark:linear-gradient(140deg,#0A1628,#1a2a4a);
  --grad-purple:linear-gradient(135deg,#7C3AED,#5B21B6);

  /* ── Радиусы и тени ── */
  --r:18px; --rs:12px;
  --sh:0 4px 24px rgba(37,99,235,.10);
  --shlg:0 24px 80px rgba(37,99,235,.18);

  /* ── Анимация ── */
  --tr:.28s cubic-bezier(.4,0,.2,1);

  /* ── Шрифты ── */
  --ff-head:'Sora',sans-serif;   /* заголовки: чистый профессиональный (было Syne) */
  --ff-body:'DM Sans',sans-serif;

  /* ── ТЕКУЧАЯ ТИПОГРАФИКА (clamp: min, идеал-vw, max) ──
     Размер шрифта плавно растёт с шириной экрана — без брейкпоинтов.
     На телефоне берётся min, на десктопе max, между — плавно.        */
  --fs-h1: clamp(1.75rem, 1.1rem + 3.2vw, 3.5rem);
  --fs-h2: clamp(1.5rem,  1.1rem + 2vw,   2.5rem);
  --fs-h3: clamp(1.15rem, 1rem + .8vw,    1.5rem);
  --fs-lead: clamp(1rem, .95rem + .4vw, 1.2rem);
  --fs-body: 1rem;
  --fs-sm: .875rem;

  /* ── СЕТКА ОТСТУПОВ (единый шаг) ── */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-6:1.5rem; --sp-8:2rem; --sp-12:3rem; --sp-16:4rem; --sp-24:6rem;

  /* ── Контейнер и вертикальные отступы секций (тоже текучие) ── */
  --container: 1200px;
  --gutter: clamp(1rem, .5rem + 2vw, 2rem);      /* боковые поля */
  --section-y: clamp(3rem, 2rem + 4vw, 5.5rem);  /* отступ секций сверху/снизу */
}

/* ── БРЕЙКПОИНТЫ (mobile-first, только для справки) ──
   Базовые стили = телефон. Медиа-запросы ниже ДОБАВЛЯЮТ сложность:
     @media (min-width: 600px)  — планшет
     @media (min-width: 900px)  — малый десктоп
     @media (min-width: 1200px) — широкий десктоп
   Используем min-width везде → не нужно перебивать стили !important. */
/* ═══════════════════════════════════════════════════════════════
   BASE — reset + типографика. Применяет токены. Зависит от tokens.css.
═══════════════════════════════════════════════════════════════ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:#0A1628; min-height:100%; }

body{
  font-family:var(--ff-body);
  color:var(--text);
  background:#fff;
  line-height:1.6;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
body > footer{ margin-top:auto; }
main{ flex:1; }

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

/* предотвращаем «вылет» длинных слов/URL за край на узких экранах */
p,h1,h2,h3,li,a{ overflow-wrap:break-word; }

/* ── Типографика на текучих токенах ── */
h1{ font-family:var(--ff-head); font-weight:700; font-size:var(--fs-h1); line-height:1.12; letter-spacing:-.02em; }
h2{ font-family:var(--ff-head); font-weight:700; font-size:var(--fs-h2); line-height:1.18; letter-spacing:-.015em; }
h3{ font-family:var(--ff-head); font-weight:700; font-size:var(--fs-h3); line-height:1.25; }
.lead{ font-size:var(--fs-lead); color:var(--muted); }
small,.text-sm{ font-size:var(--fs-sm); }

/* ── Доступность: видимый фокус для клавиатуры/screen-reader ── */
:focus-visible{ outline:3px solid var(--blue); outline-offset:2px; border-radius:4px; }

/* уважение к настройке "уменьшить анимацию" */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto; }
}
/* ═══════════════════════════════════════════════════════════════
   LAYOUT — сетки и структура. MOBILE-FIRST.
   Базовые правила = телефон (1 колонка). min-width добавляет колонки.
   НИ ОДНОГО !important. Контент перестраивается (reflow), не прячется.
═══════════════════════════════════════════════════════════════ */

/* ── Контейнер: текучая ширина + потолок ── */
.wrap{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ── Вертикальный ритм секций ── */
.section{ padding-block:var(--section-y); }

/* ═══════════════ НАВИГАЦИЯ ═══════════════
   Телефон: бургер виден, ссылки скрыты в выезжающем меню (это НЕ потеря
   контента — меню доступно по тапу). Десктоп: ссылки в ряд, бургер убран. */
.nav-links{ display:none; }          /* база (телефон): прячем горизонтальный ряд */
.lang-links{ display:none; }         /* база (телефон): язык переключаем в бургер-меню, не дублируем */
.hbg{ display:flex; }                /* бургер виден на телефоне */
/* Меню СКРЫТО по умолчанию. Открывается добавлением класса .open (через JS).
   ВАЖНО: не используем атрибут [hidden] — любое CSS-правило display его перебивает. */
.mob-menu{ display:none; flex-direction:column; gap:var(--sp-2); }
.mob-menu.open{ display:flex; }      /* открытое состояние */

@media (min-width:900px){
  .nav-links{ display:flex; gap:var(--sp-6); align-items:center; }
  .lang-links{ display:flex; gap:var(--sp-3); }
  .hbg{ display:none; }              /* на десктопе бургер не нужен */
  .mob-menu, .mob-menu.open{ display:none; }  /* на десктопе меню не нужно даже открытым */
}

/* ═══════════════ HERO ═══════════════
   Телефон: одна колонка — заголовок, кнопки, ПОД НИМИ визуал (reflow,
   а не display:none как было). Десктоп: две колонки бок о бок. */
.hero-grid{
  display:grid;
  grid-template-columns:1fr;        /* телефон: всё в столбик */
  gap:var(--sp-8);
  align-items:center;
}
.hv{ display:block; order:2; }       /* визуал виден на телефоне, идёт вторым */
.hero-copy{ order:1; }
.hero-btns{ display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.hero-btns .btn{ flex:1 1 auto; justify-content:center; }  /* кнопки тянутся */

@media (min-width:900px){
  .hero-grid{ grid-template-columns:1.1fr .9fr; gap:var(--sp-16); }
  .hero-btns .btn{ flex:0 0 auto; }  /* на десктопе кнопки по содержимому */
}

/* ═══════════════ АВТО-СЕТКИ (сами переносят карточки) ═══════════════
   auto-fit + minmax = браузер сам решает, сколько колонок влезает.
   Не нужны ручные брейкпоинты под каждую ширину. */
.fgrid,            /* features */
.pgrid,            /* portfolio */
.pricegrid{        /* pricing */
  display:grid;
  gap:var(--sp-6);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* Шаги процесса: телефон 1 кол → планшет 2 → десктоп 4 */
.pgsteps{ display:grid; gap:var(--sp-8); grid-template-columns:1fr; }
@media (min-width:600px){ .pgsteps{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1200px){ .pgsteps{ grid-template-columns:repeat(4,1fr); } }

/* ═══════════════ ДЕМО-ОКНО (iframe сайта/админки) ═══════════════
   Телефон: на всю ширину контейнера, высота ограничена вьюпортом, БЕЗ
   фиксированных px-ширин, которые ломали скролл. */
.mo-box{ width:100%; border-radius:14px; max-height:90vh; overflow:hidden; }
.mo-iframe{ width:100%; height:60vh; border:0; }
@media (min-width:900px){ .mo-iframe{ height:520px; } }

/* Вкладки демо (сайт / админка) — переносятся, не вылезают */
.mo-tabs{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }

/* ═══════════════ КОНТАКТЫ / ФОРМА ═══════════════ */
.cgrid{ display:grid; grid-template-columns:1fr; gap:var(--sp-8); }
.frow{ display:grid; grid-template-columns:1fr; gap:var(--sp-4); }
@media (min-width:600px){ .frow{ grid-template-columns:1fr 1fr; } }
@media (min-width:900px){ .cgrid{ grid-template-columns:1fr 1fr; } }

/* ═══════════════ ПОДВАЛ ═══════════════ */
.foot-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-8); }
@media (min-width:600px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:900px){ .foot-grid{ grid-template-columns:2fr 1fr 1fr; } }

/* WhatsApp убран из проекта по решению клиента — контакт только через форму. */
/* ═══════════════════════════════════════════════════════════════
   COMPONENTS — визуальные «кирпичики»: кнопки, карточки, формы, табы.
   Визуал перенесён из исходного сайта и приведён к токенам.
   Mobile-first, без костыльных !important.
   Зависит от tokens.css.
═══════════════════════════════════════════════════════════════ */

/* ─────────────── ЗАГОЛОВКИ СЕКЦИЙ ─────────────── */
.sec-head{ text-align:center; max-width:42rem; margin:0 auto var(--sp-12); }
.sec-head h2{ margin-bottom:var(--sp-3); letter-spacing:-.025em; color:var(--g900); }
.sec-head p{ color:var(--muted); line-height:1.7; }

.kicker{
  font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); display:inline-flex; align-items:center; gap:.55rem;
  margin-bottom:var(--sp-4);
}
.kicker::before{ content:''; width:18px; height:2px; background:var(--blue); border-radius:2px; flex-shrink:0; }

/* ─────────────── КНОПКИ ─────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.75rem; border-radius:50px;
  font-family:var(--ff-body); font-weight:600; font-size:.92rem;
  border:none; cursor:pointer; transition:transform var(--tr), box-shadow var(--tr);
  line-height:1.2; text-align:center;
}
.btn svg{ flex-shrink:0; }              /* иконка не сжимается при переносе текста */

.btn-blue{ background:var(--grad-blue); color:#fff; box-shadow:0 6px 28px rgba(37,99,235,.38); }
.btn-blue:hover{ transform:translateY(-2px); box-shadow:0 12px 40px rgba(37,99,235,.48); }

.btn-outline{ background:#fff; color:var(--text); border:2px solid var(--g200); }
.btn-outline:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-1px); }

.btn-gold{ background:var(--grad-gold); color:#fff; box-shadow:0 6px 22px rgba(201,154,46,.32); }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 12px 32px rgba(201,154,46,.42); }

.btn-sm{ padding:.55rem 1.25rem; font-size:.82rem; }

/* ─────────────── КАРТОЧКИ ─────────────── */
.card,.pcard,.fcard{
  border-radius:20px; padding:var(--sp-6);
  border:2px solid var(--g100); background:#fff;
  transition:box-shadow var(--tr), transform var(--tr);
}
.card:hover,.pcard:hover,.fcard:hover{ box-shadow:var(--shlg); }

/* выделенная карточка тарифа: на десктопе слегка приподнята, на телефоне — в ряд */
.pcard.feat{ border-color:var(--blue); }
@media (min-width:900px){ .pcard.feat{ transform:translateY(-12px); } }

.pbadge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--grad-gold); color:#fff; font-size:.7rem; font-weight:700;
  padding:.3rem .9rem; border-radius:50px; white-space:nowrap;
}
.pcard{ position:relative; }

/* ─────────────── ТАБЫ (фильтры портфолио / демо) ─────────────── */
.ftab,.mo-tab{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem 1rem; border-radius:50px;
  font-size:.82rem; font-weight:600;
  background:#fff; color:var(--g600); border:2px solid var(--g200);
  cursor:pointer; transition:var(--tr);
}
.ftab:hover,.ftab.act,.mo-tab.active{
  background:var(--grad-blue); color:#fff; border-color:transparent;
  box-shadow:0 4px 18px rgba(37,99,235,.3);
}
.ftab-ico{ width:22px; height:22px; flex-shrink:0; }

/* контейнеры табов переносятся, не вылезают за край */
.ftabs{ display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:center; }

/* ─────────────── МЕТКИ / МЕТРИКИ ─────────────── */
.met{ display:inline-flex; align-items:center; gap:.45rem; font-size:.8rem; color:var(--muted); font-weight:500; }
.met-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.hero-mets{ display:flex; flex-wrap:wrap; gap:var(--sp-4); }   /* метрики переносятся на узком экране */

/* ─────────────── ФОРМЫ ─────────────── */
.fg{ margin-bottom:var(--sp-4); }
.flbl{ display:block; font-size:.8rem; font-weight:700; margin-bottom:.35rem; color:#374151; }
.finp{
  width:100%; padding:.7rem .9rem;
  border:2px solid var(--g200); border-radius:10px;
  font-family:var(--ff-body); font-size:.9rem; color:var(--g900);
  background:#fff; transition:var(--tr);
}
.finp:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.09); }
.finp::placeholder{ color:var(--g400); }
textarea.finp{ resize:vertical; min-height:6.25rem; }

/* ─────────────── КАРТОЧКА ФОРМЫ / УСПЕХ ─────────────── */
.cform{ background:#fff; border:2px solid var(--g100); border-radius:var(--r); padding:var(--sp-8); }
.fsuc{ display:none; text-align:center; padding:var(--sp-8); }
.fsuc.show{ display:block; }

/* ═══════════════════════════════════════════════════════════════
   LEGAL PAGES — узкая колонка, типографика документа
═══════════════════════════════════════════════════════════════ */

.legal-page{ padding-top:96px; background:#fff; min-height:100vh; }
.legal-wrap{ width:100%; max-width:48rem; margin-inline:auto; padding-inline:clamp(1.25rem,3vw,2.5rem); }

.crumbs{ margin:var(--sp-6) 0 var(--sp-4); font-size:.82rem; color:var(--muted); }
.crumbs a{ color:var(--muted); }
.crumbs a:hover{ color:var(--blue); }
.crumbs .sep{ margin-inline:.5rem; color:var(--g400); }

.legal-head{ margin-bottom:var(--sp-8); padding-bottom:var(--sp-6); border-bottom:1px solid var(--g100); }
.legal-head .kicker{ display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--blue); background:var(--blue-l); padding:.35rem .85rem; border-radius:50px; margin-bottom:var(--sp-3); }
.legal-head h1{ font-family:var(--ff-head); font-weight:700; font-size:clamp(1.8rem,1rem + 2.6vw,2.5rem); line-height:1.15; letter-spacing:-.02em; margin-bottom:var(--sp-3); }
.legal-head .updated{ color:var(--muted); font-size:.85rem; }

.legal-body{ font-size:1rem; line-height:1.75; color:var(--g600); padding-bottom:var(--sp-24); }
.legal-body h2{ font-family:var(--ff-head); font-weight:700; font-size:1.35rem; color:var(--g900); margin:var(--sp-8) 0 var(--sp-4); letter-spacing:-.01em; }
.legal-body h3{ font-family:var(--ff-head); font-weight:600; font-size:1.1rem; color:var(--g900); margin:var(--sp-6) 0 var(--sp-3); }
.legal-body p{ margin-bottom:var(--sp-4); }
.legal-body ul,.legal-body ol{ margin:var(--sp-4) 0; padding-left:var(--sp-6); }
.legal-body li{ margin-bottom:var(--sp-2); }
.legal-body a{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.legal-body strong{ color:var(--g900); font-weight:600; }

.company-card{ background:var(--g50); border:1px solid var(--g100); border-radius:14px; padding:var(--sp-6); margin:var(--sp-6) 0; }
.company-card dl{ display:grid; grid-template-columns:1fr; gap:var(--sp-3) var(--sp-5); margin:0; }
@media(min-width:600px){ .company-card dl{ grid-template-columns:max-content 1fr; } }
.company-card dt{ font-weight:600; color:var(--g600); font-size:.88rem; }
.company-card dd{ color:var(--g900); font-size:.95rem; margin:0; }
.company-card dd a{ color:var(--blue); text-decoration:none; }
.company-card dd a:hover{ text-decoration:underline; }
.company-card dd code{ font-family:var(--ff-mono,monospace); background:#fff; padding:.15rem .45rem; border-radius:5px; font-size:.88rem; border:1px solid var(--g100); }

/* ═══════════════════════════════════════════════════════════════
   BLOG — list, niche, post pages
═══════════════════════════════════════════════════════════════ */

.article-wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.25rem,3vw,2.5rem); }

/* Blog list hero */
.blog-hero{ padding:128px 0 var(--sp-12); background:linear-gradient(158deg,#F0F4FF 0%,#fff 60%); }
.blog-kicker{ display:inline-block; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--blue); background:var(--blue-l); padding:.4rem .9rem; border-radius:50px; margin-bottom:var(--sp-4); }
.blog-hero h1{ font-family:var(--ff-head); font-weight:700; font-size:clamp(1.8rem,1.1rem + 3vw,2.8rem); line-height:1.12; letter-spacing:-.02em; max-width:42rem; margin-bottom:var(--sp-4); }
.blog-hero .lead{ font-size:clamp(1rem,.95rem + .4vw,1.15rem); color:var(--muted); max-width:38rem; line-height:1.65; }

/* Niche filter chips */
.blog-filter{ padding:var(--sp-8) 0 0; }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{ display:inline-flex; align-items:center; padding:.5rem 1rem; border-radius:50px; background:#fff; border:1.5px solid var(--g200); font-size:.85rem; font-weight:600; color:var(--g600); transition:var(--tr); white-space:nowrap; text-decoration:none; }
.chip:hover{ border-color:var(--blue); color:var(--blue); }
.chip.active{ background:var(--blue); border-color:var(--blue); color:#fff; }
.chip-count{ display:inline-block; margin-left:.4rem; padding:0 .4rem; background:rgba(255,255,255,.2); border-radius:10px; font-size:.72rem; }
.chip:not(.active) .chip-count{ background:var(--g100); color:var(--g600); }

/* Post cards grid */
.blog-grid-section{ padding:var(--sp-12) 0 var(--sp-24); }
.posts-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:var(--sp-6); margin-top:var(--sp-6); }
.post-card{ display:flex; flex-direction:column; background:#fff; border:2px solid var(--g100); border-radius:var(--r); overflow:hidden; transition:var(--tr); text-decoration:none; color:inherit; }
.post-card:hover{ border-color:var(--blue-l); transform:translateY(-3px); box-shadow:var(--shlg); }
.post-card-cover{ aspect-ratio:16/9; background-size:cover; background-position:center; background-image:linear-gradient(135deg,rgba(37,99,235,.3),rgba(201,154,46,.25)),url('https://images.unsplash.com/photo-1503951914875-452162b0f3f1?w=700&auto=format&q=80'); }
.post-card-cover.beauty{ background-image:linear-gradient(135deg,rgba(236,72,153,.35),rgba(168,85,247,.25)),url('https://images.unsplash.com/photo-1560066984-138dadb4c035?w=700&auto=format&q=80'); }
.post-card-cover.gym{ background-image:linear-gradient(135deg,rgba(16,185,129,.35),rgba(37,99,235,.25)),url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=700&auto=format&q=80'); }
.post-card-cover.dental{ background-image:linear-gradient(135deg,rgba(14,165,233,.35),rgba(99,102,241,.25)),url('https://images.unsplash.com/photo-1606811971618-4486d14f3f99?w=700&auto=format&q=80'); }
.post-card-cover.general{ background:var(--grad-dark); }
.post-card-body{ padding:var(--sp-6); display:flex; flex-direction:column; flex:1; gap:var(--sp-3); }
.post-card-niche{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--blue); }
.post-card h2{ font-family:var(--ff-head); font-weight:700; font-size:1.15rem; line-height:1.3; letter-spacing:-.01em; color:var(--g900); }
.post-card p{ font-size:.9rem; color:var(--muted); line-height:1.6; flex:1; }
.post-card-meta{ font-size:.78rem; color:var(--g400); display:flex; gap:var(--sp-3); margin-top:auto; padding-top:var(--sp-3); border-top:1px solid var(--g100); }
.post-card-meta .dot{ width:3px; height:3px; background:var(--g200); border-radius:50%; align-self:center; }

/* Blog post page */
.post-head{ padding:var(--sp-8) 0 var(--sp-12); }
.post-kicker{ display:inline-block; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--blue); background:var(--blue-l); padding:.4rem .9rem; border-radius:50px; margin-bottom:var(--sp-4); }
.post-title{ font-family:var(--ff-head); font-weight:700; font-size:clamp(1.7rem,1rem + 3vw,2.8rem); line-height:1.15; letter-spacing:-.02em; max-width:50rem; margin-bottom:var(--sp-5); }
.post-meta{ display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:center; color:var(--muted); font-size:.88rem; }
.post-meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--g200); }
.post-cover{ width:100%; max-width:60rem; margin:0 auto; border-radius:var(--r); overflow:hidden; aspect-ratio:21/9; background-size:cover; background-position:center; }
.post-grid{ display:grid; grid-template-columns:1fr; gap:var(--sp-8); max-width:60rem; margin:var(--sp-12) auto 0; }
@media(min-width:1024px){ .post-grid{ grid-template-columns:minmax(0,1fr) 240px; max-width:65rem; } }
.post-body{ font-size:1.05rem; line-height:1.75; color:var(--text); max-width:42rem; }
.post-body > p{ margin-bottom:var(--sp-5); }
.post-body > p:first-child::first-letter{ font-family:var(--ff-head); font-size:3.6rem; line-height:1; font-weight:800; float:left; margin:.15em .15em -.1em 0; color:var(--blue); }
.post-body h2{ font-family:var(--ff-head); font-weight:700; font-size:1.55rem; line-height:1.25; letter-spacing:-.015em; margin:var(--sp-12) 0 var(--sp-5); scroll-margin-top:80px; }
.post-body h2:first-child{ margin-top:var(--sp-8); }
.post-body ul{ margin:0 0 var(--sp-5); padding-left:0; list-style:none; }
.post-body ul li{ position:relative; padding-left:1.6rem; margin-bottom:.7rem; line-height:1.65; }
.post-body ul li::before{ content:''; position:absolute; left:0; top:.7em; width:8px; height:8px; background:var(--blue); border-radius:2px; }
.post-body strong{ color:var(--g900); font-weight:700; }
.post-body a{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.toc{ display:none; }
@media(min-width:1024px){ .toc{ display:block; position:sticky; top:88px; align-self:start; font-size:.88rem; line-height:1.6; border-left:2px solid var(--g100); padding-left:var(--sp-5); } }
.toc-title{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--g400); margin-bottom:var(--sp-3); }
.toc a{ display:block; padding:.35rem 0; color:var(--muted); text-decoration:none; }
.toc a:hover{ color:var(--blue); }
.post-cta{ margin:var(--sp-16) auto var(--sp-16); max-width:48rem; background:var(--grad-dark); color:#fff; border-radius:var(--r); padding:var(--sp-12) var(--sp-8); text-align:center; position:relative; overflow:hidden; }
.post-cta::before{ content:''; position:absolute; top:-100px; right:-100px; width:340px; height:340px; background:radial-gradient(circle,rgba(37,99,235,.25),transparent 65%); pointer-events:none; }
.post-cta > *{ position:relative; z-index:1; }
.post-cta h3{ color:#fff; font-size:1.5rem; line-height:1.25; margin-bottom:var(--sp-3); max-width:32rem; margin-inline:auto; }
.post-cta p{ color:var(--g400); max-width:36rem; margin-inline:auto; margin-bottom:var(--sp-6); }
.post-cta .btn-row{ display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap; }
.related{ margin:var(--sp-16) auto 0; max-width:60rem; }
.related h3{ font-family:var(--ff-head); font-weight:700; font-size:1.3rem; margin-bottom:var(--sp-6); }
.rel-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:var(--sp-6); }
.rel-card{ background:#fff; border:2px solid var(--g100); border-radius:14px; padding:var(--sp-6); transition:var(--tr); text-decoration:none; display:block; }
.rel-card:hover{ border-color:var(--blue-l); transform:translateY(-2px); box-shadow:var(--sh); }
.rel-niche{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--blue); margin-bottom:.6rem; }
.rel-card h4{ font-family:var(--ff-head); font-weight:700; font-size:1rem; line-height:1.35; color:var(--g900); }
.rel-card p{ font-size:.85rem; color:var(--muted); margin-top:.5rem; line-height:1.5; }


/* ═══════════════════════════════════════════════════════════════
   LANDING PAGE — специфичные компоненты главной страницы
═══════════════════════════════════════════════════════════════ */
COMPONENTS — визуальные «кирпичики»: кнопки, карточки, формы, табы.
   Визуал перенесён из исходного сайта и приведён к токенам.
   Mobile-first, без костыльных !important.
   Зависит от tokens.css.
═══════════════════════════════════════════════════════════════ */

/* ─────────────── ЗАГОЛОВКИ СЕКЦИЙ ─────────────── */
.sec-head{ text-align:center; max-width:42rem; margin:0 auto var(--sp-12); }
.sec-head h2{ margin-bottom:var(--sp-3); letter-spacing:-.025em; color:var(--g900); }
.sec-head p{ color:var(--muted); line-height:1.7; }

.kicker{
  font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); display:inline-flex; align-items:center; gap:.55rem;
  margin-bottom:var(--sp-4);
}
.kicker::before{ content:''; width:18px; height:2px; background:var(--blue); border-radius:2px; flex-shrink:0; }

/* ─────────────── КНОПКИ ─────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.75rem; border-radius:50px;
  font-family:var(--ff-body); font-weight:600; font-size:.92rem;
  border:none; cursor:pointer; transition:transform var(--tr), box-shadow var(--tr);
  line-height:1.2; text-align:center;
}
.btn svg{ flex-shrink:0; }              /* иконка не сжимается при переносе текста */

.btn-blue{ background:var(--grad-blue); color:#fff; box-shadow:0 6px 28px rgba(37,99,235,.38); }
.btn-blue:hover{ transform:translateY(-2px); box-shadow:0 12px 40px rgba(37,99,235,.48); }

.btn-outline{ background:#fff; color:var(--text); border:2px solid var(--g200); }
.btn-outline:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-1px); }

.btn-gold{ background:var(--grad-gold); color:#fff; box-shadow:0 6px 22px rgba(201,154,46,.32); }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 12px 32px rgba(201,154,46,.42); }

.btn-sm{ padding:.55rem 1.25rem; font-size:.82rem; }

/* ─────────────── КАРТОЧКИ ─────────────── */
.card,.pcard,.fcard{
  border-radius:20px; padding:var(--sp-6);
  border:2px solid var(--g100); background:#fff;
  transition:box-shadow var(--tr), transform var(--tr);
}
.card:hover,.pcard:hover,.fcard:hover{ box-shadow:var(--shlg); }

/* выделенная карточка тарифа: на десктопе слегка приподнята, на телефоне — в ряд */
.pcard.feat{ border-color:var(--blue); }
@media (min-width:900px){ .pcard.feat{ transform:translateY(-12px); } }

.pbadge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--grad-gold); color:#fff; font-size:.7rem; font-weight:700;
  padding:.3rem .9rem; border-radius:50px; white-space:nowrap;
}
.pcard{ position:relative; }

/* ─────────────── ТАБЫ (фильтры портфолио / демо) ─────────────── */
.ftab,.mo-tab{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.55rem 1rem; border-radius:50px;
  font-size:.82rem; font-weight:600;
  background:#fff; color:var(--g600); border:2px solid var(--g200);
  cursor:pointer; transition:var(--tr);
}
.ftab:hover,.ftab.act,.mo-tab.active{
  background:var(--grad-blue); color:#fff; border-color:transparent;
  box-shadow:0 4px 18px rgba(37,99,235,.3);
}
.ftab-ico{ width:22px; height:22px; flex-shrink:0; }

/* контейнеры табов переносятся, не вылезают за край */
.ftabs{ display:flex; flex-wrap:wrap; gap:var(--sp-2); justify-content:center; }

/* ─────────────── МЕТКИ / МЕТРИКИ ─────────────── */
.met{ display:inline-flex; align-items:center; gap:.45rem; font-size:.8rem; color:var(--muted); font-weight:500; }
.met-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.hero-mets{ display:flex; flex-wrap:wrap; gap:var(--sp-4); }   /* метрики переносятся на узком экране */

/* ─────────────── ФОРМЫ ─────────────── */
.fg{ margin-bottom:var(--sp-4); }
.flbl{ display:block; font-size:.8rem; font-weight:700; margin-bottom:.35rem; color:#374151; }
.finp{
  width:100%; padding:.7rem .9rem;
  border:2px solid var(--g200); border-radius:10px;
  font-family:var(--ff-body); font-size:.9rem; color:var(--g900);
  background:#fff; transition:var(--tr);
}
.finp:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(37,99,235,.09); }
.finp::placeholder{ color:var(--g400); }
textarea.finp{ resize:vertical; min-height:6.25rem; }

/* ─────────────── КАРТОЧКА ФОРМЫ / УСПЕХ ─────────────── */
.cform{ background:#fff; border:2px solid var(--g100); border-radius:var(--r); padding:var(--sp-8); }
.fsuc{ display:none; text-align:center; padding:var(--sp-8); }
.fsuc.show{ display:block; }

/* ─── Стили страницы ─── */
#nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--g100)}
.nav-in{display:flex;align-items:center;height:70px;gap:16px;width:100%}
.nav-logo{font-family:var(--ff-head);font-weight:800;font-size:1.05rem;color:var(--g900);flex-shrink:0;white-space:nowrap;letter-spacing:-.01em}
.nav-logo em{color:var(--blue);font-style:normal}
.nav-right{display:flex;align-items:center;gap:var(--sp-3);margin-left:auto}
.lang-links a{font-weight:600;font-size:.85rem;color:var(--g600);padding:.25rem .4rem;border-radius:6px}
.lang-links a.active{color:var(--blue)}
.hbg{flex-direction:column;justify-content:center;gap:5px;padding:8px;width:42px;height:42px;flex-shrink:0}
.hbg span{display:block;width:22px;height:2px;background:var(--g900);border-radius:2px;transition:var(--tr)}
.hbg.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.hbg.open span:nth-child(2){opacity:0}.hbg.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mob-menu{position:absolute;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid var(--g100);box-shadow:0 12px 32px rgba(0,0,0,.08);padding:var(--sp-4) var(--gutter)}
.mob-menu .nav-link{padding:.75rem .5rem;border-radius:10px;font-weight:600;color:var(--g900);display:block}
.nav-link.active{color:var(--blue);background:var(--blue-l)}
.mob-lang{display:flex;gap:var(--sp-2);padding-top:var(--sp-3);border-top:1px solid var(--g100);margin-top:var(--sp-2)}
.mob-lang a{font-weight:700;color:var(--g600);padding:.4rem .8rem;border:1.5px solid var(--g200);border-radius:8px;font-size:.85rem}
.mob-lang a.active{color:#fff;background:var(--blue);border-color:var(--blue)}
#hero{padding:96px 0 var(--section-y);background:linear-gradient(158deg,#F0F4FF 0%,#fff 60%);overflow:hidden;position:relative}
@media(min-width:900px){#hero{padding:128px 0 var(--section-y)}}
.acc{color:var(--blue)}.hero-sub{color:var(--muted);margin:var(--sp-4) 0 var(--sp-6);line-height:1.7;max-width:34rem}
.hv{position:relative;padding:var(--sp-6);max-width:30rem;margin-inline:auto;width:100%}
.hv-browser{background:#fff;border-radius:20px;box-shadow:var(--shlg);overflow:hidden;border:1px solid var(--g100);position:relative;z-index:2}
.hv-bar{display:flex;align-items:center;gap:5px;padding:11px 14px;background:var(--g50);border-bottom:1px solid var(--g100)}
.hv-dot{width:9px;height:9px;border-radius:50%}.hv-dot:nth-child(1){background:#FF5F57}.hv-dot:nth-child(2){background:#FFBD2E}.hv-dot:nth-child(3){background:#28CA41}
.hv-url{flex:1;height:18px;background:var(--g100);border-radius:5px;margin-left:8px}
.hv-img{height:170px;background-image:linear-gradient(135deg,rgba(37,99,235,.45),rgba(201,154,46,.35)),url('https://images.unsplash.com/photo-1503951914875-452162b0f3f1?w=700&auto=format&q=80');background-size:cover;background-position:center}
.hv-lines{padding:14px 16px}.hv-lines span{display:block;height:7px;border-radius:4px;background:var(--g100);margin-bottom:7px}
.hv-lines span:nth-child(2){width:66%}.hv-lines span:nth-child(3){width:42%}
.hv-badge{position:absolute;top:-4px;left:var(--sp-4);background:var(--grad-gold);color:#fff;border-radius:50px;padding:7px 14px;font-weight:800;font-size:.72rem;white-space:nowrap;box-shadow:0 8px 28px rgba(201,154,46,.44);z-index:4}
.hv-stats{background:var(--grad-blue);color:#fff;border-radius:16px;padding:12px 16px;width:150px;box-shadow:0 12px 40px rgba(37,99,235,.34)}
.hv-s-lbl{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;opacity:.65}
.hv-s-num{font-size:1.8rem;font-weight:800;font-family:var(--ff-head);line-height:1;margin:4px 0}.hv-s-desc{font-size:.7rem;opacity:.75}
.hv-booking{background:#fff;border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.12);padding:12px 16px;border:1px solid var(--g100);width:190px}
.hv-b-lbl{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.hv-b-time{font-size:.92rem;font-weight:800;font-family:var(--ff-head);color:var(--blue);margin:4px 0}
.hv-b-ok{font-size:.7rem;color:#16A34A;font-weight:700;display:flex;align-items:center;gap:4px}
.hv-b-ok::before{content:'';width:6px;height:6px;border-radius:50%;background:#16A34A}
.hv-float{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-4);justify-content:center}
@media(min-width:900px){.hv{max-width:none}.hv-float{display:contents}.hv-stats{position:absolute;top:24px;right:-12px;z-index:3}.hv-booking{position:absolute;bottom:-12px;left:-12px;z-index:3}}
.fcard .fico{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:var(--sp-4)}
.fcard .fico svg{width:26px;height:26px}.fcard h3{margin-bottom:var(--sp-2)}.fcard p{color:var(--muted);font-size:.92rem;line-height:1.6}
.pgstep{position:relative}.pgnum{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-family:var(--ff-head);font-weight:800;font-size:1.3rem;color:#fff;margin-bottom:var(--sp-3)}
.pgtime{font-size:.72rem;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.35rem}
.pgsteps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:start;gap:0}
.pgstep h3{margin-bottom:var(--sp-2)}.pgstep p{color:var(--muted);font-size:.9rem;line-height:1.6}
.pcard h3{font-size:1.4rem;margin-bottom:.25rem}.pprice{font-family:var(--ff-head);font-weight:800;font-size:2rem;color:var(--g900);margin:var(--sp-3) 0 .15rem}
.pprice small{font-size:.85rem;color:var(--muted);font-weight:500}.pnet{font-size:.8rem;color:var(--muted);margin-bottom:var(--sp-4)}
.pcard ul{margin:var(--sp-4) 0;display:flex;flex-direction:column;gap:.55rem}.pcard li{font-size:.88rem;padding-left:1.6rem;position:relative;color:var(--text)}
.pcard li::before{content:'✓';position:absolute;left:0;color:var(--blue);font-weight:800}.pdesc{color:var(--muted);font-size:.88rem;min-height:2.4em}
.faq-item{border:2px solid var(--g100);border-radius:14px;margin-bottom:var(--sp-3);overflow:hidden;background:#fff}
.faq-q{width:100%;text-align:left;padding:var(--sp-4) var(--sp-6);font-weight:700;font-size:.98rem;display:flex;justify-content:space-between;gap:var(--sp-4);align-items:center;color:var(--g900)}
.faq-q::after{content:'+';font-size:1.4rem;color:var(--blue);flex-shrink:0}.faq-item.open .faq-q::after{content:'−'}
.faq-a{padding:0 var(--sp-6);max-height:0;overflow:hidden;transition:max-height .3s,padding .3s;color:var(--muted);font-size:.92rem;line-height:1.7}
.faq-item.open .faq-a{padding:0 var(--sp-6) var(--sp-4);max-height:500px}
.trust{display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:center;align-items:center;margin-top:var(--sp-8)}
.trust-item{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--g600);font-weight:600}.trust-item .td{width:8px;height:8px;border-radius:50%;background:var(--blue)}

/* ── Контакты — переработка ── */
.cgrid{align-items:stretch}
.cinfo{background:var(--grad-dark);color:#fff;border-radius:var(--r);padding:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-6);position:relative;overflow:hidden}
.cinfo::before{content:'';position:absolute;top:-80px;right:-80px;width:300px;height:300px;background:radial-gradient(circle,rgba(37,99,235,.25),transparent 65%);pointer-events:none}
.cinfo>*{position:relative;z-index:1}
.cinfo h3{color:#fff;font-size:1.4rem}
.cinfo .csub{color:var(--g400);font-size:.95rem;line-height:1.6}
/* Контактные строки: SVG-иконка в кружке + текст */
.clist{display:flex;flex-direction:column;gap:var(--sp-3)}
.clist .cline{display:flex;align-items:center;gap:.85rem;font-size:.95rem;color:#fff}
.clist .cline a{color:#fff}.clist .cline a:hover{color:var(--blue)}
.cicon{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cicon svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Социальный proof: три метрики */
.cstats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);padding:var(--sp-5) 0;border-block:1px solid rgba(255,255,255,.12)}
.cstat{text-align:center}
.cstat-num{font-family:var(--ff-head);font-weight:800;font-size:1.6rem;color:#fff;line-height:1}
.cstat-lbl{font-size:.72rem;color:var(--g400);text-transform:uppercase;letter-spacing:.06em;margin-top:.35rem}
/* Гарантии — SVG-чекмарк */
.cguar{display:flex;flex-direction:column;gap:.7rem;margin-top:auto}
.cguar .gline{display:flex;align-items:flex-start;gap:.7rem;font-size:.92rem;color:var(--g200);line-height:1.5}
.cguar .gline svg{width:18px;height:18px;flex-shrink:0;stroke:#34D399;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.cform{background:#fff;border:2px solid var(--g100);border-radius:var(--r);padding:var(--sp-8)}
@media(max-width:599px){.cstats{grid-template-columns:1fr;gap:var(--sp-4)}.cstat{text-align:left;display:flex;align-items:baseline;gap:.6rem}.cstat-lbl{margin-top:0}}

/* Подвал */
footer{background:var(--g900);color:#fff}
.foot-grid{padding-block:var(--section-y)}
.foot-logo{font-family:var(--ff-head);font-weight:800;font-size:1.1rem;color:#fff}
.foot-logo em{color:var(--blue);font-style:normal}
.foot-col h4{color:#fff;font-size:1rem;margin-bottom:var(--sp-3)}
.foot-col p,.foot-col a{color:var(--g400);font-size:.9rem;line-height:1.9}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding:var(--sp-6) 0;color:var(--g400);font-size:.85rem}
.demo-note{position:fixed;bottom:0;left:0;right:0;background:#000;color:#fff;font-size:.78rem;text-align:center;padding:8px;z-index:2000}


/* ─── FAQ accordion ─── */
.faq-a{ display:none; padding:0 0 var(--sp-4) 0; color:var(--muted); line-height:1.7; }
.faq-item.open .faq-a{ display:block; }
.faq-item.open .faq-q{ color:var(--blue); }

/* ═══ PORTFOLIO CARDS ═══ */
.port-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));
  gap:var(--sp-6);
  margin-top:var(--sp-8);
}
.port-card{
  border-radius:var(--r);
  border:2px solid var(--g100);
  background:#fff;
  overflow:hidden;
  transition:box-shadow var(--tr),transform var(--tr);
}
.port-card:hover{ box-shadow:var(--shlg); transform:translateY(-3px); }
.port-img{
  aspect-ratio:16/9;
  background-size:cover;
  background-position:center;
}
.port-body{ padding:var(--sp-6) var(--sp-6) var(--sp-6); }
.port-status{ display:flex; align-items:center; gap:.45rem; margin-bottom:.6rem; }
.port-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.port-dot-green{ background:#16A34A; box-shadow:0 0 0 3px rgba(22,163,74,.2); }
.port-dot-gray{ background:var(--g400); }
.port-status-text{ font-size:.72rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.port-title{ font-family:var(--ff-head); font-weight:700; font-size:1.1rem; color:var(--g900); margin-bottom:var(--sp-5); line-height:1.3; }
.port-acts{ display:flex; gap:.6rem; flex-wrap:wrap; margin-top:var(--sp-2); }
.btn-disabled{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem 1.25rem; border-radius:50px;
  font-size:.82rem; font-weight:600;
  background:#F1F5F9; color:#64748B;
  cursor:not-allowed; border:1.5px solid var(--g200);
}

/* ═══════════════════════════════════════════════════════════════
   LANDING PAGE COMPONENTS — перенесено из старого сайта
   Обеспечивает единообразие стилей на всех страницах
═══════════════════════════════════════════════════════════════ */

/* ─── RESET ─── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;color:#0F1A2E;background:#fff;line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}

/* ─── DESIGN TOKENS ─── */
:root{
  --blue:#2563EB;--blue-d:#1a4fd4;--blue-l:#EFF4FF;--blue-ll:#F5F8FF;
  --gold:#C99A2E;--gold-l:#FBF4E3;
  --g50:#F8F9FC;--g100:#EEF0F8;--g200:#DDE1F0;
  --g400:#9AA3B8;--g600:#5A6380;--g900:#0A1628;
  --muted:#64748B;
  --r:18px;--rs:12px;
  --sh:0 4px 24px rgba(37,99,235,.10);
  --shlg:0 24px 80px rgba(37,99,235,.18);
  --tr:.28s cubic-bezier(.4,0,.2,1);
  --ff:'Syne',sans-serif;
  /* gradient library */
  --grad-blue:linear-gradient(135deg,#2563EB,#1a4fd4);
  --grad-gold:linear-gradient(135deg,#D4A843,#C99A2E);
  --grad-dark:linear-gradient(140deg,#0A1628,#1a2a4a);
  --grad-purple:linear-gradient(135deg,#7C3AED,#5B21B6);
  --grad-teal:linear-gradient(135deg,#0891B2,#0E7490);
  --grad-rose:linear-gradient(135deg,#E11D48,#BE123C);
  --grad-green:linear-gradient(135deg,#059669,#047857);
  --grad-orange:linear-gradient(135deg,#EA580C,#C2410C);
}

/* ─── LAYOUT ─── */
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.section{padding:100px 0}
.sec-head{text-align:center;max-width:700px;margin:0 auto 68px}
.sec-head h2{font-family:var(--ff);font-size:clamp(1.8rem,3.4vw,2.8rem);font-weight:800;margin-bottom:14px;letter-spacing:-.025em;color:var(--g900)}
.sec-head p{color:var(--muted);font-size:1rem;line-height:1.7}
.kicker{font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;gap:.55rem;margin-bottom:18px}
.kicker::before{content:'';width:18px;height:2px;background:var(--blue);border-radius:2px;flex-shrink:0}

/* ─── BUTTONS ─── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 28px;border-radius:50px;font-weight:600;font-size:.92rem;transition:var(--tr);white-space:nowrap;border:none;cursor:pointer;font-family:'DM Sans',sans-serif}
.btn-blue{background:var(--grad-blue);color:#fff;box-shadow:0 6px 28px rgba(37,99,235,.38)}
.btn-blue:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(37,99,235,.48)}
.btn-wa{background:linear-gradient(135deg,#25D366,#1da851);color:#fff;box-shadow:0 6px 22px rgba(37,211,102,.38)}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(37,211,102,.48)}
.btn-outline{background:#fff;color:#0F1A2E;border:2px solid var(--g200)}
.btn-outline:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
.btn-gold{background:var(--grad-gold);color:#fff;box-shadow:0 6px 22px rgba(201,154,46,.32)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(201,154,46,.42)}
.btn-sm{padding:9px 20px;font-size:.82rem}

/* ─── NAVBAR ─── */
#nav{position:fixed;top:0;left:0;right:0;z-index:1000;transition:background var(--tr),box-shadow var(--tr)}
#nav.scrolled{background:rgba(255,255,255,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--g100);box-shadow:0 2px 24px rgba(0,0,0,.07)}

.nav-logo em{color:var(--blue);font-style:normal}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-links a{padding:7px 13px;border-radius:8px;font-size:.875rem;font-weight:500;color:var(--g600);transition:var(--tr)}
.nav-links a:hover{color:var(--blue);background:var(--blue-l)}
.nav-links a.active{color:var(--blue);font-weight:700;background:var(--blue-l)}
.nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.lang-links{display:flex;gap:4px}
.lang-links a{padding:.3rem .55rem;border-radius:6px;font-size:.82rem;font-weight:700;color:var(--g600);transition:var(--tr)}
.lang-links a:hover{color:var(--blue);background:var(--blue-l)}
.hbg{display:none;flex-direction:column;justify-content:center;gap:5px;padding:8px;flex-shrink:0;width:40px;height:40px}
.hbg span{display:block;width:22px;height:2px;background:var(--g900);border-radius:2px;transition:var(--tr);transform-origin:center}
.hbg.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hbg.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hbg.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ─── MOBILE MENU ─── */
.mob-menu{position:fixed;top:70px;left:0;right:0;background:#fff;z-index:999;border-bottom:1px solid var(--g100);box-shadow:0 20px 60px rgba(0,0,0,.12);max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.4,0,.2,1);pointer-events:none}
.mob-menu.open{max-height:520px;pointer-events:auto}
.mob-inner{padding:8px 0 16px}
.mob-lang{display:flex;gap:8px;padding:12px 20px 14px;border-bottom:1px solid var(--g100)}
.mob-lang a{padding:7px 16px;border-radius:8px;font-size:.85rem;font-weight:700;color:var(--g600);border:1.5px solid var(--g200);transition:var(--tr)}
.mob-lang a:hover{border-color:var(--blue);color:var(--blue)}
.mob-link{display:block;padding:13px 20px;border-bottom:1px solid var(--g50);font-weight:600;font-size:.95rem;color:var(--g900);transition:color .2s}
.mob-link:hover{color:var(--blue)}
.mob-wa{display:block;margin:14px 20px 0;padding:13px;background:linear-gradient(135deg,#25D366,#1da851);color:#fff;border-radius:12px;text-align:center;font-weight:700;font-size:.95rem}

/* ─── HERO ─── */
#hero{padding:148px 0 96px;background:linear-gradient(158deg,#F0F4FF 0%,#fff 60%);overflow:hidden;position:relative}
#hero::before{content:'';position:absolute;top:-250px;right:-200px;width:800px;height:800px;background:radial-gradient(circle,rgba(37,99,235,.065) 0%,transparent 68%);pointer-events:none}
#hero::after{content:'';position:absolute;bottom:-180px;left:-80px;width:500px;height:500px;background:radial-gradient(circle,rgba(201,154,46,.05) 0%,transparent 70%);pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero-grid>div{min-width:0}
.hero-h1{font-family:var(--ff);font-weight:800;font-size:clamp(2rem,3.4vw,3.1rem);line-height:1.1;letter-spacing:-.025em;margin-bottom:20px;color:var(--g900);max-width:100%;overflow-wrap:break-word}
.hero-h1 .acc{color:var(--blue);overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
.hero-sub{color:var(--muted);font-size:1rem;margin-bottom:32px;line-height:1.7;max-width:500px;overflow-wrap:break-word}
.hero-btns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:36px}
.hero-mets{display:flex;gap:20px;flex-wrap:wrap}
.met{display:flex;align-items:center;gap:7px;font-size:.8rem;color:var(--muted);font-weight:500;white-space:nowrap}
.met-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* hero visual */
.hv{position:relative;padding:28px 30px 36px;user-select:none}
.hv-browser{background:#fff;border-radius:20px;box-shadow:0 24px 80px rgba(37,99,235,.18),0 4px 16px rgba(0,0,0,.06);overflow:hidden;border:1px solid var(--g100);animation:floatA 6s ease-in-out infinite;position:relative;z-index:2}
.hv-bar{display:flex;align-items:center;gap:5px;padding:11px 14px;background:var(--g50);border-bottom:1px solid var(--g100)}
.hv-dot{width:9px;height:9px;border-radius:50%}
.hv-dot:nth-child(1){background:#FF5F57}.hv-dot:nth-child(2){background:#FFBD2E}.hv-dot:nth-child(3){background:#28CA41}
.hv-url{flex:1;height:20px;background:var(--g100);border-radius:5px;margin-left:8px}
.hv-img{height:200px;background-image:linear-gradient(135deg,rgba(37,99,235,.45),rgba(201,154,46,.35)),url('https://images.unsplash.com/photo-1503951914875-452162b0f3f1?w=700&auto=format&q=80');background-size:cover;background-position:center}
.hv-lines{padding:14px 16px}
.hv-lines span{display:block;height:7px;border-radius:4px;background:var(--g100);margin-bottom:7px}
.hv-lines span:nth-child(2){width:66%}.hv-lines span:nth-child(3){width:42%}
.hv-booking{position:absolute;bottom:-18px;left:-22px;background:#fff;border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.06);padding:14px 18px;border:1px solid var(--g100);animation:floatB 6s ease-in-out 1.2s infinite;width:220px;flex-shrink:0;z-index:3}
.hv-b-lbl{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);white-space:nowrap}
.hv-b-time{font-size:.95rem;font-weight:800;font-family:var(--ff);color:var(--blue);margin:4px 0;line-height:1.2;white-space:nowrap}
.hv-b-ok{font-size:.72rem;color:#16A34A;font-weight:700;display:flex;align-items:center;gap:4px;white-space:nowrap}
.hv-b-ok::before{content:'';width:6px;height:6px;border-radius:50%;background:#16A34A;flex-shrink:0}
.hv-stats{position:absolute;top:12px;right:-22px;background:var(--grad-blue);color:#fff;border-radius:16px;padding:14px 18px;animation:floatA 6s ease-in-out 2.1s infinite;width:160px;flex-shrink:0;z-index:3;box-shadow:0 16px 48px rgba(37,99,235,.34)}
.hv-s-lbl{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;opacity:.65;white-space:nowrap}
.hv-s-num{font-size:2rem;font-weight:800;font-family:var(--ff);line-height:1;margin:4px 0}
.hv-s-desc{font-size:.72rem;opacity:.75;white-space:nowrap}
.hv-badge{position:absolute;top:-16px;left:14px;background:var(--grad-gold);color:#fff;border-radius:50px;padding:9px 16px;font-weight:800;font-size:.78rem;letter-spacing:.01em;white-space:nowrap;animation:floatB 5.5s ease-in-out .5s infinite;box-shadow:0 8px 28px rgba(201,154,46,.44);z-index:4}
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes floatB{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(-2deg)}}

/* ─── DEMO MODAL ─── */
.mo{display:none;position:fixed;inset:0;z-index:2000;background:rgba(8,12,28,.88);backdrop-filter:blur(10px);align-items:center;justify-content:center;padding:16px}
.mo.open{display:flex}
.mo-box{background:#fff;border-radius:22px;width:100%;max-width:1010px;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 48px 140px rgba(0,0,0,.4);overflow:hidden}
.mo-head{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--g100);flex-shrink:0;gap:12px}
.mo-tabs{display:flex;gap:4px;background:var(--g100);border-radius:10px;padding:3px;flex-wrap:wrap}
.mo-tab{padding:7px 16px;border-radius:7px;font-size:.85rem;font-weight:600;color:var(--g600);cursor:pointer;transition:var(--tr)}
.mo-tab.active{background:#fff;color:var(--blue);box-shadow:0 1px 4px rgba(0,0,0,.1)}
.mo-x{width:34px;height:34px;border-radius:50%;background:var(--g100);color:var(--g600);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.05rem;transition:var(--tr);flex-shrink:0}
.mo-x:hover{background:#FEE2E2;color:#E53E3E}
.mo-body{flex:1;overflow:hidden;min-height:440px}
.mo-pane{display:none;height:100%;flex-direction:column}
.mo-pane.active{display:flex}
.mo-iframe{flex:1;border:none;width:100%;min-height:440px}
.mo-foot{padding:12px 24px;border-top:1px solid var(--g100);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;flex-wrap:wrap;gap:8px}
.mo-hint{font-size:.8rem;color:var(--muted)}

/* ─── PORTFOLIO ─── */
#portfolio{background:var(--g50)}
.ftabs{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin-bottom:52px}
.ftab{display:flex;align-items:center;gap:7px;padding:9px 16px;border-radius:50px;font-size:.82rem;font-weight:600;background:#fff;color:var(--g600);border:2px solid var(--g200);cursor:pointer;transition:var(--tr)}
.ftab:hover,.ftab.act{background:var(--grad-blue);color:#fff;border-color:transparent;box-shadow:0 4px 18px rgba(37,99,235,.3)}
.ftab-ico{width:22px;height:22px;flex-shrink:0}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:22px}
.pc{background:#fff;border-radius:var(--r);overflow:hidden;border:1px solid var(--g100);box-shadow:0 2px 16px rgba(0,0,0,.05);transition:var(--tr)}
.pc:hover{transform:translateY(-7px);box-shadow:var(--shlg)}
.pc-img-wrap{overflow:hidden;height:200px}
.pc-img{height:100%;object-fit:cover;width:100%;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.pc:hover .pc-img{transform:scale(1.05)}
.pc-body{padding:22px}
.bdgs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px}
.bdg{padding:3px 9px;border-radius:50px;font-size:.68rem;font-weight:700}
.bdg-b{background:var(--blue-l);color:var(--blue)}
.bdg-g{background:var(--gold-l);color:var(--gold)}
.bdg-gr{background:#ECFDF5;color:#059669}
.bdg-c{background:var(--g100);color:var(--g600)}
.pc-title{font-family:var(--ff);font-weight:800;font-size:1.02rem;margin-bottom:5px;color:var(--g900)}
.pc-desc{font-size:.84rem;color:var(--muted);margin-bottom:14px;line-height:1.55}
.pc-price{font-size:1.05rem;margin-bottom:14px;display:flex;align-items:baseline;gap:6px}
.pc-price-from{font-size:.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.pc-price-num{font-weight:800;color:var(--blue);font-family:var(--ff);font-size:1.15rem}
.pc-acts{display:flex;gap:8px}
.cs-wrap{position:relative}
.cs-wrap[data-lbl]::after{content:attr(data-lbl);position:absolute;top:10px;right:10px;background:rgba(10,22,40,.7);color:#fff;border-radius:8px;padding:4px 10px;font-size:.7rem;font-weight:700;backdrop-filter:blur(4px)}

/* ─── FEATURES — premium cards ─── */
#features{background:#fff}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fc{border-radius:var(--r);padding:0;overflow:hidden;border:2px solid var(--g100);transition:var(--tr);background:#fff;position:relative}
.fc:hover{transform:translateY(-6px);box-shadow:var(--shlg);border-color:transparent}
.fc-top{padding:26px 26px 18px;display:flex;align-items:flex-start;gap:16px}
.fc-icon-wrap{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.fc-icon-wrap svg{width:28px;height:28px}
.fc-body{flex:1;min-width:0}
.fc h3{font-family:var(--ff);font-size:.98rem;font-weight:800;margin-bottom:7px;color:var(--g900);line-height:1.25}
.fc p{color:var(--muted);font-size:.84rem;line-height:1.65}
.fc-bar{height:3px;margin:0 26px 24px;border-radius:3px;opacity:.4}

/* ─── PROCESS — numbered steps ─── */
#process{background:var(--g50)}
.pstep{text-align:center;padding:0 16px;position:relative;z-index:1}
/* gradient number circle */
.pnum{
  width:72px;height:72px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 20px;
  font-family:var(--ff);font-size:1.4rem;font-weight:800;
  color:#fff;position:relative;z-index:1;
  transition:var(--tr);
}
.pnum::before{content:'';position:absolute;inset:-3px;border-radius:50%;z-index:-1;opacity:.25;transition:var(--tr)}
.pstep:hover .pnum{transform:scale(1.12)}
.pstep:hover .pnum::before{opacity:.5;inset:-6px}
.ptime{display:inline-block;background:#fff;color:var(--blue);border-radius:50px;padding:3px 13px;font-size:.72rem;font-weight:700;margin-bottom:10px;border:1.5px solid var(--blue-l)}
.pstep h3{font-family:var(--ff);font-size:.95rem;font-weight:800;margin-bottom:7px;color:var(--g900)}
.pstep p{font-size:.82rem;color:var(--muted);line-height:1.6}

/* ─── PRICING ─── */
#pricing{background:#fff}
.pricegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.pcard{border-radius:20px;padding:28px;border:2px solid var(--g100);background:#fff;position:relative;transition:box-shadow var(--tr)}
.pcard:hover{box-shadow:var(--shlg)}

/* featured card — real glow pulse */
.pcard.feat{
  border:2px solid var(--blue);
  background:linear-gradient(180deg,#fff 0%,#F5F8FF 100%);
  transform:scale(1.04);
  animation:glowpulse 2.8s ease-in-out infinite;
}
@keyframes glowpulse{
  0%,100%{
    box-shadow:0 0 0 0 rgba(37,99,235,.0),0 24px 80px rgba(37,99,235,.2);
  }
  50%{
    box-shadow:0 0 0 8px rgba(37,99,235,.08),0 28px 90px rgba(37,99,235,.36);
  }
}

.pbadge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--grad-blue);color:#fff;padding:5px 20px;border-radius:50px;font-size:.74rem;font-weight:800;white-space:nowrap;box-shadow:0 4px 14px rgba(37,99,235,.4)}
.pname{font-size:.75rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px}

/* price amount — animated gradient */
.pamount{font-family:var(--ff);font-size:1.95rem;font-weight:800;line-height:1.1;margin-bottom:5px;white-space:nowrap;background:linear-gradient(135deg,var(--blue),#7C3AED);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.pamount span{font-size:.88rem;font-weight:500;color:var(--muted);-webkit-text-fill-color:var(--muted)}
.pvat{font-size:.72rem;color:var(--muted);margin-bottom:7px}
.pdesc{font-size:.86rem;color:var(--muted);margin-bottom:24px;line-height:1.5}
.pfeats{margin-bottom:28px}
.pfeats li{display:flex;align-items:flex-start;gap:9px;font-size:.86rem;padding:7px 0;border-bottom:1px solid var(--g50);color:#374151}
.pfeats li::before{content:'';width:18px;height:18px;border-radius:50%;background:var(--blue-l);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 9l4 4 6-7' stroke='%232563EB' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
.pnote{font-size:.76rem;color:var(--muted);text-align:center;margin-top:28px;line-height:1.6}
.pnote a{color:var(--blue);font-weight:600}

/* ─── TESTIMONIALS ─── */
#testimonials{background:var(--g50)}
.tslider{overflow:hidden;border-radius:var(--r)}
.ttrack{display:flex;gap:22px;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.tc{flex-shrink:0;width:calc(33.333% - 15px);background:#fff;border-radius:var(--r);padding:32px;border:1px solid var(--g100);box-shadow:0 2px 14px rgba(0,0,0,.04)}
.tc-stars{color:var(--gold);font-size:1rem;margin-bottom:14px;letter-spacing:.05em}
.tc-txt{font-size:.9rem;line-height:1.75;margin-bottom:22px;font-style:italic;color:#374151}
.tc-auth{display:flex;align-items:center;gap:12px}
.tc-av{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--g100)}
.tc-name{font-weight:700;font-size:.88rem;font-family:var(--ff);color:var(--g900)}
.tc-role{font-size:.74rem;color:var(--muted)}
.sdots{display:flex;justify-content:center;gap:7px;margin-top:28px}
.sdot{width:8px;height:8px;border-radius:50%;background:var(--g200);cursor:pointer;transition:var(--tr)}
.sdot.act{background:var(--blue);width:24px;border-radius:4px}

/* ─── FAQ ─── */
#faq{background:#fff}
.faqwrap{max-width:820px;margin:0 auto}
.faqitem{border:1.5px solid var(--g200);border-radius:var(--rs);margin-bottom:9px;overflow:hidden;transition:border-color var(--tr)}
.faqitem:hover,.faqitem.open{border-color:var(--blue)}
.faqq{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;cursor:pointer;font-weight:600;font-size:.92rem;gap:14px;color:var(--g900)}
.faqic{width:28px;height:28px;border-radius:50%;background:var(--blue-l);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;transition:transform .3s}
.faqitem.open .faqic{transform:rotate(45deg)}
.faqa{max-height:0;overflow:hidden;transition:max-height .42s cubic-bezier(.4,0,.2,1)}
.faqitem.open .faqa{max-height:400px}
.faqain{padding:0 22px 18px;font-size:.875rem;color:var(--muted);line-height:1.78}

/* ─── CONTACT ─── */
#contact{background:var(--g50)}
.cgrid{display:grid;grid-template-columns:1fr 1.5fr;gap:52px;align-items:start}
.ccard{background:var(--grad-dark);border-radius:20px;padding:38px;color:#fff;box-shadow:0 24px 72px rgba(10,22,40,.3)}
.ccard h3{font-family:var(--ff);font-size:1.3rem;margin-bottom:7px;font-weight:800}
.ccard>p{opacity:.7;margin-bottom:28px;font-size:.875rem}
.citem{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}

/* contact icons — SVG based */
.cico{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.12)}
.cico svg{width:20px;height:20px}

.clbl{opacity:.55;font-size:.68rem;margin-bottom:2px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.cval{font-weight:600;font-size:.88rem}
.cval a{color:inherit}
.cresp{display:inline-flex;align-items:center;gap:8px;background:rgba(37,99,235,.25);border:1px solid rgba(37,99,235,.4);border-radius:50px;padding:8px 18px;font-size:.8rem;font-weight:700;margin-top:20px}
.cbtns{display:flex;flex-direction:column;gap:10px;margin-top:14px}

/* form */
.cform{background:#fff;border-radius:20px;padding:38px;border:1px solid var(--g100);box-shadow:0 4px 28px rgba(0,0,0,.05)}
.cform h3{font-family:var(--ff);font-size:1.1rem;margin-bottom:22px;font-weight:800;color:var(--g900)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fg{margin-bottom:14px}
.flbl{display:block;font-size:.8rem;font-weight:700;margin-bottom:5px;color:#374151}
.finp{width:100%;padding:11px 14px;border:2px solid var(--g200);border-radius:10px;font-family:'DM Sans',sans-serif;font-size:.9rem;color:var(--g900);transition:var(--tr);background:#fff}
.finp:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.09)}
.finp::placeholder{color:var(--g400)}
textarea.finp{resize:vertical;min-height:100px}
.fchk{display:flex;align-items:flex-start;gap:9px;margin-bottom:18px}
.fchk input{width:17px;height:17px;flex-shrink:0;margin-top:2px;accent-color:var(--blue)}
.fchk label{font-size:.8rem;color:var(--muted);line-height:1.55}
.fchk a{color:var(--blue)}
.fsuc{display:none;text-align:center;padding:48px 16px}
.fsuc-icon{font-size:3rem;margin-bottom:14px}
.fsuc h3{font-family:var(--ff);margin-bottom:10px;color:var(--g900)}

/* ─── FOOTER ─── */
footer{background:var(--g900);color:rgba(255,255,255,.55);padding:64px 0 28px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:44px;margin-bottom:44px}
.flogo{font-family:var(--ff);font-weight:800;font-size:1.1rem;color:#fff;margin-bottom:10px}
.flogo em{color:var(--blue);font-style:normal}
.fdesc{font-size:.83rem;line-height:1.65;margin-bottom:20px}
.fsoc{display:flex;gap:8px}

/* footer social icons — proper SVG */
.soca{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:#fff;transition:var(--tr)}
.soca:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-2px)}
.soca svg{width:18px;height:18px;fill:currentColor}

.fcol h4{font-family:var(--ff);font-size:.78rem;font-weight:700;color:#fff;margin-bottom:14px;text-transform:uppercase;letter-spacing:.08em}
.fcol ul li{margin-bottom:9px}
.fcol ul a{font-size:.83rem;transition:color .2s}
.fcol ul a:hover{color:#fff}
.fbot{border-top:1px solid rgba(255,255,255,.08);padding-top:26px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.76rem}
.fleg{display:flex;gap:16px;flex-wrap:wrap}
.fleg a,.fleg button{color:rgba(255,255,255,.4);transition:color .2s;font-size:.76rem;background:none;border:none;cursor:pointer;font-family:'DM Sans',sans-serif}
.fleg a:hover,.fleg button:hover{color:#fff}
.fmade{color:var(--gold);font-weight:700}
.privtog{cursor:pointer;color:rgba(255,255,255,.4);font-size:.76rem;background:none;border:none;font-family:'DM Sans',sans-serif;transition:color .2s}
.privtog:hover{color:#fff}
.privbody{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.4,0,.2,1)}
.privbody.open{max-height:700px}
.privin{padding:18px 0 0;font-size:.78rem;color:rgba(255,255,255,.45);line-height:1.78}

/* ─── COOKIE ─── */
#cookie{display:none;position:fixed;bottom:20px;left:20px;right:20px;max-width:620px;background:var(--g900);color:#fff;border-radius:var(--r);padding:18px 22px;box-shadow:0 24px 80px rgba(0,0,0,.35);z-index:1500;border:1px solid rgba(255,255,255,.1)}
#cookie.show{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.ctxt{font-size:.83rem;flex:1;line-height:1.55}
.ctxt a{color:var(--blue)}
.cacts{display:flex;gap:7px;flex-shrink:0}

/* ─── WA FAB ─── */
#wafab{display:none;position:fixed;bottom:22px;right:22px;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#25D366,#1da851);color:#fff;align-items:center;justify-content:center;box-shadow:0 8px 32px rgba(37,211,102,.5);z-index:1400;transition:var(--tr)}
#wafab svg{width:28px;height:28px;fill:#fff}
#wafab:hover{transform:scale(1.1)}

/* ─── REVEAL ─── */
[data-r]{opacity:0;transform:translateY(30px);transition:opacity .65s cubic-bezier(.4,0,.2,1),transform .65s cubic-bezier(.4,0,.2,1)}
[data-r].vis{opacity:1;transform:none}
[data-rd="1"]{transition-delay:.08s}[data-rd="2"]{transition-delay:.16s}
[data-rd="3"]{transition-delay:.24s}[data-rd="4"]{transition-delay:.32s}

/* ─── RESPONSIVE ─── */
@media(max-width:1024px){
  .pricegrid{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .pcard.feat{transform:none}
  .fgrid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .nav-links{display:none !important}
  .lang-links{display:none !important}
  .nav-right .btn-blue{display:none !important}
  .nav-right{gap:0;margin-left:auto}
  .hbg{display:flex !important}
  .section{padding:68px 0}
  #hero{padding:112px 0 68px}
  .hero-grid{grid-template-columns:1fr !important;gap:0}
  .hv{display:none !important}
  .hero-btns{flex-wrap:wrap}
  .cgrid{grid-template-columns:1fr !important}
  .frow{grid-template-columns:1fr !important}
  .fgrid{grid-template-columns:1fr !important;gap:14px}
  .foot-grid{grid-template-columns:1fr !important;gap:24px}
  .pamount{font-size:1.65rem !important}
  .pricegrid{max-width:100%}
  .tc{width:calc(100vw - 56px) !important}
  #wafab{display:flex}
  .mo-box{border-radius:14px;max-height:94vh}
}
@media(max-width:480px){
  .wrap{padding:0 16px}
  .hero-h1{font-size:1.68rem;line-height:1.14}
  .hero-btns{flex-direction:column}
  .hero-btns .btn{width:100%;justify-content:center}
  .hero-btns .btn{padding-left:18px;padding-right:18px;white-space:normal;text-align:center}
  .btn svg{flex-shrink:0}
  .ftabs{gap:6px}
  .ftab{padding:7px 12px;font-size:.78rem}
  .pgrid{grid-template-columns:1fr}
  .sec-head h2{font-size:1.7rem}
  .hero-mets{gap:14px}
}
@media(max-width:380px){
  .hero-h1{font-size:1.5rem}
  .kicker{letter-spacing:.12em}
  .met{white-space:normal}
}



/* ─── HERO METRICS — скрываем на мобильных ─── */
@media (max-width: 600px) {
  .hero-mets { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   BLOG MINI-CALCULATOR — встраивается в конец статьи
═══════════════════════════════════════════════════════════════ */

.blog-calc-section{
  margin:var(--sp-16) auto var(--sp-16);
  max-width:48rem;
  padding-inline:clamp(1.25rem,3vw,2.5rem);
}
.blog-calc-wrap{
  background:linear-gradient(135deg, #F0F4FF 0%, #fff 60%);
  border:2px solid var(--blue-l);
  border-radius:var(--r);
  padding:var(--sp-12) var(--sp-8);
}
.blog-calc-head{ text-align:center; margin-bottom:var(--sp-8); }
.blog-calc-kicker{
  display:inline-block;
  font-size:.78rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  color:#fff;
  background:var(--grad-blue);
  padding:.45rem 1rem;
  border-radius:50px;
  margin-bottom:var(--sp-4);
}
.blog-calc-title{
  font-family:var(--ff-head); font-weight:700;
  font-size:clamp(1.4rem, 1rem + 2vw, 1.9rem);
  line-height:1.2; letter-spacing:-.015em;
  color:var(--g900);
  margin-bottom:var(--sp-3);
}
.blog-calc-sub{
  color:var(--muted); font-size:1rem;
  max-width:32rem; margin-inline:auto;
  line-height:1.6;
}

.blog-calc-card{
  background:#fff;
  border:2px solid var(--g100);
  border-radius:var(--r);
  padding:var(--sp-8);
  box-shadow:var(--sh);
}

.bc-field{ margin-bottom:var(--sp-6); }
.bc-label{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:var(--sp-3);
  font-size:.92rem; font-weight:600; color:var(--g900);
}
.bc-val{
  background:var(--blue);
  color:#fff;
  padding:.2rem .7rem;
  border-radius:8px;
  font-weight:700;
  font-size:.95rem;
  min-width:2.5rem;
  text-align:center;
}

.bc-slider{
  -webkit-appearance:none; appearance:none;
  width:100%; height:8px;
  background:var(--g100);
  border-radius:6px; outline:none;
  cursor:pointer;
  transition:background .2s;
}
.bc-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px;
  background:var(--blue);
  border:3px solid #fff;
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(37,99,235,.4);
  transition:transform .15s;
}
.bc-slider::-webkit-slider-thumb:hover{ transform:scale(1.15); }
.bc-slider::-moz-range-thumb{
  width:22px; height:22px;
  background:var(--blue);
  border:3px solid #fff;
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(37,99,235,.4);
}

.bc-result{
  margin:var(--sp-8) 0 var(--sp-6);
  padding:var(--sp-6);
  background:linear-gradient(135deg, #FFF7E6 0%, #FEF3C7 100%);
  border:2px solid #FDE68A;
  border-radius:14px;
  text-align:center;
}
.bc-result-label{
  font-size:.85rem; font-weight:600;
  color:#92400E; text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:var(--sp-2);
}
.bc-result-value{
  font-family:var(--ff-head); font-weight:800;
  font-size:clamp(2rem, 1.2rem + 3vw, 2.8rem);
  color:#B45309;
  line-height:1.1;
  letter-spacing:-.02em;
}
.bc-result-month{
  font-size:.95rem; color:#92400E;
  margin-top:var(--sp-2);
  font-weight:600;
}

.bc-actions{ text-align:center; }
.bc-cta{
  width:100%;
  padding:1rem 1.5rem;
  font-size:1rem;
  line-height:1.3;
}
.bc-note{
  font-size:.82rem;
  color:var(--muted);
  margin-top:var(--sp-3);
  line-height:1.5;
}

/* ─── Calculator language options ─── */
.lang-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); gap:.6rem; }
.opt.disabled{ opacity:.7; cursor:not-allowed; }
.opt.disabled input{ pointer-events:none; }
.lang-price{ font-size:.78rem; color:var(--muted); }
.opt.active .lang-price{ color:var(--blue); font-weight:600; }
.rec-list-item.opt-discount .nm::before{ content:'−'; color:#10B981; margin-right:.4rem; font-weight:700; }
.rec-list-item.opt-discount .pr{ color:#10B981 !important; }

/* pgsteps responsive */
@media(max-width:900px){
  .pgsteps{grid-template-columns:1fr 1fr;gap:36px}
  .pgsteps::before{display:none}
}
@media(max-width:600px){
  .pgsteps{grid-template-columns:1fr !important}
}

.pricing-note{font-size:.75rem;color:var(--muted);margin-top:var(--sp-6);text-align:center;max-width:44rem;margin-inline:auto;line-height:1.5}
/* ─── Process step arrows ─── */
.pgstep-arrow{display:flex;align-items:center;justify-content:center;padding-top:22px;opacity:.7}
.pgstep-arrow svg{width:40px;height:12px}
@media(max-width:900px){
  .pgsteps{grid-template-columns:1fr auto 1fr;row-gap:var(--sp-8)}
  .pgstep-arrow:nth-child(4){display:none}
}
@media(max-width:600px){
  .pgsteps{grid-template-columns:1fr}
  .pgstep-arrow{display:none}
}