/* =========================================================
   ДАРСИ — первый экран. Композиция по референсу 2ktuning.ru
   Шрифты: Tenor Sans (заголовки) / Manrope (текст)
   ========================================================= */

:root{
  --bg:#0B0B0C;
  --white:#FFFFFF;
  --muted:rgba(255,255,255,.78);
  --muted-2:rgba(255,255,255,.62);
  --num:rgba(255,255,255,.45);
  --pill:rgba(255,255,255,.13);
  --pill-hover:rgba(255,255,255,.22);
  --line:rgba(255,255,255,.22);

  --accent:#F2CBD5;
  --accent-2:#E0A5B6;
  --accent-grad:linear-gradient(90deg,#F6D6DE 0%,#E3A9BA 100%);
  --accent-grad-hi:linear-gradient(90deg,#FAE0E6 0%,#E9B5C4 100%);
  --accent-hi:#E3A9BA;
  --accent-ink:#2A171D;   /* текст на розовой кнопке */
  --online:#22C55E;

  --pad-x:clamp(16px, 2.4vw, 40px);
  --maxw:1720px;          /* контентная область */

  --f-head:'Tenor Sans', 'Futura', 'Century Gothic', sans-serif;
  --f-body:'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--white);
  font-family:var(--f-body); font-size:16px; line-height:1.5;
  letter-spacing:-.022em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
ul{margin:0; padding:0; list-style:none}
img,svg,video{display:block; max-width:100%}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--accent-hi); outline-offset:3px}

/* ================== HEADER ================== */
#header{
  position:absolute; inset:0 0 auto 0; z-index:60;
  padding:0 var(--pad-x);
  transition:background .3s ease, backdrop-filter .3s ease;
}
.header__inner{
  width:100%; max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; gap:clamp(10px,1.6vw,24px);
  min-height:88px;
  border-bottom:1px solid rgba(255,255,255,.22);
}
#header.is-stuck{
  position:fixed;
  background:rgba(11,11,12,.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
/* выезд шапки — только на десктопе: на мобильном он перезапускался
   при каждом пересечении порога и читался как рывок */
@media (min-width:901px){
  .header.is-stuck{animation:slideDown .35s ease both}
}
/* размытие фона у закреплённой шапки — самая дорогая операция при
   прокрутке на телефоне: каждый кадр пересчитывается блюр всей полосы.
   На мобильных меняем его на плотную заливку. */
@media (max-width:900px){
  .header.is-stuck{
    background:rgba(11,11,12,.95);
    backdrop-filter:none; -webkit-backdrop-filter:none;
    will-change:transform; contain:layout paint;
  }
}
.header.is-stuck .header__inner{min-height:70px; border-bottom-color:transparent}
@keyframes slideDown{from{transform:translateY(-100%)}to{transform:none}}

/* --- логотип + дескриптор --- */
.brand{display:flex; align-items:center; gap:clamp(12px,1.2vw,20px); flex:0 0 auto}
.brand__logo{width:auto; height:34px; flex:0 0 auto}
.brand__div{width:1px; height:38px; background:rgba(255,255,255,.28); flex:0 0 auto}
.brand__descr{
  font-size:14px; line-height:1.32; color:#fff; font-weight:400;
  white-space:nowrap;
}

/* --- меню --- */
.nav{margin-left:auto}
.nav__list{display:flex; align-items:center; gap:8px}
.nav__link{
  display:inline-flex; align-items:center; gap:8px;
  height:44px; padding:0 18px; border-radius:0;
  font-size:14.5px; font-weight:400; color:#fff; white-space:nowrap;
  background:var(--pill);
  transition:background .25s ease, color .25s ease;
}
.nav__link i{
  width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.55);
  flex:0 0 auto; transition:background .25s ease;
}
.nav__link:hover{background:var(--pill-hover)}
.nav__link:hover i{background:var(--accent-hi)}

/* --- телефон / телеграм --- */
.header__actions{display:flex; align-items:center; gap:8px; flex:0 0 auto}
.icon-btn{
  width:46px; height:46px; display:grid; place-items:center; border-radius:0;
  background:var(--pill);
  transition:background .25s ease;
}
.icon-btn svg,.icon-btn img{width:21px; height:21px; object-fit:contain}
.icon-btn img{filter:brightness(0)}
.icon-btn:hover{background:var(--pill-hover)}

