/* ============================================================
TechSolution-A — Industrial design system
Fonts: Oswald (display) + Manrope (body)
Palette: graphite canvas, molten-orange accent, steel-cyan
============================================================ */
/* ============================================================
SELF-HOSTED FONTS (Oswald + Manrope) — declared locally, so there is no
render-blocking Google CSS round-trip. With is toggled open */
.nav__dropdown{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto;
background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
min-width:0;width:100%;padding:0 0 0 .2rem;gap:.15rem;
max-height:0;overflow:hidden;transition:max-height .38s var(--ease),padding .38s var(--ease)}
.nav__menu>li.is-expanded>.nav__dropdown{max-height:460px;padding:.25rem 0 .7rem .2rem}
.nav__dropdown::before{display:none}
.nav__dropdown a{font-size:.95rem;padding:.5rem .7rem;border-radius:12px;color:var(--ink-dim);white-space:normal}
.nav__dropdown a:hover{padding-left:.7rem;background:var(--surface)}
/* THE fix: the desktop hover/focus rule was sliding the submenu left (translate -50%).
On mobile it must NOT move — it just expands inline under its item. */
.nav__menu>li:hover .nav__dropdown,
.nav__menu>li:focus-within .nav__dropdown{transform:none;left:auto;right:auto}
.nav__menu>li:hover .nav__caret{transform:none}
}
/* ============================================================
CAROUSEL
============================================================ */
.carousel{position:relative}
.carousel__track{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;
scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:4px 2px 8px}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__slide{flex:0 0 calc((100% - var(--gap)*2)/3);scroll-snap-align:start;min-width:0}
.carousel__slide figure{margin:0;border-radius:var(--radius);overflow:hidden;position:relative;box-shadow:var(--shadow-soft);background:#0d1114}
.carousel__slide img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.carousel__slide figure:hover img{transform:scale(1.05)}
.carousel__slide--contain img{object-fit:contain;padding:1.4rem;background:radial-gradient(120% 120% at 50% 40%,#171c20,#0d1114)}
.carousel__slide figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1rem .9rem;
background:linear-gradient(transparent,rgba(8,10,12,.92));font-family:var(--font-display);
text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;color:#fff}
.carousel__nav{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1rem}
.carousel__btn{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
background:var(--glass-grad);box-shadow:var(--shadow-soft);
color:#fff;transition:background .3s,color .3s,transform .3s,opacity .3s}
.carousel__btn:hover{background:var(--molten);color:#1a0e03;transform:translateY(-2px)}
.carousel__btn svg{width:22px;height:22px}
.carousel__btn[disabled]{opacity:.3;pointer-events:none}
.carousel--single .carousel__slide{flex:0 0 100%}
.carousel--single .carousel__slide img{aspect-ratio:16/10}
/* feature single-carousel: nav overlays the photo so the image centers by height with the text */
.feat .carousel--single{position:relative}
.feat .carousel--single .carousel__nav{position:absolute;right:.7rem;bottom:.7rem;z-index:3;margin:0}
@media(max-width:900px){.carousel__slide{flex-basis:calc((100% - var(--gap))/2)}
.carousel--single .carousel__slide{flex-basis:100%}}
@media(max-width:600px){.carousel__slide{flex-basis:84%}
.carousel--single .carousel__slide{flex-basis:100%}}
/* ============================================================
ROUNDED-CORNER RENDER FIX
Promotes every clipping media box to its own layer so a scaled
child never leaks the page through the rounded corner, and keeps
a dark base underneath so any sub-pixel seam reads dark, not white.
============================================================ */
.dir,.pcard__media,.feat__media,.carousel__slide figure,.gallery figure,
.cinematic,.bento__cell--feature,.hero__bg{
transform:translateZ(0);
-webkit-transform:translateZ(0);
background-color:#0d1114;
}
.dir__img img,.pcard__media img,.carousel__slide img,.gallery img,
.feat__media img,.cinematic__bg img,.bento__cell--feature img{
-webkit-backface-visibility:hidden;backface-visibility:hidden;
}
/* cover photos rest very slightly over-scaled so the rounded edge is
always fully covered (cut-out / contain product shots are exempt) */
.dir__img img,.carousel__slide:not(.carousel__slide--contain) figure img,
.pcard__media:not(.pcard__media--contain) img,.gallery img{
transform:scale(1.012);
}
.dir:hover .dir__img img{transform:scale(1.075)}
.pcard:hover .pcard__media:not(.pcard__media--contain) img{transform:scale(1.085)}
.carousel__slide:not(.carousel__slide--contain) figure:hover img{transform:scale(1.06)}
.gallery figure:hover img{transform:scale(1.06)}
/* a zoomable photo signals it can be opened */
.carousel__slide img,.gallery img{cursor:zoom-in}
/* ============================================================
LIGHTBOX (open a photo, blur backdrop, swipe within a block)
============================================================ */
.lightbox{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
padding:clamp(1rem,4vw,3rem);
background:rgba(7,9,11,.72);backdrop-filter:blur(22px) saturate(115%);-webkit-backdrop-filter:blur(22px) saturate(115%);
opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease),visibility .3s}
.lightbox.is-open{opacity:1;visibility:visible;pointer-events:auto}
.lightbox__stage{position:relative;margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;
align-items:center;gap:1rem;transform:scale(.97);transition:transform .35s var(--ease)}
.lightbox.is-open .lightbox__stage{transform:none}
.lightbox__img{max-width:min(1100px,92vw);max-height:80vh;width:auto;height:auto;border-radius:var(--radius);
box-shadow:0 40px 90px -30px rgba(0,0,0,.9);background:#0d1114;object-fit:contain}
.lightbox__cap{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;
color:var(--ink-soft);text-align:center;max-width:60ch}
.lightbox__close{position:absolute;top:clamp(.8rem,2vw,1.4rem);right:clamp(.8rem,2vw,1.4rem);z-index:2;
width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;
background:rgba(255,255,255,.06);backdrop-filter:blur(8px);transition:background .25s,transform .25s}
.lightbox__close:hover{background:rgba(255,255,255,.14);transform:rotate(90deg)}
.lightbox__close svg{width:22px;height:22px}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:54px;height:54px;border-radius:50%;
display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.06);backdrop-filter:blur(8px);
transition:background .25s,transform .25s,opacity .25s}
.lightbox__nav:hover{background:var(--molten);color:#1a0e03}
.lightbox__nav--prev{left:clamp(.6rem,2.5vw,2rem)}
.lightbox__nav--next{right:clamp(.6rem,2.5vw,2rem)}
.lightbox__nav svg{width:26px;height:26px}
.lightbox__nav[hidden]{display:none}
.lightbox__count{position:absolute;bottom:clamp(.8rem,2vw,1.4rem);left:50%;transform:translateX(-50%);
font-family:var(--font-display);letter-spacing:.12em;font-size:.78rem;color:var(--ink-dim)}
body.lb-open{overflow:hidden}
@media(max-width:600px){
.lightbox__nav{display:none} /* swipe / double-tap instead of arrows */
.lightbox__img{max-height:78vh}
}
/* ============================================================
MOBILE REFINEMENTS (phones)
============================================================ */
@media(max-width:600px){
/* type that fits — more words per line, less giant text */
.lead{font-size:.74rem;line-height:1.6}
.hero__lead{font-size:.74rem;line-height:1.6}
.page-hero p{font-size:.74rem;line-height:1.6}
h2,.h2{font-size:clamp(1.5rem,6vw,1.95rem)}
.section-head p{font-size:.74rem;line-height:1.6}
/* centered section headers read left-aligned on phones */
.section-head--center{text-align:left;margin-inline:0}
.section-head--center .kicker{justify-content:flex-start}
p{font-size:.74rem;line-height:1.6}
.checks li,.feat__list li{font-size:.74rem;line-height:1.5}
.feat__body p + p{margin-top:.65rem}
/* === unified content/label/value text on mobile (escape specificity + untouched labels) === */
.bento__cell p,.pcard__body p,.step p,.tl p,.footer__brand p{font-size:.74rem;line-height:1.6}
.note-card{font-size:.74rem}
.tl__year,.dir__index,.breadcrumbs{font-size:.72rem}
.cinfo{font-size:.82rem}
.cinfo__label,.field label{font-size:.66rem}
.field input,.field textarea,.select__btn,.select__opt,.ac-item{font-size:.88rem}
.form__note{font-size:.72rem}
.gallery figcaption,.carousel__slide figcaption{font-size:.72rem}
.footer__links a{font-size:.8rem}
/* compact buttons (and they don't span awkwardly) */
.btn{font-size:.8rem;--pad:.82rem 1.2rem;letter-spacing:.05em}
.btn--lg{--pad:.92rem 1.35rem;font-size:.82rem}
.btn svg{width:1em;height:1em}
/* CTA buttons: equal size, stacked full width on phones */
.cta__btns{flex-direction:column;align-items:stretch;width:100%}
.cta__btns .btn{width:100%;justify-content:center}
/* CTA / cinematic: use the full width instead of a 20ch column */
.cta{padding:clamp(1.8rem,7vw,2.6rem) clamp(1.1rem,5vw,1.5rem)}
.cta h2{max-width:none}
.cta p{max-width:none}
.cinematic__inner{padding:1.5rem 1.2rem;max-width:none}
/* carousels: one full slide, swipe to move (no peek, no arrows) */
.carousel__slide{flex-basis:100%}
.carousel__track{scroll-padding:0}
/* gallery arrows centered together at the bottom */
.carousel__nav{justify-content:center}
/* index numbers must never sit under the card text */
.step{padding-right:2.6rem}
.step::before{font-size:2rem;top:.5rem;right:.6rem;opacity:.4;-webkit-text-stroke-width:1px}
/* one card per row on phones — scroll down through them */
.steps,.steps--5{grid-template-columns:1fr !important}
/* chips / tags / badges — visually smaller than body so the pills don't dominate
(pills look bigger than plain text at equal font-size due to padding + uppercase + tracking) */
.chips{gap:.2rem;flex-wrap:nowrap;justify-content:space-between}
.chip{font-size:.64rem;padding:.36em .55em;white-space:nowrap}
.tag{font-size:.6rem;padding:.36em .75em;letter-spacing:.04em}
.kicker{font-size:.64rem;letter-spacing:.16em}
.dir__index{font-size:.66rem;letter-spacing:.12em}
/* footer bottom: stacked, no abrupt mid-phrase wrap */
.footer__bottom{flex-direction:column;align-items:flex-start;gap:.7rem;text-align:left}
.footer__bottom .mono{font-size:.74rem;letter-spacing:.08em;opacity:.85}
/* stat cards comfortable on narrow screens */
.stat{padding:1.1rem 1rem}
.stat__label{font-size:.74rem;line-height:1.5}
.stats--2{grid-template-columns:1fr}
/* HERO: text pinned to the top under the navbar, buttons + stats at the bottom */
.hero{align-items:stretch;padding-block:86px 1.8rem}
.hero__inner{display:flex;flex-direction:column}
.hero__inner-grid{display:flex;flex-direction:column;min-height:calc(100svh - 86px - 1.8rem)}
.hero__scroll{display:none} /* "Листайте" was overlapping the text */
.hero h1{margin:.3rem 0 .9rem}
.hero__lead{margin-bottom:0}
.hero__cta{flex-wrap:nowrap;gap:.55rem;margin-top:auto;padding-top:1.3rem}
.hero__cta .btn{flex:1 1 0;min-width:0;white-space:normal;text-align:center;
--pad:.82rem .6rem;font-size:.76rem;line-height:1.15;letter-spacing:.03em}
.hero__cta .btn svg{display:none} /* no arrow on the hero buttons */
.hero__meta{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem .9rem;margin-top:1.4rem}
.hero__meta div{text-align:center;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem}
.hero__meta b{font-size:clamp(1rem,4.5vw,1.3rem)}
.hero__meta div > span{display:block;font-size:.66rem;line-height:1.25;letter-spacing:.02em;white-space:nowrap;text-transform:uppercase}
.hero__meta b span{display:inline;font-size:inherit;line-height:inherit}
/* spec table fits the screen (no edge overflow / sideways drag) */
.spec{font-size:.8rem}
.spec th,.spec td{padding:.65rem .5rem}
}
/* ============================================================
TOAST NOTIFICATION (custom, site-styled — replaces native popups)
============================================================ */
.toast{position:fixed;left:50%;bottom:clamp(1rem,4vw,2rem);transform:translate(-50%,160%);
z-index:9600;width:min(92vw,400px);display:flex;gap:.85rem;align-items:flex-start;
padding:1rem 1.05rem;border-radius:16px;color:var(--ink);
background:rgba(13,17,21,.97);backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%);
box-shadow:0 28px 64px -22px rgba(0,0,0,.92);
opacity:0;visibility:hidden;pointer-events:none;
transition:transform .45s var(--ease),opacity .35s var(--ease),visibility .35s}
.toast.show{transform:translate(-50%,0);opacity:1;visibility:visible;pointer-events:auto}
.toast__ic{flex:0 0 auto;width:36px;height:36px;border-radius:10px;display:grid;place-items:center}
.toast__ic svg{width:20px;height:20px}
.toast--err .toast__ic{background:var(--molten-soft);color:var(--amber)}
.toast--ok .toast__ic{background:rgba(70,195,230,.16);color:var(--steel)}
.toast__body{flex:1;min-width:0}
.toast__title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;color:#fff;margin-bottom:.15rem}
.toast__msg{font-size:.9rem;color:var(--ink-soft);line-height:1.45}
.toast__x{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;color:var(--ink-dim);background:none}
.toast__x:hover{color:var(--ink);background:var(--surface)}
.toast__x svg{width:16px;height:16px}
/* ============================================================
MISC FEEDBACK HELPERS
============================================================ */
/* product shots that keep their own white background — shown on a white
tile so the photo edges blend in instead of cutting the background out */
.tile-white{background:#fff!important;display:grid;place-items:center}
.tile-white img{object-fit:contain}
/* screen mounting / tensioning diagrams */
.dia-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.dia{margin:0}
.dia__tile{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-soft);aspect-ratio:4/3;display:grid;place-items:center;padding:clamp(.8rem,1.6vw,1.3rem);overflow:hidden}
.dia__tile img{width:100%;height:100%;object-fit:contain}
.dia figcaption{margin-top:.75rem;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-size:.76rem;color:var(--ink-soft)}
@media(max-width:520px){.dia-pair{grid-template-columns:1fr}}
/* QA steps: all five on one line on desktop, graceful wrap below */
@media(min-width:981px){.steps--5{grid-template-columns:repeat(5,1fr)}}
/* cinematic: play button and kicker on one row, vertically centred */
.cinematic__head{display:flex;align-items:center;gap:1.25rem;margin-bottom:1.3rem}
.cinematic__head .play{margin-bottom:0;flex:0 0 auto}
.cinematic__head .kicker{margin-bottom:0}
/* a touch more air before the rubber-hall photo on the pumps page */
.gap-top-lg{margin-top:clamp(3rem,6vw,5rem)}
/* carousel that fills the full height of its (stretched) column.
The track is absolutely positioned so it does NOT inflate the grid row —
the row height is set by the text column and the photo matches it. */
.carousel--fill{position:relative;height:100%;min-height:360px}
.carousel--fill .carousel__track{position:absolute;inset:0;padding:0}
.carousel--fill .carousel__slide{display:flex}
.carousel--fill .carousel__slide figure{height:100%;width:100%;border-radius:var(--radius)}
.carousel--fill .carousel__slide img{height:100%;width:100%;aspect-ratio:auto;object-fit:cover}
.carousel--fill .carousel__nav{position:absolute;bottom:.7rem;right:.7rem;z-index:3;margin:0}
/* when the feature columns stack on mobile, fall back to a normal aspect */
@media(max-width:820px){
.carousel--fill{height:auto;min-height:0}
.carousel--fill .carousel__track{position:static;padding:4px 2px 8px}
.carousel--fill .carousel__slide{display:block}
.carousel--fill .carousel__slide figure{height:auto}
.carousel--fill .carousel__slide img{height:auto;aspect-ratio:4/3}
.carousel--fill .carousel__slide--video video{height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center}
.carousel--fill .carousel__nav{position:static;justify-content:center;margin-top:1rem}
/* feature carousels kept their desktop aspect-ratio + inline height:100% + min-height
on phones, leaving a tall empty gap under the photo with the arrows pinned to the
bottom. Collapse the box to the photo and put the arrows under it.
NOTE: --tall is on its own line (not grouped with :has) so browsers without :has
still get the reference fix. Everything is !important to beat the inline height. */
.feat__media--tall{aspect-ratio:auto!important;height:auto!important;min-height:0!important}
.feat__media:has(.carousel--fill){aspect-ratio:auto!important;height:auto!important;min-height:0!important}
.feat .carousel--fill{height:auto!important;min-height:0!important}
.feat .carousel--fill .carousel__track{position:static!important;height:auto!important;padding:0!important}
.feat .carousel--fill .carousel__slide{height:auto!important}
.feat .carousel--fill .carousel__slide figure{border-radius:var(--radius)}
/* box is now collapsed to the photo, so overlay the arrows on the photo (like desktop)
instead of stacking them below — that stacking was the leftover dark strip */
.feat .carousel--single .carousel__nav{position:absolute!important;right:.7rem!important;bottom:.7rem!important;top:auto!important;left:auto!important;margin:0!important}
/* the first reference photo is nudged -150px on desktop framing; on a narrow phone
that shift pushes it off — keep it centered on mobile */
.feat .carousel--fill .carousel__slide img{object-position:center!important}
}
/* "Литьё металла полного цикла" feature: zoom IN on hover, no ken-burns out */
.bento__cell--feature img{transition:transform .7s var(--ease)}
.bento__cell--feature:hover img{transform:scale(1.07)}
/* video slide in carousel */
.carousel__slide--video figure{margin:0;border-radius:var(--radius);overflow:hidden;position:relative;box-shadow:var(--shadow-soft);background:#0d1114}
.carousel__slide--video video{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3}
.carousel--fill .carousel__slide--video video{aspect-ratio:auto;height:100%}
/* equipment cards: centred text variant */
.cards--center{justify-content:center;grid-template-columns:repeat(auto-fill,minmax(260px,320px))}
.cards--center .pcard__body{text-align:center;align-items:center}
/* two-up grid that stacks to one column on phones */
.grid--2to1{grid-template-columns:1fr 1fr}
@media(max-width:560px){.grid--2to1{grid-template-columns:1fr}}
/* QA strip (5-up): keep the big index numbers from overlapping the text */
.steps--5 .step{padding-right:3rem}
.steps--5 .step h4{max-width:none}
@media(min-width:981px){
.steps--5 .step::before{font-size:1.9rem;top:.6rem;right:.8rem;opacity:.5}
}
/* ============================================================
LANGUAGE SWITCH (nav) — RU / EN segmented toggle
Styled to match the nav: Oswald caps, pill shape, molten accent.
============================================================ */
.lang-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--radius-sm);
background:var(--surface);flex-shrink:0}
.lang-switch__opt{font-family:var(--font-display);font-weight:600;text-transform:uppercase;
letter-spacing:.06em;font-size:.78rem;line-height:1;color:var(--ink-dim);
padding:.42rem .62rem;border-radius:11px;
transition:color .25s var(--ease),background .25s var(--ease)}
.lang-switch__opt:hover{color:var(--ink)}
.lang-switch__opt.is-active,.lang-switch__opt.is-active:hover{color:#1a0e03;background:var(--molten);box-shadow:var(--shadow-soft)}
@media(max-width:600px){
.lang-switch__opt{font-size:.72rem;padding:.4rem .52rem}
}
/* ============================================================
iOS / TOUCH SCROLL PERFORMANCE
On iPhone the fixed, full-screen film-grain layer (mix-blend-mode
over the whole page) and the frosted backdrop-filter header repaint
on every scroll frame, so the scroll judders ("колбасит"). Android
composites these off the main thread, so it stays smooth. Drop the
most expensive fixed compositing work on coarse-pointer (touch)
devices — the look stays nearly identical, the scroll gets smooth.
============================================================ */
@media (hover:none) and (pointer:coarse){
body::after{display:none} /* fixed mix-blend grain: the main offender */
.header::after{
backdrop-filter:none;-webkit-backdrop-filter:none;
background:rgba(9,11,13,.86);
}
.header.is-stuck::after{background:rgba(9,11,13,.93)}
}