/* =======================================================================
   IT Group — RANOMI look (REWRITE)
   Перезаписанный style.css: селекторы сохранены, изменены только значения.
   ======================================================================= */

/* Fonts (Google, Cyrillic) */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

/* ---------------- Tokens (монохром ranomi) ---------------- */
:root{
  /* базовые */
  --cp-text: #0A0A0A;
  --cp-muted: #6B6B6B;
  --cp-white: #FFFFFF;
  --cp-bg: #F8F7F4;           /* тёплый белый */
  --cp-border: #E5E0D8;       /* тёплый бордер */

  /* акцент emerald */
  --accent: #059669;
  --accent-hover: #047857;
  --accent-light: rgba(5,150,105,.10);
  --chamfer: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));

  /* фирменные (монохром) */
  --cp-blue: #0A0A0A;         /* используем чёрный вместо голубого */
  --cp-blue-700: #0A0A0A;     /* насыщённый чёрный */
  --cp-orange: #0A0A0A;       /* не используется как акцент, но оставим ч/б */

  /* световые блики / стёкла */
  --cp-pearlA: rgba(255,255,255,.18);
  --cp-pearlB: rgba(255,255,255,.08);

  /* размеры (чуть мягче) */
  --container: 1200px;
  --r-xs: 10px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  /* тени — менее цветные, мягкие */
  --sh-1: 0 6px 24px rgba(0,0,0,.06);
  --sh-2: 0 18px 50px rgba(0,0,0,.10);

  /* типографика */
  --step--1: clamp(.78rem,.75rem + .15vw,.9rem);
  --step-0:  clamp(.95rem,.9rem + .25vw,1.05rem);
  --step-1:  clamp(1.15rem,1.05rem + .5vw,1.35rem);
  --step-2:  clamp(1.45rem,1.25rem + .8vw,1.9rem);
  --step-3:  clamp(1.9rem,1.6rem + 1.5vw,2.6rem);
  --step-4:  clamp(2.4rem,2rem + 2.2vw,3.4rem);
  --step-5:  clamp(3rem,2.4rem + 3vw,4.4rem);
}

/* ---------------- Base ---------------- */
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--cp-text) !important;
  background: var(--cp-bg) !important;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.container{width:min(100% - 2rem, var(--container)); margin-inline:auto}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
hr{border:0;height:1px;background:var(--cp-border);margin:24px 0}

/* универсальные карточки/стекло */
.surface{
  background:var(--cp-white) !important;
  border:1px solid var(--cp-border) !important;
  border-radius:var(--r-md) !important;
  box-shadow:var(--sh-1) !important;
}
.glass{
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.72)),
    radial-gradient(120% 120% at 80% 10%, var(--cp-pearlA) 0%, var(--cp-pearlB) 40%, rgba(255,255,255,.9) 100%) !important;
  border:1px solid rgba(0,0,0,.06) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
}

