@import url("/assets/site/cursor.css");
/* Спільні хедер і футер сайту (assets/site/chrome.js). Підключається на всіх сторінках. */
/* Змінні й базові стилі лише всередині наших блоків, щоб не залежати від сторінки */
:where(.ah-wrap-bar, .mbar, .closer, .lead) {
  --bg: #171411; --bg-2: #211C17; --cream: #F4F2EC; --copper: #C8794A; --copper-hi: #EDB38A; --copper-lo: #7A4424;
  --muted: #9A9590; --line: rgba(244, 242, 236, 0.1); --ease: cubic-bezier(0.22, 1, 0.36, 1);
  font-family: "Manrope", system-ui, sans-serif; font-size: 17px; line-height: 1.6; color: var(--cream); -webkit-font-smoothing: antialiased;
}
:where(.ah-wrap-bar, .mbar, .closer, .lead) :where(*) { box-sizing: border-box; margin: 0; padding: 0; }
:where(.ah-wrap-bar, .mbar, .closer, .lead) a { color: inherit; }
.closer :where(h2), .lead :where(h3) { font-family: "Bricolage Grotesque", "Manrope", sans-serif; font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; }
.c-foot { font-size: 15px; color: var(--muted); }
.c-foot :where(a) { text-decoration: none; color: var(--cream); font-weight: 600; }
.site-pad { height: 96px; }
@media (max-width: 820px) { .site-pad { height: 72px; } }
/* Поки підвантажується англійський текст, ховаємо лише хедер */
html.i18n-wait .ah-wrap-bar, html.i18n-wait .mbar { visibility: hidden; }

