/* =========================================================
   TOKENS (глобальные)
   ========================================================= */
:root{
  --topbar-h: 26px;
  --hdr-h: 64px;
  --side-pad: clamp(20px, 3vw, 40px);

  --gold: #ffc868;

  --menu-fs: clamp(14px, 1.15vw, 18px);
  --btn-fs: clamp(14px, 1.10vw, 16px);
  --gap-x: clamp(10px, 1.2vw, 18px);

  --logo-h: calc(var(--hdr-h) - 6px);
  --btn-w: 180px;

  /* mobile panel tail gap */
  --m-bottom-gap: 28vh;
}

/* =========================================================
   BASE
   ========================================================= */
*,
*::before,
*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; color-scheme: dark; }

body{
  padding-top: calc(var(--topbar-h) + var(--hdr-h));
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video{ max-width: 100%; height: auto; }

a{ text-decoration: none; }
a:hover{ text-decoration: underline; }

button{ cursor: pointer; }

/* без «белых флешей» между секциями Tilda */
#allrecords, .t-records{ background:#000 !important; }

/* =========================================================
   SECTION BACKGROUNDS (safe)
   ========================================================= */
.uc-shirina{
  position: relative;
  background: url('https://static.tildacdn.com/tild3234-3161-4331-b264-656530323666/34217b3e6be395bbcc0d.png') center/cover no-repeat fixed;
}
.uc-shirina::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.2);
  z-index:0;
}
.uc-shirina > *{ position:relative; z-index:1; }

/* =========================================================
   TOP BLACK BAR
   ========================================================= */
.topbar-fixed{
  position: fixed; inset: 0 0 auto 0; height: var(--topbar-h);
  z-index: 1001; display:flex; align-items:center;
  background:#000; color:#fff;
  font: 600 13px/1 'Roboto Slab', serif;
}
.topbar-fixed .tb-inner{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; margin:0 auto; padding:0 var(--side-pad);
}
.topbar-fixed .tb-left,
.topbar-fixed .tb-right{ display:flex; align-items:center; gap:10px; }

.tb-phone-img{ display:inline-flex; align-items:center; }
.tb-phone-pic{ display:block; height:18px; width:auto; object-fit:contain; }

/* соц-иконки */
.tb-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%;
  border:1.6px solid #fff; color:#fff; background:transparent;
  transition: border-color .2s, color .2s, transform .05s, box-shadow .2s;
}
.tb-icon svg{ width:12px; height:12px; fill:currentColor; }
.tb-icon:hover{
  border-color: var(--gold); color: var(--gold);
  box-shadow: 0 0 6px rgba(255,200,104,.45);
  transform: translateY(1px);
}

/* =========================================================
   MAIN HEADER (Tilda t228)
   ========================================================= */
.t228{
  position: fixed; top: var(--topbar-h); left:0; right:0; height: var(--hdr-h);
  z-index: 1000; display:flex; align-items:center; box-sizing:border-box;
  padding: 0 var(--side-pad);
  background: rgba(242,242,242,.4);
  backdrop-filter: saturate(110%) blur(1.5px);
}
.t228 .t-container,
.t228 .t228__maincontainer{
  position:relative; display:flex; align-items:center; gap:12px; width:100%; min-width:0;
}
.t228__logo img,
.t228__logo svg,
.hdr-logo{
  height: var(--logo-h) !important; width:auto !important; max-width:none !important;
  margin: 2px 14px 2px 0 !important; flex-shrink:1; transition: height .15s ease;
}

/* =========================================================
   DESKTOP NAV
   ========================================================= */
.header-row{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%, -50%);
  display:flex; align-items:center; gap: var(--gap-x);
  font: 700 var(--menu-fs)/1 'Roboto Slab', serif;
  white-space: nowrap;
  max-width: calc(100% - var(--side-pad) - var(--btn-w) - 24px);
}
.header-row .nav-links{ display:flex; align-items:center; gap: var(--gap-x); }
.header-row a{ color:#000 !important; text-decoration:none !important; }
.header-row a:hover{ text-decoration: underline !important; }

/* разделители */
.header-row .nav-links > a + a,
.header-row .nav-links > .nav-item + a{
  position:relative; padding-left:12px; margin-left:12px;
}
.header-row .nav-links > a + a::before,
.header-row .nav-links > .nav-item + a::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:2px; height:14px; background:#000;
}

/* выпадашка */
.nav-item.nav-dir{ position:relative; }
.nav-item .dir-btn{ cursor:pointer; }
.dir-menu{
  position:absolute; left:0; top:calc(100% + 8px);
  min-width:340px; background: var(--gold); color:#000;
  border:1px solid #000; border-radius:8px; padding:12px 10px;
  box-shadow:0 4px 18px rgba(0,0,0,.08);
  display:none; z-index:5; font:700 15px/1.35 'Roboto Slab', serif;
}
.dir-menu.is-open{ display:block; }
.dir-menu a{
  display:flex; align-items:flex-start; gap:8px;
  padding:10px 12px; border-radius:6px;
  color:#000 !important; text-decoration:none !important;
}
.dir-menu a::before{ content:"•"; font-size:18px; line-height:1; transform: translateY(-1px); }
.dir-menu a:hover{ background: rgba(0,0,0,.06); }

