/* Нова головна (redesign/home.php, 07.11.2026, розкадровка «1А · 2А · 3А+Б+В»): звичайна сторінка на всю ширину до 2560.
   Токени — ../blog/base.css, поля форм — ../fluent.css (.ff-skin). Класи сторінки — з префіксом h-, щоб не перетинатися зі спільними
   (.more, .chip, .card у base.css); .offer-cta, .steps, .faq, .final, .panel--posts, .ex лишені для зон аналітики (assets/js/analytics.js). */
.home2 { --hw: 160rem; --r: clamp(1.125rem, 1.2vw, 1.75rem); --paper2: color-mix(in srgb, var(--ink) 7%, var(--paper)); --err: #D7262E; --ok: #2FB36A; }
/* шапка й підвал — на ту саму ширину, що й сторінка (до 2560), а не .wrap 85rem */
.home2 .top .wrap, .home2 .footer .wrap { width: min(var(--hw), 100% - var(--gutter) * 2); }
.h-main > section { width: min(var(--hw), 100% - var(--gutter) * 2); margin-inline: auto; }
.h-main h1, .h-main h2, .h-main h3, .h-main p { margin: 0; }
.h-main ul, .h-main ol { margin: 0; padding: 0; list-style: none; }
.h-link { color: var(--accent); font-weight: 700; text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1.5px; white-space: nowrap; }

/* перший екран */
.h-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(1.5rem, 3vw, 5rem);
  padding: clamp(2.5rem, 5.5vw, 9rem) 0 clamp(1.5rem, 4vw, 6rem); }
.h-kick { margin-bottom: clamp(.875rem, 1vw, 1.5rem) !important; font: 700 clamp(.75rem, .65vw, 1rem)/1.3 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.h-kick a { color: var(--accent); text-decoration: none; }
.h-kick a:hover { text-decoration: underline; }
.h-hero h1 { font: 900 clamp(2.375rem, 4.4vw, 7rem)/.95 var(--display); letter-spacing: -.045em; max-width: 13ch; }
.h-lead { margin-top: clamp(1rem, 1.2vw, 1.75rem) !important; font-size: clamp(1.0625rem, 1.1vw, 1.625rem); line-height: 1.45; color: var(--muted); max-width: 40ch; }
.price-line-a { display: block; color: inherit; text-decoration: none; }
.price-line-a:hover .price-line b { color: var(--accent); }
.price-line { display: flex; flex-wrap: wrap; gap: .375rem 0; margin-top: clamp(1rem, 1.2vw, 1.75rem) !important; font-size: clamp(.9375rem, .9vw, 1.3rem); color: var(--muted); }
.price-line li:not(:last-child)::after { content: "·"; margin: 0 .75rem; color: var(--accent); }
.price-line b { color: var(--ink); transition: color .15s; }
.offer-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: clamp(1.5rem, 1.8vw, 2.5rem); }
.offer-cta .btn { min-height: clamp(3.125rem, 3vw, 4.25rem); padding: 0 clamp(1.5rem, 1.6vw, 2.5rem); font-size: clamp(1rem, .95vw, 1.375rem); }
.offer-cta .h-link { font-size: clamp(1rem, .95vw, 1.375rem); }
.h-art { position: relative; display: grid; place-items: center; min-height: clamp(18rem, 30vw, 50rem); container-type: inline-size; }
/* слово вміщується в колонку за будь-якої мови: --len — кількість літер (redesign/home.php), 140cqi / --len ≈ ширина колонки.
   07.11.2026 (користувач: «нитку зроби позаду Н1»): слово поверх нитки — z-index 1 над img */
.h-art__w { position: absolute; inset: 0; display: grid; place-items: center; font: 900 min(clamp(4.5rem, 9.6vw, 16rem), calc(140cqi / var(--len, 7)))/.8 var(--display);
  letter-spacing: -.06em; text-transform: uppercase; white-space: nowrap; color: var(--ink); z-index: 1; }
.h-art img { position: relative; width: 92%; height: auto; }

