/* ============================================================
   Анна Королёва — персональный стилист
   Дизайн-система по design.md (whowears.ru)
   Шрифты: Raleway (текст) + Cormorant Garamond (display antiqua)
   ============================================================ */

:root{
  /* нейтральные */
  --white:#ffffff;
  --bg:#fdfcfb;
  --bg-warm:#f5ede5;
  --bg-warm2:#f4ece4;
  --bg-soft:#f1f0ef;
  --ink:#1a1a1a;
  --ink-2:#363636;
  --ink-3:#454545;
  /* серые */
  --muted:#827f7c;
  --muted-2:#969696;
  --line:#dad6d0;
  /* акценты */
  --gold:#a2955f;
  --marsala:#b54e54;
  --rose:#d27a7f;
  --powder:#dbbfc0;
  --cream:#fff2cf;

  --font-text:'Raleway',Arial,sans-serif;
  --font-display:'Cormorant Garamond',Georgia,serif;

  --container:1200px;
  --gutter:clamp(20px,5vw,80px);
  --radius:2px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-text);
  font-weight:300;
  font-size:16px;
  line-height:1.55;
  color:var(--ink-2);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
em{font-style:italic}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.section{padding:clamp(64px,11vw,150px) 0}

/* ---------- Типографика ---------- */
.h2{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(40px,6vw,72px);
  line-height:1.02;
  letter-spacing:-1.1px;
  color:var(--ink);
}
.h3{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(26px,2.6vw,34px);
  line-height:1.1;
  letter-spacing:-.5px;
  color:var(--ink);
}
.eyebrow{
  font-family:var(--font-text);
  font-weight:500;
  font-size:12px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:18px;
}
p{margin-bottom:1em}
p:last-child{margin-bottom:0}

.section__head{margin-bottom:clamp(40px,6vw,72px)}

/* ---------- Кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-text);font-weight:500;font-size:13px;
  letter-spacing:1.5px;text-transform:uppercase;
  padding:17px 34px;border-radius:var(--radius);
  border:1px solid transparent;cursor:pointer;
  transition:all .35s var(--ease);white-space:nowrap;
}
.btn--dark{background:var(--ink);color:var(--white)}
.btn--dark:hover{background:var(--marsala)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--white)}

/* ---------- Header ---------- */
.header{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  background:rgba(253,252,251,.8);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .4s,padding .4s;
}
.header.scrolled{border-color:var(--line)}
.header__inner{display:flex;align-items:center;justify-content:space-between;height:74px;transition:height .4s}
.header.scrolled .header__inner{height:62px}
.header__logo{
  font-family:var(--font-display);font-weight:500;font-size:22px;
  letter-spacing:-.3px;color:var(--ink);
}
.nav{display:flex;gap:32px}
.nav__link{
  font-weight:500;font-size:13px;letter-spacing:.5px;color:var(--ink-3);
  position:relative;transition:color .3s;
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;
  background:var(--marsala);transition:width .3s var(--ease);
}
.nav__link:hover{color:var(--ink)}
.nav__link:hover::after{width:100%}
.header__cta{padding:11px 24px}

.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:24px;height:2px;background:var(--ink);transition:.3s}

/* ---------- Hero ---------- */
.hero{padding:130px 0 80px}
.hero__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center}
.hero__title{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(54px,8.5vw,116px);line-height:.98;
  letter-spacing:-3px;color:var(--ink);margin:8px 0 26px;
}
.hero__title em{color:var(--marsala)}
.hero__lead{font-size:clamp(17px,1.5vw,20px);color:var(--ink-3);max-width:30em;margin-bottom:34px}
.hero__actions{display:flex;gap:16px;flex-wrap:wrap}
.hero__media{position:relative}
.hero__media img{
  width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius);
}
.hero__badge{
  position:absolute;left:-22px;bottom:34px;
  background:var(--cream);color:var(--ink);
  font-family:var(--font-display);font-weight:500;font-size:26px;line-height:1.05;
  padding:18px 22px;border-radius:var(--radius);box-shadow:0 20px 50px rgba(0,0,0,.1);
}
.hero__badge span{font-family:var(--font-text);font-weight:500;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}

/* ---------- Marquee ---------- */
.marquee{background:var(--ink);color:var(--white);overflow:hidden;padding:18px 0}
.marquee__track{display:flex;gap:26px;align-items:center;white-space:nowrap;width:max-content;animation:marquee 32s linear infinite}
.marquee__track span{font-family:var(--font-display);font-style:italic;font-size:24px}
.marquee__track i{color:var(--gold);font-style:normal}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- About ---------- */
.about{background:var(--bg-warm)}
.about__inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,6vw,80px);align-items:center}
.about__media img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius)}
.about__text p{color:var(--ink-3);max-width:34em}
.about__text .h2{margin-bottom:24px}
.about__stats{list-style:none;display:flex;gap:clamp(24px,4vw,52px);margin-top:40px;flex-wrap:wrap}
.about__stats strong{display:block;font-family:var(--font-display);font-weight:500;font-size:46px;line-height:1;color:var(--ink)}
.about__stats span{font-size:13px;letter-spacing:.5px;color:var(--muted)}

/* ---------- Services ---------- */
.services__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.service{
  background:var(--white);padding:clamp(28px,3.5vw,48px);
  display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden;
  transition:background .4s;
}
.service__num{font-family:var(--font-display);font-size:18px;color:var(--gold);letter-spacing:1px}
.service__body p{color:var(--ink-3)}
.service .h3{margin-bottom:12px}
.service__price{font-family:var(--font-display);font-style:italic;font-size:22px;color:var(--marsala)!important;margin-top:6px}
.service__img{
  width:100%;height:0;opacity:0;object-fit:cover;border-radius:var(--radius);
  transition:height .5s var(--ease),opacity .5s,margin-top .5s;margin-top:0;
}
.service:hover{background:var(--bg)}
.service:hover .service__img{height:200px;opacity:1;margin-top:8px}

