/*
Theme Name: Elektronasos
Description: Кастомна тема для ТОВ «ЕЛЕКТРОНАСОС ПЛЮС» — каталог насосного обладнання та автоматики.
Author: Elektronasos
Version: 1.0
Text Domain: elektronasos
*/

:root{
  --ink:#101418;
  --ink-soft:#6B7176;
  --muted:#9AA0A6;
  --line:#EEEFF0;
  --line-2:#E4E9EC;
  --line-3:#D8DADC;
  --line-4:#C9CDD1;
  --surface:#F1F5F7;
  --surface-2:#F8FAFB;
  --white:#FFFFFF;
  --accent:#3369E7;
  --accent-2:#8AA9F2;   /* lighter tint of the accent, used on dark backgrounds */
  --accent-soft:#EEF3FE; /* faint accent wash for tab strips and highlights */
  --dark:#101418;
  --dark-2:#171C21;
  --dark-line:#23282D;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:"Montserrat", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--ink); text-decoration:none; }
a:hover{ color:var(--accent); }
img{ max-width:100%; display:block; }
h1,h2,h3,p{ margin:0; }
button{ font-family:inherit; }

.mono{ font-family:"Montserrat", system-ui, sans-serif; font-variant-numeric:tabular-nums; }
.wrap{ padding:0 72px; }
.hidden{ display:none !important; }

/* Grid and flex children default to min-width:auto, so a long word refuses to
   shrink and pushes its whole section past the viewport. These containers must
   be allowed to narrow instead. */
.services-head > *, .sales-head > *, .popular-head > *, .select-head > *,
.swap-grid > *, .contacts-grid > *, .about-stats > *, .select-box > *,
.hero-bottom > *, .cat-intro > *, .product-top > *, .service-card > *,
.category-card > *, .footer-grid > *, .spec-row > *, .contact-row > *,
.headline-specs > *, .cat-specs > *, .swap-metrics > *, .result-strip > *,
.product-card .specs > *, .match-row > *{ min-width:0; }

/* Last-resort guard: a single unbreakable word never widens the page.
   Ukrainian compounds like "загальнопромислових" are long enough to do it. */
h1, h2, h3, .h2, .cc-title, .sc-title, .modal-title,
.service-row .title, .service-row .desc, .sc-text, .cc-desc,
.product-card .name, .product-card .summary, .sale-card .title,
.match-row .name, .swap-top .name{ overflow-wrap:break-word; }

/* ---------- motion ----------
   Elements marked .reveal start shifted and transparent; JS adds .in when they
   scroll into view. Without JS they are shown by the .no-js rule below, so the
   content is never trapped invisible. */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity 700ms cubic-bezier(.2,.6,.2,1), transform 700ms cubic-bezier(.2,.6,.2,1);
  transition-delay:var(--d, 0ms);
  will-change:opacity, transform;
}
.reveal.in{ opacity:1; transform:none; }
html.no-js .reveal{ opacity:1; transform:none; }

/* hero entrance */
@keyframes heroIn{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
.hero-copy > *{ animation:heroIn 800ms cubic-bezier(.2,.6,.2,1) both; }
.hero-copy > *:nth-child(1){ animation-delay:60ms; }
.hero-copy > *:nth-child(2){ animation-delay:150ms; }
.hero-copy > *:nth-child(3){ animation-delay:240ms; }
.hero-copy > *:nth-child(4){ animation-delay:330ms; }
.hero-copy > *:nth-child(5){ animation-delay:420ms; }
.hero-bottom{ animation:heroIn 800ms 520ms cubic-bezier(.2,.6,.2,1) both; }

/* slide copy re-animates on each hero change */
.hero-copy.swap > *{ animation:heroIn 620ms cubic-bezier(.2,.6,.2,1) both; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero-copy > *, .hero-bottom, .hero-copy.swap > *{ animation:none; }
  .marquee-track{ animation:none; }
  .hero-scroll span{ animation:none; }
  .hero-media .layer img{ transition:none; transform:none; }
  *{ scroll-behavior:auto !important; }
}

@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes drawCurve{ from{ stroke-dashoffset:900; } to{ stroke-dashoffset:0; } }
@keyframes dutyPulse{ 0%,100%{ r:5; opacity:1; } 50%{ r:9; opacity:0.5; } }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.site-header .bar{
  padding:0 72px; height:80px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ cursor:pointer; display:flex; align-items:baseline; gap:9px; }
.brand span.name{ font-weight:700; font-size:20px; letter-spacing:0.02em; }
.brand span.dot{ width:6px; height:6px; background:var(--accent-2); display:block; }
.main-nav{ display:flex; gap:36px; font-size:14px; align-items:center; }
.main-nav .tel{ font-weight:600; font-size:15px; color:var(--accent); white-space:nowrap; }
.burger{ display:none; }

/* ---------- mobile navigation ---------- */
.burger{
  display:none; background:none; border:none; cursor:pointer;
  width:44px; height:44px; padding:10px; margin-right:-10px;
  flex-direction:column; justify-content:center; gap:5px;
}
.burger span{ display:block; height:2px; background:var(--ink); }

.mobile-menu{ position:fixed; inset:0; z-index:60; }
.mobile-menu[hidden]{ display:none; }
.mm-backdrop{
  position:absolute; inset:0; background:rgba(10,14,18,0.55);
  opacity:0; transition:opacity 240ms ease;
}
.mobile-menu.open .mm-backdrop{ opacity:1; }
.mm-panel{
  position:absolute; top:0; right:0; bottom:0; width:min(86vw, 380px);
  background:#fff; padding:28px 28px 36px;
  display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform 280ms cubic-bezier(.2,.6,.2,1);
  overflow-y:auto;
}
.mobile-menu.open .mm-panel{ transform:none; }
.mm-close{
  align-self:flex-end; background:none; border:none; cursor:pointer;
  font-size:30px; line-height:1; color:var(--muted); width:44px; height:44px;
}
.mm-close:hover{ color:var(--ink); }
.mm-links{ display:flex; flex-direction:column; margin-top:12px; }
.mm-links a{
  font-size:21px; font-weight:600; letter-spacing:-0.01em;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.mm-links a:hover{ color:var(--accent); }
.mm-foot{ margin-top:auto; padding-top:32px; display:flex; flex-direction:column; gap:10px; }
.mm-tel{ font-size:19px; font-weight:600; color:var(--accent); }
.mm-foot .btn{ margin-top:14px; text-align:center; }

@media (max-width: 900px){
  .site-header .bar{ padding:0 20px; }
  .main-nav{ display:none; }
  .burger{ display:flex; }
}
@media (min-width: 901px){
  .mobile-menu{ display:none !important; }
}

/* ---------- buttons / chips ---------- */
.btn{
  background:var(--dark); color:var(--white);
  padding:18px 32px; font-size:13.5px; letter-spacing:0.04em;
  cursor:pointer; display:inline-block; border:none;
}
.btn:hover{ background:var(--accent); color:var(--white); }
.btn-light{ background:var(--white); color:var(--ink); }
.btn-light:hover{ background:var(--accent-2); }
.icon-btn{
  width:52px; height:52px; border:1px solid var(--line-3);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:17px; color:var(--ink-soft); background:none;
}
.icon-btn:hover{ border-color:var(--ink); color:var(--ink); }
.chip{
  border:1px solid var(--line-3); background:var(--white); color:var(--ink);
  padding:12px 18px; font-size:14.5px; cursor:pointer; user-select:none;
}
.chip.active{ border-color:var(--accent); background:var(--accent); color:var(--white); }

/* ---------- section shells ---------- */
section{ width:100%; }
.section-pad{ padding:144px 72px; }
.kicker{ font-size:12px; letter-spacing:0.18em; color:var(--accent); font-weight:600; }
.h2{ font-size:clamp(27px, 5.4vw, 44px); line-height:1.02; letter-spacing:-0.03em; font-weight:700; }

/* ---------- hero: one full-viewport slide ---------- */
.hero{
  position:relative;
  min-height:calc(100vh - 80px);
  display:flex; align-items:stretch;
  background:var(--surface);
  overflow:hidden;
}

/* A single wide photo behind the whole slide. The copy sits on the left, so a
   white scrim fades across the left third to keep the dark text readable
   whatever the photo does there. */
.hero-bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero-bg picture{ display:contents; }
.hero-bg .layer{ position:absolute; inset:0; opacity:0; transition:opacity 900ms ease; }
.hero-bg .layer.active{ opacity:1; }
.hero-bg img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center right;
}
.hero-bg .layer.active img{ animation:heroZoom 14s ease-out both; }
@keyframes heroZoom{ from{ transform:scale(1.06); } to{ transform:scale(1); } }
/* A light wash only — these photos already have an empty pale left side, so a
   heavy scrim would erase the product shot instead of aiding the text. */
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(96deg,
    rgba(255,255,255,0.88) 0%,
    rgba(255,255,255,0.72) 26%,
    rgba(255,255,255,0.34) 44%,
    rgba(255,255,255,0.06) 62%,
    rgba(255,255,255,0) 78%);
}
/* With a background photo the per-slide product cut-outs are redundant */
.hero.has-bg .hero-media{ display:none; }
.hero.has-bg{ background:var(--surface); }
.hero.has-bg .hero-copy{ max-width:min(52vw, 900px); }

