/* MarinAutoLogistic — брендбук: Sapphire Blue / Crystal White / Deep Black,
   Roboto Condensed Bold (заголовки) + Roboto Regular (текст). */
:root {
  --sapphire: #3340c4;
  --sapphire-2: #4a5ae6;
  --sapphire-glow: #6d7ff0;
  --crystal: #f4f6fb;
  --deep: #050a1f;
  --deep-2: #0a1233;
  --card: rgba(16, 26, 70, 0.55);
  --line: rgba(159, 176, 255, 0.16);
  --muted: #9aa6d6;
  --tg: #2aabee;
  --max: #7b5cff;
  --ok: #3ddc97;
  --r: 18px;
  --head: 'Roboto Condensed', 'Arial Narrow', sans-serif;
  --text: 'Roboto', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--deep); color: var(--crystal); font: 16px/1.55 var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.wrap { width: min(1240px, 100% - 32px); margin-inline: auto; }
h1, h2, h3, .modal-title { font-family: var(--head); font-weight: 800; line-height: 1.02; letter-spacing: -0.01em; text-transform: uppercase; }
h2 { font-size: clamp(28px, 4vw, 46px); }
.eyebrow { font: 700 13px/1.3 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--sapphire-glow); margin-bottom: 12px; }
.accent { color: transparent; background: linear-gradient(92deg, #fff 0%, #aeb9ff 40%, var(--sapphire-glow) 100%); -webkit-background-clip: text; background-clip: text; }
.glass { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.note { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ---------- кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; border-radius: 999px; border: 1px solid transparent; font: 700 15px/1 var(--head); letter-spacing: .03em; cursor: pointer; transition: transform .2s, box-shadow .2s, background .2s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: 18px 30px; font-size: 17px; }
.btn-sm { padding: 9px 14px; font-size: 13px; }
.btn-primary { background: linear-gradient(135deg, var(--sapphire-2), var(--sapphire)); color: #fff; box-shadow: 0 10px 30px -8px rgba(74, 90, 230, .8), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-primary:hover { box-shadow: 0 14px 40px -8px rgba(109, 127, 240, .95), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-ghost { background: rgba(255,255,255,.04); border-color: rgba(159,176,255,.35); color: #fff; }
.btn-ghost:hover { background: rgba(109,127,240,.16); }
.btn-tg { background: var(--tg); color: #fff; }
.btn-max { background: linear-gradient(135deg, #8a6bff, #5b3fe0); color: #fff; }
:focus-visible { outline: 2px solid var(--sapphire-glow); outline-offset: 3px; }

/* ---------- шапка ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 50; padding: 14px 0; transition: padding .3s, background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.hdr.solid { padding: 8px 0; background: rgba(5, 10, 31, .78); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-color: var(--line); }
.hdr-in { display: flex; align-items: center; gap: 18px; }
.logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.logo img { border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.92), 0 0 22px rgba(109,127,240,.55); }
.logo b { display: block; font: 800 18px/1 var(--head); letter-spacing: .01em; }
.logo small { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.nav { margin-inline: auto; display: flex; gap: 2px; padding: 5px; border-radius: 999px; background: rgba(10, 18, 51, .55); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.nav a { padding: 9px 15px; border-radius: 999px; font: 700 13.5px var(--head); letter-spacing: .03em; text-transform: uppercase; color: #c9d1ff; white-space: nowrap; transition: background .2s, color .2s; }
.nav a:hover, .nav a.on { background: rgba(109,127,240,.22); color: #fff; }
.hdr-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.hdr-phone { font: 700 16px var(--head); white-space: nowrap; }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: rgba(10,18,51,.6); cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.burger i { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s; }
.burger[aria-expanded="true"] i:first-child { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded="true"] i:last-child { transform: translateY(-4px) rotate(-45deg); }

/* мобильное меню */
.menu { position: fixed; inset: 0; z-index: 45; padding: 96px 20px 24px; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(80% 50% at 80% 0%, rgba(51,64,196,.45), transparent 70%), rgba(5,10,31,.97); animation: menuIn .35s cubic-bezier(.2,.7,.2,1); overflow-y: auto; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-12px); } }
.menu-nav { display: flex; flex-direction: column; }
.menu-nav a { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); font: 800 26px/1.1 var(--head); text-transform: uppercase; }
.menu-nav small { font: 700 12px var(--head); color: var(--sapphire-glow); }
.menu-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.menu-addr { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 14px; margin-top: 6px; }

/* ---------- первый экран ---------- */
.hero { position: relative; min-height: max(720px, 100svh); overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: center; padding: 120px 0 34px; }
.layer { position: absolute; will-change: transform; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.hero-photo { inset: -2%; z-index: -5; background: #050a1f url('https://images.unsplash.com/photo-1732019438133-239b5364f4ce?w=2000&q=70&auto=format') 70% 60% / cover no-repeat; animation: heroZoom 18s ease-out both; }
@keyframes heroZoom { from { scale: 1.08; } }
/* цветокоррекция под фирменный сапфировый + затемнение под текст */
.hero-grade { position: absolute; inset: 0; z-index: -4; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,10,31,.92) 0%, rgba(5,10,31,.7) 30%, rgba(5,10,31,.1) 58%, rgba(5,10,31,.2) 100%),
    linear-gradient(180deg, rgba(5,10,31,.6) 0%, transparent 22%, transparent 62%, var(--deep) 100%); }
/* тёплые огни города — в фирменный сапфир, но огни остаются живыми */
.hero-grade::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #1c2a9e, #2f45d8 55%, #1a2470); mix-blend-mode: color; opacity: .55; }
.hero-dial { right: 4%; top: 46%; width: min(640px, 48vw); aspect-ratio: 1; translate: 0 -50%; z-index: -3; opacity: .45; }
.dial-globe { transform-origin: 300px 300px; animation: spin 80s linear infinite; }
.dial-hand { transform-origin: 300px 300px; animation: spin 12s steps(60) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.hero-car { right: 3%; bottom: 13%; width: min(820px, 54vw); z-index: -2; }
.car-img { width: 100%; height: auto; position: relative; filter: drop-shadow(0 28px 30px rgba(0,0,0,.65)); animation: carIn 1.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes carIn { from { opacity: 0; transform: translateX(10%); filter: blur(6px); } }
/* отражение на мокром асфальте */
.car-reflect { position: absolute; left: 0; top: 96%; width: 100%; transform: scaleY(-1); opacity: .28; filter: blur(2px) saturate(1.2);
  -webkit-mask: linear-gradient(0deg, rgba(0,0,0,.9), transparent 35%); mask: linear-gradient(0deg, rgba(0,0,0,.9), transparent 35%); animation: carIn 1.4s cubic-bezier(.2,.7,.2,1) both; }
.car-glow { position: absolute; left: 6%; right: 4%; bottom: -2%; height: 22%; background: radial-gradient(closest-side, rgba(109,127,240,.55), transparent); filter: blur(18px); }
.car-sheen { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1280 / 714; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask: url('../img/prado.png') center / 100% 100% no-repeat; mask: url('../img/prado.png') center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 40%, rgba(190,205,255,.5) 48%, rgba(255,255,255,.8) 50%, rgba(190,205,255,.5) 52%, transparent 60%) no-repeat;
  background-size: 260% 100%; animation: sheen 7s ease-in-out 1.8s infinite; }
@keyframes sheen { 0% { background-position: 120% 0; } 40%, 100% { background-position: -40% 0; } }
.headlight { position: absolute; width: 8%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.9) 0 6%, rgba(190,210,255,.4) 20%, transparent 60%); mix-blend-mode: screen; opacity: 0; animation: lights 1s ease-out 1.3s forwards, flicker 5s ease-in-out 2.5s infinite; pointer-events: none; }
.h1 { left: 62%; top: 43%; }
.h2 { left: 80.5%; top: 42.5%; width: 7%; }
@keyframes lights { 0% { opacity: 0; } 30% { opacity: 1; } 40% { opacity: .2; } 100% { opacity: .9; } }
@keyframes flicker { 50% { opacity: .75; } }

.hero-in { position: relative; }
.hero-text { max-width: 600px; }
.hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: rgba(10,18,51,.6); border: 1px solid var(--line); color: #dfe4ff; margin-bottom: 22px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 0 0 rgba(61,220,151,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(61,220,151,0); } }
.hero h1 { font-size: clamp(46px, 6.6vw, 96px); line-height: .95; margin-bottom: 22px; text-shadow: 0 8px 40px rgba(0,0,0,.55); }
.hero-lead { font-size: 17px; color: #d5dbff; max-width: 500px; margin-bottom: 30px; }
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-strip { margin-top: auto; padding-top: 40px; position: relative; }
.strip { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 18px; overflow: hidden; }
.strip > * { padding: 16px 20px; border-right: 1px solid var(--line); }
.strip > *:last-child { border-right: 0; }
.strip b { display: block; font: 800 20px/1.1 var(--head); text-transform: uppercase; }
.strip small { color: var(--muted); font-size: 12.5px; }
a.strip-link:hover b, .strip a:hover b { color: var(--sapphire-glow); }

/* ---------- секции ---------- */
.sec { padding: 96px 0; position: relative; }
.sec-head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.sec-head p:not(.eyebrow) { color: var(--muted); margin-top: 14px; }
.sec-head.left { text-align: left; margin: 0; }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.anchor { position: absolute; top: -80px; }

/* ---------- каталог с вкладками ---------- */
.tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 26px; }
.tabs button { padding: 13px 26px; border-radius: 999px; border: 1px solid var(--line); background: rgba(10,18,51,.5); color: #c9d1ff; font: 800 16px var(--head); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; transition: all .25s; }
.tabs button.on { background: linear-gradient(135deg, var(--sapphire-2), var(--sapphire)); color: #fff; border-color: transparent; box-shadow: 0 10px 26px -8px rgba(74,90,230,.9); }
.cat { display: grid; grid-template-columns: 340px 1fr; gap: 18px; animation: fadeUp .45s cubic-bezier(.2,.7,.2,1); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } }
.cat-side { padding: 26px; display: flex; flex-direction: column; gap: 18px; background: linear-gradient(160deg, rgba(51,64,196,.45), rgba(16,26,70,.6)); }
.cat-side h3 { font-size: 32px; }
.cat-side > p { color: #cdd4ff; font-size: 14.5px; }
.cat-side .btn { margin-top: auto; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.steps { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: s; }
.steps li { counter-increment: s; display: flex; gap: 12px; align-items: center; font-size: 14px; }
.steps li::before { content: counter(s); flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); font: 700 12px var(--head); }
.car-card { position: relative; display: flex; flex-direction: column; border-radius: var(--r); background: rgba(10,18,51,.6); border: 1px solid var(--line); overflow: hidden; transition: transform .3s, border-color .3s; }
.car-card:hover { transform: translateY(-4px); border-color: rgba(109,127,240,.5); }
.car-card .ph { aspect-ratio: 16/10; display: grid; place-items: center; background: radial-gradient(70% 70% at 50% 65%, rgba(74,90,230,.4), transparent 70%), linear-gradient(180deg, #0d1640, #070c24); }
.car-card .ph img { width: 92%; height: 92%; object-fit: contain; transition: transform .5s; filter: drop-shadow(0 12px 14px rgba(0,0,0,.5)); }
.car-card:hover .ph img { transform: scale(1.05); }
.car-card .ph svg { width: 44%; opacity: .35; fill: var(--sapphire-glow); }
.car-card .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.car-card b { font: 800 18px var(--head); text-transform: uppercase; }
.car-card small { color: var(--muted); font-size: 12.5px; }
.car-card .price { font: 800 24px var(--head); margin: 8px 0 12px; }
.car-card .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: auto; }
.car-card .btns .btn { padding: 11px 8px; font-size: 12.5px; }
.badge { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(5,10,31,.8); border: 1px solid var(--line); font: 700 10.5px var(--head); letter-spacing: .08em; text-transform: uppercase; color: #cdd4ff; }
.car-more { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 12px; padding: 24px; border-radius: var(--r); border: 1px dashed rgba(159,176,255,.35); background: rgba(10,18,51,.3); }
.car-more b { font: 800 22px var(--head); text-transform: uppercase; }
.car-more p { color: var(--muted); font-size: 14px; }

/* калькулятор */
.sec-calc { background: radial-gradient(60% 50% at 50% 0%, rgba(51,64,196,.25), transparent 70%); }
.calc { display: grid; grid-template-columns: 1.15fr 1fr; overflow: hidden; }
.calc-form { padding: 28px; display: flex; flex-direction: column; gap: 18px; }
.calc-res { padding: 28px; background: rgba(5,10,31,.55); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; }
.fld { display: flex; flex-direction: column; gap: 8px; }
.fld > span { font: 700 12.5px var(--head); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fld > small { color: var(--muted); font-size: 12.5px; }
.inp { position: relative; display: flex; align-items: center; }
.inp input, .lead input, .lead select, .modal-box input, .modal-box select { width: 100%; background: rgba(5,10,31,.6); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; color: #fff; font: 500 16px var(--text); outline: none; transition: border-color .2s; }
.inp input:focus, .lead input:focus, .lead select:focus, .modal-box input:focus, .modal-box select:focus { border-color: var(--sapphire-glow); }
.inp em { position: absolute; right: 16px; font: 700 18px var(--head); font-style: normal; color: var(--sapphire-glow); }
.inp:has(.unit) input { padding-right: 112px; }
.unit { position: absolute; right: 6px; display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: rgba(255,255,255,.06); }
.unit button { border: 0; background: none; padding: 6px 10px; border-radius: 7px; font: 700 12px var(--head); color: var(--muted); cursor: pointer; }
.unit button.on { background: #fff; color: var(--deep); }
.seg { display: flex; gap: 6px; padding: 4px; border-radius: 14px; background: rgba(5,10,31,.6); border: 1px solid var(--line); }
.seg button { flex: 1; border: 0; background: none; padding: 11px 8px; border-radius: 10px; font: 700 14px var(--head); color: var(--muted); cursor: pointer; transition: background .2s, color .2s; line-height: 1.15; }
.seg button small { display: block; font-size: 10.5px; opacity: .7; font-weight: 500; }
.seg button.on { background: linear-gradient(135deg, var(--sapphire-2), var(--sapphire)); color: #fff; box-shadow: 0 6px 18px -6px rgba(74,90,230,.9); }
.seg-wrap { flex-wrap: wrap; }
.seg-wrap button { flex: 1 0 60px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sub { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px dashed var(--line); border-radius: 14px; }
.res-total small { color: var(--muted); font: 700 12.5px var(--head); letter-spacing: .08em; text-transform: uppercase; }
.res-total b { display: block; font: 800 clamp(38px, 5vw, 54px)/1.05 var(--head); margin-top: 6px; }
.res-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-top: 14px; gap: 2px; }
.res-bar i { transition: flex-grow .6s; }
.res-bar .b1 { background: var(--sapphire-2); } .res-bar .b2 { background: var(--sapphire-glow); } .res-bar .b3 { background: #cdd4ff; }
.res-rows { display: flex; flex-direction: column; gap: 10px; }
.res-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.res-row span small { display: block; color: var(--muted); font-size: 12px; }
.res-row b { font: 700 15px var(--head); white-space: nowrap; }
.res-row.tag-ok small { color: var(--ok); }
.res-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.res-rates { color: var(--muted); font-size: 11.5px; }

/* часы-маршрут */
.sec-clock { background: radial-gradient(50% 60% at 75% 50%, rgba(51,64,196,.22), transparent 70%); }
.clock-in { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.sec-clock .seg { margin: 26px 0 18px; max-width: 380px; }
.route-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.route-list li { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(5,10,31,.4); cursor: pointer; transition: border-color .2s, background .2s; }
.route-list li b { font: 700 15px var(--head); }
.route-list li small { color: var(--muted); white-space: nowrap; }
.route-list li.on { border-color: var(--sapphire-glow); background: rgba(51,64,196,.25); }
.clock-face { position: relative; width: min(500px, 100%); margin-inline: auto; aspect-ratio: 1; }
.clock-face svg { width: 100%; height: 100%; overflow: visible; }
.cf-rim { fill: rgba(10,18,51,.7); stroke: var(--line); stroke-width: 2; }
.cf-track { fill: none; stroke: rgba(159,176,255,.12); stroke-width: 10; }
.cf-progress { fill: none; stroke: url(#none); stroke: var(--sapphire-glow); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 0 100; transform: rotate(-90deg); transform-origin: 250px 250px; transition: stroke-dasharray 1s cubic-bezier(.2,.7,.2,1); filter: drop-shadow(0 0 8px rgba(109,127,240,.8)); }
.cf-hand { stroke: #fff; stroke-width: 4; stroke-linecap: round; transform-origin: 250px 250px; transition: transform 1s cubic-bezier(.3,1.4,.4,1); }
.cf-pin { fill: #fff; }
.cf-mark circle { fill: var(--deep-2); stroke: var(--sapphire-glow); stroke-width: 2; }
.cf-mark.on circle { fill: var(--sapphire-glow); }
.cf-mark text { fill: #cdd4ff; font: 700 13px var(--head); text-anchor: middle; dominant-baseline: central; }
.cf-mark.on text { fill: #fff; }
.cf-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; padding-top: 110px; }
.cf-center b { font: 800 64px/1 var(--head); }
.cf-center small { color: var(--muted); font: 700 12px var(--head); letter-spacing: .1em; text-transform: uppercase; }
.cf-center em { font-style: normal; margin-top: 6px; font: 700 14px var(--head); color: var(--sapphire-glow); max-width: 200px; }

/* кредит */
.credit-in { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.credit { padding: 26px; display: flex; flex-direction: column; gap: 18px; }
.credit input[type=range] { accent-color: var(--sapphire-glow); width: 100%; }
.credit-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.credit-out div { padding: 14px; border-radius: 12px; background: rgba(5,10,31,.55); border: 1px solid var(--line); }
.credit-out small { color: var(--muted); font-size: 12px; }
.credit-out b { display: block; font: 800 22px var(--head); margin-top: 4px; }

/* акции */
.promo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.promo { padding: 26px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; }
.promo .sum { font: 800 44px var(--head); color: #fff; }
.promo .sum small { font-size: 16px; color: var(--muted); }
.promo h3 { font-size: 24px; }
.promo p { color: var(--muted); }
.promo::after { content: ''; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; border: 30px solid rgba(109,127,240,.12); }

/* рубрики */
.rub-grid { display: grid; grid-template-columns: 1fr 1fr .7fr; gap: 16px; }
.rub { padding: 24px; display: flex; flex-direction: column; gap: 10px; min-height: 250px; justify-content: flex-end; background: linear-gradient(180deg, transparent, rgba(5,10,31,.8)), radial-gradient(80% 70% at 70% 20%, rgba(74,90,230,.45), transparent), var(--deep-2); }
.rub b { font: 800 30px/1 var(--head); text-transform: uppercase; }
.rub p { color: var(--muted); font-size: 14px; }
.rub .btn { align-self: flex-start; }
.rub-tag { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: #0077ff; font: 700 12px var(--head); }
.rub-max { border-radius: var(--r); overflow: hidden; display: block; border: 1px solid var(--line); }
.rub-max img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.rub-max:hover img { transform: scale(1.04); }

/* отзывы */
.rev-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 900px; margin-inline: auto; }
.rev { padding: 26px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.rev b { font: 800 22px var(--head); }
.rev-logo { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font: 800 18px var(--head); }
.rev-2gis { background: #19aa1e; }
.rev-ya { background: #fc3f1d; font-size: 28px; }

/* заявка */
.lead { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; padding: 34px; background: linear-gradient(135deg, rgba(51,64,196,.45), rgba(16,26,70,.55)); }
.lead h2 { font-size: clamp(26px, 3vw, 36px); }
.lead > div > p:not(.eyebrow) { color: #cdd4ff; margin-top: 10px; }
.lead-fields, .modal-box { display: flex; flex-direction: column; gap: 10px; }
.lead select, .modal-box select { appearance: none; cursor: pointer; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: #cdd4ff; cursor: pointer; }
.consent input { width: 18px !important; height: 18px; margin-top: 1px; accent-color: var(--sapphire-glow); padding: 0 !important; flex-shrink: 0; }
.consent a { text-decoration: underline; }
.hp { position: absolute !important; left: -9999px; width: 1px !important; height: 1px; opacity: 0; }
.lead-msg { font-size: 13.5px; min-height: 1em; }
.lead-msg.ok { color: var(--ok); }
.lead-msg.err { color: #ff8a8a; }

/* контакты */
.contacts-in { display: grid; grid-template-columns: .9fr 1.1fr; gap: 16px; }
.contact-card { padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.c-row small { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-family: var(--head); font-weight: 700; }
.c-row b { font: 700 20px var(--head); }
a.c-row:hover b { color: var(--sapphire-glow); }
.c-maps { display: flex; gap: 8px; flex-wrap: wrap; }
.socials { display: flex; gap: 8px; flex-wrap: wrap; }
.socials a { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); font: 700 13px var(--head); }
.socials a:hover { background: rgba(109,127,240,.16); }
.legal { font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.map-wrap { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); min-height: 380px; background: var(--deep-2); }
.map-wrap iframe { width: 100%; height: 100%; min-height: 380px; border: 0; filter: saturate(.85) hue-rotate(5deg); }

.ftr { border-top: 1px solid var(--line); padding: 30px 0 40px; }
.ftr-in { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.ftr nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: #cdd4ff; }
.ftr small { color: var(--muted); }

/* модалки */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(3,7,20,.7); backdrop-filter: blur(6px); animation: fadeIn .25s; }
.modal-box { width: min(440px, 100%); padding: 28px; position: relative; background: rgba(10,18,51,.95); }
.modal-title { font-size: 26px; }
.modal-box > p { color: var(--muted); font-size: 14px; margin-bottom: 6px; }
.modal-x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; background: rgba(255,255,255,.06); border-radius: 50%; font-size: 22px; cursor: pointer; }
@keyframes fadeIn { from { opacity: 0; } }

/* ---------- мобильная панель мессенджеров ---------- */
.mbar { display: none; }

/* ---------- адаптив ---------- */
@media (max-width: 1240px) {
  .nav a { padding: 9px 11px; font-size: 12.5px; }
  .logo small { display: none; }
}
@media (max-width: 1100px) {
  .nav, .hdr-phone { display: none; }
  .burger { display: flex; }
  .hdr-right { margin-left: auto; }
  .cat { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero { min-height: auto; padding: 104px 0 20px; }
  .hero-grade { background: linear-gradient(180deg, rgba(5,10,31,.9) 0%, rgba(5,10,31,.55) 42%, rgba(5,10,31,.2) 62%, var(--deep) 100%), linear-gradient(0deg, rgba(51,64,196,.45), rgba(51,64,196,.45)); }
  .hero-photo { background-position: 78% 50%; }
  .hero-dial { width: 110vw; right: -35vw; top: 70%; opacity: .5; }
  .hero-car { position: relative; right: auto; bottom: auto; width: 112%; margin: 10px -6% 40px; order: 2; }
  .hero-in { order: 1; }
  .hero-strip { order: 3; padding-top: 0; }
  .strip { grid-template-columns: 1fr 1fr; }
  .strip > *:nth-child(2) { border-right: 0; }
  .strip > *:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .hero-lead { font-size: 15.5px; }
  .hdr-cta { display: none; }
  .calc, .clock-in, .credit-in, .lead, .contacts-in { grid-template-columns: 1fr; }
  .calc-res { border-left: 0; border-top: 1px solid var(--line); }
  .rub-grid, .rev-grid { grid-template-columns: 1fr; }
  .rub-max { max-width: 320px; }
  .sec { padding: 64px 0; }
  .mbar { display: flex; gap: 8px; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 40; padding: 8px; border-radius: 999px; background: rgba(5,10,31,.92); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.5); transform: translateY(160%); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
  .mbar.show { transform: none; }
  .mbar .btn { flex: 1; padding: 13px 8px; }
  .ftr { padding-bottom: 100px; }
}
@media (max-width: 520px) {
  .row2, .res-btns, .credit-out { grid-template-columns: 1fr; }
  .calc-form, .calc-res { padding: 20px; }
  .hero-btns .btn { width: 100%; }
  .tabs button { padding: 11px 16px; font-size: 14px; flex: 1; }
  .cat-grid { grid-template-columns: 1fr; }
  .logo b { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .headlight { opacity: .9; }
}
.car-card .btns { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.car-card .btns .btn { white-space: normal; line-height: 1.15; text-align: center; }

/* =====================================================================
   ПЕРВЫЙ ЭКРАН «СТУДИЯ» (по референсу forma studio)
   Белая рамка с вырезами, сапфировая студия, огромное слово MAR·IN,
   машина стоит в разрыве слова.
   ===================================================================== */
.hero2 { --frame: #f4f6fb; --scene-r: 34px; padding: 10px; background: var(--deep); }
.h2-frame { position: relative; background: var(--frame); border-radius: 44px; padding: 14px; }
.h2-scene { position: relative; min-height: min(820px, calc(100svh - 48px)); border-radius: var(--scene-r); overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 60% at 50% 42%, #4d63f0 0%, #3044d6 38%, #1d2c9e 68%, #111b6a 100%); color: #fff; }
.h2-light { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 18% at 50% 88%, rgba(0,0,0,.35), transparent 70%),
    linear-gradient(180deg, transparent 62%, rgba(10,18,70,.55) 100%),
    radial-gradient(30% 40% at 20% 0%, rgba(255,255,255,.18), transparent 70%); }

/* вырезы рамки: логотип сверху, стрелка снизу */
.h2-tab { position: absolute; left: 50%; translate: -50% 0; z-index: 5; background: var(--frame); display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--sapphire); }
.h2-tab::before, .h2-tab::after { content: ''; position: absolute; width: 26px; height: 26px; }
.h2-tab-top { top: 14px; padding: 6px 34px 14px; border-radius: 0 0 26px 26px; }
.h2-tab-top::before { right: 100%; top: 0; background: radial-gradient(circle at 0 100%, transparent 25px, var(--frame) 26px); }
.h2-tab-top::after { left: 100%; top: 0; background: radial-gradient(circle at 100% 100%, transparent 25px, var(--frame) 26px); }
.h2-tab-top b { font: 700 22px 'Roboto Condensed', sans-serif; letter-spacing: -.02em; }
.h2-tab-top img { border-radius: 50%; }
.h2-tab-bottom { bottom: 14px; width: 92px; height: 44px; border-radius: 26px 26px 0 0; }
.h2-tab-bottom::before { right: 100%; bottom: 0; background: radial-gradient(circle at 0 0, transparent 25px, var(--frame) 26px); }
.h2-tab-bottom::after { left: 100%; bottom: 0; background: radial-gradient(circle at 100% 0, transparent 25px, var(--frame) 26px); }
.h2-tab-bottom svg { width: 22px; height: 22px; fill: none; stroke: var(--sapphire); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }

/* меню-пилюли и действия */
.h2-nav { position: absolute; left: 34px; top: 26px; display: flex; gap: 4px; z-index: 4; }
.h2-nav a, .h2-actions > a:not(.h2-icon) { padding: 8px 16px; border-radius: 999px; font: 600 13px 'Roboto', sans-serif; color: #fff; opacity: .9; }
.h2-nav a.on { background: #fff; color: var(--sapphire); opacity: 1; }
.h2-nav a:hover, .h2-actions > a:hover { opacity: 1; background: rgba(255,255,255,.12); }
.h2-actions { position: absolute; right: 26px; top: 22px; display: flex; align-items: center; gap: 6px; z-index: 4; }
.h2-icon { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.h2-icon svg { width: 16px; height: 16px; fill: none; stroke: var(--sapphire); stroke-width: 2; }
.h2-contact { display: inline-flex; align-items: center; gap: 14px; padding: 5px 5px 5px 18px; border: 0; border-radius: 999px; background: #fff; color: var(--sapphire); font: 700 13px 'Roboto', sans-serif; cursor: pointer; }
.h2-contact i { width: 30px; height: 30px; border-radius: 50%; background: var(--sapphire); display: grid; place-items: center; }
.h2-contact svg { width: 14px; height: 14px; fill: #fff; }

/* огромное слово */
.h2-sub { position: absolute; left: 50%; top: 14%; translate: -50% 0; z-index: 3; font: 700 clamp(22px, 3.2vw, 46px) 'Roboto Condensed', sans-serif; letter-spacing: -.01em; }
.h2-word { position: absolute; left: 0; right: 0; top: 11%; z-index: 1; display: flex; justify-content: space-between; padding: 0 1.2%;
  font: 700 clamp(110px, 21vw, 330px)/.82 'Roboto Condensed', sans-serif; letter-spacing: -.03em; text-transform: lowercase; color: #fff; pointer-events: none; }
.h2-word span { text-shadow: 0 20px 60px rgba(8,14,60,.35); }

/* машина в разрыве */
.h2-car { position: absolute; left: 50%; top: 23%; translate: -50% 0; width: min(940px, 66%); z-index: 2; }
.h2-car img { width: 100%; height: auto; position: relative; z-index: 1; filter: drop-shadow(0 24px 30px rgba(6,10,50,.55)); transition: opacity .35s, transform .5s cubic-bezier(.2,.7,.2,1); }
.h2-car.swap img { opacity: 0; transform: translateX(-6%) scale(.97); }
.h2-floor { position: absolute; left: 8%; right: 8%; bottom: 2%; height: 14%; background: radial-gradient(closest-side, rgba(5,8,40,.75), transparent); filter: blur(10px); }
.spot { position: absolute; z-index: 3; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.9); background: rgba(255,255,255,.18); backdrop-filter: blur(4px); color: #fff; font: 700 16px/1 'Roboto', sans-serif; cursor: pointer; display: grid; place-items: center; transition: transform .2s; }
.spot::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); animation: ping 2.4s ease-out infinite; }
@keyframes ping { 70%, 100% { transform: scale(1.7); opacity: 0; } }
.spot:hover, .spot.open { background: #fff; color: var(--sapphire); }
.spot i { font-style: normal; transition: transform .25s; }
.spot:hover i, .spot.open i { transform: rotate(45deg); }
.spot-tip { position: absolute; left: 20px; top: 18px; width: 200px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(12px); font: 400 12px/1.45 'Roboto', sans-serif; text-align: left; opacity: 0; pointer-events: none; transform: translateY(6px); transition: all .25s; }
.spot.open .spot-tip, .spot:hover .spot-tip { opacity: 1; transform: none; }

/* левый блок */
.h2-left { position: absolute; left: 34px; top: 52%; width: min(320px, 26%); z-index: 3; }
.h2-left p { font: 400 14px/1.5 'Roboto', sans-serif; color: #e4e8ff; margin-bottom: 10px; }
.h2-btn { display: inline-flex; margin-top: 14px; padding: 18px 34px; border-radius: 999px; background: #fff; color: var(--sapphire); font: 700 14px 'Roboto', sans-serif; box-shadow: 0 14px 30px -12px rgba(0,0,0,.5); transition: transform .2s; }
.h2-btn:hover { transform: translateY(-2px); }

/* выбор страны вместо цветов */
.h2-countries { position: absolute; right: 34px; top: 51%; z-index: 3; display: flex; align-items: center; gap: 10px; font: 400 13px 'Roboto', sans-serif; color: #e4e8ff; }
.h2-countries span { margin-right: 6px; }
.h2-countries button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font: 700 11px 'Roboto Condensed', sans-serif; cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); transition: all .2s; }
.h2-countries button.on { background: #fff; color: var(--sapphire); box-shadow: 0 0 0 4px rgba(255,255,255,.25); }

.h2-socials { position: absolute; left: 34px; bottom: 34px; z-index: 3; display: flex; gap: 8px; }
.h2-socials a { width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--sapphire); display: grid; place-items: center; font: 700 10px 'Roboto Condensed', sans-serif; }
.h2-model { position: absolute; left: 50%; bottom: 7%; translate: -50% 0; z-index: 3; font: 400 12px 'Roboto', sans-serif; color: rgba(255,255,255,.75); letter-spacing: .06em; white-space: nowrap; }

/* карточка консультации */
.h2-consult { position: absolute; right: 22px; bottom: 22px; z-index: 3; width: 300px; display: flex; align-items: flex-end; gap: 6px; padding: 16px 0 0 16px; border-radius: 22px; background: #fff; color: var(--deep); overflow: hidden; }
.h2-consult div { padding-bottom: 16px; }
.h2-consult b { font: 700 15px 'Roboto Condensed', sans-serif; color: var(--sapphire); }
.h2-consult p { font: 400 11px/1.4 'Roboto', sans-serif; color: #555c78; margin: 4px 0 10px; }
.h2-consult img { width: 96px; height: 96px; align-self: flex-end; margin: 0 -12px -12px 0; border-radius: 50%; }
.h2-consult-btn { display: inline-flex; align-items: center; gap: 18px; padding: 5px 5px 5px 14px; border: 0; border-radius: 999px; background: var(--sapphire); color: #fff; font: 700 12px 'Roboto', sans-serif; cursor: pointer; }
.h2-consult-btn i { width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--sapphire); display: grid; place-items: center; font-style: normal; }

/* стрелки в полукруглых вырезах по бокам */
.h2-arrow { position: absolute; top: 50%; translate: 0 -50%; z-index: 4; width: 34px; height: 64px; border: 0; background: var(--frame); cursor: pointer; display: grid; place-items: center; }
.h2-prev { left: 0; border-radius: 0 34px 34px 0; }
.h2-next { right: 0; border-radius: 34px 0 0 34px; }
.h2-arrow svg { width: 18px; height: 18px; fill: none; stroke: var(--sapphire); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* шапка сайта появляется, когда первый экран прокручен */
body:has(.hero2) .hdr { transform: translateY(-120%); transition: transform .35s, background .3s, padding .3s; }
body:has(.hero2) .hdr.past { transform: none; }

@media (max-width: 1100px) {
  .h2-actions > a:not(.h2-icon) { display: none; }
  .h2-left { width: 30%; }
  .h2-consult { width: 260px; }
}
@media (max-width: 900px) {
  body:has(.hero2) .hdr { transform: none; }
  .hero2 { padding: 72px 8px 8px; }
  .h2-frame { border-radius: 30px; padding: 8px; }
  .h2-scene { --scene-r: 24px; min-height: 0; display: flex; flex-direction: column; padding: 70px 18px 70px; }
  .h2-nav, .h2-actions, .h2-arrow { display: none; }
  .h2-tab-top { top: 8px; padding: 4px 20px 10px; }
  .h2-tab-top b { font-size: 16px; }
  .h2-tab-bottom { bottom: 8px; }
  .h2-sub, .h2-word, .h2-car, .h2-left, .h2-countries, .h2-socials, .h2-model, .h2-consult { position: relative; left: auto; right: auto; top: auto; bottom: auto; translate: none; width: auto; }
  .h2-sub { text-align: center; order: 1; }
  .h2-word { order: 2; font-size: 30vw; margin-top: -6px; }
  .h2-car { order: 3; width: 106%; margin: -14vw -3% 0; }
  .h2-model { order: 4; text-align: center; margin-top: -4px; }
  .h2-countries { order: 5; justify-content: center; margin: 14px 0 18px; }
  .h2-left { order: 6; text-align: center; }
  .h2-left .h2-btn { width: 100%; justify-content: center; }
  .h2-consult { order: 7; margin-top: 18px; }
  .h2-socials { order: 8; justify-content: center; margin-top: 16px; }
  .spot-tip { display: none; }
}
@media (max-width: 900px) { .h2-tab-top { display: none; } .h2-scene { padding-top: 36px; } }

/* =====================================================================
   ВСЕ РАЗДЕЛЫ В СТИЛЕ «СТУДИЯ»: светлая рамка на сапфире, подпись раздела
   в вырезе сверху, внутри — сапфировые карточки как на первом экране.
   ===================================================================== */
/* ниже первого экрана фон ровно цвета плашек-вырезов — иначе на стыке видна разница оттенков */
body { background: linear-gradient(180deg, #111b6a 0, #1a2690 900px) #1a2690 no-repeat; }
.sec { padding: 10px; }
.sec > .wrap {
  --muted: #5b6386; --line: rgba(29, 44, 158, .14);
  position: relative; width: auto; max-width: none; margin: 0;
  background: var(--frame, #f4f6fb); color: #0f1540; border-radius: 44px;
  padding: 86px clamp(18px, 4vw, 64px) clamp(28px, 4vw, 56px);
}
.sec > .wrap > * { max-width: 1240px; margin-left: auto; margin-right: auto; }
:root { --frame: #f4f6fb; }

/* подпись раздела — в вырезе рамки сверху по центру */
.sec > .wrap .eyebrow {
  /* центрируем без translate: дробный сдвиг давал полупиксельные швы («засечки») у ушек */
  position: absolute; top: 0; left: 0; right: 0; width: fit-content; margin: 0 auto !important; z-index: 2;
  padding: 10px 30px 14px; border-radius: 0 0 24px 24px; white-space: nowrap;
  background: #1a2690; color: #fff; font: 700 14px 'Roboto Condensed', sans-serif; letter-spacing: .02em; text-transform: none;
}
.sec > .wrap .eyebrow::before, .sec > .wrap .eyebrow::after { content: ''; position: absolute; top: 0; width: 25px; height: 24px; }
/* ушки заходят под плашку на 1px — без щели на стыке; край дуги сглажен на 1px */
.sec > .wrap .eyebrow::before { right: calc(100% - 1px); background: radial-gradient(circle 24px at 0 100%, transparent 23px, #1a2690 24px); }
.sec > .wrap .eyebrow::after { left: calc(100% - 1px); background: radial-gradient(circle 24px at 100% 100%, transparent 23px, #1a2690 24px); }

/* заголовки — Roboto Condensed Bold из брендбука, как «mar in» */
.sec h2, .lead h2 { font: 700 clamp(32px, 4.6vw, 62px)/1 'Roboto Condensed', sans-serif; letter-spacing: -.035em; text-transform: none; color: var(--sapphire); }
.sec-head p:not(.eyebrow) { color: var(--muted); font-size: 16px; }
.sec h3 { font-family: 'Roboto Condensed', sans-serif; font-weight: 700; text-transform: none; letter-spacing: -.02em; }

/* карточки внутри — сапфировые «студии» */
.sec .glass, .sec .car-card, .sec .dir-promo {
  --muted: #c9d0ff; --line: rgba(255,255,255,.16);
  background: radial-gradient(90% 80% at 50% 30%, #4d63f0 0%, #3044d6 45%, #1d2c9e 100%);
  border: 0; border-radius: 30px; color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 24px 50px -30px rgba(17, 27, 106, .8);
}
.sec .glass h2, .sec .car-card b, .sec .glass h3, .sec .glass b { color: #fff; }
.sec .car-card .ph { background: radial-gradient(60% 55% at 50% 70%, rgba(255,255,255,.18), transparent 70%); }
.sec .car-card .badge { background: rgba(255,255,255,.18); border: 0; color: #fff; }

/* кнопки — пилюли как на первом экране */
.sec .btn { border-radius: 999px; font-family: 'Roboto', sans-serif; font-weight: 700; text-transform: none; letter-spacing: 0; }
.sec .btn-primary { background: var(--sapphire); box-shadow: 0 14px 30px -14px rgba(29,44,158,.9); }
.sec .btn-ghost { background: transparent; border: 1.5px solid rgba(29,44,158,.3); color: var(--sapphire); }
.sec .glass .btn-primary, .sec .car-card .btn-primary, .sec .dir-promo .btn-primary { background: #fff; color: var(--sapphire); box-shadow: 0 12px 26px -12px rgba(0,0,0,.5); }
.sec .glass .btn-ghost, .sec .car-card .btn-ghost { border-color: rgba(255,255,255,.45); color: #fff; }

/* вкладки и переключатели — как меню-пилюли */
.tabs { background: #fff; border-radius: 999px; padding: 6px; width: fit-content; margin: 0 auto 28px; box-shadow: 0 10px 30px -18px rgba(17,27,106,.6); }
.tabs button { border: 0; background: none; color: var(--sapphire); padding: 12px 28px; font: 700 16px 'Roboto Condensed', sans-serif; text-transform: none; }
.tabs button.on { background: var(--sapphire); color: #fff; box-shadow: none; }
.sec .seg { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.sec .seg button { font-family: 'Roboto Condensed', sans-serif; font-weight: 700; }
.sec .seg button.on { background: #fff; color: var(--sapphire); box-shadow: none; }
.sec .wrap > .sec-head .seg, .sec-clock .seg { background: #fff; border: 0; box-shadow: 0 10px 30px -18px rgba(17,27,106,.6); }
.sec-clock .seg button { color: var(--sapphire); }
.sec-clock .seg button.on { background: var(--sapphire); color: #fff; }

/* поля ввода на синих карточках */
.sec .glass .inp input, .sec .lead input, .sec .lead select { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); color: #fff; }
.sec .glass .inp input::placeholder, .sec .lead input::placeholder { color: rgba(255,255,255,.6); }
.sec .glass .inp em, .sec .unit button.on { color: var(--sapphire); }
.sec .glass .inp em { color: #fff; }
.sec .unit { background: rgba(255,255,255,.15); }
.sec .unit button.on { background: #fff; }
.sec .calc-res { background: rgba(8, 14, 60, .28); border-color: rgba(255,255,255,.14); border-radius: 0 30px 30px 0; }
.sec .res-total b { font-family: 'Roboto Condensed', sans-serif; font-weight: 700; }
.sec .res-row { border-color: rgba(255,255,255,.14); }

/* «часы»-маршрут на светлом */
.sec-clock, .sec-calc { background: none; }
.route-list li { background: #fff; border-color: rgba(29,44,158,.12); color: #0f1540; }
.route-list li small { color: var(--muted); }
.route-list li.on { background: var(--sapphire); border-color: transparent; color: #fff; }
.route-list li.on small { color: #c9d0ff; }
.cf-rim { fill: #1d2c9e; stroke: none; }

/* акции */
.promo .sum { font-family: 'Roboto Condensed', sans-serif; font-weight: 700; }
.promo::after { border-color: rgba(255,255,255,.12); }

/* рубрики, отзывы, контакты */
.rub-tag { background: rgba(255,255,255,.2); }
.rub-max { border: 0; border-radius: 30px; }
.rev b { font-family: 'Roboto Condensed', sans-serif; font-weight: 700; }
.map-wrap { border: 0; border-radius: 30px; }
.c-row small { color: #c9d0ff; }
.socials a { border-color: rgba(255,255,255,.35); }

/* подвал — тоже светлая рамка */
.ftr { border: 0; margin: 10px; padding: 34px clamp(18px, 4vw, 64px); background: var(--frame); border-radius: 44px; color: #0f1540; }
.ftr nav { color: var(--sapphire); }
.ftr small { color: #5b6386; }
.ftr .logo b { color: var(--sapphire); }

@media (max-width: 900px) {
  .sec { padding: 8px; }
  .sec > .wrap { border-radius: 30px; padding: 70px 16px 24px; }
  .sec > .wrap .eyebrow { font-size: 12.5px; padding: 8px 20px 11px; }
  .sec .calc-res { border-radius: 0 0 30px 30px; }
  .ftr { margin: 8px 8px 96px; border-radius: 30px; }
}
/* «Не нашли нужную?» — светлая карточка с пунктиром */
.sec .car-more { background: #fff; border: 2px dashed rgba(29,44,158,.25); border-radius: 30px; color: #0f1540; }
.sec .car-more b { color: var(--sapphire); font-family: 'Roboto Condensed', sans-serif; font-weight: 700; text-transform: none; font-size: 24px; }
.sec .car-more p { color: #5b6386; }

/* шапка при прокрутке — светлая капсула, как рамка первого экрана */
body:has(.hero2) .hdr.solid { background: rgba(244,246,251,.94); border-color: rgba(29,44,158,.12); backdrop-filter: blur(14px); }
body:has(.hero2) .hdr.solid .logo b { color: var(--sapphire); font-family: 'Roboto Condensed', sans-serif; font-weight: 700; }
body:has(.hero2) .hdr.solid .logo small { color: #5b6386; }
body:has(.hero2) .hdr.solid .nav { background: #fff; border-color: rgba(29,44,158,.12); box-shadow: 0 8px 24px -16px rgba(17,27,106,.6); }
body:has(.hero2) .hdr.solid .nav a { color: var(--sapphire); font-family: 'Roboto Condensed', sans-serif; font-weight: 700; text-transform: none; font-size: 14px; }
body:has(.hero2) .hdr.solid .nav a:hover, body:has(.hero2) .hdr.solid .nav a.on { background: var(--sapphire); color: #fff; }
body:has(.hero2) .hdr.solid .hdr-cta { background: var(--sapphire); color: #fff; border: 0; }
body:has(.hero2) .hdr.solid .hdr-phone { color: var(--sapphire); }
body:has(.hero2) .hdr.solid .burger { background: var(--sapphire); border: 0; }
/* mar · in — ближе друг к другу: разрыв по ширине кузова, машина заходит на обе части */
.h2-word { justify-content: center; gap: 17vw; padding: 0; }
@media (max-width: 900px) { .h2-word { gap: .12em; } }
/* marin — одним словом, машина стоит поверх середины */
.h2-word { gap: 0; }
@media (max-width: 900px) { .h2-word { gap: 0; } }
.h2-sub { top: 6.5%; }
@media (max-width: 900px) { .h2-sub { top: auto; } }

/* ===== атмосфера Дальнего Востока ===== */
/* топографические линии — «карта бездорожья» в углах светлых рамок */
.sec > .wrap { isolation: isolate; overflow: hidden; }
.sec > .wrap::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(../img/topo.svg) center/1200px auto; opacity: .09;
  -webkit-mask: radial-gradient(90% 70% at 100% 0, #000 0, transparent 70%), radial-gradient(70% 60% at 0 100%, #000 0, transparent 70%);
          mask: radial-gradient(90% 70% at 100% 0, #000 0, transparent 70%), radial-gradient(70% 60% at 0 100%, #000 0, transparent 70%); }
.sec:nth-of-type(even) > .wrap::before { background-position: left top; transform: scaleX(-1); }

/* бегущая лента маршрутов */
.fe-band { margin: 0 10px; border-radius: 24px; overflow: hidden; background: #0d1552; color: #fff; padding: 14px 0; position: relative; }
.fe-band::before, .fe-band::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 1; }
.fe-band::before { left: 0; background: linear-gradient(90deg, #0d1552, transparent); }
.fe-band::after { right: 0; background: linear-gradient(-90deg, #0d1552, transparent); }
.fe-track { display: flex; gap: 26px; width: max-content; animation: feRun 48s linear infinite; font: 700 clamp(15px, 1.6vw, 20px) 'Roboto Condensed', sans-serif; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; align-items: center; }
.fe-track i { font-style: normal; color: #5f78ff; font-size: .6em; }
@keyframes feRun { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .fe-track { animation: none; } }

/* заявка — на фоне бухты и Золотого моста */
#lead > .wrap { background: linear-gradient(180deg, rgba(13,21,82,.55), rgba(13,21,82,.82)), url(../img/hero-poster.jpg) center 40%/cover; color: #fff; }
#lead > .wrap::before { display: none; }
#lead .lead { background: linear-gradient(135deg, rgba(29,44,158,.82), rgba(13,21,82,.86)); }
#lead .lead h2 { color: #fff; }

/* полное название MARINAUTOLOGISTIC одной строкой */
.h2-word { top: 12.5%; font-size: clamp(44px, 9.4vw, 176px); line-height: .9; letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap; }
.h2-sub { top: 7%; font: 400 clamp(14px, 1.4vw, 20px) 'Roboto', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.8); white-space: nowrap; }
@media (max-width: 900px) {
  .h2-word { font-size: 9.2vw; margin-top: 6px; justify-content: center; }
  .h2-sub { font-size: 11px; letter-spacing: .12em; }
  .h2-car { margin-top: -4vw; }
}

/* крупное название убрано по просьбе клиента; h1 остаётся для SEO и скринридеров */
.h2-word { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0; padding: 0; }

/* свои блоки из админки */
.sec-custom .cb { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.sec-custom .cb-noimg { grid-template-columns: 1fr; max-width: 820px; }
.sec-custom .cb-text { display: grid; gap: 16px; justify-items: start; }
.sec-custom .cb-p { color: var(--muted, #5b6386); font-size: 17px; line-height: 1.6; }
.sec-custom .cb img { width: 100%; border-radius: 28px; object-fit: cover; max-height: 460px; }
.sec-custom-dark > .wrap { background: linear-gradient(135deg, #1d2c9e, #111b6a); color: #fff; }
.sec-custom-dark h2 { color: #fff; }
.sec-custom-dark .cb-p { color: rgba(255,255,255,.8); }
@media (max-width: 900px) { .sec-custom .cb { grid-template-columns: 1fr; } }

/* плашка-вырез раздела позиционируется от рамки блока; сдвиг (transform) у родителя
   на время анимации «перехватывал» её — плашка ехала слева в центр. Такие блоки только проявляются. */
.reveal:has(.eyebrow) { transform: none !important; }

/* =====================================================================
   ПЕРВЫЙ ЭКРАН: без машин и видео Владивостока — направления из ТЗ
   (Япония, Корея, Китай, автокредит, акции), соцсети и отзывы.
   Фон — фирменный сапфир с топографическими линиями.
   ===================================================================== */
.h2-bg { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: url(../img/topo.svg) center/1400px auto; opacity: .13; filter: invert(1);
  -webkit-mask: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 85%); mask: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 85%); }
.h2-scene { min-height: 0; }
.h2-body { position: relative; z-index: 3; display: flex; flex-direction: column; gap: clamp(22px, 3vw, 36px); padding: 104px 34px 84px; max-width: 1320px; margin: 0 auto; }
.h2-head { text-align: center; display: grid; justify-items: center; gap: 14px; }
.h2-body .h2-sub { position: static; translate: none; margin: 0; order: 0; }
.h2-title { font: 700 clamp(30px, 4.4vw, 62px)/1 'Roboto Condensed', sans-serif; letter-spacing: -.03em; max-width: 16em; text-wrap: balance; }
.h2-title span { color: #b9c4ff; }
.h2-lead { font: 400 clamp(14px, 1.2vw, 17px)/1.5 'Roboto', sans-serif; color: #dfe4ff; max-width: 560px; }

.h2-dirs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.h2-dir { grid-column: span 2; position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; gap: 8px;
  padding: 22px 22px 20px; border-radius: 26px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform .25s, background .25s; }
.h2-dir:hover { transform: translateY(-3px); background: rgba(255,255,255,.13); }
.h2-dir-alt { grid-column: span 3; display: grid; grid-template-columns: 1fr auto; column-gap: 20px; row-gap: 6px; align-content: center; padding: 18px 22px; background: rgba(10,16,70,.35); }
.h2-dir-alt > :not(.h2-dir-btns) { grid-column: 1; }
.h2-dir-alt .h2-dir-btns { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; flex-direction: column; align-items: flex-end; gap: 10px; }
.h2-dir-code { position: absolute; right: -6px; top: -14px; z-index: -1; font: 800 clamp(90px, 9vw, 140px)/1 'Roboto Condensed', sans-serif; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.22); }
.h2-dir-num { font: 700 11px 'Roboto Condensed', sans-serif; letter-spacing: .18em; color: rgba(255,255,255,.6); }
.h2-dir b { font: 700 clamp(20px, 1.9vw, 26px)/1.05 'Roboto Condensed', sans-serif; letter-spacing: -.01em; }
.h2-dir-alt b { font-size: clamp(18px, 1.6vw, 22px); }
.h2-dir p { font: 400 13.5px/1.45 'Roboto', sans-serif; color: #dbe1ff; }
/* маршрут: страна — пунктир — Владивосток, срок из config.route */
.h2-dir-route { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; font: 700 11px 'Roboto Condensed', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.h2-dir-route i { font-style: normal; }
.h2-dir-route em { flex: 1; position: relative; height: 18px; display: grid; place-items: center; font-style: normal; font-size: 11px; letter-spacing: .04em; text-transform: none; color: #fff;
  background: linear-gradient(90deg, rgba(255,255,255,.5) 50%, transparent 0) 0 50%/8px 1.5px repeat-x; }
.h2-dir-route em span { padding: 2px 9px; border-radius: 999px; background: #2536b0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.h2-dir-route em::after { content: ''; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #fff; }
.h2-dir-btns { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.h2-dir-cta { border: 0; cursor: pointer; padding: 12px 22px; border-radius: 999px; background: #fff; color: var(--sapphire); font: 700 13px 'Roboto', sans-serif; box-shadow: 0 10px 24px -12px rgba(0,0,0,.55); transition: transform .2s; }
.h2-dir-cta:hover { transform: translateY(-1px); }
.h2-dir-link { font: 600 13px 'Roboto', sans-serif; color: #fff; opacity: .85; }
.h2-dir-link:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

.h2-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px 24px; flex-wrap: wrap; }
.h2-foot .h2-socials { position: static; display: flex; gap: 8px; flex-wrap: wrap; }
.h2-foot .h2-socials a, .h2-reviews a { width: auto; height: auto; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); color: #fff; font: 600 12.5px 'Roboto', sans-serif; transition: background .2s, color .2s; }
.h2-foot .h2-socials a:hover, .h2-reviews a:hover { background: #fff; color: var(--sapphire); }
.h2-reviews { display: flex; align-items: center; gap: 8px; margin-left: auto; font: 400 13px 'Roboto', sans-serif; color: #dfe4ff; }
.h2-reviews a:not([href]) { display: none; }

@media (max-width: 1100px) {
  .h2-dir, .h2-dir-alt { grid-column: span 3; }
  .h2-dirs > .h2-dir:nth-child(3) { grid-column: span 6; }
}
@media (max-width: 900px) {
  .h2-scene { display: block; padding: 0; }
  .h2-body { padding: 44px 16px 70px; }
  .h2-dirs { grid-template-columns: 1fr; gap: 10px; }
  .h2-dirs > .h2-dir, .h2-dirs > .h2-dir:nth-child(3) { grid-column: auto; }
  .h2-dir-alt { grid-template-columns: 1fr; }
  .h2-dir-alt .h2-dir-btns { grid-column: 1; grid-row: auto; flex-direction: row; align-items: center; margin-top: 8px; }
  .h2-dir-code { font-size: 96px; }
  .h2-foot { justify-content: center; }
  .h2-reviews { margin: 0; }
}

/* =====================================================================
   КАТАЛОГ БЕЗ ВКЛАДОК: Япония → Корея → Китай листаются подряд,
   после каждой страны — шкала «Этапы и сроки».
   ===================================================================== */
.anchor { position: absolute; top: -80px; }
#catalog > .wrap { overflow: clip; }                 /* clip, а не hidden — иначе не работает sticky у индикатора */
.cat-rail { position: sticky; top: 76px; z-index: 5; display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%;
  margin: 0 auto 30px; padding: 6px; border-radius: 999px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -18px rgba(17,27,106,.6); }
.cat-rail span { display: flex; align-items: baseline; gap: 7px; padding: 10px 18px; border-radius: 999px; color: #8a92b8; font: 700 15px 'Roboto Condensed', sans-serif; transition: background .3s, color .3s; white-space: nowrap; }
.cat-rail span small { font-size: 11px; letter-spacing: .1em; opacity: .7; }
.cat-rail span em { font-style: normal; font-weight: 500; font-size: 12px; opacity: .8; }
.cat-rail span.on { background: var(--sapphire); color: #fff; }
.cat-rail i { width: 18px; height: 1.5px; background: rgba(29,44,158,.2); flex-shrink: 0; }

.countries { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 96px); }
.country { scroll-margin-top: 140px; display: flex; flex-direction: column; gap: 18px; }
.country + .country { padding-top: clamp(40px, 5vw, 64px); border-top: 1.5px dashed rgba(29,44,158,.18); }
.country-head { position: relative; display: flex; align-items: baseline; gap: 18px; }
.country-head h3 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1; color: #0f1540; }
.country-num { font: 700 13px 'Roboto Condensed', sans-serif; letter-spacing: .14em; color: var(--sapphire); }
.country-code { margin-left: auto; font: 800 clamp(48px, 6vw, 84px)/.8 'Roboto Condensed', sans-serif; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(29,44,158,.18); }
.country .cat { animation: none; }
.country .cat-side h3 { display: none; }
.cat-days { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.cat-days b { font: 700 40px/1 'Roboto Condensed', sans-serif; letter-spacing: -.03em; white-space: nowrap; }
.cat-days small { font-size: 13px; line-height: 1.35; color: #dbe1ff; }

/* шкала этапов */
.tl { padding: 26px clamp(18px, 3vw, 34px) 24px; border-radius: 30px; background: #fff; box-shadow: 0 20px 44px -34px rgba(17,27,106,.7); border: 1px solid rgba(29,44,158,.08); }
.tl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 20px; flex-wrap: wrap; margin-bottom: 26px; }
.tl-head b { font: 700 24px 'Roboto Condensed', sans-serif; color: var(--sapphire); }
.tl-head span { font: 700 14px 'Roboto Condensed', sans-serif; color: #fff; background: var(--sapphire); padding: 7px 14px; border-radius: 999px; }
.tl-track { list-style: none; padding: 0; margin: 0; position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 14px; }
.tl-track::before { content: ''; position: absolute; left: 17px; right: 17px; top: 17px; height: 2px; background: linear-gradient(90deg, var(--sapphire) 50%, transparent 0) 0 0/10px 2px repeat-x; opacity: .35; }
.tl-track li { position: relative; display: flex; flex-direction: column; gap: 6px; }
.tl-track li i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 15px 'Roboto Condensed', sans-serif; font-style: normal;
  background: #fff; color: var(--sapphire); box-shadow: inset 0 0 0 2px var(--sapphire); position: relative; z-index: 1; margin-bottom: 6px; }
.tl-track li:last-child i { background: var(--sapphire); color: #fff; }
.tl-track li b { font: 700 16px/1.15 'Roboto Condensed', sans-serif; color: #0f1540; }
.tl-track li small { font-size: 12.5px; color: #5b6386; }
.tl-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px 24px; flex-wrap: wrap; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(29,44,158,.1); }
.tl-foot span { font-size: 14px; color: #5b6386; }

@media (max-width: 900px) {
  .cat-rail { top: 64px; gap: 4px; }
  .cat-rail span { padding: 8px 12px; font-size: 13.5px; }
  .cat-rail span small, .cat-rail span em { display: none; }
  .cat-rail i { width: 8px; }
  /* шкала — вертикально */
  .tl-track { grid-template-columns: 1fr; gap: 0; }
  .tl-track::before { left: 17px; right: auto; top: 18px; bottom: 18px; width: 2px; height: auto; background: linear-gradient(180deg, var(--sapphire) 50%, transparent 0) 0 0/2px 10px repeat-y; }
  .tl-track li { display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; row-gap: 2px; padding-bottom: 16px; }
  .tl-track li i { grid-row: span 2; margin: 0; }
  .tl-track li b { align-self: end; }
  .tl-track li:last-child { padding-bottom: 0; }
  .tl-foot .btn { width: 100%; }
}

/* общий призыв в конце раздела */
.sec-cta { display: flex; justify-content: center; align-items: center; gap: 12px 20px; flex-wrap: wrap; margin-top: 36px; text-align: center; }
.sec-cta span { font-size: 14px; color: #5b6386; }

/* ===== ПОЧЕМУ МЫ ===== */
.why-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.why-stats div { padding: 22px 22px 20px; border-radius: 26px; color: #fff; background: radial-gradient(90% 80% at 50% 30%, #4d63f0 0%, #3044d6 45%, #1d2c9e 100%); box-shadow: 0 24px 50px -30px rgba(17,27,106,.8); }
.why-stats b { display: block; font: 700 clamp(30px, 3.4vw, 44px)/1 'Roboto Condensed', sans-serif; letter-spacing: -.03em; }
.why-stats small { display: block; margin-top: 8px; font-size: 13.5px; color: #dbe1ff; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.why-item { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 26px 24px 24px; border-radius: 26px; background: #fff; border: 1px solid rgba(29,44,158,.08); box-shadow: 0 18px 40px -34px rgba(17,27,106,.7); }
.why-num { font: 700 13px 'Roboto Condensed', sans-serif; letter-spacing: .14em; color: var(--sapphire); opacity: .7; }
.why-item b { font: 700 21px/1.1 'Roboto Condensed', sans-serif; color: #0f1540; }
.why-item p { font-size: 14.5px; line-height: 1.5; color: #5b6386; }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .why-grid, .why-stats { grid-template-columns: 1fr 1fr; } .why-grid { grid-template-columns: 1fr; } .why-stats div { padding: 18px 16px; } }

/* ===== КЕЙСЫ ===== */
.cases-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.case { display: flex; flex-direction: column; border-radius: 30px; overflow: hidden; background: #fff; border: 1px solid rgba(29,44,158,.08); box-shadow: 0 20px 44px -34px rgba(17,27,106,.7); }
.case-ph { position: relative; aspect-ratio: 16/9; display: grid; place-items: center; background: radial-gradient(90% 80% at 50% 30%, #4d63f0 0%, #3044d6 45%, #1d2c9e 100%); }
.case-ph img { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(0,0,0,.45)); }
.case-ph svg { width: 40%; opacity: .4; fill: #fff; }
.case-ph .badge { background: rgba(255,255,255,.2); border: 0; color: #fff; }
.case-from { position: absolute; right: 12px; bottom: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(5,10,31,.45); color: #fff; font: 700 11.5px 'Roboto Condensed', sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.case-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; color: #0f1540; }
.case-car { font: 700 22px/1.1 'Roboto Condensed', sans-serif; color: var(--sapphire); }
.case-car small { font-size: 15px; color: #8a92b8; }
.case-client { font-size: 13px; color: #8a92b8; margin-top: -6px; }
.case-body p { font-size: 14px; line-height: 1.5; color: #3a4270; }
.case-body p em { display: block; font: 700 11px 'Roboto Condensed', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--sapphire); font-style: normal; margin-bottom: 2px; }
.case-nums { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 10px; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(29,44,158,.1); }
.case-nums dt { font-size: 11.5px; color: #8a92b8; }
.case-nums dd { margin: 2px 0 0; font: 700 17px 'Roboto Condensed', sans-serif; color: #0f1540; white-space: nowrap; }
.case-save { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: rgba(61,220,151,.16); color: #127a4c; font: 600 12.5px 'Roboto', sans-serif; }
.case .btn { align-self: flex-start; margin-top: auto; }

/* первый экран: мягкая иллюстрация — рассвет над бухтой, сопки, Золотой мост, паром с машинами.
   Лежит под стеклянными карточками направлений, сверху растворяется в сапфире. */
.h2-art { --minw: 1180; --w: 1180px; position: absolute; z-index: -2; pointer-events: none; left: 50%; translate: -50% 0;
  top: calc(var(--hz, 340px) - var(--w) * .429); width: var(--w); aspect-ratio: 1600 / 1000;
  background: url(../img/hero-scene.svg) center / 100% 100% no-repeat;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 30%, #000 72%, transparent 100%);
          mask: linear-gradient(180deg, transparent 0, #000 30%, #000 72%, transparent 100%);
  animation: h2ArtIn 1.6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes h2ArtIn { from { opacity: 0; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .h2-art { animation: none; } }
/* полоса под пейзаж между заголовком и карточками */
.h2-body:has(.h2-art) .h2-head, .h2-scene:has(.h2-art) .h2-head { margin-bottom: clamp(96px, 10vw, 170px); }
@media (max-width: 900px) { .h2-art { --minw: 680; } }

/* =====================================================================
   ПОЛИРОВКА
   ===================================================================== */
/* дети рамки получают margin:auto — в сетке это сжимало карту до 300px */
.sec > .wrap.contacts-in > *, .sec > .wrap.credit-in > * { margin-inline: 0; }
.contacts-in { align-items: stretch; }
.map-wrap iframe { display: block; }
.contact-card { justify-content: center; }

/* каталог: в карточке страны — что входит, без пустоты до кнопки */
.cat-incl { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.cat-incl li { position: relative; padding-left: 28px; font-size: 14px; line-height: 1.4; color: #e6eaff; }
.cat-incl li::before { content: ''; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.16)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/11px no-repeat; }
.country .cat-grid .car-card { min-height: 100%; }
.country .car-card .ph { aspect-ratio: auto; min-height: 190px; flex: 1; }
.country .car-card .ph img { max-height: 230px; }

/* шкала этапов: пунктир только между шагами, не дальше последнего */
.tl-track::before { display: none; }
.tl-track li:not(:last-child)::after { content: ''; position: absolute; top: 17px; left: 44px; right: -10px; height: 2px;
  background: linear-gradient(90deg, var(--sapphire) 50%, transparent 0) 0 0/10px 2px repeat-x; opacity: .35; }
@media (max-width: 900px) {
  .tl-track li:not(:last-child)::after { top: 42px; bottom: 4px; left: 17px; right: auto; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--sapphire) 50%, transparent 0) 0 0/2px 10px repeat-y; }
}
.countries { gap: clamp(40px, 5vw, 64px); }
.country + .country { padding-top: clamp(36px, 4.5vw, 56px); }

/* рубрики — в одном регистре с остальными заголовками */
.rub b { font: 700 clamp(24px, 2.4vw, 30px)/1.05 'Roboto Condensed', sans-serif; text-transform: none; letter-spacing: -.01em; }
.rub { min-height: 220px; }
.car-card b { text-transform: none; font-family: 'Roboto Condensed', sans-serif; font-weight: 700; font-size: 19px; }

/* отчёт на этапе (фото/видео) */
.tl-note { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 4px 10px 4px 8px; border-radius: 999px;
  background: rgba(51,64,196,.08); color: var(--sapphire); font: 600 11.5px/1.2 'Roboto', sans-serif; }
.tl-note::before { content: ''; width: 14px; height: 14px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233340c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 8-6 4 6 4V8z'/%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3C/svg%3E") center/contain no-repeat; }
.tl-foot span b { color: var(--sapphire); }
@media (max-width: 900px) {
  .tl-track li i { grid-row: span 3; }
  .tl-note { grid-column: 2; justify-self: start; }
}

/* =====================================================================
   ПЕРВЫЙ ЭКРАН «НАД ОБЛАКАМИ» (концепт F, по брендбуку)
   Серое небо, два слоя облаков плывут с разной скоростью, глобус «парит» между ними.
   ===================================================================== */
body:has(.hero-cl) .hdr { transform: translateY(-120%); transition: transform .35s, background .3s, padding .3s; }
body:has(.hero-cl) .hdr.past { transform: none; }

.hero-cl { --hc-ink: #0a1233; --hc-blue: #3340c4; --hc-deep: #1a2690;
  position: relative; overflow: hidden; isolation: isolate; min-height: max(760px, min(100svh, 980px));
  display: flex; flex-direction: column; align-items: center; padding: 28px 56px 36px; color: var(--hc-ink);
  background: linear-gradient(180deg, #a9b1c2 0%, #c3c9d5 45%, #dde1e9 100%); }
.hc-sky { position: absolute; inset: 0; pointer-events: none; }
.hc-clouds { --tw: 2880px; position: absolute; left: 0; right: 0; background-repeat: repeat-x; background-size: var(--tw) auto; background-position: 0 100%; animation: hcDrift linear infinite; }
.hc-back { z-index: -3; top: 0; bottom: 0; opacity: .9; background-image: url(../img/clouds-back.webp); animation-duration: 140s; }
.hc-front { z-index: -1; top: 0; bottom: -120px; background-image: url(../img/clouds-front.webp); animation-duration: 70s; }
@keyframes hcDrift { to { background-position: calc(-1 * var(--tw)) 100%; } }
.hc-mid { position: relative; z-index: -2; flex: 1 1 auto; width: 100%; min-height: 140px; display: grid; place-items: center; padding: 20px 0; }
.hc-globe { width: clamp(120px, min(20vw, 30vh), 300px); height: auto;
  filter: drop-shadow(0 26px 30px rgba(26,38,144,.35)); animation: hcFloat 6s ease-in-out infinite; }
@keyframes hcFloat { 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .hc-clouds, .hc-globe { animation: none; } }

.hero-cl a { color: inherit; }
.hc-top { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hc-logo { display: flex; align-items: center; gap: 12px; }
.hc-logo img { width: 40px; height: 40px; border-radius: 50%; }
.hc-logo span { display: flex; flex-direction: column; gap: 2px; }
.hc-logo b { font: 700 20px/1 'Roboto Condensed', sans-serif; color: var(--hc-deep); }
.hc-logo small { font-size: 12px; color: #2b3352; }
.hc-nav { display: flex; gap: 26px; font: 500 15px 'Roboto', sans-serif; }
.hc-nav a:hover, .hc-phone:hover { color: var(--hc-blue); }
.hc-right { display: flex; align-items: center; gap: 18px; }
.hc-phone { font: 700 16px 'Roboto Condensed', sans-serif; white-space: nowrap; cursor: pointer; }
.hc-btn { height: 44px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px;
  background: var(--hc-blue); color: #fff !important; font: 700 14px 'Roboto', sans-serif; cursor: pointer; white-space: nowrap; transition: background .2s, transform .2s; }
.hc-btn:hover { background: var(--hc-deep); transform: translateY(-1px); }
.hc-btn-lg { height: 56px; padding: 0 30px; font-size: 16px; box-shadow: 0 14px 30px rgba(51,64,196,.35); }
.hc-btn-ghost { background: rgba(255,255,255,.6); color: var(--hc-deep) !important; box-shadow: none; }
.hc-btn-ghost:hover { background: #fff; }

.hc-head { margin-top: clamp(48px, 7vh, 100px); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.hc-title { margin: 0; font: 700 clamp(40px, 5.3vw, 80px)/.95 'Roboto Condensed', sans-serif; letter-spacing: -.03em; text-transform: none; color: var(--hc-ink); text-wrap: balance; }
.hc-title em { font-style: normal; color: var(--hc-blue); }
.hc-lead { margin: 0; max-width: 560px; font: 400 clamp(16px, 1.3vw, 18px)/1.5 'Roboto', sans-serif; color: #232b47; }
.hc-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }

.hc-dirs { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.hc-dir { padding: 16px 20px; border-radius: 18px; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: flex; flex-direction: column; gap: 4px; transition: transform .25s, background .25s; }
.hc-dir:hover { transform: translateY(-3px); background: #fff; }
.hc-dir small { display: flex; gap: 6px; font: 700 11px 'Roboto Condensed', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--hc-blue); }
.hc-dir small i { font-style: normal; }
.hc-dir small i:not(:empty)::before { content: '· '; }
.hc-dir b { font: 700 21px/1 'Roboto Condensed', sans-serif; }
.hc-dir-blue, .hc-dir-deep { color: #fff !important; }
.hc-dir-blue { background: var(--hc-blue); } .hc-dir-deep { background: var(--hc-deep); }
.hc-dir-blue:hover { background: #2a37b4; } .hc-dir-deep:hover { background: #121c66; }
.hc-dir-blue small, .hc-dir-deep small { color: #dfe4ff; }

@media (max-width: 1100px) { .hc-nav { gap: 16px; font-size: 14px; } .hc-phone { display: none; } }
/* планшет и телефон: верхнюю строку героя заменяет общая шапка с бургером */
@media (max-width: 900px) {
  body:has(.hero-cl) .hdr { transform: none; }
  .hc-top { display: none; }
  .hero-cl { padding: 96px 16px 24px; min-height: 100svh; }
  .hc-head { margin-top: 12px; }
  .hc-dirs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-dir:nth-child(3) { grid-column: span 2; }
  .hc-clouds { --tw: 2000px; }
  body:has(.hero-cl) .hdr:not(.solid) .logo { color: #1a2690; }
  body:has(.hero-cl) .hdr:not(.solid) .logo small { color: #2b3352; }
  .hc-front { bottom: -60px; }
}
@media (max-width: 520px) {
  .hc-btns { width: 100%; } .hc-btns .hc-btn { flex: 1; padding: 0 16px; }
  .hc-dir { padding: 14px 16px; } .hc-dir b { font-size: 18px; }
}

/* герой «над облаками»: компактные размеры, глобус уходит в облака */
@media (min-width: 901px) {
  .hero-cl { min-height: max(680px, min(100svh, 1000px)); padding: clamp(20px, 1.5vw, 28px) clamp(32px, 3.4vw, 60px) clamp(24px, 2vw, 36px); }
  .hc-logo img { width: clamp(36px, 2.4vw, 44px); height: auto; }
  .hc-logo b { font-size: clamp(18px, 1.15vw, 21px); }
  .hc-logo small { font-size: clamp(11px, .72vw, 12.5px); }
  .hc-nav { gap: clamp(14px, 1.5vw, 26px); font-size: clamp(14px, .9vw, 16px); }
  .hc-phone { font-size: clamp(15px, .95vw, 17px); }
  .hc-top > .hc-right > .hc-btn { height: clamp(40px, 2.6vw, 46px); padding: 0 clamp(18px, 1.3vw, 24px); font-size: clamp(13px, .85vw, 15px); }
  .hc-head { margin-top: clamp(36px, 6vh, 80px); gap: 14px; }
  .hc-title { font-size: clamp(34px, 4.2vw, 72px); }
  .hc-lead { max-width: 30em; font-size: clamp(15px, 1vw, 17px); text-wrap: balance; }
  .hc-btn-lg { height: clamp(48px, 3.1vw, 56px); padding: 0 clamp(24px, 1.7vw, 32px); font-size: clamp(15px, .95vw, 16.5px); }
  .hc-dirs { gap: clamp(10px, .75vw, 14px); }
  .hc-dir { padding: clamp(13px, 1vw, 18px) clamp(16px, 1.2vw, 22px); border-radius: clamp(16px, 1.1vw, 20px); gap: 5px; }
  .hc-dir small { font-size: clamp(10.5px, .62vw, 11.5px); }
  .hc-dir b { font-size: clamp(17px, 1.2vw, 22px); }
}
.hc-dir { box-shadow: 0 10px 30px -18px rgba(26,38,144,.35); }
.hc-btn:focus-visible, .hc-dir:focus-visible, .hc-nav a:focus-visible { outline: 3px solid rgba(51,64,196,.45); outline-offset: 3px; }

/* глобус «тонет» в облаках: стоит по центру просвета, нижняя часть скрыта облачной грядой поверх него.
   Гряда привязана к глобусу (.hc-gw), её плотная часть всегда по центру — без просветов. */
.hc-mid { place-items: center; padding: 8px 0 0; min-height: clamp(170px, 30vh, 340px); }
.hc-gw { --g: clamp(150px, min(19vw, 30vh), 300px); --tw: calc(var(--g) * 5); position: relative; width: var(--g); aspect-ratio: 1; }
.hc-globe { width: 100%; margin: 0; position: relative; z-index: 0; }
.hc-gw::before, .hc-gw::after { content: ''; position: absolute; pointer-events: none; z-index: 1; }
/* дымка под гребнями */
.hc-gw::before { left: 50%; translate: -50% 0; bottom: calc(var(--g) * -.25); width: calc(var(--g) * 4); height: calc(var(--g) * .75);
  background: radial-gradient(50% 60% at 50% 75%, rgba(247,249,252,.98) 0, rgba(240,243,249,.85) 50%, rgba(232,236,244,0) 100%); filter: blur(10px); }
/* облака: точка 20% тайла (плотная левая гряда) — под центром глобуса; гребни доходят до середины глобуса */
.hc-gw::after { left: calc(50% - var(--tw) * 1.2); width: calc(var(--tw) * 2.4); bottom: calc(var(--g) * -.3); height: calc(var(--tw) * .2986);
  background: url(../img/clouds-front.webp) 0 100% / var(--tw) auto repeat-x;
  -webkit-mask: radial-gradient(22% 100% at 50% 100%, #000 55%, transparent 100%); mask: radial-gradient(22% 100% at 50% 100%, #000 55%, transparent 100%);
  animation: hcSway 14s ease-in-out infinite alternate; }
@keyframes hcSway { from { transform: translateX(-18px); } to { transform: translateX(18px); } }
@media (prefers-reduced-motion: reduce) { .hc-gw::after { animation: none; } }
@media (min-width: 901px) { .hero-cl { min-height: max(680px, min(100svh, 1100px)); } }

@media (max-width: 900px) {
  .hc-title { font-size: clamp(28px, 8vw, 40px); }
  .hc-lead { font-size: 15px; }
  .hc-btn-lg { height: 50px; font-size: 15px; }
  .hc-dir b { font-size: 16px; }
  .hc-dir { padding: 12px 14px; border-radius: 16px; }
  .hc-dir small { font-size: 10px; }
  .hc-mid { min-height: 190px; }
  .hc-gw { --g: 160px; }
}

/* =====================================================================
   СОЦСЕТИ: круглые кнопки с иконкой (цвет сети — в --c), список из админки
   ===================================================================== */
.hc-soc, .menu-soc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hc-soc[hidden], .menu-soc[hidden], .socials[hidden] { display: none; }
.soc { --c: #3340c4; width: 40px; height: 40px; flex-shrink: 0; display: inline-grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.72); color: var(--c) !important; box-shadow: 0 6px 18px -10px rgba(26,38,144,.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .2s, color .2s, transform .2s; }
.soc:hover { background: var(--c); color: #fff !important; transform: translateY(-2px); }
.soc svg { width: 20px; height: 20px; fill: currentColor; }
.soc-t { font: 800 13px/1 'Roboto Condensed', sans-serif; letter-spacing: -.01em; }
.soc-t3 { font-size: 10.5px; }
.soc:focus-visible { outline: 3px solid rgba(51,64,196,.45); outline-offset: 3px; }
.hc-right .hc-soc { gap: 6px; }
@media (min-width: 901px) { .hc-right .soc { width: clamp(36px, 2.4vw, 42px); height: clamp(36px, 2.4vw, 42px); } }
.hc-soc-m { display: none; justify-content: center; margin-top: 4px; }
@media (max-width: 900px) { .hc-soc-m:not([hidden]) { display: flex; } }
@media (min-width: 901px) and (max-width: 1250px) { .hc-right .hc-soc { display: none; } .hc-soc-m:not([hidden]) { display: flex; } }

/* мобильное меню */
.menu-soc { margin-top: 22px; }
.menu-soc .soc { width: 46px; height: 46px; background: rgba(255,255,255,.1); color: #fff !important; box-shadow: none; }
.menu-soc .soc:hover { background: var(--c); }

/* контакты: пилюли с иконкой и названием */
.socials .soc { width: auto; height: 38px; padding: 0 14px 0 6px; gap: 8px; display: inline-flex; border-radius: 999px; border: 0;
  background: rgba(255,255,255,.14); color: #fff !important; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.socials .soc svg, .socials .soc .soc-t { width: 28px; height: 28px; padding: 5px; box-sizing: border-box; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; }
.socials .soc .soc-t { font-size: 11px; } .socials .soc .soc-t3 { font-size: 8.5px; }
.socials .soc b { font: 600 13px 'Roboto', sans-serif; }
.socials .soc:hover { background: #fff; color: var(--sapphire) !important; }

/* оригинальные значки сетей — круглые, на белой подложке (у VK, YouTube, Авито значок на прозрачном/белом фоне) */
.soc:has(img) { padding: 0; overflow: hidden; background: #fff; }
.soc img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 50%; }
.soc:has(img):hover { background: #fff; box-shadow: 0 10px 22px -10px var(--c); }
.menu-soc .soc:has(img) { background: #fff; }
.socials .soc:has(img) { padding: 0 14px 0 5px; background: rgba(255,255,255,.14); overflow: visible; }
.socials .soc img { width: 28px; height: 28px; flex-shrink: 0; background: #fff; }
.socials .soc:has(img):hover { background: #fff; box-shadow: none; }
.soc img.soc-fit { object-fit: contain; padding: 14%; box-sizing: border-box; }

/* =====================================================================
   ШАПКА ПРИ ПРОКРУТКЕ — в стиле верхней строки первого экрана (светлая, меню без «таблетки»)
   ===================================================================== */
body:has(.hero-cl) .hdr { padding: 0; }
body:has(.hero-cl) .hdr.solid { padding: 0; background: rgba(244,246,251,.9); border-color: rgba(29,44,158,.1);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); box-shadow: 0 10px 30px -22px rgba(17,27,106,.55); }
body:has(.hero-cl) .hdr-in { width: auto; max-width: none; height: 68px; padding: 0 clamp(16px, 3.4vw, 60px); gap: 24px; }
body:has(.hero-cl) .hdr .logo img { width: 38px; height: 38px; box-shadow: none; }
body:has(.hero-cl) .hdr .logo b { font: 700 19px/1 'Roboto Condensed', sans-serif; color: #1a2690; letter-spacing: 0; }
body:has(.hero-cl) .hdr .logo small { color: #4a5275; font-size: 11.5px; margin-top: 3px; }
body:has(.hero-cl) .hdr .nav { background: none; border: 0; padding: 0; gap: clamp(4px, .6vw, 10px); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
body:has(.hero-cl) .hdr .nav a { padding: 8px 12px; color: #0a1233; font: 500 15px 'Roboto', sans-serif; letter-spacing: 0; text-transform: none; }
body:has(.hero-cl) .hdr .nav a:hover, body:has(.hero-cl) .hdr .nav a.on { background: rgba(51,64,196,.1); color: #3340c4; }
body:has(.hero-cl) .hdr .hdr-cta { height: 42px; padding: 0 22px; border: 0; border-radius: 999px; background: #3340c4; color: #fff;
  font: 700 14px 'Roboto', sans-serif; letter-spacing: 0; text-transform: none; box-shadow: 0 10px 24px -12px rgba(51,64,196,.8); }
body:has(.hero-cl) .hdr .hdr-cta:hover { background: #1a2690; }
body:has(.hero-cl) .hdr .hdr-phone { color: #1a2690; font: 700 16px 'Roboto Condensed', sans-serif; }
body:has(.hero-cl) .hdr .burger { background: #3340c4; border: 0; }
@media (max-width: 900px) {
  body:has(.hero-cl) .hdr-in { height: 62px; padding: 0 14px; }
  body:has(.hero-cl) .hdr:not(.solid) { background: transparent; box-shadow: none; }
}

/* полоса «Япония — Корея — Китай» прилипает сразу под шапкой, какой бы высоты та ни была */
.cat-rail { top: calc(var(--hdr-h, 68px) + 10px); }

/* плашка раздела — одна SVG-фигура (JS), без швов между плашкой и «ушками» */
.sec > .wrap .eyebrow.eb-svg { background: none; isolation: isolate; }
.sec > .wrap .eyebrow.eb-svg::before, .sec > .wrap .eyebrow.eb-svg::after { display: none; }
.eb-shape { position: absolute; top: 0; left: -24px; z-index: -1; overflow: visible; fill: #1a2690; pointer-events: none; }

/* =====================================================================
   ДВИЖЕНИЕ (отключается при «уменьшить движение»)
   ===================================================================== */
.scroll-bar { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 60; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #6d7ff0, #3340c4 60%, #1a2690); pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  /* появление при прокрутке: мягкий подъём с расфокусом, с задержкой каскада --d */
  .reveal { opacity: 0; transform: translateY(34px); filter: blur(6px);
    transition: opacity .9s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), transform .9s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), filter .9s ease var(--d, 0ms); }
  .reveal.in { opacity: 1; transform: none; filter: none; }
  .reveal:has(.eyebrow) { filter: none; }
  /* заголовок раздела: плашка «выезжает» сверху */
  .sec > .wrap .eyebrow { transition: translate .7s cubic-bezier(.2,.8,.2,1.2) .1s, opacity .5s .1s; }
  .sec-head.reveal:not(.in) .eyebrow { translate: 0 -100%; opacity: 0; }

  /* шкала этапов: узлы «загораются» по очереди, пунктир прорисовывается */
  .tl .tl-track li { opacity: 0; translate: 0 14px; transition: opacity .6s calc(var(--i) * 140ms + 200ms), translate .6s cubic-bezier(.2,.8,.2,1.2) calc(var(--i) * 140ms + 200ms); }
  .tl .tl-track li::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s ease calc(var(--i) * 140ms + 420ms); }
  .tl.in .tl-track li { opacity: 1; translate: none; }
  .tl.in .tl-track li::after { transform: none; }
  .tl.in .tl-track li i { animation: tlPop .6s cubic-bezier(.2,.8,.2,1.4) calc(var(--i) * 140ms + 200ms) both; }
  @keyframes tlPop { from { scale: .4; } 60% { scale: 1.15; } }
  @media (max-width: 900px) { .tl .tl-track li::after { transform: scaleY(0); transform-origin: 50% 0; } }

  /* машины в карточках въезжают при появлении */
  .cat-grid .car-card .ph img { transition: translate 1.1s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0ms) + 150ms), opacity .8s calc(var(--d, 0ms) + 150ms), transform .5s; }
  .cat-grid .car-card:not(.in) .ph img { translate: 60px 0; opacity: 0; }
  .case-ph img { transition: translate 1.1s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0ms) + 150ms), opacity .8s calc(var(--d, 0ms) + 150ms); }
  .case:not(.in) .case-ph img { translate: 50px 0; opacity: 0; }

  /* карточки — лёгкий подъём при наведении */
  .why-item, .case, .promo, .rub, .rev { transition: opacity .9s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), transform .9s cubic-bezier(.2,.7,.2,1) var(--d, 0ms), filter .9s ease var(--d, 0ms), box-shadow .3s, translate .3s; }
  .why-item:hover, .case:hover, .promo:hover, .rev:hover { translate: 0 -6px; box-shadow: 0 30px 50px -34px rgba(17,27,106,.75); }

  /* ---------- первый экран: вход ---------- */
  .hero-cl .hc-top { animation: hcDown .8s cubic-bezier(.2,.7,.2,1) both; }
  .hero-cl .hc-title { animation: hcUp 1s cubic-bezier(.2,.7,.2,1) .1s both; }
  .hero-cl .hc-title em { display: inline-block; animation: hcUp 1s cubic-bezier(.2,.7,.2,1) .25s both; }
  .hero-cl .hc-lead { animation: hcUp 1s cubic-bezier(.2,.7,.2,1) .4s both; }
  .hero-cl .hc-btns { animation: hcUp 1s cubic-bezier(.2,.7,.2,1) .52s both; }
  .hero-cl .hc-soc-m { animation: hcUp 1s cubic-bezier(.2,.7,.2,1) .62s both; }
  .hero-cl .hc-gw { animation: hcRise 1.8s cubic-bezier(.16,.8,.2,1) .35s both; }
  .hero-cl .hc-dirs > * { animation: hcUp .9s cubic-bezier(.2,.7,.2,1) both; }
  .hero-cl .hc-dirs > :nth-child(1) { animation-delay: .7s; } .hero-cl .hc-dirs > :nth-child(2) { animation-delay: .78s; }
  .hero-cl .hc-dirs > :nth-child(3) { animation-delay: .86s; } .hero-cl .hc-dirs > :nth-child(4) { animation-delay: .94s; }
  .hero-cl .hc-dirs > :nth-child(5) { animation-delay: 1.02s; }
  .hero-cl .hc-right .soc { animation: hcDown .7s cubic-bezier(.2,.7,.2,1) both; }
  .hero-cl .hc-right .soc:nth-child(2) { animation-delay: .06s; } .hero-cl .hc-right .soc:nth-child(3) { animation-delay: .12s; }
  .hero-cl .hc-right .soc:nth-child(4) { animation-delay: .18s; } .hero-cl .hc-right .soc:nth-child(5) { animation-delay: .24s; }
  @keyframes hcUp { from { opacity: 0; translate: 0 28px; filter: blur(8px); } }
  @keyframes hcDown { from { opacity: 0; translate: 0 -16px; } }
  /* глобус поднимается из облаков */
  @keyframes hcRise { from { opacity: 0; translate: 0 55%; } }

  /* ---------- первый экран: параллакс при прокрутке (--sy из JS) ---------- */
  .hero-cl .hc-back { translate: 0 calc(var(--sy, 0) * .18px); }
  .hero-cl .hc-front { translate: 0 calc(var(--sy, 0) * -.12px); }
  .hero-cl .hc-head { translate: 0 calc(var(--sy, 0) * .32px); opacity: calc(1 - var(--sy, 0) / 700); }
  /* глобус «тонет» в облаках, пока прокручиваем */
  .hero-cl .hc-globe { translate: 0 calc(var(--sy, 0) * .28px); }

  /* главная кнопка — блик раз в несколько секунд */
  .hc-btns .hc-btn:not(.hc-btn-ghost) { position: relative; overflow: hidden; isolation: isolate; }
  .hc-btns .hc-btn:not(.hc-btn-ghost)::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%) -150% 0 / 200% 100% no-repeat;
    animation: hcShine 4.5s ease-in-out 2s infinite; }
  @keyframes hcShine { 0%, 60% { background-position: -150% 0; } 100% { background-position: 250% 0; } }
}

/* меню ровно по центру страницы: три колонки 1fr · auto · 1fr (логотип и правый блок разной ширины) */
@media (min-width: 1101px) {
  body:has(.hero-cl) .hdr-in, .hc-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
  body:has(.hero-cl) .hdr .nav { margin: 0; justify-self: center; }
  body:has(.hero-cl) .hdr-right, .hc-top .hc-right { justify-self: end; }
  .hc-top .hc-logo, body:has(.hero-cl) .hdr .logo { justify-self: start; }
}
body:has(.hero-cl) .hdr.solid { background: rgba(244,246,251,.97); }
@media (prefers-reduced-motion: no-preference) {
  .reveal { transition-duration: .75s; }
  .reveal:not(.in) { filter: blur(4px); }
}
/* телефон: без размытия (тяжело для слабых устройств) и с меньшим сдвигом */
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  .reveal, .reveal:not(.in) { filter: none; }
  .reveal:not(.in) { transform: translateY(22px); }
}