/* ---------- ДРИАДА СТУДИО — публичная часть ---------- */
:root{
  --cream:#f5f1ea;
  --cream-dark:#eae3d6;
  --sand:#d8ccbe;
  --olive:#3a4a3a;
  --olive-dark:#2f3c2f;
  --text:#4a3f38;
  --text-muted:#7a6e65;
  --accent:#8a7c6b;
  --gold:#b8a98a;
  --white:#ffffff;
  --shadow:0 8px 30px rgba(0,0,0,0.08);
  --radius:14px;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body{
  font-family:'Inter',system-ui,sans-serif;
  color:var(--text);
  background:var(--cream);
  line-height:1.55;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ max-width:1080px; margin:0 auto; padding:0 1.5rem; }

h1,h2,h3{ font-family:'Playfair Display',serif; font-weight:700; color:var(--olive); line-height:1.15; }
p{ color:var(--text-muted); }

/* Header */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(245,241,234,0.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--cream-dark);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:72px; gap:1rem;
}
.logo{ display:flex; align-items:center; gap:.6rem; font-family:'Playfair Display',serif; font-weight:700; font-size:1.35rem; color:var(--olive); }
.logo-img{ width:34px; height:34px; object-fit:contain; }
.logo-text{ letter-spacing:.02em; }
.logo-sub{ font-size:.65em; font-weight:400; opacity:.8; display:block; letter-spacing:.15em; text-transform:uppercase; }
.nav{ display:flex; gap:1.6rem; align-items:center; font-size:.92rem; color:var(--text-muted); }
.nav a{ transition:color .2s; }
.nav a:hover{ color:var(--olive); }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:none; border-radius:999px; padding:.55rem 1.2rem;
  font-size:.9rem; font-weight:600; cursor:pointer; transition:all .2s;
}
.btn-dark{ background:var(--olive); color:#fff; }
.btn-dark:hover{ background:var(--olive-dark); transform:translateY(-1px); }
.btn-outline{ background:transparent; color:var(--olive); border:1.5px solid var(--olive); }
.btn-outline:hover{ background:var(--olive); color:#fff; }
.menu-toggle{ display:none; background:none; border:none; font-size:1.5rem; color:var(--olive); cursor:pointer; }

/* Hero */
.hero{ position:relative; padding:5rem 0 4rem; overflow:hidden; }
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:var(--cream);
  mask-image:radial-gradient(circle at 70% 30%, #000 60%, transparent 100%);
  -webkit-mask-image:radial-gradient(circle at 70% 30%, #000 60%, transparent 100%);
}
.hero-inner{ position:relative; z-index:2; text-align:center; }
.hero-title{
  font-size:clamp(2.6rem,5vw,4.6rem); color:var(--olive);
  margin-bottom:.9rem; letter-spacing:.01em;
}
.hero-sub{ font-size:1.05rem; color:var(--text-muted); max-width:560px; margin:0 auto 1.6rem; }
.hero .btn{ margin-top:.4rem; }

/* Info bar */
.info-bar{
  background:var(--white);
  border-top:1px solid var(--cream-dark);
  border-bottom:1px solid var(--cream-dark);
}
.info-inner{
  display:flex; align-items:center; justify-content:center;
  gap:2.5rem; padding:1.1rem 0; font-size:.88rem; color:var(--text-muted);
}
.info-item{ display:flex; align-items:center; gap:.55rem; white-space:nowrap; }
.info-item .icon{ font-size:1.1rem; }

/* Section title */
.section-title{
  font-size:clamp(1.8rem,2.5vw,2.4rem); margin-bottom:1.6rem;
  text-align:center; position:relative; display:inline-block; left:50%; transform:translateX(-50%);
}

/* Services grid */
.services{ padding:4.5rem 0 3rem; background:var(--white); }
.services-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1.1rem;
}
.service-card{
  background:var(--cream); border-radius:var(--radius);
  padding:1.6rem 1.2rem; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:.8rem;
  transition:transform .2s, box-shadow .2s; border:1px solid transparent;
}
.service-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--sand); }
.service-card .icon{ font-size:2rem; }
.service-card h3{ font-size:1rem; color:var(--olive); margin:0; }
.service-card p{ font-size:.82rem; color:var(--text-muted); margin:0; }

/* About */
.about{ padding:4.5rem 0 3rem; background:var(--cream); }
.about-inner{ max-width:700px; margin:0 auto; }
.about h2{ font-size:1.9rem; margin-bottom:.8rem; }
.about p{ margin-bottom:.9rem; font-size:1rem; color:var(--text-muted); }

