:root {
  --primary: #7c7c7c;
  --accent: #e67e22;
  --bg: #ffffff;
  --text: #2d2d2d;
  --surface: #f5f7fa;
  --muted: #7f8c8d;
  --hero-from: #7c7c7c;
  --hero-to: #e67e22;
  --hero-text: #ffffff;
  --cta-text: #ffffff;
  --on-primary: #ffffff;
  --on-accent: #ffffff;
  --radius: 0px;
  --space: 0.75rem;
  --maxw: 1140px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
  --heading-font: 'HelveticaNeue', system-ui, sans-serif;
  --body-font: 'HelveticaNeue', system-ui, sans-serif;
}
* { box-sizing: border-box; }
.z4n-body { margin:0; font-family: var(--body-font); color: var(--text); background: var(--bg); line-height:1.6; }
h1,h2,h3 { font-family: var(--heading-font); line-height:1.2; }
img,svg { max-width:100%; }
a { color: var(--primary); }

.z4n-header { position:sticky; top:0; z-index:10; background: var(--surface); box-shadow: var(--shadow); }
.z4n-header-contacts { display:flex; gap:1.5rem; justify-content:flex-end; font-size:.8rem; color: var(--muted); padding:.4rem calc(var(--space) * 1.5); border-bottom:1px solid rgba(0,0,0,.05); }
.z4n-header-main { display:flex; align-items:center; justify-content:space-between; gap:1rem; max-width: var(--maxw); margin:0 auto; padding:.75rem calc(var(--space) * 1.5); }
.z4n-nav { display:flex; gap:.5rem; flex-wrap:wrap; }
.z4n-nav-link { text-decoration:none; color: var(--text); font-weight:500; padding:.5rem .85rem; border-radius: var(--radius); transition: background .15s, color .15s; }
.z4n-nav-link:hover { background: rgba(0,0,0,.05); }
.z4n-nav-link.active { color: var(--on-primary); background: var(--primary); }

.z4n-hero { position:relative; overflow:hidden; color: var(--hero-text); text-align:center; padding: calc(var(--space) * 4) calc(var(--space) * 1.5); background: linear-gradient(135deg, var(--hero-from), var(--hero-to)); }
.z4n-hero::after { content:""; position:absolute; inset:0; background-image: url("./assets/hero-bg.svg"); background-size:cover; background-position:center; opacity:.35; pointer-events:none; }
.z4n-hero > * { position:relative; z-index:1; max-width:820px; margin-left:auto; margin-right:auto; }
.z4n-hero h1 { font-size: clamp(2rem, 5vw, 3.25rem); margin:0 0 .75rem; }
.z4n-hero p { font-size:1.125rem; opacity:.95; margin:.5rem auto; }
.z4n-hero-card { background: rgba(255,255,255,.12); backdrop-filter: blur(4px); border-radius: var(--radius); padding: calc(var(--space) * 2.5); margin: calc(var(--space) * 2) auto; max-width:760px; }

.z4n-section { max-width: var(--maxw); margin:0 auto; padding: calc(var(--space) * 3) calc(var(--space) * 1.5); }
.z4n-section h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); margin:0 0 1.5rem; color: var(--primary); text-align:center; }

.z4n-section ul, .z4n-section ol { list-style:none; padding:0; margin:0; display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space); }
.z4n-section li { background: var(--surface); border-radius: var(--radius); padding: calc(var(--space) * 1.5); box-shadow: var(--shadow); position:relative; padding-left: calc(var(--space) * 1.5 + 40px); transition: transform .15s; }
.z4n-section li:hover { transform: translateY(-4px); }
.z4n-section li::before { content:""; position:absolute; left: var(--space); top: calc(var(--space) * 1.5); width:28px; height:28px; background: url("./assets/icon-feature.svg") no-repeat center / contain; }
.z4n-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space); }
.z4n-grid > div { background: var(--surface); border-radius: var(--radius); padding: calc(var(--space) * 1.5); box-shadow: var(--shadow); border-top:3px solid var(--accent); }

.z4n-about { display:grid; grid-template-columns: 120px 1fr; gap: calc(var(--space) * 1.5); align-items:center; background: var(--surface); border-radius: var(--radius); padding: calc(var(--space) * 2); box-shadow: var(--shadow); }
.z4n-about::before { content:""; display:block; width:120px; height:120px; background: url("./assets/about-panel.svg") no-repeat center / contain; }

.z4n-cta { text-align:center; background: linear-gradient(135deg, var(--accent), var(--primary)); color: var(--cta-text); border-radius: var(--radius); padding: calc(var(--space) * 2.5); }
.z4n-cta a, .z4n-hero a, .z4n-section a.z4n-btn { display:inline-block; }

.z4n-btn, .z4n-hero a, .z4n-cta a, .z4n-section form button, .z4n-section a[href$="contacts.html"] {
  display:inline-block; margin-top:1rem; padding:.8rem 1.6rem; border:0; border-radius: var(--radius);
  background: var(--accent); color: var(--on-accent); font-weight:600; text-decoration:none; cursor:pointer; transition: filter .15s, transform .15s;
}
.z4n-btn:hover, .z4n-hero a:hover, .z4n-cta a:hover, .z4n-section form button:hover, .z4n-section a[href$="contacts.html"]:hover { filter: brightness(1.08); transform: translateY(-2px); }

.z4n-section form { display:grid; gap:.75rem; max-width:480px; margin:1.5rem auto 0; }
.z4n-section input, .z4n-section textarea { padding:.75rem 1rem; border:1px solid rgba(0,0,0,.15); border-radius: var(--radius); font: inherit; background: var(--bg); color: var(--text); }
.z4n-section input:focus, .z4n-section textarea:focus { outline:none; border-color: var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.z4n-section address { font-style:normal; text-align:center; color: var(--muted); }
.z4n-map { width:100%; height:340px; border:0; border-radius: var(--radius); margin-top: var(--space); box-shadow: var(--shadow); display:block; }

.z4n-breadcrumb { max-width: var(--maxw); margin:0 auto; padding: var(--space) calc(var(--space) * 1.5); color: var(--muted); font-size:.875rem; }
.z4n-breadcrumb a { color: var(--muted); }
.z4n-breadcrumb ul { list-style:none; display:flex; gap:.5rem; padding:0; margin:0; }

.z4n-footer { background: var(--text); color: var(--bg); padding: calc(var(--space) * 3) calc(var(--space) * 1.5); margin-top: calc(var(--space) * 3); }
.z4n-footer > div { max-width: var(--maxw); margin:0 auto .5rem; font-size:.9rem; opacity:.85; }

@media (max-width:768px) {
  .z4n-header-main { flex-direction:column; gap:.75rem; }
  .z4n-header-contacts { justify-content:center; }
  .z4n-nav { justify-content:center; }
  .z4n-about { grid-template-columns: 1fr; text-align:center; }
  .z4n-about::before { margin:0 auto; }
}