/* ════════════════════════════════════════════
   АвтоПарк — «обвязка» сайта: топбар + шапка + футер
   Делает страницу частью многостраничного сайта.
   Подключать: <link rel="stylesheet" href="site-chrome.css">
   ════════════════════════════════════════════ */

/* ── ВЕРХНЯЯ УТИЛИТАРНАЯ ПАНЕЛЬ ── */
.site-topbar{background:var(--navy);color:#fff;position:relative;z-index:201}
.site-topbar-in{max-width:1280px;margin:0 auto;padding:0 64px;height:42px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.stb-left{font-size:12.5px;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:10px;line-height:100%;white-space:nowrap}
.stb-left .dot{width:2px;height:11px;border-radius:2px;background:rgba(127,176,230,.85);flex-shrink:0}
.stb-right{display:flex;align-items:center;gap:22px}
.stb-link{font-size:12.5px;color:rgba(255,255,255,.7);display:flex;align-items:center;gap:7px;line-height:100%;transition:color .18s;white-space:nowrap}
.stb-link:hover{color:#fff}
.stb-link svg{width:13px;height:13px;stroke:#7FB0E6;fill:none;stroke-width:1.8}
.stb-muted{color:rgba(255,255,255,.5);cursor:default}
.stb-sep{width:1px;height:14px;background:rgba(255,255,255,.16)}

/* ── ШАПКА (основная навигация) ── */
.site-header{position:sticky;top:0;z-index:200;background:rgba(251,250,248,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.site-header-in{max-width:1280px;margin:0 auto;padding:0 64px;height:74px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.sh-logo{font-family:'Geologica',sans-serif;font-size:23px;font-weight:700;letter-spacing:-.015em;color:var(--ink);flex-shrink:0}
.sh-logo strong{color:var(--blue)}
.sh-nav{display:flex;gap:26px;align-items:center}
.sh-nav a{font-size:14px;font-weight:500;color:var(--mute);transition:color .18s;white-space:nowrap;padding:6px 0;position:relative}
.sh-nav a:hover{color:var(--ink)}
.sh-nav a.active{color:var(--ink)}
.sh-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--blue);border-radius:2px}
.sh-right{display:flex;align-items:center;gap:16px;flex-shrink:0}
.sh-phone{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.sh-cta{background:var(--blue);color:#fff;font-size:13px;font-weight:600;padding:11px 22px;border-radius:10px;transition:background .18s;line-height:100%;white-space:nowrap}
.sh-cta:hover{background:var(--blue-d)}
.sh-burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;flex-shrink:0}
.sh-burger span{width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}

@media (max-width:1080px){
  .sh-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);padding:6px 64px 16px;box-shadow:0 18px 40px rgba(14,17,22,.08)}
  .sh-nav.open{display:flex}
  .sh-nav a{padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
  .sh-nav a.active::after{display:none}
  .sh-burger{display:flex}
}
@media (max-width:991px){
  .site-topbar-in,.site-header-in{padding:0 32px}
  .sh-nav{padding:6px 32px 16px}
  .stb-left{display:none}
  .stb-right{width:100%;justify-content:space-between;gap:14px}
}
@media (max-width:767px){
  .site-topbar{display:none}
  .site-header-in{padding:0 20px;height:64px}
  .sh-nav{padding:6px 20px 16px}
  .sh-phone{display:none}
}

/* ════════ ФУТЕР (карта сайта + реквизиты) ════════ */
.site-footer{background:#050F22;color:#fff;position:relative;overflow:hidden;border-top:1px solid rgba(127,176,230,.16)}
.site-footer .sf-grid-bg{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1.2px,transparent 1.2px);background-size:26px 26px;pointer-events:none}
.site-footer .sf-glow{position:absolute;top:-160px;right:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(26,95,168,.28) 0%,rgba(26,95,168,0) 70%);pointer-events:none}
.site-footer a{color:inherit;text-decoration:none}
.sf-main{max-width:1280px;margin:0 auto;padding:64px 64px 40px;position:relative;z-index:1;display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:48px}
.sf-brand-logo{font-family:'Geologica',sans-serif;font-size:24px;font-weight:600;color:#fff;margin-bottom:14px}
.sf-brand-logo strong{color:#7FB0E6;font-weight:600}
.sf-brand-desc{font-size:13.5px;color:rgba(255,255,255,.52);line-height:170%;margin-bottom:22px;max-width:280px}
.sf-contacts{display:flex;flex-direction:column;gap:13px;margin-bottom:24px}
.sf-contact{display:flex;gap:12px;align-items:flex-start}
.sf-contact-ic{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sf-contact-ic svg{width:16px;height:16px;stroke:#7FB0E6;fill:none;stroke-width:1.7}
.sf-contact-tx{display:flex;flex-direction:column;gap:2px;padding-top:1px}
.sf-contact-tx .v{font-size:14px;font-weight:600;color:#fff;line-height:130%}
.sf-contact-tx .v a:hover{color:#B5D4F4}
.sf-contact-tx .l{font-size:11.5px;color:rgba(255,255,255,.4);line-height:135%}
.sf-social{display:flex;gap:9px}
.sf-sc{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;line-height:1;transition:background .18s,border-color .18s}
.sf-sc:hover{background:rgba(127,176,230,.16);border-color:rgba(127,176,230,.4)}
.sf-sc svg{width:17px;height:17px;fill:rgba(255,255,255,.7)}
.sf-sc:hover svg{fill:#fff}
.sf-sc-max{width:auto;min-width:38px;padding:0 13px;font-family:'Geologica',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-indent:.08em;color:rgba(255,255,255,.7)}
.sf-sc-max:hover{color:#fff}
.sf-col h4{font-family:'Geologica',sans-serif;font-size:11px;font-weight:600;color:rgba(255,255,255,.4);letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}
.sf-col ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.sf-col ul a{font-size:13.5px;color:rgba(255,255,255,.62);transition:color .18s;line-height:140%}
.sf-col ul a:hover{color:#fff}
.sf-fz{margin-top:24px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}
.sf-fz-label{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.38);margin-bottom:11px}
.sf-fz-row{display:flex;gap:18px}
.sf-fz-item{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:#fff;line-height:100%}
.sf-fz-item svg{width:14px;height:14px;stroke:#6FBF93;fill:none;stroke-width:2.6}
.sf-requisites{max-width:1280px;margin:0 auto;padding:26px 64px;position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:8px 28px}
.sf-req{display:flex;gap:8px;align-items:baseline;font-size:12px;line-height:150%}
.sf-req .k{color:rgba(255,255,255,.38);font-weight:500}
.sf-req .val{color:rgba(255,255,255,.68);font-weight:600}
.sf-req .ph,.site-footer .ph{background:rgba(127,176,230,.16);color:#cfe2f6;border-radius:4px;padding:1px 6px;font-weight:600}
.sf-bottom{max-width:1280px;margin:0 auto;padding:20px 64px 30px;position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.sf-legal-links{display:flex;gap:20px;flex-wrap:wrap}
.sf-legal-links a{font-size:12.5px;color:rgba(255,255,255,.5);transition:color .18s;line-height:140%}
.sf-legal-links a:hover{color:#fff;text-decoration:underline;text-underline-offset:2px}
.sf-copy{font-size:12.5px;color:rgba(255,255,255,.4);line-height:150%}

@media (max-width:991px){
  .sf-main{grid-template-columns:1fr 1fr;gap:36px;padding:52px 32px 36px}
  .sf-requisites{padding:24px 32px}
  .sf-bottom{padding:20px 32px 28px}
}
@media (max-width:560px){
  .sf-main{grid-template-columns:1fr;gap:32px;padding:44px 20px 32px}
  .sf-requisites{padding:22px 20px;gap:8px 18px}
  .sf-bottom{flex-direction:column;align-items:flex-start;gap:14px;padding:20px 20px 26px}
}