/* ============ Fleet Page — Sections 1–3 ============ */

/* общие ограничения для изображений страницы (≤350px ширина) */
.fleet-hero img, .fleet-profiles img, .fleet-physics img{
  max-width: min(100%, 350px);
  height: auto;
}

/* ===== Section 1: Fleet Hero ===== */
.fleet-hero{
  position:relative; padding: calc(var(--header-h) + 38px) 0 56px; overflow:hidden;
  background:
    radial-gradient(1000px 600px at 20% -10%, rgba(255,230,109,.28), transparent 70%),
    radial-gradient(900px 700px at 90% 20%, rgba(16,185,129,.20), transparent 70%);
}
.fh-inner{
  display:grid; grid-template-columns: 1.2fr .9fr; gap:40px; align-items:center;
}
@media (max-width: 1024px){ .fh-inner{ grid-template-columns:1fr; gap:24px; } }

.fh-h1{
  font-size: clamp(1.8rem, 1.1rem + 2.4vw, 3rem);
  line-height:1.1; margin:0 0 12px;
  background: linear-gradient(135deg, #083344 0%, #0E9F6E 35%, #FFD642 95%);
  background-clip:text; -webkit-background-clip:text; color:transparent;
}
.fh-lede{ color:var(--muted); margin:0 0 12px; max-width: 72ch; }
.fh-points{ margin:0; padding-left:1rem; color:#0e2f27; }
.fh-points li{ padding:.15rem 0; }

/* asymmetric mosaic */
.fh-mosaic{
  display:grid; grid-template-areas:
    "a b"
    "a c";
  grid-template-columns: 1fr 1fr; gap:12px; align-content:start;
  transform: rotate(-1.2deg);
}
.fh-mosaic .m{ display:grid; gap:6px; justify-items:start; }
.fh-mosaic .a{ grid-area:a; }
.fh-mosaic .b{ grid-area:b; }
.fh-mosaic .c{ grid-area:c; }
.fh-mosaic figcaption{
  font-size:.85rem; color:#0e3a30; background:linear-gradient(135deg, rgba(255,230,109,.5), rgba(16,185,129,.16));
  padding:.3rem .6rem; border-radius:999px; border:1px solid rgba(14,159,110,.25);
}

/* moving track grid */
.fh-track{
  position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:
    repeating-linear-gradient(0deg, rgba(14,159,110,.08) 0 22px, transparent 22px 44px),
    repeating-linear-gradient(90deg, rgba(14,159,110,.08) 0 22px, transparent 22px 44px);
  mask-image: linear-gradient(180deg, #000 0 70%, transparent 100%);
}
.fh-track .cell{
  position:absolute; width:18px; height:18px; border-radius:6px;
  background: linear-gradient(135deg, var(--g2), var(--y2));
  box-shadow:0 0 12px rgba(16,185,129,.24);
  animation: fhFloat 8s ease-in-out infinite;
}
.fh-track .cell:nth-child(1){ left:12%; top:18%; animation-delay:.2s; }
.fh-track .cell:nth-child(2){ left:26%; top:30%; animation-delay:.6s; }
.fh-track .cell:nth-child(3){ left:54%; top:24%; animation-delay:1s; }
.fh-track .cell:nth-child(4){ left:70%; top:12%; animation-delay:1.4s; }
.fh-track .cell:nth-child(5){ left:82%; top:36%; animation-delay:1.8s; }
.fh-track .cell:nth-child(6){ left:40%; top:44%; animation-delay:2.2s; }
@keyframes fhFloat{
  0%,100%{ transform: translateY(-4px) rotate(-4deg); opacity:.8; }
  50%{ transform: translateY(6px) rotate(4deg); opacity:1; }
}

/* prevent accidental horizontal overflow from rotated mosaic */
@media (max-width: 520px){ .fh-mosaic{ transform:none; } }

/* ===== Section 2: Vehicle Profiles (Spec Bands) ===== */
.fleet-profiles{ padding:64px 0; position:relative; overflow:hidden; }
.fp-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.fp-lede{ color:var(--muted); max-width:72ch; }

.spec-bands{
  margin-top:18px; display:grid; gap:18px;
}
.spec-band{
  position:relative; display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:center;
  background:rgba(255,255,255,.72); border:1px solid var(--line);
  border-radius:18px; padding:14px; box-shadow:var(--shadow);
  transform: skewX(-2deg);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.spec-band:hover{ transform: skewX(-2deg) translateY(-4px); box-shadow:var(--shadow-lg); filter:saturate(1.05); }
@media (max-width: 1024px){ .spec-band{ grid-template-columns:1fr; transform:none; } }

.spec-copy h3{ margin:0 0 6px; font-size:1.05rem; }
.spec-copy p{ margin:0 0 10px; color:#0e2f27; }
.spec-pills .pill{
  display:inline-block; margin-right:8px; margin-bottom:6px; font-weight:700; font-size:.85rem;
  background:linear-gradient(135deg, rgba(16,185,129,.15), rgba(255,214,66,.25));
  border:1px solid rgba(14,159,110,.25); border-radius:999px; padding:.2rem .5rem;
}

.spec-fig figcaption{
  font-size:.85rem; color:#0e3a30; background:linear-gradient(135deg, rgba(255,230,109,.5), rgba(16,185,129,.18));
  padding:.3rem .6rem; border-radius:999px; border:1px solid rgba(14,159,110,.25);
}

/* highlight belt behind bands */
.spec-belt{
  position:absolute; left:-10%; right:-10%; bottom:-10px; height:12px;
  background: repeating-linear-gradient(90deg, rgba(14,159,110,.2) 0 26px, rgba(14,159,110,.45) 26px 46px, rgba(14,159,110,.2) 46px 66px);
  mask-image: linear-gradient(180deg, transparent, #000 30% 70%, transparent);
  animation: beltSweep 8s linear infinite;
}
@keyframes beltSweep{ to{ transform: translateX(50%); } }

/* ===== Section 3: Payload, Wheelbase & Turning ===== */
.fleet-physics{ padding:64px 0; position:relative; overflow:hidden; }
.phys-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.phys-lede{ color:var(--muted); max-width:72ch; }

.phys-grid{ margin-top:18px; display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:start; }
@media (max-width: 1024px){ .phys-grid{ grid-template-columns:1fr; } }

.phys-copy h3{ margin:0 0 6px; font-size:1.05rem; }
.phys-copy p{ margin:0 0 12px; color:#0e2f27; }

.phys-visual{ display:grid; gap:12px; align-content:start; }

/* wheelbase diagram */
.wb-diagram{
  position:relative; height:160px; border-radius:14px; background:#fff;
  border:2px solid rgba(14,159,110,.35); box-shadow:var(--shadow); overflow:hidden;
}
.wb-diagram .axle{
  position:absolute; left:14%; right:14%; height:2px; background:rgba(14,159,110,.45);
}
.wb-diagram .axle.front{ top:38%; }
.wb-diagram .axle.rear{ bottom:34%; }
.wb-diagram .wheel{
  position:absolute; width:12px; height:12px; border-radius:50%;
  background:#0E9F6E; box-shadow:0 0 0 8px rgba(16,185,129,.16);
}
.wb-diagram .w1{ left:12%; top:34%; } .w2{ right:12%; top:34%; }
.wb-diagram .w3{ left:12%; bottom:30%; } .w4{ right:12%; bottom:30%; }
.wb-diagram .arc{
  position:absolute; left:50%; top:6%; width:120px; height:120px; border-radius:50%;
  border:2px dashed rgba(14,159,110,.45); transform-origin: left bottom;
  animation: arcSweep 4.6s ease-in-out infinite;
}
@keyframes arcSweep{
  0%,100%{ transform: rotate(-6deg); }
  50%{ transform: rotate(12deg); }
}
.wb-diagram .cg{
  position:absolute; left:50%; top:50%; width:12px; height:12px; border-radius:50%;
  transform: translate(-50%,-50%); background:linear-gradient(135deg, var(--g2), var(--y2));
  box-shadow:0 0 0 10px rgba(16,185,129,.18);
  animation: cgBlink 3s ease-in-out infinite;
}
@keyframes cgBlink{
  0%,100%{ transform: translate(-50%,-50%) scale(.9); }
  50%{ transform: translate(-50%,-50%) scale(1.1); }
}

.phys-figs{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px; }
@media (max-width: 720px){ .phys-figs{ grid-template-columns:1fr; } }
.phys-figs figcaption{
  font-size:.85rem; color:#0e3a30; background:linear-gradient(135deg, rgba(255,230,109,.5), rgba(16,185,129,.18));
  padding:.3rem .6rem; border-radius:999px; border:1px solid rgba(14,159,110,.25);
}

/* decorative turning arc */
.turning-arc{
  position:absolute; right:-8%; bottom:-34%; width:620px; height:620px; border-radius:50%;
  border:2px dashed rgba(14,159,110,.45); filter: blur(.2px);
  animation: turnSpin 26s linear infinite;
}
@keyframes turnSpin{ to{ transform:rotate(360deg);} }
@media (max-width: 720px){ .turning-arc{ display:none; } }
/* ============ Section 4: Tyre & Brake Discipline ============ */
.fleet-maintenance{ padding:64px 0; position:relative; overflow:hidden; }
.maint-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.maint-lede{ color:var(--muted); max-width:72ch; }

.maint-grid{
  margin-top:18px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;
}
@media (max-width: 1024px){ .maint-grid{ grid-template-columns:1fr; } }

.maint-card{
  background:rgba(255,255,255,.72); border:1px solid var(--line);
  border-radius:18px; padding:14px; box-shadow:var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.maint-card:hover{ transform: translateY(-4px); box-shadow:var(--shadow-lg); }
.maint-card h3{ margin:0 0 6px; font-size:1.05rem; }
.maint-card p{ margin:0 0 10px; color:#0e2f27; }
.maint-card figcaption{
  font-size:.85rem; color:#0e3a30; background:linear-gradient(135deg, rgba(255,230,109,.5), rgba(16,185,129,.18));
  padding:.3rem .6rem; border-radius:999px; border:1px solid rgba(14,159,110,.25);
}

/* decorative moving tread */
.tread-rail{
  position:absolute; left:-10%; right:-10%; bottom:-10px; height:12px;
  background: repeating-linear-gradient(90deg, rgba(14,159,110,.2) 0 26px, rgba(14,159,110,.45) 26px 46px, rgba(14,159,110,.2) 46px 66px);
  mask-image: linear-gradient(180deg, transparent, #000 30% 70%, transparent);
  animation: treadMove 10s linear infinite;
}
@keyframes treadMove{ to{ transform: translateX(50%); } }

/* ============ Section 5: Liftgate & Ramp Systems ============ */
.fleet-ramps{ padding:64px 0; position:relative; overflow:hidden; }
.ramps-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.ramps-lede{ color:var(--muted); max-width:72ch; }

.ramps-grid{
  margin-top:18px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;
}
@media (max-width: 1024px){ .ramps-grid{ grid-template-columns:1fr; } }

.ramp-card{
  background:rgba(255,255,255,.72); border:1px solid var(--line);
  border-radius:18px; padding:14px; box-shadow:var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ramp-card:hover{ transform: translateY(-4px); box-shadow:var(--shadow-lg); }
.ramp-card h3{ margin:0 0 6px; font-size:1.05rem; }
.ramp-card p{ margin:0 0 10px; color:#0e2f27; }
.ramp-card figcaption{
  font-size:.85rem; color:#0e3a30; background:linear-gradient(135deg, rgba(255,230,109,.5), rgba(16,185,129,.18));
  padding:.3rem .6rem; border-radius:999px; border:1px solid rgba(14,159,110,.25);
}


/* ============ Section 6: Urban Access Geometry ============ */
.fleet-access{ padding:64px 0; position:relative; overflow:hidden; }
.access-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.access-lede{ color:var(--muted); max-width:72ch; }

.access-grid{ margin-top:18px; display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:start; }
@media (max-width: 1024px){ .access-grid{ grid-template-columns:1fr; } }

.access-copy h3{ margin:0 0 6px; font-size:1.05rem; }
.access-copy p{ margin:0 0 12px; color:#0e2f27; }

.access-rail{ display:grid; gap:12px; align-content:start; }
.access-rail figcaption{
  font-size:.85rem; color:#0e3a30; background:linear-gradient(135deg, rgba(255,230,109,.5), rgba(16,185,129,.18));
  padding:.3rem .6rem; border-radius:999px; border:1px solid rgba(14,159,110,.25);
}

/* gate measuring bar */
.gate-measure{
  position:relative; height:40px; border-radius:999px; overflow:hidden;
  background: repeating-linear-gradient(90deg, rgba(14,159,110,.18) 0 28px, rgba(14,159,110,.4) 28px 46px, rgba(14,159,110,.18) 46px 64px);
  border:1px solid rgba(14,159,110,.25);
}
.gate-measure .bar{
  position:absolute; left:8%; right:8%; top:50%; height:2px; background:#0E9F6E; transform: translateY(-50%);
}
.gate-measure .pin{
  position:absolute; top:8px; width:8px; height:24px; border-radius:2px; background:#0E9F6E;
  box-shadow:0 0 0 6px rgba(14,159,110,.12);
}
.gate-measure .p1{ left:14%; }
.gate-measure .p2{ right:14%; }

/* moving path with dot */
.access-path{
  position:absolute; left:-6%; right:-6%; bottom:-10px; height:12px;
  background: repeating-linear-gradient(90deg, rgba(14,159,110,.2) 0 26px, rgba(14,159,110,.45) 26px 46px, rgba(14,159,110,.2) 46px 66px);
  mask-image: linear-gradient(180deg, transparent, #000 30% 70%, transparent);
}
.access-path .dot{
  position:absolute; top:-3px; left:-4%;
  width:18px; height:18px; border-radius:50%; background: linear-gradient(135deg, var(--g2), var(--y2));
  box-shadow:0 0 0 6px rgba(16,185,129,.18);
  animation: pathRun 8s linear infinite;
}
@keyframes pathRun{ to{ transform: translateX(110%); } }
/* Расширим ограничение ширины картинок для новых секций */
.fleet-hero img, .fleet-profiles img, .fleet-physics img,
.fleet-maintenance img, .fleet-ramps img, .fleet-access img,
.fleet-fuel img, .fleet-cab img, .fleet-secure img{
  max-width: min(100%, 350px);
  height: auto;
}

/* ============ Section 7: Fuel & Injector Care ============ */
.fleet-fuel{ padding:64px 0; position:relative; overflow:hidden; }
.fuel-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.fuel-lede{ color:var(--muted); max-width:72ch; }

.fuel-grid{ margin-top:18px; display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:start; }
@media (max-width: 1024px){ .fuel-grid{ grid-template-columns:1fr; } }

.fuel-copy h3{ margin:0 0 6px; font-size:1.05rem; }
.fuel-copy p{ margin:0 0 12px; color:#0e2f27; }

.fuel-rail{ display:grid; gap:12px; align-content:start; }
.fuel-rail figcaption{
  font-size:.85rem; color:#0e3a30; background:linear-gradient(135deg, rgba(255,230,109,.5), rgba(16,185,129,.18));
  padding:.3rem .6rem; border-radius:999px; border:1px solid rgba(14,159,110,.25);
}

/* animated fuel flow */
.fuel-bar{
  position:relative; height:40px; border-radius:999px; overflow:hidden;
  background: linear-gradient(90deg, rgba(14,159,110,.18), rgba(255,214,66,.25));
  border:1px solid rgba(14,159,110,.25); margin-bottom:6px;
}
.fuel-bar::after{
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(90deg, rgba(255,214,66,.0) 0 40px, rgba(255,214,66,.35) 40px 60px, rgba(255,214,66,.0) 60px 80px);
  animation: fuelSweep 5s linear infinite;
}
@keyframes fuelSweep{ to{ transform: translateX(100%); } }
.bubble{
  position:absolute; bottom:6px; width:8px; height:8px; border-radius:50%;
  background:#0E9F6E; opacity:.9;
  animation: bubbleUp 3.2s ease-in infinite;
}
.b1{ left:14%; animation-delay:.2s; }
.b2{ left:34%; animation-delay:.8s; }
.b3{ left:56%; animation-delay:1.4s; }
.b4{ left:78%; animation-delay:2s; }
@keyframes bubbleUp{ 0%{ transform:translateY(16px) scale(.6); opacity:.4; } 70%{ opacity:1; } 100%{ transform:translateY(-6px) scale(1); opacity:.2; } }

/* ============ Section 8: Cab Ergonomics & Visibility ============ */
.fleet-cab{ padding:64px 0; position:relative; overflow:hidden; }
.cab-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.cab-lede{ color:var(--muted); max-width:72ch; }

.cab-grid{ margin-top:18px; display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:start; }
@media (max-width: 1024px){ .cab-grid{ grid-template-columns:1fr; } }

.cab-copy h3{ margin:0 0 6px; font-size:1.05rem; }
.cab-copy p{ margin:0 0 12px; color:#0e2f27; }

.cab-rail{ display:grid; gap:12px; align-content:start; }
.cab-rail figcaption{
  font-size:.85rem; color:#0e3a30; background:linear-gradient(135deg, rgba(255,230,109,.5), rgba(16,185,129,.18));
  padding:.3rem .6rem; border-radius:999px; border:1px solid rgba(14,159,110,.25);
}

/* seat posture mini-diagram */
.seat-diagram{
  position:relative; height:60px; border-radius:12px; background:#fff;
  border:2px solid rgba(14,159,110,.35); box-shadow:var(--shadow); overflow:hidden;
}
.seat-diagram .seat{
  position:absolute; left:8%; top:22%; width:34%; height:56%; border-radius:6px 6px 2px 2px;
  background:linear-gradient(135deg, rgba(16,185,129,.2), rgba(255,214,66,.2));
}
.seat-diagram .slider{
  position:absolute; left:48%; top:50%; width:42%; height:6px; border-radius:999px; background:rgba(14,159,110,.35);
  transform:translateY(-50%); overflow:hidden;
}
.seat-diagram .slider::after{
  content:""; position:absolute; left:0; top:0; width:28%; height:100%; border-radius:999px; background:#0E9F6E;
  animation: seatSlide 3.6s ease-in-out infinite;
}
@keyframes seatSlide{ 50%{ left:72%; } }

/* shimmering glint */
.mirror-glint{
  position:absolute; right:-10%; top:-20%; width:520px; height:520px; border-radius:50%;
  border:2px dashed rgba(14,159,110,.35); filter: blur(.2px);
  animation: glintSpin 24s linear infinite;
}
@keyframes glintSpin{ to{ transform:rotate(360deg);} }
@media (max-width: 900px){ .mirror-glint{ display:none; } }

/* ============ Section 9: Load Securing Patterns ============ */
.fleet-secure{ padding:64px 0; position:relative; overflow:hidden; }
.secure-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.secure-lede{ color:var(--muted); max-width:72ch; }

.secure-grid{ margin-top:18px; display:grid; grid-template-columns: repeat(3,1fr); gap:18px; align-items:start; }
@media (max-width: 1024px){ .secure-grid{ grid-template-columns:1fr; } }

.secure-card{
  background:rgba(255,255,255,.72); border:1px solid var(--line);
  border-radius:18px; padding:14px; box-shadow:var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.secure-card:hover{ transform: translateY(-4px); box-shadow:var(--shadow-lg); }
.secure-card h3{ margin:0 0 6px; font-size:1.05rem; }
.secure-card p{ margin:0 0 10px; color:#0e2f27; }
.secure-card figcaption{
  font-size:.85rem; color:#0e3a30; background:linear-gradient(135deg, rgba(255,230,109,.5), rgba(16,185,129,.18));
  padding:.3rem .6rem; border-radius:999px; border:1px solid rgba(14,159,110,.25);
}

/* tiny strap diagrams */
.pattern{ position:relative; height:80px; border-radius:10px; background:#fff; border:2px solid rgba(14,159,110,.35); margin-bottom:8px; overflow:hidden; }
.p-angles .line{
  position:absolute; width:2px; height:140%; top:-20%; background:#0E9F6E; transform-origin:center;
  box-shadow:0 0 0 6px rgba(16,185,129,.12);
}
.p-angles .l1{ left:34%; transform: rotate(30deg); }
.p-angles .l2{ right:34%; transform: rotate(-30deg); }
.p-corners .corner{
  position:absolute; width:12px; height:12px; background:rgba(255,214,66,.8); border-radius:3px; box-shadow:0 0 0 6px rgba(255,214,66,.15);
}
.p-corners .c1{ left:0; top:0; } .p-corners .c2{ right:0; top:0; } .p-corners .c3{ left:0; bottom:0; } .p-corners .c4{ right:0; bottom:0; }
/* FIX: Wrap pattern — tidy, no overflow */
.pattern.p-wrap{ 
  padding: 10px;                /* внутренний отступ от рамки */
}

.p-wrap .wrap{
  position:absolute;
  left:6%;                      /* вместо -10% / 110% — держим внутри */
  right:6%;
  height:6px;
  border-radius:6px;
  background: linear-gradient(90deg, rgba(14,159,110,.18), rgba(14,159,110,.28));
  transform: none;              /* убираем диагональный наклон */
  opacity:.9;
}

/* три параллельные дорожки */
.p-wrap .w1{ top:28%; }
.p-wrap .w2{ top:50%; }
.p-wrap .w3{ top:72%; }

/* мягкое “дышание” без выхода за края */
@media (prefers-reduced-motion: no-preference){
  .p-wrap .wrap{ animation: wrapSlide 4.8s ease-in-out infinite; }
}
@keyframes wrapSlide{
  0%,100%{ transform: translateX(-3%); }
  50%{ transform: translateX(3%); }
}
/* расширим общий лимит ширины картинок */
.fleet-telemetry img, .fleet-temp img, .fleet-rigging img{
  max-width: min(100%, 350px);
  height: auto;
}

/* ===== 10) Telemetry & Dispatch ===== */
.fleet-telemetry{ padding:64px 0; position:relative; overflow:hidden; }
.tel-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.tel-lede{ color:var(--muted); max-width:72ch; }

.tel-grid{ margin-top:18px; display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:start; }
@media (max-width: 1024px){ .tel-grid{ grid-template-columns:1fr; } }

.tel-copy h3{ margin:0 0 6px; font-size:1.05rem; }
.tel-copy p{ margin:0 0 12px; color:#0e2f27; }

.tel-rail{ display:grid; gap:12px; align-content:start; }
.tel-rail figcaption{
  font-size:.85rem; color:#0e3a30; background:linear-gradient(135deg, rgba(255,230,109,.5), rgba(16,185,129,.18));
  padding:.3rem .6rem; border-radius:999px; border:1px solid rgba(14,159,110,.25);
}

/* dispatch belt animation (contained) */
.dispatch-belt{
  position:relative; height:44px; border-radius:999px; overflow:hidden;
  background: repeating-linear-gradient(90deg, rgba(14,159,110,.18) 0 28px, rgba(14,159,110,.4) 28px 46px, rgba(14,159,110,.18) 46px 64px);
  border:1px solid rgba(14,159,110,.25); margin-bottom:6px;
}
.veh{
  position:absolute; top:8px; width:24px; height:10px; border-radius:6px;
  background: linear-gradient(135deg, var(--g2), var(--y2));
  box-shadow: 0 0 0 4px rgba(16,185,129,.12);
  animation: vehRun 8s linear infinite;
}
.v1{ left:-6%; } .v2{ left:20%; animation-delay:.6s; } .v3{ left:54%; animation-delay:1.2s; }
@keyframes vehRun{ to{ transform: translateX(120%); } }

/* ===== 11) Temperature & Fragile Cargo ===== */
.fleet-temp{ padding:64px 0; position:relative; overflow:hidden; }
.temp-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.temp-lede{ color:var(--muted); max-width:72ch; }

.temp-grid{ margin-top:18px; display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:start; }
@media (max-width: 1024px){ .temp-grid{ grid-template-columns:1fr; } }

.temp-copy h3{ margin:0 0 6px; font-size:1.05rem; }
.temp-copy p{ margin:0 0 12px; color:#0e2f27; }

.temp-rail{ display:grid; gap:12px; align-content:start; }
.temp-rail figcaption{
  font-size:.85rem; color:#0e3a30; background:linear-gradient(135deg, rgba(255,230,109,.5), rgba(16,185,129,.18));
  padding:.3rem .6rem; border-radius:999px; border:1px solid rgba(14,159,110,.25);
}

/* thermometer motif */
.thermo{
  position:relative; height:120px; border-radius:14px; background:#fff;
  border:2px solid rgba(14,159,110,.35); box-shadow:var(--shadow); overflow:hidden;
}
.thermo .mercury{
  position:absolute; left:16px; bottom:16px; width:14px; height:0;
  background: linear-gradient(180deg, var(--g2), var(--y2));
  border-radius:999px;
  animation: mercuryRise 3.8s ease-in-out infinite;
}
@keyframes mercuryRise{ 0%,100%{ height:18%; } 50%{ height:74%; } }
.thermo .tick{
  position:absolute; right:14px; width:26px; height:2px; background:rgba(14,159,110,.35);
}
.thermo .t1{ bottom:24px; } .thermo .t2{ bottom:54px; } .thermo .t3{ bottom:84px; }

/* ===== 12) Hydra Rigging Brief ===== */
.fleet-rigging{ padding:64px 0; position:relative; overflow:hidden; }
.rig-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.rig-lede{ color:var(--muted); max-width:72ch; }

.rig-grid{ margin-top:18px; display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:start; }
@media (max-width: 1024px){ .rig-grid{ grid-template-columns:1fr; } }

.rig-copy h3{ margin:0 0 6px; font-size:1.05rem; }
.rig-copy p{ margin:0 0 12px; color:#0e2f27; }

.rig-rail{ display:grid; gap:12px; align-content:start; }
.rig-rail figcaption{
  font-size:.85rem; color:#0e3a30; background:linear-gradient(135deg, rgba(255,230,109,.5), rgba(16,185,129,.18));
  padding:.3rem .6rem; border-radius:999px; border:1px solid rgba(14,159,110,.25);
}

/* swinging hook (contained) */
/* compact swing hook — contained, no overflow */
.hook-swing{
  position:relative;
  width: min(100%, 260px);
  height: 110px;
  margin: 0 0 12px;
  padding: 6px;
  border-radius:16px;
  background: rgba(255,255,255,.92);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;                  /* клиппим содержимое */
  clip-path: inset(0 round 16px);    /* страховка от артефактов */
}

.hook-swing .rope{
  position:absolute;
  left:50%; top:4px;
  width:2px; height:68px;
  background:rgba(14,159,110,.45);
  transform-origin: top center;
  animation: ropeSwing 3.6s ease-in-out infinite;
}

.hook-swing .hook{
  position:absolute;
  left:50%; top:58px;
  width:22px; height:22px;
  border-radius:6px;
  background: linear-gradient(135deg, var(--g2), var(--y2));
  box-shadow: 0 0 0 6px rgba(16,185,129,.12);
  transform-origin: -8px -50px;      /* центр вращения внутри блока */
  animation: hookSwing 3.6s ease-in-out infinite;
}

/* мягче амплитуда, не касается границ */
@keyframes ropeSwing{ 0%,100%{ transform: rotate(-6deg); } 50%{ transform: rotate(6deg); } }
@keyframes hookSwing{ 0%,100%{ transform: rotate(-6deg); } 50%{ transform: rotate(6deg); } }
/* ограничение ширины картинок для финальных секций */
.fleet-night img, .fleet-catalogue img{
  max-width: min(100%, 350px);
  height: auto;
}

/* ============ Section 13: Night Runs & Emergency Kit ============ */
.fleet-night{ padding:64px 0; position:relative; overflow:hidden; }
.night-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.night-lede{ color:var(--muted); max-width:72ch; }

.night-grid{ margin-top:18px; display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:start; }
@media (max-width: 1024px){ .night-grid{ grid-template-columns:1fr; } }

.night-copy h3{ margin:0 0 6px; font-size:1.05rem; }
.night-copy p{ margin:0 0 12px; color:#0e2f27; }

.night-rail{ display:grid; gap:12px; align-content:start; }
.night-rail figcaption{
  font-size:.85rem; color:#0e3a30; background:linear-gradient(135deg, rgba(255,230,109,.5), rgba(16,185,129,.18));
  padding:.3rem .6rem; border-radius:999px; border:1px solid rgba(14,159,110,.25);
}

/* beacons */
.beacon-bar{
  position:relative; height:40px; border-radius:999px; overflow:hidden;
  background:linear-gradient(90deg, rgba(14,159,110,.18), rgba(255,214,66,.25));
  border:1px solid rgba(14,159,110,.25); margin-bottom:6px;
}
.beacon-bar .b{
  position:absolute; top:10px; width:12px; height:12px; border-radius:50%;
  background:#f59e0b; /* amber */
  box-shadow:0 0 0 10px rgba(245,158,11,.15);
  animation: beaconPulse 2.2s ease-in-out infinite;
}
.beacon-bar .b:nth-child(1){ left:16%; }
.beacon-bar .b:nth-child(2){ left:38%; animation-delay:.3s; }
.beacon-bar .b:nth-child(3){ left:60%; animation-delay:.6s; }
.beacon-bar .b:nth-child(4){ left:82%; animation-delay:.9s; }
@keyframes beaconPulse{
  0%,100%{ transform:translateY(-2px) scale(.9); opacity:.85; }
  50%{ transform:translateY(2px) scale(1.08); opacity:1; }
}

/* soft headlight sweep (contained & masked) */
.headlight{
  position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(600px 200px at 20% 10%, rgba(255,255,255,.25), transparent 70%),
    radial-gradient(600px 200px at 80% 15%, rgba(255,255,255,.18), transparent 70%);
  mask-image: linear-gradient(180deg, #000 0 70%, transparent);
}

/* ============ Section 14: Fleet Catalogue & Quick Links ============ */
.fleet-catalogue{ padding:64px 0; position:relative; overflow:hidden; }
.cat-head h2{ margin:0 0 6px; font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); }
.cat-lede{ color:var(--muted); max-width:72ch; }

.cat-grid{ margin-top:18px; display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:start; }
@media (max-width: 1024px){ .cat-grid{ grid-template-columns:1fr; } }

.cat-copy h3{ margin:0 0 6px; font-size:1.05rem; }
.cat-copy p{ margin:0 0 10px; color:#0e2f27; }
.cat-copy figcaption{
  font-size:.85rem; color:#0e3a30; background:linear-gradient(135deg, rgba(255,230,109,.5), rgba(16,185,129,.18));
  padding:.3rem .6rem; border-radius:999px; border:1px solid rgba(14,159,110,.25);
}

/* quick link cards */
.cat-links{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px;
}
@media (max-width: 600px){ .cat-links{ grid-template-columns:1fr; } }

.cat-link{
  display:flex; flex-direction:column; gap:2px; padding:.9rem 1rem; border-radius:14px;
  background:rgba(255,255,255,.72); border:1px solid var(--line); box-shadow:var(--shadow);
  text-decoration:none; color:#0b3b2f; position:relative; overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cat-link span{ font-weight:800; }
.cat-link em{ font-style:normal; color:#0e2f27; opacity:.9; font-size:.95rem; }
.cat-link::after{
  content:""; position:absolute; left:-40%; top:0; width:40%; height:100%;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-16deg); opacity:0;
}
.cat-link:hover, .cat-link:focus-visible{ transform: translateY(-2px); box-shadow:var(--shadow-lg); }
.cat-link:hover::after, .cat-link:focus-visible::after{ animation: shine .9s ease forwards; }

/* contained ticker */
/* Fleet catalogue ticker: left → right */
/* Fleet catalogue ticker: right → left, seamless */
.cat-ticker{
  margin-top:16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.cat-ticker .track-wrap{
  display:flex;                /* две одинаковые дорожки подряд */
  gap:2rem;
  width:max-content;           /* ширина по содержимому */
  will-change: transform;
  animation: tickerRTL 22s linear infinite;
}

.cat-ticker .track{
  flex:0 0 auto;
  white-space:nowrap;
  padding:.5rem 1rem;
}
.cat-ticker .track span{ margin:0 .6rem; }

/* движемся слева направо по transform-оси в минус (влево) */
@keyframes tickerRTL{
  0%   { transform: translateX(0); }        /* весь текст стартует справа за кадром */
  100% { transform: translateX(-50%); }     /* сдвиг ровно на ширину одной дорожки */
}

/* уважение к reduced motion */
@media (prefers-reduced-motion: reduce){
  .cat-ticker .track-wrap{ animation:none; transform:none; }
}