/* Reviews */
.reviews{ padding:4.5rem 0 3rem; background:var(--white); }
.reviews-inner{ display:flex; align-items:center; gap:2.5rem; flex-wrap:wrap; justify-content:center; }
.reviews-stats{ min-width:170px; }
.rating-big{ font-family:'Playfair Display',serif; font-size:2.6rem; font-weight:700; color:var(--olive); }
.rating-count{ font-size:1.1rem; color:var(--text-muted); display:block; margin-top:.2rem; }
.stars{ color:var(--gold); font-size:1.3rem; margin-top:.4rem; letter-spacing:.2rem; }
.reviews-slider{ max-width:620px; }
.review-slide{ text-align:center; }
.review-slide blockquote{
  font-style:italic; font-size:1.05rem; color:var(--text-muted);
  quotes:"«" "»" "‹" "›";
}
.review-slide blockquote::before{ content:open-quote; }
.review-slide blockquote::after{ content:close-quote; }
.review-nav{ margin-top:1.2rem; display:flex; gap:.5rem; justify-content:center; }
.nav-btn{
  width:40px; height:40px; border:1px solid var(--sand); border-radius:50%;
  background:#fff; color:var(--text-muted); font-size:1.1rem; cursor:pointer;
}
.nav-btn:hover{ border-color:var(--olive); color:var(--olive); }

/* CTA */
.cta{
  background:var(--olive-dark);
  color:#fff; padding:3.5rem 0; text-align:center;
}
.cta-inner{ position:relative; z-index:2; max-width:700px; margin:0 auto; }
.cta-title{ font-family:'Playfair Display',serif; font-size:clamp(1.9rem,4vw,2.5rem); color:#fff; margin-bottom:.5rem; }
.cta-sub{ color:var(--sand); margin-bottom:1.4rem; font-size:1rem; }
.btn-large{ padding:.75rem 1.8rem; font-size:1rem; }

/* Footer */
.footer{ background:var(--olive-dark); color:#e8e0d4; padding:3rem 0 2rem; }
.footer-inner{ display:flex; flex-wrap:wrap; gap:2rem; align-items:flex-start; justify-content:space-between; }
.footer-brand{ max-width:320px; }
.footer-logo{ width:30px; height:30px; margin-bottom:.4rem; }
.footer-logo-text{ font-family:'Playfair Display',serif; font-weight:700; font-size:1.25rem; color:#fff; letter-spacing:.02em; display:block; margin-bottom:.1rem; }
.logo-sub{ font-size:.6em; font-weight:400; opacity:.75; display:block; letter-spacing:.15em; text-transform:uppercase; }
.footer-slogan{ font-size:.85rem; color:var(--sand); margin-top:.4rem; }
.footer-contacts{ display:flex; flex-direction:column; gap:.75rem; font-size:.92rem; }
.footer-contact-item{ display:flex; align-items:center; gap:.6rem; }
.footer-contact-item .icon{ font-size:1.1rem; }
.footer-social{ display:flex; gap:1rem; margin-top:.5rem; }
.footer-social a{ color:var(--sand); font-size:1.2rem; transition:color .2s; }
.footer-social a:hover{ color:#fff; }

/* Booking modal */
.modal{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:1rem; }
.modal-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(4px); }
.modal-content{
  position:relative; z-index:2; background:#fff; border-radius:20px;
  padding:2rem 1.75rem; max-width:460px; width:100%; max-height:90vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.22);
}
.modal-close{ position:absolute; top:1rem; right:1rem; background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--text-muted); }
.modal-title{ font-family:'Playfair Display',serif; font-size:1.5rem; margin-bottom:.3rem; color:var(--olive); }
.modal-hint{ font-size:.85rem; color:var(--text-muted); margin-bottom:1.2rem; }
.form-group{ margin-bottom:1rem; }
.form-group label{ display:block; font-size:.85rem; font-weight:600; color:var(--text); margin-bottom:.4rem; }
.form-group select,.form-group input,.form-group textarea{
  width:100%; padding:.6rem .75rem; border:1px solid var(--cream-dark);
  border-radius:10px; font-family:inherit; font-size:.95rem; background:#fff;
}
.form-group textarea{ resize:vertical; min-height:70px; }
.btn-full{ width:100%; padding:.8rem; }
.modal-footer{ margin-top:1rem; font-size:.8rem; color:var(--text-muted); text-align:center; }

/* Responsive */
@media (max-width:768px){
  .nav{ display:none; position:absolute; top:72px; left:0; right:0; background:rgba(245,241,234,.95);
    flex-direction:column; padding:1rem; gap:1rem; border-bottom:1px solid var(--cream-dark); }
  .nav.active{ display:flex; }
  .menu-toggle{ display:block; }
  .info-inner{ gap:1.5rem; font-size:.8rem; flex-wrap:wrap; justify-content:center; }
  .cta{ background-position:top center; background-size:55%; padding:3rem 0 2.5rem; }
  .footer-inner{ flex-direction:column; align-items:center; text-align:center; gap:1.5rem; }
  .footer-contacts{ align-items:center; }
}