.phone{
  display:inline-flex; align-items:center; gap:9px;
  height:44px; padding:0 18px; border-radius:0;
  background:var(--pill);
  transition:background .25s ease;
}
.phone:hover{background:var(--pill-hover)}
.phone__num{font-size:14.5px; font-weight:600; white-space:nowrap; letter-spacing:-.02em}
.phone__label{display:none; font-size:13.5px; font-weight:600; white-space:nowrap}

/* мигающая онлайн-точка */
.phone__dot{
  position:relative; width:8px; height:8px; border-radius:50%;
  background:var(--online); flex:0 0 auto;
}
.phone__dot::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:var(--online); animation:ping 2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping{0%{transform:scale(1); opacity:.75} 70%,100%{transform:scale(3); opacity:0}}

/* бургер */
.burger{
  display:none; width:44px; height:44px; border-radius:0;
  background:var(--pill); position:relative;
}
.burger span{
  position:absolute; left:50%; width:18px; height:1.6px; background:#fff; border-radius:2px;
  transform:translateX(-50%); transition:transform .3s ease, opacity .2s ease, top .3s ease;
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:21.2px}
.burger span:nth-child(3){top:26.4px}
.burger.is-open span:nth-child(1){top:21.2px; transform:translateX(-50%) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){top:21.2px; transform:translateX(-50%) rotate(-45deg)}

