/* ========== Global Base & Tokens ========== */
:root{
  --bg: #0b0d12;
  --panel: #0f1320;
  --ink: #e8ecf7;
  --muted: #9aa3b2;
  --brand: #6bf1ff;
  --brand-2: #a67cff;
  --accent: #ff6bb0;
  --ok: #3bffa3;
  --warn: #ffd166;
  --danger: #ff5d5d;

  --radius-xl: 20px;
  --radius-2xl: 28px;
  --shadow-1: 0 10px 30px rgba(0,0,0,.35);
  --shadow-2: 0 20px 50px rgba(0,0,0,.45);

  --container: 1200px;
  --gutter: 24px;
}

/* Local fonts (place TTFs in /fonts) */
@font-face{
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Reset */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
html{ scroll-behavior: smooth; background: var(--bg); color-scheme: dark; }
body{
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(166,124,255,.15), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(107,241,255,.12), transparent 60%),
    var(--bg);
}

img{ display:block; height:auto; width:100%; max-width:350px; border-radius: 14px; }
a{ color: var(--brand); text-decoration: none; }
a:hover{ color: var(--brand-2); }
p{ line-height: 1.68; color: var(--ink); }
strong{ color: #fff; }
ul{ margin: 0; padding-left: 1.25rem; }
.visually-hidden,
.visually-hidden:not(:focus):not(:active){
  position: absolute !important; width: 1px; height: 1px; margin: -1px;
  border: 0; padding: 0; white-space: nowrap; clip-path: inset(50%);
  clip: rect(0 0 0 0); overflow: hidden;
}

/* Container */
.container{
  width: min(100% - 2*var(--gutter), var(--container));
  margin-inline: auto;
}

/* Header */
.site-header{
  position: fixed; inset-block-start: 0; inset-inline: 0;
  background: rgba(11,13,18,.6);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  z-index: 1000;
}
.header-inner{
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px;
}
.logo{ display:flex; align-items:center; gap:12px; font-weight:700; color:#fff; }
.logo-mark{
  display:grid; place-items:center;
  width:36px; height:36px; border-radius:10px;
  background: linear-gradient(160deg, var(--brand), var(--brand-2));
  color:#0b0d12; font-weight:700; box-shadow: var(--shadow-1);
}
.logo-text{ letter-spacing:.2px; }

/* Nav */
.nav-toggle{
  display:none; background:none; border:0; padding:8px; cursor:pointer;
}
.nav-bar{
  display:block; width:26px; height:2px; background:#cfe8ff; margin:6px 0; border-radius:2px;
}
.nav-list{
  display:flex; flex-wrap:wrap; gap:16px; list-style:none; margin:0; padding:0;
}
.nav-list a{
  display:inline-block; padding:10px 12px; border-radius:12px;
  color:#e7efff; transition: transform .2s ease, background .2s ease;
}
.nav-list a:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); }

/* Main spacing (account for fixed header) */
.site-main{ padding-block-start: 96px; }

/* Footer */
.site-footer{
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%), #0b0d12;
  margin-top: 80px;
}
.footer-inner{ padding: 48px 0; }
.foot-title{ font-weight:700; margin:0 0 8px; }
.foot-copy{ color: var(--muted); max-width: 60ch; }
.foot-links{ display:flex; gap:18px; list-style:none; padding:0; margin:18px 0 8px; }
.foot-links a{ color:#bcd7ff; }
.foot-legal{ color: var(--muted); font-family: "JetBrains Mono", monospace; }

/* Sections base */
.section{ padding: clamp(48px, 6vw, 96px) 0; position: relative; }

/* Animation helpers */
.observe{ opacity:0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.observe.is-visible{ opacity:1; transform: translateY(0); }
.tilt{ transform-style: preserve-3d; will-change: transform; transition: transform .2s ease, box-shadow .2s ease; }
.tilt:hover{ transform: translateZ(8px) rotateX(2deg) rotateY(-2deg); box-shadow: var(--shadow-2); }

/* Media Queries (mobile-first) */
@media (max-width: 1024px){
  .nav-list{ gap:10px; }
}
@media (max-width: 880px){
  .nav-toggle{ display:block; }
  .nav-list{
    position: absolute; inset-inline: 0; top: 64px;
    background: rgba(12,15,22,.98);
    padding: 12px; border-bottom: 1px solid rgba(255,255,255,.06);
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-height: 0; overflow: hidden;
    transition: max-height .3s ease;
  }
  .nav-list.is-open{ max-height: 400px; }
}
@media (max-width: 560px){
  .nav-list{ grid-template-columns: 1fr; }
  .footer-inner{ padding: 40px 0; }
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}
/* было:
.container{
  width: min(100% - 2*var(--gutter), var(--container));
  margin-inline: auto;
}
*/

/* стало: */
.container{
  width: min(calc(100% - 2*var(--gutter)), var(--container));
  margin-inline: auto;
}

/* запретим горизонтальный скролл в любом случае */
html, body{
  overflow-x: hidden;
}
/* Контейнер теперь с внутренними отступами (без хитрых calc) */
.container{
  max-width: var(--container);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Жёстко режем горизонтальный скролл */
html, body{ overflow-x: hidden; }

/* Нормальные переносы без «по одной букве» */
p, li, figcaption, h1, h2, h3{
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}


/* На всякий случай: изображения всегда ужимаются внутрь колонки */
img{ width: 100%; max-width: 350px; }
@media (max-width: 880px){
  .nav-toggle{ display:block; }

  /* Свернутое меню: без паддингов и без рамки — полосы не будет */
  .nav-list{
    position: absolute;
    left: 0; right: 0; top: 64px;
    background: rgba(12,15,22,.98);
    padding: 0;                 /* было 12px */
    border-bottom: 0;           /* было 1px solid ... */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease, padding .2s ease, border-bottom-color .2s ease;
  }

  /* Открытое меню: добавляем паддинги и рамку только тогда */
  .nav-list.is-open{
    max-height: 420px;
    padding: 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
}