/* ============================================================
   layout.css — header, footer, grid, containers
   ============================================================ */

/* ---------- Preloader ---------- */
#preloader{
  position:fixed; inset:0; z-index:9999;
  background:var(--dg-night);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--dg-ease), visibility .6s var(--dg-ease);
}
#preloader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-ring{
  width:64px; height:64px; border-radius:50%;
  padding:5px;
  background:conic-gradient(from 0deg, var(--dg-magenta), var(--dg-orange), var(--dg-yellow), var(--dg-green), var(--dg-teal), var(--dg-magenta));
  animation: dg-spin 1.1s linear infinite;
}
.preloader-ring::after{
  content:''; display:block; width:100%; height:100%; border-radius:50%;
  background:var(--dg-night);
}
@keyframes dg-spin{ to{ transform:rotate(360deg); } }

/* ---------- Scroll progress ---------- */
#scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:var(--dg-ring); z-index:1001;
  transition:width .1s linear;
}

/* ---------- Header ---------- */
#site-header{ position:relative; z-index:1000; }
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--dg-header-h);
  display:flex; align-items:center;
  background:rgba(16,27,30,.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:height .35s var(--dg-ease), background .35s var(--dg-ease);
}
body.light .site-header{ background:rgba(247,243,234,.7); border-bottom:1px solid rgba(16,27,30,.08); }
.site-header.is-scrolled{
  height:var(--dg-header-h-scrolled);
  background:rgba(16,27,30,.85);
  box-shadow:var(--dg-shadow-1);
}
body.light .site-header.is-scrolled{ background:rgba(247,243,234,.92); }

.header-inner{
  width:100%; max-width:var(--dg-container); margin:0 auto; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}

.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  position:relative; width:46px; height:46px; border-radius:50%;
  padding:2.5px;
  background:conic-gradient(from 0deg, var(--dg-magenta), var(--dg-orange), var(--dg-yellow), var(--dg-green), var(--dg-teal), var(--dg-magenta));
  animation: dg-spin 14s linear infinite;
  flex:none;
}
.brand-mark span{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; border-radius:50%;
  background:var(--dg-night);
  font-family:var(--dg-font-display); font-weight:800; color:var(--dg-gold); font-size:1rem;
}
body.light .brand-mark span{ background:var(--dg-snow); }
.brand-word{ display:flex; flex-direction:column; line-height:1; }
.brand-word b{ font-family:var(--dg-font-display); font-size:1.05rem; letter-spacing:.04em; color:var(--dg-snow); }
body.light .brand-word b{ color:var(--dg-night); }
.brand-word small{ font-family:var(--dg-font-mono); font-size:.6rem; letter-spacing:.28em; color:var(--dg-gold); text-transform:uppercase; margin-top:2px; }

/* Nav */
.main-nav{ display:flex; align-items:center; gap:2px; }
.main-nav > ul{ display:flex; align-items:center; gap:2px; }
.main-nav a, .main-nav .nav-toggle{
  display:flex; align-items:center; gap:4px;
  padding:10px 14px; border-radius:var(--dg-r-pill);
  font-size:.88rem; font-weight:600; color:var(--dg-cream);
  position:relative; white-space:nowrap;
}
.main-nav a:hover, .main-nav .nav-toggle:hover{ color:var(--dg-gold); }
.main-nav li.is-active > a{ color:var(--dg-gold); }
.main-nav li.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top:calc(100% + 10px); left:0; min-width:220px;
  background:var(--dg-deep); border:1px solid var(--dg-stone); border-radius:var(--dg-r-md);
  padding:8px; box-shadow:var(--dg-shadow-2);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .25s var(--dg-ease), transform .25s var(--dg-ease), visibility .25s;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown a{ display:block; padding:10px 12px; border-radius:var(--dg-r-sm); font-weight:500; }
.dropdown a:hover{ background:var(--dg-slate); }

.header-actions{ display:flex; align-items:center; gap:10px; }
.icon-btn{
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--dg-stone); color:var(--dg-cream);
  transition:border-color .25s, color .25s, transform .25s;
}
.icon-btn svg{ width:18px; height:18px; }
.icon-btn:hover{ border-color:var(--dg-gold); color:var(--dg-gold); transform:translateY(-2px); }

.lang-switch{
  display:flex; align-items:center; gap:6px;
  padding:8px 12px; border-radius:var(--dg-r-pill);
  border:1px solid var(--dg-stone);
  font-family:var(--dg-font-mono); letter-spacing:.04em;
}
.lang-opt{ font-size:.78rem; font-weight:700; color:var(--dg-mist); padding:2px; }
.lang-opt:hover{ color:var(--dg-cream); }
.lang-opt.is-active{ color:var(--dg-gold); }
.lang-sep{ font-size:.78rem; color:var(--dg-stone); }