/* ---------- Кнопки-стрілки і кристальні кнопки (як на головній) ---------- */
.chev { width: 20px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s cubic-bezier(.2,.8,.2,1); }
a:hover > .chev, button:hover > .chev { transform: translateX(4px); }
.pill-main {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background: linear-gradient(180deg, #FF8A5B 0%, #F0642D 48%, #C9461A 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 0 0 1px rgba(255, 170, 130, 0.55),
    inset 0 -12px 22px rgba(120, 30, 5, 0.35),
    0 12px 36px -8px rgba(240, 100, 45, 0.6),
    0 0 0 6px rgba(240, 100, 45, 0.1);
  text-shadow: 0 1px 1px rgba(90, 25, 5, 0.35);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), filter 0.3s;
}
.pill-main::before {
  content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; top: 2px; height: 46%;
  border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
}
.pill-main:hover {
  background: linear-gradient(180deg, #FF9A6E 0%, #F4703A 48%, #D24F20 100%);
  transform: translateY(-2px); filter: saturate(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 0 0 1px rgba(255, 180, 140, 0.7),
    inset 0 -12px 22px rgba(120, 30, 5, 0.3),
    0 16px 48px -8px rgba(240, 100, 45, 0.75),
    0 0 0 7px rgba(240, 100, 45, 0.14);
}
.pill-ghost {
  background: linear-gradient(180deg, rgba(244, 242, 236, 0.16), rgba(244, 242, 236, 0.04));
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(244, 242, 236, 0.14), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
}
.pill-ghost { color: var(--cream); }

/* ---------- Перемикач мови ---------- */
.langsw {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(244, 242, 236, 0.06); box-shadow: inset 0 0 0 1px var(--line);
}
.langsw button {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 9px;
  border: 0; border-radius: 999px; background: transparent; color: var(--cream); opacity: 0.7;
  font: 800 13px/1 "Manrope", sans-serif; letter-spacing: 0.06em;
  transition: background 0.25s, color 0.25s, opacity 0.25s;
}
.langsw button:hover { opacity: 1; }
.langsw button[aria-pressed="true"] { background: var(--cream); color: var(--bg); opacity: 1; }
.langsw button:focus-visible { outline: 2px solid var(--copper-hi); outline-offset: 2px; }
.flag {
  flex: none; width: 20px; height: 14px; border-radius: 3px; background-size: cover; background-position: center;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.flag-ua { background-image: linear-gradient(#0057B7 50%, #FFD700 50%); }
.flag-gb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='s'%3E%3Cpath d='M0 0v30h60V0z'/%3E%3C/clipPath%3E%3CclipPath id='t'%3E%3Cpath d='M30 15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23s)'%3E%3Cpath d='M0 0v30h60V0z' fill='%23012169'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' clip-path='url(%23t)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E"); }

/* ---------- Хедер на комп'ютері: три скляні «пігулки», закріплений зверху ---------- */
.ah-bar { display: flex; align-items: center; gap: 24px; padding: 28px 0; }
.ah-logo { height: 36px; width: auto; }
.ah-nav { display: flex; gap: 28px; margin: 0 auto; font-size: 16px; font-weight: 500; }
.ah-nav a { text-decoration: none; opacity: 0.85; white-space: nowrap; }
.ah-nav a:hover { opacity: 1; color: var(--copper-hi); }
.ah-right { display: flex; align-items: center; gap: 12px; }
.ah-pill { height: 40px; padding: 0 20px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.ah-ghost { background: var(--cream); color: var(--bg); }
.ah-main { background: var(--copper); color: #171411; }
.ah-main { padding: 0 18px 0 20px !important; }
@media (max-width: 1100px) { .ah-nav { display: none; } }
/* Закріплений хедер: три скляні «пігулки», завжди зверху */
.ah-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 150; padding: 18px clamp(24px, 4vw, 64px); pointer-events: none; }
.ah-bar > * { pointer-events: auto; }
.ah-glass {
  height: 60px; border-radius: 999px; display: flex; align-items: center; padding: 0 10px;
  background: linear-gradient(180deg, rgba(244, 242, 236, 0.1), rgba(244, 242, 236, 0.03)), rgba(23, 20, 17, 0.62);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(244, 242, 236, 0.1), 0 14px 34px -18px rgba(0, 0, 0, 0.9);
}
.ah-brand { padding: 0 24px; }
.ah-nav.ah-glass { padding: 0 26px; gap: 24px; }
/* Шість пунктів меню: на вужчих екранах стискаємо, а там, де не влазять, ховаємо */
@media (max-width: 1460px) { .ah-nav.ah-glass { padding: 0 18px; gap: 16px; font-size: 15px; } }
@media (max-width: 1345px) { .ah-nav.ah-glass { display: none; } }
.ah-main { display: inline-flex; gap: 10px; height: 44px; padding: 0 6px 0 20px; }
.ah-main i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: #171411; color: var(--copper-hi); }
.ah-ghost { height: 44px; }
@media (max-width: 820px) { .ah-wrap-bar { display: none; } }

/* ---------- Хедер на телефоні ---------- */
.mbar .pill { display: flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.mbar .logo-link { display: flex; flex: none; }
.mbar { gap: 10px; }
.mbar .langsw { margin-left: auto; }
.mbar .langsw button { height: 30px; padding: 0 9px 0 7px; font-size: 12px; gap: 6px; }
.mbar .pill-ghost { gap: 6px; }
.mbar .pill-ghost .tgi { margin-left: -2px; }
@media (max-width: 440px) {
  .mbar { gap: 8px; padding: 16px 14px; }
  .mbar .langsw button { font-size: 0; gap: 0; padding: 0 8px; }
  .mbar .pill { padding: 0 12px; font-size: 13.5px; }
  .mbar .pill-ghost { width: 36px; padding: 0; }
  .mbar .pill-ghost span { display: none; }
  .mbar .pill-ghost .tgi { margin: 0; }
  .mbar .logo { height: 26px; }
}
.mbar { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px; }
.mbar .logo { position: static; height: 30px; }
.mbar .pill { position: static; width: auto; padding: 0 14px; height: 36px; font-size: 14px; }
@media (max-width: 820px) {
  .mbar { position: fixed; top: 0; left: 0; right: 0; z-index: 150; background: rgba(23, 20, 17, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(244, 242, 236, 0.08); }
  .mbar .pill { position: relative; left: auto; top: auto; overflow: hidden; }
  .mbar .pill-main { padding: 0 12px; font-size: 13px; white-space: nowrap; flex: none; }
}
@media (min-width: 821px) { .mbar { display: none; } }

/* ---------- Фінальний заклик і футер ---------- */
.c-form { max-width: 520px; margin: -10px 0 30px; }
.c-step { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #F0642D; margin: 0 0 10px; }
.c-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.c-chip { padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(244, 242, 236, 0.2); background: transparent; color: #F4F2EC; font: inherit; font-size: 15px; cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.c-chip:hover { border-color: #F0642D; }
.c-chip[aria-pressed="true"] { background: #F0642D; border-color: #F0642D; color: #fff; }
.c-ta { width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(244, 242, 236, 0.2); background: rgba(244, 242, 236, 0.04); color: #F4F2EC; font: inherit; font-size: 16px; resize: vertical; }
.c-ta:focus { outline: none; border-color: #F0642D; }
.c-hint { color: #B4B6BA; font-size: 14px; margin: 10px 0 0; }
.closer {
  --o: #F0642D; --o-hi: #FF8A5B; --g: #191B1E; --milk: #F4F2EC; --gray: #777B82;
  --t1: #B4B6BA; --t2: #8A8D93;
  position: relative; overflow: hidden; color: var(--milk);
  background: transparent;
}
.closer .in { max-width: 1180px; margin: 0 auto; padding: 0 16px; position: relative; }

/* CTA band */
.c-band { display: grid; gap: 40px; padding: 56px 0 90px; align-items: center; }
@media (min-width: 900px) { .c-band { grid-template-columns: 1.05fr 1fr; gap: 24px; padding: 72px 0 110px; } }
.c-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px;
  border-radius: 999px; background: #22150F; font-size: 14px; font-weight: 600; color: var(--o-hi);
  box-shadow: inset 0 0 0 1px rgba(240, 100, 45, 0.45);
}
.c-pill svg { width: 14px; height: 14px; fill: var(--o); }
.c-h { font-size: clamp(40px, 5.4vw, 70px); line-height: 1.02; margin: 22px 0 22px; color: #fff; }
.c-h span { display: block; }
.c-h em { font-style: normal; color: var(--o); }
.c-p { color: var(--t1); font-size: 18px; line-height: 1.6; max-width: 44ch; margin-bottom: 34px; }
.c-btn {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 30px; border-radius: 999px; font-weight: 800; font-size: 17px; text-decoration: none; color: #fff;
  background: linear-gradient(180deg, #3A1D10 0%, #9C3F1A 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 0 1px rgba(255, 138, 91, 0.6),
    inset 0 -10px 20px rgba(240, 100, 45, 0.45),
    0 10px 40px rgba(240, 100, 45, 0.35),
    0 0 0 6px rgba(240, 100, 45, 0.08);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.c-btn::before {
  content: ""; position: absolute; left: 14%; right: 14%; top: 3px; height: 42%;
  border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.c-btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(255,138,91,.8), inset 0 -10px 22px rgba(240,100,45,.6), 0 14px 50px rgba(240,100,45,.5), 0 0 0 6px rgba(240,100,45,.12); }
.c-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; }

/* Нахилена панель редактора, зібрана в CSS */
.c-ed-wrap { perspective: 1400px; position: relative; }
@media (min-width: 900px) { .c-ed-wrap { margin-right: -160px; margin-top: -60px; } }
.c-ed {
  position: relative; border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, rgba(40, 30, 26, 0.92), rgba(20, 21, 24, 0.94));
  box-shadow: inset 0 0 0 1px rgba(244, 242, 236, 0.08), 0 40px 80px rgba(0, 0, 0, 0.55), 0 -18px 60px rgba(240, 100, 45, 0.28);
  transform: rotateY(-18deg) rotateX(9deg) rotateZ(2deg);
  transform-origin: 30% 50%;
  -webkit-mask-image: linear-gradient(to left, #000 85%, transparent 100%), linear-gradient(to bottom, #000 60%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(to left, #000 85%, transparent 100%), linear-gradient(to bottom, #000 60%, transparent 100%);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13px; line-height: 1.75;
}
.c-ed::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--o) 30%, #FFC2A6 60%, var(--o) 85%, transparent);
  box-shadow: 0 0 18px 3px rgba(240, 100, 45, 0.7);
}
.c-ed-top { display: flex; gap: 7px; padding: 14px 16px; border-bottom: 1px solid rgba(244, 242, 236, 0.07); }
.c-ed-top i { width: 10px; height: 10px; border-radius: 50%; background: rgba(244, 242, 236, 0.16); }
.c-ed-top b { margin-left: 10px; font-weight: 500; color: var(--t2); font-size: 12px; font-family: "Manrope", sans-serif; }
.c-ed-body { display: grid; grid-template-columns: 150px 1fr; min-height: 330px; }
.c-tree { padding: 14px 10px; border-right: 1px solid rgba(244, 242, 236, 0.07); color: var(--t2); font-family: "Manrope", sans-serif; font-size: 13px; }
.c-tree p { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); margin: 0 6px 8px; }
.c-tree div { padding: 3px 8px; border-radius: 7px; white-space: nowrap; }
.c-tree div.on { background: rgba(240, 100, 45, 0.16); color: var(--o-hi); box-shadow: inset 2px 0 0 var(--o); }
.c-tree div.c-sub { padding-left: 22px; }
.c-code { padding: 14px 18px; color: #D9D6CF; white-space: pre; overflow: hidden; }
.c-code .ln { color: #4C4F55; display: inline-block; width: 22px; }
.k1 { color: var(--o); } .k2 { color: #FFB38F; } .k3 { color: #C9B6F2; } .k4 { color: #7FD1C1; } .k5 { color: #6E7178; }
.c-caret { display: inline-block; width: 2px; height: 1.1em; vertical-align: -2px; background: var(--o); animation: c-blink 1.1s steps(2) infinite; }
@keyframes c-blink { to { opacity: 0; } }

/* Футер */
.c-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 28px; padding: 64px 0 40px; border-top: 1px solid rgba(244, 242, 236, 0.08); }
.c-brand, .c-news { grid-column: 1 / -1; }
@media (min-width: 1000px) { .c-brand, .c-news { grid-column: auto; } }
@media (min-width: 1000px) { .c-foot { grid-template-columns: 1.9fr 0.8fr 0.7fr 0.9fr 1fr 1.3fr; } }
.c-brand img { height: 34px; width: auto; display: block; margin-bottom: 16px; }
.c-brand p { color: var(--t2); font-size: 15px; line-height: 1.6; margin-bottom: 20px; max-width: 30ch; }
.c-soc { display: flex; gap: 10px; }
.c-soc a {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(240, 100, 45, 0.35); transition: background 0.3s, box-shadow 0.3s;
}
.c-soc a:hover { background: rgba(240, 100, 45, 0.12); box-shadow: inset 0 0 0 1px var(--o); }
.c-soc svg { width: 19px; height: 19px; stroke: var(--o-hi); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.c-col h4 { font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 800; color: var(--milk); margin-bottom: 14px; }
.c-col a { display: block; color: var(--t2); text-decoration: none; font-size: 15px; padding: 4px 0; transition: color 0.25s; }
.c-col a:hover { color: var(--o-hi); }
.c-news h4 { font-family: "Manrope", sans-serif; font-size: 14px; font-weight: 800; margin-bottom: 14px; }
.c-field {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 18px;
  border-radius: 999px; text-decoration: none; color: var(--t1); font-size: 15px;
  background: linear-gradient(180deg, rgba(244, 242, 236, 0.06), rgba(244, 242, 236, 0.02));
  box-shadow: inset 0 0 0 1px rgba(244, 242, 236, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.3s;
}
.c-field:hover { box-shadow: inset 0 0 0 1px rgba(240, 100, 45, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.c-key {
  flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(145deg, #FFB08C 0%, #F0642D 45%, #8E3412 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 4px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(240, 100, 45, 0.4);
}
.c-key svg { width: 18px; height: 18px; stroke: #191B1E; fill: none; stroke-width: 2.4; }
.c-news small { display: block; margin-top: 10px; color: var(--gray); font-size: 13px; }

/* Футер у стилі «сітка з квадратиків» */
.c-foot { position: relative; border-top: 0; }
.c-foot > * { position: relative; z-index: 1; }
.c-foot::before {
  content: ""; position: absolute; left: -50vw; right: -50vw; top: 0; bottom: -120px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Crect x='8' y='8' width='18' height='18' rx='3' fill='none' stroke='%23F0642D' stroke-opacity='.13'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 120px, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 120px, #000 55%, transparent);
}
.c-brand img { height: 46px; margin-bottom: 26px; }
.c-reach { display: grid; gap: 14px; margin-bottom: 22px; }
.c-reach div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.c-reach span { color: var(--t2); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; min-width: 13ch; }
.c-reach a { color: var(--milk); text-decoration: none; white-space: nowrap; font-size: clamp(22px, 2vw, 28px); font-weight: 600; transition: color 0.25s; }
.c-reach a:hover { color: var(--o-hi); }
.c-reach a em { font-style: normal; color: var(--o-hi); }
.c-soc a { width: 48px; height: 48px; border-radius: 50%; background: rgba(244, 242, 236, 0.05); }

/* Низ: копірайт між мармуровими руками і величезний вордмарк */
.c-bottom { position: relative; height: clamp(230px, 34vw, 440px); }
.c-copy { position: relative; z-index: 2; text-align: center; padding-top: clamp(28px, 4vw, 56px); color: var(--t2); font-size: 14px; line-height: 1.7; }
.c-note { padding-top: 10px; font-size: 12px; opacity: .75; }
.c-copy b { color: var(--milk); font-weight: 800; }
.c-hand { position: absolute; z-index: 1; height: auto; pointer-events: none; user-select: none; filter: hue-rotate(-14deg) saturate(1.15); }
.c-hand.l { left: 0; top: clamp(0px, 1vw, 20px); width: min(40%, 582px); }
.c-hand.r { right: 0; top: clamp(-10px, 0vw, 0px); width: min(38%, 558px); }
@media (max-width: 640px) { .c-hand.l { width: 44%; } .c-hand.r { width: 42%; } .c-copy { padding-top: 9vw; font-size: 13px; } }
.c-glow { position: absolute; left: 50%; top: 0; width: 70%; height: 70%; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 30%, rgba(240, 100, 45, 0.16), transparent 70%); pointer-events: none; }
.c-word {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 24%);
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 300; letter-spacing: -0.05em; line-height: 0.8;
  font-size: clamp(70px, 23vw, 340px); white-space: nowrap; user-select: none; pointer-events: none;
  background: linear-gradient(180deg, #7A3214 0%, #4A1E0D 70%); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Вхідна анімація: запускається, коли блок з'являється на екрані */
.closer [data-c] { opacity: 0; }
.closer.go [data-c] { animation: c-rise 1s var(--ease) both; animation-delay: var(--cd, 0s); }
.closer.go [data-c="pill"] { animation-name: c-fade; }
.closer.go [data-c="ed"] { animation: c-ed 1.4s var(--ease) both; animation-delay: var(--cd, 0s); }
@keyframes c-fade { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes c-rise { from { opacity: 0; transform: translateY(44px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes c-ed { from { opacity: 0; transform: scale(0.88) rotateY(-8deg) translateY(40px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .closer [data-c] { opacity: 1; }
  .closer.go [data-c] { animation: none; }
  .c-caret { animation: none; }
}

/* ---------- Форма заявки ---------- */
.lead { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 16px; background: rgba(10, 10, 12, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lead[hidden] { display: none; }
.lead-box {
  position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 34px 28px 28px; border-radius: 28px; color: #F4F2EC;
  background: radial-gradient(circle at 1px 1px, rgba(240, 100, 45, 0.18) 1.2px, transparent 1.5px) 0 0 / 22px 22px, linear-gradient(160deg, #24262A, #17181B);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(244, 242, 236, 0.1), 0 40px 90px -30px #000;
}
.lead-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(244, 242, 236, 0.08); color: #F4F2EC; font-size: 22px; cursor: pointer; }
.lead-k { color: #FF8A5B; font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.lead h3 { font-size: clamp(28px, 4vw, 38px); line-height: 1.05; margin: 10px 0 22px; }
.lead label { display: block; font-size: 14px; font-weight: 700; margin: 14px 0 6px; }
.lead label[for]::after { content: " *"; color: #F0642D; }
.lead input, .lead select, .lead textarea {
  width: 100%; padding: 13px 16px; border-radius: 14px; border: 1px solid rgba(244, 242, 236, 0.16); background: rgba(0, 0, 0, 0.28);
  color: #F4F2EC; font: inherit; font-size: 16px; outline: none; transition: border-color 0.25s;
}
.lead select option { color: #191B1E; }
.lead input:focus, .lead select:focus, .lead textarea:focus { border-color: #F0642D; }
.lead .hp { position: absolute; left: -9999px; }
.lead-send { margin-top: 22px; display: inline-flex; align-items: center; gap: 12px; padding: 8px 8px 8px 24px; border: 0; border-radius: 999px; background: #F4F2EC; color: #191B1E; font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; }
.lead-send i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-style: normal; color: #fff; background: linear-gradient(145deg, #FFB08C, #F0642D 45%, #8E3412); }
.lead-send[disabled] { background: #3A3D42; color: #8A8D92; cursor: not-allowed; }
.lead-send[disabled] .chev { color: #8A8D92; }
.lead-req { color: #F0642D; font-weight: 700; }
.lead-msg { margin-top: 14px; font-size: 15px; color: #B4B6BA; }
.lead-msg.err { color: #FF8A5B; }
.lead label.lead-ok { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: 14px; color: #B4B6BA; margin-top: 18px; cursor: pointer; }
.lead-ok input { width: 18px; height: 18px; flex: none; margin: 2px 0 0; accent-color: #F0642D; padding: 0; }
.lead-ok a { color: #FF8A5B; }
.lead .bad { border-color: #FF8A5B !important; }
.lead-send { padding: 0 24px !important; height: 52px; }
.lead-send .chev { color: #F0642D; }
.lead-tel { display: flex; gap: 8px; }
.lead .lead-tel select { width: 128px; flex: 0 0 128px; padding-right: 8px; text-overflow: ellipsis; }
.lead .lead-tel input { flex: 1; min-width: 0; }
.lead-hint { margin: 6px 2px 0; font-size: 13px; line-height: 1.4; color: #FF8A5B; }
.lead input:-webkit-autofill, .lead input:-webkit-autofill:hover, .lead input:-webkit-autofill:focus {
  -webkit-text-fill-color: #F4F2EC; caret-color: #F4F2EC; -webkit-box-shadow: 0 0 0 1000px #141517 inset; box-shadow: 0 0 0 1000px #141517 inset; transition: background-color 9999s;
}
.lead input::selection, .lead textarea::selection { background: rgba(240, 100, 45, 0.45); color: #fff; }