@media (prefers-reduced-motion: reduce){
  .hero-bg img{ animation:none; }
}

/* Product photography is shot on white, so the slide stays light and the
   image sits to one side rather than being cropped behind the copy. */
.hero-media{ position:absolute; inset:0; pointer-events:none; }
.hero-media .layer{ position:absolute; inset:0; opacity:0; transition:opacity 900ms ease; }
.hero-media .layer.active{ opacity:1; }
.hero-media .layer img{
  position:absolute; top:0; right:0; height:100%; width:46%;
  object-fit:contain; object-position:center;
  padding:8vh 3vw 14vh 2vw;
  transform:scale(1.04); transition:transform 1200ms cubic-bezier(.2,.6,.2,1);
}
.hero-media .layer.active img{ transform:scale(1); }
/* keeps the headline readable where it overlaps the photo on narrow screens */
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--surface) 34%, rgba(241,245,247,0.72) 50%, rgba(241,245,247,0) 68%);
}

.hero-inner{
  position:relative; z-index:2; width:100%;
  padding:0 72px; display:flex; flex-direction:column; justify-content:center;
}
.hero-copy{ max-width:min(48vw, 820px); padding:96px 0 0; }
.hero-top{ display:flex; align-items:center; gap:20px; margin-bottom:28px; max-width:560px; }
.hero-top .rule{ flex:1; height:1px; background:var(--line-4); }
.hero-counter{ font-size:13px; color:var(--muted); }
.hero-title{
  font-size:clamp(38px, 4.6vw, 76px); line-height:1.0; letter-spacing:-0.045em; font-weight:700;
  margin:0 0 26px; text-wrap:balance;
}
.hero-text{ font-size:18px; line-height:1.6; color:var(--ink-soft); margin:0 0 30px; max-width:62ch; }
.hero-spec{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--line-3); padding-top:20px; margin-bottom:34px; max-width:620px;
}
.hero-spec .spec-label{ font-size:11.5px; letter-spacing:0.14em; color:var(--muted); }
.hero-spec .spec{ font-family:"Montserrat", system-ui, sans-serif; font-variant-numeric:tabular-nums; font-size:20px; font-weight:500; }
.hero-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.btn-outline{ background:transparent; color:var(--ink); border:1px solid var(--line-3); }
.btn-outline:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