.hamburger{
  display:none; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--dg-stone); position:relative;
  align-items:center; justify-content:center;
}
.hamburger span, .hamburger span::before, .hamburger span::after{
  content:''; position:absolute; width:18px; height:2px; background:var(--dg-cream); border-radius:2px;
  transition:transform .3s var(--dg-ease), opacity .3s var(--dg-ease);
}
.hamburger span::before{ transform:translateY(-6px); }
.hamburger span::after{ transform:translateY(6px); }
.hamburger.is-open span{ background:transparent; }
.hamburger.is-open span::before{ transform:rotate(45deg); }
.hamburger.is-open span::after{ transform:rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; z-index:999;
  background:var(--dg-night);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:100px 32px 40px;
  transform:translateX(100%);
  transition:transform .45s var(--dg-ease);
  overflow-y:auto;
}
.mobile-nav.is-open{ transform:translateX(0); }
.mobile-nav a{
  font-family:var(--dg-font-display); font-size:1.6rem; font-weight:600; color:var(--dg-cream);
  padding:12px 0; border-bottom:1px solid var(--dg-stone);
  opacity:0; transform:translateY(14px);
  transition:opacity .4s var(--dg-ease), transform .4s var(--dg-ease);
}
.mobile-nav.is-open a{ opacity:1; transform:translateY(0); }
.mobile-nav .mobile-sub{ padding-left:16px; }
.mobile-nav .mobile-sub a{ font-size:1.05rem; font-family:var(--dg-font-body); font-weight:600; border-bottom:none; padding:8px 0; color:var(--dg-mist); }
.mobile-nav-cta{ margin-top:24px; }

@media (max-width:1024px){
  .main-nav{ display:none; }
  .hamburger{ display:flex; }
  .header-actions .lang-switch, .header-actions .cta-gold{ display:none; }
}

/* ---------- Footer ---------- */
.site-footer{
  position:relative;
  background:var(--dg-deep);
  border-top:1px solid var(--dg-stone);
  padding-top:80px;
  overflow:hidden;
}
.footer-mountains{
  position:absolute; left:0; right:0; bottom:0; height:160px;
  opacity:.12; pointer-events:none;
}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px;
  position:relative; z-index:1;
}
.footer-col h4{ font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dg-gold); font-family:var(--dg-font-mono); margin-bottom:20px; font-weight:700; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ color:var(--dg-mist); font-size:.92rem; transition:color .2s; }
.footer-col a:hover{ color:var(--dg-gold); }
.footer-brand p{ margin-top:14px; font-size:.92rem; max-width:280px; }
.footer-socials{ display:flex; gap:10px; margin-top:20px; }
.footer-map{ border-radius:var(--dg-r-md); overflow:hidden; border:1px solid var(--dg-stone); margin-top:14px; filter:grayscale(.4) contrast(1.1); }
.footer-bottom{
  margin-top:64px; padding:26px 0; border-top:1px solid var(--dg-stone);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  position:relative; z-index:1;
}
.footer-bottom p{ font-size:.82rem; }
.footer-legal{ display:flex; gap:18px; }
.footer-legal a{ font-size:.82rem; color:var(--dg-mist); }
.footer-legal a:hover{ color:var(--dg-gold); }

@media (max-width:1024px){
  .footer-grid{ grid-template-columns:1fr 1fr; row-gap:40px; }
}
@media (max-width:600px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

/* ---------- Global floating elements ---------- */
#back-to-top{
  position:fixed; right:24px; bottom:24px; z-index:900;
  width:50px; height:50px; border-radius:50%;
  background:var(--dg-gold-grad); color:var(--dg-night);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--dg-shadow-1);
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s var(--dg-ease), transform .3s var(--dg-ease), visibility .3s;
}
#back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
#back-to-top:hover{ box-shadow:var(--dg-glow); }

#float-telegram{
  position:fixed; left:24px; bottom:24px; z-index:900;
  width:56px; height:56px; border-radius:50%;
  background:var(--dg-slate); border:1px solid var(--dg-gold);
  display:flex; align-items:center; justify-content:center; color:var(--dg-gold);
  box-shadow:var(--dg-shadow-1);
  animation: dg-pulse 2.4s ease-in-out infinite;
}
@keyframes dg-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(242,178,51,.35), var(--dg-shadow-1); }
  50%{ box-shadow:0 0 0 12px rgba(242,178,51,0), var(--dg-shadow-1); }
}

@media (max-width:600px){
  #back-to-top{ right:16px; bottom:16px; width:44px; height:44px; }
  #float-telegram{ left:16px; bottom:16px; width:48px; height:48px; }
}

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  padding:calc(var(--dg-header-h) + 26px) 0 18px;
  font-size:.82rem; color:var(--dg-mist);
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
}
.breadcrumb a{ color:var(--dg-mist); }
.breadcrumb a:hover{ color:var(--dg-gold); }
.breadcrumb span.sep{ opacity:.5; }
.breadcrumb span.current{ color:var(--dg-gold); }

/* ---------- Grid helpers ---------- */
.grid{ display:grid; gap:28px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.grid-5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:1100px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-5{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:860px){ .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-2, .grid-3, .grid-4, .grid-5{ grid-template-columns:1fr; } }