/* ============================================================
   БАЗА ШАБЛОНА «ВЕДУЩИЙ» — архитектура и логика вёрстки по образцу
   сайта «Огниво»: тёмная палитра + один акцент (здесь — премиальное
   золото), тонкий топбар с гео/регалиями, прозрачная шапка поверх
   полноэкранного медиа-hero, дисплейный капс-заголовок с одной
   акцентной строкой, кнопки со «стрелкой», каскадные reveal-анимации.
   Всё на CSS-переменных → «переодевается» под любого ведущего.
   ============================================================ */

:root{
  --coal:#0a0a0b;        /* фон (однородный, почти чёрный) */
  --coal-2:#141417;      /* карточки/панели */
  --bone:#f4f2ee;        /* основной светлый текст */
  --smoke:#8f8f96;       /* приглушённый текст */
  --gold:#c9a86a;        /* АКЦЕНТ */
  --gold-2:#e2c789;      /* яркий акцент */
  --line:rgba(244,242,238,.12);
  --wrap:1320px;
  --font-display:"Tenor Sans", system-ui, sans-serif;
  --font-cond:"Tenor Sans", system-ui, sans-serif;
  --font-sans:"Manrope", system-ui, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{
  margin:0; background:var(--coal); color:var(--bone);
  font-family:var(--font-sans); -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}

/* ---------- Топбар ---------- */
.topbar{position:relative; z-index:30; background:var(--coal)}
.topbar .in{
  max-width:1400px; margin:0 auto; padding:9px 24px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 28px;
}
.topbar p{margin:0; font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:rgba(241,236,226,.5)}
.topbar .rt{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.topbar .rt a:hover{color:var(--gold)}
.topbar .g{color:var(--gold)}
.topbar .sep{color:rgba(241,236,226,.2)}

/* ---------- Шапка поверх hero ---------- */
.hdr{
  position:absolute; inset:0 0 auto 0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--wrap); margin:0 auto; padding:26px 24px; width:100%;
  left:0; right:0;
}
.hdr .logo{
  font-family:var(--font-display); font-weight:700; font-size:23px;
  letter-spacing:.32em; text-transform:uppercase; color:var(--bone);
  padding-left:.32em;
}
.hdr nav{display:flex; gap:26px}
.hdr nav a{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.16em; color:rgba(241,236,226,.8);
  position:relative; padding-bottom:5px; transition:color .2s;
}
.hdr nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,var(--gold-2),var(--gold));
  transform:scaleX(0); transform-origin:left; transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.hdr nav a:hover{color:var(--gold)} .hdr nav a:hover::after{transform:scaleX(1)}
@media(max-width:900px){ .hdr nav{display:none} }

/* ---------- Кнопки (логика Огнива: подпись едет влево, стрелка выезжает) ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  height:54px; padding:0 36px; border-radius:8px; border:1px solid transparent;
  font-family:var(--font-sans); font-weight:600; font-size:12px;
  text-transform:uppercase; letter-spacing:.14em; white-space:nowrap; cursor:pointer;
  background:transparent; color:var(--bone);
  transition:background-color .25s, border-color .3s, color .3s;
}
.btn .bt{display:inline-flex; align-items:center; gap:10px; transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.btn .ba{position:absolute; right:14px; top:50%; opacity:0; transform:translate(-8px,-50%); transition:opacity .3s, transform .3s}
.btn:hover .bt{transform:translateX(-9px)} .btn:hover .ba{opacity:1; transform:translate(0,-50%)}
.btn-primary{background:var(--gold); color:#1c1509}
.btn-primary:hover{background:var(--gold-2)}
.btn-ghost{border-color:rgba(244,242,238,.5); color:var(--bone)}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold); background:rgba(201,168,106,.08)}
.btn-s{height:46px; padding:0 28px; font-size:11px}
@media(max-width:560px){ .btn{width:100%} }

/* pill-кикер над заголовком */
.pill{
  display:inline-flex; align-items:center; gap:10px; height:38px; padding:0 18px;
  border:1px solid rgba(241,236,226,.28); border-radius:100px; backdrop-filter:blur(2px);
  font-size:10.5px; text-transform:uppercase; letter-spacing:.16em; color:rgba(241,236,226,.9);
}
.pill .dot{width:6px; height:6px; border-radius:50%; background:var(--gold-2); box-shadow:0 0 12px var(--gold-2)}

/* ---------- Reveal (шторки строк + подъём), как в Огниво ---------- */
.rv{opacity:0; transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--rv-d,0s); will-change:opacity,transform}
.is-in .rv{opacity:1; transform:none}
.rv-line{overflow:hidden; display:block}
.rv-line>span{display:block; transform:translateY(112%);
  transition:transform 1s cubic-bezier(.22,1,.36,1); transition-delay:var(--rv-d,0s); will-change:transform}
.is-in .rv-line>span{transform:none}

/* подсказка скролла */
@keyframes hint{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(7px);opacity:1}}
.scroll-hint{animation:hint 2.2s ease-in-out infinite}

@media (prefers-reduced-motion: reduce){
  .rv,.rv-line>span{opacity:1!important;transform:none!important;transition:none!important}
  .scroll-hint{animation:none}
}

/* переключатель концептов (общий, поверх всего) */
.switcher{
  position:fixed; z-index:80; left:50%; bottom:22px; transform:translateX(-50%);
  display:flex; gap:6px; padding:6px; border-radius:100px;
  background:rgba(12,11,10,.7); border:1px solid var(--line); backdrop-filter:blur(10px);
}
.switcher a{
  font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:rgba(241,236,226,.7);
  padding:8px 16px; border-radius:100px; transition:.2s;
}
.switcher a:hover{color:var(--bone)}
.switcher a.on{background:var(--gold); color:#1c1509; font-weight:600}