/* ---------------- Шрифт и базовые переменные ---------------- */
@font-face{
  font-family:"MagistralC";
  src:url("../fonts/MagistralC Bold.woff2") format("woff2");
  font-weight:700;
  font-display:swap;
}

:root{
  --bg:#2D2D2D;
  --text:#F4EDE5;
  --accent:#CCAE68;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{scroll-behavior:smooth}

/* ---------------- Фон ---------------- */
body{
  position:relative;
  font-family:"MagistralC",sans-serif;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* картинка-подложка — с отступом от шапки */
body::before{
  content:"";
  position:fixed;
  top:120px;            /* ← отступ от верхней панели */
  left:0;
  right:0;
  bottom:0;
  background:url("../background.jpg") center/cover no-repeat;
  background-attachment:fixed;
  z-index:-1;
  opacity:0.28;
  pointer-events:none;
}

a{color:var(--text)}
img{display:block;max-width:100%}

/* ---------------- Прелоадер ---------------- */
.preloader{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;background:var(--bg);z-index:9999;transition:opacity .6s .3s,visibility .6s .9s}
.preloader.hide{opacity:0;visibility:hidden}
.preloader-logo{width:260px;animation:logoIn 1s forwards}
@keyframes logoIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}

/* ---------------- Header ---------------- */
header{position:fixed;top:30px;right:50px;z-index:100}
nav{display:flex;gap:40px;font-size:14px;letter-spacing:1px}
nav a{position:relative;text-decoration:none}
nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--accent);transition:.3s}
nav a:hover{color:var(--accent)}
nav a:hover::after{width:100%}

/* ---------------- Hero ---------------- */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:24px;padding:120px 20px}
.hero-title{font-size:clamp(40px,6vw,92px);letter-spacing:3px}
.hero-sub{font-size:clamp(18px,3vw,28px);opacity:.85}
.btn{margin-top:20px;padding:14px 36px;border:1px solid var(--text);border-radius:40px;background:none;font-size:14px;letter-spacing:2px;cursor:pointer;transition:.3s}
.btn:hover{background:var(--accent);color:var(--bg);border-color:var(--accent)}

/* ---------------- Секции ---------------- */
section{padding:120px 8vw;max-width:1300px;margin:auto}
#projects{padding-left:0;padding-right:0}
.sec-title{font-size:40px;text-align:center;margin-bottom:60px}
.sec-sub{text-align:center;margin-top:-40px;margin-bottom:60px;opacity:.8}

/* ---------------- About ---------------- */
.about{position:relative}
.about-box{background:rgba(31,59,62,.6);border-radius:24px;padding:28px;line-height:1.6;margin-bottom:40px}
.about-box a{color:var(--accent);text-decoration:underline}
.qr{position:absolute;right:0;bottom:0;width:160px}

/* ---------------- Counters ---------------- */
.stats{display:flex;justify-content:center;gap:80px}
.stat{display:flex;flex-direction:column;align-items:center;text-align:center}
.stat .num{font-size:64px;font-weight:700}
.stat span:last-child{margin-top:6px;font-size:18px}

/* ---------------- Проекты ---------------- */
.projects-wrap{display:flex;flex-direction:column;gap:120px}
.project h3{font-size:28px;margin:0 0 20px 8vw;transition:.3s}
.project:hover h3{color:var(--accent);cursor:pointer}

.gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;margin:0;padding:0;scroll-behavior:smooth}
.gallery::-webkit-scrollbar{display:none}
.gallery img{flex:0 0 100vw;height:85vh;object-fit:cover;border-radius:22px;scroll-snap-align:center;transition:transform .4s}
.gallery:hover img{transform:scale(1.04)}

/* ---------------- Коллаж ---------------- */
.collage{column-count:3;column-gap:12px}
.collage-col img{margin-bottom:12px;border-radius:12px;opacity:0;transform:translateY(40px);transition:1s}

/* ---------------- Форма ---------------- */
.form-block form{max-width:480px;margin:auto;display:flex;flex-direction:column;gap:20px}
input,textarea{padding:14px 18px;border:1px solid var(--text);border-radius:12px;background:rgba(255,255,255,.06);color:var(--text);font:inherit}
button{padding:14px;border:none;border-radius:40px;background:var(--accent);color:#fff;font:inherit;cursor:pointer;transition:.3s}
button:hover{filter:brightness(1.15)}

/* ---------------- Контакты ---------------- */
.contact-box{background:rgba(31,59,62,.6);border-radius:24px;padding:40px;text-align:center;line-height:2}
.messengers a{margin:0 8px}

/* ---------------- Fade ---------------- */
.fade{opacity:0;transform:translateY(40px);transition:1s}
.fade.show{opacity:1;transform:none}

/* ---------------- Адаптив ---------------- */
@media (max-width:768px){
  body::before{
    top:100px; /* ← отступ на мобилке */
    background-size:contain;
    background-position:center top;
    background-repeat:no-repeat;
    opacity:0.35;
  }

  .stats{flex-direction:column;gap:40px}
  .gallery img{height:55vh}
  .collage{column-count:2}
}