:root{
  --paper:#FBF7F1; --paper-2:#F3EDE4; --ink:#152019; --ink-2:#3D4B42; --mute:#7C8A80;
  --green:#0FA968; --green-dark:#0A7C4C; --coral:#FF6A3D; --line:#E4DCD0;
  --r:20px; --wrap:1180px; --shadow:0 18px 40px -22px rgba(21,32,25,.35);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.6 "Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; line-height:1.12; letter-spacing:-.025em; font-weight:800}
h1{font-size:clamp(32px,4.6vw,58px)}
h1 em{font-style:normal; color:var(--green); position:relative; white-space:nowrap}
h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.04em; height:.12em; border-radius:4px;
  background:linear-gradient(90deg,var(--green),#7FE0B0); opacity:.28;
}
h2{font-size:clamp(24px,3vw,40px)}
h3{font-size:18px}
p{margin:0}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px}
.wrap-narrow{max-width:820px}

/* ------- кнопки ------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; border-radius:12px; font-weight:700; font-size:14.5px;
  border:1.5px solid transparent; transition:transform .15s, background .2s, border-color .2s, box-shadow .2s;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-solid{background:var(--green); color:#fff; box-shadow:0 10px 24px -14px rgba(15,169,104,.9)}
.btn-solid:hover{background:var(--green-dark)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:#fff}
.btn-ghost:hover{border-color:#CFC4B4; background:#fffdfa}
.btn-lg{padding:15px 24px; font-size:16px; border-radius:14px}

/* ------- шапка ------- */
.top{position:sticky; top:0; z-index:30; background:rgba(251,247,241,.94); border-bottom:1px solid var(--line)}
.top-in{display:flex; align-items:center; gap:22px; min-height:74px}
.logo{display:flex; align-items:center; gap:10px; color:var(--green); margin-right:auto}
.logo svg{width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round}
.logo svg path[fill]{fill:currentColor; stroke:none}
.logo span{color:var(--ink); font-size:18px; letter-spacing:-.02em}
.logo b{color:var(--green); font-weight:900}
.nav{display:flex; gap:20px; font-size:14.5px; color:var(--ink-2)}
.nav a{position:relative; padding:3px 0}
.nav a:hover{color:var(--green)}
.nav a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--green); transition:width .22s; border-radius:2px}
.nav a:hover::after{width:100%}

/* ------- hero ------- */
.hero{position:relative; padding:clamp(34px,5vw,64px) 0 0; overflow:hidden}
.blob{position:absolute; border-radius:50%; filter:blur(46px); opacity:.5; pointer-events:none; animation:drift 18s ease-in-out infinite}
.blob-a{width:420px; height:420px; background:#BDF3D8; top:-120px; right:-60px}
.blob-b{width:340px; height:340px; background:#FFD9C9; bottom:40px; left:-120px; animation-delay:-8s}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-24px,26px,0) scale(1.06)}}
.hero-in{position:relative; display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(24px,4vw,54px); align-items:center}
.tag{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink-2);
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 14px 6px 10px}
.dot{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(15,169,104,.6); animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(15,169,104,.5)}70%{box-shadow:0 0 0 10px rgba(15,169,104,0)}100%{box-shadow:0 0 0 0 rgba(15,169,104,0)}}
.lead{margin-top:18px; max-width:52ch; font-size:clamp(15px,1.3vw,17.5px); color:var(--ink-2)}
.hero-cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.hero-list{list-style:none; display:flex; flex-wrap:wrap; gap:8px 18px; margin:22px 0 0; padding:0; font-size:13.5px; color:var(--mute)}
.hero-list li{position:relative; padding-left:20px}
.hero-list li::before{content:""; position:absolute; left:0; top:6px; width:12px; height:7px; border-left:2px solid var(--green); border-bottom:2px solid var(--green); transform:rotate(-45deg)}

/* макет телефона */
.hero-art{position:relative; display:flex; justify-content:center; padding:20px 0 30px}
.phone{
  position:relative; width:min(300px,72vw); aspect-ratio:9/18.6; border-radius:40px;
  background:linear-gradient(160deg,#1B2A22,#0E1613); padding:12px;
  box-shadow:0 40px 70px -30px rgba(21,32,25,.55), 0 0 0 1px rgba(255,255,255,.06) inset;
  animation:floaty 6s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-14px) rotate(1.2deg)}}