.hero-bottom{
  margin-top:auto; padding:48px 0 40px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
}
.hero-tiles{ display:flex; gap:14px; }
.hero-tile{
  position:relative; width:190px; height:104px; background:#fff; cursor:pointer; overflow:hidden;
  border:1px solid var(--line); transition:border-color 200ms ease, transform 300ms ease;
}
.hero-tile:hover{ border-color:var(--accent); transform:translateY(-3px); }
.hero-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:10px 10px 34px; }
.hero-tile .fade{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.94) 74%);
}
.hero-tile .cap{ position:absolute; left:12px; right:12px; bottom:9px; pointer-events:none; }
.hero-tile .cap .num{ font-size:10px; color:var(--muted); margin-bottom:3px; }
.hero-tile .cap .label{
  font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hero-nav{ display:flex; gap:8px; flex:0 0 auto; }

.hero-scroll{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:3;
  width:26px; height:42px; border:1px solid var(--line-4); border-radius:14px;
  display:flex; justify-content:center; padding-top:8px;
}
.hero-scroll span{ width:3px; height:8px; background:var(--accent); border-radius:2px; animation:scrollHint 1.8s ease-in-out infinite; }
@keyframes scrollHint{ 0%{ opacity:0; transform:translateY(-4px);} 40%{opacity:1;} 100%{ opacity:0; transform:translateY(14px);} }

@media (max-width:1100px){
  .hero-media .layer img{ width:46%; padding:10vh 3vw 20vh; }
  .hero-tile{ width:150px; height:92px; }
}
/* On a phone a 16:9 photo used as a full-bleed background has to be cropped to
   a tall slice, which both mangles the product shot and puts type over it.
   Instead the photo becomes its own band below the copy, at its real ratio. */
@media (max-width:820px){
  .hero.has-bg .hero-bg{
    position:relative; inset:auto; order:2;
    width:100%; margin-top:32px;
    /* set from the active slide's phone image, so any shape fits exactly */
    aspect-ratio:var(--hero-m-ratio, 16/9);
    background:var(--surface);
  }
  .hero.has-bg .hero-bg picture{ position:absolute; inset:0; display:block; }
  .hero.has-bg .hero-bg::after{ display:none; }
  .hero.has-bg .hero-bg img{ object-position:center; }
  .hero.has-bg .hero-copy{ max-width:none; }
  .hero.has-bg .hero-inner{ order:1; }
}

@media (max-width:820px){
  .hero{ min-height:auto; flex-direction:column; }
  .hero-inner{ padding:0 20px; order:1; }
  .hero-copy{ padding-top:56px; }
  .hero-media .layer img{
    position:relative; width:100%; height:38vh; padding:0; margin-top:8vh;
  }
  .hero-media{ position:relative; inset:auto; order:2; }
  .hero-media::after{ display:none; }
  .hero-title{ font-size:clamp(30px,8vw,44px); }
  .hero-bottom{ flex-direction:column; align-items:stretch; padding-bottom:32px; }
  .hero-tiles{ overflow-x:auto; }
  .hero-scroll{ display:none; }
}

/* ---------- marquee ---------- */
.marquee-wrap{ border-bottom:1px solid var(--line); padding:36px 0; overflow:hidden; }
.marquee-track{ display:flex; width:200%; animation:marquee 38s linear infinite; }
.marquee-track span{ flex:0 0 auto; padding:0 44px; font-size:22px; font-weight:600; letter-spacing:-0.01em; color:var(--line-4); white-space:nowrap; }

/* ---------- popular carousel ---------- */
.popular-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:56px; }
.popular-viewport{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.popular-viewport::-webkit-scrollbar{ display:none; }
.popular-track{ display:flex; gap:32px; scroll-behavior:smooth; }
.product-card{ flex:0 0 calc((100% - 96px) / 4); scroll-snap-align:start; cursor:pointer; background:var(--white); border:1px solid var(--line); }
.product-card:hover{ border-color:var(--accent); }
.product-card .thumb{ position:relative; aspect-ratio:4/3; background:var(--surface); }
.product-card .thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:18px; }
.product-card .thumb .ph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:13px; text-align:center; padding:20px;
}
.product-card .brand-tag{
  position:absolute; top:16px; left:16px; font-size:10.5px; letter-spacing:0.12em; font-weight:600;
  color:var(--accent); background:var(--white); padding:7px 12px; pointer-events:none;
}
.product-card .name{ font-size:21px; font-weight:600; margin:22px 26px 0; }
.product-card .summary{ font-size:14px; color:var(--muted); margin:8px 26px 0; }
.product-card .specs{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; border-top:1px solid var(--line);
  margin:18px 26px 0; padding:16px 0 26px;
}
.product-card .specs .v{ font-size:18px; font-weight:500; }
.product-card .specs .k{ font-size:10px; letter-spacing:0.01em; white-space:nowrap; color:var(--muted); margin-top:4px; }
.product-card .price-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  margin:0 26px 24px;
}
.product-card .price{ font-family:"Montserrat", system-ui, sans-serif; font-variant-numeric:tabular-nums; font-size:20px; font-weight:600; }
.product-card .price.on-request{ font-size:15px; font-weight:500; color:var(--ink-soft); }
.stock{ font-size:11px; letter-spacing:0.08em; white-space:nowrap; }
.stock.in{ color:var(--accent); }
.stock.out{ color:var(--muted); }

@media (max-width: 1100px){ .product-card{ flex:0 0 calc((100% - 32px) / 2); } }
@media (max-width: 640px){ .product-card{ flex:0 0 100%; } }

