:root{
  --bg:#f6f7f9;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --line:#e6e8ee;
  --shadow:0 6px 18px rgba(17,24,39,.06);
  --shadow2:0 10px 26px rgba(17,24,39,.10);
  --radius:10px;
  --font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --max:1120px;

  /* light neutral header */
  --top-bg:#4a4f55;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
}

/* ===== Header ===== */
header.top{
  background:var(--top-bg);
}
.top-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.top-inner h1{
  margin:0;
  font-size:18px;
  color:#f8fafc;
  font-weight:600;
}

nav.menu a{
  color:#e5e7eb;
  margin-left:16px;
  text-decoration:none;
  font-size:15px;
}
nav.menu a:hover{
  text-decoration:underline;
}
nav.menu a.active{
  color:#ffffff;
}

/* ===== Common button ===== */
.btn{
  padding:8px 14px;
  font-size:13px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:8px;
  cursor:pointer;
}

/* ===== Social footer ===== */
.social-footer{
  max-width:var(--max);
  margin:24px auto 0;
  padding:0 16px 48px;
  display:flex;
  gap:14px;
  justify-content:center;
}
.social-footer .icon{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
}
.social-footer .icon svg{
  width:18px;
  height:18px;
  fill:#374151;
}
.social-footer .icon:hover{
  background:#f1f3f6;
}

/* =========================================================
   Burger + dropdown menu (common for all pages)
   ========================================================= */

.menu-toggle{
  display:none;
  width:40px;
  height:40px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  color:#f8fafc;
  cursor:pointer;
  padding:10px;
  line-height:0;
}
.menu-toggle span{
  display:block;
  width:100%;
  height:2px;
  margin:4px 0;
  background:currentColor;
  opacity:.95;
}

/* mobile header: burger + animated dropdown menu */
@media (max-width:600px){
  .top-inner{
    flex-wrap:wrap;
    gap:10px;
  }

  .menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-left:auto;
  }

  header.top nav.menu{
    display:block;              /* всегда в DOM */
    width:100%;
    margin-top:10px;

    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(-4px);

    transition:
      max-height .25s ease,
      opacity .2s ease,
      transform .2s ease;
  }

  body.menu-open header.top nav.menu{
    max-height:400px;           /* хватает для меню */
    opacity:1;
    transform:translateY(0);
  }

  /* vertical links */
  header.top nav.menu a{
    display:block;
    margin:0;
    padding:10px 0;
  }
}
/* a11y: visible keyboard focus (works on light backgrounds too) */
.menu-toggle:focus-visible,
nav.menu a:focus-visible{
  outline: 2px solid rgba(17,24,39,.9);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.8);
  border-radius: 10px;
}

/* ===== Back button (shared) ===== */
.back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:10px 14px;
  margin:10px 0;

  font-size:13px;
  font-weight:500;
  text-decoration:none;

  color:var(--text);
  background:#ffffff;

  border:1px solid var(--line);
  border-radius:999px;
  box-shadow:var(--shadow);

  transition:
    box-shadow .15s ease,
    transform .12s ease,
    background .12s ease;
}

.back-link:hover{
  background:#f9fafb;
  box-shadow:var(--shadow2);
  transform:translateY(-1px);
}

.back-link:active{
  transform:translateY(0);
}
/* =========================
   CONTACT PAGE
   ========================= */

.page-contact main {
  max-width: 640px;
  margin: 40px auto 0;
  padding: 0 20px;
}

.contact-card {
  background: var(--panel-bg, #f5f5f5);
  border-radius: 16px;
  padding: 24px;
}

.contact-lead {
  margin-bottom: 20px;
  opacity: 0.75;
}

.contact-form {
  display: grid;
  gap: 16px;
}

.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.contact-form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-form .label {
  font-size: 13px;
  opacity: 0.8;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-family: inherit;
}

.contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-actions {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}

@media (max-width: 640px) {
  .contact-row {
    grid-template-columns: 1fr;
  }
}
/* CONTACT MICRO-POLISH */

.contact-status {
  font-size: 13px;
  opacity: 0.75;
  min-height: 1.2em;
}

.contact-alt {
  margin-top: 16px;
  font-size: 13px;
  opacity: 0.6;
}

.contact-alt a {
  color: inherit;
}