/* ============================================
   MARS GROUP — Home page
   Builds on style.css (tokens, header, lead form, FAQ, footer)
   ============================================ */

/* ============================================
   HERO — crafted backdrop, directions take the stage
   ============================================ */
.hc{ height: 100dvh; min-height: 560px; background: #070709; }

/* ---- backdrop, drawn in CSS ---- */
.hc-bg{ position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hc-glow{
  position: absolute; inset: 0;
  background:
    radial-gradient(38% 55% at 72% 46%, rgba(250,90,32,.26) 0%, rgba(250,90,32,.08) 45%, rgba(250,90,32,0) 72%),
    radial-gradient(30% 40% at 84% 20%, rgba(255,182,28,.10) 0%, rgba(255,182,28,0) 70%),
    radial-gradient(60% 60% at 10% 0%, rgba(40,42,52,.55) 0%, rgba(40,42,52,0) 70%),
    linear-gradient(180deg, #0b0b0e 0%, #070709 62%, #050506 100%);
}
/* slow-drifting haze */
.hc-smoke{ position: absolute; border-radius: 50%; will-change: transform; }
.hc-smoke-1{
  width: 70vw; height: 40vh; right: -18vw; top: 38%;
  background: radial-gradient(closest-side, rgba(250,90,32,.16), rgba(250,90,32,0));
  animation: hc-drift 22s cubic-bezier(.45,0,.55,1) infinite alternate;
}
.hc-smoke-2{
  width: 50vw; height: 30vh; right: 20vw; top: 58%;
  background: radial-gradient(closest-side, rgba(255,122,61,.10), rgba(255,122,61,0));
  animation: hc-drift 28s cubic-bezier(.45,0,.55,1) -9s infinite alternate-reverse;
}
@keyframes hc-drift{ to{ transform: translate3d(-8vw, -3vh, 0) scale(1.15); } }

/* vertical light strips, like work lights in a dark hall */
.hc-beam{
  position: absolute; top: 8%; width: 2px; height: 64%;
  background: linear-gradient(180deg, rgba(255,122,61,0) 0%, rgba(255,140,70,.95) 45%, rgba(255,122,61,0) 100%);
  box-shadow: 0 0 14px 2px rgba(250,90,32,.55), 0 0 60px 10px rgba(250,90,32,.18);
  animation: hc-flicker 5s ease-in-out infinite alternate;
}
.hc-beam-1{ left: 3.5%; height: 46%; top: 24%; opacity: .55; animation-delay: -1.5s; }
.hc-beam-2{ left: 55%; opacity: .5; animation-delay: -3s; }
.hc-beam-3{ right: 4.5%; opacity: .85; }
@keyframes hc-flicker{ 0%{ opacity: .45; } 60%{ opacity: .9; } 100%{ opacity: .7; } }

/* reflective floor with a perspective grid and a glowing horizon */
.hc-floor{ position: absolute; left: 0; right: 0; bottom: 0; height: 30%; }
.hc-floor::before{
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(255,140,70,0) 0%, rgba(255,140,70,0) 48%, rgba(255,160,90,.85) 76%, rgba(255,140,70,0) 100%);
  box-shadow: 0 0 22px 3px rgba(250,90,32,.35);
}
.hc-floor::after{
  content: ""; position: absolute; left: -30%; right: -30%; top: 0; height: 100%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.06) 0 1px, transparent 1px 44px),
    linear-gradient(180deg, rgba(250,90,32,.10) 0%, rgba(250,90,32,0) 60%);
  transform: perspective(520px) rotateX(58deg);
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 45%, transparent 90%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 45%, transparent 90%);
}
.hc .hero-grain{ z-index: 1; }

/* ---- content ---- */
.hc-wrap{
  position: relative; z-index: 2;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  column-gap: clamp(16px, 3vw, 56px);
  align-items: center;
  padding-top: calc(76px + clamp(8px, 2vh, 24px));
  padding-bottom: clamp(12px, 2.4vh, 28px);
  color: #fff;
}
.hc-copy{ min-width: 0; max-width: 600px; }
.hc-h1{
  max-width: 12ch;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(32px, min(3.9vw, 6.6vh), 64px);
  line-height: 1.01; letter-spacing: -0.03em;
}
.hc-h1 em{
  font-style: normal;
  background: linear-gradient(168deg, #ffd01a 0%, #ffb61c 30%, #ff9827 54%, var(--accent-2) 78%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hc-badge{
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(14px, 2.6vh, 24px);
  padding: 7px 15px 7px 11px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  background: rgba(255,255,255,.03);
  font-family: var(--font-display); font-weight: 600; font-size: 11px; line-height: 1.2;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.78);
}
.hc-badge-dot{ flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(250,90,32,.22); }

