:root {
  --bg: #F6F8F3;
  --surface: #FFFFFF;
  --ink: #1E271F;
  --ink-soft: #59665A;
  --pine: #1E4D3B;
  --pine-deep: #143528;
  --leaf: #3E7C5B;
  --mint: #E3EFE4;
  --sand: #E9B44C;
  --line: #DCE4DA;
  --maxw: 1060px;
  --shadow: 0 14px 40px rgba(20,53,40,.12);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Onest',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  font-size:17px;
}
h1,h2,h3{font-family:'Podkova',serif;line-height:1.25;font-weight:700}
a{color:var(--pine)}
:focus-visible{outline:3px solid var(--leaf);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* HEADER */
header{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:100;backdrop-filter:blur(12px);background:rgba(246,248,243,.92)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo svg{width:34px;height:34px;flex:none}
.logo span{font-family:'Podkova',serif;font-weight:700;font-size:18px}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{color:var(--ink-soft);text-decoration:none;font-size:15px;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.btn{
  display:inline-block;border:none;cursor:pointer;text-decoration:none;
  font-family:'Onest',sans-serif;font-weight:600;font-size:16px;
  padding:14px 26px;border-radius:10px;transition:all .2s;
}
.btn-primary{background:var(--pine);color:#fff !important;}
.btn-primary:hover{transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--leaf);color:var(--pine)}
.nav .btn{padding:9px 18px;font-size:14px}

/* HERO */
.hero{padding:62px 0 70px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
.hero h1{font-size:clamp(27px,3.8vw,40px);margin-bottom:18px}
.hero .lead{font-size:18.5px;color:var(--ink-soft);max-width:52ch;margin-bottom:26px}
.hero-facts{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:30px}
.fact{font-size:15px;color:var(--ink-soft)}
.fact b{display:block;font-family:'Podkova',serif;font-size:21px;color:var(--pine)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}

/* PHONE MOCKUP — без скролла, фиксированная высота */
.phone{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
  max-width:390px;
  margin-left:auto;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.phone-top{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 18px;
  border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.avatar{
  width:38px;height:38px;border-radius:50%;background:var(--pine);
  display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px;flex:none;
  font-family:'Podkova',serif;
}
.phone-top .name{font-weight:600;font-size:15px}
.phone-top .status{font-size:12.5px;color:var(--leaf)}
.chat{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:440px;
  flex-shrink:0;
  /* нет overflow, нет скролла */
}
.msg{
  max-width:84%;
  padding:11px 15px;
  border-radius:14px;
  font-size:14.5px;
  line-height:1.5;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .4s ease,transform .4s ease;
  flex-shrink:0;
}
.msg.show{
  opacity:1;
  transform:none;
}
.msg.client{
  background:#EFF2EC;
  border-bottom-left-radius:4px;
  align-self:flex-start;
}
.msg.bot{
  background:var(--pine);
  color:#fff;
  border-bottom-right-radius:4px;
  align-self:flex-end;
}
.msg .tag{
  display:block;
  font-size:11.5px;
  opacity:.7;
  margin-bottom:3px;
}
.typing{
  align-self:flex-end;
  display:none;
  gap:5px;
  padding:12px 16px;
  background:var(--pine);
  border-radius:14px;
  border-bottom-right-radius:4px;
  flex-shrink:0;
}
.typing.show{display:flex}
.typing i{
  width:6px;height:6px;border-radius:50%;background:#fff;opacity:.6;
  animation:blink 1s infinite;
}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}

.phone-note{
  text-align:center;
  font-size:13px;
  color:var(--ink-soft);
  padding:11px 14px;
  border-top:1px solid var(--line);
  background:var(--mint);
  flex-shrink:0;
}

/* SECTIONS */
section{padding:68px 0}
section.alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:660px;margin-bottom:40px}
.sec-head h2{font-size:clamp(23px,3vw,30px);margin-bottom:12px}
.sec-head p{color:var(--ink-soft)}

/* CARDS */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:28px 24px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
section.alt .card{background:var(--bg)}
.card .pict{width:52px;height:52px;border-radius:12px;background:var(--mint);display:grid;place-items:center;margin-bottom:16px}
.card .pict svg{width:28px;height:28px}
.card h3{font-size:18.5px;margin-bottom:12px}
.card > p{font-size:15px;color:var(--ink-soft)}
.card ul{list-style:none;margin:16px 0;flex:1}
.card li{font-size:14.5px;color:var(--ink-soft);padding:5px 0 5px 22px;position:relative}
.card li::before{content:"—";position:absolute;left:0;color:var(--leaf)}
.price{font-family:'Podkova',serif;font-weight:700;font-size:22px;color:var(--pine);margin:4px 0 2px}
.price small{font-size:13px;color:var(--sand);font-family:'Onest',sans-serif;font-weight:600;vertical-align:middle}
.term{font-size:13.5px;color:var(--ink-soft);margin-bottom:18px}
.card .btn{text-align:center}
.badge{display:inline-block;background:var(--sand);color:#fff;font-size:11px;font-weight:600;padding:2px 12px;border-radius:20px;margin-bottom:8px;letter-spacing:.04em}

/* PORTFOLIO */
.work{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;margin-bottom:26px;
}
.work:nth-child(even) .work-visual{order:2}
.work-visual{background:var(--mint);display:grid;place-items:center;padding:34px;min-height:300px}
.work-visual svg{width:100%;max-width:380px;height:auto;display:block}
.work-body{padding:34px 32px;display:flex;flex-direction:column}
.work-body .kind{font-size:13px;font-weight:600;color:var(--leaf);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.work-body h3{font-size:20px;margin-bottom:12px}
.work-body p{font-size:15px;color:var(--ink-soft)}
.work-body ul{list-style:none;margin:16px 0 0}
.work-body li{font-size:14.5px;color:var(--ink-soft);padding:4px 0 4px 22px;position:relative}
.work-body li::before{content:"—";position:absolute;left:0;color:var(--leaf)}
.work-meta{margin-top:auto;padding-top:18px;font-size:13.5px;color:var(--ink-soft)}
.work-meta b{color:var(--pine)}

/* NICHES */
.niches{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.niche{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px;transition:transform .2s}
.niche:hover{transform:translateY(-3px)}
.niche .pict{width:44px;height:44px;border-radius:10px;background:var(--mint);display:grid;place-items:center;margin-bottom:12px}
.niche .pict svg{width:24px;height:24px}
.niche h3{font-size:16px;margin-bottom:6px}
.niche p{font-size:14px;color:var(--ink-soft)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{border-left:3px solid var(--leaf);padding:4px 0 4px 18px}
.step h3{font-size:16px;margin-bottom:6px}
.step p{font-size:14.5px;color:var(--ink-soft)}

.guar{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.guar .g{border-top:3px solid var(--leaf);padding-top:16px}
.guar h3{font-size:16.5px;margin-bottom:8px}
.guar p{font-size:14.5px;color:var(--ink-soft)}

.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative;font-weight:600;font-size:16.5px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:6px;top:14px;font-size:22px;color:var(--leaf);font-family:'Podkova',serif}
.faq-item[open] summary::after{content:"–"}
.faq-item .a{padding:0 0 20px;color:var(--ink-soft);font-size:15.5px;max-width:70ch}

/* CONTACT FORM */
.contact{
  background:var(--pine-deep);color:#fff;border-radius:18px;
  padding:54px 44px;position:relative;overflow:hidden;
}
.contact::before{
  content:"";position:absolute;inset:0;opacity:.08;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px,#fff 1.2px,transparent 0);
  background-size:26px 26px;
}
.contact > *{position:relative}
.contact h2{font-size:clamp(23px,3vw,32px);margin-bottom:14px}
.contact p{color:#BCCFC2;max-width:56ch;margin:0 auto 30px}
.contact-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
.btn-tg{background:#2A9D8F;color:#fff}
.btn-tg:hover{background:#21867A}
.btn-wa{background:#4C9A57;color:#fff}
.btn-wa:hover{background:#3E8248}
.btn-mail{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.btn-mail:hover{border-color:#fff}
.contact .hours{color:#8FAF9C;font-size:14px}

/* FORM */
.form-wrap{max-width:560px;margin:0 auto}
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:14px;font-weight:500;color:#BCCFC2;margin-bottom:4px}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:12px 16px;border-radius:8px;border:1.5px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.07);color:#fff;font-size:15px;font-family:'Onest',sans-serif;transition:border .2s;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--leaf);background:rgba(255,255,255,.12);
}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(255,255,255,.4)}
.form-group select option{color:var(--ink)}
.form-group textarea{min-height:100px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-submit{width:100%;padding:16px;font-size:17px;margin-top:8px}
.form-success{display:none;text-align:center;padding:30px 0}
.form-success.show{display:block}
.form-success svg{width:60px;height:60px;margin-bottom:16px}
.form-error{color:#FF6B6B;font-size:13px;margin-top:4px;display:none}
.form-error.show{display:block}

/* POPUP */
.popup-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
  z-index:1000;align-items:center;justify-content:center;padding:20px;
}
.popup-overlay.active{display:flex}
.popup{
  background:var(--bg);border-radius:20px;max-width:520px;width:100%;padding:40px 36px;
  position:relative;max-height:90vh;overflow-y:auto;box-shadow:0 24px 60px rgba(0,0,0,.4);
  animation:popIn .3s ease;
}
@keyframes popIn{from{opacity:0;transform:scale(.95) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
.popup-close{
  position:absolute;top:16px;right:20px;background:none;border:none;font-size:28px;
  color:var(--ink-soft);cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .2s;
}
.popup-close:hover{background:rgba(0,0,0,.06)}
.popup h2{font-size:24px;margin-bottom:8px}
.popup p{color:var(--ink-soft);margin-bottom:24px}
.popup .form-group label{color:var(--ink-soft)}
.popup .form-group input,.popup .form-group select,.popup .form-group textarea{
  background:var(--surface);border:1.5px solid var(--line);color:var(--ink);
}
.popup .form-group input:focus,.popup .form-group select:focus,.popup .form-group textarea:focus{
  border-color:var(--pine);background:var(--surface);
}
.popup .form-group input::placeholder,.popup .form-group textarea::placeholder{color:var(--ink-soft)}
.popup .form-submit{background:var(--pine);color:#fff}
.popup .form-submit:hover{background:var(--pine-deep)}

footer{padding:34px 0;color:var(--ink-soft);font-size:14px;border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* PHONE INPUT VALIDATION STYLES */
.form-group input.is-invalid {
  border-color: #FF6B6B !important;
  background: rgba(255,107,107,0.08) !important;
}
.form-group input.is-valid {
  border-color: #4C9A57 !important;
  background: rgba(76,154,87,0.08) !important;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .msg{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .phone{margin:0 auto;max-width:100%}
  .chat{min-height:380px}
  .cards,.steps,.guar,.niches{grid-template-columns:1fr}
  .work{grid-template-columns:1fr}
  .work:nth-child(even) .work-visual{order:0}
  .nav-links a:not(.btn){display:none}
  section{padding:52px 0}
  .contact{padding:40px 22px}
  footer .wrap{justify-content:center;text-align:center}
  .form-row{grid-template-columns:1fr}
  .popup{padding:28px 20px}
}

/* Адаптив для совсем маленьких экранов */
@media (max-width:480px){
  .hero{padding:40px 0 50px}
  .hero h1{font-size:24px}
  .hero .lead{font-size:16px}
  .phone{max-width:100%}
  .chat{min-height:340px;padding:14px}
  .msg{font-size:13px;padding:9px 12px}
  .phone-note{font-size:12px;padding:9px 12px}
  .phone-top{padding:10px 14px}
  .phone-top .name{font-size:13px}
  .phone-top .status{font-size:11px}
  .avatar{width:32px;height:32px;font-size:12px}
  .work-body{padding:24px 18px}
  .work-visual{padding:20px;min-height:200px}
  .contact{padding:30px 16px}
  section{padding:40px 0}
}