/* На первом экране шапка лежит на светлом верхнем градиенте. */
.header:not(.is-stuck){background:transparent}
.header:not(.is-stuck) .header__inner{border-bottom-color:transparent}
.header:not(.is-stuck) .brand__logo{content:url('/assets/home/icons/logo-darsy-dark.png')}
.header:not(.is-stuck) .brand__descr{color:#2f282c}
.header:not(.is-stuck) .brand__div{background:rgba(27,20,24,.20)}
.header:not(.is-stuck) .nav__link,
.header:not(.is-stuck) .icon-btn,
.header:not(.is-stuck) .phone,
.header:not(.is-stuck) .burger{
  background:rgba(255,255,255,.32);
  color:#1b1418;
  box-shadow:none;
  backdrop-filter:blur(20px) saturate(1.08);
  -webkit-backdrop-filter:blur(20px) saturate(1.08);
}
.header:not(.is-stuck) .nav__link:hover,
.header:not(.is-stuck) .icon-btn:hover,
.header:not(.is-stuck) .phone:hover{background:rgba(255,255,255,.44)}
.header:not(.is-stuck) .nav__link i{background:#d99ab0}
.header:not(.is-stuck) .phone__num{color:#1b1418}
.header:not(.is-stuck) .burger span{background:#1b1418}
.header.is-stuck .icon-btn img{filter:brightness(0) invert(1)}

/* ================== МОБИЛЬНОЕ МЕНЮ ================== */
.mmenu{
  position:fixed; inset:0; z-index:55;
  background:rgba(8,8,9,.95);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  display:flex; align-items:flex-end; opacity:0; transition:opacity .3s ease;
}
.mmenu[hidden]{display:none}
.mmenu.is-open{opacity:1}
.mmenu__panel{position:relative;
  width:100%; padding:96px var(--pad-x) calc(24px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; height:100%; justify-content:space-between;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
body.menu-open .header{opacity:0; pointer-events:none; transition:opacity .2s ease}

.mmenu__close{
  position:absolute; top:16px; right:calc(var(--pad-x) - 4px); z-index:3;
  width:46px; height:46px; display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  color:#fff; cursor:pointer;
  transition:background .25s ease, transform .25s ease;
}
.mmenu__close:hover{background:rgba(255,255,255,.16); transform:rotate(90deg)}
.mmenu__close svg{width:15px; height:15px; fill:currentColor}

.mmenu__list{display:flex; flex-direction:column; gap:2px}
.mmenu__list a{
  display:flex; align-items:baseline; gap:14px;
  font-family:var(--f-head); font-size:clamp(22px,6.2vw,30px); line-height:1.35;
  padding:9px 0; border-bottom:1px solid rgba(255,255,255,.08);
  transform:translateY(14px); opacity:0;
}
.mmenu.is-open .mmenu__list a{
  transform:none; opacity:1;
  transition:transform .45s cubic-bezier(.2,.7,.3,1), opacity .45s ease;
}
.mmenu.is-open li:nth-child(1) a{transition-delay:.05s}
.mmenu.is-open li:nth-child(2) a{transition-delay:.09s}
.mmenu.is-open li:nth-child(3) a{transition-delay:.13s}
.mmenu.is-open li:nth-child(4) a{transition-delay:.17s}
.mmenu.is-open li:nth-child(5) a{transition-delay:.21s}
.mmenu.is-open li:nth-child(6) a{transition-delay:.25s}
.mmenu.is-open li:nth-child(7) a{transition-delay:.29s}
.mmenu.is-open li:nth-child(8) a{transition-delay:.33s}
.mmenu__list span{
  font-family:var(--f-body); font-size:11px; color:var(--accent-hi);
  letter-spacing:.1em; flex:0 0 auto;
}
.mmenu__foot{display:flex; flex-direction:column; gap:10px; padding-top:22px}
.mmenu__note{margin:4px 0 0; font-size:12px; color:var(--muted-2); text-align:center}

/* ================== HERO ================== */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:88px var(--pad-x) 0;
  overflow:hidden; isolation:isolate;
}
.hero__media{
  position:absolute; inset:0; z-index:-2;
  background:var(--bg);
}
.hero__media picture{display:block; width:100%; height:100%}
.hero__image{
  width:100%; height:100%; object-fit:cover; object-position:center center;
  transform:translateX(-5.5%) scale(1.4); transform-origin:center center;
}
.hero__scrim{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(250,246,244,.42) 0%, rgba(250,246,244,.18) 8%, rgba(250,246,244,0) 17%),
    linear-gradient(0deg, rgba(250,246,244,.94) 0%, rgba(250,246,244,.68) 9%, rgba(250,246,244,.18) 17%, rgba(250,246,244,0) 25%),
    linear-gradient(90deg, rgba(250,246,244,.97) 0%, rgba(250,246,244,.90) 22%, rgba(250,246,244,.62) 35%, rgba(250,246,244,.16) 45%, rgba(250,246,244,0) 54%);
}

.hero__inner{
  width:100%; max-width:var(--maxw); margin:0 auto;
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
  padding-bottom:clamp(42px,5.2vh,68px);
}
.hero__row{
  flex:1 1 auto;
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(24px,4vw,64px);
  padding:clamp(28px,4vh,54px) 0 clamp(24px,4.5vh,52px);
}
.hero__content{
  width:min(100%,820px); min-width:0;
  justify-self:start;
  display:flex; flex-direction:column; align-items:center;
  text-align:left;
}

/* --- наградные плашки: Яндекс слева от Wedding Awards --- */
.hero__badges{
  display:flex; flex-direction:row; align-self:end;
  gap:12px; flex:0 0 auto;
}
.badge{
  width:clamp(150px,12vw,196px); aspect-ratio:1;
  display:flex; flex-direction:column; justify-content:flex-end; gap:8px;
  padding:clamp(14px,1.1vw,20px);
  border-radius:0;
  color:#1b1418;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 18px 40px -30px rgba(50,28,37,.5);
  backdrop-filter:blur(16px) saturate(1.05);
  -webkit-backdrop-filter:blur(16px) saturate(1.05);
  transition:background .25s ease, border-color .25s ease;
}
.badge:hover{background:rgba(255,255,255,.94)}
.badge__ico{margin-bottom:auto; display:block; line-height:0}
.badge__ico svg,.badge__ico img{width:34px; height:34px; display:block}
.badge__ico--img img{width:clamp(48px,4vw,62px); height:clamp(48px,4vw,62px); border-radius:50%}
.badge__ya{border-radius:0}
.badge__row{display:flex; align-items:baseline; gap:9px}
.badge__stars{font-size:12px; letter-spacing:.12em; color:#FFC53D; line-height:1}
.badge__val{
  font-family:var(--f-head); font-size:clamp(30px,2.6vw,40px); line-height:1;
  letter-spacing:-.01em;
}
.badge__txt{font-size:15px; line-height:1.35; letter-spacing:-.03em; color:#2f282c}

.hero__title{
  font-family:var(--f-head); font-weight:400;
  font-size:clamp(30px, 3.6vw, 50px);
  line-height:.98;
  letter-spacing:-.005em;
  margin:0 0 clamp(18px,1.7vw,28px);
  align-self:flex-start;
  max-width:19ch; text-align:left;
  color:#1b1418;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.hero__action-row{
  width:100%;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(18px,2vw,26px);
}
.hero__sub{
  width:100%; margin:0; align-self:flex-start;
  font-size:clamp(15px,1.2vw,18px); font-weight:400; line-height:1.45; letter-spacing:-.035em;
  color:#2f282c; max-width:58ch; text-align:left; text-shadow:none;
}

/* --- кнопки --- */
.hero__cta{
  align-self:flex-start;
  display:flex; flex-wrap:wrap; justify-content:flex-start; gap:12px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  height:clamp(50px,3.4vw,60px); padding:0 clamp(24px,2vw,34px); border-radius:0;
  font-family:var(--f-body); font-size:15px; font-weight:400; letter-spacing:-.03em;
  white-space:nowrap; border:0;
  transition:background .25s ease, color .25s ease, transform .2s ease;
}
.btn__ico{width:18px; height:18px; fill:currentColor; flex:0 0 auto}
.btn--primary{background:var(--accent-grad); color:var(--accent-ink)}
.btn--primary:hover{background:var(--accent-grad-hi)}
.btn--light{background:#fff; color:#101012}
.btn--light:hover{background:rgba(255,255,255,.88)}
.btn--ghost{background:rgba(255,255,255,.08); color:#fff}
.btn--ghost:hover{background:rgba(255,255,255,.15)}
.btn--block{width:100%; height:54px; border-radius:0}

/* --- нижняя лента --- */
.facts{
  display:flex; justify-content:space-between; align-items:center;
  gap:clamp(16px,2vw,40px);
  padding-top:clamp(20px,2vw,30px);
  border-top:1px solid rgba(27,20,24,.20);
}
.facts__item{display:flex; gap:14px; align-items:center; flex:0 1 auto}
.facts__ico{
  width:32px; height:32px; flex:0 0 auto; color:#1b1418;
  display:grid; place-items:center;
}
.facts__ico svg{width:32px; height:32px}
.facts__txt{font-size:15px; line-height:1.4; letter-spacing:-.03em; color:#1b1418; text-shadow:none}

/* ================== STICKY MOBILE CTA ================== */
.mobile-bar{
  position:fixed; z-index:50; left:0; right:0; bottom:0;
  display:none; gap:8px; align-items:center;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(11,11,12,.96);
  border-top:1px solid rgba(255,255,255,.12);
  transform:translate3d(0,110%,0);
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
  /* отдельный слой + отсечение перерисовки: иначе браузер пересчитывает
     панель на каждом кадре прокрутки */
  will-change:transform; contain:layout paint;
}
.mobile-bar.is-visible{transform:translate3d(0,0,0)}
.mobile-bar__btn{
  height:50px; border-radius:0; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--f-body); font-size:15px; font-weight:400;
}
.mobile-bar__btn--primary{flex:1 1 auto; background:var(--accent-grad); color:var(--accent-ink)}
.mobile-bar__btn--tg,.mobile-bar__btn--call{
  width:50px; flex:0 0 auto; background:rgba(255,255,255,.10); border:0; color:#fff;
}
.mobile-bar__btn svg{width:20px; height:20px; fill:currentColor}

/* =========================================================
   АДАПТИВ
   ========================================================= */

@media (max-width:1700px){
  .nav__list{gap:6px}
  .nav__link{padding:0 13px; font-size:13.5px; gap:7px}
  .header__actions{gap:6px}
  .phone{padding:0 14px}
  .phone__num{font-size:13.5px}
  .brand__descr{font-size:13px}
}
@media (max-width:1440px){
  .brand{gap:12px}
  .brand__descr{font-size:13.5px; line-height:1.28}
  .nav__list{gap:4px}
  .nav__link{height:40px; padding:0 10px; font-size:14px; gap:6px}
  .nav__link i{width:4px; height:4px}
  .icon-btn{width:40px; height:40px}
  .phone{height:40px; padding:0 12px}
  .phone__num{font-size:14px}
}
@media (max-width:1560px){
  .nav{display:none}
  .burger{display:block}
  .header__actions{margin-left:auto}
  .brand__descr,.brand__div{display:block}
}

@media (max-width:1150px){
  .hero__row{
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,1fr) auto;
    align-content:stretch;
    gap:26px;
  }
  .hero__content{width:100%; justify-self:stretch; align-self:center}
  .hero__action-row{gap:18px}
  .hero__badges{width:min(100%,532px); justify-self:end; align-self:end}
  .badge{flex:1 1 0; width:auto; max-width:260px; aspect-ratio:auto; min-height:112px}
}

@media (max-width:900px){
  .header__inner{min-height:76px}
  .hero{padding-top:76px}
  .hero__title{font-size:clamp(30px,4.8vw,44px); line-height:1; max-width:17ch}
  .hero__action-row{gap:18px}
  .br-desktop{display:none}
  .facts{flex-wrap:wrap; justify-content:flex-start; row-gap:16px}
  .facts__item{flex:0 0 calc(50% - 20px)}
}

@media (min-width:901px){
  body{font-size:17px}
}

/* ---- мобильные ---- */
@media (max-width:720px){
  :root{--pad-x:18px}

  .header__inner{min-height:64px; gap:10px}
  .brand{padding:8px 0}                      /* зона нажатия по логотипу */
  .brand__logo{height:28px}
  .brand__descr,.brand__div{display:none}
  .icon-btn{display:none}

  .phone{padding:0 14px; height:44px}
  .phone__num{display:none}
  .phone__label{display:inline}

  .hero{padding-top:64px; min-height:max(100svh,760px)}
  .hero__inner{padding-bottom:calc(var(--bar-h, 0px) + env(safe-area-inset-bottom))}
  .hero__content{
    align-self:auto; padding-bottom:16px;
    transform:none;
  }
  .hero__image{object-position:center top; transform:scale(1.07); transform-origin:center top}
  .hero__scrim{
    background:
      linear-gradient(180deg, rgba(250,246,244,.78) 0%, rgba(250,246,244,.56) 9%, rgba(250,246,244,.14) 17%, rgba(250,246,244,0) 25%),
      linear-gradient(0deg, rgba(250,246,244,.98) 0%, rgba(250,246,244,.94) 45%, rgba(250,246,244,.76) 58%, rgba(250,246,244,.38) 67%, rgba(250,246,244,.07) 74%, rgba(250,246,244,0) 78%);
  }

  .hero__title{
    font-size:clamp(28px, 7.6vw, 36px); line-height:1.02;
    max-width:none; margin-bottom:12px;
  }
  .hero__sub{font-size:14px; line-height:1.4; margin-bottom:0; color:#3d353a}
  .hero__action-row{display:block}

  /* кнопки из hero убраны — работает липкая панель снизу */
  .hero__cta{display:none}

  .hero__row{
    grid-template-rows:auto auto;
    align-content:end;
    gap:12px; padding-bottom:0;
    transform:none;
  }
  .hero__badges{gap:10px; margin-bottom:14px}
  .badge{aspect-ratio:auto; min-height:92px; padding:11px 12px; gap:5px; max-width:none}
  .badge__ico svg,.badge__ico img{width:26px; height:26px}
  .badge__ico--img img{width:40px; height:40px}
  .badge__stars{font-size:10px}
  .badge__val{font-size:26px}
  .badge__txt{font-size:12px}

  /* преимущества — компактная сетка, чтобы весь первый экран помещался */
  .facts{
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
    gap:8px; overflow:visible;
    margin:0; padding:14px 0 0;
    -webkit-mask-image:none; mask-image:none;
  }
  .facts__item{
    width:100%; min-width:0; gap:8px;
    background:rgba(255,255,255,.54);
    border:1px solid rgba(255,255,255,.64);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border-radius:0; padding:9px 10px;
  }
  .facts__ico,.facts__ico svg{width:20px; height:20px}
  .facts__txt{font-size:11.5px; line-height:1.3}

  .mobile-bar{display:flex}
  /* высота панели — резерв снизу у всех секций считается от неё */
  :root{--bar-h:84px}
}

@media (max-width:380px){
  .hero__title{font-size:27px}
  .facts__txt{font-size:11px}
  .mobile-bar__btn--primary{font-size:14px}
}

/* ---- низкие экраны в ландшафте ---- */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto; padding-bottom:24px}
  .hero__row{padding-bottom:24px; transform:none}
  .hero__content{transform:none}
  .facts,.hero__badges{display:none}
}

/* ---- настройки пользователя ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}

@media print{
  .hero__media,.hero__scrim,.mobile-bar{display:none}
  body{background:#fff; color:#000}
}