/* ============================================================
   СЕРВИС ПИЩЕВОГО ИНЖИНИРИНГА — dark engineering portal
   Дополняет базовую систему новыми разделами, брендом и подменю.
   ============================================================ */

/* Brand */
.logo{ min-width:0; max-width:none; gap:12px; }
.logo__mark{ width:48px; height:48px; border:0; border-radius:50%; background:transparent; }
.logo:hover .logo__mark{ transform:none; }
.logo__mark svg{ display:block; width:100%; height:100%; overflow:visible; }
.brand-mark__ring{ fill:#101D24; stroke:#8FA7B1; stroke-width:1.8; transition:stroke .3s ease; }
.brand-mark__orbit,.brand-mark__core{ fill:var(--acc); }
.brand-mark__orbit{ transform-origin:32px 32px; animation:brand-turn 18s cubic-bezier(.45,0,.2,1) infinite; }
.brand-mark__core{ fill:var(--acc-2); }
@keyframes brand-turn{ 0%,82%{transform:rotate(0)} 98%,100%{transform:rotate(360deg)} }
.logo:hover .brand-mark__ring,.logo:focus-visible .brand-mark__ring{ stroke:var(--acc-2); }
.logo__txt{ min-width:0; justify-content:center; }
.logo__txt b{
  display:block; color:var(--tx); font-family:var(--font-display);
  font-size:15px; font-weight:800; line-height:1.23; letter-spacing:.035em; white-space:nowrap;
}

/* Desktop portal navigation */
.hdr__in{ gap:22px; }
.nav{ gap:4px; }
.nav__item{ position:relative; }
.nav__toggle,.nav > a:not(.nav__phone){
  font-family:var(--font-display); font-size:14px; font-weight:650;
  line-height:1.2; letter-spacing:-.012em;
}
.nav__toggle{
  position:relative; display:flex; align-items:center; gap:8px; padding:13px 10px;
  border:0; background:transparent; color:var(--tx-2); cursor:pointer;
  white-space:nowrap; transition:color .24s ease;
}
.nav__toggle::after,.nav > a:not(.nav__phone)::after{
  content:""; position:absolute; right:10px; bottom:7px; left:10px; width:auto; height:2px;
  background:linear-gradient(90deg,var(--acc),var(--acc-2)); transform:scaleX(0);
  transform-origin:left; transition:transform .28s var(--ease);
}
.nav__toggle:hover::after,.nav__item.is-open > .nav__toggle::after,.nav > a:not(.nav__phone):hover::after{ transform:scaleX(1); }
.nav > a:not(.nav__phone):hover::after{ width:auto; }
.nav__toggle > i{ width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); transition:.25s; }
.nav__item:hover .nav__toggle,.nav__item.is-open .nav__toggle{ color:var(--acc-2); }
.nav__item.is-open .nav__toggle > i{ transform:rotate(225deg) translate(-1px,-1px); }
.nav__drop{
  position:absolute; top:calc(100% + 12px); left:-12px; z-index:8;
  display:grid; grid-template-columns:280px; gap:0; width:max-content;
  padding:9px 16px 12px;
  background:radial-gradient(circle at 15% 0,rgba(59,188,230,.09),transparent 44%),#0a141a;
  border-top:2px solid var(--acc); box-shadow:0 32px 72px -34px rgba(0,0,0,.98);
  opacity:0; visibility:hidden; transform:translateY(7px) scale(.99); transform-origin:top;
  transition:opacity .22s ease,visibility .22s ease,transform .22s var(--ease);
}
.nav__drop--wide{ grid-template-columns:repeat(2,270px); }
#nav > .nav__item:nth-child(4) .nav__drop{ left:auto; right:-12px; }
.nav__item:hover .nav__drop,.nav__item.is-open .nav__drop{ opacity:1; visibility:visible; transform:none; }
.nav .nav__drop a{
  position:relative; display:flex; min-height:58px; flex-direction:column; justify-content:center; gap:3px;
  padding:10px 34px 10px 10px; border-bottom:1px solid rgba(145,177,190,.14);
  transition:color .22s ease,background-color .22s ease,padding-left .22s ease;
}
.nav .nav__drop a::after{ display:none; }
.nav .nav__drop a::before{
  content:""; position:absolute; top:50%; right:13px; width:14px; height:1px;
  background:var(--acc); opacity:0; transform:translate(-6px,-50%);
  transition:opacity .22s ease,transform .22s ease;
}
.nav .nav__drop a:hover,.nav .nav__drop a[aria-current="page"]{
  padding-left:14px; color:var(--tx); background:linear-gradient(90deg,rgba(59,188,230,.1),transparent 88%);
}
.nav .nav__drop a:hover::before,.nav .nav__drop a[aria-current="page"]::before{ opacity:1; transform:translate(0,-50%); }
.nav__drop a b{
  color:var(--tx); font-family:var(--font-display); font-size:15px; font-weight:650;
  line-height:1.25; letter-spacing:-.01em;
}
.nav__drop a span{
  color:#9fb1ba; font-family:var(--font); font-size:13px; font-weight:400;
  line-height:1.35; letter-spacing:.005em;
}
.nav > a{ padding:13px 10px; }
.hdr__cta{ margin-left:auto; }
.hdr__tel{ display:none; }