/* ---------- about ---------- */
.about-section{ min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.about-copy{ padding:144px 72px; display:flex; flex-direction:column; justify-content:center; gap:28px; }
.about-copy h2{ font-size:clamp(28px, 5.8vw, 48px); line-height:1.03; letter-spacing:-0.03em; font-weight:700; max-width:560px; }
.about-copy p.lead{ font-size:18px; line-height:1.65; color:var(--ink-soft); max-width:540px; }
.about-copy p.sub{ font-size:16px; line-height:1.65; color:var(--muted); max-width:540px; }
.about-stats{ display:grid; grid-template-columns:repeat(2, 1fr); gap:32px; border-top:1px solid var(--line); padding-top:36px; margin-top:8px; }
.about-stats .stat-value{ display:flex; align-items:baseline; gap:6px; }
.about-stats .stat-value .n{ font-size:clamp(30px, 6vw, 44px); font-weight:500; letter-spacing:-0.02em; color:var(--ink); }
.about-stats .stat-value .u{ font-size:18px; color:var(--accent); }
.about-stats .stat-label{ font-size:14.5px; color:var(--ink-soft); line-height:1.5; margin-top:8px; max-width:230px; }
.about-photo{ position:relative; background:var(--surface); overflow:hidden; }
.about-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.about-photo .photo-hint{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:24px; text-align:center; color:var(--muted); font-size:14px;
}

@media (max-width: 900px){
  .about-section{ grid-template-columns:1fr; }
  .about-photo{ min-height:320px; }
}

/* ---------- services teaser (dark) ---------- */
.services-section{ min-height:100vh; background:var(--dark); color:#fff; padding:144px 72px; display:flex; flex-direction:column; justify-content:center; }
.services-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:64px; }
.services-head h2{ font-size:clamp(28px, 5.8vw, 48px); line-height:1.02; letter-spacing:-0.03em; font-weight:700; color:#fff; }
.services-head .link{ font-size:15px; color:var(--accent-2); cursor:pointer; }
.services-list{ border-top:1px solid var(--dark-line); }
.service-row{
  border-bottom:1px solid var(--dark-line); padding:44px 24px 44px 0; display:grid;
  grid-template-columns:64px 1fr 1fr; gap:56px; align-items:start; cursor:pointer;
  transition:background 220ms ease, padding-left 220ms ease;
}
/* The rows are <a> elements, so the global link colour would otherwise paint
   the titles #101418 — the same value as this section's background, leaving
   them invisible until :hover recoloured them. Set the colours explicitly. */
.services-section a.service-row,
.services-section a.service-row:hover{ color:#fff; }
.service-row .num{ font-size:14px; color:var(--accent-2); transition:color 220ms ease; }
.service-row .title{ font-size:clamp(20px, 4.4vw, 26px); letter-spacing:-0.02em; font-weight:600; transition:color 220ms ease; }
.service-row .desc{ font-size:15.5px; line-height:1.6; max-width:620px; }

/* dark variant only — the standalone Послуги page renders these rows on white */
.services-section .service-row .title{ color:#fff; }
.services-section .service-row .desc{ color:#A8AFB5; }
.services-section .service-row:hover{ background:var(--dark-2); padding-left:20px; }
.services-section .service-row:hover .title{ color:var(--accent-2); }
.services-section .service-row:hover .num{ color:#fff; }

@media (max-width:900px){ .service-row{ grid-template-columns:1fr; gap:12px; } }

/* ---------- services page: cards ---------- */
.services-cards{
  padding:0 72px 120px;
  display:grid; grid-template-columns:repeat(2, 1fr); gap:28px;
}
.service-card{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); padding:40px 38px 34px;
  transition:border-color 240ms ease, transform 240ms ease, box-shadow 240ms ease;
}
.service-card:hover{
  border-color:var(--accent); transform:translateY(-4px);
  box-shadow:0 18px 40px -24px rgba(16,20,24,0.32);
}
.sc-num{
  font-size:13px; font-weight:600; color:var(--accent);
  letter-spacing:0.1em; margin-bottom:20px;
}
.sc-title{ font-size:25px; line-height:1.18; letter-spacing:-0.02em; font-weight:600; margin:0 0 16px; }
.sc-text{ font-size:15.5px; line-height:1.65; color:var(--ink-soft); margin:0 0 28px; }
.service-cta{ margin-top:auto; }
.service-cta .btn{ white-space:nowrap; padding:15px 22px; font-size:12.5px; }

/* Reveal the button on hover, but only where hovering exists — on touch there
   is no hover state, so the button must simply always be visible there.
   Opacity (not display) keeps the card height fixed, so nothing jumps. */
@media (hover: hover) and (pointer: fine){
  .service-cta{
    opacity:0; transform:translateY(6px); pointer-events:none;
    transition:opacity 220ms ease, transform 220ms ease;
  }
  .service-card:hover .service-cta,
  .service-card:focus-within .service-cta{ opacity:1; transform:none; pointer-events:auto; }
}

@media (max-width:900px){
  /* minmax(0,1fr), not 1fr: an auto minimum lets the track outgrow the screen */
  .services-cards{ grid-template-columns:minmax(0,1fr); padding-left:20px; padding-right:20px; gap:20px; }
  .service-card{ padding:32px 24px 28px; }
}

/* ---------- advantages ---------- */
.advantages-section{ min-height:100vh; padding:144px 72px; display:flex; flex-direction:column; justify-content:center; }
.advantages-section h2{ margin:0 0 72px; max-width:820px; }
.advantages-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); }
.advantage{ background:#fff; padding:44px 40px 48px; }
.advantage .metric{ font-size:clamp(28px, 5.4vw, 40px); font-weight:500; color:var(--accent); }
.advantage .title{ font-size:22px; font-weight:600; margin-top:20px; }
.advantage .text{ font-size:15px; color:var(--ink-soft); line-height:1.6; margin-top:12px; }

@media (max-width:900px){ .advantages-grid{ grid-template-columns:1fr; } }

/* ---------- sales teaser / full ---------- */
.sales-section{ min-height:100vh; padding:144px 72px; display:flex; flex-direction:column; justify-content:center; }
.sales-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:56px; }
.sales-head .link{ font-size:15px; color:var(--accent); cursor:pointer; }
.sales-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1px; background:var(--line-2); }
.sale-card{ background:#fff; padding:44px 40px; display:flex; flex-direction:column; gap:16px; }
.sale-card .term{ font-size:12px; letter-spacing:0.12em; color:var(--accent-2); }
.sale-card .title{ font-size:clamp(21px, 4vw, 28px); font-weight:600; letter-spacing:-0.02em; line-height:1.15; }
.sale-card .text{ font-size:15.5px; color:var(--ink-soft); line-height:1.6; }

.sales-full-list .sale-row{
  border-top:1px solid var(--line); padding:48px 0; display:grid;
  grid-template-columns:240px 1fr; gap:56px; align-items:start;
}
.sales-full-list .sale-row .term{ font-size:12.5px; letter-spacing:0.12em; color:var(--accent); }
.sales-full-list .sale-row .title{ font-size:clamp(21px, 4vw, 28px); letter-spacing:-0.02em; font-weight:600; margin-bottom:18px; max-width:820px; }
.sales-full-list .sale-row .text{ font-size:16.5px; color:var(--ink-soft); line-height:1.7; max-width:820px; }

@media (max-width:900px){
  .sales-grid{ grid-template-columns:1fr; }
  .sales-full-list .sale-row{ grid-template-columns:1fr; gap:16px; }
}

/* ---------- ecv swap ---------- */
.swap-section{ background:var(--surface-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:144px 72px; }
.swap-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:100px; align-items:start; }
.swap-grid h2{ font-size:clamp(26px, 5.2vw, 44px); line-height:1.02; letter-spacing:-0.03em; font-weight:700; margin:0 0 24px; }
.swap-grid p{ font-size:17px; line-height:1.65; color:var(--ink-soft); margin:0 0 32px; max-width:480px; }
.swap-options{ display:flex; flex-wrap:wrap; gap:8px; }
.swap-card{ background:#fff; border:1px solid var(--line); padding:48px 44px; }
.swap-top{ display:grid; grid-template-columns:1fr 40px 1fr; gap:20px; align-items:center; border-bottom:1px solid var(--line); padding-bottom:32px; }
.swap-top .lbl{ font-size:11.5px; letter-spacing:0.12em; color:var(--muted); margin-bottom:12px; }
.swap-top .lbl.acc{ color:var(--accent); }
.swap-top .name{ font-size:22px; font-weight:600; }
.swap-top .name.link{ cursor:pointer; color:var(--accent); }
.swap-top .kw{ font-size:clamp(22px, 4.4vw, 30px); font-weight:500; margin-top:14px; }
.swap-top .arrow{ font-size:22px; color:var(--accent); text-align:center; }
.swap-metrics{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; padding-top:32px; }
.swap-metrics .v{ font-size:clamp(24px, 4.8vw, 36px); font-weight:500; }
.swap-metrics .v.acc{ color:var(--accent); }
.swap-metrics .k{ font-size:12.5px; color:var(--muted); margin-top:8px; }
.swap-note{ font-size:14px; color:var(--muted); line-height:1.6; margin-top:28px; }

@media (max-width:900px){ .swap-grid{ grid-template-columns:1fr; gap:48px; } }

/* ---------- pump selector ---------- */
.select-section{ padding:144px 72px; width:100%; }
.select-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:48px; gap:24px; }
.select-head h2{ font-size:clamp(26px, 5.2vw, 44px); line-height:1.02; letter-spacing:-0.03em; font-weight:700; }
.select-head .note{ font-size:15px; color:var(--muted); max-width:300px; line-height:1.6; text-align:right; }
.select-box{ background:#fff; border:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; }
.select-form{ padding:44px 40px; display:flex; flex-direction:column; gap:34px; }
.field-label{ font-size:12.5px; letter-spacing:0.12em; color:var(--muted); margin-bottom:14px; }
.field-row{ display:flex; flex-wrap:wrap; gap:8px; }
.slider-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; }
.slider-row .val{ font-size:24px; font-weight:500; }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:2px; background:var(--line-4); outline:none; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; background:var(--accent); cursor:pointer; border-radius:0; }
input[type=range]::-moz-range-thumb{ width:20px; height:20px; background:var(--accent); cursor:pointer; border:none; border-radius:0; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.result-strip{ border-top:1px solid var(--line); padding-top:26px; display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.result-strip .v{ font-size:26px; font-weight:500; }
.result-strip .v.acc{ color:var(--accent); }
.result-strip .k{ font-size:11.5px; color:var(--muted); margin-top:6px; }

.select-chart{ background:var(--surface-2); border-left:1px solid var(--line); padding:44px 40px; display:flex; flex-direction:column; gap:32px; }
.matches-title{ font-size:12.5px; letter-spacing:0.12em; color:var(--muted); margin-bottom:4px; }
.match-row{
  border-top:1px solid var(--line-2); padding:20px 0; cursor:pointer; display:grid;
  grid-template-columns:1fr auto; gap:20px; align-items:center;
}
.match-row:hover{ background:var(--surface); }
.match-row .name-line{ display:flex; gap:12px; align-items:baseline; }
.match-row .name{ font-size:19px; font-weight:600; }
.match-row .badge{ font-size:11px; letter-spacing:0.1em; }
.match-row .reason{ font-size:14px; color:var(--ink-soft); margin-top:6px; line-height:1.55; }
.match-row .cta{ font-size:14px; color:var(--accent); }
.no-match{ border-top:1px solid var(--line-2); padding:20px 0; font-size:15px; color:var(--ink-soft); line-height:1.6; }

@media (max-width:900px){
  .select-box{ grid-template-columns:1fr; }
  .select-chart{ border-left:none; border-top:1px solid var(--line); }
  .select-head{ flex-direction:column; align-items:flex-start; }
  .select-head .note{ text-align:left; }
}

/* ---------- contacts ---------- */
.contacts-section{ min-height:90vh; padding:144px 72px; display:flex; align-items:center; }
.contacts-grid{ width:100%; display:grid; grid-template-columns:1fr 1fr; gap:100px; }
.contacts-grid h2{ font-size:clamp(28px, 5.8vw, 48px); line-height:1.02; letter-spacing:-0.03em; font-weight:700; margin:0 0 28px; max-width:520px; }
.contacts-grid p{ font-size:17px; line-height:1.6; color:var(--ink-soft); margin:0 0 40px; max-width:460px; }
.contacts-grid > div:first-child{ align-self:center; }
.contacts-list{ display:flex; flex-direction:column; justify-content:center; }
.contact-row{ border-top:1px solid var(--line); padding:26px 0; display:flex; justify-content:space-between; align-items:baseline; gap:24px; }
.contact-row:last-child{ border-bottom:1px solid var(--line); }
.contact-row .k{ font-size:14px; color:var(--muted); }
.contact-row .v{ font-size:17px; text-align:right; }
.contact-row .v.mono{ font-size:clamp(18px, 3.6vw, 24px); font-weight:500; }
.contact-row .socials{ display:flex; gap:20px; font-size:16px; }

@media (max-width:900px){ .contacts-grid{ grid-template-columns:1fr; gap:48px; } }

/* ---------- breadcrumb / page intros ---------- */
/* Product titles are long; the trail wraps instead of widening the page. */
.crumb{ font-size:13px; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px 8px; margin-bottom:56px; }
.crumb .cur{ color:var(--ink); min-width:0; overflow-wrap:anywhere; }
.intro{ padding:96px 72px 72px; width:100%; }
.intro h1{ font-size:clamp(29px, 6vw, 48px); line-height:1.0; letter-spacing:-0.04em; font-weight:700; margin:0 0 28px; max-width:900px; }
.intro p{ font-size:19px; line-height:1.65; color:var(--ink-soft); margin:0; max-width:720px; }

/* ---------- category page ---------- */
.cat-tabs{ display:flex; gap:0; overflow-x:auto; border-bottom:1px solid var(--line); padding:0 72px; }
.cat-tab{ padding:20px 22px; font-size:14px; white-space:nowrap; border-bottom:2px solid transparent; cursor:pointer; }
.cat-tab.active{ color:var(--ink); border-color:var(--accent); }
.cat-tab:not(.active){ color:var(--muted); }
.cat-intro{ padding:72px 72px 56px; display:grid; grid-template-columns:1.3fr 1fr; gap:56px; }
.cat-intro .tag{ font-size:12px; letter-spacing:0.14em; color:var(--accent); font-weight:600; margin-bottom:20px; }
.cat-intro h1{ font-size:clamp(26px, 5.2vw, 42px); line-height:1.04; letter-spacing:-0.03em; font-weight:700; margin:0 0 22px; }
.cat-intro .desc{ font-size:16.5px; line-height:1.65; color:var(--ink-soft); max-width:620px; }
.cat-specs{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-content:start; border-top:1px solid var(--line); padding-top:28px; }
.cat-specs .v{ font-size:24px; font-weight:500; font-family:"Montserrat", system-ui, sans-serif; font-variant-numeric:tabular-nums; }
.cat-specs .k{ font-size:11.5px; color:var(--muted); margin-top:6px; }
.cat-grid{ padding:0 72px 120px; display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }

@media (max-width:1100px){ .cat-grid{ grid-template-columns:repeat(2,1fr); } .cat-intro{ grid-template-columns:1fr; } }
@media (max-width:640px){ .cat-grid{ grid-template-columns:minmax(0,1fr); } }

.pagination{ display:flex; flex-wrap:wrap; gap:8px; padding:0 72px 120px; }
.pagination .page-numbers{
  min-width:48px; height:48px; padding:0 14px; border:1px solid var(--line-3);
  display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--ink-soft);
}
.pagination .page-numbers:hover{ border-color:var(--ink); color:var(--ink); }
.pagination .page-numbers.current{ background:var(--accent); border-color:var(--accent); color:#fff; }
.pagination .dots{ border-color:transparent; }
@media (max-width:640px){ .pagination{ padding-left:20px; padding-right:20px; } }

/* ---------- series performance tables ---------- */
.series-note{ font-size:14.5px; color:var(--muted); line-height:1.6; margin:0 0 24px; }

/* The exploded drawing is very tall, so it is capped by height and centred
   rather than stretched to the panel width. */
.schema-figure{
  margin:0; display:flex; flex-direction:column; align-items:center; gap:16px;
  background:var(--surface-2); border:1px solid var(--line); padding:32px 20px;
}
.schema-figure a{ display:block; }
.schema-figure figcaption{ font-size:13px; color:var(--muted); text-align:center; }
/* Cap by height in px, not vh: a vh value can resolve to zero before layout
   settles, which would collapse the drawing to nothing. */
.schema-figure img{ width:auto; max-width:100%; max-height:760px; height:auto; }
@media (max-width:640px){
  .schema-figure{ padding:20px 12px; }
  .schema-figure img{ max-height:560px; }
}
.table-scroll{ overflow-x:auto; margin-bottom:40px; border:1px solid var(--line); }
.table-scroll:last-child{ margin-bottom:0; }
.table-scroll table{ border-collapse:collapse; width:100%; min-width:640px; font-size:13px; }
.table-scroll td, .table-scroll th{
  border:1px solid var(--line); padding:9px 12px; text-align:center; white-space:nowrap;
  font-family:"Montserrat", system-ui, sans-serif; font-variant-numeric:tabular-nums;
}
.table-scroll th, .table-scroll td strong{ font-family:"Montserrat", system-ui, sans-serif; font-weight:600; }
.table-scroll tr:first-child td{ background:var(--surface); }

/* product prose */
.product-info .desc p{ margin:0 0 14px; }
.product-info .desc ul{ margin:0 0 14px; padding-left:20px; }
.product-info .desc li{ margin-bottom:7px; }
.product-info .desc h2, .product-info .desc h3{ font-size:19px; font-weight:600; margin:20px 0 12px; color:var(--ink); }

/* ---------- catalog root: category cards ---------- */
.category-grid{
  padding:0 72px 120px;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:32px;
}
.category-card{
  display:flex; flex-direction:column;
  border:1px solid var(--line); background:#fff;
  transition:border-color 240ms ease, transform 240ms ease, box-shadow 240ms ease;
}
.category-card:hover{
  border-color:var(--accent); transform:translateY(-4px);
  box-shadow:0 18px 40px -24px rgba(16,20,24,0.35);
}
.cc-media{ position:relative; aspect-ratio:16/10; background:var(--surface); overflow:hidden; }
.cc-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:26px;
  transition:transform 500ms cubic-bezier(.2,.6,.2,1);
}
.category-card:hover .cc-media img{ transform:scale(1.06); }
.cc-count{
  position:absolute; top:16px; left:16px; background:#fff; color:var(--accent);
  font-size:11px; letter-spacing:0.1em; font-weight:600; padding:7px 12px;
}
.cc-body{ padding:28px 28px 30px; display:flex; flex-direction:column; flex:1; }
.cc-tag{ font-size:11px; letter-spacing:0.14em; color:var(--accent); font-weight:600; margin-bottom:14px; }
.cc-title{ font-size:23px; line-height:1.2; font-weight:600; letter-spacing:-0.02em; margin:0 0 12px; }
.cc-desc{ font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:0 0 22px; }
.cc-specs{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
  border-top:1px solid var(--line); padding-top:18px; margin-bottom:22px;
}
.cc-specs .v{ display:block; font-size:15px; font-weight:500; }
.cc-specs .k{ display:block; font-size:10px; letter-spacing:0.06em; color:var(--muted); margin-top:5px; }
.cc-go{ margin-top:auto; font-size:14px; color:var(--accent); display:inline-flex; align-items:center; gap:8px; }
.cc-go .arr{ transition:transform 240ms ease; }
.category-card:hover .cc-go .arr{ transform:translateX(5px); }

@media (max-width:1100px){ .category-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:700px){ .category-grid{ grid-template-columns:minmax(0,1fr); padding-left:20px; padding-right:20px; } }

/* ---------- product page ---------- */
.product-top{ padding:56px 72px 0; display:grid; grid-template-columns:1fr 1fr; gap:64px; }
.product-gallery .main{ position:relative; aspect-ratio:4/3; background:var(--surface); }
.product-gallery .main img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:40px; }
.product-info .brand{ font-size:12px; letter-spacing:0.14em; color:var(--accent); font-weight:600; margin-bottom:16px; }
.product-info h1{ font-size:clamp(24px, 4.8vw, 38px); line-height:1.05; letter-spacing:-0.03em; font-weight:700; margin:0 0 20px; }
.product-info .desc{ font-size:16px; line-height:1.65; color:var(--ink-soft); margin-bottom:32px; max-width:520px; }
.headline-specs{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:24px 0; margin-bottom:32px; }
.headline-specs .v{ font-size:22px; font-weight:500; font-family:"Montserrat", system-ui, sans-serif; font-variant-numeric:tabular-nums; }
.headline-specs .k{ font-size:10.5px; color:var(--muted); margin-top:6px; }
.feature-list{ display:flex; flex-direction:column; gap:10px; font-size:14.5px; color:var(--ink-soft); }
.feature-list li{ list-style:none; padding-left:18px; position:relative; }
.feature-list li::before{ content:"—"; position:absolute; left:0; color:var(--accent-2); }

.buy-box{
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:var(--surface); padding:28px 32px; margin-bottom:32px;
}
.buy-price{ font-size:clamp(25px, 5vw, 34px); font-weight:600; letter-spacing:-0.02em; }
.buy-price.on-request{ font-size:20px; font-weight:500; color:var(--ink-soft); }
.buy-box .stock{ margin-top:8px; }

/* ---------- series executions ---------- */
.h1-variant{ color:var(--accent); font-weight:600; }

.variant-pick{ margin:0 0 26px; }
.variant-pick .field-label{ margin-bottom:10px; }
.variant-hint{ font-size:13px; color:var(--muted); margin:10px 0 0; }

/* the native control is replaced wholesale: square, Montserrat, own chevron */
.select-wrap{ position:relative; display:block; }
.select-wrap::after{
  content:""; position:absolute; right:16px; top:50%; width:8px; height:8px;
  margin-top:-6px; border-right:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:rotate(45deg); pointer-events:none; transition:border-color 180ms ease;
}
.variant-select{
  appearance:none; -webkit-appearance:none;
  width:100%; border:1px solid var(--line-3); background:var(--white); color:var(--ink);
  font-family:"Montserrat", system-ui, sans-serif; font-size:14.5px; font-weight:500;
  padding:14px 44px 14px 16px; border-radius:0; cursor:pointer;
  transition:border-color 180ms ease, background 180ms ease;
}
.variant-select:hover{ border-color:var(--ink); }
.variant-select:focus{ outline:none; border-color:var(--accent); }
.variant-select:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.select-wrap:hover::after{ border-color:var(--accent); }

/* compact treatment inside a listing card */
.variant-pick.card{ margin:16px 26px 0; }
.variant-pick.card .variant-select{
  padding:11px 38px 11px 13px; font-size:13px; background:var(--surface-2);
}
.variant-pick.card .select-wrap::after{ right:14px; width:7px; height:7px; }
.variant-count{
  position:absolute; top:16px; right:16px; background:var(--white); color:var(--ink);
  font-size:10.5px; letter-spacing:0.08em; font-weight:600; padding:7px 11px;
}

@media (max-width:640px){
  .variant-pick.card{ margin-left:20px; margin-right:20px; }
}

/* ---------- hover zoom (shop-style) ---------- */
.zoomable{ overflow:hidden; cursor:zoom-in; }
.zoomable img{ transform-origin:center; transition:transform 260ms cubic-bezier(.2,.6,.2,1); will-change:transform; }
/* while panning, follow the cursor immediately instead of easing behind it */
.zoomable.zooming img{ transition:transform 90ms linear; }
@media (prefers-reduced-motion: reduce){
  .zoomable img, .zoomable.zooming img{ transition:none; }
}

/* ---------- product tabs (specs / curve) ---------- */
.product-tabs{ padding:88px 72px 0; max-width:1000px; margin:0 auto; }
.tab-strip{ display:flex; gap:4px; border-bottom:1px solid var(--line); }
.tab{
  appearance:none; background:none; border:none; cursor:pointer;
  padding:16px 26px; font-size:15px; font-weight:500; color:var(--muted);
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.tab:hover{ color:var(--ink); background:var(--accent-soft); }
.tab[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--accent); }
.tab:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.tab-panel{ padding:36px 0 0; }
.tab-panel[hidden]{ display:none; }
.curve-card{ background:#fff; border:1px solid var(--line); padding:40px; }
.curve-note{ font-size:13px; color:var(--muted); line-height:1.6; margin-top:20px; }

.spec-table{ max-width:760px; }
.spec-row{ display:flex; justify-content:space-between; border-top:1px solid var(--line); padding:18px 0; font-size:15px; }
.spec-row:last-child{ border-bottom:1px solid var(--line); }
.spec-row .k{ color:var(--muted); }
.spec-row .v{ font-weight:500; }

.related-block{ padding:0 72px 120px; }
.related-block h3{ font-size:clamp(21px, 4vw, 28px); font-weight:600; margin-bottom:32px; }
.related-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }

@media (max-width:1100px){ .product-top{ grid-template-columns:1fr; } .related-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .related-grid{ grid-template-columns:minmax(0,1fr); } .headline-specs{ grid-template-columns:repeat(2,1fr); } }

/* ---------- consultation modal ---------- */
.modal{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px; }
.modal[hidden]{ display:none; }
.modal-backdrop{
  position:absolute; inset:0; background:rgba(10,14,18,0.62); backdrop-filter:blur(3px);
  opacity:0; transition:opacity 220ms ease;
}
.modal.open .modal-backdrop{ opacity:1; }
.modal-card{
  position:relative; z-index:1; background:#fff; width:100%; max-width:520px;
  max-height:calc(100vh - 48px); overflow-y:auto; padding:44px 44px 36px;
  opacity:0; transform:translateY(14px) scale(0.985);
  transition:opacity 240ms cubic-bezier(.2,.6,.2,1), transform 240ms cubic-bezier(.2,.6,.2,1);
}
.modal.open .modal-card{ opacity:1; transform:none; }
.modal-close{
  position:absolute; top:14px; right:16px; width:38px; height:38px; border:none; background:none;
  font-size:26px; line-height:1; color:var(--muted); cursor:pointer;
}
.modal-close:hover{ color:var(--ink); }
.modal-title{ font-size:clamp(22px, 5vw, 29px); line-height:1.12; letter-spacing:-0.03em; font-weight:700; margin:0 0 12px; }
.modal-sub{ font-size:15.5px; line-height:1.6; color:var(--ink-soft); margin:0 0 26px; }
.modal-product{
  font-size:14px; color:var(--accent); background:var(--surface);
  padding:12px 16px; margin:0 0 22px; border-left:2px solid var(--accent);
}

.consult-form .field{ display:block; margin-bottom:18px; }
.field-name{ display:block; font-size:12px; letter-spacing:0.1em; color:var(--muted); margin-bottom:8px; }
.consult-form input[type=text],
.consult-form input[type=tel],
.consult-form textarea{
  width:100%; border:1px solid var(--line-3); background:#fff; padding:14px 16px;
  font-family:inherit; font-size:15.5px; color:var(--ink); border-radius:0;
  transition:border-color 180ms ease;
}
.consult-form input:focus, .consult-form textarea:focus{ outline:none; border-color:var(--accent); }
.consult-form .invalid{ border-color:#C0392B; }
.consult-form textarea{ resize:vertical; min-height:86px; }
.field-error{ display:block; font-size:13px; color:#C0392B; margin-top:6px; }
.consult-form .btn{ width:100%; text-align:center; }
.consult-form .btn[disabled]{ opacity:0.6; cursor:default; }

/* honeypot — off-screen rather than display:none so bots still fill it */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.form-status{ font-size:14.5px; line-height:1.55; margin-bottom:14px; }
.form-status.error{ color:#C0392B; }
.form-status:empty{ margin-bottom:0; }

.modal-fineprint{ font-size:12.5px; line-height:1.6; color:var(--muted); margin:16px 0 0; }
.modal-fineprint a{ color:var(--accent); }

.modal-done{ text-align:center; padding:16px 0 8px; }
.modal-done .done-mark{
  width:56px; height:56px; margin:0 auto 22px; border-radius:50%;
  background:var(--surface); color:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:26px;
}
.modal-done .btn{ margin-top:8px; }

@media (max-width:560px){
  .modal{ padding:0; align-items:flex-end; }
  .modal-card{ max-width:none; max-height:92vh; padding:36px 22px 28px; }
}

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--line); padding:96px 72px 48px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:56px; padding-bottom:56px; }
.footer-grid .col-title{ font-size:12px; letter-spacing:0.12em; color:var(--muted); margin-bottom:20px; }
.footer-brand{ display:flex; align-items:baseline; gap:9px; margin-bottom:20px; }
.footer-brand .name{ font-weight:700; font-size:19px; letter-spacing:0.02em; }
.footer-brand .dot{ width:6px; height:6px; background:var(--accent-2); display:block; }
.footer-desc{ font-size:15px; color:var(--muted); line-height:1.6; max-width:340px; }
.footer-links{ display:flex; flex-direction:column; gap:12px; font-size:15px; }
.footer-tel{ font-size:19px; font-weight:500; margin-bottom:6px; }
.footer-email{ font-size:15px; color:var(--muted); margin-bottom:16px; }
.footer-socials{ display:flex; gap:18px; font-size:15px; }
.footer-bottom{ border-top:1px solid var(--line); padding-top:28px; font-size:13.5px; color:var(--muted); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }

@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
/* Section headers put a title and a "see all" link on one row; on a phone they
   must stack rather than squeeze the heading. */
@media (max-width:760px){
  .services-head, .sales-head, .popular-head, .select-head{
    flex-wrap:wrap; gap:18px;
  }
  .select-head .note{ text-align:left; max-width:none; }
  .about-stats{ gap:24px; }
  .product-tabs{ padding-left:20px; padding-right:20px; padding-top:56px; }
  .tab-strip{ overflow-x:auto; scrollbar-width:none; }
  .tab-strip::-webkit-scrollbar{ display:none; }
  .tab{ padding:14px 18px; white-space:nowrap; }
  .swap-card{ padding:28px 20px; }
  .select-form, .select-chart{ padding:28px 20px; }
  .match-row{ grid-template-columns:1fr; gap:8px; }
  .match-row .name-line{ flex-wrap:wrap; gap:6px 12px; }

  /* nowrap on a long button label sets a min-width wider than the phone */
  .service-cta .btn{ white-space:normal; display:block; width:100%; text-align:center; }
  .contact-row{ flex-wrap:wrap; gap:6px 16px; }
  .contact-row .v{ text-align:left; }
  .contact-row .socials{ flex-wrap:wrap; gap:10px 18px; }
  .sale-card{ padding:28px 22px; }
  .advantage{ padding:32px 24px 34px; }
}

@media (max-width:640px){
  .wrap, .section-pad, .about-copy, .services-section, .advantages-section, .sales-section,
  .swap-section, .select-section, .contacts-section, .site-footer, .intro, .product-top,
  .product-curve-block, .spec-table, .related-block, .cat-intro, .cat-grid, .cat-tabs{ padding-left:20px; padding-right:20px; }

  /* 144px of breathing room reads as a blank screen on a phone */
  .section-pad, .about-copy, .services-section, .advantages-section,
  .sales-section, .swap-section, .select-section, .contacts-section{
    padding-top:72px; padding-bottom:72px;
  }
  .services-section, .advantages-section, .sales-section, .contacts-section{ min-height:0; }
  .about-section{ min-height:0; }
  .site-header .bar{ padding:0 20px; }
  .hero{ grid-template-columns:1fr; padding:16px 16px 0; }
  .hero-tiles{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
}

.footer-legal{ display:flex; gap:18px; flex-wrap:wrap; align-items:baseline; }
.footer-legal a{ color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.footer-legal a:hover{ color:var(--accent); }