/* =======================================================
   TSON ATELIER
   Premium Luxury Design
   Designer: Olesya Gungaeva
=======================================================*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600&display=swap');

/* =======================
   RESET
======================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Manrope',sans-serif;

    background:#fcf6f7;

    color:#1d1d1d;

    overflow-x:hidden;

    line-height:1.8;

}

/* =======================
   COLORS
======================= */

:root{

    --pink:#fcf6f7;

    --pink-light:#fffafb;

    --rose:#f4dde2;

    --silk:#f8ecef;

    --gold:#c7a46c;

    --black:#111111;

    --gray:#777;

    --white:#ffffff;

}

/* =======================
   CONTAINER
======================= */

.container{

    width:90%;

    max-width:1280px;

    margin:auto;

}

/* =======================
   TYPOGRAPHY
======================= */

h1,
h2,
h3,
h4{

    font-family:"Cormorant Garamond",serif;

    font-weight:500;

    color:var(--black);

}

h1{

    font-size:42px;

    letter-spacing:10px;

}

h2{

    font-size:64px;

    line-height:1.1;

    margin-bottom:30px;

}

h3{

    font-size:30px;

}

p{

    color:#666;

    font-size:17px;

}

/* =======================
   LINKS
======================= */

a{

    text-decoration:none;

    color:inherit;

}

/* =======================
   HEADER
======================= */

header{

    width:100%;

    min-height:100vh;

    background:linear-gradient(rgba(255,248,250,.95),rgba(255,248,250,.95));

}

/* =======================
   NAVBAR
======================= */

nav{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    padding:25px 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:rgba(255,255,255,.45);

    backdrop-filter:blur(20px);

    z-index:999;

    border-bottom:1px solid rgba(255,255,255,.4);

}

/* =======================
   LOGO
======================= */

.logo img{

width:180px;

height:auto;

display:block;

}

/* =======================
   MENU
======================= */

nav ul{

    display:flex;

    gap:45px;

    list-style:none;

}

nav ul li a{

    font-size:14px;

    text-transform:uppercase;

    letter-spacing:2px;

    transition:.3s;

}

nav ul li a:hover{

    color:var(--gold);

}

/* =======================
   BUTTONS
======================= */

.button{

    padding:16px 38px;

    border-radius:40px;

    background:var(--black);

    color:white;

    transition:.4s;

    font-size:14px;

    letter-spacing:2px;

}

.button:hover{

    background:var(--gold);

    transform:translateY(-3px);

}

.button-outline{

    padding:16px 38px;

    border-radius:40px;

    border:1px solid #111;

    transition:.4s;

}

.button-outline:hover{

    background:#111;

    color:white;

}

/* =======================================================
   HERO
======================================================= */

.hero{

    min-height:100vh;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

    padding:160px 8% 100px;

    position:relative;

    overflow:hidden;

}

/* Шелковые пятна */

.hero::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    background:radial-gradient(circle,
    rgba(244,221,226,.85) 0%,
    rgba(255,255,255,0) 70%);

    top:-250px;

    right:-120px;

    border-radius:50%;

    filter:blur(40px);

    z-index:-1;

}

.hero::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:radial-gradient(circle,
    rgba(250,236,239,.9) 0%,
    rgba(255,255,255,0) 70%);

    left:-180px;

    bottom:-120px;

    border-radius:50%;

    filter:blur(30px);

    z-index:-1;

}

/* ================= */

.hero-text{

    animation:fadeUp 1.2s ease;

}

.hero-text p:first-child{

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:13px;

    margin-bottom:25px;

}

.hero-text h2{

    font-size:88px;

    font-weight:500;

    line-height:1;

    margin-bottom:35px;

    max-width:650px;

}

.hero-description{

    max-width:540px;

    font-size:20px;

    color:#666;

    margin-bottom:45px;

}

/* ================= */

.hero-buttons{

    display:flex;

    gap:25px;

    margin-top:20px;

}

/* ================= */

.hero-image{

    display:flex;

    justify-content:center;

    position:relative;

}

.hero-image img{

    width:100%;

    max-width:560px;

    border-radius:25px;

    box-shadow:

    0 35px 70px rgba(0,0,0,.12);

    transition:.7s;

}

.hero-image img:hover{

    transform:scale(1.03);

}

/* декоративная рамка */