/* Four clear facts, separated from the hero copy without nested frames. */
.hero .stats{
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;
  padding-bottom:16px; border:0;
}
.hero .stat{
  min-width:0; padding:19px 24px; border:0;
  background:linear-gradient(120deg,#183b48,#112832);
}
.hero .stat b{
  display:flex; align-items:baseline; gap:8px;
  margin:0 0 10px; background:none; color:#78dff5;
  font-size:clamp(2rem,2.6vw,2.75rem); line-height:1;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.hero .stat b small{
  color:#c1dce4; font-size:.42em; font-weight:600; letter-spacing:0;
}
.hero .stat > span{ color:#dce8ec; font-size:14px; line-height:1.4; }
@media (min-width:1181px) and (max-height:820px){
  .hero .stat{ padding:14px 20px; }
  .hero .stat b{ font-size:2rem; margin-bottom:8px; }
}
@media (max-width:1180px){
  .hero .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px){
  .hero .stats{ gap:10px; padding-bottom:24px; }
  .hero .stat{ padding:18px 14px; }
  .hero .stat b{ gap:6px; font-size:clamp(1.375rem,6.9vw,1.875rem); margin-bottom:12px; }
  .hero .stat > span{ font-size:13px; line-height:1.45; }
}

/* Product cards from the presentation */
.tabpane[data-pane="heat"] .cards{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.tabpane[data-pane="heat"] .card{
  position:relative; display:flex; height:clamp(232px,25vh,248px); min-height:0;
  padding:145px 18px 14px; overflow:hidden; justify-content:flex-start;
  background:#0d1216; isolation:isolate;
}
.tabpane[data-pane="heat"] .card:hover{ background:#0d1216; }
.tabpane[data-pane="heat"] .card::after{
  content:""; position:absolute; z-index:0; inset:0 0 auto; height:132px;
  background:transparent var(--card-photo) center/contain no-repeat;
  border-bottom:1px solid rgba(255,255,255,.1);
  transform:scale(1.001); transform-origin:center;
  transition:transform .55s var(--ease),filter .55s var(--ease);
}
.tabpane[data-pane="heat"] .card:hover::after{
  transform:scale(1.025); filter:contrast(1.03) saturate(1.04);
}
.tabpane[data-pane="heat"] .card > *{ position:relative; z-index:1; }
.tabpane[data-pane="heat"] .card__num{
  position:absolute; top:12px; right:14px; padding:3px 6px; color:#17232a;
  background:rgba(246,246,242,.82); border-radius:2px;
}
.tabpane[data-pane="heat"] .card h3{
  min-height:2.35em; margin:0 0 5px; font-size:var(--fs-base); line-height:1.16;
}
.tabpane[data-pane="heat"] .card p{
  display:-webkit-box; min-height:2.7em; margin:0 0 9px; overflow:hidden;
  color:var(--tx-2); font-size:var(--fs-xs); line-height:1.35;
  -webkit-box-orient:vertical; -webkit-line-clamp:2;
}
.tabpane[data-pane="heat"] .card__specs{ display:none; margin-top:auto; gap:5px; }
.tabpane[data-pane="heat"] .card__specs li{
  padding:3px 7px; font-size:var(--fs-4xs); background:transparent;
}
.card--dti{ --card-photo:url("/assets/img/catalog-dti-cutout-v4.952bb183850f.webp"); }
.card--dta{ --card-photo:url("/assets/img/catalog-double-pipe-cutout-v3.39258cfda89a.webp"); }
.card--dtr{ --card-photo:url("/assets/img/catalog-dtr-cutout-v4.baf91d18302d.webp"); }
.card--as{ --card-photo:url("/assets/img/catalog-annular-cutout-v3.d318d17f4f49.webp"); }
.card--shell{ --card-photo:url("/assets/img/catalog-shell-cutout-v3.9ad9f69e3c5d.webp"); }
.card--scraper{ --card-photo:url("/assets/img/catalog-scraped-cutout-v3.3c0f268abfc0.webp"); }
.card--pasteurizer{ --card-photo:url("/assets/img/catalog-pasteurizer-cutout-v4.b64cff4fa647.webp"); }
.card--aseptic{ --card-photo:url("/assets/img/catalog-aseptic-cutout-v3.8fc5b3d679b5.webp"); }

/* Current capabilities and 2027 roadmap */
.years{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.year{ min-width:0; }
.year__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:0 0 18px; border-bottom:3px solid var(--acc); }
.year__head span{ color:var(--acc); }
.year__head b{ font-size:var(--fs-lg); }
.year--next .year__head{ border-color:var(--line-2); }
.year__list li{ display:grid; grid-template-columns:38px 1fr; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); align-items:start; }
.year__list i{ color:var(--acc); font:500 var(--fs-3xs)/1.6 var(--mono); font-style:normal; }
.year__list span{ font-weight:600; font-size:var(--fs-sm); }

/* Tubular line */
.tubular{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:stretch; }
.tubular__visual{ position:relative; min-height:300px; margin:0; overflow:hidden; background:#05090C; }
.tubular__visual img{ width:100%; height:100%; object-fit:cover; }
.tubular__visual figcaption{ position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; gap:18px; padding:15px 18px; background:rgba(7,12,15,.92); color:#fff; }
.tubular__visual figcaption span{ color:var(--acc); font:500 var(--fs-3xs)/1.4 var(--mono); text-transform:uppercase; }
.tubular__visual figcaption b{ font-size:var(--fs-xs); text-align:right; }
.effect li{ display:grid; grid-template-columns:40px 1fr; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); }
.effect li:first-child{ border-top:3px solid var(--acc); }
.effect i{ color:var(--acc); font:500 var(--fs-3xs)/1.6 var(--mono); font-style:normal; }
.effect span{ color:var(--tx-2); font-size:var(--fs-sm); }
.effect b{ color:var(--tx); }
.diameters{ display:flex; align-items:center; gap:28px; margin-top:18px; }
.diameters > span{ color:var(--acc); flex:none; }
.diameters div{ display:flex; align-items:center; justify-content:space-between; gap:9px; width:100%; border-bottom:1px solid var(--line-2); padding-bottom:8px; }
.diameters i{ font-style:normal; font-weight:700; }
.diameters b{ color:var(--tx-3); font-size:var(--fs-xs); }
.series-strip{ display:grid; grid-template-columns:repeat(8,1fr); gap:1px; margin-top:18px; background:var(--line); }
.series-strip span{ padding:10px 8px; background:var(--surface); color:var(--tx-3); font-size:var(--fs-3xs); }
.series-strip b{ display:block; color:var(--acc); font:700 var(--fs-xs)/1.2 var(--mono); }

/* Engineering */
.engineering{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:stretch; }
.engineering__media{ position:relative; display:grid; grid-template-columns:1.2fr .8fr; min-height:340px; overflow:hidden; background:var(--surface); }
.engineering__media img{ width:100%; height:100%; object-fit:cover; }
.engineering__media img:last-of-type{ object-position:center 42%; }
.engineering__media p{ position:absolute; left:0; bottom:0; display:flex; flex-direction:column; gap:2px; padding:15px 18px; background:rgba(7,12,15,.92); color:#fff; }
.engineering__media p b{ font-size:var(--fs-sm); }
.engineering__media p span{ color:rgba(255,255,255,.66); font-size:var(--fs-3xs); }
.engineering__steps li{ display:grid; grid-template-columns:40px 1fr; gap:16px; padding:15px 0; border-bottom:1px solid var(--line); }
.engineering__steps li:first-child{ border-top:3px solid var(--acc); }
.engineering__steps i,.advantage > i{ color:var(--acc); font:500 var(--fs-3xs)/1.5 var(--mono); font-style:normal; }
.engineering__steps div{ display:flex; flex-direction:column; gap:4px; }
.engineering__steps b{ font-size:var(--fs-sm); }
.engineering__steps span{ color:var(--tx-2); font-size:var(--fs-xs); }

/* Project economics */
.advantages{ display:grid; grid-template-columns:repeat(5,1fr); gap:28px; }
.advantage{ padding-top:18px; border-top:3px solid var(--acc); }
.advantage h3{ min-height:2.5em; margin:14px 0 10px; font-size:var(--fs-base); }
.advantage p{ color:var(--tx-2); font-size:var(--fs-xs); }

.ftr__director{ margin-top:14px; color:var(--tx-2); font-size:var(--fs-xs); }

/* Content-sized chapters with a visible boundary and alternating graphite tones. */
main > .sect{
  --chapter-gutter:32px;
  height:auto; min-height:0; padding:clamp(32px,4vh,48px) 0;
  border:0; border-top:1px solid rgba(131,217,242,.24);
  background-color:#080E12; isolation:isolate;
}
#capabilities,#calculator,#trade,#industries,#advantages,#docs{ background-color:#111F27; }
main > .sect::after{
  content:''; position:absolute; top:-1px; z-index:3;
  left:max(var(--chapter-gutter),calc((100% - var(--wrap))/2 + var(--chapter-gutter)));
  width:clamp(56px,6vw,88px); height:3px;
  background:var(--acc); pointer-events:none;
}
main > .sect > .wrap{ position:relative; z-index:2; }

/* Faint equipment and engineering layers remain inside each chapter. */
#tubular::before,
#engineering::before,
#advantages::before,
.request__backdrop{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-repeat:no-repeat; opacity:.055;
  filter:grayscale(1) contrast(1.18);
  mask-image:linear-gradient(90deg,transparent 8%,#000 58%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 8%,#000 58%,transparent 100%);
}
#tubular::before{ background-image:url("/assets/img/hero.145d5f8248e4.webp"); background-position:right center; background-size:68% auto; }
#engineering::before{ background-image:url("/assets/img/presentation-engineering-3d-preview-v1-800.3a49844d3b90.webp"); background-position:right 30%; background-size:58% auto; }
#advantages::before{ background-image:url("/assets/img/presentation-production-detail.1ee4a0600924.webp"); background-position:right center; background-size:62% auto; }
.request__backdrop{ overflow:hidden; }
.request__backdrop img{ position:absolute; left:4.16%; top:0; width:48%; height:100%; max-width:none; object-fit:contain; }

/* Реальные фотографии заказчика: без искусственной рамки и без изменения
   геометрии при наведении. В карточке кожухотрубного аппарата кадр работает
   как полноценная фотографическая подложка. */
.tabpane[data-pane="heat"] .card.card--shell{
  background:#0d1216;
}
.tabpane[data-pane="heat"] .card.card--shell::after{
  background-color:#11171b; background-size:cover;
}

/* Compact desktop content, independent of the chapter's overall height. */
@media (min-width:1181px) and (min-height:700px){
  #capabilities .sect__head,#tubular .sect__head,#engineering .sect__head,#advantages .sect__head{ margin-bottom:18px; }
  .year__list li{ padding:11px 0; }
  .tubular__visual,.engineering__media{ min-height:0; height:clamp(260px,40vh,340px); }
  .effect li{ padding:9px 0; }
  .diameters,.series-strip{ margin-top:12px; }
  .advantages{ gap:22px; }
  .advantage{ padding-top:14px; }
  .engineering__steps li{ padding:12px 0; }
}

@media (max-width:1240px) and (min-width:961px){
  .hdr__in{ gap:14px; }
  .logo{ gap:10px; }
  .logo__mark{ width:44px; height:44px; }
  .logo__txt b{ font-size:13px; }
  .nav{ gap:2px; }
  .nav__toggle{ gap:5px; }
  .nav__toggle,.nav > a{ padding-left:6px; padding-right:6px; font-size:var(--fs-xs); }
  .hdr__cta .btn{ padding-left:14px; padding-right:14px; }
}

@media (max-width:1180px){
  .tabpane[data-pane="heat"] .cards{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .tabpane[data-pane="heat"] .card{ height:244px; min-height:0; padding-top:145px; }
  .years,.tubular,.engineering{ grid-template-columns:1fr; }
  .advantages{ grid-template-columns:repeat(2,1fr); }
  .series-strip{ grid-template-columns:repeat(4,1fr); }
  .engineering__media{ min-height:320px; }
}

@media (max-width:960px){
  .hdr__in{ height:70px; }
  .logo{ max-width:calc(100% - 62px); }
  .logo{ gap:10px; }
  .logo__mark{ width:44px; height:44px; }
  .logo__txt b{ font-size:13px; }
  .nav{ padding:8px 20px 24px; max-height:calc(100dvh - 70px); }
  .nav__item{ border-bottom:1px solid var(--line); }
  .nav__toggle{ width:100%; min-height:54px; justify-content:space-between; padding:13px 0; color:var(--tx); }
  .nav__toggle::after,.nav > a:not(.nav__phone)::after{ display:none; }
  .nav__drop,.nav__drop--wide{
    position:static; display:none; grid-template-columns:1fr; width:100%; margin:0 0 12px 5px; padding:0 0 4px 18px;
    border:0; box-shadow:none; background:transparent; opacity:1; visibility:visible; transform:none;
  }
  #nav > .nav__item:nth-child(4) .nav__drop{ right:auto; }
  .nav__item:hover .nav__drop{ display:none; }
  .nav__item.is-open .nav__drop{ display:grid; }
  .nav .nav__drop a{ min-height:54px; padding:9px 34px 9px 10px; border:0; }
  .nav .nav__drop a:hover,.nav .nav__drop a[aria-current="page"]{ padding-left:14px; }
  .nav > a{ padding:16px 0; }

  /* The existing heading number identifies each chapter; no duplicate label. */
  main > .sect{ padding-top:56px; padding-bottom:56px; }

  #tubular::before,
  #engineering::before,
  #advantages::before,
  .request__backdrop{
    opacity:.075; background-size:auto 62%; background-position:right 44px;
    mask-image:linear-gradient(180deg,#000 0%,transparent 68%);
    -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 68%);
  }
  .request__backdrop img{ left:0; top:44px; width:auto; height:62%; }
}

@media (max-width:720px){
  main > .sect{ --chapter-gutter:20px; }
  .topbar{ display:none; }
  html{ scroll-padding-top:70px; }
  .hero{ padding-top:42px; }
  .hero__in{ padding-bottom:42px; }
  .hero__title{ font-size:clamp(2rem,9vw,2.65rem); }
  .tabpane[data-pane="heat"] .cards{ grid-template-columns:1fr; gap:0; }
  .tabpane[data-pane="heat"] .card{
    display:block; height:auto; min-height:124px; padding:28px 48px 18px 158px;
    border-bottom:1px solid var(--line); overflow:hidden;
  }
  .tabpane[data-pane="heat"] .card::after{
    inset:14px auto auto 14px; width:128px; height:94px; border:0;
    background-size:contain;
  }
  .tabpane[data-pane="heat"] .card__num{ display:none; }
  .tabpane[data-pane="heat"] .card h3{
    min-height:0; max-width:100%; margin:14px 0 0; font-size:var(--fs-sm); line-height:1.25;
  }
  .tabpane[data-pane="heat"] .card p,
  .tabpane[data-pane="heat"] .card__specs{ display:none; }
  .tabpane[data-pane="heat"] .card.is-expanded{
    min-height:258px; padding:132px 18px 18px;
  }
  .tabpane[data-pane="heat"] .card.is-expanded::after{
    inset:14px 18px auto; width:auto; height:104px;
  }
  .tabpane[data-pane="heat"] .card.is-expanded h3{ margin-top:0; }
  .tabpane[data-pane="heat"] .card.is-expanded p{
    display:block; min-height:0; margin:9px 0 13px; font-size:var(--fs-xs);
  }
  .tabpane[data-pane="heat"] .card.is-expanded .card__specs{ display:flex; }
  .years{ gap:44px; }
  .year__head{ align-items:flex-start; flex-direction:column; gap:5px; }
  .tubular__visual{ min-height:240px; }
  .diameters{ align-items:flex-start; flex-direction:column; gap:10px; }
  .diameters div{ flex-wrap:wrap; justify-content:flex-start; gap:8px 18px; }
  .series-strip{ grid-template-columns:repeat(2,1fr); }
  .advantages{ grid-template-columns:1fr; gap:34px; }
  .advantage h3{ min-height:0; }
  .engineering__media{ grid-template-columns:1.1fr .9fr; min-height:0; }
  .engineering__media img{ height:230px; }

  /* Дополнительный контраст между соседними мобильными главами. */
  main > .sect:nth-of-type(4n+2){
    background-image:linear-gradient(135deg,rgba(53,188,232,.035),transparent 42%);
  }
  main > .sect:nth-of-type(4n){
    background-image:linear-gradient(315deg,rgba(131,217,242,.03),transparent 46%);
  }
}

/* Phone WebViews report their physical landscape width (often 844–932px).
   Hide the auxiliary desktop strip there as well, while keeping it on tablets
   and pointer-accurate desktop windows. */
@media (max-width:960px) and (pointer:coarse){
  .topbar{ display:none; }
  html{ scroll-padding-top:70px; }
}

@media (max-width:380px){
  .logo__mark{ width:42px; height:42px; }
  .logo__txt b{ font-size:12px; }
}

@media (prefers-reduced-motion:reduce){
  .brand-mark__orbit,.brand-mark__core{ animation:none; }
}