/* ---------------- Header ---------------- */
.site-header,
.site-header--rich{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85) 60%, transparent) !important;
  border-bottom:1px solid var(--cp-border) !important;
  backdrop-filter:blur(8px);
}
.header__row,
.header__row--rich{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:.7rem 0}
.brand, .brand--logo{display:flex;align-items:center;gap:.8rem;font-weight:800;letter-spacing:.01em}
.brand__logo{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  background:
    radial-gradient(70% 70% at 30% 20%, rgba(0,0,0,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  border:1px solid rgba(0,0,0,.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 8px 24px rgba(0,0,0,.12);
}
.pill-nav{display:none;align-items:center;gap:6px;background:#f6f6f6;border:1px solid var(--cp-border);padding:4px;border-radius:999px}
.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.46rem .9rem;border-radius:999px;color:#0b0b0b;opacity:.9}
.pill.is-active{background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.header__actions{display:flex;gap:.5rem}
.icon-btn{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#fff;border:1px solid var(--cp-border)}
@media (min-width:980px){.pill-nav{display:flex}}
/* brand__name скрывается в _header.php инлайн-стилями */

/* ---------------- Buttons ---------------- */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.8rem 1.25rem;border-radius:0;font-weight:600;border:none;
  transition:background .18s, filter .18s, transform .18s;
  background:#0A0A0A; color:#fff;
  letter-spacing:.01em;
  clip-path:var(--chamfer);
  text-decoration:none !important;
}
.button--primary{
  color:#fff !important; background:var(--accent) !important;
}
.button--primary:hover{background:var(--accent-hover) !important;transform:translateY(-1px)}
.button--ghost{
  color:#0A0A0A;background:var(--cp-border);
}
.button--ghost:hover{background:#D4CFC7;filter:none}
.button--accent{color:#fff;background:var(--accent)}
.button--accent:hover{background:var(--accent-hover)}
.button--blue{color:#fff;background:var(--accent)}
.button--blue:hover{background:var(--accent-hover);transform:translateY(-1px)}
.button--white{background:#fff;color:#0A0A0A}
.button--white:hover{background:#f0fdf4}

/* ======= Hero: правый слот под картинку с «блоб»-эффектом ======= */
.hero__layout{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  align-items:center;
  gap: clamp(24px, 4vw, 56px);
}

.hero__bullets {
  list-style: none; /* убираем точки */
  margin: 0;
  padding: 0;
}

.hero__bullets li {
  margin-bottom: 8px; /* отступ между пунктами */
}

.hero__cta {
    padding-top: 20px;
}
.hero__tg {
  margin: 0;
  font-size: .875rem;
  color: var(--cp-muted);
}
.hero__tg-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #229ED9;
  text-decoration: none;
  font-weight: 500;
}
.hero__tg-link:hover { opacity: .75; text-decoration: none; }

/* На планшетах/мобилках картинку уводим ниже текста */
@media (max-width: 960px){
  .hero__layout{ grid-template-columns: 1fr; }
  .hero__art{ order: 2; margin-top: 8px; }
}

/* Карман под изображение */
.hero__art{
  --blob-color: #C7FF3A;           /* лаймовый как в рефе */
  --blob-color-2: #1E88FF;         /* если выберешь .hero__art--blue */
  position: relative;
  width: 80%;
  max-width: 460px;
  margin: 0 0 0 auto;
  aspect-ratio: 4 / 5;             /* держим пропорцию */
  isolation: isolate;
}

/* Само фото */
.hero__art img{
  position: absolute;
  inset: 8% 8% 8% 10%;
  width: auto;
  height: auto;
  max-width: calc(100% - 16%);
  max-height: calc(100% - 16%);
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(15,17,21,.14);
  z-index: 2;
  background: #fff;
}

/* Блоб-фон: две большие «капли» вокруг изображения */
.hero__art::before,
.hero__art::after{
  content:"";
  position:absolute;
  z-index:1;
  filter: saturate(110%);
}

/* верхний левый */
.hero__art::before{
  left:-6%;
  top:-4%;
  width: 72%;
  height: 72%;
  background: var(--blob-color);
  border-radius: 56% 44% 38% 62% / 48% 40% 60% 52%;
  box-shadow: 0 18px 40px rgba(57, 255, 0, .15);
}

/* Вариант с синими пятнами, если захочешь: просто замени класс */
.hero__art--blue{ --blob-color: var(--blob-color-2); }
.hero__art--lime{ --blob-color: #C7FF3A; }

/* Чтобы текст слева не «прилипал» к правому краю */
.hero__text{ min-width: 0; }

/* Чуть плотнее компонуем буллеты, чтобы поместилось на одном экране */
.hero__bullets{ row-gap: 10px; }

/* ---------------- Marquee (border/bg остаётся здесь) ---------------- */
.marquee{
  background:#fff !important;
  border-block:1px solid var(--cp-border) !important;
}

/* ---------------- Sections ---------------- */
.section{padding:72px 0}
.section__head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:24px}
.section__desc{color:var(--cp-muted)}

/* =========================================================
   KPI Grid (metrics-style cards)
   ========================================================= */

/* Токены (подстрой под свою тему при желании) */
:root{
  --kpi-bg: #f6f7fb;
  --kpi-card: #ffffff;
  --kpi-text: #0e0e10;
  --kpi-muted: #6b7280;
  --kpi-border: #e9edf4;
  --kpi-dark: #0f1115;
  --kpi-darkText: #f6f7fb;
  --kpi-accent: #059669;
  --kpi-radius: 16px;
  --kpi-gap: 24px;
  --kpi-shadow: 0 6px 16px rgba(15,17,21,0.06);
}

/* Секция */
.section.cases{
  background: var(--kpi-bg);
}

/* Сетка карточек */
.kpi-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--kpi-gap);
  align-items: stretch;
  margin-top: 24px;
}

/* Брейкпоинты */
@media (max-width: 1024px){
  .kpi-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .kpi-grid{ grid-template-columns: 1fr; }
}

/* Базовая карточка */
.kpi-card{
  position: relative;
  background: var(--kpi-card);
  border: 1px solid var(--kpi-border);
  border-radius: var(--kpi-radius);
  box-shadow: var(--kpi-shadow);
  padding: 28px;
  display: flex;
  flex-direction: column;
  min-height: 180px;
  overflow: hidden;
}

/* Варианты */
.kpi-card--light{ background: var(--kpi-card); color: var(--kpi-text); }
.kpi-card--dark{
  background: var(--kpi-dark);
  color: var(--kpi-darkText);
  border-color: rgba(255,255,255,0.08);
}
.kpi-card--featured{
  transform: translateZ(0); /* сглаживание */
}

/* Ссылочная зона карточки */
.kpi-card__link{
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
  outline: none;
}
.kpi-card__link:focus-visible{
  box-shadow: 0 0 0 3px rgba(124,92,255,.35);
  border-radius: calc(var(--kpi-radius) - 2px);
}

/* Заголовки/тексты */
.kpi-card__headline{
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px 0;
}
.kpi-card__sub{
  font-size: 14px;
  line-height: 1.4;
  color: var(--kpi-muted);
  margin-bottom: 12px;
}
.kpi-card--dark .kpi-card__sub{ color: rgba(246,247,251,.7); }

.kpi-card__desc{
  font-size: 15px;
  line-height: 1.6;
  color: var(--kpi-text);
  opacity: .9;
  margin: 0 0 auto 0;
}
.kpi-card--dark .kpi-card__desc{
  color: var(--kpi-darkText);
  opacity: .85;
}

/* CTA */
.kpi-card__cta{
  margin-top: 18px;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--kpi-accent);
}
.kpi-card__cta::after{
  content: "›";
  transform: translateY(1px);
}
.kpi-card--dark .kpi-card__cta{ color: #6ee7b7; }
.kpi-card__cta--invert{ color: #6ee7b7; }

/* Hover/active */
.kpi-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(15,17,21,0.08);
}
.kpi-card:active{ transform: translateY(0); }

/* Performance (без диаграммы, крупное число) */
.kpi-card--performance{
  display: grid;
  place-items: center;
  text-align: center;
}
.kpi-meter__title{
  font-size: 16px;
  text-transform: none;
  letter-spacing: .02em;
  color: var(--kpi-muted);
  margin-bottom: 8px;
}
.kpi-meter__value{
  font-size: clamp(40px, 6vw, 56px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 6px;
}
.kpi-meter__note{
  font-size: 14px;
  color: var(--kpi-muted);
}

/* Текстовый блок */
.kpi-card--text p{
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--kpi-text);
  opacity: .95;
}

/* Небольшое выравнивание секции «Избранное» при использовании тёмного/светлого фона */
.section.cases .section__head .section__desc{
  color: var(--kpi-muted);
}

/* Уважительные отступы к другим блокам страницы */
.section.cases .container{
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Принудительный анти-перетекания длинных слов */
.kpi-card, .kpi-card *{
  word-wrap: break-word;
  overflow-wrap: anywhere;
}


/* ---------------- Services (tiles) ---------------- */
.services__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.tile{
  grid-column:span 3;background:#fff;border:1px solid var(--cp-border);
  border-radius:16px;padding:18px;box-shadow:var(--sh-1)
}
.tile__title{
  font-size:1.05rem;margin:.2rem 0 10px;
  font-family:Oswald,Inter,sans-serif; text-transform:uppercase; letter-spacing:.02em;
}
.tile__list{margin:0;padding-left:1.1rem;color:var(--cp-muted)}
.tile__list li{padding:.14rem 0}
.tile:hover{border-color:#E5E5E5;box-shadow:0 12px 34px rgba(0,0,0,.12)}
@media (max-width:1000px){.tile{grid-column:span 6}}
@media (max-width:640px){.tile{grid-column:1 / -1}}

/* ---------------- Services — Compare ---------------- */
.services-compare{--radius-xl:22px}
.services-compare .plans{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.plan{
  position:relative;border-radius:var(--radius-xl);overflow:hidden;border:1px solid rgba(0,0,0,.08);
  padding:clamp(20px,3vw,36px);display:flex;flex-direction:column;gap:18px;min-height:520px
}
.plan--muted{
  background:linear-gradient(180deg,#F7F7F7 0%,#F1F1F1 100%); color:var(--cp-text);
}
.plan--accent{
  color:#fff;border-color:rgba(255,255,255,.15) !important;
  background:
    radial-gradient(120% 120% at 110% 10%, rgba(255,255,255,.12) 0 15%, rgba(255,255,255,.04) 45%, rgba(255,255,255,0) 60%),
    linear-gradient(160deg, #047857 0%, #059669 50%, #065F46 100%) !important;
  box-shadow:0 12px 40px rgba(5,150,105,.25);
}
.plan__badge{display:inline-flex;align-items:center;gap:.5ch;font-size:.85rem;font-weight:600}
.plan__badge::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor;opacity:.9}
.plan--muted .plan__badge{color:#6A6A6A}.plan--accent .plan__badge{color:#fff}
.plan__price{margin:6px 0 0;font-weight:800;letter-spacing:.0em;line-height:.9;font-size:clamp(42px,10vw,80px);font-family:Oswald,Inter,sans-serif;text-transform:uppercase}
.plan__unit{margin-top:-8px;font-size:clamp(14px,2.1vw,22px);opacity:.85}
.plan__lead{margin:6px 0 4px;font-size:clamp(14px,1.6vw,18px)}
.plan__list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px}
.plan__list li{display:flex;gap:.6rem;align-items:flex-start;font-size:clamp(14px,1.6vw,17px)}
.plan__list li::before{content:"—";opacity:.55;transform:translateY(-1px)}
.plan--accent .plan__list li::before{content:"✓";opacity:.95}
.plan__cta{margin-top:auto}.button--white{background:#fff;color:#0b0b0b;border:1px solid rgba(0,0,0,.2)}
.button--white:hover{transform:translateY(-1px)}
@media (max-width:980px){.services-compare .plans{grid-template-columns:1fr}.plan{min-height:480px}}

/* ---------------- Process (иконки) ---------------- */
.process-icons{padding-block:96px}
.process-icons .process-note{color:#9aa0a6;margin:0 0 28px}
.process-grid{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:18px}
.pc{
  background:linear-gradient(180deg,#F7F7F7 0%,#F1F1F1 100%);color:var(--cp-text);
  border-radius:20px;border:1px solid rgba(0,0,0,.08);padding:22px 20px;display:flex;flex-direction:column;gap:10px;
  transition:transform .18s ease, box-shadow .25s ease, border-color .2s ease;min-height:180px
}
.pc:hover{transform:translateY(-2px);border-color:rgba(0,0,0,.35);box-shadow:0 16px 44px rgba(0,0,0,.10)}
.pc__icon{width:40px;height:40px;color:#0A0A0A}
.pc h3{
  font-size:18px;margin:2px 0 2px;
  font-family:Oswald,Inter,sans-serif;text-transform:uppercase;letter-spacing:.02em;
}
.pc p{margin:0;color:#5E5E5E;font-size:15px}
.pc__more{margin-top:auto;font-size:14px;color:#2b2f33;border-bottom:1px solid rgba(0,0,0,.18)}
.pc__more:hover{border-color:rgba(0,0,0,.6)}
@media (max-width:1200px){.process-grid{grid-template-columns:repeat(3,minmax(220px,1fr))}}
@media (max-width:760px){
  .process-grid{grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);overflow-x:auto;padding-bottom:8px;gap:14px}
  .process-grid::-webkit-scrollbar{height:6px}
}

/* ---------------- About (statement) ---------------- */
.about-statement{
  position:relative;padding-block:clamp(64px,8vw,120px);
  background:radial-gradient(1000px 700px at 92% -10%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.05) 35%, transparent 60%);
  border-top:1px solid var(--cp-border);border-bottom:1px solid var(--cp-border)
}
.about-statement__title{
  font-weight:800;letter-spacing:.02em;line-height:1.02;
  font-size:clamp(2.2rem,1.6rem + 4vw,4.8rem);margin:0 0 28px;
  font-family:Oswald,Inter,sans-serif;text-transform:uppercase;
}
.about-statement__title .accent{color:var(--accent)}
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px)}
.mv h3{
  margin:0 0 10px;font-size:clamp(1.1rem,.9rem + .6vw,1.5rem);
  font-family:Oswald,Inter,sans-serif;text-transform:uppercase;letter-spacing:.02em;
}
.mv__link{color:#0A0A0A;text-decoration:none;border-bottom:2px solid currentColor;line-height:1}
.mv p{margin:0;color:var(--cp-muted)}
.about-stats{margin:clamp(28px,4vw,48px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));gap:14px}
.about-stats li{list-style:none;color:var(--cp-muted);border-top:1px solid var(--cp-border);padding-top:12px}
.about-stats b{display:block;color:var(--cp-text);font-size:clamp(1.2rem,1rem + .8vw,1.8rem)}
@media (max-width:900px){.mv-grid{grid-template-columns:1fr}.about-stats{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.about-stats{grid-template-columns:1fr}}

/* ---------------- Contact (glass form) ---------------- */
.contact--v2{padding-block:72px}
.contact-hero{
  position:relative;border-radius:28px;min-height:360px;
  background:
    linear-gradient(180deg, rgba(10,10,10,.06), rgba(10,10,10,.06)),
    url("/img/contact.jpg") center/cover no-repeat;
  box-shadow:0 30px 80px rgba(0,0,0,.08);overflow:hidden
}
.contact-card{
  --glass:rgba(255,255,255,.85);--stroke:rgba(15,15,15,.12);
  position:relative;max-width:860px;margin:clamp(18px,5vw,36px);padding:clamp(18px,4vw,28px);
  background:var(--glass);border:1px solid var(--stroke);border-radius:8px;backdrop-filter:saturate(120%) blur(10px);box-shadow:0 10px 40px rgba(0,0,0,.08);color:#0d0f13
}
.contact-card h2{
  margin:0 0 .4rem;font-size:clamp(1.6rem,1rem + 2vw,2.1rem);
  font-family:Oswald,Inter,sans-serif;text-transform:uppercase;letter-spacing:.02em;
}
.contact-card p.contact__desc{margin:0 0 1rem;color:#4e5561}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.field--full{grid-column:1 / -1}
@media (max-width:720px){.form-row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}.field > span{font-size:.9rem;color:#616876}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(15,15,15,.12);
  background:rgba(255,255,255,.95);color:#0d0f13;outline:none;transition:border-color .2s, box-shadow .2s
}
.field textarea{resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(0,0,0,.45);box-shadow:0 0 0 4px rgba(0,0,0,.12)}
.form-row--meta{display:flex;align-items:center;gap:16px;justify-content:space-between;margin-block:6px 12px;flex-wrap:wrap}
.agree{display:flex;align-items:center;gap:8px}
.contact__actions{display:flex;gap:10px;flex-wrap:wrap}
.button#contactSubmit{position:relative;padding-right:2.6rem}
.button#contactSubmit .btn-spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;position:absolute;right:14px;top:50%;transform:translateY(-50%);opacity:0;transition:opacity .15s}
.is-sending .btn-spin{opacity:1;animation:spin .7s linear infinite}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}

/* ---------------- Footer (dark) ---------------- */
.site-footer--card{background:#0f1420;border-top:none;padding:48px 0 64px}
.footer-card{
  position:relative;display:grid;grid-template-columns:1fr;gap:18px 20px;
  padding:26px;border-radius:0;background:transparent !important;color:#fff !important;
  border:none !important;box-shadow:none !important;max-width:100%
}
@keyframes rainbow-flow{
  0%{background-position:0% center}
  100%{background-position:200% center}
}
.footer-wordmark{
  display:block;width:100%;letter-spacing:.02em;color:#fff;
  font-size:clamp(2.2rem,6vw,2rem);line-height:.95;text-decoration:none;
  font-family:Oswald,Inter,sans-serif;text-transform:uppercase;transition:color .2s;
  margin-bottom:12px;
}
.footer-wordmark:hover{
  background:linear-gradient(90deg,#ff0000,#ff7700,#ffee00,#00cc44,#0099ff,#7700ff,#ff0099,#ff0000);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  text-decoration:none;
  animation:rainbow-flow 2.5s linear infinite;
}
.footer-note{font-size:.9rem;color:rgba(255,255,255,.55)}
.footer-col--qr{display:grid;justify-items:end;align-content:start;gap:8px}
.footer-qr{width:100px;height:100px;border-radius:16px;background:#1e2333;border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 22px rgba(0,0,0,.3);overflow:hidden}
.footer-bottom{
  grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 14px;
  padding-top:14px;margin-top:6px;border-top:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.55);font-size:.95rem
}
.footer-partners{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.footer-bottom p{margin:0;flex:1 1 260px;min-width:0;overflow-wrap:anywhere;color:rgba(255,255,255,.55)}
.footer-bottom p:last-child{text-align:right}
@media (max-width:640px){
  .footer-bottom p:last-child{text-align:center;flex:1 1 100%}
}
.footer-bottom a{color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:3px}
.footer-bottom a:hover{color:#fff}
@media (max-width:1000px){
  .footer-col--qr{justify-items:center}
}
@media (max-width:640px){
  .footer-card{grid-template-columns:1fr;gap:16px}
  .footer-bottom{justify-content:center;text-align:center}
  .footer-bottom p{flex:1 1 100%}
}

/* ===== Утилиты: eyebrow, accent, mono ===== */
.eyebrow {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.is-blue { color: var(--accent); }
.is-accent { color: var(--accent); }

/* ===== Stats row ===== */
.hero-stats {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--cp-border);
}
.hero-stats__item { display: flex; flex-direction: column; gap: 2px; }
.hero-stats__num {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -.02em;
  line-height: 1;
}
.hero-stats__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  color: var(--cp-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ===== Testimonial block ===== */
.testimonial-block {
  padding: 48px 0;
  border-top: 1px solid var(--cp-border);
}
.testimonial-card {
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.testimonial-quote {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700;
  color: var(--cp-text);
  letter-spacing: -.01em;
  line-height: 1.3;
  margin: 0 0 14px;
}
.testimonial-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cp-muted);
}
.testimonial-label span { color: var(--accent); }

/* reduce motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ====== Быстрые фиксы формы на itgroupp.ru ====== */

/* 1) Сбрасываем fieldset/legend, чтобы не было серой рамки блока "Как связаться" */
form fieldset {
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  min-width: 0;
}
form legend {
  padding: 0;
  margin: 0 0 8px 0;
  font-weight: 600;
  line-height: 1.3;
}

/* 2) Единый вид текстовых полей/селектов/textarea */
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="url"],
form input[type="number"],
form select,
form textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 12px;
  padding: 14px 16px;
  font: inherit;
  line-height: 1.4;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
form textarea { min-height: 140px; resize: vertical; }

/* 3) Фокус и ховер — аккуратная подсветка */
form input:focus,
form select:focus,
form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* 4) Радио/чекбоксы — выравниваем по центру строки */
.form-options,
form .options,
form .radio-group,
form .checkbox-group {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

form label.option,
form .radio,
form .checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin: 0;
}

/* Нормальная видимость самих кружков/квадратиков */
form input[type="radio"],
form input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--accent);
}

/* 5) Подпись «Согласен с политикой…» — переносы и отступы */
form .policy,
form .agreement {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 8px 0 12px 0;
}
form .policy a { text-decoration: underline; }

/* 6) Прячем honeypot/hidden-поля, на которые могли накинуться общие стили */
form input[type="hidden"],
form input[name*="honeypot"],
form input[name*="hp"],
form input[aria-hidden="true"] {
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* 7) Кнопка отправки — выравнивание и отступы от соседних элементов */
form .form-actions,
form .actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

form button[type="submit"],
form input[type="submit"] {
  appearance: none;
  border: none;
  border-radius: 0;
  clip-path: var(--chamfer);
  padding: 13px 22px;
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.2;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: background .18s;
}
form button[type="submit"]:hover,
form input[type="submit"]:hover { transform: translateY(-1px); }
form button[type="submit"]:active,
form input[type="submit"]:active { transform: translateY(0); }

/* 8) Чип с почтой справа от кнопки — аккуратная таблетка */
form .contact-chip,
form .email-chip {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  border;}

/* ===== Infinite marquee (no JS) ===== */
.marquee{
  --gap: 48px;
  --dur: 18s;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  user-select: none;
  padding-block: 10px;
  /* gap на контейнере убран — зазор обеспечивает padding-right у каждого трека */
}

.marquee__content{
  flex-shrink: 0;
  min-width: 100%;            /* трек всегда >= ширины экрана → оба не видны разом */
  display: inline-flex;
  align-items: center;
  justify-content: space-evenly; /* растягиваем пункты равномерно */
  gap: var(--gap);
  padding-right: var(--gap); /* зазор-стыковка между треками */
  list-style: none;
  margin: 0;
  padding-left: 0;
  animation: marquee-scroll var(--dur) linear infinite;
}

/* элементы внутри */
.marquee__content > li{
  white-space: nowrap;
  font-weight: 700;
  font-size: clamp(14px, 1.4vw, 18px);
  color: #0f0f10;
  opacity: .85;
}

.brand-thin { font-weight: 400 !important; }

/* Ховер-пауза (необязательно) */
.marquee:hover .marquee__content{ animation-play-state: paused; }

/* Доступность: если пользователь против анимаций */
@media (prefers-reduced-motion: reduce){
  .marquee__content{ animation: none; }
}

/* Кадры */
@keyframes marquee-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Карточка формы */
.contact-card{
  border-radius: 8px;
  background:#fff;
  box-shadow: 0 20px 50px rgba(16,24,40,.08);
  padding: 28px;
}

@media (min-width: 900px){
  .contact-card{ padding: 40px; }
}

/* Сетка полей */
.form-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}
@media (min-width: 768px){
  .form-grid{ grid-template-columns: 1fr 1fr; }
}
.form-grid .full{ grid-column: 1 / -1; }

/* Поля ввода */
.form-input, .form-select, .form-textarea{
  width:100%;
  border:1px solid var(--cp-border);
  border-radius:6px;
  padding:12px 14px;
  font-size:15px;
  line-height:1.4;
  background:#fff;
  color:var(--cp-text);
  font-family:inherit;
  box-sizing:border-box;
  transition:border-color .15s, box-shadow .15s;
}
.form-textarea{ min-height: 130px; resize: vertical; }

/* Select — убираем нативную стрелку */
.form-select{
  -webkit-appearance:none;
  appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:36px;
  cursor:pointer;
  height:46px;
}

.form-input:focus, .form-select:focus, .form-textarea:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
}

/* Ошибка валидации */
.form-input.is-invalid, .form-select.is-invalid, .form-textarea.is-invalid{
  border-color:#ef4444;
  box-shadow: 0 0 0 4px rgba(239,68,68,.10);
}
input[type="checkbox"].is-invalid{
  outline: 2px solid #ef4444;
  outline-offset: 2px;
}

/* ── intl-tel-input overrides ── */
.iti { width: 100%; }
.iti__tel-input {
  height: auto;
  padding-top: 12px;
  padding-bottom: 12px;
}
.iti--separate-dial-code .iti__selected-country {
  border-radius: 6px 0 0 6px;
  border-right: 1px solid var(--cp-border);
  background: #fafaf9;
  padding: 0 8px 0 10px;
}
.iti--separate-dial-code .iti__selected-country:hover {
  background: #f3f2ef;
}
.iti__selected-dial-code {
  font-size: .875rem;
  color: var(--cp-text);
  font-family: inherit;
}
.iti__dropdown-content {
  border-radius: 6px;
  border: 1px solid var(--cp-border);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  font-family: inherit;
  font-size: .9rem;
}
.iti__search-input {
  border-radius: 4px;
  border: 1px solid var(--cp-border) !important;
  font-family: inherit;
  font-size: .9rem;
}
.iti__country.iti__highlight { background: var(--accent-light); }

/* Кнопки */
.btn{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:13px 22px;
  border-radius:0;
  border:none;
  font-weight:600;
  font-size:.9rem;
  line-height:1;
  cursor:pointer;
  clip-path:var(--chamfer);
  transition:background .18s, transform .12s;
}
.btn-primary{
  background: var(--accent);
  color:#fff;
  border-color: var(--accent);
  box-shadow: 0 2px 0 rgba(0,0,0,.12);
}
.btn-primary:hover{ background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:active{ transform: translateY(1px); }

.btn-ghost{
  background:#fff;
  border-color:#E5E7EB;
  color:#111827;
}
.btn-ghost:hover{ background:#F9FAFB; }

/* Выровнять кнопки и подпись с почтой */
.form-actions{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}

/* Общие отступы вокруг формы */
.section--contact{ padding: 40px 0 80px; }

/* 1) Глобально фиксируем расчёт ширины */
*, *::before, *::after { box-sizing: border-box; }

/* 2) Контейнер формы по центру */
.section--contact { padding: 40px 0 80px; }
.section--contact .contact-card{
  max-width: 980px;     /* можно 1040/1120 по вкусу */
  margin: 0 auto;       /* центрирование */
}

/* 3) Ячейки грида не распирает содержимое */
.form-grid > * { min-width: 0; }

/* Для кнопок, чтобы не «скакали» при фокусе */
.btn:focus{ outline: none; box-shadow: 0 0 0 3px var(--accent-light); }

.tg-link{
  display:inline-flex;
  align-items:center;
  gap:.4em;             /* расстояние между иконкой и текстом */
  color:#229ED9;        /* фирменный цвет Telegram; можно заменить */
  text-decoration:none; /* опционально */
}
.tg-link:hover{ text-decoration:underline; }
.tg-icon{
  width:1em;            /* размер под текст */
  height:1em;
  flex:0 0 auto;
  vertical-align:-0.125em;
}

.consent-checkbox {
  display: flex;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.4;
  color: #666;
}

.consent-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

.consent-checkbox a {
  color: var(--accent);
  text-decoration: none;
}

.consent-checkbox a:hover {
  text-decoration: underline;
}

/* ===== Marquee — mobile ===== */
@media (max-width: 780px) {
  .marquee { --gap: 28px; --dur: 14s; }
  .marquee__content > li { font-size: clamp(12px, 3.5vw, 15px); }
}

/* ============================================================
   MOBILE — все правки для телефонов (≤ 779px)
   Десктоп не трогаем.
   ============================================================ */
@media (max-width: 779px) {

  /* --- Общее --- */
  .section { padding: 36px 0; }
  .section__head { flex-direction: column; align-items: flex-start; }

  /* --- Hero: фото → аватарка слева от заголовка --- */
  .hero__layout {
    display: block;
    position: relative;
    padding-right: 72px;
    padding-top: 20px;
    min-height: 64px;
    padding-bottom: 15px;
  }
  /* Отмена планшетного правила grid→1fr */
  .hero__art { order: 0; margin-top: 0; }

  /* Аватарка */
  .hero__art {
    position: absolute !important;
    top: 20px;
    right: 0;
    left: auto;
    width: 58px !important;
    height: 58px !important;
    max-width: none;
    aspect-ratio: 1 !important;
    margin: 0 !important;
    border-radius: 50%;
    overflow: hidden;
    isolation: auto;
  }
  .hero__art::before,
  .hero__art::after { display: none !important; }
  .hero__art img {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
  }

  .hero__title { font-size: clamp(1.45rem, 5.5vw, 2rem) !important; line-height: 1.2; }
  .hero__lead  { font-size: clamp(.9rem, 3.5vw, 1rem); margin-top: .75rem; }
  .hero__cta   { padding-top: 14px; }

  /* --- Plans «Чем помогу» → горизонтальный свайп --- */
  .services-compare .plans {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    padding: 4px 1rem 20px !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .services-compare .plans::-webkit-scrollbar { display: none; }
  .plan {
    flex: 0 0 82vw !important;
    scroll-snap-align: start;
    min-height: auto !important;
  }

  /* --- KPI grid → 1 колонка --- */
  .kpi-grid { grid-template-columns: 1fr !important; }

  /* --- Услуги (tiles) уже 1 колонка через существующий @640px --- */
}

/* ===== Code block (.cb) — mobile fix ===== */
.cb { max-width: 100%; }
@media (max-width: 780px) {
  .cb { overflow-x: auto !important; }
  .cb__pre { white-space: pre-wrap !important; overflow-wrap: break-word !important; word-break: break-all !important; }
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1a1a1a;
  color: #fff;
  z-index: 9999;
  font-family: inherit;
  font-size: 14px;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
}

.cookie-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.cookie-text {
  flex: 1;
  min-width: 280px;
  line-height: 1.4;
  margin: 0;
}

.cookie-text a {
  color: #4da6ff;
  text-decoration: none;
}

.cookie-text a:hover {
  text-decoration: underline;
}

.cookie-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s;
}

.cookie-close:hover {
  background: rgba(255,255,255,0.1);
}

@media (max-width: 768px) {
  .cookie-content {
    flex-direction: column;
    text-align: center;
    padding: 16px;
  }
  
  .cookie-text {
    min-width: auto;
  }
}