/* =========================================================
   LuxTransfer UI Kit · v1.1 · 01.11.2026
   v1.1: paper-2, line-strong, on-dark-soft, navy-glass, error/ok text, .lx-icon-btn, section-y, head-gap, banner-blue
   Кольори з логотипу (блакитний #28ABE1) + золотий градієнт.
   Підключення: <link rel="stylesheet" href="../kit/lux-kit.css">
   Усі розміри в rem (1rem = 16px). Префікс компонентів: .lx-
   ========================================================= */

:root{
  /* --- Blue · з логотипу --- */
  --lx-blue-50:#EAF6FC;
  --lx-blue-100:#D3EEFA;
  --lx-blue-200:#A9DDF4;
  --lx-blue-300:#6FCBF1;   /* текст-акцент на темному */
  --lx-blue-400:#46B9EA;   /* hover */
  --lx-blue-500:#28ABE1;   /* ЛОГОТИП · заливки, кнопки, іконки */
  --lx-blue-600:#1A8FC7;
  --lx-blue-700:#0F6FA0;   /* текст і посилання на світлому (AA 5.5:1) */
  --lx-blue-800:#0B5379;
  --lx-blue-900:#083A55;

  /* --- Navy · темні поверхні (відтінок синього логотипа) --- */
  --lx-navy-950:#050C14;
  --lx-navy-900:#07111C;   /* фон темних секцій */
  --lx-navy-850:#0C1A2A;   /* картки на темному */
  --lx-navy-800:#13253A;   /* підняті елементи */
  --lx-navy-700:#1C334D;   /* межі, роздільники */
  --lx-navy-glass:rgba(7,17,28,.84); /* липка шапка, оверлеї */

  /* --- Gold · преміальний акцент (як на листівці) --- */
  --lx-gold-hi:#F4D888;
  --lx-gold-400:#D9AE45;
  --lx-gold-500:#D4A63A;   /* золото на темному (8.4:1 на navy-900) */
  --lx-gold-600:#C29530;
  --lx-gold-lo:#A97C22;
  --lx-gold-text:#7A5B17;  /* золотий текст на світлому (AA 6.3:1) */
  --lx-gold-grad:linear-gradient(135deg,#F4D888 0%,#D9AE45 38%,#C29530 70%,#A97C22 100%);

  /* --- Нейтральні --- */
  --lx-ink:#0B1B2B;        /* основний текст на світлому, текст на кнопках */
  --lx-ink-muted:#4B5D70;  /* другорядний текст на світлому */
  --lx-paper:#F4F8FB;      /* світлий фон секцій */
  --lx-paper-2:#E9F1F7;    /* глибший світлий фон (FAQ, смуги) */
  --lx-white:#FFFFFF;
  --lx-line:#DCE6EE;       /* межі на світлому (декоративні) */
  --lx-line-strong:#7A90A6;/* межі полів і контролів (3:1) */
  --lx-on-dark:#FFFFFF;
  --lx-on-dark-soft:rgba(255,255,255,.82);
  --lx-on-dark-muted:#9FB3C8;
  --lx-line-dark:rgba(111,203,241,.16);

  /* --- Градієнти --- */
  --lx-blue-grad:linear-gradient(135deg,#6FCBF1 0%,#28ABE1 45%,#1580B4 100%);
  --lx-night-grad:radial-gradient(120% 90% at 85% 0%,rgba(40,171,225,.22) 0%,rgba(40,171,225,0) 55%),
                  radial-gradient(90% 70% at 0% 100%,rgba(212,166,58,.07) 0%,rgba(212,166,58,0) 60%),
                  #07111C;
  --lx-hairline-grad:linear-gradient(90deg,#28ABE1 0%,#D4A63A 100%);
  --lx-banner-blue:linear-gradient(135deg,#0B5379 0%,#0E6A99 55%,#1373A6 100%); /* синя панель банера: білий текст ≥4.8:1 */

  /* --- Статуси --- */
  --lx-ok:#2FBF71;          /* заливки, крапка «онлайн» */
  --lx-ok-text:#1C7A47;     /* текст на світлому (5.3:1) */
  --lx-error:#E5484D;       /* межі полів */
  --lx-error-text:#C0262D;  /* текст помилки на світлому (5.9:1) */
  --lx-error-on-dark:#FF8A8F;
  --lx-blue-icon:var(--lx-blue-600); /* іконки на світлому (3.6:1) */
  --lx-telegram:#28ABE1;   /* збігається з логотипом */
  --lx-viber:#7360F2;

  /* --- Типографіка --- */
  --lx-font-display:"Oswald","Arial Narrow",Arial,sans-serif;
  --lx-font-text:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --lx-fs-xs:.75rem; --lx-fs-sm:.875rem; --lx-fs-md:1rem; --lx-fs-lg:1.125rem;
  --lx-fs-h3:clamp(1.25rem,1.1rem + .5vw,1.5rem);
  --lx-fs-h2:clamp(1.875rem,1.2rem + 2.4vw,3rem);
  --lx-fs-h1:clamp(2.5rem,1.6rem + 3.6vw,4.5rem);

  /* --- Форма, тіні, відступи --- */
  --lx-r-sm:.5rem; --lx-r-md:.875rem; --lx-r-lg:1.25rem; --lx-r-pill:999px;
  --lx-shadow-1:0 .25rem 1rem rgba(7,17,28,.08);
  --lx-shadow-2:0 1rem 2.5rem rgba(7,17,28,.16);
  --lx-glow-blue:0 0 0 .25rem rgba(40,171,225,.28);
  --lx-section-y:clamp(3rem,2rem + 3.2vw,5rem);   /* відступ секції зверху і знизу: ~80px на 1440, 48px на телефоні */
  --lx-head-gap:clamp(1.75rem,1.4rem + 1.2vw,2.5rem); /* від заголовка секції до контенту */
  --lx-container:76rem;
  --lx-gutter:1.5rem;
  --lx-tap:2.75rem;        /* мін. висота кнопок/полів (44 px) */
}
@media (max-width:47.99rem){ :root{ --lx-gutter:1rem; } }

/* ---------- Логотип ---------- */
.lx-logo{display:inline-flex;align-items:center;line-height:0}
.lx-logo img{display:block;height:2.75rem;width:auto}
@media (max-width:47.99rem){ .lx-logo img{height:2.25rem} }

/* ---------- Кнопки ---------- */
.lx-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:var(--lx-tap);padding:0 1.375rem;border-radius:var(--lx-r-pill);border:1px solid transparent;font:700 var(--lx-fs-md)/1 var(--lx-font-text);text-decoration:none;cursor:pointer;transition:background-color .2s,border-color .2s,filter .2s,color .2s}
.lx-btn svg{width:1.25rem;height:1.25rem;flex:none}
.lx-btn:focus-visible{outline:none;box-shadow:var(--lx-glow-blue)}
.lx-btn--primary{background:var(--lx-blue-500);color:var(--lx-ink)}
.lx-btn--primary:hover{background:var(--lx-blue-400)}
.lx-btn--gold{background:var(--lx-gold-grad);color:var(--lx-ink)}
.lx-btn--gold:hover{filter:brightness(1.07)}
.lx-btn--outline{border-color:rgba(40,171,225,.55);color:var(--lx-on-dark);background:rgba(40,171,225,.06)}
.lx-btn--outline:hover{border-color:var(--lx-blue-500);background:rgba(40,171,225,.14)}
.lx-btn--outline-light{border-color:var(--lx-blue-700);color:var(--lx-blue-700);background:transparent}
.lx-btn--outline-light:hover{background:var(--lx-blue-50)}
.lx-btn--dark{background:var(--lx-ink);color:#fff}
.lx-btn--dark:hover{background:var(--lx-navy-800)}
.lx-btn--lg{min-height:3.5rem;padding:0 1.75rem;font-size:var(--lx-fs-lg)}

/* ---------- Мітки ---------- */
.lx-strip{display:inline-flex;align-items:center;min-height:1.75rem;padding:0 .875rem 0 .75rem;background:var(--lx-gold-grad);color:var(--lx-ink);font:700 var(--lx-fs-xs)/1 var(--lx-font-display);letter-spacing:.12em;text-transform:uppercase;clip-path:polygon(0 0,100% 0,calc(100% - .5rem) 100%,0 100%)}
.lx-strip--blue{background:var(--lx-blue-grad)}
.lx-badge{display:inline-flex;align-items:center;gap:.375rem;min-height:1.75rem;padding:0 .75rem;border-radius:var(--lx-r-pill);font:600 var(--lx-fs-sm)/1 var(--lx-font-text);background:var(--lx-blue-50);color:var(--lx-blue-700)}
.lx-badge--dark{background:rgba(40,171,225,.12);color:var(--lx-blue-300);border:1px solid var(--lx-line-dark)}
.lx-badge--gold{background:rgba(212,166,58,.14);color:var(--lx-gold-text)}
.lx-badge .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--lx-ok)}

/* ---------- Чипи / вкладки ---------- */
.lx-chip{display:inline-flex;align-items:center;gap:.375rem;min-height:var(--lx-tap);padding:0 1rem;border-radius:var(--lx-r-pill);border:1px solid var(--lx-line);background:#fff;color:var(--lx-ink);font:600 var(--lx-fs-sm)/1 var(--lx-font-text);cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.lx-chip:hover{border-color:var(--lx-blue-500)}
.lx-chip[aria-pressed="true"],.lx-chip[aria-selected="true"]{background:var(--lx-blue-500);border-color:var(--lx-blue-500);color:var(--lx-ink)}
.lx-chip b{color:var(--lx-gold-text)}
.lx-chip[aria-pressed="true"] b,.lx-chip[aria-selected="true"] b{color:var(--lx-ink)}
.lx-chip--dark{background:var(--lx-navy-850);border-color:var(--lx-line-dark);color:#fff}
.lx-chip--dark b{color:var(--lx-gold-500)}

/* ---------- Круглі іконки-кнопки (Telegram, Viber, телефон) ---------- */
.lx-icon-btn{display:inline-grid;place-items:center;width:var(--lx-tap);height:var(--lx-tap);border-radius:50%;border:1px solid var(--lx-line);background:#fff;color:var(--lx-blue-icon);transition:background-color .2s,border-color .2s}
.lx-icon-btn svg{width:1.25rem;height:1.25rem}
.lx-icon-btn:hover{border-color:var(--lx-blue-500)}
.lx-icon-btn:focus-visible{outline:none;box-shadow:var(--lx-glow-blue)}
.lx-icon-btn--tg{background:var(--lx-blue-500);border-color:var(--lx-blue-500);color:var(--lx-ink)}
.lx-icon-btn--tg:hover{background:var(--lx-blue-400)}
.lx-icon-btn--viber{color:var(--lx-viber)}
.lx-on-dark .lx-icon-btn{background:var(--lx-navy-800);border-color:var(--lx-navy-700);color:var(--lx-blue-300)}
.lx-on-dark .lx-icon-btn--tg{background:var(--lx-blue-500);border-color:var(--lx-blue-500);color:var(--lx-ink)}
.lx-on-dark .lx-icon-btn--viber{color:#A99BFF}

/* ---------- Ціна ---------- */
.lx-price{font:700 1.5rem/1 var(--lx-font-display);color:var(--lx-gold-text)}
.lx-price small{font:600 var(--lx-fs-sm)/1 var(--lx-font-text);color:var(--lx-ink-muted);margin-right:.25rem}
.lx-on-dark .lx-price{color:var(--lx-gold-500)}
.lx-on-dark .lx-price small{color:var(--lx-on-dark-muted)}

/* ---------- Картка ---------- */
.lx-card{background:#fff;border:1px solid var(--lx-line);border-radius:var(--lx-r-lg);padding:1.5rem;box-shadow:var(--lx-shadow-1)}
.lx-card--dark{background:var(--lx-navy-850);border-color:var(--lx-line-dark);color:#fff;box-shadow:none}
.lx-card--accent{position:relative;overflow:hidden}
.lx-card--accent::before{content:"";position:absolute;inset:0 0 auto;height:.1875rem;background:var(--lx-hairline-grad)}

/* ---------- Поле форми ---------- */
.lx-field{display:grid;gap:.375rem}
.lx-field label{font:600 var(--lx-fs-sm)/1.2 var(--lx-font-text);color:var(--lx-ink)}
.lx-input{min-height:3rem;width:100%;padding:0 1rem;border-radius:var(--lx-r-md);border:1px solid var(--lx-line-strong);background:#fff;color:var(--lx-ink);font:500 var(--lx-fs-md)/1 var(--lx-font-text)}
.lx-input:focus{outline:none;border-color:var(--lx-blue-500);box-shadow:var(--lx-glow-blue)}
.lx-input[aria-invalid="true"]{border-color:var(--lx-error)}
.lx-on-dark .lx-field label{color:#fff}
.lx-on-dark .lx-input{background:var(--lx-navy-800);border-color:var(--lx-navy-700);color:#fff}

/* ---------- Ритм секцій ----------
   Кожна секція: padding-block: var(--lx-section-y).
   Дві поспіль секції з однаковим фоном: у другої padding-top:0 (.lx-flush), щоб відступ не подвоювався. */
.lx-section{padding-block:var(--lx-section-y)}
.lx-flush{padding-top:0!important}

/* ---------- Секція на темному ---------- */
.lx-on-dark{background:var(--lx-night-grad);color:var(--lx-on-dark)}

/* ---------- Банер «Formel 1» (синя панель + золотий акцент) ---------- */
.lx-banner{--panel:var(--lx-banner-blue);--stripe:var(--lx-gold-grad);
  position:relative;isolation:isolate;overflow:hidden;display:flex;min-height:18rem;border-radius:var(--lx-r-lg);color:#fff}
.lx-banner__img{position:absolute;top:0;right:0;width:70%;height:100%;object-fit:cover;z-index:-2}
.lx-banner::before,.lx-banner::after{content:"";position:absolute;inset:0;z-index:-1}
.lx-banner::before{background:var(--stripe);clip-path:ellipse(72.5% 138% at 0% 100%)}
.lx-banner::after{background:var(--panel);clip-path:ellipse(70% 135% at 0% 100%)}
.lx-banner__body{display:flex;flex-direction:column;align-items:flex-start;gap:.625rem;width:54%;padding:1.75rem 0 1.25rem 2rem}
.lx-banner__title{margin:0;font:italic 800 2.75rem/.9 "Fira Sans Extra Condensed",var(--lx-font-display);text-transform:uppercase}
.lx-banner__kicker{margin:0;font:italic 800 1.375rem/1 "Fira Sans Extra Condensed",var(--lx-font-display);text-transform:uppercase}
.lx-banner__kicker em{font-style:inherit;color:var(--lx-gold-hi)}
.lx-banner__fine{margin:auto 0 0;font-size:.75rem}
.lx-banner--navy{--panel:radial-gradient(120% 140% at 0% 0%,#13253A 0%,#07111C 70%)}
.lx-banner--gold{--panel:var(--lx-gold-grad);--stripe:var(--lx-blue-500);color:var(--lx-ink)}
.lx-banner--gold .lx-banner__kicker em{color:var(--lx-blue-300);background:var(--lx-ink);padding:.05em .3em;border-radius:.2em}