/* ======================================================
   BodyFit — общий каркас сайта (shell)
   Токены дизайн-системы v4.0: light theme, красный градиент, Panton
   ====================================================== */

:root{
  --brand-red-deep:#a00e00;
  --brand-red-bright:#e00000;
  --brand-gradient:linear-gradient(90deg,#a00e00,#e00000);
  --brand-gradient-diag:linear-gradient(135deg,#a00e00,#e00000);
  --bg-page:linear-gradient(180deg,#eeeef0 0%,#f3f3f5 100%);
  --bg-card:#fff;
  --bg-section-alt:#f4f4f2;
  --text-primary:#1a1a1a;
  --text-secondary:#4a4a4a;
  --text-tertiary:#6a6a6a;
  --text-muted:#777;
  --text-faint:#888;
  --border-card:rgba(0,0,0,0.08);
  --border-row:rgba(0,0,0,0.06);
  --border-brand:rgba(160,14,0,0.15);
  --radius-card:16px;
  --radius-small:12px;
  --radius-pill:999px;
  --radius-tiny:4px;
  --shadow-card:0 1px 8px rgba(0,0,0,0.04);
  --shadow-card-elevated:0 2px 16px rgba(0,0,0,0.06);
  --shadow-photo:0 2px 14px rgba(0,0,0,0.08);
  --shadow-featured:0 4px 20px rgba(160,14,0,0.1);
  --header-h:60px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;}
body{
  background:var(--bg-page);
  background-attachment:fixed;
  font-family:'Panton','Inter','Helvetica Neue',Arial,sans-serif;
  color:var(--text-primary);
  isolation:isolate;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

a{color:inherit;}

/* ===== HEADER / NAV ===== */
.site-header{
  position:sticky; top:0; z-index:100;
  height:var(--header-h);
  background:var(--brand-gradient);
  display:flex; align-items:center; gap:18px;
  padding:0 clamp(16px,4vw,32px);
  overflow:hidden;
  box-shadow:0 2px 14px rgba(160,14,0,0.18);
}
.site-header::before{
  content:""; position:absolute; inset:0;
  background:rgba(255,255,255,0.06); pointer-events:none; z-index:0;
}
.brand{
  display:inline-flex; align-items:center; gap:12px;
  position:relative; z-index:2; text-decoration:none; flex-shrink:0;
}
.brand-logo{
  width:38px; height:38px; border-radius:8px;
  overflow:hidden; flex-shrink:0; background:#fff;
}
.brand-logo img{width:100%; height:100%; object-fit:cover; display:block;}
.brand-name{
  font-weight:900; font-size:15px; letter-spacing:0.14em;
  text-transform:uppercase; color:#fff; line-height:1;
}

/* Desktop nav */
.nav{
  margin-left:auto; position:relative; z-index:2;
  display:flex; align-items:center; gap:4px;
}
.nav a{
  display:inline-flex; align-items:center; height:36px;
  padding:0 14px; border-radius:8px;
  font-weight:700; font-size:12px; letter-spacing:0.08em;
  text-transform:uppercase; text-decoration:none;
  color:rgba(255,255,255,0.82);
  transition:background 0.2s, color 0.2s;
  white-space:nowrap;
}
.nav a:hover{color:#fff; background:rgba(255,255,255,0.12);}
.nav a.active{color:#fff; background:rgba(255,255,255,0.18);}
.nav a.cta{
  background:#fff; color:var(--brand-red-deep);
  margin-left:6px;
}
.nav a.cta:hover{background:#fff; color:var(--brand-red-bright);}

/* Burger */
.burger{
  display:none; position:relative; z-index:3;
  margin-left:auto;
  width:42px; height:42px; border:none; background:none;
  cursor:pointer; align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
}
.burger span{
  display:block; width:22px; height:2px; border-radius:2px;
  background:#fff; transition:transform 0.28s, opacity 0.22s;
}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Mobile drawer */
.nav-overlay{
  position:fixed; inset:0; top:var(--header-h);
  background:rgba(20,20,22,0.42);
  opacity:0; visibility:hidden; transition:opacity 0.28s, visibility 0.28s;
  z-index:90;
}
.nav-overlay.open{opacity:1; visibility:visible;}
.nav-drawer{
  position:fixed; top:var(--header-h); right:0;
  width:min(80vw,320px); height:calc(100vh - var(--header-h));
  background:#fff; z-index:95;
  transform:translateX(100%); transition:transform 0.32s cubic-bezier(0.4,0,0.2,1);
  display:flex; flex-direction:column; padding:14px;
  box-shadow:-4px 0 24px rgba(0,0,0,0.14);
  overflow-y:auto;
}
.nav-drawer.open{transform:translateX(0);}
.nav-drawer a{
  display:flex; align-items:center; height:52px;
  padding:0 16px; border-radius:12px;
  font-weight:700; font-size:14px; letter-spacing:0.06em;
  text-transform:uppercase; text-decoration:none;
  color:var(--text-secondary);
  border-bottom:1px solid var(--border-row);
  transition:background 0.2s, color 0.2s;
}
.nav-drawer a:last-child{border-bottom:none;}
.nav-drawer a:hover{color:var(--brand-red-deep); background:rgba(160,14,0,0.05);}
.nav-drawer a.active{color:var(--brand-red-deep); background:rgba(160,14,0,0.07);}
.nav-drawer a.cta{
  margin-top:12px; justify-content:center; color:#fff;
  background:var(--brand-gradient); border:none;
}

/* ===== MAIN wrapper ===== */
.site-main{flex:1 0 auto; width:100%;}
.wrap{max-width:1200px; margin:0 auto; width:100%;}

/* ===== Section label (красная чёрточка + капс) ===== */
.section-label{display:flex; align-items:center; gap:12px; margin:0 0 18px;}
.section-label::before{
  content:''; display:block; width:30px; height:2px;
  background:var(--brand-gradient);
}
.section-label span{
  font-weight:700; font-size:11px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--text-secondary);
}

/* ===== FOOTER ===== */
.site-footer{
  flex-shrink:0; margin-top:56px;
  background:#141416; color:rgba(255,255,255,0.72);
  padding:40px clamp(16px,4vw,32px) 28px;
}
.footer-inner{
  max-width:1200px; margin:0 auto;
  display:flex; flex-wrap:wrap; gap:36px 56px;
  align-items:flex-start; justify-content:space-between;
}
.footer-brand{display:flex; align-items:center; gap:12px;}
.footer-logo{width:40px; height:40px; border-radius:8px; overflow:hidden; background:#fff; flex-shrink:0;}
.footer-logo img{width:100%; height:100%; object-fit:cover; display:block;}
.footer-brand-name{font-weight:900; font-size:16px; letter-spacing:0.14em; text-transform:uppercase; color:#fff;}
.footer-col h4{
  font-weight:700; font-size:11px; letter-spacing:0.2em;
  text-transform:uppercase; color:rgba(255,255,255,0.5); margin-bottom:14px;
}
.footer-col a, .footer-col p{
  display:block; font-size:14px; line-height:1.9;
  color:rgba(255,255,255,0.72); text-decoration:none;
}
.footer-col a:hover{color:#fff;}
.footer-bottom{
  max-width:1200px; margin:32px auto 0; padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.1);
  font-size:12px; color:rgba(255,255,255,0.4);
}

/* ===== Breakpoints ===== */
@media (max-width:900px){
  .nav{display:none;}
  .burger{display:flex;}
}
@media (max-width:540px){
  :root{--header-h:56px;}
  .brand-name{font-size:13px; letter-spacing:0.1em;}
  .brand-logo{width:34px; height:34px;}
}