/* ==========================================================================
   Алёна — AI-креатор. Лендинг-портфолио.
   Мобильная вёрстка — база, десктопная — с 768px.
   ========================================================================== */

:root{
  --bg:#14100E;
  --card:#1C1714;
  --text:#F5F0EA;
  --body:#D9D0C6;
  --muted:#8F857A;
  --accent:#C9925E;
  --accent-hover:#DCA871;
  --line:rgba(245,240,234,.09);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  padding:0 0 88px;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover)}
button{font-family:inherit}
img,video{max-width:100%}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:480px;margin:0 auto}
.rule{height:1px;background:var(--line)}

.h2{margin:0;font:300 34px/1.06 var(--serif);color:var(--text);text-wrap:balance}

/* --- Кнопка --------------------------------------------------------------- */
.btn{
  display:inline-block;
  padding:17px 34px;
  border-radius:8px;
  background:var(--accent);
  color:var(--bg);
  font:600 17px/1 var(--sans);
  text-align:center;
  transition:background .2s ease;
}
.btn:hover{background:var(--accent-hover);color:var(--bg)}
.btn--lg{padding:19px 40px}
.btn--pill{border-radius:99px;padding:15px 34px;font-size:16px;box-shadow:0 6px 22px rgba(20,16,14,.5)}


/* ==========================================================================
   1. Первый экран
   ========================================================================== */