.hero-image::before{

    content:"";

    position:absolute;

    width:92%;

    height:92%;

    border:1px solid rgba(199,164,108,.45);

    top:-20px;

    left:-20px;

    border-radius:30px;

}

/* =======================================================
   SECTION
======================================================= */

section{

    padding:120px 8%;

}

.section-header{

    text-align:center;

    margin-bottom:70px;

}

.section-header span{

    color:var(--gold);

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:13px;

}

.section-header h2{

    margin-top:18px;

}

.section-header p{

    max-width:620px;

    margin:20px auto 0;

}

/* =======================================================
   ABOUT
======================================================= */

#about .container{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.photo{

    position:relative;

}

.photo img{

    width:100%;

    border-radius:28px;

    box-shadow:0 30px 60px rgba(0,0,0,.08);

}

.photo::after{

    content:"";

    position:absolute;

    inset:25px;

    border:1px solid rgba(199,164,108,.35);

    border-radius:28px;

    pointer-events:none;

}

.content span{

    color:var(--gold);

    letter-spacing:3px;

    font-size:13px;

}

.content p{

    margin:20px 0;

    max-width:560px;

}

/* =======================================================
   ANIMATION
======================================================= */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fade-up{

    animation:fadeUp .8s ease forwards;

}

/* =======================================================
   SERVICES
======================================================= */

.services{
    background:linear-gradient(180deg,#fffafb 0%,#fdf2f5 100%);
}

.services-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

}

.service-card{

    background:rgba(255,255,255,.65);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.7);

    border-radius:30px;

    padding:45px;

    transition:.45s;

    position:relative;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.05);

}

.service-card::before{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(244,221,226,.8),
    transparent 70%);

    right:-100px;

    top:-100px;

}

.service-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(0,0,0,.08);

}

.number{

    font-size:64px;

    font-family:"Cormorant Garamond",serif;

    color:rgba(199,164,108,.25);

    display:block;

    margin-bottom:20px;

}

.service-card h3{

    margin-bottom:18px;

}

.service-card p{

    max-width:420px;

}

/* =======================================================
   ADVANTAGES
======================================================= */

.advantages{

    background:#fcf6f7;

}

.advantages-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.advantage{

    text-align:center;

    padding:35px;

}

.advantage h3{

    font-size:54px;

    color:var(--gold);

}

.advantage h4{

    margin:15px 0;

    font-size:28px;

}

/* =======================================================
   GALLERY
======================================================= */

.gallery{

    background:white;

}

.gallery-grid{

    columns:3;

    column-gap:25px;

}

.gallery-item{

    break-inside:avoid;

    margin-bottom:25px;

    overflow:hidden;

    border-radius:24px;

}

