/* ====== Dr.Eloyan — клиника косметологии ====== */
:root{
  --pink:#d6336c;
  --pink-d:#a61e4d;
  --pink-l:#fff0f5;
  --snow:#fdfcfd;
  --grey-bg:#f6f4f6;
  --ink:#211a1e;
  --grey:#7c727a;
  --line:#ece6ea;
  --ff-d:'Unbounded',sans-serif;
  --ff-b:'Inter',sans-serif;
  --tr:.32s cubic-bezier(.4,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--ff-b);font-weight:400;color:var(--ink);background:var(--snow);line-height:1.7;font-size:15px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 28px}

.eyebrow{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--pink);display:block;margin-bottom:14px;font-weight:600}
.h-d{font-family:var(--ff-d);font-weight:500;line-height:1.2;color:var(--ink)}
.h-d span{color:var(--pink)}
.lead{color:var(--grey);max-width:580px}

.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 34px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;border:none;border-radius:100px;transition:var(--tr);font-family:var(--ff-b);cursor:pointer}
.btn-pink{background:var(--pink);color:#fff}
.btn-pink:hover{background:var(--pink-d);transform:translateY(-2px);box-shadow:0 12px 30px rgba(214,51,108,.3)}
.btn-line{background:transparent;border:1.5px solid var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}

#hd{position:fixed;inset:0 0 auto;z-index:100;padding:20px 0;transition:var(--tr)}
#hd.sc{padding:10px 0;background:rgba(253,252,253,.97);backdrop-filter:blur(14px);box-shadow:0 2px 24px rgba(33,26,30,.07)}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{font-family:var(--ff-d);font-size:1.15rem;font-weight:600}
.logo i{color:var(--pink);font-size:.8rem;vertical-align:middle;margin-right:6px}
nav.main{display:flex;gap:30px}
nav.main a{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;opacity:.65;transition:var(--tr);position:relative}
nav.main a:hover,nav.main a.act{opacity:1;color:var(--pink)}
.hd-book{padding:11px 24px;font-size:.65rem}
.burg{display:none;flex-direction:column;gap:5px;background:none;border:none;z-index:110;cursor:pointer}
.burg span{width:24px;height:2px;background:var(--ink);transition:var(--tr);border-radius:2px}
.burg.o span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burg.o span:nth-child(2){opacity:0}
.burg.o span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.m-ov{display:none;position:fixed;inset:0;background:rgba(33,26,30,.45);z-index:98}
.m-ov.o{display:block}
.m-nav{position:fixed;top:0;right:-300px;width:280px;height:100%;background:var(--snow);z-index:99;padding:90px 36px;transition:right .4s cubic-bezier(.4,0,.2,1)}
.m-nav.o{right:0}
.m-nav a{display:block;padding:15px 0;border-bottom:1px solid var(--line);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.m-nav a:hover{color:var(--pink);padding-left:6px}

.fu{opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s ease}
.fu.v{opacity:1;transform:translateY(0)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

.sec{padding:104px 0}
.sec-g{background:var(--grey-bg)}
.sec-p{background:var(--pink-l)}
.sec-dark{background:var(--ink);color:#fff}
.sec-dark .h-d{color:#fff}
.sec-dark .lead{color:rgba(255,255,255,.65)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}

footer{background:var(--ink);color:rgba(255,255,255,.55);padding:60px 0 26px}
.ft-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:46px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:26px}
.ft-grid .logo{color:#fff}
.ft-grid h4{font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--pink);margin-bottom:16px;font-weight:600}
.ft-grid ul{list-style:none}
.ft-grid li{margin-bottom:9px;font-size:.84rem}
.ft-grid a:hover{color:#fff}
.ft-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.7rem;opacity:.45}

@media(max-width:1024px){
  nav.main,.hd-book{display:none}
  .burg{display:flex}
  .grid2{grid-template-columns:1fr;gap:40px}
  .ft-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .container{padding:0 18px}
  .sec{padding:68px 0}
  .ft-grid{grid-template-columns:1fr}
}