/* Згенеровано scripts/scope_css.py — не редагувати руками. */
/* ============================================================
   CRMiUM — Zoho PPC landing (clone of crmium.lt/zoho-lithuania-en)
   Fast, dependency-free. Fonts self-hosted (Inter variable).
   Brand: bg #15171C · orange #EF652F · white #FFFFFF
   ============================================================ *//* ---------- fonts ---------- */@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ---------- tokens ---------- */.euland {
  --bg: #15171C;
  --bg-2: #1A1C22;
  --card: #1B1E25;
  --line: #2E313A;
  --orange: #EF652F;
  --orange-h: #D45520;
  --white: #FFFFFF;
  --grey: #FFFFFF; /* live: описові тексти білі (заміряно на crmium.lt) */
  --grey-2: #8B8F99;
  --light: #E9EDF4;
  --dark-text: #15171C;
  --radius: 24px;
  --container: 1200px;
  --glow: 0 0 26px rgba(239, 101, 47, .45), 0 0 70px rgba(239, 101, 47, .18);
}
/* ---------- reset ---------- */.euland *, .euland *::before, .euland *::after { box-sizing: border-box; margin: 0; padding: 0; }
.euland { scroll-behavior: smooth; }
.euland {
  font-family: 'Inter', Arial, sans-serif;
  background: var(--bg);
  color: var(--white);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.euland img { max-width: 100%; height: auto; display: block; }
.euland a { color: inherit; text-decoration: none; }
.euland ul { list-style: none; }
.euland button, .euland input, .euland textarea { font: inherit; }
.euland .container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
/* section titles */.euland .sec-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .5px;
  line-height: 1.15;
}
.euland .sec-title .accent { color: var(--orange); }
.euland .sec-sub { text-align: center; color: var(--grey); margin-top: 14px; }
/* buttons */.euland .btn {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .3px;
  padding: 18px 42px;
  border: 0;
  border-radius: 40px;
  cursor: pointer;
  text-align: center;
  transition: background .2s, transform .22s cubic-bezier(.34, 1.4, .64, 1), box-shadow .22s ease;
}
/* просте невелике збільшення (bounce з перельотом Олександру не підійшов) */.euland .btn:hover { background: var(--orange-h); transform: scale(1.05);
             box-shadow: 0 12px 28px rgba(239, 101, 47, .34); }