.gallery-item img{

    width:100%;

    display:block;

    transition:.8s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

/* =======================================================
   QUOTE
======================================================= */

.quote{

    background:linear-gradient(135deg,#f6dde4,#fff8fa);

    text-align:center;

}

.quote-text{

    font-family:"Cormorant Garamond",serif;

    font-size:52px;

    line-height:1.3;

    max-width:900px;

    margin:auto;

    color:#222;

}

.quote span{

    display:block;

    margin-top:35px;

    letter-spacing:4px;

    text-transform:uppercase;

    color:var(--gold);

}

/* =======================================================
   REVIEWS
======================================================= */

.reviews{

    background:#fffafb;

}

.reviews-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.review-card{

    background:white;

    border-radius:28px;

    padding:40px;

    box-shadow:0 15px 40px rgba(0,0,0,.05);

    transition:.4s;

}

.review-card:hover{

    transform:translateY(-8px);

}

.stars{

    color:var(--gold);

    letter-spacing:4px;

    margin-bottom:20px;

    font-size:20px;

}

.review-card h4{

    margin-top:25px;

}

/* =======================================================
   CONTACT
======================================================= */

.contact{

    background:linear-gradient(135deg,#fffafb 0%,#f7e6eb 100%);

}

/* ---------- КОНТАКТЫ ---------- */
    .contacts-wrapper {
      display: flex;
      flex-wrap: wrap;
      gap: 2.5rem;
      margin-top: 2rem;
      align-items: flex-start;
    }
    .contact-details {
      flex: 1 1 300px;
      background: rgba(255,248,245,0.8);
      backdrop-filter: blur(10px);
      padding: 2rem;
      border-left: 4px solid #d4af37;
      border-radius: 0;
    }
    .contact-item { margin-bottom: 2rem; }
    .contact-label {
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.25em;
      color: #b49464;
    }
    .contact-value {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.5rem;
      font-weight: 500;
    }
    .contact-value a {
      text-decoration: none;
      color: inherit;
      border-bottom: 1px dotted #c5a572;
    }
    .footer-note {
      text-align: center;
      font-size: 0.7rem;
      letter-spacing: 0.2em;
      color: #b49464;
      padding: 2rem 1rem 1rem;
      border-top: 1px solid rgba(180,148,100,0.3);
      margin-top: 3rem;
    }

/* =======================================================
   FOOTER
======================================================= */

footer{

    background:#111111;

    color:#ffffff;

    padding:80px 8%;

}

.footer-content{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:60px;

    align-items:start;

}

.footer-logo,
.footer-brand h2{

    font-size:48px;

    letter-spacing:12px;

    color:#ffffff;

}

.footer-brand p{

    margin-top:15px;

    color:#c8c8c8;

}

.footer-menu{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.footer-menu a{

    color:#d8d8d8;

    transition:.3s;

}

.footer-menu a:hover{

    color:var(--gold);

}

.footer-copy{

    color:#9a9a9a;

    font-size:14px;

    line-height:1.8;

}

/* =======================================================
   IMAGE EFFECTS
======================================================= */

img{

    max-width:100%;

    display:block;

}

.gallery-item,
.photo,
.hero-image{

    overflow:hidden;

}

.gallery-item img,
.photo img,
.hero-image img{

    transition:transform .8s ease;

}

.gallery-item:hover img,
.photo:hover img,
.hero-image:hover img{

    transform:scale(1.05);

}

/* =======================================================
   SCROLLBAR
======================================================= */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f5e8ec;

}

::-webkit-scrollbar-thumb{

    background:#d8b2bc;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#c7a46c;

}

/* =======================================================
   RESPONSIVE
======================================================= */

@media(max-width:1100px){

.hero{

grid-template-columns:1fr;

text-align:center;

}

.hero-text{

order:2;

}

.hero-image{

order:1;

}

#about .container{

grid-template-columns:1fr;

}

.services-grid{

grid-template-columns:1fr;

}

.advantages-grid{

grid-template-columns:repeat(2,1fr);

}

.reviews-grid{

grid-template-columns:1fr;

}

.contact-wrapper{

grid-template-columns:1fr;

}

.footer-content{

grid-template-columns:1fr;

}

.gallery-grid{

columns:2;

}

}

/* ===== УЛУЧШЕННАЯ МОБИЛЬНАЯ ВЕРСИЯ ===== */
@media (max-width: 768px) {
  nav {
    padding: 12px 5% !important;  /* уменьшаем отступы */
    flex-direction: row;         /* оставляем строку */
    flex-wrap: wrap;
    gap: 10px;
  }
  .logo img {
    width: 120px;               /* меньше логотип */
  }
  nav ul {
    gap: 18px;
    font-size: 12px;
  }
  nav ul li a {
    font-size: 11px;
    letter-spacing: 1px;
  }
  .button, .button-outline {
    padding: 10px 22px;
    font-size: 12px;
  }
  .hero {
    padding: 130px 5% 60px !important; /* вместо 220px */
    gap: 40px;
  }
  .hero-text h2 {
    font-size: 44px;
  }
  .hero-description {
    font-size: 17px;
  }
  .hero-image img {
    max-width: 90%;
  }
  /* отступы секций */
  section {
    padding: 60px 5%;
  }
  .section-header h2 {
    font-size: 36px;
  }
  .contact-details {
    padding: 1.5rem;
  }
  .contact-value {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .hero-text h2 {
    font-size: 32px;
  }
  .hero {
    padding: 110px 4% 40px !important;
  }
  .quote-text {
    font-size: 28px;
  }
  .service-card {
    padding: 30px 20px;
  }
  .number {
    font-size: 40px;
  }
}

@media(max-width:480px){

.logo h1{

font-size:28px;

letter-spacing:8px;

}

.hero-text h2{

font-size:40px;

}

.section-header h2{

font-size:34px;

}

.quote-text{

font-size:34px;

}

body{

font-size:15px;

}

}