/* gofra-rf.ru — дизайн-система, прототип Ф5 (19.10.2026).
   Один шрифт (Onest), токены на :root, mobile-first. В Laravel переедет как есть: tokens → resources/css. */

:root {
  /* цвет */
  --list: #ffffff;           /* фон страницы — белый лист */
  --sektsiya: #f1f3f4;       /* светлые секции */
  --liniya: #d9dde0;         /* линии таблиц и рамок */
  --stal: #6b7a86;           /* размерные линии, вторичный текст */
  --tkan: #2b2f33;           /* заливка изделия на схемах */
  --grafit: #1f2328;         /* основной текст */
  --akcent: #e25303;         /* RAL 2004 — кнопки, активные состояния, размерные стрелки на схеме */
  --akcent-temn: #b84302;
  --akcent-fon: #fdeee6;
  --ok: #2f7d4f;             /* «в наличии», успех */
  --vnimanie: #9a6b00;       /* предупреждение */
  --oshibka: #b3261e;
  /* типографика */
  --shrift: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-xs: 0.8125rem; --t-s: 0.9375rem; --t-m: 1rem; --t-l: 1.1875rem; --t-xl: 1.5rem; --t-2xl: 2rem; --t-3xl: 2.625rem;
  /* сетка и ритм */
  --konteyner: 1200px; --pole: 16px; --shag: 8px; --radius: 6px; --radius-l: 12px;
  --ten: 0 1px 2px rgba(31,35,40,.08), 0 8px 24px -16px rgba(31,35,40,.25);
}
@media (min-width: 768px) { :root { --pole: 24px; --t-3xl: 3.25rem; --t-2xl: 2.25rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--list); color: var(--grafit); font: 400 var(--t-m)/1.55 var(--shrift); font-feature-settings: "tnum" 1; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--stal); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--akcent); }
:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { margin: 0 0 .5em; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; text-wrap: balance; }
h1 { font-size: var(--t-3xl); } h2 { font-size: var(--t-2xl); margin-top: 0; } h3 { font-size: var(--t-l); }
p { margin: 0 0 1em; max-width: 70ch; }
small, .vtoroy { color: var(--stal); font-size: var(--t-s); }
.konteyner { width: min(100% - 2 * var(--pole), var(--konteyner)); margin-inline: auto; }
.sektsiya { padding-block: clamp(40px, 7vw, 88px); }
.sektsiya--svetlaya { background: var(--sektsiya); }
.sektsiya > .konteyner > h2:first-child { margin-bottom: 1.25rem; }
.skrytyy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* шапка */
.shapka { position: sticky; top: 0; z-index: 20; background: var(--list); border-bottom: 1px solid var(--liniya); }
.shapka__ryad { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.logo__znak { width: 28px; height: 28px; }
.shapka__tel { margin-left: auto; font-weight: 600; text-decoration: none; white-space: nowrap; }
.shapka .shapka__knopka { display: none; }
.menyu { display: none; }
@media (min-width: 1024px) {
  .menyu { display: flex; gap: 22px; margin-left: 32px; font-size: var(--t-s); }
  .menyu a { text-decoration: none; padding: 20px 0; border-bottom: 2px solid transparent; }
  .menyu a[aria-current] { border-color: var(--akcent); }
  .shapka .shapka__knopka { display: inline-flex; }
}
.burger { margin-left: 4px; width: 44px; height: 44px; border: 1px solid var(--liniya); background: none; border-radius: var(--radius); display: grid; place-items: center; color: var(--grafit); }
.shapka__ryad { gap: 12px; }
@media (min-width: 1024px) { .burger { display: none; } }

/* кнопки */
.knopka { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--radius); border: 1px solid transparent; font: 600 var(--t-s)/1 var(--shrift); text-decoration: none; cursor: pointer; }
.knopka--akcent { background: var(--akcent); color: #fff; }
.knopka--akcent:hover { background: var(--akcent-temn); }
.knopka--konturnaya { background: var(--list); border-color: var(--grafit); color: var(--grafit); }
.knopka--konturnaya:hover { background: var(--sektsiya); }
.knopka--bolshaya { min-height: 52px; padding: 0 24px; font-size: var(--t-m); }
.knopka[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* крошки */
.kroshki { font-size: var(--t-s); color: var(--stal); padding: 14px 0 0; }
.kroshki ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 10px; }
.kroshki li + li::before { content: "›"; margin-right: 10px; }
.kroshki a { text-decoration: none; }

/* герой с калькулятором */
.geroy { padding-block: 28px 48px; }
.geroy__set { display: grid; gap: 28px; }
@media (min-width: 1024px) { .geroy__set { grid-template-columns: 5fr 7fr; align-items: start; gap: 48px; } }
.geroy p.vvod { font-size: var(--t-l); color: var(--grafit); max-width: 48ch; }
.fakty { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 18px 0 0; padding: 0; list-style: none; font-size: var(--t-s); color: var(--stal); }
.fakty strong { color: var(--grafit); font-weight: 600; }

/* калькулятор */
.kalk { background: var(--list); border: 1px solid var(--liniya); border-radius: var(--radius-l); box-shadow: var(--ten); overflow: hidden; }
.kalk__shema { background: var(--sektsiya); padding: 16px; border-bottom: 1px solid var(--liniya); }
.kalk__shema svg { width: 100%; height: auto; }
.kalk__polya { display: grid; gap: 14px 16px; padding: 18px 16px 6px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .kalk__polya { grid-template-columns: repeat(3, 1fr); } }
.pole label { display: block; font-size: var(--t-xs); color: var(--stal); margin-bottom: 4px; }
.pole input, .pole select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--liniya); border-radius: var(--radius); font: inherit; background: var(--list); color: var(--grafit); }
.pole input:focus, .pole select:focus { border-color: var(--akcent); outline: none; box-shadow: 0 0 0 3px var(--akcent-fon); }
.pole--shirokoe { grid-column: 1 / -1; }
.kalk__itog { display: grid; gap: 12px; padding: 14px 16px 18px; border-top: 1px dashed var(--liniya); margin-top: 12px; }
@media (min-width: 560px) { .kalk__itog { grid-template-columns: 1fr auto; align-items: center; } }
.cena { font-size: var(--t-xl); font-weight: 600; line-height: 1.1; }
.cena small { display: block; font-size: var(--t-s); font-weight: 400; color: var(--stal); margin-top: 4px; }
.kalk__primechanie { grid-column: 1 / -1; font-size: var(--t-xs); color: var(--stal); margin: 0; }