/* =========================================================
   RIGHT CTA BUTTON
   ========================================================= */
.header-btn{ position:absolute; top:50%; right: var(--side-pad); transform: translateY(-50%); }
.header-btn a{
  display:inline-block; padding:8px 16px; border:2px solid #000; border-radius:6px;
  font:700 var(--btn-fs)/1 'Roboto Slab', serif; color:#000 !important; background:transparent !important;
  text-decoration:none !important; transition: background .2s, border-color .2s, box-shadow .2s;
}
.header-btn a:hover{
  background: var(--gold) !important; border-color: var(--gold) !important;
  box-shadow: 0 0 10px rgba(255,200,104,.45);
}

/* =========================================================
   MOBILE BAR
   ========================================================= */
.mbar{ display:none; }
.m-burger{
  width:38px; height:30px; border:2px solid #000; border-radius:6px; background:transparent;
  position:relative; display:inline-flex; align-items:center; justify-content:center;
}
.m-burger span{ position:absolute; width:20px; height:2px; background:#000; }
.m-burger span:nth-child(1){ transform:translateY(-6px); }
.m-burger span:nth-child(3){ transform:translateY(6px); }

.m-overlay{
  position:fixed; inset:0; background: rgba(0,0,0,.45);
  z-index:1200; display:none;
}
.m-overlay.is-open{ display:block; }

.m-panel{
  position:absolute; right:0; top:0; bottom: var(--m-bottom-gap);
  width: min(78vw, 360px); background:#f7f7f7; padding:16px 16px 24px; overflow:auto;
  box-shadow:-10px 0 26px rgba(0,0,0,.2); border-radius:0 0 0 18px;
}
.m-close{ position:absolute; right:8px; top:4px; font-size:34px; line-height:1; background:transparent; border:0; }

.m-nav{ display:flex; flex-direction:column; gap:14px; margin-top:26px; font-family:'Roboto Slab', serif; }
.m-nav a{ color:#000 !important; text-decoration:none !important; font-weight:700; font-size:18px; }

.m-dirbox{ border:1px solid #000; border-radius:12px; background: var(--gold); padding:12px; }
.m-dirhead{ display:flex; align-items:center; justify-content:space-between; font-weight:800; font-size:20px; margin-bottom:6px; }
.m-dirlist a{ display:flex; gap:8px; padding:10px 8px; border-radius:6px; font-size:18px; font-weight:800; color:#000 !important; }
.m-dirlist a .dot{ width:8px; height:8px; border-radius:50%; background:#000; margin-top:.5em; }

.m-ask-link{
  position:relative; display:block; width:max-content; margin:4px auto 0;
  padding:10px 16px; border:2px solid #000; border-radius:8px;
  font:800 18px/1 'Roboto Slab', serif; color:#000 !important; background:#fff; text-decoration:none !important; overflow:hidden;
}
.m-ask-link::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,200,104,.65) 15%, transparent 30%) 0 0/250% 100% no-repeat;
  animation: askSweep 2.2s ease-in-out infinite;
}
@keyframes askSweep{
  0%{background-position:-120% 0;}
  55%{background-position:120% 0;}
  100%{background-position:120% 0;}
}

.m-tail{ margin:14px auto 0; width:82%; height:2px; background:#111; opacity:.7; border-radius:2px; }

.up-btn{
  position:fixed; left:14px; bottom:14px; z-index:1100;
  width:36px; height:36px; border-radius:10px; border:2px solid #000; background:#fff; font-weight:800; display:none;
}
.up-btn.show{ display:block; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:639px){
  .header-row, .header-btn{ display:none !important; }
  .mbar{
    position:absolute; inset:auto var(--side-pad) 0 var(--side-pad);
    top:50%; transform: translateY(-50%);
    z-index:10; display:flex; align-items:center; justify-content:flex-end;
    width: calc(100% - var(--side-pad)*2);
  }
  :root{ --logo-h: 42px; }
  .m-menu-label{ font-family:'Roboto Slab', serif; font-weight:700; font-size:16px; color:#000; margin-right:10px; }
}
@media (max-width:1024px){
  .header-row{ transform: translate(-50%, -50%); }
  .header-btn{ right: 18px; }
}
@media (max-width:860px){
  .dir-menu{ min-width:280px; }
}

/* =========================================================
   ACCESSIBILITY / FOCUS
   ========================================================= */
a, button, [role="button"], input, textarea, select{ -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible){ outline:none; }
:focus-visible{ outline:none; box-shadow: 0 0 0 3px rgba(0,0,0,.2); }

/* ВАЖНО:
   Любые стили для hero/формы/карточек (hero-text-k1, form-k1, cards-*) и любые
   правила, адресованные #rec… или .t396__… — держим ТОЛЬКО в CSS СТРАНИЦЫ. */