/* ---------- Lectures ---------- */
.lectures{background:var(--bg-soft)}
.lectures__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,80px);align-items:center}
.lectures__text p{color:var(--ink-3);max-width:32em;margin-bottom:28px}
.lectures__list{list-style:none;margin-bottom:36px}
.lectures__list li{padding:14px 0;border-bottom:1px solid var(--line);font-size:18px;color:var(--ink-2)}
.lectures__list span{color:var(--gold);margin-right:8px}
.lectures__media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}

/* ---------- Reviews ---------- */
.reviews{background:var(--bg-warm2)}
.reviews__carousel{display:flex;align-items:center;gap:16px}
.carousel__viewport{overflow:hidden;flex:1}
.carousel__track{display:flex;transition:transform .6s var(--ease)}
.review{min-width:100%;text-align:center;padding:0 clamp(10px,5vw,90px)}
.review blockquote{
  font-family:var(--font-display);font-weight:400;font-style:italic;
  font-size:clamp(24px,3.2vw,38px);line-height:1.3;color:var(--ink);letter-spacing:-.5px;
}
.review figcaption{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:34px}
.review figcaption img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.review figcaption span{display:flex;flex-direction:column;text-align:left;font-size:13px;color:var(--muted);letter-spacing:.5px}
.review figcaption strong{font-weight:600;color:var(--ink);font-size:15px}
.carousel__btn{
  width:52px;height:52px;flex:none;border-radius:50%;border:1px solid var(--line);
  background:var(--white);font-size:26px;line-height:1;color:var(--ink);cursor:pointer;
  transition:.3s;
}
.carousel__btn:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.carousel__dots{display:flex;gap:10px;justify-content:center;margin-top:36px}
.carousel__dots button{width:8px;height:8px;border-radius:50%;border:0;background:var(--line);cursor:pointer;transition:.3s;padding:0}
.carousel__dots button.active{background:var(--marsala);width:24px;border-radius:4px}

/* ---------- FAQ ---------- */
.faq__inner{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(30px,6vw,80px);align-items:start}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  list-style:none;cursor:pointer;padding:24px 40px 24px 0;position:relative;
  font-family:var(--font-display);font-size:clamp(20px,2vw,26px);color:var(--ink);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-family:var(--font-text);font-weight:300;font-size:26px;color:var(--gold);transition:transform .3s;
}
.faq__item[open] summary::after{content:"–"}
.faq__item p{padding:0 40px 24px 0;color:var(--ink-3);max-width:48em}

/* ---------- Contacts ---------- */
.contacts{background:var(--ink);color:var(--bg)}
.contacts__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.contacts .eyebrow{color:var(--gold)}
.contacts .h2{color:var(--white)}
.contacts__text p{color:#bdb9b4;max-width:30em;margin:24px 0 36px}
.contacts__links{display:flex;flex-direction:column;gap:14px}
.contacts__links a{
  font-family:var(--font-display);font-size:24px;color:var(--white);width:max-content;
  border-bottom:1px solid transparent;transition:border-color .3s,color .3s;
}
.contacts__links a:hover{color:var(--rose);border-color:var(--rose)}

.form{background:var(--bg);padding:clamp(28px,4vw,46px);border-radius:var(--radius)}
.form__row{margin-bottom:14px}
.form input,.form textarea{
  width:100%;font-family:var(--font-text);font-weight:300;font-size:16px;color:var(--ink-2);
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;transition:border-color .3s;resize:vertical;
}
.form input::placeholder,.form textarea::placeholder{color:var(--muted-2)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--gold)}
.form__submit{width:100%;margin-top:6px}
.form__note{font-size:12px;color:var(--muted-2);margin-top:14px;text-align:center}
.form__success{display:none;margin-top:16px;padding:14px;background:var(--cream);color:var(--ink-2);font-size:14px;text-align:center;border-radius:var(--radius)}
.form__success.show{display:block}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:var(--muted);padding:30px 0;border-top:1px solid #2c2c2c}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer__logo{font-family:var(--font-display);font-size:20px;color:var(--bg)}
.footer__copy{font-size:13px;letter-spacing:.5px;margin:0}
.footer__credit{font-family:var(--font-text);font-size:12px;letter-spacing:.5px;color:var(--muted-2);margin:0}
.footer__credit a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:color .35s var(--ease),border-color .35s var(--ease)}
.footer__credit a:hover{color:var(--rose);border-bottom-color:currentColor}
.footer__credit a:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:1px}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.visible{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .hero__inner,.about__inner,.lectures__inner,.faq__inner,.contacts__inner{grid-template-columns:1fr}
  .services__grid{grid-template-columns:1fr}
  .hero__media,.about__media,.lectures__media{max-width:520px}
  .about__inner .about__media{order:2}
  .hero__badge{left:auto;right:20px}
  .service:hover .service__img{height:0;opacity:0} /* keep tidy on touch */
}
@media(max-width:720px){
  .nav,.header__cta{display:none}
  .nav.open{
    display:flex;position:absolute;top:100%;left:0;width:100%;
    flex-direction:column;gap:0;background:var(--bg);border-top:1px solid var(--line);
  }
  .nav.open .nav__link{padding:16px var(--gutter);border-bottom:1px solid var(--line)}
  .nav.open .nav__link::after{display:none}
  .burger{display:flex}
  .footer__inner{flex-direction:column;text-align:center}
}
@media(max-width:480px){
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__badge{font-size:20px;padding:14px 16px}
  .review{padding:0}
  .about__stats{gap:24px}
}