:root{
    --radius:18px; --gap:18px; --maxw:1200px;
    --shadow: 0 1px 1px rgba(0,0,0,.04), 0 12px 30px rgba(0,0,0,.25);
    --gold:#c8a84d; --gold-2:#f0d58b;
    --bg:#0a0a0c; --surface:#121214; --ink:#f4f4f5; --muted:#d6d6da; --line:#1e1e20;
  }
  *{box-sizing:border-box} html,body{height:100%}
  body{
    margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height:1.65;
    background: radial-gradient(1200px 600px at 50% -200px, #131318 0, transparent 60%) no-repeat, var(--bg);
    color:var(--ink);
  }
  .container{max-width:var(--maxw);margin:0 auto;padding:0 22px}
/* была sticky — заменяем на fixed */
header{
  position: fixed;   /* <-- фиксированная */
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(10,10,12,.92);
  border-bottom: 1px solid #1e1e20;
  backdrop-filter: blur(10px);
}

/* высоту шапки прокинем переменной, чтобы не гадать */
:root{ --header-h: 72px; }           /* базовая оценка */
body{ padding-top: var(--header-h); } /* чтобы контент не залез под шапку */

  .brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}
  .mark{width:28px;height:28px;border-radius:8px;background:linear-gradient(160deg,#1e1e20,#0a0a0c);box-shadow:inset 0 0 0 1px #2a2a2e}
  .menu a{
    border-color:var(--line); 
    text-decoration:none;
    font-weight:700;
    font-size:14px;
    padding:8px 10px;
    border-radius:10px;
    border:1px solid transparent}
  .menu a:hover{
    color:var(--ink);
    text-decoration:none;
    background:#101014}

  h1{font-size:clamp(30px,5vw,56px);margin:.4rem 0;letter-spacing:-.4px}
  h2{font-size:clamp(22px,3vw,34px);margin:0 0 .6rem}
  h3{margin:.5rem 0 .25rem}
  p{margin:.25rem 0 .75rem;color:var(--muted)}
  section{padding:56px 0}
  .grid{display:grid;gap:var(--gap)}
  .grid2{grid-template-columns:1fr} @media(min-width:900px){.grid2{grid-template-columns:1fr 1fr}}
  .grid3{grid-template-columns:1fr} @media(min-width:1000px){.grid3{grid-template-columns:repeat(3,1fr)}}
  .card{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:linear-gradient(180deg,#121214,#0d0d10);
        box-shadow:0 1px 0 rgba(255,255,255,.02), 0 24px 60px rgba(0,0,0,.35)}
  .btn{display:inline-block;padding:11px 18px;border-radius:14px;text-decoration:none;font-weight:800;letter-spacing:.2px;transition:all .15s ease}
  .btn.primary{color:var(--bg);background:linear-gradient(160deg,var(--gold),#b8943e);border:1px solid #b8943e;box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, 0 10px 24px rgba(200,168,77,.25)}
  .btn.primary:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, 0 14px 32px rgba(200,168,77,.35)}
  .btn.ghost{color:var(--gold);background:transparent;border:1px solid rgba(200,168,77,.4)}
  .btn.ghost:hover{border-color:var(--gold);box-shadow:0 0 18px rgba(200,168,77,.25)}
  .sep{height:6px;border-radius:999px;background:linear-gradient(90deg, transparent, rgba(200,168,77,.5), transparent)}
  .hero{border-radius:22px;padding:28px;border:1px solid var(--line);background:linear-gradient(180deg,#141418,#0b0b0e);
        box-shadow:0 2px 0 rgba(255,255,255,.02), 0 40px 90px rgba(0,0,0,.5)}
  .hero .frame{margin-top:16px;aspect-ratio:16/9;border-radius:16px;border:1px solid var(--line);overflow:hidden;
        background: radial-gradient(500px 240px at 70% 10%, rgba(200,168,77,.15), transparent 50%), #0c0c10;
        display:flex;align-items:center;justify-content:center;color:#a0a0a6}
  .chips{display:flex;gap:8px;flex-wrap:wrap}
  .chip{font-size:12px;border:1px solid #2a2a2e;border-radius:999px;padding:4px 8px;color:#bdbdc2;background:#0f0f13}
  .price{font-size:30px;font-weight:900}
  .accent{color:var(--gold)}
  .kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} @media(min-width:900px){.kpis{grid-template-columns:repeat(4,1fr)}}
  .kpi{border:1px solid var(--line);border-radius:16px;padding:16px;text-align:center;background:#0f0f13}
  .gallery{display:grid;grid-template-columns:1fr;gap:10px} @media(min-width:900px){.gallery{grid-template-columns:repeat(3,1fr)}}
  .tile{aspect-ratio:4/3;border-radius:14px;border:1px solid var(--line);background:#0f0f13;display:flex;align-items:center;justify-content:center;color:#a0a0a6}
  .step{display:flex;gap:12px;align-items:flex-start}
  .step .num{min-width:36px;height:36px;border-radius:12px;background:#0f0f13;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--gold);font-weight:900}
  .faq details{border:1px solid var(--line);background:#0f0f13;border-radius:14px;padding:12px}
  .faq summary{cursor:pointer;font-weight:700}
  .input, textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#0f0f13;color:var(--ink)}
  .note{font-size:13px;color:#bdbdc2}
  footer{border-top:1px solid var(--line);padding:26px 0;color:#cfcfd4}
  .to-top{position:fixed;right:18px;bottom:18px;z-index:50;background:#0f0f13;border:1px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--ink);text-decoration:none}
  a {
  color: var(--gold);
  text-decoration: none;
  transition: color .2s ease;
}
a:hover {
  color: var(--gold-2); /* светлее золото при ховере */
  text-decoration: underline;
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}

/* гамбургер */
.hamburger{
  display:none; position:relative; width:42px; height:42px;
  border:1px solid rgba(200,168,77,.5); border-radius:12px;
  background:transparent; cursor:pointer;
}
.hamburger span{
  position:absolute; left:9px; right:9px; height:2px;
  background:var(--gold); transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.hamburger span:nth-child(1){ top:13px; }
.hamburger span:nth-child(2){ top:20px; }
.hamburger span:nth-child(3){ top:27px; }
/* состояние "открыто" (крестик) */
.hamburger.is-open span:nth-child(1){ top:20px; transform:rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ top:20px; transform:rotate(-45deg); }

/* десктоп/мобилка */
@media (max-width: 900px){
  .menu{ display:none; }           /* прячем верхнее меню */
  .hamburger{ display:inline-block; }
}

/* мобильный drawer */
.drawer{
  position:fixed; top:0; right:0; width:min(360px, 86vw); height:100vh;
  background:linear-gradient(180deg,#121214,#0d0d10);
  border-left:1px solid var(--line);
  transform:translateX(100%); transition:transform .28s ease;
  padding:18px; z-index:48;
  display:flex; flex-direction:column; gap:10px;
}
.drawer a{
  color:var(--ink); text-decoration:none; font-weight:700;
  padding:12px 10px; border-radius:10px; border:1px solid transparent;
}
.drawer a:hover{ border-color:var(--line); background:#101014; }

/* затемнение */
.scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  backdrop-filter:saturate(140%) blur(2px);
  z-index:47;
}

/* состояние открыто */
.nav-open .drawer{ transform:translateX(0); }
.nav-open .scrim{ display:block; }

.container.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:1200px;   /* центрируем контент */
  margin:0 auto;
  padding:16px 32px;  /* побольше воздуха по бокам */
}

.brand{
  display: flex;
  align-items: center;
  gap: 10px; /* расстояние между картинкой и текстом */
  text-decoration: none;
  color: #f4f4f5;
  font-weight: 700;
  font-size:1.1em;
}

.brand .logo{
  height: 60px; /* или подгони под размер шапки */
  width: auto;
  display: block;
}

.brand strong {
  background: linear-gradient(90deg, #d4af37, #f5d76e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  text-decoration: none;
}