.phone-notch{position:absolute; top:14px; left:50%; transform:translateX(-50%); width:34%; height:18px; background:#0B1310; border-radius:0 0 14px 14px; z-index:2}
.phone-screen{
  height:100%; border-radius:30px; background:linear-gradient(180deg,#F6FFFA,#E7F8EF);
  padding:38px 18px 18px; display:flex; flex-direction:column; gap:10px; align-items:center; overflow:hidden;
}
.ring{position:relative; width:118px; height:118px; margin-top:6px}
.ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.ring circle{fill:none; stroke-width:9; stroke-linecap:round}
.ring-bg{stroke:#CFEEDD}
.ring-fg{stroke:var(--green); stroke-dasharray:327; stroke-dashoffset:327; animation:fill 2.4s ease-out .4s forwards}
@keyframes fill{to{stroke-dashoffset:0}}
.ring span{position:absolute; inset:0; display:grid; place-items:center; font-weight:900; font-size:24px; color:var(--green-dark)}
.scr-title{font-weight:800; font-size:15px; margin-top:2px; text-align:center}
.scr-sub{font-size:11.5px; color:var(--mute); text-align:center; margin-bottom:6px}
.scr-row{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  background:#fff; border:1px solid #DCEEE4; border-radius:12px; padding:9px 12px; font-size:12px; color:var(--ink-2);
}
.scr-row b{font-size:13px}
.chip{
  position:absolute; background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:8px 14px; font-size:12.5px; font-weight:700; color:var(--ink-2); box-shadow:var(--shadow);
  animation:floaty 7s ease-in-out infinite; white-space:nowrap;
}
.chip-1{top:12%; left:-6%; animation-delay:-1.5s}
.chip-2{bottom:26%; right:-8%; animation-delay:-3s}
.chip-3{bottom:6%; left:2%; animation-delay:-4.5s}

/* бегущая строка моделей */
.marquee{margin-top:clamp(20px,3vw,40px); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:#fff; overflow:hidden; padding:12px 0}
.marquee-track{display:flex; gap:34px; white-space:nowrap; width:max-content; animation:slide 34s linear infinite;
  font-size:13.5px; color:var(--mute); font-weight:600; letter-spacing:.02em}
.marquee-track span::before{content:"•"; margin-right:34px; color:var(--green); opacity:.5}
@keyframes slide{to{transform:translateX(-50%)}}

/* ------- секции ------- */
.section{padding:clamp(46px,6vw,84px) 0}
.section-tint{background:var(--paper-2); border-block:1px solid var(--line)}
.section-dark{background:linear-gradient(160deg,#152019,#0D1712); color:#EAF4EE; border:none}
.kicker{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--green); font-weight:800; margin-bottom:12px}
.kicker-light{color:#7FE0B0}
.head{max-width:66ch; margin-bottom:32px}
.sub{margin-top:12px; color:var(--ink-2)}
.section-dark .sub{color:#A9C0B4}

/* карточки цен */
.grid{display:grid; gap:18px}
.price-grid{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px;
  display:flex; flex-direction:column; gap:8px; transition:transform .2s, box-shadow .2s, border-color .2s;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:#D7EBDD}
.card-ico{width:44px; height:44px; border-radius:14px; background:#EAF7F0; display:grid; place-items:center; margin-bottom:6px}
.card-ico svg{width:24px; height:24px; fill:none; stroke:var(--green-dark); stroke-width:1.7; stroke-linecap:round}
.card p{color:var(--ink-2); font-size:14.5px}
.price{margin-top:auto; font-size:22px; font-weight:900; color:var(--ink); letter-spacing:-.02em}
.time{font-size:12.5px; color:var(--mute); text-transform:uppercase; letter-spacing:.08em}

/* шаги */
.steps{list-style:none; counter-reset:s; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin:0; padding:0}
.steps li{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px 22px}
.steps b{
  display:inline-grid; place-items:center; width:36px; height:36px; border-radius:12px; margin-bottom:14px;
  background:var(--green); color:#fff; font-size:15px; box-shadow:0 10px 20px -12px rgba(15,169,104,.9);
}
.steps h3{margin-bottom:6px}
.steps p{color:var(--ink-2); font-size:14.5px}
.steps li::after{
  content:""; position:absolute; top:44px; right:-19px; width:19px; height:2px;
  background:repeating-linear-gradient(90deg,#CFEEDD 0 4px,transparent 4px 8px);
}
.steps li:last-child::after{display:none}

/* работы */
.works{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.work{margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.work img{width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .5s}
.work:hover img{transform:scale(1.03)}
.work figcaption{padding:14px 18px; font-size:14px; color:var(--ink-2); line-height:1.45}
.work figcaption b{color:var(--ink)}

/* цифры */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:22px}
.stat b{display:block; font-size:clamp(30px,3.6vw,46px); letter-spacing:-.03em; color:#fff; line-height:1}
.stat span{display:block; margin-top:8px; font-size:13.5px; color:#A9C0B4}

/* отзывы */
.reviews{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.review{margin:0; background:#fff; border:1px solid var(--line); border-left:4px solid var(--green);
  border-radius:16px; padding:24px}
.review p{color:var(--ink-2); font-size:15px}
.review footer{margin-top:14px; font-size:13px; color:var(--mute); font-weight:700}

/* FAQ */
.faq{display:grid; gap:10px}
details{background:#fff; border:1px solid var(--line); border-radius:14px; padding:0 20px}
details summary{
  cursor:pointer; list-style:none; padding:18px 30px 18px 0; font-weight:700; position:relative; font-size:15.5px;
}
details summary::-webkit-details-marker{display:none}
details summary::after{
  content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-weight:400; font-size:22px; color:var(--green); transition:transform .2s;
}
details[open] summary::after{content:"–"}
details p{padding:0 0 20px; color:var(--ink-2); font-size:14.5px}

/* запись */
.book{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,48px); align-items:start}
.contacts{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:14px}
.contacts li{display:grid; gap:2px; font-size:15.5px}
.contacts span{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--mute)}
.contacts a{font-weight:700; border-bottom:1.5px solid #CFEEDD}
.contacts a:hover{color:var(--green-dark); border-color:var(--green)}
.form{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:26px; box-shadow:var(--shadow)}
label{display:block; margin-bottom:13px; font-size:13px; color:var(--ink-2); font-weight:600}
input,textarea{
  width:100%; margin-top:6px; padding:12px 14px; border-radius:12px; font:inherit; font-size:14.5px;
  border:1.5px solid var(--line); background:#FFFDFA; color:var(--ink);
}
input:focus,textarea:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 4px rgba(15,169,104,.12)}
textarea{resize:vertical}
.note{margin-top:10px; font-size:12.5px; color:var(--mute)}

/* подвал */
.foot{background:#0F1A14; color:#9FB5A8; padding:40px 0; font-size:13.5px}
.foot-in{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:24px}
.foot-brand{color:#fff; font-size:16px; margin-bottom:6px}
.foot-brand b{color:#4FD69C}
.foot a:hover{color:#fff}
.foot p+p{margin-top:5px}

/* мобильная кнопка */
.callbar{display:none}

/* появление при прокрутке */
.reveal{opacity:1; transform:none}
html.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1)}
html.js .reveal.in{opacity:1; transform:none}

/* ------- адаптив ------- */
@media (max-width:1000px){
  .nav{display:none}
  .hero-in{grid-template-columns:1fr}
  .hero-art{order:-1; padding-top:6px}
  .chip-1{left:0} .chip-2{right:0} .chip-3{left:6%}
  .works{grid-template-columns:1fr}
  .book{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .top-in{min-height:64px; gap:10px}
  .top .btn-ghost{display:none}
  .top .btn{padding:9px 14px; font-size:13px}
  h1 em{white-space:normal}
  .hero-list{flex-direction:column; gap:6px}
  .chip{font-size:11px; padding:6px 10px}
  .chip-2{right:-2%}
  .foot-in{grid-template-columns:1fr}
  .foot{padding-bottom:76px}
  .callbar{
    display:flex; position:fixed; left:12px; right:12px; bottom:12px; z-index:40;
    align-items:center; justify-content:center; height:52px; border-radius:14px;
    background:var(--green); color:#fff; font-weight:800; font-size:15px;
    box-shadow:0 16px 30px -12px rgba(15,169,104,.8);
  }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  html.js .reveal{opacity:1; transform:none}
}