/* === Фирменные токены: тёплый монохром + один рыжий акцент === */
:root{
  --bg:#f6f4ef;
  --surface:#ffffff;
  --surface-2:#efece4;
  --text:#221e19;
  --muted:#716a5e;
  --border:#e1dbcf;
  --brand:#f04a0c;
  --brand-2:#ff7a36;
  --accent:#f04a0c;
  --grad:linear-gradient(135deg,#f04a0c,#ff8a3d);
  --radius-1:10px; --radius-2:14px; --radius-3:16px;
  --shadow-1:0 1px 2px rgba(34,30,25,.05);
  --shadow-2:0 2px 6px rgba(34,30,25,.05);
  --shadow-3:0 6px 16px rgba(34,30,25,.06);
  --rail-w:264px;
}

html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--text); font-size:15px; line-height:1.6; }
img{ display:block; max-width:100%; height:auto; }
h1,h2,h3{ letter-spacing:-.02em; line-height:1.08; }
h1{ font-size:clamp(2.6rem,5.4vw,4.2rem); font-weight:800; margin:0 0 .5em; }
h2{ font-size:clamp(1.85rem,3.4vw,2.6rem); font-weight:800; margin:0 0 .35em; }
h3{ font-size:1.15rem; font-weight:700; margin:0; }
section[id]{ scroll-margin-top:76px; }

/* === Левая колонка-рейл === */
.rail{
  position:fixed; inset:0 auto 0 0; width:var(--rail-w); z-index:60;
  background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:26px 24px;
}
.rail-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.logo{ display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:800; font-size:1.15rem; line-height:1.1; }
.logo small{ display:block; font-size:.68rem; font-weight:500; color:var(--muted); letter-spacing:.04em; }
.logo-paw{ width:30px; height:30px; color:var(--brand); flex:none; }

.burger{ display:none; width:42px; height:42px; border:1px solid var(--border); border-radius:var(--radius-1); background:var(--surface); cursor:pointer; padding:11px; flex-direction:column; justify-content:space-between; }
.burger span{ display:block; height:2px; background:var(--text); border-radius:2px; }

.rail-nav{ display:flex; flex-direction:column; gap:2px; margin-top:44px; }
.rail-nav a{
  display:flex; align-items:center; min-height:42px; padding:8px 12px;
  color:var(--text); text-decoration:none; font-weight:600; font-size:.95rem;
  border-radius:var(--radius-1); border:1px solid transparent;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.rail-nav a:hover{ background:var(--surface-2); border-color:var(--border); }
.rail-nav .rail-cta{
  margin-top:14px; justify-content:center;
  background:var(--grad); color:#fff; border:none;
}
.rail-nav .rail-cta:hover{ filter:brightness(1.06); background:var(--grad); }

.rail-foot{ margin-top:auto; padding-top:20px; border-top:1px solid var(--border); }
.rail-phone{ display:flex; align-items:center; gap:9px; color:var(--text); font-weight:700; text-decoration:none; font-size:.98rem; }
.rail-phone svg{ width:18px; height:18px; color:var(--brand); flex:none; }
.rail-note{ margin:6px 0 0; font-size:.8rem; color:var(--muted); }

.main{ margin-left:var(--rail-w); }
.container{ max-width:1120px; margin:0 auto; padding-inline:clamp(20px,4vw,56px); }
.container.narrow{ max-width:820px; }
.section{ padding:clamp(72px,9vw,116px) 0; border-top:1px solid var(--border); }
.hero{ border-top:none; }

/* Декор: направляющие и точечный паттерн */
.guides{
  background-image:
    linear-gradient(to right, rgba(34,30,25,.045) 1px, transparent 1px),
    radial-gradient(rgba(34,30,25,.10) 1px, transparent 1.3px);
  background-size:clamp(72px,10vw,132px) 100%, 24px 24px;
}
.dots{
  background-image:radial-gradient(rgba(34,30,25,.09) 1px, transparent 1.3px);
  background-size:22px 22px;
}

/* === Герой ===