/* ===== FILE: css/style.css ===== */
@font-face{font-family:"Nyght Serif";src:url("../fonts/OTF/NyghtSerif-Regular.otf") format("opentype");font-weight:400}
@font-face{font-family:"Nyght Serif";src:url("../fonts/OTF/NyghtSerif-Medium.otf")  format("opentype");font-weight:500}
@font-face{font-family:"Nyght Serif";src:url("../fonts/OTF/NyghtSerif-Bold.otf")    format("opentype");font-weight:700}

:root{
  --clr-dark:#04151e;--clr-dark-alt:#06202b;--clr-accent:#ffd600;
  --clr-text:#e4e8ec;--clr-text-muted:#9ba7b0;
  --ff-base:"Nyght Serif",serif;--radius:8px;--transition:.3s ease;
}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--ff-base);line-height:1.6;color:var(--clr-text);background:var(--clr-dark);max-width:100%;overflow-x:hidden}
img{max-width:100%;display:block}
.container{width:min(1180px,90%);margin-inline:auto}

.section-prefix{display:block;margin-bottom:.5rem;letter-spacing:.1em;font-size:1.5rem;text-transform:uppercase;color:var(--clr-accent)}
.section-title{margin:0 0 1rem;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:700}
.section-subtitle{margin-bottom:2rem;color:var(--clr-text-muted)}
.text-center{text-align:center}