.hero{padding:56px 20px 44px}
.hero__inner{display:flex;flex-direction:column;align-items:center;gap:18px}
.hero__text{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.hero__title{margin:0;font:300 46px/1.0 var(--serif);color:var(--text);text-wrap:balance}
.hero__sub{margin:0;padding:0 4px;font:400 16px/1.6 var(--sans);color:var(--muted);text-wrap:pretty}
.hero__btn{display:none}
.hero__media{display:none}

/* карусель */
.carousel{display:flex;flex-direction:column;gap:14px;width:100%}
.carousel__stage{
  position:relative;
  width:100%;
  aspect-ratio:9/16;
  border-radius:12px;
  overflow:hidden;
  background:var(--card);
}
.carousel__slide{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity .9s ease;
}
.carousel__slide.is-active{opacity:1}
.carousel__caption{margin:0;text-align:center;font:400 14px/1.4 var(--sans);color:var(--muted)}
.carousel__dots{display:flex;gap:8px;justify-content:center}
.carousel__dot{
  width:7px;height:7px;padding:0;border:0;border-radius:99px;
  background:rgba(245,240,234,.22);
  cursor:pointer;
  transition:background .3s ease;
}
.carousel__dot.is-active{background:var(--accent)}


/* ==========================================================================
   2. Портфолио
   ========================================================================== */
.work{padding:0 20px}

.cat{display:flex;flex-direction:column;gap:20px;padding:32px 0;border-bottom:1px solid var(--line)}
.cat--last{border-bottom:0}

.cat__head{display:flex;align-items:baseline;gap:10px}
.cat__num{font:400 15px/1 var(--sans);color:var(--muted)}
.cat__title{margin:0;font:400 27px/1.15 var(--serif);color:var(--text)}

.cat__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.cat__list li{
  padding:15px 18px;
  border-radius:10px;
  background:var(--card);
  font:400 15px/1.45 var(--sans);
  color:var(--body);
}

.clips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.clip{position:relative;flex:none;width:47%;max-width:190px}
.clip__video{
  width:100%;
  aspect-ratio:9/16;
  object-fit:cover;
  border-radius:12px;
  background:var(--card);
  display:block;
}
.clip__expand{
  position:absolute;top:6px;right:6px;
  width:44px;height:44px;padding:0;border:0;
  border-radius:11px;
  background:rgba(20,16,14,.6);
  color:var(--text);
  font:400 17px/44px var(--sans);
  cursor:pointer;
  transition:background .2s ease;
}
.clip__expand:hover{background:rgba(20,16,14,.85)}

.work__cta{display:none}


/* ==========================================================================
   3. Как проходит работа
   ========================================================================== */
.process{padding:44px 20px}
.process__head{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.process__note{margin:0;font:400 15px/1.6 var(--sans);color:var(--muted)}

.steps{margin:32px 0 0;padding:0 0 0 4px;list-style:none;display:flex;flex-direction:column}
.step{position:relative;padding:0 0 26px 44px}
.step:last-child{padding-bottom:0}
.step::before{
  content:"";
  position:absolute;left:13px;top:28px;bottom:0;
  width:2px;
  background:rgba(201,146,94,.32);
}
.step:last-child::before{display:none}
.step__num{
  position:absolute;left:0;top:0;
  width:28px;height:28px;
  border-radius:99px;
  background:var(--accent);
  color:var(--text);
  font:500 13px/28px var(--sans);
  text-align:center;
}
.step__text{display:block;padding-top:4px;font:400 16px/1.5 var(--sans);color:var(--text)}


/* ==========================================================================
   4. Обо мне и отзывы
   ========================================================================== */
.about{padding:0 20px 44px}
.about__rule{margin-bottom:28px}
.about__grid{display:flex;flex-direction:column;gap:28px}
.about__left{display:flex;flex-direction:column;gap:28px}

.about__intro{display:flex;align-items:center;gap:18px}
.about__photo{
  flex:none;
  width:112px;height:140px;
  object-fit:cover;object-position:50% 14%;
  border-radius:12px;
  background:var(--card);
  display:block;
}
.about__name{margin:0;font:400 24px/1.4 var(--serif);color:var(--text);text-wrap:pretty}
.about__desc{margin:0;font:400 16px/1.6 var(--sans);color:var(--muted);text-wrap:pretty}

.about__reviews{display:flex;flex-direction:column;gap:14px}
.review{
  margin:0;
  padding:14px;
  border-radius:12px;
  background:#fff;
  display:flex;
}
.review img{width:100%;height:auto;display:block;border-radius:2px}

.about__cta{display:none}


/* ==========================================================================
   5. FAQ
   ========================================================================== */
.faq{padding:0 20px 48px}
.faq__inner{display:flex;flex-direction:column;gap:24px}
.faq__rule{flex:none}
.faq__list{display:flex;flex-direction:column}

.qa{border-top:1px solid var(--line)}
.qa--last{border-bottom:1px solid var(--line)}
.qa__q{
  width:100%;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 0;
  background:none;border:0;
  cursor:pointer;text-align:left;
  font:500 17px/1.4 var(--sans);
  color:var(--text);
}
.qa__sign{flex:none;width:20px;font:400 20px/1 var(--sans);color:var(--accent);text-align:right}
.qa__a p{margin:0;padding:0 0 18px;font:400 16px/1.6 var(--sans);color:var(--muted)}


/* ==========================================================================
   6. Финальный экран
   ========================================================================== */
.final{padding:56px 20px 40px}
.final__inner{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.final__title{margin:0;font:300 38px/1.04 var(--serif);color:var(--text);text-wrap:balance}
.final__sub{margin:0;font:400 16px/1.6 var(--sans);color:var(--muted);text-wrap:pretty}
.final__btn{display:none}


/* ==========================================================================
   Липкая кнопка и оверлей
   ========================================================================== */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(20,16,14,.96) 60%,rgba(20,16,14,0));
  display:flex;justify-content:center;
  pointer-events:none;
}
.sticky .btn{pointer-events:auto}

.overlay{
  position:fixed;inset:0;z-index:60;
  background:rgba(20,16,14,.95);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.overlay[hidden]{display:none}
.overlay__video{max-width:100%;max-height:100%;border-radius:12px;display:block}
.overlay__close{
  position:absolute;top:16px;right:16px;
  width:44px;height:44px;padding:0;border:0;
  border-radius:99px;
  background:rgba(245,240,234,.14);
  color:var(--text);
  font:400 20px/44px var(--sans);
  cursor:pointer;
  transition:background .2s ease;
}
.overlay__close:hover{background:rgba(245,240,234,.26)}


/* ==========================================================================
   Десктоп / планшет — от 768px
   ========================================================================== */
@media (min-width:768px){

  body{padding-bottom:0}
  .wrap{max-width:1180px}

  .h2{font:300 clamp(36px,4.8vw,58px)/1.05 var(--serif)}

  /* --- 1. Первый экран --- */
  .hero{padding:clamp(28px,5vw,56px) clamp(20px,5vw,64px) clamp(64px,8vw,110px)}
  .hero__inner{
    flex-direction:row;flex-wrap:wrap;
    align-items:center;
    gap:clamp(40px,6vw,80px);
  }
  .hero__text{
    flex:1 1 380px;min-width:300px;
    align-items:flex-start;text-align:left;
    gap:clamp(20px,3vw,28px);
  }
  .hero__title{font:300 clamp(52px,9.5vw,108px)/1.0 var(--serif);letter-spacing:-.01em}
  .hero__sub{padding:0;max-width:30ch;font-size:clamp(17px,1.4vw,19px)}
  .hero__btn{display:inline-block;margin-top:4px}
  .hero__media{
    display:block;
    order:-1;
    flex:0 1 330px;min-width:250px;max-width:360px;
  }
  .carousel{gap:18px}

  /* --- 2. Портфолио --- */
  .work{padding:0 clamp(20px,5vw,64px) clamp(64px,10vw,120px)}

  .cat{gap:clamp(24px,3vw,32px);padding:clamp(40px,5vw,64px) 0}

  .cat__head{gap:12px}
  .cat__num{font-size:16px}
  .cat__title{font-size:clamp(29px,2.9vw,38px)}

  .cat__list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:16px;
  }
  .cat__list li{
    display:flex;align-items:center;
    padding:20px 24px;
    border-radius:12px;
    font-size:17px;line-height:1.5;
  }

  .clips{gap:20px}
  .clip{flex:0 1 300px;width:100%;max-width:300px}
  .clip__expand{display:none}

  .work__cta{display:flex;justify-content:center;padding-top:clamp(12px,3vw,24px)}

  /* --- 3. Как проходит работа --- */
  .process{padding:clamp(64px,10vw,120px) clamp(20px,5vw,64px)}
  .process__inner{display:flex;flex-direction:column;align-items:center;gap:clamp(40px,6vw,72px)}
  .process__head{gap:14px}
  .process__note{font-size:16px}

  .steps{
    position:relative;
    margin:0;padding:2px 0 0;
    width:100%;max-width:1000px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:clamp(4px,1vw,12px);
  }
  .steps::before{
    content:"";
    position:absolute;left:6%;right:6%;top:17px;
    height:2px;border-radius:2px;
    background:rgba(201,146,94,.28);
  }
  .step{
    position:static;
    display:flex;flex-direction:column;align-items:center;gap:16px;
    padding:0;text-align:center;
  }
  .step::before{display:none}
  .step__num{
    position:relative;
    width:32px;height:32px;
    font:500 clamp(13px,1.1vw,15px)/32px var(--sans);
    box-shadow:0 0 0 6px var(--bg);
  }
  .step__text{
    padding-top:0;
    font-size:clamp(13px,1.25vw,17px);
    line-height:1.45;
    text-wrap:balance;
  }

  /* --- 4. Обо мне и отзывы --- */
  .about{padding:0 clamp(20px,5vw,64px) clamp(64px,10vw,120px)}
  .about__rule{margin-bottom:clamp(48px,7vw,88px)}

  .about__grid{
    display:grid;
    grid-template-columns:minmax(280px,1fr) minmax(280px,1.15fr);
    column-gap:clamp(32px,6vw,80px);
    row-gap:20px;
    grid-template-areas:
      "left reviews"
      "left cta";
    align-items:start;
  }
  .about__left{grid-area:left}
  .about__reviews{grid-area:reviews;gap:20px}
  .about__cta{grid-area:cta;display:flex;padding-top:8px}

  .about__intro{flex-direction:column;align-items:flex-start;gap:28px}
  .about__photo{
    width:100%;height:auto;
    max-width:340px;
    aspect-ratio:4/5;
    object-position:50% 22%;
  }
  .about__name{font:400 clamp(19px,1.8vw,22px)/1.5 var(--sans);color:var(--text)}
  .about__desc{max-width:44ch;font-size:18px}

  .review{padding:clamp(18px,2vw,24px)}

  /* --- 5. FAQ --- */
  .faq{padding:0 clamp(20px,5vw,64px) clamp(64px,10vw,120px)}
  .faq__inner{
    flex-direction:row;flex-wrap:wrap;
    align-items:flex-start;
    gap:clamp(32px,6vw,80px);
  }
  .faq__rule{display:none}
  .faq__title{
    flex:1 1 240px;min-width:220px;
    font:300 clamp(34px,4vw,50px)/1.08 var(--serif);
  }
  .faq__list{flex:1 1 480px;min-width:280px}
  .qa__q{padding:24px 0;gap:20px;font-size:19px}
  .qa__a p{padding-bottom:24px;max-width:60ch;font-size:18px}

  /* --- 6. Финальный экран --- */
  .final{padding:clamp(80px,12vw,150px) clamp(20px,5vw,64px)}
  .final__inner{max-width:760px;margin:0 auto;gap:24px}
  .final__title{
    font:300 clamp(44px,6.8vw,82px)/1.02 var(--serif);
    letter-spacing:-.01em;
  }
  .final__sub{max-width:38ch;font-size:clamp(17px,1.4vw,19px)}
  .final__btn{display:inline-block;margin-top:12px}

  /* --- липкая кнопка не нужна --- */
  .sticky{display:none}
}


/* ==========================================================================
   Уменьшенная анимация
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}