/* ===== Global Base (no inline styles anywhere) ===== */
:root{
  --bg:#0c0f13;
  --bg-soft:#11151b;
  --text:#e7edf3;
  --muted:#a8b3bf;
  --brand:#7fffd4;        /* aquamarine accent */
  --brand-2:#4bd3ff;      /* cool cyan */
  --danger:#ff5a7a;

  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --container:1120px;

  --step--1: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
  --step-0: clamp(1rem, 0.95rem + 0.5vw, 1.25rem);
  --step-1: clamp(1.25rem, 1.1rem + 1.2vw, 1.8rem);
  --step-2: clamp(1.6rem, 1.3rem + 2.2vw, 2.35rem);
  --step-3: clamp(2rem, 1.5rem + 3.2vw, 3rem);
}

@font-face{
  font-family:"Inter";
  src:url("../fonts/Inter-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("../fonts/Inter-SemiBold.ttf") format("truetype");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

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

html,body{ height:100%; background: var(--bg); color: var(--text); }
body{
  margin:0;
  font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Global image rule: never exceed 350px width */
img{
  display:block;
  width:100%;
  max-width:350px;
  height:auto;
  border-radius:12px;
}

/* Layout */
.container{ width:min(100% - 32px, var(--container)); margin-inline:auto; }

.section-pad{ padding: clamp(56px, 6vw, 96px) 0; }

/* Header */
.site-header{
  position:sticky; top:0; z-index:1000;
  background: linear-gradient(180deg, rgba(12,15,19,.95), rgba(12,15,19,.8));
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-wrap{ display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:16px; }
.brand{
  font-weight:700; letter-spacing:.4px; color:var(--text); text-decoration:none;
  transition:opacity .2s ease;
}
.brand:hover{ opacity:.85; }

.nav-list{ display:flex; gap:20px; list-style:none; margin:0; padding:0; }
.nav-list a{
  color:var(--text); text-decoration:none; font-size:var(--step--1);
  padding:8px 10px; border-radius:10px; transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.nav-list a:hover{ background:rgba(255,255,255,.06); transform: translateY(-1px); }
.nav-list a.is-active{ color:var(--brand); }

.burger{
  display:none; background:none; border:0; cursor:pointer; padding:6px; border-radius:10px;
}
.burger:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }
.burger-bar{
  display:block; width:26px; height:2px; background:var(--text); margin:6px 0; border-radius:4px;
}

/* Mobile drawer */
.mobile-drawer{
  background:var(--bg-soft);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mobile-list{ list-style:none; margin:0; padding:10px 16px 16px; display:grid; gap:8px; }
.mobile-list a{
  display:block; padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--text);
  background:rgba(255,255,255,.03); transition: background-color .2s ease, transform .15s ease;
}
.mobile-list a:hover{ background:rgba(255,255,255,.06); transform: translateY(-1px); }

/* Main & skip */
.site-main{ outline:none; }
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:16px; top:16px; width:auto; height:auto; padding:10px 12px;
  background:var(--brand-2); color:#001018; border-radius:10px; z-index:2000;
}

/* Buttons */
.btn{
  display:inline-block; text-decoration:none; border-radius:12px; padding:12px 16px;
  font-weight:600; border:1px solid rgba(255,255,255,.12);
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.btn:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; }
.btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-primary{ background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#001018; border-color:transparent; }
.btn-ghost{ background:transparent; color:var(--text); }

/* Footer */
.site-footer{
  border-top:1px solid rgba(255,255,255,.08);
  background: radial-gradient(1000px 400px at 50% 120%, rgba(75,211,255,0.08), transparent 60%),
              linear-gradient(180deg, #0b0e12, #0c0f13 60%);
  padding:36px 0;
}
.footer-grid{
  display:grid; gap:18px;
  grid-template-columns: 1fr;
}
.foot-brand{ font-weight:700; font-size:var(--step-0); margin:0 0 6px; }
.foot-links{ list-style:none; margin:0; padding:0; display:flex; gap:14px; flex-wrap:wrap; }
.foot-links a{ color:var(--muted); text-decoration:none; }
.foot-links a:hover{ color:var(--brand); }
.foot-note{ color:var(--muted); font-size:var(--step--1); }

/* Reveal on scroll baseline */
.reveal-on-scroll{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal-on-scroll.is-visible{ opacity:1; transform:none; }

/* Media queries */
@media (max-width: 992px){
  .nav-list{ display:none; }
  .burger{ display:inline-block; }
}
@media (min-width: 768px){
  .footer-grid{ grid-template-columns: 2fr 1fr 1fr; }
}
:root{
  /* ...остальное... */
  --header-h: 64px;
}
.header-wrap{ min-height: var(--header-h); }

/* фиксированный дровер — больше не двигает контент */
.mobile-drawer{
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  background: var(--bg-soft);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding: 8px 16px 14px;
  transform: translateY(-8px);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}
.mobile-drawer.is-open{ transform: translateY(0); opacity: 1; }
.mobile-drawer[hidden]{ display:none; }

/* полупрозрачный фон под меню */
.scrim{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.scrim.is-open{ opacity: 1; pointer-events: auto; }
.scrim[hidden]{ display:none; }

@media (max-width: 992px){
  .nav-list{ display:none; }
  .burger{ display:inline-block; }
}
:root{
  /* ...остальное... */
  --header-h: 64px; /* минимальная высота шапки */
}

/* даём месту под фиксированную шапку */
body{ padding-top: var(--header-h); }

/* было: position: sticky; — стало fixed */
.site-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: linear-gradient(180deg, rgba(12,15,19,.95), rgba(12,15,19,.8));
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.site-header.has-shadow{ box-shadow: 0 4px 24px rgba(0,0,0,.35); }

.header-wrap{ min-height: var(--header-h); }

/* дровер уже рассчитан на фикс — оставляем,
   но убедимся, что он стартует ВПЛОТНУЮ под шапкой */
.mobile-drawer{
  position: fixed;
  top: var(--header-h);
  left: 0; right: 0;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  /* остальное — без изменений */
}
/* ===== Footer (TuneForge-format) ===== */
.footer{
  border-top:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(1000px 400px at 50% 120%, rgba(75,211,255,0.08), transparent 60%),
    linear-gradient(180deg, #0b0e12, #0c0f13 60%);
  padding:36px 0;
}

.footer-container{
  display:grid; gap:18px;
  grid-template-columns: 1fr;
}

.footer-column a{ color: var(--muted); text-decoration:none; }
.footer-column a:hover{ color: var(--brand); }

.footer-brand{
  font-weight:700; font-size: var(--step-0); margin:0 0 6px;
}

.footer-links{
  display:flex; flex-wrap:wrap; gap:14px;
}

/* появление при скролле */
.animate-on-scroll{ opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.animate-on-scroll.is-visible{ opacity:1; transform:none; }

@media (min-width: 768px){
  .footer-container{
    grid-template-columns: 2fr 1fr; /* контактный столбец + ссылки */
    align-items:start;
  }
}