/* base.css — общие для сайта шрифты, цвета и единица масштаба.
   Подключается первым, поверх идёт deck.css (главная) или docs.css (продукты). */

@import url("/fonts/fonts.css");

:root{
  --ink:#08070C;
  --ink2:#0F0D16;
  --text:#ECE9F2;
  --muted:#9E96AE;
  --dim:#6E667E;
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.06);
  --surface:rgba(255,255,255,.035);
  --magenta:#FF2FB0;
  --violet:#A64DFF;
  --blue:#3D6BFF;
  --teal:#12C8B4;
  --amber:#F5C518;

  --f-display:"Unbounded","Golos Text",system-ui,sans-serif;
  --f-body:"Golos Text","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  /* Базовая единица масштаба. Растёт с шириной экрана, но ограничена высотой:
     на широком и низком окне размеры не раздуваются. */
  --u:min(1vw, 1.78vh);
  --nav-h:clamp(56px, calc(3.6 * var(--u)), 78px);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:var(--f-body);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}

/* ============================================================ шапка сайта */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:100;
  display:flex;align-items:center;gap:24px;
  padding:0 clamp(16px, calc(2.2 * var(--u)), 56px);
  background:rgba(8,7,12,.78);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line2);
}
.nav-brand{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(12px, calc(.85 * var(--u)), 16px);letter-spacing:.3em;
  color:var(--text);text-decoration:none;white-space:nowrap;
}
.nav-brand span{color:var(--magenta)}
.nav-links{
  list-style:none;margin:0 0 0 auto;padding:0;display:flex;align-items:center;gap:4px;
}
.nav-links > li{position:relative}
.nav-links a{
  display:block;padding:.6em 1em;border-radius:7px;text-decoration:none;
  font-size:clamp(14px, calc(.98 * var(--u)), 18px);
  color:var(--muted);transition:color .2s,background .2s;
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--text);background:rgba(255,255,255,.06)}
.nav-links a[aria-current="page"]{color:var(--text)}
.nav-cta{
  margin-left:8px;padding:.6em 1.25em !important;border-radius:8px;
  color:#fff !important;background:linear-gradient(92deg,var(--blue),var(--violet));
  font-weight:600;
}
.nav-cta:hover{filter:brightness(1.12)}

.nav-drop > a::after{content:" ▾";opacity:.6}
.nav-drop-menu{
  position:absolute;top:100%;right:0;min-width:14em;margin:6px 0 0;padding:6px;
  list-style:none;background:var(--ink2);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 18px 44px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility 0s .18s;
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}

.nav-burger{
  display:none;margin-left:auto;width:38px;height:38px;border:1px solid var(--line);
  border-radius:9px;background:transparent;color:var(--text);cursor:pointer;
  align-items:center;justify-content:center;
}
.nav-burger span{display:block;width:16px;height:1.5px;background:currentColor;position:relative}
.nav-burger span::before,.nav-burger span::after{
  content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor;
}
.nav-burger span::before{top:-5px}
.nav-burger span::after{top:5px}

@media (max-width:900px){
  .nav-burger{display:flex}
  .nav-links{
    position:fixed;top:var(--nav-h);left:0;right:0;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink2);border-bottom:1px solid var(--line);
    padding:8px clamp(16px,4vw,48px) 16px;
    display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 6px;font-size:15px}
  .nav-cta{margin:8px 0 0;text-align:center}
  .nav-drop-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    background:transparent;border:0;box-shadow:none;padding:0 0 0 14px;margin:0;
  }
  .nav-drop > a::after{content:""}
}

/* ============================================================ подвал */
footer{
  border-top:1px solid var(--line2);
  padding:clamp(20px, calc(1.6 * var(--u)), 34px) 0 clamp(28px, calc(2.4 * var(--u)), 48px);
  font-size:clamp(13px, calc(1 * var(--u)), 17px);color:var(--dim);
}
.foot-row{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between}
footer a{text-decoration:none}
footer a:hover{color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01s !important}
}