/* секції */
.h-sec { padding-top: clamp(3.5rem, 6vw, 8rem); }
.h-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: clamp(1.25rem, 2vw, 2.5rem); }
.h-head h2, .h-eyebrow, .h-h2 { font: 900 clamp(1.875rem, 2.7vw, 4.25rem)/1 var(--display); letter-spacing: -.04em; color: var(--ink); }
.h-head p:not(.h-eyebrow) { margin-top: .625rem; color: var(--muted); max-width: 52ch; font-size: clamp(1rem, .95vw, 1.375rem); }
.h-grid { display: grid; gap: clamp(.75rem, .9vw, 1.375rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .h-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 2000px) { .h-grid--svc, .h-grid--prod { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.h-card { display: flex; flex-direction: column; gap: .625rem; height: 100%; padding: .5rem .5rem 1.125rem; border-radius: var(--r); background: var(--paper); text-decoration: none; }
.h-card img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: calc(var(--r) - .375rem); }
.h-card__t, .h-card h3 { padding: .25rem .5rem 0; font: 800 clamp(1.0625rem, 1.05vw, 1.5rem)/1.12 var(--display); letter-spacing: -.02em; }
.h-card__d { padding: 0 .5rem; color: var(--muted); font-size: clamp(.875rem, .8vw, 1.125rem); line-height: 1.45; }
.h-ex { padding: 0 .5rem; font-size: clamp(.875rem, .85vw, 1.125rem); color: var(--muted); }
.h-ex span { color: var(--accent); font-weight: 700; }
.h-ex b { color: var(--ink); }
.h-tags { display: flex; flex-wrap: wrap; gap: .375rem; padding: 0 .5rem !important; }
.h-tags li { padding: .3rem .75rem; border-radius: 62rem; background: var(--paper2); font-size: .8125rem; }
.h-more { margin-top: auto; padding: .25rem .5rem 0; font-weight: 700; font-size: .9375rem; text-decoration: none; }
.h-more i { font-style: normal; color: var(--accent); }
.h-more:hover { color: var(--accent); }
.h-card--p img { aspect-ratio: 4 / 3; }
.h-card--p:hover h3 { color: var(--accent); }
.h-price { margin-top: auto !important; padding: 0 .5rem; color: var(--muted); }
.h-price b { color: var(--ink); font-weight: 800; }
.h-price--ask { font-size: .9375rem; }

/* коротка форма після послуг (3Б): та сама форма заявки. Розкладка — розкадровка «Форма на головній» (07.11.2026, 1А · 2А+Б):
   зліва заголовок, рядок «Швидше — у WhatsApp» і кнопка WhatsApp; справа опис на всю ширину, під ним файл · телефон · кнопка
   в один рівень (subgrid: підписи одним рядком, поля однієї висоти --fh), підказки — під своїми полями.
   До 1920 розміри як в інших формах (16/13/14 px), на 2560 поля ростуть разом із заголовком.
   !important — там, де ті самі властивості задають стилі Fluent (вантажаться після цього файлу). */
.h-strip { --fh: clamp(3.5rem, 2.9vw, 4.5rem); --hint: clamp(.875rem, .68vw, 1.0625rem);
  --wa-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z'/%3E%3C/svg%3E");
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem clamp(2.5rem, 4vw, 6rem); padding: clamp(1.25rem, 2.6vw, 3rem);
  border-radius: var(--r); background: var(--paper); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); }
.h-strip__copy { display: grid; gap: .625rem; align-content: start; justify-items: start; }
.h-strip h2 { font: 900 clamp(1.625rem, 2vw, 3rem)/1.02 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.h-strip__copy > p:not(.form-wa) { color: var(--muted); font-size: clamp(1rem, .95vw, 1.375rem); }
.h-strip .form-wa { margin: .5rem 0 0; max-width: 36ch; font-size: var(--hint); }
.h-strip .form-wa::before, .h-wa::before { content: ""; flex: none; display: inline-block; width: 1.1em; height: 1.1em; background: #1DA851;
  -webkit-mask: var(--wa-ic) center / contain no-repeat; mask: var(--wa-ic) center / contain no-repeat; }
.h-strip .form-wa::before { margin-right: .4rem; vertical-align: -.2em; }
.h-wa { gap: .5rem; margin-top: .375rem; }
.h-strip .frm-fluent-form fieldset { gap: 1.25rem; }
.h-strip .ff-el-input--label { margin: 0 0 .5rem !important; }
.h-strip .ff-el-input--label label { white-space: nowrap; font-size: clamp(.8125rem, .62vw, 1rem) !important; }
.h-strip .ff-el-form-control:not(.ff-screen-reader-element), .h-strip .ff_upload_btn.ff-btn { font-size: clamp(1rem, .82vw, 1.25rem) !important; }
.h-strip .ff-el-form-control:not(textarea):not(.ff-screen-reader-element) { height: var(--fh) !important; padding: 0 1rem !important; }
.h-strip textarea.ff-el-form-control { min-height: clamp(4.75rem, 4vw, 6.5rem) !important; padding: .875rem 1rem !important; }
.h-strip .ff-el-help-message { margin-top: .5rem !important; font-size: var(--hint) !important; line-height: 1.4 !important; color: var(--muted) !important; }
.h-strip .ff-el-is-error .text-danger, .h-strip .error { margin-top: .5rem !important; font-size: var(--hint) !important; line-height: 1.4; }
.h-strip .ff_submit_btn_wrapper { margin: 0 !important; }
.h-strip .ff-btn-submit { min-height: var(--fh) !important; padding: 0 2.25rem !important; font-size: clamp(1.0625rem, .85vw, 1.3125rem) !important; }
/* файл — пунктирна кнопка на висоту поля; формати — підказкою під нею (--file-hint мовою сторінки ставить redesign/home.php) */
.h-strip .ff_file_upload_holder { display: flex; align-items: center; justify-content: flex-start; gap: .75rem; min-height: var(--fh); padding: 0 1rem; border-radius: .875rem; text-align: left; }
.h-strip .ff_file_upload_holder::before { content: "+"; flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font: 700 1.125rem/1 var(--display); }
.h-strip .ff_file_upload_holder::after { content: none; }
.h-strip .ff-el-input--content:has(> .ff_file_upload_holder)::after { content: var(--file-hint); display: block; margin-top: .5rem; font-size: var(--hint); line-height: 1.4; color: var(--muted); }
@media (min-width: 1100px) {
  .h-strip { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
  .h-strip .frm-fluent-form fieldset { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0 1rem; align-items: start; }
  .h-strip .ff-el-group:has(textarea) { grid-column: 1 / -1; margin-bottom: 1.25rem !important; }
  .h-strip .ff-el-group:has(.ff_file_upload_holder), .h-strip .ff-contact { display: grid !important; grid-row: span 2; grid-template-rows: subgrid; }
  .h-strip .ff-el-group::before, .h-strip .ff-el-group::after { display: none !important; } /* clearfix Fluent (той самий вибір, вантажиться пізніше) у сітці став би зайвою клітинкою й зсунув підпис на поле */
  .h-strip .ff_submit_btn_wrapper { grid-column: 3; grid-row: 3; }
}

/* пластики й ціни */
.h-mats { display: grid; gap: clamp(.75rem, .9vw, 1.375rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .h-mats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.h-mat { display: grid; gap: .375rem; align-content: start; padding: clamp(1.125rem, 1.4vw, 2rem); border-radius: var(--r); background: var(--paper); }
.h-mat h3 { font: 900 clamp(1.5rem, 1.8vw, 2.75rem)/1 var(--display); letter-spacing: -.035em; }
.h-mat b { font: 900 clamp(1.5rem, 2vw, 3rem)/1 var(--display); letter-spacing: -.04em; color: var(--accent); }
.h-mat--plain b { color: var(--ink); }
.h-mat p { color: var(--muted); font-size: clamp(.9375rem, .85vw, 1.1875rem); }
.h-mat .h-mat__use { color: var(--ink); font-weight: 600; }
.h-sub { display: flex; align-items: end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: clamp(1.5rem, 2vw, 2.5rem) 0 clamp(.75rem, .9vw, 1.375rem); }
.h-sub h3 { font: 800 clamp(1.25rem, 1.4vw, 2rem)/1.1 var(--display); letter-spacing: -.025em; }
.h-exs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(10.5rem, 1fr); gap: clamp(.75rem, .9vw, 1.375rem); overflow-x: auto; scrollbar-width: none;
  overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
.h-exs::-webkit-scrollbar { display: none; }
.h-exs li { scroll-snap-align: start; }
.h-exc { display: grid; gap: .25rem; height: 100%; padding: .5rem .5rem .875rem; border-radius: var(--r); background: var(--paper); text-decoration: none; }
.h-exc img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--r) - .375rem); margin-bottom: .375rem; }
.h-exc__t { padding: 0 .375rem; font-weight: 700; font-size: clamp(.875rem, .8vw, 1.125rem); line-height: 1.25; }
.h-exc__w { padding: 0 .375rem; color: var(--muted); font-size: .8125rem; }
.h-exc b { padding: 0 .375rem; font: 900 1.25rem/1.1 var(--display); }
.h-exc:hover .h-exc__t { color: var(--accent); }

/* кроки й доставка */
.h-duo { display: grid; gap: clamp(2rem, 3vw, 4rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .h-duo { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.h-duo .h-h2 { margin-bottom: clamp(1.25rem, 2vw, 2.5rem); }
.h-steps { display: grid; gap: clamp(.75rem, .9vw, 1.375rem); grid-template-columns: minmax(0, 1fr); counter-reset: s; }
@media (min-width: 900px) { .h-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.h-steps li { padding: clamp(1.25rem, 1.6vw, 2.25rem); border-radius: var(--r); background: var(--paper); }
.h-steps li::before { counter-increment: s; content: "0" counter(s); display: block; margin-bottom: .75rem; font: 900 clamp(2rem, 2.4vw, 3.5rem)/1 var(--display); letter-spacing: -.05em; color: var(--accent); }
.h-steps h3 { font: 800 clamp(1.25rem, 1.3vw, 1.875rem)/1.15 var(--display); }
.h-steps p { margin-top: .5rem !important; color: var(--muted); font-size: clamp(.9375rem, .85vw, 1.1875rem); }
.h-deliv > p { color: var(--muted); font-size: clamp(1rem, .95vw, 1.375rem); }
.h-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem !important; }
.h-chips a { display: inline-block; padding: .5rem 1rem; border-radius: 62rem; background: var(--paper); text-decoration: none; font-weight: 600; font-size: clamp(.875rem, .85vw, 1.125rem); }
.h-chips a:hover { color: var(--accent); }

/* чому ми */
.h-why { display: grid; gap: clamp(1.5rem, 2.5vw, 3.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .h-why { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.h-why h3 { font: 800 clamp(1.25rem, 1.3vw, 1.875rem)/1.15 var(--display); margin-bottom: .75rem !important; }
.h-why p { color: var(--muted); font-size: clamp(1rem, .95vw, 1.3125rem); line-height: 1.6; max-width: 62ch; }
.h-why p + p { margin-top: .875rem !important; }
.h-why .h-h2 + p { margin-top: 1rem !important; }
.h-why a, .h-faq a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: .2em; }
.h-why a:hover, .h-faq a:hover { color: var(--accent); }

/* питання */
.h-faq { display: grid; gap: 1.5rem 3rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .h-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } }
.h-faq > div:first-child > p { margin-top: .75rem !important; color: var(--muted); max-width: 36ch; }
.h-faq details { border-top: 1px solid var(--line); }
.h-faq details:last-child { border-bottom: 1px solid var(--line); }
.h-faq summary { list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: clamp(1rem, 1.1vw, 1.5rem) 0; cursor: pointer; font: 700 clamp(1.0625rem, 1.05vw, 1.5rem)/1.3 var(--display); }
.h-faq summary::-webkit-details-marker { display: none; }
.h-faq summary::after { content: "+"; color: var(--accent); font-weight: 900; }
.h-faq details[open] summary::after { content: "−"; }
.h-faq details p { padding-bottom: 1.25rem; color: var(--muted); max-width: 70ch; font-size: clamp(1rem, .9vw, 1.25rem); }

/* блог */
.h-post { display: grid; gap: .5rem; align-content: start; height: 100%; padding: .5rem .5rem 1rem; border-radius: var(--r); background: var(--paper); text-decoration: none; }
.h-post img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--r) - .375rem); }
.h-post__t { padding: 0 .5rem; font: 700 clamp(1rem, .95vw, 1.3125rem)/1.3 var(--display); }
.h-post__m { padding: 0 .5rem; color: var(--muted); font-size: .8125rem; }
.h-post:hover .h-post__t { color: var(--accent); }

/* заявка внизу (3В) */
.h-final { display: grid; gap: 2rem clamp(2rem, 4vw, 6rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .h-final { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.h-final > div:first-child h2 { font: 900 clamp(2rem, 3.4vw, 5.5rem)/.98 var(--display); letter-spacing: -.045em; max-width: 14ch; }
.h-contacts { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 1.5rem; font-weight: 700; font-size: clamp(1rem, 1vw, 1.375rem); }
.h-contacts a { text-decoration-color: var(--accent); text-underline-offset: .2em; }
.h-contacts a:hover { color: var(--accent); }
.h-order { display: grid; gap: .875rem; padding: clamp(1.25rem, 1.8vw, 2.5rem); border-radius: var(--r); background: var(--paper); scroll-margin-top: 6rem; }
.h-order h2 { font: 900 clamp(1.375rem, 1.5vw, 2.25rem)/1.05 var(--display); letter-spacing: -.03em; }
.h-order__lead, .h-note { color: var(--muted); font-size: .9375rem; }
.h-note { font-size: .8125rem; }
.h-note a { color: var(--ink); }

/* планшет і телефон */
@media (max-width: 900px) {
  .h-hero { grid-template-columns: minmax(0, 1fr); padding-top: .75rem; }
  .h-art { order: -1; min-height: 12.5rem; overflow: clip; }
  .h-art img { width: 86%; }
  .offer-cta .btn { width: 100%; }
  .h-exs { grid-auto-columns: 10.5rem; }
}
@media (max-width: 560px) {
  .h-grid--svc, .h-grid--posts { grid-template-columns: minmax(0, 1fr); }
  .h-card--p h3 { font-size: 1rem; }
  /* телефон: послуги й статті — рядками з мініатюрою ліворуч (сторінка коротша на ~3 екрани; текст увесь, нічого не сховано) */
  .h-grid--svc .h-card { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); grid-template-areas: "img t" "img d" "ex ex" "tags tags" "more more";
    column-gap: .875rem; row-gap: .5rem; align-items: start; padding: .625rem .625rem 1rem; }
  .h-grid--svc .h-card img { grid-area: img; aspect-ratio: 1; }
  .h-grid--svc .h-card__t { grid-area: t; padding: .125rem 0 0; font-size: 1.0625rem; }
  .h-grid--svc .h-card__d { grid-area: d; padding: 0; font-size: .875rem; }
  .h-grid--svc .h-ex { grid-area: ex; padding: 0; } .h-grid--svc .h-tags { grid-area: tags; padding: 0 !important; } .h-grid--svc .h-more { grid-area: more; padding: .25rem 0 0; }
  .h-post { grid-template-columns: 7rem minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: .875rem; align-items: start; padding: .5rem; }
  .h-post img { grid-row: span 2; aspect-ratio: 1; }
  .h-post__t, .h-post__m { padding: 0; }
  .h-post__t { padding-top: .125rem; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .h-exs { scroll-snap-type: none; } }