.euland .btn--dark:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, .45); }
.euland .btn--outline:hover { box-shadow: 0 12px 28px rgba(239, 101, 47, .22); }
.euland .btn:active { transform: scale(.97); }
.euland .btn--upper { text-transform: uppercase; }
.euland .btn--dark { background: #15171C; color: #fff; }
.euland .btn--dark:hover { background: #2A2D35; }
.euland .btn--outline {
  background: transparent;
  border: 1px solid var(--orange);
  color: #fff;
}
.euland .btn--outline:hover { background: rgba(239, 101, 47, .12); }
/* glow dot bullet */.euland .gdot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px 2px rgba(239, 101, 47, .65);
  flex: 0 0 auto;
}
/* ============ header ============ *//* ---- дропдаун «CRM systems» ---- *//* невидимий «мостик», щоб курсор не втрачав меню *//* ============ hero ============ */.euland .hero { position: relative; padding: 56px 0 32px; overflow: hidden; }
.euland .hero__grid { display: grid; grid-template-columns: minmax(0, 740px) 1fr; gap: 20px; align-items: center; }
.euland .hero h1 {
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.5px;
}
.euland .hero h1 .accent { color: var(--orange); }
.euland .hero__bullets { margin-top: 28px; display: grid; gap: 8px; }
.euland .hero__bullets li { display: flex; align-items: center; gap: 14px; font-size: 16px; }
.euland .hero__cta { margin-top: 34px; }
/* watermark: SVG «ZOHO CRM» (zoho_1 з Figma) */.euland .hero__wm {
  user-select: none;
  pointer-events: none;
  display: flex;
  justify-content: flex-end;
}
/* ширина фіксована більша за колонку — SVG декоративний, виходить вліво за межі колонки */.euland .hero__wm img, .euland .hero__wm > svg { width: 590px; max-width: none; height: auto; }
/* 2-рядковий watermark (creatio / hubspot) нижчий за 3-рядковий, і align-items:center опускає
   його майже до середини тексту — піднімаємо на ту саму лінію, що й на /zoho/ (top ≈ H1 + 50px) */.euland .hero__wm--up { transform: translateY(-70px); }
/* intro strip */.euland .hero__intro {
  margin-top: 52px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.euland .hero__intro-logo {
  font-size: 40px;
  font-weight: 800;
  color: var(--orange);
  letter-spacing: .5px;
  flex: 0 0 auto;
}
.euland .hero__intro-sep { width: 1px; align-self: stretch; background: #3A3D46; }
.euland .hero__intro-txt { font-size: 19px; line-height: 1.55; }
.euland .hero__intro-txt .num { color: var(--orange); }
/* ============ why crm ============ */.euland .why { padding: 90px 0 60px; }
.euland .why__grid {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 64px;
}
.euland .why__card h3 {
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.euland .why__card h3::after {
  content: '';
  display: block;
  width: 96px; height: 2px;
  background: var(--orange);
  margin-top: 12px;
}
.euland .why__card p { margin-top: 16px; color: var(--grey); }
/* ============ big glow cards (shared) ============ */.euland .glow-card {
  position: relative;
  border-radius: 32px;
  box-shadow: var(--glow);
}
/* ============ form block 1 ============ */.euland .lead1 { padding: 70px 0; }
.euland .lead1__card {
  background: linear-gradient(180deg, #191B21 0%, #15171C 100%);
  border: 1px solid rgba(239, 101, 47, .55);
  border-radius: 32px;
  padding: 64px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.euland .lead1__right { text-align: center; }
.euland .lead1__right h2 {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
  line-height: 1.25;
}
.euland .lead1__right h2 .accent { color: var(--orange); }
/* телефон "прилипає" до низу картки і зрізається її краєм — як на live */.euland .lead1__phone { max-width: 280px; margin: 28px auto -64px; }
/* forms */.euland .form { display: grid; gap: 18px; }
.euland .form input, .euland .form textarea {
  width: 100%;
  background: #E7E9ED;
  border: 0;
  border-radius: 32px;
  padding: 18px 28px;
  font-size: 15px;
  color: #33363E;
  text-align: left;   /* єдиний стандарт для ВСІХ форм (було center — не билось із phone) */
  outline: none;
}
.euland .form textarea { min-height: 64px; resize: vertical; border-radius: 28px; }
.euland .form input:focus, .euland .form textarea:focus { box-shadow: 0 0 0 2px var(--orange); }
.euland .form__note { font-size: 13px; color: var(--grey); }
.euland .form__check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--grey); cursor: pointer; }
/* ⚠️ ВЛАСНИЙ ЧЕКБОКС, а не системний (18.08). На реальному телефоні нативний
   input[type=checkbox] малюється системою і фактично ігнорує задані 16px: виходив
   помітно більшим за текст поруч (спіймав Олександр). ⚠️ У DevTools-емуляції цього
   НЕ видно — там малює десктопний рушій, тому баг ловиться лише на пристрої.
   appearance:none забирає системний вигляд, тому розмір однаковий усюди.
   Галочка — повернута рамка, без картинок і шрифтів. */.euland .form__check input {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; min-width: 18px; flex: 0 0 18px; margin: 1px 0 0;
  /* padding: 0 obovyazkovo: pravylo `.form input` vyshche dodaye svij padding,
     i cherez nyoho chekboks vyhodyv 58x38 zamist 18x18 */
  padding: 0; box-sizing: border-box; text-align: initial;
  border: 1.5px solid rgba(255, 255, 255, .38); border-radius: 5px;
  background: transparent; cursor: pointer; position: relative;
  transition: background .15s, border-color .15s;
}
.euland .form__check input:checked { background: var(--orange); border-color: var(--orange); }
.euland .form__check input:checked::after {
  content: ''; position: absolute; left: 5px; top: 1.5px;
  width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.euland .form__check input:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* у світлому варіанті форми рамка мусить бути темною */.euland .form--light .form__check input { border-color: rgba(0, 0, 0, .28); background: #fff; }
.euland .form--light .form__check input:checked { background: var(--orange); border-color: var(--orange); }
.euland .form .btn { width: 100%; }
.euland .form__ok { display: none; color: var(--orange); font-weight: 700; text-align: center; }
/* light form variant (inside white card) */.euland .form--light input, .euland .form--light textarea { background: #E9EDF4; text-align: left; }
.euland .form--light .form__note, .euland .form--light .form__check { color: #6B7280; }
/* ============ clients marquee ============ */.euland .clients { padding: 60px 0; }
.euland .clients__row {
  margin-top: 44px;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.euland .clients__track {
  display: flex;
  align-items: center;
  gap: 72px;
  width: max-content;
  animation: marquee 36s linear infinite;
}
.euland .clients__row:hover .clients__track { animation-play-state: paused; }
.euland .clients__track img { height: 40px; width: auto; opacity: .95; }
@keyframes marquee {
  to { transform: translateX(-50%); }
}
/* ============ how we work ============ */.euland .models { padding: 70px 0; }
.euland .models__grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.euland .models__card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 44px 36px;
  background: rgba(255, 255, 255, .015);
  text-align: center;
}
.euland .models__card h3 { font-size: 21px; font-weight: 700; }
.euland .models__card h3::after {
  content: '';
  display: block;
  width: 96px; height: 2px;
  background: var(--orange);
  margin: 14px auto 0;
}
.euland .models__card p { margin-top: 24px; color: var(--grey); font-size: 18px; }
.euland .models__cta { text-align: center; margin-top: 52px; }
/* ============ integration value (Zoho modules tabs) ============ */.euland .value { padding: 30px 0; }
.euland .value__card {
  position: relative;
  border-radius: 32px;
  padding: 34px 48px 38px;
  background:
    url('img/bg-value.webp') center / cover no-repeat,
    linear-gradient(180deg, #191B21, #15171C);
  border: 1px solid rgba(239, 101, 47, .4);
  box-shadow: var(--glow);
  overflow: hidden;
}
.euland .value__grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: center;
}
.euland .value__list { display: grid; gap: 6px; align-content: center; }
.euland .value__item {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid #3A3D46;
  border-radius: 12px;
  padding: 12px 18px;
  background: rgba(21, 23, 28, .55);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.euland .value__item:hover { border-color: #6A6E78; }
.euland .value__item.is-active { border-color: var(--orange); background: rgba(239, 101, 47, .1); }
.euland .value__item h4 { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #fff; }
.euland .value__media img { width: 100%; height: auto; }
.euland .value__desc {
  margin-top: 14px;
  text-align: center;
  font-size: 18px;
  color: #fff;
  min-height: 28px;
}
.euland .value__imgwrap { position: relative; }
/* value-стрілки: тільки мобільний, всередині картинки по боках */.euland .value__arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; }
.euland .value__arrow--prev { left: 6px; }
.euland .value__arrow--next { right: 6px; }
/* ============ quiz ============ */.euland .quiz { padding: 70px 0; }
.euland .quiz__card {
  background: var(--light);
  color: var(--dark-text);
  border-radius: 32px;
  border: 1px solid rgba(239, 101, 47, .5);
  box-shadow: var(--glow);
  padding: 56px 48px;
}
.euland .quiz__card .sec-title { color: var(--dark-text); text-transform: none; letter-spacing: 0; }
.euland .quiz__card .sec-sub { color: #4B5563; }
.euland .quiz__frame { margin-top: 32px; }
.euland .quiz__frame iframe {
  width: 100%;
  height: 560px;
  border: 0;
  border-radius: 16px;
  background: transparent;
}
/* ============ global presence (KEY BLOCK) ============ */.euland .global { padding: 52px 0 44px; position: relative; overflow: hidden; }
.euland .global__pills {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 16px;
  position: relative;
  z-index: 2;
}
.euland .pill-break { flex-basis: 100%; height: 0; }
.euland .pill {
  background: transparent;
  color: #fff;
  border: 1px solid #E7E9ED;
  border-radius: 32px;
  padding: 10px 28px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .2s, background .2s, color .2s;
}
.euland .pill--orange { color: var(--orange); border-color: #E7E9ED; }
.euland .pill--ob { border-color: var(--orange); color: #fff; }
.euland .pill--oo { border-color: var(--orange); color: var(--orange); }
.euland .pill:hover {
  transform: translateY(-3px);
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
  box-shadow: 0 8px 20px rgba(239,101,47,.35);
}
.euland .global__map-wrap {
  position: relative;
  margin-top: 24px;
  min-height: 420px;
}
.euland .global__wm {
  position: absolute;
  top: -120px; right: -40px;
  width: 60%;
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}
.euland .global__map {
  position: absolute;
  right: 0; top: 10px;
  width: 64%;
  max-width: 900px;
  z-index: 1;
  transform-origin: 60% 50%;
  transition: transform .7s cubic-bezier(.22, .9, .3, 1), filter .7s ease;
}
/* наведення на карту: ЛИШЕ легкий зум, без зміни кольору */.euland .global__map-wrap:hover .global__map { transform: scale(1.04); }
.euland .global__countries {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 72px;
  padding-top: 12px;
}
.euland .global__col { display: grid; gap: 6px; align-content: start; }
.euland .global__col--bottom { align-content: end; padding-bottom: 4px; }
.euland .global__countries li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.euland .global__countries li.lc { text-transform: none; }
.euland .global__cta { text-align: center; margin-top: 28px; position: relative; z-index: 2; }
/* ============ steps (light) ============ */.euland .steps {
  position: relative;
  padding: 0 0 80px;
  /* як у Figma: темна секція, фото ~30% поверх #15171C на весь блок;
     фон фіксований у в'юпорті — при скролі контент "прокочується" по картинці */
  background-image:
    linear-gradient(180deg, rgba(21,23,28,.88) 0%, rgba(21,23,28,.42) 22%, rgba(21,23,28,.5) 62%, rgba(21,23,28,.92) 88%, #15171C 100%),
    url('img/bg-keyboard.webp');
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  background-attachment: scroll, fixed;
  color: #fff;
}
.euland .steps__head { padding: 64px 0 8px; }
.euland .steps .container { max-width: 1320px; }
.euland .steps__timeline {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0 28px;
  position: relative;
  color: #fff;
}
.euland .steps__timeline::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 296px;
  border-top: 1px dashed #5A5E68;
}
.euland .step {
  position: relative;
  display: grid;
  grid-template-rows: 284px 24px auto;
}
.euland .step__dot {
  grid-row: 2;
  align-self: center;
  width: 12px; height: 12px;
  margin-left: 12px;
  border-radius: 50%;
  background: #fff;
}
.euland .step:first-child .step__dot { background: var(--orange); box-shadow: 0 0 10px 2px rgba(239,101,47,.6); }
.euland .step--top .step__body { grid-row: 1; align-self: end; padding-bottom: 28px; }
.euland .step--bottom .step__body { grid-row: 3; padding-top: 28px; }
.euland .step__num { font-size: 17px; font-weight: 800; color: #fff; }
.euland .step:first-child .step__num { color: var(--orange); }
.euland .step__tag {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--orange);
}
.euland .step__body h4 { font-size: 16px; font-weight: 700; margin-top: 4px; color: #fff; }
.euland .step__body p { font-size: 14.5px; line-height: 1.5; color: var(--grey); margin-top: 6px; }
/* 7 пунктів циклу */.euland .steps__timeline--7 { grid-template-columns: repeat(7, 1fr); gap: 0 16px; }
/* ============ cases ============ */.euland .cases { padding: 70px 0; }
.euland .cases__card {
  background: var(--light);
  color: var(--dark-text);
  border-radius: 32px;
  border: 1px solid rgba(239, 101, 47, .45);
  box-shadow: var(--glow);
  padding: 64px 56px;
}
.euland .cases__card .sec-title { color: var(--dark-text); }
.euland .cases__grid {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.euland .case {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* картка — посилання на сторінку кейсу */
  color: inherit; text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.euland a.case:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
.euland a.case:hover h4 { color: var(--orange); }
.euland .case h4 { transition: color .2s ease; }
.euland .case__logo {
  background: #15171C;
  border-radius: 14px;
  margin: 0 0 26px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.euland .case__logo img { max-height: 40px; width: auto; }
.euland .case { padding: 0; }
.euland .case__in { padding: 0 26px 30px; }
.euland .case h4 { font-size: 20px; font-weight: 800; }
.euland .case p { margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: #000; font-weight: 400; }
.euland .cases__cta { text-align: center; margin-top: 44px; }
/* стрілки каруселі кейсів (як на live) */.euland .cases__card { position: relative; }
.euland .case-arrow {
  position: absolute;
  top: 50%;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #D6DAE3;
  color: var(--orange);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
  z-index: 2;
  transition: border-color .2s;
}
.euland .case-arrow:hover { border-color: var(--orange); }
/* на рамці картки, по центру */.euland .case-arrow--prev { left: 0; transform: translate(-50%, -50%); }
.euland .case-arrow--next { right: 0; transform: translate(50%, -50%); }
/* ============ awards ============ */.euland .awards { padding: 70px 0; }
.euland .awards__wrap { position: relative; }
.euland .aw-arrow { display: none; position: absolute; top: 55%; z-index: 2; }
.euland .aw-arrow--prev { left: 8px; }
.euland .aw-arrow--next { right: 8px; }
.euland .awards__grid {
  margin-top: 56px;
  display: flex;
  justify-content: center;
  gap: 64px;
  flex-wrap: wrap;
}
.euland .award { text-align: center; max-width: 210px; }
.euland .award__circle {
  width: 190px; height: 190px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.euland .award__circle img { width: 190px; height: auto; }
.euland .award p { margin-top: 20px; font-weight: 700; font-size: 15px; }
/* ============ testimonials ============ */.euland .testi { padding: 70px 0; position: relative; }
.euland .testi__grid {
  margin-top: 52px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.euland .tcard[hidden] { display: none; }
.euland .tcard {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 40px 44px;
  background: rgba(255,255,255,.015);
  position: relative;
  display: flex;
  flex-direction: column;
}
.euland .tcard__quote {
  position: absolute;
  top: 30px; right: 36px;
  width: 52px; height: auto;   /* -30% на прохання Олександра */
  /* картинка темна (#21242D) — витягуємо в сірий, щоб було видно на картці */
  filter: brightness(1.75);
  opacity: 0;
  transform: translateY(16px) scale(.92);
  transition: opacity .9s ease-out, transform .9s cubic-bezier(.22, .9, .3, 1), filter .35s ease;
  pointer-events: none; user-select: none;
}
/* .run вішається на КАРТКУ (а не на секцію) — тобто рівно тоді, коли до неї доскролили */.euland .tcard.run .tcard__quote { opacity: 1; transform: none; }
/* на hover лапки оживають разом із рамкою */.euland .tcard:hover .tcard__quote { filter: brightness(2.4); transform: scale(1.09) rotate(-5deg); }
@media (max-width: 640px) {
.euland .tcard__quote { width: 38px; top: 24px; right: 24px; }

}
.euland .tcard h4 { font-size: 21px; font-weight: 800; line-height: 1.3; max-width: 75%; }
.euland .tcard__txt { margin-top: 28px; color: var(--grey); font-size: 15px; display: grid; gap: 16px; flex: 1; }
.euland .tcard__name { margin-top: 32px; font-weight: 700; }
.euland .tcard__role { color: var(--grey-2); font-size: 14px; margin-top: 4px; }
.euland .tcard__link { display: inline-block; margin-top: 14px; color: var(--orange); font-size: 14px; font-weight: 600; }
.euland .tcard__link:hover { text-decoration: underline; }
.euland .tarrow {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid #4A4E58;
  background: var(--bg);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.euland .tarrow:hover { border-color: var(--orange); color: var(--orange); }
/* стрілки з боків, по центру блока, на рамці */.euland .testi__wrap { position: relative; }
.euland .tarrow--side { position: absolute; top: 50%; z-index: 2; }
.euland .tarrow--sprev { left: 0; transform: translate(-50%, -50%); }
.euland .tarrow--snext { right: 0; transform: translate(50%, -50%); }
/* ============ FAQ ============ */.euland .faq { padding: 70px 0; }
.euland .faq__list { margin-top: 48px; }
.euland .faq__item { border-bottom: 1px solid #33363E; }
.euland .faq__item:first-child { border-top: 1px solid #33363E; }
.euland .faq__q {
  width: 100%;
  background: none;
  border: 0;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 8px;
  font-size: 19px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.euland .faq__q .chev {
  margin-left: auto;
  color: var(--orange);
  transition: transform .25s;
  font-size: 13px;
  flex: 0 0 auto;
}
.euland .faq__item.open .faq__q { color: var(--orange); }
.euland .faq__item.open .chev { transform: rotate(180deg); }
.euland .faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  color: var(--grey);
  font-size: 15.5px;
}
.euland .faq__a-in { padding: 0 40px 26px; display: grid; gap: 10px; }
.euland .faq__a ul { display: grid; gap: 6px; padding-left: 18px; list-style: disc; }
/* ============ CTA + contacts ============ */.euland .cta { padding: 70px 0 90px; }
.euland .cta__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}
.euland .cta__card {
  background: #fff;
  color: var(--dark-text);
  border-radius: 28px;
  padding: 52px 48px;
  box-shadow: var(--glow);
}
.euland .cta__card h2 { font-size: 32px; font-weight: 800; line-height: 1.2; }
.euland .cta__card h2 .accent { color: var(--orange); }
.euland .cta__card .cta__sub { margin-top: 16px; color: #4B5563; font-size: 15.5px; }
.euland .cta__card .form { margin-top: 28px; }
.euland .contacts h2 { font-size: clamp(32px, 3.4vw, 46px); font-weight: 800; text-align: center; }
.euland .contacts__rows { margin-top: 36px; }
.euland .contacts__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 20px 4px;
  border-bottom: 1px solid #3A3D46;
  font-size: 18px;
}
.euland .contacts__row b { font-weight: 700; }
.euland .contacts__row a { white-space: nowrap; }
.euland .contacts__row a:hover { color: var(--orange); }
.euland .contacts__addr { margin-top: 28px; font-size: 17px; line-height: 1.6; }
.euland .contacts__addr .mail { margin-top: 18px; display: block; }
/* ============ footer ============ *//* ============================================================
   TABLET  (≤1024)
   ============================================================ */@media (max-width: 1024px) {
/* мобільне меню: дропдаун розкритий списком (без кліку) */.euland .hero__grid { grid-template-columns: 1fr; }
.euland .hero__wm { margin-top: 16px; justify-content: center; }
.euland .hero__wm--up { transform: none; }
/* в одну колонку піднімати нічого не треба */.euland .hero__wm img, .euland .hero__wm > svg { width: 100%; max-width: 560px; }
.euland .why__grid { grid-template-columns: repeat(2, 1fr); gap: 44px 40px; }
.euland .lead1__card { grid-template-columns: 1fr; padding: 48px 36px; }
/* ⚠️ ЗАГОЛОВОК НАД ПОЛЯМИ (18.08). У розмітці спершу форма, потім права колонка
     з заголовком: на широкому екрані це дві колонки, а на телефоні виходило
     «поля, а під ними заголовок». display:contents розчиняє обгортку, тому заголовок
     і фото стають окремими елементами сітки і їх можна переставити порядком — без
     правки розмітки у десятках файлів контенту. Фото лишається ПІД формою. */.euland .lead1__right { display: contents; }
.euland .lead1__right h2 { order: -1; margin-bottom: 6px; text-align: center; }
.euland .lead1__phone { order: 1; margin-left: auto; margin-right: auto; margin-bottom: -48px; }
.euland .models__grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
.euland .value__card { padding: 52px 36px; }
.euland .value__grid { grid-template-columns: 1fr; }
.euland .global__map-wrap { min-height: 0; }
.euland .global__map { position: relative; width: 100%; margin-top: 12px; }
.euland .global__countries { grid-template-columns: repeat(3, 1fr); gap: 10px 24px; }
.euland .steps { background-attachment: scroll, scroll; }
/* fixed глючить на мобільних */.euland .steps__timeline { grid-template-columns: 1fr; gap: 0; }
.euland .steps__timeline::before { left: 17px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
.euland .step { display: block; position: relative; padding: 22px 0 22px 48px; }
.euland .step__dot { position: absolute; left: 12px; top: 26px; margin-left: 0; }
.euland .step--bottom .step__body, .euland .step--top .step__body { padding: 0; }
.euland .cases__grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
.euland .testi__grid { grid-template-columns: 1fr; }
.euland .cta__grid { grid-template-columns: 1fr; gap: 56px; }

}
/* ============================================================
   MOBILE  (≤640)
   ============================================================ */@media (max-width: 640px) {
.euland { font-size: 15px; }
.euland .hero { padding-top: 48px; }
.euland .hero__wm { display: none; }
/* на мобільному watermark не показуємо */.euland .hero__intro { flex-direction: column; align-items: flex-start; gap: 16px; }
.euland .hero__intro-sep { display: none; }
.euland .why__grid { grid-template-columns: 1fr; gap: 36px; }
.euland .lead1__card { padding: 36px 22px; }
.euland .lead1__phone { margin-bottom: -36px; }
.euland .value__card { padding: 40px 22px; }
.euland .quiz__card { padding: 36px 20px; }
.euland .quiz__frame iframe { height: 860px; }
.euland .cases__card { padding: 40px 22px; }
.euland .global__pills { gap: 12px; }
.euland .pill { padding: 11px 22px; font-size: 13px; }
.euland .global__countries { grid-template-columns: repeat(3, 1fr); gap: 8px 12px; }
.euland .global__countries li { font-size: 11.5px; gap: 0; }
.euland .global__countries .gdot { display: none; }
.euland .tcard { padding: 30px 24px; }
.euland .tcard h4 { max-width: 100%; }
.euland .cta__card { padding: 36px 22px; }
.euland .contacts__row { font-size: 15.5px; }
.euland .faq__q { font-size: 16.5px; }
/* кейси: 1 картка + стрілки */.euland .cases__grid .case:not(:first-child) { display: none; }
/* нагороди: 1 нагорода + стрілки */.euland .awards__grid .award:not(:first-child) { display: none; }
.euland .aw-arrow { display: block; }
.euland .awards__grid { gap: 0; }
/* value: карусель — 1 пункт, картинка, опис, стрілки на картинці */.euland #valueTabs .value__item { display: none; }
.euland #valueTabs .value__item.is-active { display: block; text-align: center; }
.euland .value__arrow { display: flex; align-items: center; justify-content: center; }
.euland .value__desc { font-size: 16px; }
/* менші стрілки, щоб вміщались у бічні відступи */.euland .tarrow, .euland .case-arrow { width: 42px; height: 42px; font-size: 17px; }
/* футер: компактне групування */
}
/* ============================================================
   TRUST BADGES (hero) + LEAD POPUP + phone flags + steps bump
   ============================================================ *//* --- hero trust badges --- */.euland .hero__badges { margin-left: auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.euland .badge-clutch {
  background: #fff; border-radius: 12px; display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 18px; transition: transform .15s, box-shadow .2s;
}
.euland .badge-clutch:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.euland .badge-clutch__word { font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: #17313B; }
.euland .badge-clutch__rt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1; }
.euland .badge-clutch__rt b { font-weight: 800; font-size: 15px; color: #17313B; display: inline-flex; align-items: center; gap: 6px; }
.euland .badge-clutch__stars { color: #EF652F; font-size: 13px; letter-spacing: 1.5px; }
.euland .badge-clutch__cnt { font-size: 11px; color: #5A6A72; }
.euland .badge-zoho { height: 60px; width: auto; border-radius: 10px; }
/* --- steps: bigger names, wider, no tag --- */.euland .steps .container { max-width: 1360px; }
.euland .steps__timeline--7 { gap: 0 22px; }
.euland .step__body h4 { font-size: 20px; font-weight: 800; margin-top: 6px; letter-spacing: -.01em; color: var(--orange); }
.euland .step__body p { font-size: 14.5px; }
.euland .step__num { font-size: 15px; color: #7C818C; }
.euland .step:first-child .step__num { color: var(--orange); }
/* --- honeypot --- */.euland .form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* --- modal --- */.euland .modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.euland .modal[hidden] { display: none; }
.euland .modal__overlay { position: absolute; inset: 0; background: rgba(10,11,14,.72); backdrop-filter: blur(3px); }
.euland .modal__box {
  position: relative; z-index: 1; width: 100%; max-width: 460px;
  background: #fff; color: var(--dark-text); border-radius: 26px;
  padding: 44px 40px 40px; box-shadow: 0 30px 80px rgba(0,0,0,.5);
  border: 1px solid rgba(239,101,47,.5);
  max-height: 92vh; overflow-y: auto;
  animation: modalIn .22s cubic-bezier(.22,1,.36,1);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
.euland .modal__close {
  position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: #EEF0F3; color: #5A6A72; font-size: 22px; line-height: 1; cursor: pointer; transition: background .2s;
}
.euland .modal__close:hover { background: #E0E3E8; }
.euland .modal__title { font-size: 28px; font-weight: 800; text-align: center; }
.euland .modal__title .accent { color: var(--orange); }
.euland .modal__sub { text-align: center; color: #4B5563; font-size: 14.5px; margin-top: 12px; }
.euland .modal__box .form { margin-top: 24px; }
.euland { overflow: hidden; }
/* --- module info popup (VALUE block: клік по картинці модуля) --- */.euland .modal__box--module { max-width: 720px; text-align: left; }
.euland .modal__box--module .modal__title { text-align: left; padding-right: 40px; }
.euland .module-modal__img { display: block; width: 100%; height: auto; border-radius: 14px; margin: 18px 0; border: 1px solid #E4E7EC; }
.euland .module-modal__text p { color: #3C4450; line-height: 1.6; margin-bottom: 12px; }
.euland .module-modal__text p:last-child { margin-bottom: 0; }
.euland .module-modal__cta { display: flex; justify-content: center; margin-top: 22px; }
.euland .value__imgwrap img.is-clickable { cursor: zoom-in; }
/* --- intl-tel-input у світлій формі: кутики під pill-стиль інпутів --- */.euland .iti { width: 100%; display: block; }
.euland .form--light .iti input, .euland .form--light .iti input[type=tel] { width: 100%; }
.euland .form--light .iti--separate-dial-code .iti__selected-flag {
  background: transparent;
  border-radius: 32px 0 0 32px;
}
.euland .form--light .iti--separate-dial-code .iti__selected-flag:hover { background: rgba(0,0,0,.04); }
.euland .iti__flag-container { background: transparent; border: 0; }
/* --- responsive --- */@media (max-width: 1024px) {
.euland .hero__badges { margin-left: 0; margin-top: 20px; width: 100%; }

}
@media (max-width: 640px) {
.euland .modal__box { padding: 40px 22px 30px; border-radius: 20px; }
.euland .modal__title { font-size: 23px; }
.euland .badge-zoho { height: 50px; }
.euland .steps .container { max-width: 100%; }

}
/* ============ HOME: hero shot + AMONG OUR CRM ============ */.euland .hero__shot { display: flex; align-items: center; justify-content: center; }
.euland .hero__shot img { width: 100%; max-width: 640px; height: auto; }
.euland .among { padding: 54px 0; }
.euland .among__row { margin-top: 40px; display: flex; align-items: center; justify-content: center; gap: clamp(40px, 8vw, 96px); flex-wrap: wrap; }
.euland .among__row img { height: 44px; width: auto; opacity: .92; }
@media (max-width: 1024px) {
.euland .hero__shot { margin-top: 24px; }
.euland .hero__shot img { max-width: 520px; }

}
/* головна: замість мокапу пристроїв — той самий анімований вордмарк, що в hero кейсів
   (18.08.2026, просив Олександр). Розміри — від колонки, анімація описана в блоці .wm */.euland .hero__shot .hero__wmwrap { width: 100%; display: flex; justify-content: center; }
.euland .hero__shot .wm { width: 100%; max-width: 620px; }
@media (max-width: 900px) {
.euland .hero__shot .hero__wmwrap { display: none; }

}
@media (max-width: 640px) {
.euland .among__row { gap: 36px; }
.euland .among__row img { height: 34px; }

}
/* ============ ABOUT PAGE ============ */@media (max-width: 640px) {

}
/* ============ reveal animation (How we work) ============ */.euland .reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.euland .reveal--in { opacity: 1; transform: none; }
.euland .models__card { transition: transform .2s, border-color .2s, box-shadow .2s; }
.euland .models__card:hover { transform: translateY(-6px); border-color: var(--orange); box-shadow: 0 14px 34px rgba(239,101,47,.18); }
/* ============ hover: телефони/пошта (біле↔помаранчеве) ============ */.euland .contacts__row a { transition: color .2s; }
.euland .contacts__row a:hover { color: var(--orange); }
.euland .contacts__addr .mail { transition: color .2s; }
.euland .contacts__addr .mail:hover { color: var(--orange); }
/* помаранчеве → біле *//* біле → помаранчеве *//* ============ hero image bigger (home) ============ */.euland .hero__grid { grid-template-columns: minmax(0, 560px) 1fr; }
.euland .hero__shot img { max-width: 720px; }
/* ============ intl-tel-input на ВСІХ формах ============ */.euland .form .iti { width: 100%; display: block; }
.euland .form .iti input[type=tel] { text-align: left; }
.euland .form .iti--separate-dial-code .iti__selected-flag { background: transparent; border-radius: 32px 0 0 32px; }
.euland .form .iti--separate-dial-code .iti__selected-flag:hover { background: rgba(0,0,0,.05); }
/* ============ LEGAL PAGES ============ *//* ============ HOME decor: CRMIUM watermark + rings ============ */.euland .hero__intro { position: relative; }
.euland .hero__intro > * { position: relative; z-index: 1; }
.euland .among { position: relative; overflow: hidden; }
.euland .among .container { position: relative; z-index: 1; }
.euland .among__wm { position: absolute; right: 0; top: 52%; transform: translateY(-50%); width: 46%; max-width: 560px; opacity: .5; pointer-events: none; z-index: 0; }
.euland .among__row img { flex: 0 0 auto; }
/* лого систем — посилання на свою сторінку */.euland .among__link { flex: 0 0 auto; display: inline-flex; align-items: center; transition: transform .25s ease, opacity .25s ease; }
.euland .among__link:hover { transform: translateY(-3px); }
.euland .among__row .among__link img { transition: opacity .25s ease; }
.euland .among__row:hover .among__link:not(:hover) img { opacity: .55; }
/* декоративні кола (desktop-only), винесені вправо за картки */.euland .container { position: relative; }
.euland .deco-rings {
  position: absolute; z-index: 5; pointer-events: none;
  width: 340px; height: 346px;
  /* пульсація живе на самому блоці, обертання — на ::before: дві незалежні анімації,
     бо одна властивість transform не може анімуватись двічі */
  animation: ringPulse 4.4s ease-in-out infinite;
}
@keyframes ringPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.075); } }
/* сама графіка — в ::before, бо transform самого .deco-rings зайнятий позиціюванням.
   Центр дуг у картинці зсунутий вниз на ~3% → transform-origin 50% 53%, інакше «гуляє». */.euland .deco-rings::before {
  content: '';
  position: absolute; inset: 0;
  background: url('img/rings.webp') center / contain no-repeat;
  filter: brightness(1.7); opacity: .8;   /* світлі штрихи на темному фоні, приглушені на ~20% */
  transform-origin: 50% 53%;
  animation: ringSpin 10.4s linear infinite;
}
/* ⚠️ Саме обертання майже не читається: у в'юпорт потрапляє лише лівий сегмент кола,
   а концентричні дуги при повороті виглядають однаково (точки-маркери здебільшого
   за межами екрана). Тому в ті ж keyframes додано «дихання» масштабом — рух видно
   навіть на суцільній дузі. */@keyframes ringSpin { to { transform: rotate(360deg); } }
.euland .lead1, .euland .cta, .euland .cases { position: relative; }
.euland .lead1, .euland .cta, .euland .cases { overflow-x: clip; }
/* обрізати винос кола за правий край екрана (без гориз. скролу) *//* кола обох форм — одразу праворуч від картки/контенту (відступ 0). На всіх сторінках. *//* ⚠️ позиціювання по вертикалі — через margin-top (а НЕ transform), бо transform
   потрібен під анімацію пульсації. Висота фіксована 359px → -179px = «по центру». */.euland .lead1 .container > .deco-rings, .euland .cta .container > .deco-rings { width: 352px; height: 359px; top: 50%; right: -328px; }
.euland .cta   .container > .deco-rings { margin-top: -279px; }
/* нижня форма — по центру та ще на 100px вище */.euland .lead1 .container > .deco-rings { margin-top: -179px; }
/* верхня форма — по центру секції *//* кейси: коло того ж розміру (352) у ПРАВОМУ ВЕРХНЬОМУ куті секції (центр ~ на куті картки), повністю видиме */.euland .cases .container > .deco-rings { width: 352px; height: 359px; top: -180px; right: -152px; }
@media (max-width: 1280px) {
.euland .deco-rings { display: none; }

}
/* ============ contacts page: великий контурний напис CRMiUM над формою ============ */.euland .contacts-hero { padding: 70px 0 10px; overflow: hidden; }
.euland .contacts-hero__wm { display: block; width: 100%; height: auto; margin: 0; user-select: none; pointer-events: none; }
/* напис CRMiUM — та сама анімація, що на сторінці кейсу (CRM «малюється», iUM проявляється),
   але на всю ширину текстової секції */.euland .contacts-hero .wm { display: flex; align-items: flex-start; justify-content: center; gap: 1.3%; margin: 0 auto; }
.euland .contacts-hero .wm__crm { flex: 0 0 53.3%; }
.euland .contacts-hero .wm__ium { flex: 0 0 45.4%; font-size: 24cqw; line-height: .86; text-align: left; }
@media (max-width: 640px) {
.euland .contacts-hero { padding: 40px 0 0; }

}
/* consent → privacy link */.euland .form__note a { color: var(--orange); text-decoration: underline; }
.euland .form__note a:hover { color: var(--orange-h); }
@media (max-width: 900px) {
.euland .among__wm, .euland .lead1__rings { display: none; }

}
/* dial code темний на світлих інпутах (всі форми) */.euland .form .iti__selected-dial-code, .euland .form .iti__country-name { color: #33363E; }
/* ============ UNIFORM SECTION SPACING (equal gaps everywhere) ============ */.euland .why, .euland .lead1, .euland .clients, .euland .models, .euland .among, .euland .value, .euland .quiz, .euland .global, .euland .cases, .euland .awards, .euland .testi, .euland .faq, .euland .cta, .euland .pricing, .euland .solve, .euland .integr, .euland .expert, .euland .partners { padding-top: 90px; padding-bottom: 90px; }
.euland .hero { padding-bottom: 90px; }
.euland .steps { padding-top: 90px; padding-bottom: 90px; }
.euland .steps__head { padding-top: 0; padding-bottom: 44px; }
@media (max-width: 640px) {
.euland .why, .euland .lead1, .euland .clients, .euland .models, .euland .among, .euland .value, .euland .quiz, .euland .global, .euland .cases, .euland .awards, .euland .testi, .euland .faq, .euland .cta, .euland .steps, .euland .hero, .euland .pricing, .euland .solve, .euland .integr, .euland .expert, .euland .partners { padding-top: 56px; padding-bottom: 56px; }

}
/* рядок під VALUE: скільки ще застосунків є в системі */.euland .value__note { margin-top: 34px; text-align: center; color: #C7C9CE; font-size: 16px; line-height: 1.5; }
.euland .value__note b { color: var(--orange); font-weight: 800; }
@media (max-width: 640px) {
.euland .value__note { margin-top: 24px; font-size: 15px; }

}
/* ============ PRICING (zoho) — без підложки, між двома картковими блоками ============ */.euland .pricing { text-align: center; }
/* верт. відступи — у загальному правилі uniform spacing */.euland .pricing .sec-title { margin-bottom: 28px; }
.euland .pricing__lead { font-size: 28px; font-weight: 800; margin: 0 0 18px; }
.euland .pricing__num { color: var(--orange); font-size: 34px; }
.euland .pricing__text { max-width: 720px; margin: 0 auto 26px; color: #C7C9CE; line-height: 1.6; }
.euland .pricing__points { list-style: none; margin: 0 0 34px; padding: 0; display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; }
.euland .pricing__points li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.euland .pricing__cta { display: flex; justify-content: center; }
/* головна: системи + мінімальна ціна ліцензії */.euland .pricing__grid { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin: 6px 0 30px; }
.euland .pricing__sys { text-decoration: none; color: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 14px; border: 1px solid #3B3F49; border-radius: 16px; padding: 24px 26px 20px; min-width: 190px; }
.euland .pricing__sys img { height: 30px; width: auto; object-fit: contain; }
.euland .pricing__sysprice { color: #9A9DA6; font-size: 14px; white-space: nowrap; }
.euland .pricing__sysprice b { color: var(--orange); font-size: 18px; font-weight: 800; }
@media (max-width: 640px) {
.euland .pricing__lead { font-size: 22px; }
.euland .pricing__num { font-size: 26px; }
.euland .pricing__points { flex-direction: column; align-items: center; gap: 14px; }
.euland .pricing__sys { min-width: 44%; padding: 18px 14px 14px; }

}
/* ============ CASES PAGE (клон crmium.com/en/cases-eng) ============ */.euland .cases-hero { padding: 50px 0 24px; overflow: hidden; }
.euland .cases-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
/* ---- анімований вордмарк CRM / iUM (1:1 як на crmium.com) ---- */.euland .wm { position: relative; container-type: inline-size; }
.euland .wm__crm { display: block; width: 100%; height: auto; }
/* dash-pattern перезапускається на кожній літері → всі літери "малюються" разом, 4s.
   CSS-animation (не transition!) — стартує сама при кожному завантаженні, без залежності від JS */.euland .wm__crm path { stroke-dasharray: 0 6731; animation: wmDraw 4s ease-in-out both; }
@keyframes wmDraw { from { stroke-dasharray: 0 6731; } to { stroke-dasharray: 1400 6731; } }
.euland .wm__ium {
  font-weight: 800; letter-spacing: -.01em; line-height: .84; text-align: center;
  font-size: 9vw;             /* фолбек */
  font-size: 49cqw;           /* iUM трохи вужчий за CRM — як в оригіналі */
  background: linear-gradient(to bottom, #21242D 0, #181B21 50%, #15171C 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: wmFadeInUp 1.5s ease-out both; user-select: none;
}
@keyframes wmFadeInUp { 0% { opacity: 0; transform: translate3d(0, 60%, 0); } to { opacity: 1; transform: none; } }
/* (без prefers-reduced-motion виключення — оригінал crmium.com анімує завжди) */.euland .cases-hero__eyebrow { color: var(--orange); font-weight: 800; letter-spacing: .5px; font-size: 22px; }
.euland .cases-hero h1 { font-size: clamp(30px, 3.6vw, 52px); font-weight: 800; line-height: 1.05; text-transform: uppercase; margin: 8px 0 18px; }
.euland .cases-hero__txt p { color: #C7C9CE; max-width: 460px; margin-bottom: 26px; line-height: 1.55; }
.euland .cases-hero .btn { display: inline-flex; align-items: center; gap: 10px; }
.euland .cases-list { padding: 16px 0 80px; }
.euland .cases-list__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
/* body тягнеться на всю вільну висоту → кнопка притискається до низу картки
   і в рядку всі «More details» стоять на одній лінії (flex:1 на самому тексті
   не працював: він усередині .case-card__body, який не ріс) */.euland .tarrow-ic { flex: 0 0 auto; }
/* широка перша картка *//* форма-консультація *//* фото: по центру по вертикалі, помаранчеве коло — за фото і не вилазить *//* ---- анімація форми на /cases/ і сторінках кейсів (Олександр 2026-07-27) ----
   Механіка як у всіх блоків: main.js вішає `.run` при скролі, рух — у CSS.
   Послідовність: картка піднімається → помаранчеве коло розкривається →
   фото виїжджає → заголовок і поля форми проявляються по черзі. */@media (max-width: 1024px) {
.euland .cases-list__grid { grid-template-columns: repeat(2, 1fr); }

}
@media (max-width: 900px) {
.euland .cases-hero__grid { grid-template-columns: 1fr; }
.euland .cases-hero__wmwrap { display: none; }

}
@media (max-width: 620px) {
.euland .cases-list__grid { grid-template-columns: 1fr; }

}
/* ============ SINGLE CASE PAGE ============ *//* сторінка кейсу: напис в ОДИН рядок — CRM і iUM поруч (як на crmium.com/en/cases/<slug>) */@keyframes caseLabelIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 26px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
.euland .case-logo { padding: 18px 0 0; }
.euland .case-logo__row { display: flex; align-items: center; gap: 0; }
.euland .case-logo__line { flex: 1 1 auto; height: 1px; background: #3B3F49; }
.euland .case-logo__box { flex: 0 0 auto; border: 1px solid #3B3F49; border-radius: 14px; padding: 18px 34px; display: flex; align-items: center; justify-content: center; min-width: 220px; }
.euland .case-logo__box img { max-height: 40px; max-width: 200px; width: auto; height: auto; object-fit: contain; }
.euland .case-content { padding: 70px 0 90px; }
.euland .case-content__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 46px 64px; }
.euland .case-item__title { color: var(--orange); font-weight: 800; font-size: 19px; letter-spacing: .3px; margin-bottom: 14px; }
.euland .case-item p { color: #C7C9CE; line-height: 1.62; margin-bottom: 12px; }
.euland .case-item p:last-child { margin-bottom: 0; }
.euland .case-item ul { list-style: none; margin: 0; padding: 0; }
.euland .case-item li { position: relative; padding-left: 22px; color: #C7C9CE; line-height: 1.62; margin-bottom: 12px; }
.euland .case-item li:last-child { margin-bottom: 0; }
.euland .case-item li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.euland .case-content__cta { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 60px; }
.euland .case-content__cta .btn { display: inline-flex; align-items: center; gap: 10px; }
@media (max-width: 900px) {
.euland .case-content__grid { grid-template-columns: 1fr; gap: 34px; }
.euland .case-logo__line { display: none; }
.euland .case-logo__row { justify-content: center; }
.euland .case-content { padding: 46px 0 56px; }

}
/* ============================================================================
   SCROLL / HOVER АНІМАЦІЇ (мова анімацій crmium.com)
   Принцип той самий, що в темі crmium.com: JS вішає клас .run, коли блок
   доскролили у в'юпорт, а вся анімація живе в CSS (transition, не keyframes).
   ============================================================================ *//* ---- 1. лінія таймлайну «від аудиту до підтримки»: проростає злива направо ---- */@media (min-width: 1025px) {
.euland .steps__timeline::before { right: auto; width: 0; transition: width 1.8s ease-in-out; }
.euland .steps__timeline.run::before { width: 100%; }

}
@media (max-width: 1024px) {
/* на мобільному лінія вертикальна — тягнемо її вниз */.euland .steps__timeline::before { bottom: auto; height: 0; transition: height 1.8s ease-in-out; }
.euland .steps__timeline.run::before { height: 100%; }

}
/* точки спалахують по черзі — синхронно з лінією, що до них доходить */.euland .step__dot { transform: scale(0); transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.euland .steps__timeline.run .step__dot { transform: scale(1); }
.euland .steps__timeline.run .step:nth-child(1) .step__dot { transition-delay: .15s; }
.euland .steps__timeline.run .step:nth-child(2) .step__dot { transition-delay: .40s; }
.euland .steps__timeline.run .step:nth-child(3) .step__dot { transition-delay: .65s; }
.euland .steps__timeline.run .step:nth-child(4) .step__dot { transition-delay: .90s; }
.euland .steps__timeline.run .step:nth-child(5) .step__dot { transition-delay: 1.15s; }
.euland .steps__timeline.run .step:nth-child(6) .step__dot { transition-delay: 1.40s; }
.euland .steps__timeline.run .step:nth-child(7) .step__dot { transition-delay: 1.65s; }
/* ---- 1b. STEPS: штрихпунктирна рамка «проходить» по пунктах по черзі ----
   Мета — привернути увагу до головного блоку. Рамка з'являється навколо пункту,
   тримається ~1 с і гасне, разом із нею «пульсує» номер. Пункти йдуть послідовно
   (1 → 7) від моменту, коли блок доскролили. На hover рамка лишається постійно. */.euland .step__body { position: relative; }
.euland .step__body::before {
  content: '';
  position: absolute;
  inset: -12px -9px;          /* 9+9=18px < 22px gap між колонками — рамки не злипаються */
  border: 1px dashed var(--orange);
  border-radius: 14px;
  opacity: 0;
  pointer-events: none;
}
.euland .steps__timeline.run .step__body::before { animation: stepFrame 1.6s ease-out both; }
.euland .steps__timeline.run .step__num { animation: stepNum 1.6s ease-out both; }
@keyframes stepFrame {
  0%   { opacity: 0; transform: scale(.96); }
  16%  { opacity: 1; transform: scale(1); }
  66%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes stepNum {
  0%   { transform: scale(1); text-shadow: none; }
  16%  { transform: scale(1.55); text-shadow: 0 0 16px rgba(239, 101, 47, .75); }
  66%  { transform: scale(1.2);  text-shadow: 0 0 10px rgba(239, 101, 47, .45); }
  100% { transform: scale(1); text-shadow: none; }
}
.euland .step__num { display: inline-block; transform-origin: left center; }
.euland .steps__timeline.run .step:nth-child(1) .step__body::before, .euland .steps__timeline.run .step:nth-child(1) .step__num { animation-delay: .35s; }
.euland .steps__timeline.run .step:nth-child(2) .step__body::before, .euland .steps__timeline.run .step:nth-child(2) .step__num { animation-delay: .77s; }
.euland .steps__timeline.run .step:nth-child(3) .step__body::before, .euland .steps__timeline.run .step:nth-child(3) .step__num { animation-delay: 1.19s; }
.euland .steps__timeline.run .step:nth-child(4) .step__body::before, .euland .steps__timeline.run .step:nth-child(4) .step__num { animation-delay: 1.61s; }
.euland .steps__timeline.run .step:nth-child(5) .step__body::before, .euland .steps__timeline.run .step:nth-child(5) .step__num { animation-delay: 2.03s; }
.euland .steps__timeline.run .step:nth-child(6) .step__body::before, .euland .steps__timeline.run .step:nth-child(6) .step__num { animation-delay: 2.45s; }
.euland .steps__timeline.run .step:nth-child(7) .step__body::before, .euland .steps__timeline.run .step:nth-child(7) .step__num { animation-delay: 2.87s; }
/* навів мишкою — рамка стоїть, поки не прибереш */.euland .step__body:hover::before { animation: none !important; opacity: 1; transform: scale(1); }
/* ---- 1c. помаранчеві лінії під заголовками (WHY / HOW WE WORK): ростуть злива направо ----
   scaleX (а не width) — щоб бокс лінії лишався на місці (у HOW WE WORK він центрований),
   а заповнення йшло саме злива направо. */.euland .why__card h3::after, .euland .models__card h3::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.8s cubic-bezier(.22, .9, .3, 1);   /* вдвічі повільніше */
}
.euland .why.run .why__card h3::after, .euland .models.run .models__card h3::after { transform: scaleX(1); }
.euland .why.run .why__card:nth-child(1) h3::after { transition-delay: .1s; }
.euland .why.run .why__card:nth-child(2) h3::after { transition-delay: .22s; }
.euland .why.run .why__card:nth-child(3) h3::after { transition-delay: .34s; }
.euland .why.run .why__card:nth-child(4) h3::after { transition-delay: .46s; }
.euland .why.run .why__card:nth-child(5) h3::after { transition-delay: .58s; }
.euland .why.run .why__card:nth-child(6) h3::after { transition-delay: .70s; }
.euland .models.run .models__card:nth-child(1) h3::after { transition-delay: .12s; }
.euland .models.run .models__card:nth-child(2) h3::after { transition-delay: .28s; }
.euland .models.run .models__card:nth-child(3) h3::after { transition-delay: .44s; }
/* ---- 2. блок відгуків: значок лапок (quotes.webp з crmium.com) — у правому верхньому
   куті КАРТКИ (спершу ставив за заголовком секції, Олександр попросив у картку),
   стилі самого значка — у .tcard__quote вище *//* ---- 3. hover на картках: рамка стає помаранчевою і по ній біжить світло ---- */@property --brd-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.euland .pricing__sys, .euland .tcard {
  position: relative;
  isolation: isolate;
  transition: border-color .3s ease, transform .3s ease, background-color .3s ease;
}
.euland .pricing__sys:hover, .euland .tcard:hover {
  /* базова рамка лише підсвічується — щоб було видно, як по ній біжить світло */
  border-color: rgba(239, 101, 47, .32);
  transform: translateY(-5px);
  /* сяйво за рамкою — як у .br-review на /ecommerce/ */
  box-shadow: 0 14px 34px rgba(239, 101, 47, .2);
}
/* «біжуча» рамка: конічний градієнт, обрізаний маскою до кільця в 1px */.euland .pricing__sys::after, .euland .tcard::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.6px;
  background: conic-gradient(from var(--brd-a),
              rgba(239, 101, 47, 0) 0 55%, rgba(239, 101, 47, .55) 68%,
              #F79463 76%, var(--orange) 84%, rgba(239, 101, 47, 0) 96%);
  filter: drop-shadow(0 0 6px rgba(239, 101, 47, .55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.euland .pricing__sys:hover::after, .euland .tcard:hover::after { opacity: 1; animation: brdRun 2s linear infinite; }
@keyframes brdRun { to { --brd-a: 360deg; } }
/* ---- 4. нагороди: проявляються по черзі при скролі + оживають на hover ---- */.euland .award {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease-out, transform .7s cubic-bezier(.22, .9, .3, 1);
}
.euland .awards.run .award { opacity: 1; transform: none; }
.euland .awards.run .award:nth-child(1) { transition-delay: .05s; }
.euland .awards.run .award:nth-child(2) { transition-delay: .17s; }
.euland .awards.run .award:nth-child(3) { transition-delay: .29s; }
.euland .awards.run .award:nth-child(4) { transition-delay: .41s; }
.euland .awards.run .award:nth-child(5) { transition-delay: .53s; }
.euland .awards.run .award:nth-child(6) { transition-delay: .65s; }
.euland .award__circle img { transition: transform .45s cubic-bezier(.22, .9, .3, 1), filter .45s ease; }
.euland .award:hover .award__circle img { transform: scale(1.07); filter: drop-shadow(0 0 16px rgba(239, 101, 47, .38)); }
.euland .award p { transition: color .3s ease; }
.euland .award:hover p { color: var(--orange); }
/* ---- 4. картка кейсу: рамка навколо лого стає помаранчевою ---- *//* ---- 4b. картки-блоки (форми + «From integration to business value»): сяйво на hover ---- */.euland .lead1__card, .euland .cta__card, .euland .value__card {
  transition: border-color .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s cubic-bezier(.22, 1, .36, 1);
}
.euland .lead1__card:hover, .euland .value__card:hover { border-color: rgba(239, 101, 47, .9); }
.euland .lead1__card:hover { box-shadow: 0 0 34px rgba(239, 101, 47, .3), 0 0 90px rgba(239, 101, 47, .14); }
.euland .value__card:hover { box-shadow: 0 0 40px rgba(239, 101, 47, .55), 0 0 110px rgba(239, 101, 47, .24); }
.euland .cta__card:hover { box-shadow: 0 0 40px rgba(239, 101, 47, .6), 0 0 110px rgba(239, 101, 47, .26); }
/* ---- 4c. сторінка /about/ ---- *//* hero: заголовок і лід проявляються при завантаженні */@keyframes aboutIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
/* цифри: картки виїжджають по черзі (числа доганяє JS-лічильник) *//* ⚠️ селектор із .about__stats.run — інакше правило появи (.about__stats.run .about__stat
   { transform: none }) специфічніше за :hover і підйом не працює *//* фото команди: проявляється зі скролом, на hover сяйво сильніше *//* історія: абзаци по черзі *//* ---- 5. підсвітка списків: пункти прайсу і країни ---- */.euland .pricing__points li, .euland .global__countries li { transition: color .25s ease; cursor: default; }
.euland .pricing__points li:hover, .euland .global__countries li:hover { color: var(--orange); }
.euland .gdot { transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s ease; }
.euland .pricing__points li:hover .gdot, .euland .global__countries li:hover .gdot {
  transform: scale(1.5);
  box-shadow: 0 0 10px 2px rgba(239, 101, 47, .55);
}
/* ---- 6. кнопки/стрілки/бейджі: легке збільшення на hover ---- */.euland .pill, .euland .tarrow, .euland .faq__q, .euland .badge-partner { transition: all .25s ease; }
.euland .pill:hover { transform: scale(1.07); }
.euland .tarrow:hover { transform: scale(1.1); }
/* стрілки по боках карусельок уже мають transform для позиціювання — доповнюємо, а не перебиваємо */.euland .tarrow--sprev:hover { transform: translate(-50%, -50%) scale(1.1); }
.euland .tarrow--snext:hover { transform: translate(50%, -50%) scale(1.1); }
.euland .badge-partner { display: inline-flex; border-radius: 10px; }
.euland .badge-partner:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 10px 24px rgba(239, 101, 47, .25); }
.euland .badge-zoho { transition: filter .25s ease; }
.euland .badge-partner:hover .badge-zoho { filter: brightness(1.12); }
/* ⚠️ БЛОК prefers-reduced-motion СВІДОМО ПРИБРАНО (2026-07-26).
   Тут був @media (prefers-reduced-motion: reduce), який гасив bounce кнопок,
   пульсацію кіл (обертання сповільнював до 90s) і підйом карток. Якщо у Windows
   вимкнені «Ефекти анімації» (Спеціальні можливості → Візуальні ефекти), браузер
   віддає reduce — і сайт виглядав СТАТИЧНИМ саме так, як описував Олександр:
   «кнопки не змінюються» + «коло крутиться так само повільно».
   Рішення власника: анімації — фірмова риса сайту, показувати їх усім.
   Якщо колись вертати цей медіазапит — попередити, що частина ефектів зникне. *//* ============================================================================
   ІНДУСТРІЙНІ ЛЕНДИНГИ (шаблон під Google Ads)
   Наскрізні блоки беруться з головної; відрізняються: hero, болі, рішення,
   сервіси-інтеграції, експерт, партнери. Чергування фонів: болі (без підложки)
   → рішення (підложка) → сервіси (без підложки) → форма (підложка) …
   ============================================================================ *//* ---- нагороди-стрічка одразу під hero ---- *//* низ 90px — щоб проміжок до наступної секції був такий самий, як між усіма іншими
   (Олександр 2026-07-27: «між хіро і першим блоком менша відстань, постав як кругом»).
   Правило стоїть НИЖЧЕ uniform-spacing блоку, тому мобільний 56px дублюємо тут. */.euland .trustbar { padding: 16px 0 90px; }
@media (max-width: 640px) {
.euland .trustbar { padding-bottom: 56px; }

}
.euland .trustbar__row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 18px 24px;
  border: 1px solid var(--line); border-radius: 18px;
  background: rgba(255, 255, 255, .015);
  padding: 14px 28px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.euland .trustbar__row:hover { border-color: rgba(239, 101, 47, .45); box-shadow: 0 12px 30px rgba(239, 101, 47, .12); }
/* бейджі — БЕЗ білих плиток, як .br-awards на /ecommerce/ (у картинок свій фон) */.euland .trustbar__item {
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s ease-out, transform .7s cubic-bezier(.22, .9, .3, 1),
              box-shadow .3s ease;
}
.euland .trustbar.run .trustbar__item { opacity: 1; transform: none; }
.euland .trustbar.run .trustbar__item:nth-child(1) { transition-delay: .05s; }
.euland .trustbar.run .trustbar__item:nth-child(2) { transition-delay: .16s; }
.euland .trustbar.run .trustbar__item:nth-child(3) { transition-delay: .27s; }
.euland .trustbar.run .trustbar__item:nth-child(4) { transition-delay: .38s; }
.euland .trustbar.run .trustbar__item:nth-child(5) { transition-delay: .49s; }
.euland .trustbar__item:hover { box-shadow: 0 10px 26px rgba(239, 101, 47, .28); }
.euland .trustbar__item img { height: 56px; width: auto; display: block; border-radius: 10px; }
.euland .trustbar__item--wide img { height: 48px; }
.euland .trustbar__item--clutch { background: #fff; border-radius: 10px; padding: 9px 18px; }
@media (max-width: 640px) {
.euland .trustbar__row { gap: 16px 22px; padding: 14px 18px; justify-content: center; }
.euland .trustbar__item img { height: 46px; }
.euland .trustbar__item--wide img { height: 40px; }

}
/* ---- болі: та сама сітка, що WHY, + мітка категорії ---- */.euland .why__tag {
  display: block; margin-bottom: 8px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange);
}
.euland .why__note { margin-top: 56px; text-align: center; font-size: 17px; color: #C7C9CE; }
.euland .why__note b { color: #fff; font-weight: 700; }
/* ---- рішення: велика підложка з сіткою карток + цифри-докази ---- */.euland .solve__card {
  border-radius: 32px;
  padding: 56px 48px 48px;
  background: linear-gradient(180deg, #191B21 0%, #15171C 100%);
  border: 1px solid rgba(239, 101, 47, .4);
  box-shadow: var(--glow);
  transition: border-color .35s ease, box-shadow .35s ease;
}
.euland .solve__card:hover {
  border-color: rgba(239, 101, 47, .9);
  box-shadow: 0 0 40px rgba(239, 101, 47, .5), 0 0 110px rgba(239, 101, 47, .22);
}
.euland .solve__grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.euland .solve__item {
  border: 1px solid var(--line); border-radius: 18px;
  padding: 26px 24px 28px;
  background: rgba(255, 255, 255, .02);
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s ease-out, transform .7s cubic-bezier(.22, .9, .3, 1),
              border-color .3s ease, box-shadow .3s ease;
}
.euland .solve.run .solve__item { opacity: 1; transform: none; }
.euland .solve.run .solve__item:nth-child(1) { transition-delay: .05s; }
.euland .solve.run .solve__item:nth-child(2) { transition-delay: .14s; }
.euland .solve.run .solve__item:nth-child(3) { transition-delay: .23s; }
.euland .solve.run .solve__item:nth-child(4) { transition-delay: .32s; }
.euland .solve.run .solve__item:nth-child(5) { transition-delay: .41s; }
.euland .solve.run .solve__item:nth-child(6) { transition-delay: .50s; }
.euland .solve__item:hover, .euland .solve.run .solve__item:hover {
  border-color: rgba(239, 101, 47, .6);
  box-shadow: 0 12px 30px rgba(239, 101, 47, .16);
  transform: translateY(-5px);
}
.euland .solve__item--ai { border-color: rgba(239, 101, 47, .45); background: rgba(239, 101, 47, .06); }
.euland .solve__tag {
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--orange);
}
.euland .solve__item h3 { font-size: 20px; font-weight: 700; }
/* колір як був (білий), шрифт трохи більший */.euland .solve__item h3::after {
  content: ""; display: block; width: 74px; height: 2px; margin-top: 10px;
  background: var(--orange);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.8s cubic-bezier(.22, .9, .3, 1);
}
.euland .solve.run .solve__item h3::after { transform: scaleX(1); }
.euland .solve__item p { margin-top: 14px; color: var(--grey); font-size: 15px; line-height: 1.55; }
.euland .solve__proof {
  margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center;
}
.euland .solve__num { font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; color: var(--orange); line-height: 1; }
.euland .solve__proof p { margin-top: 12px; color: #C7C9CE; font-size: 15px; line-height: 1.5; }
.euland .solve__clients { margin-top: 30px; text-align: center; color: #C7C9CE; font-size: 15.5px; line-height: 1.6; }
.euland .solve__clients b { color: #fff; }
@media (max-width: 1024px) {
.euland .solve__grid { grid-template-columns: repeat(2, 1fr); }

}
@media (max-width: 640px) {
.euland .solve__card { padding: 34px 20px 30px; border-radius: 24px; }
.euland .solve__grid, .euland .solve__proof { grid-template-columns: 1fr; }

}
/* ---- сервіси-інтеграції: групи логотипів ---- */.euland .integr__grid { margin-top: 52px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.euland .integr__group {
  border: 1px solid var(--line); border-radius: 20px; padding: 24px 20px 26px;
  background: rgba(255, 255, 255, .015);
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s ease-out, transform .7s cubic-bezier(.22, .9, .3, 1),
              border-color .3s ease, box-shadow .3s ease;
}
.euland .integr.run .integr__group { opacity: 1; transform: none; }
.euland .integr.run .integr__group:nth-child(1) { transition-delay: .06s; }
.euland .integr.run .integr__group:nth-child(2) { transition-delay: .18s; }
.euland .integr.run .integr__group:nth-child(3) { transition-delay: .30s; }
.euland .integr.run .integr__group:nth-child(4) { transition-delay: .42s; }
.euland .integr.run .integr__group:nth-child(5) { transition-delay: .54s; }
.euland .integr__group:hover, .euland .integr.run .integr__group:hover {
  border-color: rgba(239, 101, 47, .55);
  box-shadow: 0 12px 30px rgba(239, 101, 47, .16);
  transform: translateY(-4px);
}
.euland .integr__title {
  text-align: center; font-size: 14px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #fff;
}
.euland .integr__title::after {
  content: ""; display: block; width: 46px; height: 2px; margin: 10px auto 0;
  background: var(--orange);
  transform: scaleX(0); transition: transform 1.4s cubic-bezier(.22, .9, .3, 1);
}
.euland .integr.run .integr__title::after { transform: scaleX(1); }
.euland .integr__logos { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.euland .integr__logo {
  display: flex; align-items: center; justify-content: center;
  height: 58px; padding: 10px 12px;
  background: #fff; border-radius: 12px;
  transition: transform .3s cubic-bezier(.34, 1.4, .64, 1), box-shadow .3s ease;
}
.euland .integr__logo img { max-height: 30px; max-width: 100%; width: auto; object-fit: contain; }
.euland .integr__logo:hover { transform: scale(1.07); box-shadow: 0 8px 22px rgba(239, 101, 47, .3); }
.euland .integr__group--wide { grid-column: 1 / -1; }
.euland .integr__group--wide .integr__logos { grid-template-columns: repeat(6, 1fr); }
.euland .integr__note { margin-top: 30px; text-align: center; color: #C7C9CE; font-size: 16px; }
.euland .integr__note b { color: var(--orange); font-weight: 800; }
@media (max-width: 1024px) {
.euland .integr__grid { grid-template-columns: repeat(2, 1fr); }
.euland .integr__group--wide .integr__logos { grid-template-columns: repeat(3, 1fr); }

}
@media (max-width: 640px) {
.euland .integr__grid { grid-template-columns: 1fr; }
.euland .integr__group--wide .integr__logos { grid-template-columns: 1fr 1fr; }

}
/* ---- експерт ---- */.euland .expert .sec-title { margin-bottom: 52px; }
/* заголовок стояв надто близько до картки */.euland .expert__card {
  display: grid; grid-template-columns: 320px 1fr; gap: 52px; align-items: center;
  border: 1px solid var(--line); border-radius: 28px; padding: 56px 52px;
  min-height: 470px;
  background: rgba(255, 255, 255, .015);
  transition: border-color .35s ease, box-shadow .35s ease;
}
.euland .expert__card:hover { border-color: rgba(239, 101, 47, .6); box-shadow: 0 14px 40px rgba(239, 101, 47, .18); }
.euland .expert__photo { width: 100%; height: auto; border-radius: 22px; display: block; }
.euland .expert__name { font-size: 26px; font-weight: 800; }
.euland .expert__role { margin-top: 6px; color: var(--orange); font-weight: 700; font-size: 15px; }
/* цитата — на власній підложці, з лапками, що проявляються при скролі */.euland .expert__quote {
  position: relative;
  margin-top: 26px;
  padding: 26px 30px 26px 28px;
  border-left: 2px solid var(--orange);
  border-radius: 0 16px 16px 0;
  background: linear-gradient(90deg, rgba(239, 101, 47, .09) 0%, rgba(255, 255, 255, .03) 100%);
  overflow: hidden;
}
.euland .expert__quote p { font-size: 20px; line-height: 1.5; font-weight: 600; position: relative; z-index: 1; max-width: 88%; }
.euland .expert__mark {
  position: absolute; top: 16px; right: 20px;
  width: 37px; height: auto; z-index: 0;   /* удвічі менші лапки */
  filter: brightness(1.75);
  opacity: 0; transform: translateY(16px) scale(.92);
  transition: opacity .9s ease-out, transform .9s cubic-bezier(.22, .9, .3, 1), filter .35s ease;
  pointer-events: none; user-select: none;
}
.euland .expert.run .expert__mark { opacity: 1; transform: none; }
.euland .expert__card:hover .expert__mark { filter: brightness(2.4); transform: scale(1.08) rotate(-5deg); }
.euland .expert__bio { margin-top: 22px; color: var(--grey); line-height: 1.6; }
@media (max-width: 900px) {
.euland .expert__card { grid-template-columns: 1fr; gap: 26px; padding: 30px 22px; text-align: center; min-height: 0; }
.euland .expert__photo { max-width: 240px; margin: 0 auto; }
.euland .expert__quote { text-align: left; padding: 22px 22px 22px 20px; }
.euland .expert__quote p { max-width: 100%; font-size: 17.5px; }
.euland .expert__mark { width: 28px; top: 12px; right: 12px; }

}
/* ---- партнерства/сертифікати (замість awards на індустрійних) ---- */.euland .partners__grid {
  margin-top: 52px;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: stretch;
}
.euland .partners__list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.euland .partners__item {
  border: 1px solid var(--line); border-radius: 18px; padding: 26px 22px;
  background: rgba(255, 255, 255, .015);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  opacity: 0; transform: translateY(22px);
  transition: opacity .7s ease-out, transform .7s cubic-bezier(.22, .9, .3, 1),
              border-color .3s ease, box-shadow .3s ease;
}
.euland .partners.run .partners__item { opacity: 1; transform: none; }
.euland .partners.run .partners__item:nth-child(1) { transition-delay: .06s; }
.euland .partners.run .partners__item:nth-child(2) { transition-delay: .17s; }
.euland .partners.run .partners__item:nth-child(3) { transition-delay: .28s; }
.euland .partners.run .partners__item:nth-child(4) { transition-delay: .39s; }
.euland .partners__item:hover, .euland .partners.run .partners__item:hover {
  border-color: rgba(239, 101, 47, .6); box-shadow: 0 12px 30px rgba(239, 101, 47, .16);
  transform: translateY(-5px);
}
.euland .partners__item img { height: 34px; width: auto; object-fit: contain; }
.euland .partners__name { font-size: 22px; font-weight: 800; }
.euland .partners__status { color: var(--orange); font-weight: 700; font-size: 14px; }
.euland .partners__cert {
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  background: #fff; display: flex; align-items: center; justify-content: center; padding: 18px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.euland .partners__cert:hover { border-color: rgba(239, 101, 47, .6); box-shadow: 0 14px 40px rgba(239, 101, 47, .2); }
.euland .partners__cert img { width: 100%; height: auto; border-radius: 8px; }
@media (max-width: 900px) {
.euland .partners__grid { grid-template-columns: 1fr; }
.euland .partners__list { grid-template-columns: 1fr 1fr; }

}
/* ---- меню «Solution»: мега-дропдаун з розділами + мобільний акордеон ---- */@media (max-width: 1024px) {
/* мобільне меню: «Solution» — акордеон, всередині розділи списками *//* мобільне меню — усе по лівому краю (було: верхній рівень по центру) */
}
/* ---- HERO індустрійних лендингів: велика темна картка (як на /ecommerce/),
        праворуч замість картинки — анімований напис ---- */.euland .hero--ind { padding-top: 34px; padding-bottom: 0; }
.euland .ihero {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 32px;
  padding: 56px 56px 52px;
  background: linear-gradient(180deg, #191B21 0%, #15171C 100%);
  overflow: hidden;
  /* помаранчеве — лише сяйво НАВКОЛО картки, без градієнта всередині */
  box-shadow: 0 0 34px rgba(239, 101, 47, .18), 0 0 100px rgba(239, 101, 47, .08);
  transition: border-color .35s ease, box-shadow .35s ease;
}
.euland .ihero:hover {
  border-color: rgba(239, 101, 47, .55);
  box-shadow: 0 0 44px rgba(239, 101, 47, .34), 0 0 120px rgba(239, 101, 47, .16);
}
.euland .ihero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 30px; align-items: center; }
.euland .ihero h1 { font-size: clamp(32px, 4.4vw, 58px); font-weight: 800; line-height: 1.08; letter-spacing: -.5px; }
.euland .ihero h1 .accent { color: var(--orange); }
.euland .ihero__bullets { margin-top: 30px; display: grid; gap: 12px; }
.euland .ihero__bullets li { display: flex; align-items: center; gap: 12px; font-size: 17px; white-space: nowrap; }
.euland .ihero__cta { margin-top: 36px; }
.euland .ihero__wm { display: flex; justify-content: flex-end; user-select: none; pointer-events: none; }
/* ⚠️ 2026-07-28 написи стали INLINE-SVG (анімація не грала з кеша, коли був <img>) —
   тому селектори мусять покривати і img, і svg. Див. server/inline_wordmarks.py */.euland .ihero__wm img, .euland .ihero__wm > svg { width: 100%; max-width: 520px; height: auto; }
/* метрики під hero (перша картка — помаранчева, як на /ecommerce/) */.euland .imetrics {
  margin-top: 16px;
  display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 16px;
}
.euland .imetrics__card {
  border: 1px solid var(--line); border-radius: 20px; padding: 26px 24px;
  background: rgba(255, 255, 255, .015);
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s ease-out, transform .7s cubic-bezier(.22, .9, .3, 1),
              border-color .3s ease, box-shadow .3s ease;
}
.euland .imetrics.run .imetrics__card { opacity: 1; transform: none; }
.euland .imetrics.run .imetrics__card:nth-child(1) { transition-delay: .04s; }
.euland .imetrics.run .imetrics__card:nth-child(2) { transition-delay: .14s; }
.euland .imetrics.run .imetrics__card:nth-child(3) { transition-delay: .24s; }
.euland .imetrics.run .imetrics__card:nth-child(4) { transition-delay: .34s; }
.euland .imetrics.run .imetrics__card:nth-child(5) { transition-delay: .44s; }
.euland .imetrics__card:hover, .euland .imetrics.run .imetrics__card:hover {
  border-color: rgba(239, 101, 47, .55);
  box-shadow: 0 12px 30px rgba(239, 101, 47, .16);
  transform: translateY(-5px);
}
.euland .imetrics__card--main {
  background: var(--orange); border-color: var(--orange);
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
}
.euland .imetrics__card--main:hover, .euland .imetrics.run .imetrics__card--main:hover {
  border-color: var(--orange); box-shadow: 0 14px 34px rgba(239, 101, 47, .45);
}
.euland .imetrics__tag {
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .75);
}
.euland .imetrics__h { font-size: 20px; font-weight: 800; line-height: 1.2; color: #fff; }
.euland .imetrics__num { font-size: clamp(30px, 3.4vw, 42px); font-weight: 800; line-height: 1; }
.euland .imetrics__num span { color: var(--orange); }
.euland .imetrics__l { margin-top: 12px; color: var(--grey-2); font-size: 14.5px; line-height: 1.4; }
@media (max-width: 1024px) {
.euland .ihero { padding: 34px 24px 30px; border-radius: 24px; }
.euland .ihero__grid { grid-template-columns: 1fr; }
.euland .ihero__wm { justify-content: center; margin-top: 6px; }
.euland .ihero__wm img, .euland .ihero__wm > svg { max-width: 420px; }
.euland .ihero__bullets li { white-space: normal; }
.euland .imetrics { grid-template-columns: 1fr 1fr; }
.euland .imetrics__card--main { grid-column: 1 / -1; }

}
@media (max-width: 640px) {
.euland .ihero h1 { font-size: 30px; }
.euland .ihero__bullets li { font-size: 15.5px; }
.euland .imetrics__card { padding: 20px 18px; }

}
/* ============ СЛУЖБОВІ СТОРІНКИ: 404 і thank-you (build_simple.py) ============ */.euland .msgpage { padding: 96px 0 110px; }
.euland .msgpage__card {
  max-width: 820px; margin: 0 auto; text-align: center;
  border: 1px solid var(--line); border-radius: 32px;
  padding: 64px 56px 60px;
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(239, 101, 47, .14) 0%, rgba(239, 101, 47, 0) 60%),
    linear-gradient(180deg, #191B21 0%, #15171C 100%);
  transition: border-color .35s ease, box-shadow .35s ease;
}
.euland .msgpage__card:hover { border-color: rgba(239, 101, 47, .5); box-shadow: 0 0 44px rgba(239, 101, 47, .16); }
/* цифра 404 — той самий прийом, що в hero-написах: градієнт по тексту */.euland .msgpage__code {
  font-size: clamp(96px, 15vw, 190px); font-weight: 800; line-height: .9; letter-spacing: -2px;
  background: linear-gradient(180deg, #3B4049 0%, #23262E 55%, #191B21 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: msgIn .9s ease-out both;
}
.euland .msgpage__ico {
  width: 84px; height: 84px; margin: 0 auto 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; color: #fff; background: var(--orange);
  box-shadow: 0 14px 40px rgba(239, 101, 47, .45);
  animation: msgPop .7s cubic-bezier(.22, 1.4, .5, 1) both;
}
.euland .msgpage h1 { margin-top: 18px; font-size: clamp(28px, 3.6vw, 44px); font-weight: 800; line-height: 1.12; }
.euland .msgpage__sub { margin: 20px auto 0; max-width: 620px; color: var(--grey-2); font-size: 17px; line-height: 1.55; }
.euland .msgpage__timer { margin-top: 26px; color: #8A9099; font-size: 15px; }
.euland .msgpage__timer b { color: var(--orange); font-weight: 800; }
.euland .msgpage__list { margin: 30px auto 0; max-width: 560px; display: grid; gap: 12px; text-align: left; }
.euland .msgpage__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; line-height: 1.5; }
.euland .msgpage__list .gdot { margin-top: 8px; flex: 0 0 auto; }
.euland .msgpage__cta {
  margin-top: 38px; display: flex; align-items: center; justify-content: center;
  gap: 14px 30px; flex-wrap: wrap;
}
.euland .msgpage__link { color: var(--grey-2); font-weight: 700; font-size: 15px; transition: color .25s ease; }
.euland .msgpage__link:hover { color: var(--orange); }
@keyframes msgIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes msgPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
.euland .msgpage { padding: 56px 0 64px; }
.euland .msgpage__card { padding: 40px 22px 36px; border-radius: 24px; }
.euland .msgpage__cta { gap: 12px 20px; }

}
/* ============ ВЛАСНИЙ КВІЗ (замінив iframe Zoho Forms) ============ *//* Живе у світлій картці .quiz__card, тому кольори тут «денні». */.euland .qz { margin-top: 30px; text-align: left; animation: qzIn .45s ease-out both; }
@keyframes qzIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.euland .qz__top { display: flex; align-items: center; gap: 18px; }
.euland .qz__count { font-size: 13px; font-weight: 700; color: #6B7280; white-space: nowrap; }
.euland .qz__est { color: #9AA0A8; font-weight: 600; }
.euland .qz__bar { flex: 1 1 auto; height: 6px; background: #ECEDF0; border-radius: 4px; overflow: hidden; }
.euland .qz__bar i { display: block; height: 100%; background: var(--orange); border-radius: 4px;
             transition: width .45s cubic-bezier(.22, .9, .3, 1); }
.euland .qz__q { margin-top: 22px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; color: var(--dark-text); line-height: 1.25; }
.euland .qz__multi { display: inline-block; margin-left: 8px; vertical-align: middle; font-size: 11px; font-weight: 800;
             letter-spacing: .08em; text-transform: uppercase; color: var(--orange);
             background: rgba(239, 101, 47, .1); border-radius: 20px; padding: 4px 10px; }
.euland .qz__hint { margin-top: 8px; color: #6B7280; font-size: 15px; }
.euland .qz__opts { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.euland .qz__opt {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 15px 18px; border: 1px solid #E3E5E9; border-radius: 14px; background: #fff;
  font: inherit; font-size: 15.5px; font-weight: 600; color: #23262E; cursor: pointer;
  transition: border-color .2s ease, box-shadow .25s ease, transform .25s cubic-bezier(.34, 1.4, .64, 1), background .2s ease;
}
.euland .qz__opt:hover { border-color: rgba(239, 101, 47, .6); box-shadow: 0 8px 20px rgba(239, 101, 47, .12); transform: translateY(-2px); }
.euland .qz__opt .qz__mark {
  flex: 0 0 auto; width: 20px; height: 20px; border: 2px solid #C9CDD4; border-radius: 50%;
  position: relative; transition: border-color .2s ease, background .2s ease;
}
.euland .qz__opt.is-on { border-color: var(--orange); background: rgba(239, 101, 47, .06); }
.euland .qz__opt.is-on .qz__mark { border-color: var(--orange); background: var(--orange); }
.euland .qz__opt.is-on .qz__mark::after {
  content: ''; position: absolute; left: 5px; top: 2px; width: 5px; height: 10px;
  border: 2px solid #fff; border-top: 0; border-left: 0; transform: rotate(38deg);
}
.euland .qz__text {
  margin-top: 20px; width: 100%; padding: 15px 18px; border: 1px solid #E3E5E9; border-radius: 14px;
  font: inherit; font-size: 15.5px; color: #23262E; resize: vertical; background: #fff;
}
.euland .qz__text:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(239, 101, 47, .12); }
.euland .qz__form { margin-top: 22px; display: grid; gap: 12px; max-width: 520px; }
.euland .qz__form input[type="text"], .euland .qz__form input[type="email"], .euland .qz__form input[type="tel"] {
  padding: 14px 18px; border: 1px solid #E3E5E9; border-radius: 14px; font: inherit; font-size: 15.5px; color: #23262E;
}
.euland .qz__form input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(239, 101, 47, .12); }
.euland .qz__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: #6B7280; line-height: 1.45; }
.euland .qz__consent input { margin-top: 3px; accent-color: var(--orange); }
.euland .qz__consent a { color: var(--orange); font-weight: 700; }
.euland .qz__submit { margin-top: 6px; justify-self: start; }
.euland .qz__err { color: #C0392B; font-size: 13.5px; font-weight: 600; }
.euland .qz__nav { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.euland .qz__two { display: flex; align-items: center; gap: 16px; }
.euland .qz__back, .euland .qz__skip {
  border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 700; color: #6B7280;
  cursor: pointer; padding: 8px 2px; transition: color .2s ease;
}
.euland .qz__back:hover, .euland .qz__skip:hover { color: var(--orange); }
.euland .qz__next[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
@media (max-width: 640px) {
.euland .quiz__card { padding: 32px 20px; }
.euland .qz__opts { grid-template-columns: 1fr; }
.euland .qz__q { font-size: 20px; }
.euland .qz__est { display: none; }

}
/* ============ EXIT-INTENT ПОПАП (js/exit.js) ============ */.euland .xp__wrap {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(10, 11, 14, .72); backdrop-filter: blur(3px);
  animation: xpFade .25s ease-out both;
}
@keyframes xpFade { from { opacity: 0; } to { opacity: 1; } }
.euland .xp {
  position: relative; width: 100%; max-width: 620px;
  border: 1px solid rgba(239, 101, 47, .45); border-radius: 26px; padding: 40px 40px 34px;
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(239, 101, 47, .16) 0%, rgba(239, 101, 47, 0) 60%),
    linear-gradient(180deg, #191B21 0%, #15171C 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 50px rgba(239, 101, 47, .12);
  animation: xpIn .4s cubic-bezier(.22, 1.2, .4, 1) both;
}
@keyframes xpIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.euland .xp__close {
  position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .06); color: #C7C9CE; font-size: 22px; line-height: 1; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.euland .xp__close:hover { background: rgba(239, 101, 47, .2); color: #fff; }
.euland .xp__eyebrow {
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--orange);
}
.euland .xp h3 { margin-top: 10px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; line-height: 1.18; }
.euland .xp__sub { margin-top: 12px; color: var(--grey-2); font-size: 15.5px; line-height: 1.5; }
.euland .xp__sub b { color: #E8B4A0; font-weight: 700; }
.euland .xp__tiles { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.euland .xp__tile {
  padding: 14px 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, .02);
  color: #fff; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
  transition: border-color .2s ease, box-shadow .25s ease, transform .25s cubic-bezier(.34, 1.4, .64, 1), background .2s ease;
}
.euland .xp__tile:hover {
  border-color: rgba(239, 101, 47, .7); background: rgba(239, 101, 47, .08);
  box-shadow: 0 10px 26px rgba(239, 101, 47, .18); transform: translateY(-3px);
}
.euland .xp__or { margin: 20px 0 4px; display: flex; align-items: center; gap: 14px; color: #6E747D; font-size: 13px; }
.euland .xp__or::before, .euland .xp__or::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line); }
.euland .xp__quiz {
  width: 100%; padding: 13px 16px; border: 1px dashed rgba(239, 101, 47, .5); border-radius: 13px;
  background: none; color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.euland .xp__quiz:hover { background: rgba(239, 101, 47, .1); border-color: var(--orange); }
.euland .xp__form { margin-top: 22px; display: grid; gap: 12px; }
.euland .xp__form input[type="email"] {
  padding: 15px 18px; border: 1px solid var(--line); border-radius: 13px;
  background: rgba(255, 255, 255, .04); color: #fff; font: inherit; font-size: 15.5px;
}
.euland .xp__form input[type="email"]:focus { outline: none; border-color: var(--orange); }
.euland .xp__consent { display: flex; gap: 10px; align-items: flex-start; color: var(--grey-2); font-size: 13px; line-height: 1.45; }
.euland .xp__consent input { margin-top: 3px; accent-color: var(--orange); }
.euland .xp__consent a { color: var(--orange); font-weight: 700; }
.euland .xp__back { border: 0; background: none; color: #8A9099; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.euland .xp__back:hover { color: var(--orange); }
.euland .xp__ok {
  width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--orange); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
  box-shadow: 0 12px 34px rgba(239, 101, 47, .45);
}
.euland .xp__body[data-step="3"] { text-align: center; }
/* ⚠️ ТИМЧАСОВА кнопка перегляду — прибрати разом із PREVIEW_BTN у js/exit.js */.euland .xp__preview {
  position: fixed; left: 16px; bottom: 16px; z-index: 1100;
  padding: 10px 16px; border: 1px dashed var(--orange); border-radius: 30px;
  background: rgba(21, 23, 28, .92); color: var(--orange); font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}
.euland .xp__preview:hover { background: var(--orange); color: #fff; }
@media (max-width: 640px) {
.euland .xp { padding: 32px 20px 26px; border-radius: 20px; }
.euland .xp__tiles { grid-template-columns: 1fr 1fr; }

}
.euland .msgpage__rec {
  margin: 18px auto 0; max-width: 620px; padding: 14px 18px;
  border: 1px solid rgba(239, 101, 47, .45); border-radius: 14px;
  background: rgba(239, 101, 47, .07); color: #E6E7EA; font-size: 16px; line-height: 1.5;
}
.euland .msgpage__rec b { color: var(--orange); font-weight: 800; }
/* ── результат квіза на /thank-you/ (2026-07-28) ────────────────────────────────
   Було одне речення; тепер картка: система великим, під нею аргументи саме під неї.
   Анімація появи — та сама мова, що на сайті (без prefers-reduced-motion, див. §4). */.euland .qzres {
  margin: 22px auto 0; max-width: 680px; padding: 26px 26px 22px; text-align: left;
  border: 1px solid rgba(239, 101, 47, .38); border-radius: 18px;
  background: linear-gradient(180deg, rgba(239, 101, 47, .10), rgba(239, 101, 47, .03));
  animation: qzresIn .7s cubic-bezier(.22, .8, .3, 1) both;
}
@keyframes qzresIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.euland .qzres__head { border-bottom: 1px solid rgba(255, 255, 255, .10); padding-bottom: 14px; margin-bottom: 16px; }
.euland .qzres__label {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 6px;
}
/* ⚠️ Було 40px під назву системи (Odoo/Zoho). Систему клієнту більше не називаємо,
   тут тепер речення — тому розмір менший, інакше заголовок ламався б на три рядки. */.euland .qzres__sys { margin: 0; font-size: 27px; line-height: 1.15; font-weight: 800; color: #fff; }
.euland .qzres__for { margin: 8px 0 0; font-size: 14.5px; color: #9AA0A8; }
/* галузь клієнта — акцентом. ⚠️ Глобального `.accent` у проєкті НЕМА, він оголошений
   лише в конкретних контекстах (.sec-title .accent, .hero h1 .accent …), тому для
   нового блока правило треба додавати своє — інакше слово лишається сірим. */.euland .qzres__for .accent { color: var(--orange); font-weight: 700; }
.euland .qzres__cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 18px; }
.euland .qzres__why { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.euland .qzres__why li {
  position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.5; color: #E6E7EA;
  animation: qzresIn .6s cubic-bezier(.22, .8, .3, 1) both;
}
.euland .qzres__why li:nth-child(2) { animation-delay: .10s; }
.euland .qzres__why li:nth-child(3) { animation-delay: .20s; }
.euland .qzres__why .gdot { position: absolute; left: 0; top: 8px; }
.euland .qzres__note { margin: 16px 0 0; font-size: 13.5px; line-height: 1.55; color: #9AA0A8; }
@media (max-width: 640px) {
.euland .qzres { padding: 20px 18px 18px; border-radius: 14px; }
.euland .qzres__sys { font-size: 30px; }

}
/* прогрес відрізками + компактна кнопка Next (правки Олександра 2026-07-27) */.euland .qz__seg { flex: 1 1 auto; display: flex; gap: 4px; }
.euland .qz__seg i {
  flex: 1 1 0; height: 6px; border-radius: 3px; background: #E1E3E8;
  transition: background .35s ease, box-shadow .35s ease;
}
.euland .qz__seg i.is-done { background: var(--orange); }
.euland .qz__seg i.is-now { background: rgba(239, 101, 47, .45); box-shadow: 0 0 0 2px rgba(239, 101, 47, .18); }
.euland .qz__btn {
  padding: 11px 22px; border: 0; border-radius: 30px; background: var(--orange); color: #fff;
  font: inherit; font-size: 14px; font-weight: 800; letter-spacing: .02em; cursor: pointer;
  transition: transform .25s cubic-bezier(.34, 1.4, .64, 1), box-shadow .25s ease, background .2s ease;
}
.euland .qz__btn:hover { transform: scale(1.04); box-shadow: 0 10px 24px rgba(239, 101, 47, .35); }
.euland .qz__btn[disabled] { background: #D6D9DE; color: #fff; cursor: not-allowed; transform: none; box-shadow: none; }
.euland .xp__select {
  padding: 14px 18px; border: 1px solid var(--line); border-radius: 13px;
  background: rgba(255, 255, 255, .04); color: #fff; font: inherit; font-size: 15.5px;
  appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23EF652F' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}
.euland .xp__select:focus { outline: none; border-color: var(--orange); }
.euland .xp__select option { background: #1B1E24; color: #fff; }
.euland .xp__promise { margin: 2px 0 4px; color: #9AA0A8; font-size: 12.5px; line-height: 1.45; }
.euland .xp__promise b { color: #D6D8DC; font-weight: 700; }
.euland .xp__label { margin: 20px 0 -8px; font-size: 12.5px; font-weight: 800; letter-spacing: .1em;
             text-transform: uppercase; color: #8A9099; }