/* direction switcher */
.hc-tabs{
  margin-top: clamp(20px, 4.4vh, 44px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(255,255,255,.12);
}
.hc-tab{
  position: relative;
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 14px 8px 12px 0;
  border: 0; background: none; color: rgba(255,255,255,.5);
  font-family: var(--font-display); font-weight: 600; font-size: 15px; text-align: left;
  cursor: pointer;
  transition: color .4s;
}
.hc-tab-num{ font-family: 'Unbounded', var(--font-display); font-weight: 700; font-size: 10.5px; color: rgba(255,255,255,.35); transition: color .4s; }
.hc-tab-bar{ position: absolute; left: 0; right: 10px; top: -1px; height: 2px; }
.hc-tab-bar i{ display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.hc-tab[data-active]{ color: #fff; }
.hc-tab[data-active] .hc-tab-num{ color: var(--accent-2); }
.hc-tab-bar i.is-running{ animation: hc-bar 6.5s linear forwards; }
.hc.is-paused .hc-tab-bar i.is-running{ animation-play-state: paused; }
@keyframes hc-bar{ to{ transform: scaleX(1); } }
.hc-tab:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.hc-cards{ display: grid; margin-top: 4px; }
.hc-card{
  grid-area: 1 / 1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center;
  padding: clamp(10px, 1.6vh, 14px) 0 0;
  opacity: 0; visibility: hidden; transform: translateY(12px); filter: blur(6px);
  transition: opacity .45s var(--ease), transform .7s var(--ease), filter .5s var(--ease), visibility 0s linear .7s;
}
.hc-card[data-active]{
  opacity: 1; visibility: visible; transform: none; filter: none;
  transition: opacity .7s var(--ease) .15s, transform .9s var(--ease) .15s, filter .7s var(--ease) .15s, visibility 0s;
}
.hc-card:focus-visible{ outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.hc-card-body b{ display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 2.6vh, 23px); line-height: 1.2; }
.hc-card-body span{ display: block; margin-top: 4px; max-width: 44ch; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.62); }
.hc-card-go{
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  transition: background-color .3s, border-color .3s, transform .5s var(--ease);
}

.hc-actions{ margin-top: clamp(18px, 3.8vh, 38px); display: flex; flex-wrap: wrap; gap: 10px; }
.hc-cta{ gap: 14px; padding: 6px 6px 6px 24px; }
.hc-cta-icon{
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.2);
  transition: transform .5s var(--ease), background-color .3s;
}

/* ---- stage ---- */
.hc-stage{
  position: relative;
  justify-self: end; align-self: center;
  width: min(100%, calc(100dvh - 76px - 30px), 780px);
  aspect-ratio: 1;
}
.hc-sun{ /* the brand circle, right behind the product */
  position: absolute; left: 52%; top: 42%;
  width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd01a 0%, #ffb61c 22%, #ff9827 45%, var(--accent-2) 68%, var(--accent) 100%);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 140px 40px rgba(250,90,32,.22);
  animation: hc-sun 10s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes hc-sun{ to{ transform: translate(-50%, -50%) scale(1.06); } }
/* an orange product needs a dark disc behind it: the sun dims to graphite, keeping an orange rim */
.hc-sun::after{
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #2a2a31 0%, #17171b 60%, #101013 100%);
  box-shadow: inset 0 0 0 1px rgba(255,140,70,.55), inset 0 0 60px rgba(250,90,32,.35);
  opacity: 0; transition: opacity 1s var(--ease);
}
.hc[data-slide="2"] .hc-sun::after{ opacity: 1; }
.hc-orbit{
  position: absolute; left: 52%; top: 42%;
  width: 86%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  transform: translate(-50%, -50%);
  animation: hc-spin 24s linear infinite;
}
.hc-orbit::before{ /* a spark travelling round the orbit */
  content: ""; position: absolute; left: 50%; top: -3px;
  width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: var(--accent-2); box-shadow: 0 0 12px 3px rgba(250,90,32,.7);
}
@keyframes hc-spin{ to{ transform: translate(-50%, -50%) rotate(360deg); } }
/* soft contact shadow where the product meets the floor */
.hc-stage::after{
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 2%; height: 10%;
  background: radial-gradient(closest-side, rgba(0,0,0,.75), rgba(0,0,0,0));
  pointer-events: none;
}

.hc-bignum{
  position: absolute; left: -2%; top: 0;
  font-family: 'Unbounded', var(--font-display); font-weight: 800;
  font-size: clamp(90px, 24vh, 260px); line-height: .8; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.14);
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s var(--ease), transform 1s var(--ease);
  user-select: none;
}
.hc-bignum[data-active]{ opacity: 1; transform: none; transition-delay: .2s; }

/* cut-out product shots with their own soft floor reflection, seated on the bottom edge */
.hc-img{
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%; max-width: none;
  object-fit: contain; object-position: 50% 100%;
  /* the reflections run to the picture's bottom edge: fade them out instead of a hard cut */
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 16%);
  mask-image: linear-gradient(0deg, transparent 0%, #000 16%);
  opacity: 0; visibility: hidden;
  transform: translateX(8%) scale(.92);
  filter: blur(10px);
  transition: opacity .7s var(--ease), transform 1.2s var(--ease), filter .8s var(--ease), visibility 0s linear 1.2s;
}
.hc-img[data-active]{
  opacity: 1; visibility: visible; transform: none;
  filter: blur(0);
  transition: opacity .9s var(--ease) .15s, transform 1.4s var(--ease) .1s, filter .9s var(--ease) .15s, visibility 0s;
}
.hc-img[data-leaving]{ transform: translateX(-8%) scale(1.04); }
/* the hydraulic unit is a bulky box: shrink it so it matches the other two */
.hc-img-sm{ padding: 15% 8% 0; }

/* ---- entrance ---- */
@keyframes hc-rise{ from{ opacity: 0; transform: translateY(28px); filter: blur(10px); } }
@keyframes hc-stage-in{ from{ opacity: 0; transform: scale(.9); } }
.hc-copy > *{ animation: hc-rise 1s var(--ease) backwards; }
.hc-copy > :nth-child(2){ animation-delay: .1s; }
.hc-copy > :nth-child(3){ animation-delay: .2s; }
.hc-copy > :nth-child(4){ animation-delay: .28s; }
.hc-copy > :nth-child(5){ animation-delay: .36s; }
.hc-stage{ animation: hc-stage-in 1.4s var(--ease) .1s backwards; }
.hc-bg{ animation: hc-fade 1.6s var(--ease) backwards; }
@keyframes hc-fade{ from{ opacity: 0; } }

/* modal player (used by the projects showreel) */
.hm-modal{
  width: min(1100px, 92vw); max-width: none; max-height: none;
  padding: 0; border: 0; background: transparent; overflow: visible;
}
.hm-modal::backdrop{ background: rgba(10,10,12,.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hm-modal[open]{ animation: av-up .5s var(--ease); }
.hm-modal-box{ position: relative; }
.hm-modal-video{ display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; background: #000; }
.hm-modal-close{
  position: absolute; right: 0; top: -54px;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28); background: transparent; cursor: pointer;
  transition: background-color .25s, border-color .25s, transform .35s var(--ease);
}
.hm-modal-close span::before, .hm-modal-close span::after{
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 16px; height: 1.5px; margin: -.75px 0 0 -8px; background: #fff; border-radius: 1px;
  transform: rotate(45deg);
}
.hm-modal-close span::after{ transform: rotate(-45deg); }

@media (hover: hover) and (pointer: fine){
  .hc-tab:not([data-active]):hover{ color: rgba(255,255,255,.85); }
  .hc-card:hover .hc-card-go{ background: var(--accent); border-color: var(--accent); transform: translateX(3px); }
  .hc-cta:hover .hc-cta-icon{ transform: translate(3px, -1px) scale(1.05); background: rgba(255,255,255,.3); }
  .hm-modal-close:hover{ background: var(--accent); border-color: var(--accent); transform: rotate(90deg); }
}

@media (min-width: 761px) and (max-height: 760px){
  .hc-card-body span{ font-size: 13.5px; line-height: 1.45; }
  .hc-tab{ padding: 11px 6px 10px 0; font-size: 14px; }
}
@media (min-width: 761px) and (max-width: 1100px){
  .hc-badge-more{ display: none; }
  .hc-tab{ font-size: 13.5px; gap: 6px; }
  .hc-card-body span{ display: none; }
}

/* phones: headline, stage, switcher + card + buttons */
@media (max-width: 760px){
  .hc{ height: 100svh; min-height: 640px; }
  .hc-wrap{
    grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    padding-top: 92px; padding-bottom: 16px;
  }
  .hc-copy{ display: contents; }
  .hc-h1{ order: 0; max-width: none; font-size: clamp(27px, 7.6vw, 36px); }
  .hc-badge{ display: none; }
  .hc-stage{ order: 1; justify-self: center; align-self: center; width: min(92vw, 40svh); margin: 4px 0; }
  .hc-tabs{ order: 2; margin-top: 0; grid-template-columns: repeat(3, auto); justify-content: space-between; }      /* equal gaps: in equal columns the short «02 Роботы» looked pushed to the left (2026-10-16) */
  .hc-cards{ order: 3; }
  .hc-actions{ order: 4; margin-top: 14px; flex-wrap: nowrap; gap: 8px; }
  .hc-wrap{ display: flex; flex-direction: column; }
  .hc-tab{ font-size: 13px; gap: 6px; padding: 11px 0 9px; }
  .hc-tab-bar{ right: 0; }
  .hc-tab-num{ font-size: 9px; }
  .hc-card-body b{ font-size: 16px; }
  .hc-card-body span{ font-size: 12.5px; line-height: 1.4; }
  .hc-card-go{ width: 36px; height: 36px; }
  .hc-actions .btn{ flex: 1; font-size: 13.5px; }
  .hc-cta{ padding: 5px 5px 5px 16px; gap: 8px; justify-content: space-between; }
  .hc-cta-icon{ width: 32px; height: 32px; }
  .hc-ghost{ padding: 12px 14px; }
  .hc-bignum{ font-size: 88px; left: 0; }
  .hc-beam-2{ left: 70%; }
  .hc-floor{ height: 22%; }
  .hm-modal-close{ top: -50px; }
}
@media (max-width: 380px){
  .hc-card-body span{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .hc-copy > *, .hc-stage, .hc-bg, .hm-modal[open]{ animation: none !important; }
  .hc-smoke, .hc-beam, .hc-sun, .hc-orbit{ animation: none !important; }
  .hc-card, .hc-bignum{ transition: opacity .3s ease, visibility 0s !important; transform: none !important; filter: none !important; }
  .hc-img{ transition: opacity .3s ease, visibility 0s !important; transform: none !important; filter: none !important; }
}

/* ============================================
   PROJECTS — showreel + case stage
   ============================================ */
.pj-head{
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: 16px clamp(24px, 4vw, 64px); align-items: end;
}
.pj-title{ max-width: 18ch; }
.pj-lead{ max-width: 46ch; font-size: clamp(15px, 1.9vh, 17px); line-height: 1.6; color: var(--muted-2); }
.pj-links{ margin-top: clamp(10px, 1.8vh, 16px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pj-all{
  display: inline-flex; align-items: center; gap: 12px;
  padding: 5px 5px 5px 18px; border-radius: 999px;
  background: var(--ink); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
  transition: background-color .3s;
}
.pj-all-icon{
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%; background: var(--accent);
  transition: transform .5s var(--ease);
}
.pj-chan{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 999px;
  border: 1px solid rgba(10,10,12,.14);
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
  transition: border-color .3s, color .3s;
}
.pj-chan span{ color: var(--accent); }

.pj-body{
  margin-top: clamp(16px, 3.4vh, 36px);
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(10px, 1.4vw, 20px);
  height: clamp(300px, 57vh, 580px);
}

/* double bezel: a tray holding the screen */
.pj-stage{
  height: 100%;
  padding: 7px;
  border: 1px solid rgba(10,10,12,.08); border-radius: 30px;
  background: rgba(10,10,12,.035);
}
.pj-screen{
  position: relative; height: 100%;
  border-radius: 23px; overflow: hidden;
  background: var(--ink);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.12), 0 30px 60px rgba(10,10,12,.14);
  isolation: isolate;
}
.pj-slide{ position: absolute; inset: 0; visibility: hidden; z-index: 0; overflow: hidden; }
.pj-slide[data-leaving]{ visibility: visible; z-index: 1; }
.pj-slide[data-active]{ visibility: visible; z-index: 2; animation: pj-wipe 1.1s var(--ease) both; }
@keyframes pj-wipe{ from{ clip-path: inset(0 0 0 100%); } to{ clip-path: inset(0 0 0 0); } }

.pj-video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* every source photo is a pair side by side: the box is twice as wide, showing the left one */
.pj-half{
  position: absolute; left: 0; top: 0;
  width: 200%; max-width: none; height: 100%;
  object-fit: cover; object-position: 0 50%;
  transform-origin: 25% 50%;
}
.pj-slide[data-active] .pj-half{ animation: pj-kenburns 8s cubic-bezier(.2,.6,.3,1) both; }
@keyframes pj-kenburns{ from{ transform: scale(1.14); } to{ transform: scale(1); } }

.pj-cap{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(70px, 14vh, 140px) clamp(18px, 2.4vw, 34px) clamp(18px, 3vh, 30px);
  background: linear-gradient(0deg, rgba(10,10,12,.92) 0%, rgba(10,10,12,.62) 48%, rgba(10,10,12,0) 100%);
  color: #fff;
}
.pj-slide[data-active] .pj-cap > *{ animation: pj-cap-in .9s var(--ease) backwards; }
.pj-slide[data-active] .pj-cap > :nth-child(1){ animation-delay: .35s; }
.pj-slide[data-active] .pj-cap > :nth-child(2){ animation-delay: .43s; }
.pj-slide[data-active] .pj-cap > :nth-child(3){ animation-delay: .51s; }
.pj-slide[data-active] .pj-cap > :nth-child(4){ animation-delay: .59s; }
@keyframes pj-cap-in{ from{ opacity: 0; transform: translateY(18px); filter: blur(6px); } }

.pj-tag{
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.1);
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
}
.pj-name{
  margin-top: clamp(8px, 1.4vh, 12px); max-width: 24ch;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(21px, min(2.3vw, 3.6vh), 36px); line-height: 1.08; letter-spacing: -0.015em;
}
.pj-text{ margin-top: 6px; max-width: 52ch; font-size: clamp(14px, 1.9vh, 16px); line-height: 1.5; color: rgba(255,255,255,.74); }
.pj-pill{
  margin-top: clamp(12px, 2vh, 18px);
  display: inline-flex; align-items: center; gap: 12px;
  padding: 5px 5px 5px 18px; border: 0; border-radius: 999px;
  background: #fff; color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
  cursor: pointer;
}
.pj-pill-icon{
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: #fff;
  transition: transform .5s var(--ease);
}
.pj-pill-icon svg{ width: 14px; height: 14px; margin-left: 2px; fill: currentColor; }
.pj-pill:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.pj-pill-accent{ background: var(--accent); color: #fff; }
.pj-pill-accent .pj-pill-icon{ background: #fff; color: var(--accent); }

.pj-count{
  position: absolute; top: 14px; right: 14px; z-index: 3;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(10,10,12,.62); color: rgba(255,255,255,.6);
  font-family: 'Unbounded', var(--font-display); font-weight: 600; font-size: 11px;
}
.pj-count b{ color: #fff; font-weight: 700; }

/* index */
.pj-index{ height: 100%; display: flex; flex-direction: column; gap: clamp(4px, .7vh, 7px); min-width: 0; }
.pj-row{
  position: relative; overflow: hidden;
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center;
  width: 100%; margin: 0; padding: 0 18px 0 16px;
  border: 1px solid rgba(10,10,12,.07); border-radius: 16px;
  background: #fff; color: var(--ink);
  font: inherit; text-align: left;
  cursor: pointer;
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .3s, transform .5s var(--ease);
}
.pj-row:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.pj-row-num{ font-family: 'Unbounded', var(--font-display); font-weight: 700; font-size: 11px; color: var(--muted); transition: color .3s; }
.pj-row-body{ min-width: 0; }
.pj-row-body b{
  display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(14px, 1.95vh, 16.5px); line-height: 1.25;
}
.pj-row-body span{
  display: block; margin-top: 1px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 12.5px; color: var(--muted); transition: color .3s;
}
.pj-row-bar{ position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.pj-row-bar i{ display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.pj-row[data-active]{ background: var(--ink); border-color: var(--ink); color: #fff; }
.pj-row[data-active] .pj-row-num{ color: var(--accent-2); }
.pj-row[data-active] .pj-row-body span{ color: rgba(255,255,255,.58); }
.pj-row[data-active] .pj-row-bar i.is-running{ animation: pj-bar var(--dur, 6.5s) linear forwards; }
.pj.is-paused .pj-row-bar i.is-running{ animation-play-state: paused; }
@keyframes pj-bar{ to{ transform: scaleX(1); } }

/* entrance */
.pj-wrap:not(.is-visible) .pj-head > * > *,
.pj-wrap:not(.is-visible) .pj-stage,
.pj-wrap:not(.is-visible) .pj-row{ opacity: 0; }
.pj-wrap.is-visible .pj-head > * > *{ animation: av-up .8s var(--ease) backwards; }
.pj-wrap.is-visible .pj-head > :first-child > :nth-child(2){ animation-delay: .08s; }
.pj-wrap.is-visible .pj-aside > *{ animation-delay: .16s; }
.pj-wrap.is-visible .pj-stage{ animation: lf-in 1.1s var(--ease) .15s backwards; }
.pj-wrap.is-visible .pj-row{ animation: av-side .7s var(--ease) calc(.3s + var(--i) * .06s) backwards; }

@media (hover: hover) and (pointer: fine){
  .pj-all:hover{ background: var(--accent-ink); }
  .pj-all:hover .pj-all-icon{ transform: translateX(3px) rotate(-45deg); }
  .pj-chan:hover{ border-color: var(--accent); color: var(--accent-ink); }
  .pj-pill:hover .pj-pill-icon{ transform: translateX(3px) scale(1.06); }
  .pj-row:not([data-active]):hover{ border-color: rgba(250,90,32,.4); transform: translateX(-4px); }
}

@media (min-width: 761px) and (max-height: 800px){
  .pj-body{ height: clamp(280px, 55vh, 440px); }
  .pj-lead{ font-size: 14.5px; line-height: 1.5; }
  .pj-text{ font-size: 13.5px; }
}
@media (min-width: 761px) and (max-height: 720px){
  .pj-row-body span{ display: none; }
  .pj-text{ display: none; }
  .pj-links{ margin-top: 8px; }
}
@media (min-width: 761px) and (max-width: 1100px){
  .pj-row-body span{ display: none; }
}

@media (max-width: 900px){
  .pj-head{ grid-template-columns: 1fr; gap: 10px; }
  .pj-body{ display: flex; flex-direction: column; height: auto; }
  .pj-stage{ height: min(40svh, 420px); }
  .pj-index{
    height: auto; flex-direction: row; gap: 8px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: -28px; padding: 2px 28px 4px;
  }
  .pj-index::-webkit-scrollbar{ display: none; }
  .pj-row{ flex: 0 0 auto; width: min(64vw, 280px); height: 60px; scroll-snap-align: start; }
}
@media (max-width: 760px){
  .pj-lead{ display: none; }
  .pj-links{ margin-top: 0; }
  .pj-all{ font-size: 13.5px; padding-left: 14px; }
  .pj-all-icon{ width: 28px; height: 28px; }
  .pj-chan{ padding: 8px 12px; font-size: 12.5px; }
  .pj-body{ margin-top: 14px; gap: 10px; }
  .pj-stage{ height: min(38svh, 330px); padding: 5px; border-radius: 22px; }
  .pj-screen{ border-radius: 17px; }
  .pj-cap{ padding: 50px 14px 14px; }
  .pj-tag{ font-size: 10px; padding: 4px 10px; }
  .pj-name{ font-size: 19px; margin-top: 8px; }
  .pj-text{ display: none; }
  .pj-pill{ margin-top: 10px; font-size: 13px; padding-left: 14px; }
  .pj-pill-icon{ width: 28px; height: 28px; }
  .pj-count{ top: 10px; right: 10px; font-size: 10px; }
  .pj-index{ margin-inline: -18px; padding-inline: 18px; }
  .pj-row{ width: 62vw; height: 56px; padding: 0 12px; gap: 10px; grid-template-columns: 24px minmax(0, 1fr); }
  .pj-row-body b{ font-size: 14px; }
  .pj-row-body span{ font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce){
  .pj-wrap .pj-head > * > *, .pj-wrap .pj-stage, .pj-wrap .pj-row{ opacity: 1 !important; animation: none !important; }
  .pj-slide[data-active], .pj-slide[data-active] .pj-half, .pj-slide[data-active] .pj-cap > *{ animation: none !important; }
  .pj-row{ transition: none; }
}

/* ============================================
   PAGE FLOW — free scroll below the hero
   ============================================ */
html.free-scroll{ scroll-snap-type: none; }
.page-home .section{ min-height: 0; padding: clamp(90px, 12vh, 140px) 0; }
.page-home .section.pj{ padding-top: clamp(80px, 11vh, 130px); }

/* shared entrance: children rise out of a soft blur, one after another */
@keyframes rv-up{ from{ opacity: 0; transform: translateY(42px); filter: blur(8px); } }
.rvg:not(.is-visible) > *{ opacity: 0; }
.rvg.is-visible > *{ animation: rv-up 1.1s var(--ease) backwards; }
.rvg.is-visible > :nth-child(2){ animation-delay: .09s; }
.rvg.is-visible > :nth-child(3){ animation-delay: .18s; }
.rvg.is-visible > :nth-child(4){ animation-delay: .27s; }
.rvg.is-visible > :nth-child(5){ animation-delay: .36s; }
.rvg.is-visible > :nth-child(6){ animation-delay: .45s; }
.rvg.is-visible > :nth-child(7){ animation-delay: .54s; }

.hm-title-xl{
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 4.6vw, 70px); line-height: 1.02; letter-spacing: -0.03em;
}
.hm-grad{
  background: linear-gradient(168deg, #ffd01a 0%, #ffb61c 30%, #ff9827 54%, var(--accent-2) 78%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* pointer spotlight for cards (position set from JS) */
.spot{ position: relative; isolation: isolate; }
.spot::before{
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--spot, rgba(250,90,32,.12)), transparent 60%);
  opacity: 0; transition: opacity .5s var(--ease);
}

/* ============================================
   TRUST — logos under the hero
   ============================================ */
.tr{ background: #0c0c0f; color: #fff; border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.tr-wrap{ display: flex; align-items: center; gap: clamp(20px, 3vw, 48px); padding-block: clamp(20px, 3vh, 30px); }
.tr-label{ flex: none; max-width: 28ch; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.55); }
.tr-label b{ display: block; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: #fff; }
.tr-marquee{
  flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tr-track{ display: flex; gap: 12px; padding-right: 12px; width: max-content; animation: marquee 55s linear infinite; }
.tr-track li{ flex: none; width: clamp(86px, 7.4vw, 112px); aspect-ratio: 290 / 281; border-radius: 14px; overflow: hidden; background: #fff; }
.tr-track img{ width: 100%; height: 100%; object-fit: cover; }
@keyframes marquee{ to{ transform: translateX(-50%); } }

/* ============================================
   WHY — bento with small living visuals
   ============================================ */


/* ============================================
   DIRECTIONS — stacking panels
   ============================================ */
.dr .eyebrow, .ps2 .eyebrow{ color: var(--accent-2); }
.dr .eyebrow::before, .ps2 .eyebrow::before{ background: var(--accent-2); }
.dr{ background: var(--ink); color: #fff; padding: clamp(96px, 14vh, 160px) 0 clamp(60px, 8vh, 100px); }
.dr-title{ font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 5.4vw, 88px); line-height: 1; letter-spacing: -0.035em; }
.dr-title em{
  font-style: normal;
  background: linear-gradient(168deg, #ffd01a 0%, #ffb61c 30%, #ff9827 54%, var(--accent-2) 78%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.dr-stack{ margin-top: clamp(40px, 7vh, 72px); }
.dr-panel{
  --spot: rgba(250,90,32,.14);
  /* a panel taller than the window sticks by its bottom edge instead, so its last lines stay readable (--h is set in home.js) */
  position: sticky; top: min(calc(96px + var(--n) * 22px), calc(100vh - var(--h, 0px) - 16px));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  min-height: min(680px, calc(100vh - 150px));
  margin-bottom: 32px;
  border-radius: 36px; overflow: hidden; isolation: isolate;
  background: linear-gradient(145deg, #1a1a1f 0%, #111114 100%);
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 -30px 80px rgba(0,0,0,.55);
  transform-origin: 50% 0;
  scale: var(--s, 1);
}
.dr-panel::before{
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 60%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.dr-panel::after{ /* dims a panel as the next one slides over it */
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  background: #050506; opacity: var(--dim, 0);
}
.dr-pneu{ background: radial-gradient(90% 80% at 100% 0%, rgba(250,90,32,.22) 0%, rgba(250,90,32,0) 55%), linear-gradient(145deg, #1c1c21 0%, #111114 100%); border-color: rgba(250,90,32,.28); }
.dr-copy{ position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3.4vw, 56px); }
.dr-kicker{ display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); }
.dr-kicker span{
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  flex: none;      /* a label in two lines (phones) used to squeeze the circle into an oval */
  border: 1px solid rgba(255,140,70,.5); font-family: 'Unbounded', var(--font-display); font-size: 11px; letter-spacing: 0;
}
.dr-name{ margin-top: 18px; max-width: 18ch; font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3vw, 48px); line-height: 1.05; letter-spacing: -0.02em; }
.dr-text{ margin-top: 16px; max-width: 50ch; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: rgba(255,255,255,.66); }
.dr-checks{ margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; max-width: 560px; }
.dr-checks li{ position: relative; padding-left: 30px; font-size: 15px; line-height: 1.4; }
.dr-checks li::before{ content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); }
.dr-checks li::after{ content: ""; position: absolute; left: 7px; top: 5px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.dr-actions{ margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.dr-btn{ gap: 14px; padding: 6px 6px 6px 24px; }
.dr-btn-icon{ display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.2); transition: transform .5s var(--ease); }
.dr-link{ font-family: var(--font-display); font-weight: 600; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 2px; transition: color .25s, border-color .25s; }
.dr-link span{ color: var(--accent-2); }

.dr-rows{ margin-top: 24px; border-top: 1px solid rgba(255,255,255,.1); max-width: 580px; }
.dr-rows a{
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; column-gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.dr-rows a::before{ content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.dr-rows b{ grid-column: 1; font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 1.3vw, 19px); transition: color .3s, transform .5s var(--ease); }
.dr-rows span{ grid-column: 1; margin-top: 2px; font-size: 13.5px; color: rgba(255,255,255,.5); }
.dr-rows i{ grid-column: 2; grid-row: 1 / span 2; justify-self: end; font-style: normal; color: var(--accent-2); opacity: .35; transition: opacity .3s, transform .5s var(--ease); }
.dr-rows a[data-active]::before{ transform: scaleX(1); }
.dr-rows a[data-active] b{ color: var(--accent-2); transform: translateX(6px); }
.dr-rows a[data-active] i{ opacity: 1; transform: translateX(3px); }
.dr-rows a:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.dr-visual{ position: relative; z-index: 1; min-height: 360px; }
.dr-shelf{
  margin: clamp(14px, 1.6vw, 24px); margin-left: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.dr-sku{
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; min-height: 0;
  padding: 10px 10px 12px 16px; border-radius: 22px; color: var(--ink);
  background: linear-gradient(160deg, #ffffff 0%, #f1efea 100%);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.dr-sku::before{ /* brand glow that rises on hover */
  content: ""; position: absolute; right: -30%; top: -40%; z-index: -1; width: 80%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,152,39,.35), rgba(255,152,39,0));
  opacity: 0; transform: scale(.7); transition: opacity .6s var(--ease), transform .8s var(--ease);
}
.dr-sku-img{ position: relative; flex: 1; min-height: 0; }
.dr-sku-img img{ position: absolute; inset: 4% 4% 2%; width: 92%; height: 94%; object-fit: contain; mix-blend-mode: multiply; transition: transform .9s var(--ease); }
.dr-sku-foot{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dr-sku-text b{ display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.15; }
.dr-sku-text small{ display: block; margin-top: 2px; font-family: var(--font-display); font-size: 12px; letter-spacing: .02em; color: var(--muted); }
.dr-sku-go{
  flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: 14px;
  transition: background-color .35s, transform .5s var(--ease);
}
.dr-sku:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.dr-panel .dr-sku{ animation: none; }
.dr-frames{ margin: clamp(14px, 1.6vw, 24px); margin-left: 0; border-radius: 26px; overflow: hidden; background: #0c0c0f; }
.dr-frame{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; scale: 1.08;
  transition: opacity .8s var(--ease), scale 1.6s var(--ease);
}
.dr-frame[data-active]{ opacity: 1; scale: 1; }
.dr-frame-contain{ object-fit: contain; padding: 6% 8% 0; background: radial-gradient(60% 60% at 50% 45%, rgba(250,90,32,.35), rgba(250,90,32,0) 70%), #101013; }
.dr-badge{
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(10,10,12,.78); border: 1px solid rgba(255,255,255,.12);
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
}

/* ============================================
   ORDER — three ways + live stock strip
   ============================================ */
.od{ background: var(--paper); padding: clamp(96px, 14vh, 160px) 0 clamp(80px, 12vh, 130px); overflow: hidden; }
.od-title{ font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 4vw, 60px); line-height: 1.04; letter-spacing: -0.03em; max-width: 16ch; }
.od-grid{ margin-top: clamp(36px, 6vh, 56px); display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.od-card{
  --spot: rgba(250,90,32,.10);
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; min-height: 360px;
  padding: clamp(24px, 2.4vw, 34px); border-radius: 28px;
  background: #fff; border: 1px solid rgba(10,10,12,.07);
  transition: transform .7s var(--ease), box-shadow .7s var(--ease), border-color .4s;
}
.od-card::before{
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 60%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.od-step{ font-family: 'Unbounded', var(--font-display); font-weight: 800; font-size: 44px; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(10,10,12,.25); }
.od-name{ margin-top: 22px; font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.12; }
.od-text{ margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--muted-2); }
.od-go{
  margin-top: auto; padding-top: 26px;
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  border-bottom: 1px solid rgba(10,10,12,.25); padding-bottom: 2px;
}
.od-go span{ color: var(--accent); transition: transform .5s var(--ease); }
.od-shop{ background: var(--ink); border-color: var(--ink); color: #fff; --spot: rgba(250,90,32,.25); }
.od-shop::after{ content: ""; position: absolute; right: -25%; bottom: -45%; z-index: -1; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(250,90,32,.45), rgba(250,90,32,0)); }
.od-shop .od-step{ -webkit-text-stroke-color: rgba(255,255,255,.3); }
.od-shop .od-text{ color: rgba(255,255,255,.66); }
.od-shop .od-go{ border: 0; padding: 12px 14px 12px 22px; border-radius: 999px; background: var(--accent); color: #fff; }
.od-shop .od-go span{ color: #fff; }
.od-big{ margin-top: 22px; display: flex; align-items: baseline; gap: 4px; font-family: 'Unbounded', var(--font-display); font-weight: 800; font-size: clamp(44px, 4.8vw, 76px); line-height: 1; letter-spacing: -0.04em; }
.od-big i{ font-style: normal; color: var(--accent); }
.od-big small{ margin-left: 10px; font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: 0; color: rgba(255,255,255,.6); }

.od-strip{ margin-top: clamp(40px, 7vh, 72px); }
.od-strip ul{ display: flex; gap: 14px; padding-right: 14px; width: max-content; animation: marquee 70s linear infinite; }
.od-strip li{ flex: none; width: clamp(260px, 26vw, 380px); aspect-ratio: 1500 / 688; border-radius: 20px; overflow: hidden; background: #ddd; }
.od-strip img{ width: 100%; height: 100%; object-fit: cover; }
.od-strip-note{ margin-top: 14px; font-size: 13.5px; color: var(--muted); }

/* ============================================
   NUMBERS — brand gradient band
   ============================================ */
.nb{
  position: relative; overflow: hidden;
  background-color: #ff9827;
  background-image: linear-gradient(120deg, #ffd01a 0%, #ffb61c 25%, #ff9827 50%, var(--accent-2) 75%, var(--accent) 100%);
  color: var(--ink);
  padding: clamp(56px, 9vh, 100px) 0;
}
.nb::before{ /* engineering hatch */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(135deg, rgba(10,10,12,.05) 0 1px, transparent 1px 14px);
}
.nb-wrap{ position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); container-type: inline-size; }
.nb-item{ padding: 6px clamp(14px, 2vw, 32px); }
.nb-item + .nb-item{ border-left: 1px solid rgba(10,10,12,.18); }
.nb-num{ display: flex; align-items: baseline; font-family: 'Unbounded', var(--font-display); font-weight: 800; font-size: min(clamp(34px, 3.9vw, 68px), 4.4cqi); line-height: 1; letter-spacing: -0.045em; white-space: nowrap; }
.nb-num i{ font-style: normal; font-size: .6em; margin-left: .04em; }
.nb-text{ margin-top: 12px; max-width: 24ch; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.45; color: rgba(10,10,12,.72); }

/* ============================================
   PROCESS — timeline filled by scroll
   ============================================ */
.ps2{ background: var(--ink); color: #fff; padding: clamp(96px, 14vh, 160px) 0; }
.ps2-title{ font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 4vw, 60px); line-height: 1.04; letter-spacing: -0.03em; max-width: 18ch; }
.ps2-lead{ font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: rgba(255,255,255,.62); }

/* ============================================
   ABOUT — text + photo collage
   ============================================ */
.ab2{ background: var(--paper); padding: clamp(96px, 14vh, 160px) 0; }
.ab2-wrap{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.ab2-title{ font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 52px); line-height: 1.06; letter-spacing: -0.025em; max-width: 18ch; }
.ab2-text{ margin-top: 18px; max-width: 54ch; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.65; color: var(--muted-2); }
.ab2-facts{ margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ab2-facts li{ padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid rgba(10,10,12,.07); }
.ab2-facts b{ display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.ab2-facts span{ display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.ab2-links{ margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.ab2-link{ font-family: var(--font-display); font-weight: 600; font-size: 15px; border-bottom: 1px solid rgba(10,10,12,.25); padding-bottom: 2px; transition: color .25s, border-color .25s; }
.ab2-link span{ color: var(--accent); }
.ab2-link-dim{ color: var(--muted-2); }
.ab2-media{ display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; height: clamp(420px, 60vh, 600px); }
.ab2-photo{ position: relative; margin: 0; border-radius: 24px; overflow: hidden; background: #ddd; }
.ab2-photo-a{ grid-row: 1 / span 2; }
.ab2-photo img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.ab2-photo img.ab2-half{ width: 200%; max-width: none; object-position: 0 50%; transform-origin: 25% 50%; }
.ab2-photo figcaption{ position: absolute; left: 12px; bottom: 12px; padding: 7px 13px; border-radius: 999px; background: rgba(10,10,12,.78); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 13px; }

/* ============================================
   CONTACTS
   ============================================ */
.ct2{ background: var(--paper-2); padding: clamp(96px, 14vh, 150px) 0; }
.ct2-wrap{ display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 80px); align-items: stretch; }
.ct2-title{ font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 52px); line-height: 1.06; letter-spacing: -0.025em; max-width: 16ch; }
.ct2-phone{ display: inline-block; margin-top: 26px; font-family: 'Unbounded', var(--font-display); font-weight: 700; font-size: clamp(26px, 2.8vw, 44px); letter-spacing: -0.02em; transition: color .25s; }
.ct2-row{ margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.ct2-row a{ font-family: var(--font-display); font-weight: 500; font-size: 18px; transition: color .25s; }
.ct2-hours{ margin-top: 6px; font-size: 14.5px; color: var(--muted); }
.ct2-places{ margin-top: 26px; display: grid; gap: 10px; }
.ct2-place{ display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid rgba(10,10,12,.07); }
.ct2-pin{ display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50% 50% 50% 4px; background: var(--accent); color: #fff; font-family: 'Unbounded', var(--font-display); font-weight: 700; font-size: 13px; }
.ct2-name{ font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.ct2-addr{ margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--muted-2); }
.ct2-route{ display: inline-block; margin-top: 6px; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--accent-ink); border-bottom: 1px solid rgba(184,65,15,.3); }
.ct2-map{ min-height: 460px; border-radius: 28px; overflow: hidden; background: #ddd; border: 1px solid rgba(10,10,12,.08); }

/* short windows and single-column layouts: panels simply follow each other,
   a sticky panel taller than the window would hide its own bottom */
@media (max-width: 1100px), (max-height: 820px){
  .dr-panel{ position: relative; top: auto; scale: 1; margin-bottom: 20px; box-shadow: none; }
  .dr-panel::after{ display: none; }
}

/* ============================================
   HOVER
   ============================================ */
@media (hover: hover) and (pointer: fine){
  .od-card:hover{ transform: translateY(-6px); box-shadow: 0 30px 60px rgba(10,10,12,.12); }
  .od-card:hover::before, .dr-panel:hover::before{ opacity: 1; }
      .od-card:hover .od-go span{ transform: translateX(4px); }
  .dr-btn:hover .dr-btn-icon{ transform: translate(2px, -2px) scale(1.06); }
  .dr-link:hover{ color: var(--accent-2); border-color: var(--accent-2); }
  .dr-sku:hover{ transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,.35); }
  .dr-sku:hover::before{ opacity: 1; transform: none; }
  .dr-sku:hover img{ transform: scale(1.1) rotate(-3deg); }
  .dr-sku:hover .dr-sku-go{ background: var(--accent); transform: rotate(45deg); }
  .ab2-photo:hover img{ transform: scale(1.05); }
  .ab2-link:hover{ color: var(--accent-ink); border-color: var(--accent); }
  .ct2-phone:hover, .ct2-row a:hover{ color: var(--accent-ink); }
}

/* ============================================
   TABLET & PHONE
   ============================================ */
@media (max-width: 1100px){
        .dr-panel{ grid-template-columns: 1fr; min-height: 0; }
  .dr-visual{ min-height: 320px; margin: 0 16px 16px; }
  .dr-auto .dr-frames{ min-height: 440px; }
        .dr-shelf{ margin: 0 16px 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, 220px); }
  .dr-frames{ margin: 0 16px 16px; }
  .od-grid{ grid-template-columns: 1fr 1fr; }
  .od-shop{ grid-column: 1 / -1; min-height: 0; }
  .ab2-wrap, .ct2-wrap{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .page-home .section{ padding: 72px 0; }
  .tr-wrap{ flex-direction: column; align-items: flex-start; gap: 14px; }
  .tr-marquee{ width: calc(100% + 36px); margin-inline: -18px; }
  .tr-track li{ width: 76px; }

              
  .dr{ padding: 72px 0 40px; }
  .dr-panel{ position: relative; top: auto; scale: 1; border-radius: 26px; margin-bottom: 16px; }
  .dr-panel::after{ display: none; }
  .dr-copy{ padding: 26px 20px 20px; }
  .dr-checks{ grid-template-columns: 1fr; }
  .dr-visual{ min-height: 240px; margin: 0 10px 10px; }
  .dr-auto .dr-frames{ min-height: 340px; }
  .dr-shelf{ grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 150px); gap: 8px; margin: 0 10px 10px; min-height: 0; }
  .dr-sku{ padding: 8px 8px 10px 12px; border-radius: 16px; }
  .dr-sku-text b{ font-size: 13.5px; }
  .dr-sku-text small{ display: none; }
  .dr-sku-go{ width: 26px; height: 26px; font-size: 11px; }
  /* a long one-word name («Пневмоцилиндры») and the arrow did not fit side by side in a half-width tile:
     the arrow goes to the top right corner, the name gets the whole width */
  .dr-sku-foot{ display: block; }
  .dr-sku-go{ position: absolute; top: 8px; right: 8px; }
  .dr-frames{ margin: 0 10px 10px; }

  .od{ padding: 72px 0; }
  .od-grid{ grid-template-columns: 1fr; gap: 12px; }
  .od-card{ min-height: 0; border-radius: 22px; }
  .od-step{ font-size: 34px; }

  .nb-wrap{ grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .nb-num{ font-size: min(clamp(30px, 9vw, 42px), 9.4cqi); }
  .nb-item:nth-child(3){ border-left: 0; }

  .ps2{ padding: 72px 0; }

  .ab2{ padding: 72px 0; }
  .ab2-facts{ grid-template-columns: 1fr; }
  .ab2-media{ height: 380px; }

  .ct2{ padding: 72px 0; }
  .ct2-map, .ct2-map iframe{ min-height: 300px; }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce){
  .rvg > *, .rvg.is-visible > *{ opacity: 1 !important; animation: none !important; }
  .tr-track, .od-strip ul{ animation: none; }
  .tr-marquee, .od-strip{ overflow-x: auto; }
  .tr-track [aria-hidden="true"], .od-strip [aria-hidden="true"]{ display: none; }
    .dr-panel{ scale: 1 !important; }
  .dr-frame{ transition: opacity .2s; scale: 1; }
}


/* advantages, the row of three cards (stock, production, engineers): number | title | text on common levels.
   The free space above the text used to come from min-height with the text pinned to the bottom,
   so a two-line title lifted its number above the neighbours; now it is the top padding of the text block. */
@supports (grid-template-rows: subgrid){
      /* card 05 keeps its picture of a replacement in the free space above the text */
  
  
}

/* the same for the first row (fast delivery, original only) */


/* ============================================
   HOME v2 (2026-10-06): links into the reworked sections, tools + articles block, contacts
   ============================================ */

/* ---- directions: extra links under each panel's text ---- */
.dr-more{ margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 580px; }
.dr-more a{
  display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 13px 16px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); transition: border-color .3s, background-color .3s;
}
.dr-more b{ font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.25; }
.dr-more b::after{ content: "\2192"; margin-left: 8px; color: var(--accent-2); }
.dr-more span{ font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.55); }
.dr-more a:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.dr-foot{ margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px 24px; max-width: 580px; }
.dr-foot .dr-link{ font-size: 14.5px; }
@supports (grid-template-rows: subgrid){
  .dr-more > li{ display: grid; grid-template-rows: subgrid; grid-row: span 2; }
  .dr-more a{ display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; row-gap: 3px; }
}

/* ---- projects: industries under the stage ---- */
.pj-ind{ margin-top: clamp(14px, 2.4vh, 24px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pj-ind-label{ margin-right: 6px; font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.pj-ind a{
  padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(10,10,12,.14); background: rgba(255,255,255,.6);
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px; line-height: 1; transition: border-color .3s, color .3s, background-color .3s;
}
.pj-ind a:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- tools + articles ---- */
.kb{ position: relative; overflow: hidden; background: var(--ink); color: #fff; padding: clamp(88px, 13vh, 150px) 0; }
.kb::before{
  content: ""; position: absolute; right: -12%; top: -30%; width: 60%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(250,90,32,.2), rgba(250,90,32,0));
}
.kb > .wrap{ position: relative; }
.kb .eyebrow{ color: var(--accent-2); }
.kb-head{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 24px clamp(24px, 5vw, 80px); align-items: end; }
.kb-title{ font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.8vw, 58px); line-height: 1.05; letter-spacing: -0.03em; max-width: 19ch; }
.kb-title em{ font-style: normal; background: linear-gradient(100deg, #ffd01a 0%, #ff9827 48%, #fa5a20 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kb-lead{ font-size: clamp(15px, 1.2vw, 18px); line-height: 1.6; color: rgba(255,255,255,.62); }

.kb-tools{ margin-top: clamp(32px, 5vh, 56px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kb-tool{
  position: relative; display: flex; flex-direction: column; height: 100%; padding: 24px 22px 22px; border-radius: 24px; overflow: hidden;
  background: var(--ink-2); border: 1px solid rgba(255,255,255,.08); transition: border-color .4s, transform .6s var(--ease);
}
.kb-tool::after{ content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 2px; background: linear-gradient(90deg, #ffd01a, #fa5a20); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.kb-f{
  padding-bottom: clamp(26px, 4vh, 44px); font-family: 'Unbounded', var(--font-display); font-weight: 700; font-size: clamp(19px, 1.75vw, 27px); line-height: 1.15; letter-spacing: -0.02em; white-space: nowrap;
  background: linear-gradient(100deg, #ffd01a 0%, #ff9827 55%, #fa5a20 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kb-f i{ font-style: normal; color: rgba(255,255,255,.34); padding: 0 .08em; }
.kb-kicker{ font-family: var(--font-display); font-weight: 600; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.kb-name{ margin-top: 8px; font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.2; letter-spacing: -0.01em; }
.kb-text{ margin-top: 8px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.6); }
.kb-go{ margin-top: auto; padding-top: 20px; font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.kb-go span{ display: inline-block; margin-left: 4px; color: var(--accent-2); transition: transform .5s var(--ease); }
.kb-tool:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
@supports (grid-template-rows: subgrid){
  /* formula | section | name | text | link — on common levels in all four cards */
  .kb-tools > li{ display: grid; grid-template-rows: subgrid; grid-row: span 5; }
  .kb-tool{ display: grid; grid-template-rows: subgrid; grid-row: 1 / -1; row-gap: 0; }
  .kb-go{ align-self: end; }
}

.kb-read{ margin-top: clamp(36px, 6vh, 64px); padding-top: clamp(28px, 4vh, 44px); border-top: 1px solid rgba(255,255,255,.1); display: grid; grid-template-columns: minmax(0, .4fr) minmax(0, 1fr); gap: 20px clamp(24px, 5vw, 80px); align-items: start; }
.kb-read-head{ display: grid; gap: 14px; justify-items: start; }
.kb-read-title{ font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -0.02em; }
.kb-all{ font-family: var(--font-display); font-weight: 600; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 2px; transition: color .25s, border-color .25s; }
.kb-all span{ color: var(--accent-2); }
.kb-list{ border-top: 1px solid rgba(255,255,255,.1); }
.kb-list a{ display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 6px 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.kb-cat{ font-family: var(--font-display); font-weight: 600; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); }
.kb-list b{ font-family: var(--font-display); font-weight: 600; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.25; transition: color .3s, transform .5s var(--ease); }
.kb-list i{ font-style: normal; color: var(--accent-2); opacity: .4; transition: opacity .3s, transform .5s var(--ease); }
.kb-list a:focus-visible, .kb-all:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---- contacts: phones of the three departments ---- */
.ct2-copy, .ct2-map{ min-width: 0; }   /* the auto-fit grid below must not widen the column on phones */
.ct2-depts{ margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 18px; max-width: 540px; }
.ct2-depts li{ display: grid; gap: 2px; }
.ct2-depts span{ font-family: var(--font-display); font-weight: 600; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
.ct2-depts a{ font-family: var(--font-display); font-weight: 600; font-size: 15.5px; white-space: nowrap; transition: color .25s; }

/* ---- contacts: photos of the two sites; the map (a third-party frame) loads only on request ---- */
.ct2-map{ position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--ink); color: #fff; }
.ct2-shots{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; min-height: 0; }
.ct2-shots figure{ position: relative; margin: 0; overflow: hidden; min-height: 260px; }
.ct2-shots img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ct2-shots .ct2-shot-half{ width: 200%; max-width: none; object-position: 0 50%; }
.ct2-shots figcaption{
  position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px;
  background: rgba(10,10,12,.78); font-family: var(--font-display); font-weight: 600; font-size: 13px;
}
.ct2-shots figcaption span{ display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); font-family: 'Unbounded', var(--font-display); font-weight: 700; font-size: 10px; }
.ct2-map-bar{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 18px 20px; }
.ct2-map-note{ flex: 1 1 240px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.66); }
.ct2-map-btn{
  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 14px 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 15px; transition: background-color .25s;
}
.ct2-map-btn:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
.ct2-map iframe{ position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; min-height: 0; border: 0; }

.lf-form .field-check a{ border-bottom: 1px solid currentColor; }

@media (hover: hover) and (pointer: fine){
  .dr-more a:hover{ border-color: rgba(255,122,61,.6); background: rgba(255,255,255,.06); }
  .pj-ind a:hover{ border-color: var(--accent); color: var(--accent-ink); background: #fff; }
  .kb-tool:hover{ border-color: rgba(255,122,61,.45); transform: translateY(-4px); }
  .kb-tool:hover::after{ transform: scaleX(1); }
  .kb-tool:hover .kb-go span{ transform: translateX(4px); }
  .kb-all:hover{ color: var(--accent-2); border-color: var(--accent-2); }
  .kb-list a:hover b{ color: var(--accent-2); transform: translateX(6px); }
  .kb-list a:hover i{ opacity: 1; transform: translateX(3px); }
  .ct2-depts a:hover{ color: var(--accent-ink); }
  .ct2-map-btn:hover{ background: var(--accent-2); }
}

@media (max-width: 1100px){
  .kb-head{ grid-template-columns: minmax(0, 1fr); align-items: start; }
  .kb-tools{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-read{ grid-template-columns: minmax(0, 1fr); }
  .kb-read-head{ display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; }
}
@media (max-width: 760px){
  .kb{ padding: 72px 0; }
  .kb-list a{ grid-template-columns: minmax(0, 1fr) auto; }
  .kb-cat{ grid-column: 1 / -1; }
  .dr-foot{ gap: 10px 20px; }
  .ct2-shots figure{ min-height: 200px; }
}
@media (max-width: 560px){
  .kb-tools{ grid-template-columns: minmax(0, 1fr); }
  .kb-f{ padding-bottom: 22px; font-size: 22px; }
  .dr-more{ grid-template-columns: minmax(0, 1fr); }
  .ct2-map-btn{ width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce){
  .kb-tool, .kb-tool::after, .kb-go span, .kb-list b, .kb-list i{ transition: none; }
  .kb-tool:hover{ transform: none; }
}


/* ============================================
   HOME v3 (2026-10-14): advantage cards 01, 02, 05 show the work itself — a delivery being tracked,
   a marking code being scanned, a replacement found for a discontinued cylinder; the process block is a timeline
   with what you get at every step; contact photos are two separate cards.
   Every visual is drawn at its final state; the motion plays only after the grid is revealed (.is-visible),
   and none of it runs with prefers-reduced-motion.
   ============================================ */


/* ---- 01 · delivery tracker ---- */

/* one trip takes 8 s: the parcel reaches each stop in turn, waits at St Petersburg, the route resets */


/* ---- 02 · marking code being checked ---- */


/* ---- 05 · a replacement found for a discontinued cylinder ---- */


/* ---- «Как мы работаем»: timeline with what you get at every step ---- */
.ps3-wrap{ display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(36px, 6vw, 104px); align-items: start; }
.ps3-aside{ position: sticky; top: 112px; display: grid; gap: clamp(26px, 4vh, 44px); }
.ps3-head .ps2-lead{ margin-top: 20px; max-width: 46ch; }
.ps3-cta{ padding: 22px 24px 24px; border-radius: 16px; background: var(--ink-2); border: 1px solid rgba(255,255,255,.09); }
.ps3-cta-title{ font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.2; }
.ps3-cta-text{ margin-top: 8px; max-width: 46ch; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.64); }
.ps3-cta-row{ margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.ps3-btn{ gap: 10px; }
.ps3-tel{ font-family: 'Unbounded', var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 2px; transition: color .25s, border-color .25s; }
.ps3-tel:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.ps3-steps{ position: relative; display: grid; --p: 0; }
.ps3-steps::before, .ps3-steps::after{ content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; }
.ps3-steps::before{ background: rgba(255,255,255,.12); }
.ps3-steps::after{ background: linear-gradient(180deg, #ffd01a, var(--accent)); transform: scaleY(var(--p)); transform-origin: top; box-shadow: 0 0 16px rgba(250,90,32,.5); }
.ps3-step{ position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: clamp(18px, 2vw, 28px); padding-bottom: clamp(20px, 3.4vh, 32px); }
.ps3-step:last-child{ padding-bottom: 0; }
.ps3-dot{
  grid-column: 1; grid-row: 1 / span 2; margin-top: 5px; width: 16px; height: 16px; border-radius: 50%; position: relative; z-index: 1;
  background: var(--ink); border: 2px solid rgba(255,255,255,.28); transition: background-color .45s, border-color .45s, box-shadow .45s;
}
.ps3-n{ grid-column: 2; font-family: 'Unbounded', var(--font-display); font-weight: 700; font-size: 12px; line-height: 1.4; letter-spacing: .02em; color: rgba(255,255,255,.52); transition: color .45s; }
.ps3-body{ grid-column: 2; }
.ps3-body h3{ margin-top: 4px; font-family: var(--font-display); font-weight: 600; font-size: clamp(19px, 1.55vw, 23px); line-height: 1.2; letter-spacing: -0.01em; }
.ps3-body > p:not(.ps3-out){ margin-top: 8px; max-width: 56ch; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.62); }
.ps3-out{
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 12px 6px 8px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12); font-size: 13.5px; line-height: 1.3; color: rgba(255,255,255,.78);
  transition: border-color .45s, background-color .45s;
}
.ps3-out svg{ flex: none; width: 17px; height: 17px; fill: none; stroke: var(--accent-2); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ps3-step[data-lit] .ps3-dot{ background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 6px rgba(250,90,32,.2); }
.ps3-step[data-lit] .ps3-n{ color: var(--accent-2); }
.ps3-step[data-lit] .ps3-out{ border-color: rgba(255,122,61,.45); background: rgba(250,90,32,.08); }

/* ---- contacts: two photo cards and the map bar as separate pieces ---- */
.ct2-map{ min-height: 0; gap: 12px; background: none; border: 0; border-radius: 0; overflow: visible; }
.ct2-shots{ gap: 12px; }
.ct2-shots figure{ border-radius: 20px; min-height: 300px; }
.ct2-map-bar{ border-radius: 20px; background: var(--ink); }
.ct2-map iframe{ border-radius: 20px; min-height: 460px; background: #e9e7e2; }

@media (hover: hover) and (pointer: fine){
  .ps3-tel:hover{ color: var(--accent-2); border-color: var(--accent-2); }
}

/* tablets: card 05 takes the whole row — the replacement stands on the right, beside the text */
@media (max-width: 1100px){
  .ps3-wrap{ grid-template-columns: minmax(0, 1fr); }
  .ps3-aside{ position: static; }
}

@media (max-width: 760px){
  .ct2-shots figure{ min-height: 210px; }
  .ct2-map iframe{ min-height: 320px; }
      .ps3-step{ column-gap: 18px; }
}


@media (prefers-reduced-motion: reduce){
    .ps3-dot, .ps3-n, .ps3-out{ transition: none; }
}

/* ============================================
   WHY v7 (2026-10-16, owner's notes on v6): the same horizontal ride, but card by card. One wheel step or one swipe
   moves to the next card, and the change plays as a whole (0.95 s) instead of stopping halfway with the scroll.
   The scroll only chooses the active card (bands in js/home.js); --in / --lp / --p are registered numbers, so the
   browser animates them: the photo opens like an iris, drifts inside its frame, the number fills with the gradient
   (no outline any more — the font's overlapping contours showed as loops), the title rises out of its mask, and the
   «marks» on the photo (ГТД, «Честный знак», …) pop up one after another. Without JS or with prefers-reduced-motion
   the cards stand one under another with everything shown. Copy before the change: backup/2026-10-16-before-why-v7/.
   ============================================ */
@property --in{ syntax: '<number>'; inherits: true; initial-value: 1; }
@property --lp{ syntax: '<number>'; inherits: true; initial-value: 0; }
@property --p{ syntax: '<number>'; inherits: true; initial-value: 0; }

.why{ --ride-ease: cubic-bezier(.7, 0, .25, 1); --ride-t: .95s; position: relative; background: var(--paper); }
.why-stage{ position: relative; }
.why-head{ position: relative; z-index: 3; }
.why-title{ margin-top: 6px; max-width: 24ch; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; }
.why-title em{ font-style: normal; background: linear-gradient(100deg, #ffb61c 0%, #ff9827 30%, #fa5a20 75%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* the cards: by default (no JS, reduced motion) one under another */
.why-track{ display: grid; gap: clamp(48px, 7vh, 80px); }
.why-frame{ --in: 1; --lp: 0; position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 3.4vw, 56px); align-items: center; }
.why-copy{ position: relative; display: grid; align-content: center; gap: 14px; }
/* the number: a pale fill and the gradient rising inside it — no stroke */
.why-num{
  font-family: 'Unbounded', var(--font-display); font-weight: 700; font-size: clamp(96px, 13vw, 210px); line-height: .82; letter-spacing: -0.05em;
  color: transparent;
  background:
    linear-gradient(0deg, #fa5a20 0%, #ff9827 45%, #ffd01a 100%) no-repeat 0 100% / 100% calc(var(--in) * 100%),
    linear-gradient(rgba(10,10,12,.07), rgba(10,10,12,.07));
  -webkit-background-clip: text; background-clip: text;
}
.why-name{ font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.7vw, 44px); line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; }
.why-name .w{ display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.why-name .w > span{ display: inline-block; transform: translateY(calc((1 - clamp(0, var(--in) * 1.9 - var(--d, 0) * 0.14, 1)) * 108%)); }
.why-text{ max-width: 40ch; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: var(--muted-2); opacity: clamp(0, var(--in) * 2 - .7, 1); }

/* the photo window: opens like an iris from its lower right corner, the picture drifts inside */
.why-shot{
  position: relative; overflow: hidden; border-radius: clamp(24px, 2.4vw, 36px); aspect-ratio: 5 / 4; background: #e9e6df;
  clip-path: circle(calc(18% + var(--in) * 112%) at 86% 84%);
  box-shadow: 0 50px 90px -40px rgba(10,10,12,.45);
}
.why-shot img{
  position: absolute; inset: 0; width: 124%; max-width: none; height: 100%; left: -12%; object-fit: cover;
  transform: translateX(calc(var(--lp) * -9%)) scale(calc(1.14 - var(--in) * .14));
}
.why-shot::after{ /* warm light while the card is on its way; a soft shade at the bottom for the marks */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(200deg, rgba(250,90,32, calc(.55 * (1 - var(--in)))), rgba(255,182,28, calc(.25 * (1 - var(--in)))) 45%, rgba(10,10,12,0) 75%),
    linear-gradient(0deg, rgba(10,10,12,.38), rgba(10,10,12,0) 38%);
}

/* the marks on the photo: what the reason stands on (ГТД, «Честный знак», склад в СПб …) */
.why-marks{ position: absolute; left: clamp(14px, 1.6vw, 22px); right: clamp(14px, 1.6vw, 22px); bottom: clamp(14px, 1.6vw, 22px); z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; }
.why-mark{
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 8px; border-radius: 999px;
  background: rgba(255,255,255,.94); color: var(--ink); box-shadow: 0 10px 26px rgba(10,10,12,.22);
  font-family: var(--font-display); font-weight: 600; font-size: clamp(13px, 1vw, 14.5px); line-height: 1; white-space: nowrap;
}
.why-mark svg{ flex: none; width: 26px; height: 26px; border-radius: 50%; padding: 5px; background: linear-gradient(168deg, #ffb61c, #fa5a20); fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.why-mark svg .f{ fill: #fff; stroke: none; }

/* rail and sun exist only in the pinned ride */
.why-rail, .why-sun{ display: none; }

/* the column (no JS, reduced motion): ordinary section spacing */
.why:not(.is-ride){ padding: clamp(88px, 12vh, 140px) 0 clamp(80px, 11vh, 130px); }
.why:not(.is-ride) .why-track{ max-width: var(--container); margin: clamp(36px, 5vh, 56px) auto 0; padding: 0 28px; }
@media (max-width: 480px){ .why:not(.is-ride) .why-track{ padding: 0 18px; } }

/* ---------------- the pinned ride (JS adds .is-ride) ---------------- */
.why.is-ride{ height: var(--ride-h, 400vh); }
.why.is-ride .why-stage{
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr);      /* the column stays one screen wide, the track overflows it */
  padding: calc(76px + clamp(18px, 3.5vh, 40px)) 0 clamp(18px, 3.5vh, 36px);
}
.why.is-ride .why-track{
  display: flex; gap: 0; align-items: stretch; width: max-content; height: 100%; padding-left: max(28px, (100vw - var(--container)) / 2 + 28px);
  transition: transform var(--ride-t) var(--ride-ease); will-change: transform;
}
.why.is-ride .why-frame{
  flex: 0 0 auto; width: min(76vw, 1080px); margin-right: 6vw; height: 100%; padding: clamp(16px, 3vh, 32px) 0;
  transition: --in var(--ride-t) var(--ride-ease), --lp var(--ride-t) var(--ride-ease);
}
.why.is-ride .why-frame:last-child{ margin-right: max(28px, (100vw - var(--container)) / 2 + 28px); }
.why.is-ride .why-shot{ aspect-ratio: auto; height: 100%; max-height: 620px; align-self: center; }
.why.is-ride .why-copy{ transform: translateX(calc(var(--lp) * 60px)); }
.why.is-ride .why-num{ transform: translateX(calc(var(--lp) * 140px)); }
.why.is-ride .why-mark{ opacity: 0; transform: translateY(12px) scale(.9); transition: opacity .35s ease, transform .35s var(--ease); }
.why.is-ride .why-frame.is-on .why-mark{
  opacity: 1; transform: none; transition: opacity .5s ease calc(.55s + var(--i, 0) * .14s), transform .6s cubic-bezier(.2, 1.4, .4, 1) calc(.55s + var(--i, 0) * .14s);
}
.why.is-ride.is-still .why-track, .why.is-ride.is-still .why-frame{ transition: none; }      /* first placement, resize */

.why.is-ride .why-sun{
  display: block; position: absolute; z-index: 0; top: 50%; left: 50%; width: min(70vw, 900px); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: linear-gradient(168deg, #ffd01a 0%, #ffb61c 30%, #ff9827 54%, #ff7a3d 78%, #fa5a20 100%);
  opacity: .12; filter: blur(30px);
  transform: translate(calc(-20% + var(--p) * -60%), -50%) scale(calc(.8 + var(--p) * .4));
  transition: --p 1.3s var(--ride-ease);
}
.why.is-ride .why-head, .why.is-ride .why-track, .why.is-ride .why-rail{ position: relative; z-index: 1; }
.why.is-ride .why-head, .why.is-ride .why-rail{ width: 100%; }      /* a grid item with auto margins would shrink to its text and sit in the middle */

.why.is-ride .why-rail{ display: flex; align-items: center; gap: 18px; }
.why-count{ flex: none; font-family: 'Unbounded', var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .04em; color: var(--ink); min-width: 5.6em; }
.why-count b{ color: var(--accent-ink); }
.why-ticks{ flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.why-ticks i{ position: relative; height: 3px; border-radius: 2px; background: rgba(10,10,12,.12); overflow: hidden; }
.why-ticks i::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #ffb61c, var(--accent)); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); transition: transform .7s var(--ride-ease); }
.why-now{ flex: none; min-width: 16ch; text-align: right; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--muted-2); }

/* phones: photo on top; the number stands in its own column next to the title, so it never covers the text */
@media (max-width: 760px){
  .why-frame{ grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .why-shot{ order: -1; }
  .why-copy{ grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 10px; align-content: start; }
  .why-num{ grid-column: 2; grid-row: 1; align-self: start; font-size: 58px; line-height: .8; }
  .why-name{ grid-column: 1; grid-row: 1; align-self: center; font-size: 24px; }
  .why-text{ grid-column: 1 / -1; font-size: 15px; }
  .why-marks{ left: 12px; right: 12px; bottom: 12px; gap: 6px; }
  .why-mark{ font-size: 12.5px; padding: 6px 11px 6px 6px; gap: 7px; }
  .why-mark svg{ width: 22px; height: 22px; padding: 4px; }
  .why.is-ride .why-stage{ padding: calc(64px + 18px) 0 14px; }
  .why.is-ride .why-track{ padding-left: 18px; }
  .why.is-ride .why-frame{ width: 86vw; margin-right: 5vw; grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; padding: 12px 0; }
  .why.is-ride .why-frame:last-child{ margin-right: 18px; }
  .why.is-ride .why-shot{ max-height: none; min-height: 0; }
  .why.is-ride .why-num, .why.is-ride .why-copy{ transform: none; }
  .why.is-ride .why-rail{ padding: 0 18px; gap: 12px; }
  .why-now{ display: none; }
  .why-title{ font-size: 24px; }
}
@media (max-height: 760px) and (min-width: 761px){
  .why-name{ font-size: clamp(24px, 2.3vw, 34px); }
  .why-num{ font-size: clamp(90px, 10vw, 150px); }
  .why-text{ font-size: 15px; }
}
@media (prefers-reduced-motion: reduce){
  .why-shot, .why-shot img, .why-name .w > span, .why-copy, .why-num, .why-mark{ transform: none !important; clip-path: none !important; opacity: 1 !important; }
}

/* ============================================
   WHY on phones (2026-10-19, the owner: «на телефоне хочется изменить компоновку», desktop stays as it is).
   Like stories: the progress bars right under the title, then one card at a time — a white card with the photo on top
   (its number on the photo), the title, the text and the marks as chips under the text (a copy of the photo's marks,
   .why-marks-m); the neighbours peek at the edges. Copy before the change: backup/2026-10-19-before-why-mobile/.
   ============================================ */
.why-marks-m, .why-num-m{ display: none; }
@media (max-width: 760px){
  .why.is-ride .why-stage{ grid-template-rows: auto auto minmax(0, 1fr); padding: calc(64px + 16px) 0 18px; }
  .why.is-ride .why-head{ grid-row: 1; }
  .why.is-ride .why-rail{ grid-row: 2; margin-top: 14px; padding: 0 18px; gap: 12px; }
  .why.is-ride .why-track{ grid-row: 3; }
  .why-title{ font-size: 22px; line-height: 1.1; }
  .why-count{ order: 2; min-width: 0; font-size: 12px; }
  .why-ticks{ order: 1; gap: 4px; }

  /* the card */
  .why.is-ride .why-frame{
    width: 84vw; margin-right: 4vw; padding: 0; margin-block: 14px 4px; height: auto; align-self: stretch;
    display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 0; align-items: stretch;
    background: #fff; border-radius: 26px; overflow: hidden; box-shadow: 0 24px 50px -28px rgba(10,10,12,.4), 0 0 0 1px rgba(10,10,12,.05);
    transform: scale(calc(.94 + var(--in) * .06)); transform-origin: 50% 60%;
    transition: --in var(--ride-t) var(--ride-ease), --lp var(--ride-t) var(--ride-ease), transform var(--ride-t) var(--ride-ease);
  }
  .why.is-ride .why-frame:last-child{ margin-right: 18px; }
  .why.is-ride .why-shot{ order: -1; align-self: stretch; height: auto; min-height: 150px; max-height: none; border-radius: 0; box-shadow: none; }
  .why.is-ride .why-shot::after{
    background:
      linear-gradient(200deg, rgba(250,90,32, calc(.55 * (1 - var(--in)))), rgba(255,182,28, calc(.25 * (1 - var(--in)))) 45%, rgba(10,10,12,0) 75%),
      linear-gradient(180deg, rgba(10,10,12,.42), rgba(10,10,12,0) 42%);
  }
  .why-shot .why-marks{ display: none; }

  /* the number on the photo, top left (a soft shade behind it): its own copy inside the photo frame (.why-num-m);
     the gradient still rises inside it */
  .why.is-ride .why-copy{ display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 18px 18px; transform: none; }
  .why.is-ride .why-copy > .why-num{ display: none; }
  .why.is-ride .why-num-m{
    display: block; position: absolute; z-index: 2; left: 16px; top: 12px; transform: none;
    font-size: 54px; line-height: 1;
    background:
      linear-gradient(0deg, #fa5a20 0%, #ff9827 45%, #ffd01a 100%) no-repeat 0 100% / 100% calc(var(--in) * 100%),
      linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,.6));
    -webkit-background-clip: text; background-clip: text;
  }
  .why-name{ font-size: 21px; line-height: 1.12; }
  .why-text{ font-size: 14.5px; line-height: 1.5; }

  /* the marks under the text: light chips */
  .why-marks-m{ position: static; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
  .why-marks-m .why-mark{ background: var(--paper); box-shadow: none; border: 1px solid rgba(10,10,12,.07); font-size: 12px; padding: 5px 10px 5px 5px; gap: 6px; }
  .why-marks-m .why-mark svg{ width: 20px; height: 20px; padding: 4px; }
}