/* =========================================================
   NUVREN - Layout
   Version: 1.0.0
   Автор: nuvren.com
   Описание: Структурные блоки (preloader, header/nav, hero, panels, footer, responsive).
   ========================================================= */

/* ================= Preloader ================= */
.nv-preloader{
  position:fixed;
  inset:0;
  z-index:999;
  display:grid;
  place-items:center;
  background:radial-gradient(800px 600px at 50% 45%, rgba(42,163,255,.06), transparent 60%), #000;
  transition:opacity .35s ease, visibility .35s ease;
}

body.is-loaded #nv-preloader,
.nv-preloader.is-hidden{
  opacity:0;
  visibility:hidden;
}

.nv-preloader__logo{
  position:relative;
  width:96px;
  height:96px;
  display:grid;
  place-items:center;
}

.nv-preloader__logo img{
  width:90px;
  height:90px;
  opacity:.95;
  filter: drop-shadow(0 0 24px rgba(42,163,255,.35));
  animation:nvPulse 1.6s ease-in-out infinite;
}

.nv-preloader__logo::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.08);
  border-top-color: rgba(42,163,255,.85);
  animation:nvSpin 1.2s linear infinite;
  box-shadow: 0 -2px 10px rgba(42,163,255,.25) inset;
}

@keyframes nvSpin { to { transform: rotate(360deg); } }
@keyframes nvPulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.035); } }

/* ================= Header / Nav ================= */
.nv-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(0,0,0,.55);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}

.nv-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:72px;
  gap:18px;
}

.nv-logo img{ height:32px; width:auto }

.nv-menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:28px;
}

.nv-menu a{
  color:#e8ecf4;
  text-decoration:none;
  font-weight:600;
  letter-spacing:.02em;
  outline:none;
}
.nv-menu a:hover{ color:#fff }
.nv-menu a:focus-visible{
  color:#fff;
  box-shadow: 0 0 0 2px rgba(42,163,255,.45);
  border-radius:8px;
}

/* Burger */
.nv-burger{
  display:none;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  background:transparent;
  border-radius:10px;
  position:relative;
  touch-action:manipulation;
}

.nv-burger span{
  position:absolute;
  left:9px;
  right:9px;
  height:2px;
  background:#e8ecf4;
  transition:.25s;
}
.nv-burger span:nth-child(1){ top:12px }
.nv-burger span:nth-child(2){ top:20px }
.nv-burger span:nth-child(3){ top:28px }

.nv-burger.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg) }
.nv-burger.is-open span:nth-child(2){ opacity:0 }
.nv-burger.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }

/* Mobile nav container (если используешь .nv-nav) */
.nv-nav{
  display:block;
}

/* ================= Hero ================= */
.nv-hero{
  position:relative;
  padding:150px 0 120px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}

.nv-hero--compact{ padding:120px 0 90px }

.nv-hero::after{
  content:"";
  position:absolute;
  inset:-120px -160px auto auto;
  width:900px;
  height:900px;
  z-index:-1;
  background-repeat:no-repeat;
  background-size:100% 100%;
  filter:saturate(120%);
  will-change: transform;
  transform: translate(var(--parx), var(--pary));
  background-image:url("data:image/svg+xml;utf8,<?xml version='1.0'?><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 900'><defs><filter id='g' x='-50%' y='-50%' width='200%' height='200%'><feGaussianBlur stdDeviation='18' result='b'/><feMerge><feMergeNode in='b'/><feMergeNode in='SourceGraphic'/></feMerge></filter></defs><g filter='url(%23g)' fill='none' stroke-linecap='round' stroke-width='2'><path d='M80,120 C480,40 700,40 880,180' stroke='%232aa3ff'/><path d='M120,200 C520,120 780,90 900,190' stroke='%237a2cff'/><path d='M120,280 C520,220 820,200 900,250' stroke='%232aa3ff'/></g></svg>");
}

.nv-hero__inner{ text-align:left }

.nv-hero__title{
  max-width:900px;
  font-size:64px;
  line-height:1.05;
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 18px;
  text-shadow:var(--glow1),var(--glow2);
}

.nv-hero__subtitle{
  color:var(--muted);
  font-size:18px;
  margin:0 0 32px;
}

/* ================= Panels ================= */
.nv-panel{
  background:rgba(255,255,255,.02);
  border:1px solid var(--line);
  border-radius:18px;
  margin:28px 20px;
}

/* ================= Quote ================= */
.nv-quote{
  padding:110px 0 130px;
  position:relative;
  overflow:hidden;
  border-top:1px solid var(--line);
}

.nv-quote h2{
  margin:0;
  text-align:center;
  font-size:28px;
  font-weight:800;
  text-shadow:var(--glow1);
}

.nv-quote::after{
  content:"";
  position:absolute;
  inset:auto auto -160px -160px;
  width:820px;
  height:820px;
  z-index:-1;
  background-repeat:no-repeat;
  background-size:100% 100%;
  will-change: transform;
  transform: translate(calc(var(--parx) * -0.5), calc(var(--pary) * -0.5));
  background-image:url("data:image/svg+xml;utf8,<?xml version='1.0'?><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 820 820'><defs><filter id='g' x='-50%' y='-50%' width='200%' height='200%'><feGaussianBlur stdDeviation='18' result='b'/><feMerge><feMergeNode in='b'/><feMergeNode in='SourceGraphic'/></feMerge></filter></defs><g filter='url(%23g)' fill='none' stroke-linecap='round' stroke-width='2'><path d='M10,520 C220,420 520,380 740,420' stroke='%237a2cff'/><path d='M40,600 C260,500 520,480 800,520' stroke='%232aa3ff'/></g></svg>");
}

/* ================= Footer ================= */
.nv-footer{
  border-top:1px solid rgba(255,255,255,.08);
  background:radial-gradient(800px 400px at 50% 100%, rgba(42,163,255,.05), transparent);
  padding:36px 0 30px;
  color:#aab1bd;
  font-size:14px;
  text-align:center;
  opacity:0;
  animation:nvFadeInFooter 1s ease .6s forwards;
}

@keyframes nvFadeInFooter { to { opacity:1; } }

.nv-footer__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.nv-footer__social{
  display:flex;
  gap:18px;
  margin-bottom:10px;
}

/* ================= Responsive ================= */
@media (max-width:1024px){
  .nv-hero__title{ font-size:52px }
  .nv-hero--compact{ padding:96px 0 72px }
}

@media (max-width:768px){
  .nv-container{ padding:0 20px }
  .nv-header__inner{ height:64px }
  .nv-burger{ display:inline-block }

  .nv-nav{
    position:absolute;
    right:20px;
    top:72px;
    z-index:60;
    background:#0b0b0b;
    border:1px solid var(--line);
    border-radius:12px;
    padding:12px;
    display:none;
    box-shadow:0 12px 40px rgba(0,0,0,.5);
  }
  .nv-nav.is-open{ display:block }
  .nv-menu{ flex-direction:column; gap:12px }

  .nv-hero{ padding:110px 0 86px }
  .nv-hero__title{ font-size:clamp(34px,6vw,52px); margin:0 0 14px }
  .nv-hero__subtitle{ font-size:clamp(14px,2.8vw,18px); margin:0 0 22px }

  .nv-panel{ margin:18px 10px }
  .nv-quote{ padding:90px 0 110px }

  .nv-footer__social{ gap:14px }
}