:root{
  --bg:#0b0b0c;          /* почти чёрный */
  --card:#121214;        /* тёмно-серый */
  --text:#f2f2f2;        /* светлый текст */
  --muted:#a6a6a6;       /* серый текст */
  --line:rgba(255,255,255,.10);
  --accent:#D4AF37;      /* золото */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(212,175,55,.16), transparent 60%),
    radial-gradient(900px 520px at 80% 30%, rgba(255,255,255,.06), transparent 60%),
    var(--bg);
  color:var(--text);
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* ===================== HEADER ===================== */
.header{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter: blur(10px);
  background: rgba(11,11,12,.92);
  border-bottom: 1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.header::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(90deg, rgba(212,175,55,.14), transparent 45%);
}
.header__row{
  position:relative; /* чтобы ::before не мешал кликам */
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height: 96px;
  gap:14px;
}

/* ЛОГО В ШАПКЕ — как в красной рамке (широкий) */
.logo{
  display:flex;
  align-items:center;
  text-decoration:none;

  width: 600px;      /* ширина зоны логотипа */
  height: 90px;      /* высота зоны логотипа */
  padding-left: 8px; /* чтобы не лип к краю */
  flex-shrink: 0;    /* чтобы не ужимался */
}

.logo__img{
  width: 200%;
  height: 100%;
  max-width: none;            /* важно: чтобы не зажимало */
  object-fit: contain;        /* вписываем в рамку */
  object-position: left center;
  display:block;
  filter: drop-shadow(0 6px 18px rgba(212,175,55,.25));
}

/* Навигация */
.nav{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.nav a{text-decoration:none;opacity:.92}
.nav a:hover{opacity:1;text-decoration:underline}

/* ===================== HERO ===================== */
.hero{padding:34px 0 10px}
.hero__grid{display:grid;grid-template-columns:1fr;gap:14px}
.hero__text h1{
  margin:0 0 10px;
  font-size:clamp(26px,4vw,40px);
  line-height:1.1
}
.muted{color:var(--muted);line-height:1.6}

.card{
  background: rgba(18,18,20,.78);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
}

/* Steps */
.hero__card h2{margin:0 0 10px;font-size:18px}
.steps{margin:0;padding-left:18px}
.steps li{margin:8px 0;color:var(--muted);line-height:1.55}
.steps b{color:var(--text)}

/* Buttons */
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 14px;
  border-radius:14px;
  text-decoration:none;
  border:1px solid rgba(212,175,55,.55);
  background: rgba(212,175,55,.14);
  color: var(--text);
}
.btn:hover{background: rgba(212,175,55,.20);}

.btn--ghost{
  border:1px solid var(--line);
  background: transparent;
}
.btn--ghost:hover{background: rgba(255,255,255,.06);}

.btn--small{padding:9px 12px;border-radius:12px}

/* Tags */
.tags{margin-top:12px}
.tag{
  display:inline-block;
  margin:6px 8px 0 0;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(212,175,55,.28);
  color:var(--muted);
  font-size:14px;
}

/* Sections */
.section{padding:18px 0}
.section h2{margin:0 0 10px;font-size:20px}

.grid{display:grid;grid-template-columns:1fr;gap:12px}
.card h3{margin:0 0 6px;font-size:16px}
.card p{margin:0}

/* Contacts */
.contacts{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.contacts__title{font-weight:700;margin-bottom:4px}

/* Footer */
.footer{
  padding:22px 0 34px;
  color:var(--muted);
  border-top:1px solid var(--line);
  margin-top:10px;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 600px){
  .header__row{min-height:78px}
  .logo{
    width: 240px;
    height: 70px;
    padding-left: 0;
  }
  .nav{gap:10px}
}

@media (min-width: 900px){
  .hero__grid{grid-template-columns:1.2fr .8fr;align-items:stretch}
  .grid{grid-template-columns:repeat(3,1fr)}
  .contacts{flex-direction:row;align-items:center;justify-content:space-between}
}