/* плитки изделий */
.plitki { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .plitki { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
.plitka { display: block; text-decoration: none; border: 1px solid var(--liniya); border-radius: var(--radius-l); padding: 14px; background: var(--list); }
.plitka:hover { border-color: var(--grafit); }
.plitka svg { aspect-ratio: 4 / 3; width: 100%; height: auto; margin-bottom: 10px; background: var(--sektsiya); border-radius: var(--radius); }
.plitka h3 { font-size: var(--t-m); margin: 0 0 4px; }
.plitka .ot { font-size: var(--t-s); color: var(--stal); }

/* таблицы */
.tablica-obertka { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--liniya); border-radius: var(--radius-l); }
table { border-collapse: collapse; width: 100%; min-width: 640px; font-size: var(--t-s); }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--liniya); vertical-align: top; }
th { font-weight: 600; background: var(--sektsiya); position: sticky; top: 0; }
tbody tr:last-child td { border-bottom: 0; }
td.chislo, th.chislo { text-align: right; font-variant-numeric: tabular-nums; }
.tablica-obertka th:first-child, .tablica-obertka td:first-child { position: sticky; left: 0; background: var(--list); }
.tablica-obertka th:first-child { background: var(--sektsiya); }
caption { text-align: left; caption-side: top; padding: 12px; font-size: var(--t-s); color: var(--stal); }

/* шаги */
.shagi { counter-reset: shag; list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 768px) { .shagi { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.shagi li { counter-increment: shag; padding-left: 44px; position: relative; }
.shagi li::before { content: counter(shag); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--grafit); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: var(--t-s); }
.shagi h3 { margin-bottom: 4px; }

/* FAQ */
.faq details { border-top: 1px solid var(--liniya); }
.faq details:last-child { border-bottom: 1px solid var(--liniya); }
.faq summary { cursor: pointer; padding: 14px 36px 14px 0; font-weight: 600; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--grafit); border-bottom: 2px solid var(--grafit); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding-bottom: 14px; }

/* форма расчёта */
.forma { display: grid; gap: 14px; }
.forma .pole--fayl { border: 1px dashed var(--stal); border-radius: var(--radius-l); padding: 18px; text-align: center; background: var(--sektsiya); }
.forma .pole--fayl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.forma .pole--fayl label { display: block; color: var(--grafit); font-size: var(--t-s); cursor: pointer; }
.forma .soglasie { font-size: var(--t-xs); color: var(--stal); }
.podskazka { font-size: var(--t-xs); color: var(--stal); margin-top: 4px; }
.pole[data-sostoyanie="oshibka"] input { border-color: var(--oshibka); }
.pole .oshibka { color: var(--oshibka); font-size: var(--t-xs); margin-top: 4px; }