/* ===== BUTTONS ===== */
.btn{display:inline-block;padding:.85rem 2.2rem;border-radius:var(--radius);font-weight:500;text-decoration:none;transition:var(--transition);font-size:clamp(.9rem,.8vw + .6rem,1rem)}
.btn--primary{background:var(--clr-accent);color:var(--clr-dark)}.btn--primary:hover{transform:translateY(-3px)}
.btn--outline-white{border:2px solid #fff;background:0;color:#fff}.btn--outline-white:hover{background:#fff;color:var(--clr-dark)}
.btn-link{font-size:.875rem;text-decoration:underline;color:var(--clr-accent);transition:var(--transition)}
.btn-link:hover{opacity:.7}

/* ===== HEADER ===== */
.header{position:fixed;inset:0 0 auto;width:100%;background:rgba(4,21,30,.1);backdrop-filter:blur(6px);z-index:1000}
.header__inner{display:flex;align-items:center;gap:2rem;padding-block:.75rem}
.logo{font-weight:700;font-size:1.25rem;color:#fff;text-decoration:none}
.nav{margin-left:auto}.nav a{margin-inline:.75rem;font-size:.95rem;color:#fff;text-decoration:none;transition:var(--transition)}
.nav a:hover{color:var(--clr-accent)}
.burger{--s:22px;display:none;flex-direction:column;justify-content:space-between;width:var(--s);height:var(--s);background:0;border:none;cursor:pointer}
.burger span{display:block;height:2px;background:#fff;transition:var(--transition)}
.burger.active span:nth-child(1){transform:translateY(10px) rotate(45deg)}
.burger.active span:nth-child(2){opacity:0}
.burger.active span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

/* ===== HERO ===== */
.hero{position:relative;min-height:100dvh;display:grid;place-items:center;text-align:center;padding-top:4rem}
.hero__bg{position:absolute;inset:0;background:url("../images/hero-bg.jpg")center/cover no-repeat;z-index:-2}
.hero:after{content:"";position:absolute;inset:0;background:rgba(4,21,30,.6);z-index:-1}
.hero__title{margin:.5rem 0 1.5rem;font-size:clamp(2rem,5vw,3.5rem);font-weight:700}
.hero__text{max-width:580px;margin-inline:auto;color:var(--clr-text-muted)}

/* ===== ABOUT ===== */
.about{background:var(--clr-dark-alt);padding:5rem 0}
.about__grid{display:grid;gap:3rem;align-items:center}
.about__left{text-align:left}
.about__right{text-align:left}
@media(min-width:768px){.about__grid{grid-template-columns:1fr 1fr}}

/* ===== OFFERINGS ===== */
.offerings{padding:5rem 0}
.card-grid{--min:16rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(var(--min),1fr))}
.card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:140px 1.5rem 3rem;border-top-right-radius:30px;border-bottom-left-radius:30px;background-size:cover;background-position:center;overflow:hidden}
.card:before{content:"";position:absolute;inset:0;background:rgba(4,21,30,.75);z-index:0}
.card>*{position:relative;z-index:1}
.card__index{position:absolute;top:1.25rem;left:1.25rem;font-weight:700;font-size:2.25rem;color:#fff}
.card__index:after{content:"";position:absolute;left:0;bottom:-.35rem;width:100%;height:4px;background:var(--clr-accent)}
.card__title,.card .btn-link{transform:translateY(-45%)}
.card__title{margin:0 0 .75rem;font-size:1.5rem;line-height:1.3;color:#fff;height:7rem;overflow:hidden}
.card__text{margin:0 0 1rem;font-size:1rem;line-height:1.25;color:var(--clr-text-muted);height:5rem;overflow:hidden}
.card__text,.card .btn-link{transform:translateY(-60%)}

/* ===== GALLERY ===== */
.gallery{background:var(--clr-dark-alt);padding:5rem 0}
.gallery-grid{--min:16rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(var(--min),1fr))}
.gallery-item{position:relative;overflow:hidden;border-radius:var(--radius);cursor:pointer;display:block}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--transition)}
.gallery-item:hover img{transform:scale(1.1)}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:2000}
.lightbox.show{display:flex}
.lightbox__img{max-width:90vw;max-height:85vh;object-fit:contain}
.lightbox__close,.lightbox__prev,.lightbox__next{position:absolute;top:50%;transform:translateY(-50%);background:none;border:none;color:#fff;font-size:2.5rem;cursor:pointer}
.lightbox__close{top:1rem;right:1rem;transform:none;font-size:3rem}
.lightbox__prev{left:1rem}
.lightbox__next{right:1rem}

/* ===== FEATURES ===== */
.features{padding:0 0 5rem}
.features__img{width:100%;height:300px;object-fit:cover;border-top-right-radius:30px;border-bottom-left-radius:30px;margin-inline:auto}
.features__grid{--min:16rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(var(--min),1fr));margin-top:2.5rem}
.feature{padding:2.5rem 2rem 2rem;border-radius:var(--radius);background:var(--clr-dark);text-align:left}
.feature__index{display:block;font-size:1.5rem;font-weight:700;color:var(--clr-accent)}
.feature__title{margin:.5rem 0 1rem;font-size:1.25rem;color:#fff}

/* ===== CTA ===== */
.cta{position:relative;text-align:center;padding:6rem 0;overflow:hidden}
.cta__bg{position:absolute;inset:0;background:url("../images/cta-bg.jpg")center/cover no-repeat;background-attachment:fixed;z-index:-2}
.cta:after{content:"";position:absolute;inset:0;background:rgba(4,21,30,.6);z-index:-1}
.cta__title{margin:1rem 0 1.5rem;font-size:clamp(1.8rem,4vw,3rem)}
.cta__subtitle{max-width:560px;margin-inline:auto;color:var(--clr-text-muted)}
.cta__content{position:relative;z-index:1}

/* ===== FOOTER ===== */
.footer{background:var(--clr-dark-alt);text-align:center;padding:1.5rem 0;font-size:.875rem}

/* ===== SCROLL TOP ===== */
.scroll-top{position:fixed;bottom:1.5rem;right:1.5rem;width:42px;height:42px;border:none;border-radius:var(--radius);font-size:1.25rem;background:var(--clr-accent);color:var(--clr-dark);cursor:pointer;opacity:0;pointer-events:none;transition:opacity var(--transition),transform var(--transition)}
.scroll-top.show{opacity:1;pointer-events:all;transform:translateY(-4px)}

/* ===== MEDIA ===== */
@media(max-width:767px){
  .burger{display:flex}
  .header__inner{justify-content:space-between;}
  .logo{max-width:120px;overflow:hidden;font-size:1rem;}
  .nav{position:fixed;top:64px;right:-100%;width:70%;max-width:260px;height:calc(100dvh - 64px);padding:2rem 1.5rem;background:rgba(4,21,30,.9);backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:1.2rem;transition:right .4s ease}
  .nav.show{right:0}
  .scroll-top{bottom:.75rem;right:.75rem}
}
@media(min-width:1440px){
  .hero__title{font-size:clamp(3rem,4vw,5rem)}
  .section-title{font-size:clamp(2rem,2.2vw,3rem)}
}

/* ==========================================================
   === МОДАЛЬНАЯ ФОРМА (только внутри #requestModal) =========
   ========================================================== */
#requestModal .feature{
  max-width:600px;
  width:90%;
}

#requestModal form{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}

#requestModal label{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  font-size:.875rem;
}

#requestModal input,
#requestModal textarea{
  width:100%;
  padding:.75rem 1rem;
  border:none;
  border-radius:var(--radius);
  background:rgba(255,255,255,.06);
  color:var(--clr-text);
  font-family:var(--ff-base);
  resize:vertical;
}

#requestModal input:focus,
#requestModal textarea:focus{
  outline:2px solid var(--clr-accent);
  outline-offset:0;
}

#requestModal textarea{min-height:120px}

#requestModal .form-actions{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}