/* схемы на страницах изделий */
.shema { background: var(--sektsiya); border-radius: var(--radius-l); padding: 16px; }
.shema figcaption { font-size: var(--t-s); color: var(--stal); margin-top: 8px; }
.razmer { font: 500 12px/1 var(--shrift); fill: var(--grafit); }
.razmer-liniya { stroke: var(--akcent); stroke-width: 1.25; fill: none; }
.kontur { stroke: var(--grafit); stroke-width: 1.5; fill: none; }
.zalivka-tkan { fill: var(--tkan); }
.zalivka-stal { fill: #c9d0d6; stroke: var(--stal); stroke-width: 1; }

/* подвал */
.podval { background: var(--grafit); color: #cfd4d8; padding-block: 36px; font-size: var(--t-s); }
.podval a { color: #fff; text-decoration: none; }
.podval__set { display: grid; gap: 24px; }
@media (min-width: 768px) { .podval__set { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.podval h3 { color: #fff; font-size: var(--t-s); margin-bottom: 10px; }
.podval ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

/* липкая панель действий на мобильном */
.deystviya-mob { position: fixed; inset: auto 0 0; z-index: 30; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px var(--pole) calc(10px + env(safe-area-inset-bottom)); background: var(--list); border-top: 1px solid var(--liniya); }
@media (min-width: 1024px) { .deystviya-mob { display: none; } }
body.s-paneliu { padding-bottom: 76px; }
@media (min-width: 1024px) { body.s-paneliu { padding-bottom: 0; } }

/* сетки контента */
.dve { display: grid; gap: 24px; }
@media (min-width: 900px) { .dve { grid-template-columns: 1fr 1fr; gap: 40px; } }
.tri { display: grid; gap: 16px; }
@media (min-width: 900px) { .tri { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.kartochka { border: 1px solid var(--liniya); border-radius: var(--radius-l); padding: 18px; }
.metka { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: var(--t-xs); background: var(--sektsiya); color: var(--grafit); }
.metka--ok { background: #e6f2ea; color: var(--ok); }
.metka--akcent { background: var(--akcent-fon); color: var(--akcent-temn); }
.statya { max-width: 72ch; }
.statya h2 { font-size: var(--t-xl); margin-top: 1.6em; }
.statya img, .statya .shema { margin: 1.2em 0; }
.soderzhanie { font-size: var(--t-s); border-left: 2px solid var(--liniya); padding-left: 14px; margin: 0 0 24px; }
.soderzhanie ol { margin: 0; padding-left: 18px; }

/* --- добавлено в Э2: мобильное меню, ошибки формы, модели станков, материалы --- */
.menyu-mob { border-top: 1px solid var(--liniya); background: var(--list); }
.menyu-mob .konteyner { display: grid; gap: 2px; padding-block: 8px; }
.menyu-mob a { padding: 12px 4px; text-decoration: none; border-bottom: 1px solid var(--liniya); font-weight: 500; }
.menyu-mob a:last-child { border-bottom: 0; }
.oshibka { color: var(--oshibka); font-size: var(--t-s); margin: 0; }
.modeli { display: grid; gap: 12px; }
@media (min-width: 768px) { .modeli { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.model { display: block; text-decoration: none; border: 1px solid var(--liniya); border-radius: var(--radius-l); padding: 14px 16px; }
.model:hover { border-color: var(--grafit); }
.model h3 { font-size: var(--t-m); margin-bottom: 6px; }
.model dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: var(--t-s); }
.model dt { color: var(--stal); } .model dd { margin: 0; }
.sredy { display: inline-flex; gap: 4px; }
.sredy span { width: 10px; height: 10px; border-radius: 50%; background: var(--liniya); display: inline-block; }
.sredy span.da { background: var(--ok); }
.foto { aspect-ratio: 4 / 3; border-radius: var(--radius-l); background: var(--sektsiya); display: grid; place-items: center; color: var(--stal); font-size: var(--t-s); text-align: center; padding: 20px; border: 1px dashed var(--liniya); }
.keys-set { display: grid; gap: 16px; }
@media (min-width: 768px) { .keys-set { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.cifry { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .cifry { grid-template-columns: repeat(4, 1fr); } }
.cifry strong { display: block; font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.cifry span { color: var(--stal); font-size: var(--t-s); }
.statya-set { display: grid; gap: 32px; }
@media (min-width: 1024px) { .statya-set { grid-template-columns: 7fr 4fr; gap: 56px; align-items: start; } .bokovaya { position: sticky; top: 76px; } }
.spisok-statey { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.spisok-statey a { font-weight: 600; text-decoration: none; }