/* ================================================================
   СМАРТ САД — main.css
   Общие стили для всего сайта
   ================================================================ */

:root{
  --navy:#0d1b2a;
  --navy-2:#142638;
  --green:#2d7a3a;
  --green-deep:#1f5a29;
  --lime:#7bc142;
  --lime-soft:#a8d97a;
  --cream:#f4f1ea;
  --paper:#fbfaf6;
  --mist:#e8efe7;
  --ink:#0d1b2a;
  --ink-2:#3a4a5c;
  --line:#dfe4dc;
  --shadow: 0 24px 60px -28px rgba(13,27,42,.28), 0 2px 6px -2px rgba(13,27,42,.06);
  --shadow-lg: 0 40px 80px -32px rgba(13,27,42,.4);
  --radius: 18px;
  --radius-sm: 12px;
  --maxw: 1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Nunito', system-ui, sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
h1,h2,h3,h4{font-family:'Geologica', sans-serif; font-weight:600; letter-spacing:-.01em; line-height:1.05; margin:0; text-wrap:balance;}
h2{font-size:clamp(32px, 4.2vw, 56px);}
h3{font-size:clamp(22px, 2vw, 26px); font-weight:500;}
p{margin:0; text-wrap:pretty}
a{color:inherit; text-decoration:none}
img,svg{display:block; max-width:100%}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
input,select,textarea{font:inherit; color:inherit}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-deep);
}
.eyebrow::before{
  content:""; width:24px; height:1.5px; background:var(--lime);
}
.section{padding:120px 0; position:relative}
.section--tight{padding:80px 0}

/* ============ HEADER ============ */
header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  backdrop-filter:blur(14px);
  background:rgba(251,250,246,.78);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
header.scrolled{border-color:var(--line); background:rgba(251,250,246,.92);}
.nav{
  display:flex; align-items:center; justify-content:flex-start;
  padding:18px clamp(28px, 4%, 80px);
  max-width:1480px; margin:0 auto;
  gap:0;
}
.logo{
  display:flex; align-items:center; gap:12px;
  font-family:'Geologica', sans-serif; font-weight:600; font-size:20px;
  flex-shrink:0; white-space:nowrap;
}
.logo-mark{
  width:96px; height:96px; border-radius:20px;
  overflow:hidden; flex-shrink:0;
  box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.logo-mark img{display:block; width:100%; height:100%; object-fit:cover;}
.logo small{display:block; font-family:'Nunito'; font-weight:400; font-size:11px; color:var(--ink-2); letter-spacing:.05em; text-transform:uppercase; margin-top:2px}
.nav-tagline{display:none;}
.nav-links{display:flex; align-items:center; gap:20px; font-size:14px; font-weight:500; flex-shrink:0; margin-left:78px;}
.nav-links > a{position:relative; padding:6px 0; color:var(--ink-2); transition:color .2s}
.nav-links > a:hover{color:var(--green-deep)}
.nav-links > a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--lime); transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.nav-links > a:hover::after{transform:scaleX(1)}
.nav-cta{
  display:inline-flex; align-items:center; gap:8px; margin-left:24px;
  padding:10px 18px; border-radius:999px;
  background:var(--navy); color:var(--paper);
  font-size:14px; font-weight:600;
  flex-shrink:0; white-space:nowrap;
  transition:transform .2s, background .2s;
}
.nav-cta:hover{background:var(--green-deep); transform:translateY(-1px)}
.nav-cta::after{content:"→"; transition:transform .2s}
.nav-cta:hover::after{transform:translateX(3px)}
.nav-phone{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--ff-main); font-size:14px; font-weight:600;
  color:var(--ink); white-space:nowrap; flex-shrink:0;
  text-decoration:none; transition:color .2s;
  margin-left:20px;
}
.nav-phone:hover{color:var(--green)}
.nav-phone::before{content:"📞"; font-size:13px}
.burger{display:none; width:42px; height:42px; border-radius:12px; background:var(--mist); place-items:center}
.burger span{width:18px; height:1.6px; background:var(--ink); position:relative; display:block; transition:background .2s}
.burger span::before, .burger span::after{content:""; position:absolute; left:0; width:100%; height:1.6px; background:var(--ink); transition:transform .3s}
.burger span::before{top:-6px} .burger span::after{top:6px}
.burger.open span{background:transparent}
.burger.open span::before{transform:rotate(45deg) translate(4px, 4px)}
.burger.open span::after{transform:rotate(-45deg) translate(4px, -4px)}

/* ============ NAV MESSENGERS ============ */
.nav-messengers{display:flex; align-items:center; gap:6px; flex-shrink:0; margin-left:auto;}
.nav-msg-btn{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1.5px solid var(--line); color:var(--ink-2);
  transition:background .2s, border-color .2s, color .2s, transform .2s;
  flex-shrink:0;
}
.nav-msg-btn:hover{background:var(--mist); border-color:var(--navy); color:var(--navy); transform:translateY(-1px)}
.nav-msg-btn svg{width:18px; height:18px; display:block}
.nav-msg-btn.nav-msg-max{
  font-family:'Geologica',sans-serif; font-weight:700; font-size:9px;
  letter-spacing:.05em; width:auto; padding:0 10px; border-radius:999px;
}

/* ============ NAV DROPDOWN ============ */
.nav-dropdown{position:relative;}
.nav-drop-btn{
  position:relative; padding:6px 0; color:var(--ink-2);
  font-size:14.5px; font-weight:500; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px;
  transition:color .2s; background:none; border:0;
  font-family:'Nunito',system-ui,sans-serif;
}
.nav-drop-btn:hover{color:var(--green-deep)}
.drop-arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:5px;
  background:var(--mist); color:var(--green-deep);
  font-size:10px; font-weight:700; line-height:1; flex-shrink:0;
  transition:transform .25s, background .2s, color .2s;
}
.nav-drop-btn:hover .drop-arrow{background:var(--green-deep); color:#fff;}
.nav-dropdown:hover .drop-arrow{transform:rotate(180deg)}
.dropdown-menu{
  position:absolute; top:calc(100% + 14px); left:-16px;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:8px;
  min-width:250px; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .2s, transform .2s, visibility .2s;
  z-index:100;
}
.nav-dropdown:hover .dropdown-menu,
.dropdown-menu.open{opacity:1; visibility:visible; transform:translateY(0)}
.dropdown-menu a{
  display:block; padding:10px 14px; border-radius:8px;
  font-size:14px; color:var(--ink-2); font-weight:500;
  transition:background .15s, color .15s;
}
.dropdown-menu a:hover{background:var(--mist); color:var(--green-deep)}

/* ============ BREADCRUMB ============ */
.breadcrumb-wrap{padding-top:96px; background:var(--paper);}
.breadcrumb{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:16px 0; font-size:13px; color:var(--ink-2); max-width:var(--maxw); margin:0 auto; padding-left:28px; padding-right:28px;
}
.breadcrumb a{color:var(--ink-2); transition:color .2s;}
.breadcrumb a:hover{color:var(--green-deep)}
.breadcrumb-sep{color:var(--line); font-size:16px;}
.breadcrumb-current{color:var(--navy); font-weight:500;}

/* ============ HERO (главная) ============ */
.hero{
  position:relative;
  padding: 160px 0 90px;
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns: 1.15fr .85fr; gap:60px; align-items:end;
}
.hero h1{
  font-size:clamp(44px, 6.4vw, 92px);
  font-weight:600;
  letter-spacing:-.02em;
  margin:24px 0 28px;
}
.hero h1 em{
  font-style:normal; color:var(--green-deep); position:relative; white-space:nowrap;
  isolation:isolate;
}
.hero h1 em::after{
  content:""; position:absolute; left:-2%; right:-2%; bottom:6px; height:14px;
  background:var(--lime); opacity:.42; z-index:-1; border-radius:4px;
  transform:skew(-6deg);
}
.hero-sub{
  font-size:clamp(17px, 1.4vw, 20px); color:var(--ink-2);
  max-width:540px; margin-bottom:36px;
}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:64px}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 26px; border-radius:14px;
  font-weight:600; font-size:15.5px;
  border:1.5px solid transparent;
  transition: transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s;
  cursor:pointer; white-space:nowrap;
}
.btn-primary{background:var(--navy); color:var(--paper); border-color:rgba(123,193,66,.55);}
.btn-primary:hover{background:var(--green-deep); transform:translateY(-2px); box-shadow:0 16px 30px -16px rgba(31,90,41,.6); border-color:rgba(123,193,66,.4)}
.btn-primary .arrow{
  width:22px; height:22px; border-radius:50%; background:var(--lime); color:var(--navy);
  display:grid; place-items:center; font-size:12px; transition:transform .2s;
}
.btn-primary:hover .arrow{transform:translateX(2px) rotate(-12deg)}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--navy);}
.btn-ghost:hover{background:var(--navy); color:var(--paper); transform:translateY(-2px); border-color:var(--navy)}

.stat-row{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
  padding-top:32px; border-top:1px solid var(--line);
}
.stat-num{
  font-family:'Geologica'; font-weight:500;
  font-size:clamp(34px, 3.4vw, 48px); line-height:1; color:var(--navy);
  display:flex; align-items:baseline; gap:4px;
}
.stat-num sup{font-size:.55em; color:var(--green); font-weight:500; top:-.5em; position:relative; margin-left:2px}
.stat-label{font-size:14px; color:var(--ink-2); margin-top:8px; line-height:1.4}

.hero-visual{
  position:relative; aspect-ratio: 4/5;
  min-height: 480px;
  display:grid;
  grid-template-columns:1.4fr .8fr;
  grid-template-rows: 1.6fr 1fr;
  gap:14px;
}
.hero-card{
  border-radius:22px; overflow:hidden; position:relative;
  background:var(--mist);
  box-shadow:var(--shadow);
  min-height: 100px;
}
.hero-card.big{grid-row:1 / span 2; background:var(--green-deep);}
.hero-card.b{background:var(--navy);}
.hero-card.c{background:var(--green);}

.hero-card-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
  color:transparent; /* скрываем alt-текст и иконку сломанного изображения */
}
.ph-img{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(45deg, rgba(13,27,42,.06) 0 8px, transparent 8px 18px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:18px;
}
.ph-img.dark{background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 8px, transparent 8px 18px);}
.ph-tag{
  font-family:'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size:11px; letter-spacing:.04em;
  background:rgba(13,27,42,.78); color:var(--lime);
  padding:6px 9px; border-radius:6px; align-self:flex-start;
}
.ph-tag.light{background:rgba(255,255,255,.12); color:#fff}
.hero-badge{
  position:absolute; bottom:32px; left:-16px; z-index:5;
  background:var(--lime); color:var(--navy);
  border-radius:18px; padding:18px 22px;
  font-family:'Geologica'; font-weight:600; font-size:14px;
  box-shadow:var(--shadow);
  display:flex; align-items:center; gap:12px;
}
.hero-badge svg{width:28px; height:28px;}
.hero-floating{
  position:absolute; top:24px; right:-20px; z-index:5;
  background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:14px 16px;
  font-size:13px; color:var(--ink-2);
  box-shadow:var(--shadow); display:flex; gap:12px; align-items:center;
  max-width:240px;
}
.hero-floating strong{display:block; color:var(--navy); font-family:'Geologica'; font-weight:500; font-size:14px; margin-bottom:2px}
.hero-floating .pulse{
  width:10px; height:10px; border-radius:50%; background:var(--green); flex-shrink:0;
  box-shadow:0 0 0 0 rgba(45,122,58,.6); animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(45,122,58,.5)}
  70%{box-shadow:0 0 0 12px rgba(45,122,58,0)}
  100%{box-shadow:0 0 0 0 rgba(45,122,58,0)}
}

/* ============ RIBBON ============ */
.ribbon{
  background:var(--navy); color:var(--mist);
  padding:18px 0; overflow:hidden; position:relative;
}
.ribbon-track{
  display:flex; gap:60px; white-space:nowrap;
  animation:slide 32s linear infinite;
  font-family:'Geologica'; font-weight:400; font-size:15px;
}
.ribbon-track span{display:flex; align-items:center; gap:60px;}
.ribbon-track i{color:var(--lime); font-style:normal; font-size:18px}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============ SERVICES (главная) ============ */
.services .head{
  display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:end;
  margin-bottom:64px;
}
.services .head p{color:var(--ink-2); max-width:480px; font-size:17px}
.svc-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;}
.svc{
  position:relative; padding:32px 28px 28px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  transition: transform .3s ease, box-shadow .3s ease, background .3s, color .3s, border-color .3s;
  overflow:hidden;
  display:flex; flex-direction:column; gap:14px;
  min-height:300px;
}
.svc::before{
  content:""; position:absolute; inset:auto -40% -50% auto; width:120%; height:120%;
  background:radial-gradient(circle, var(--green-deep) 0%, transparent 65%);
  opacity:0; transition:opacity .4s ease;
  pointer-events:none;
}
.svc:hover{
  transform:translateY(-6px); border-color:var(--green-deep); background:var(--navy); color:var(--mist);
  box-shadow:var(--shadow-lg);
}
.svc:hover::before{opacity:.55}
.svc:hover .svc-icon{background:var(--lime); color:var(--navy)}
.svc:hover .svc-cta{color:var(--lime)}
.svc-icon{
  width:56px; height:56px; border-radius:14px;
  background:var(--mist); color:var(--green-deep);
  display:grid; place-items:center;
  transition: background .3s, color .3s;
  position:relative; z-index:1;
}
.svc-icon svg{width:30px; height:30px;}
.svc h3{font-family:'Geologica'; font-weight:600; font-size:22px; position:relative; z-index:1}
.svc p{font-size:15px; color:inherit; opacity:.78; position:relative; z-index:1; flex:1}
.svc-cta{
  position:relative; z-index:1;
  font-size:14px; font-weight:600; color:var(--green-deep);
  display:inline-flex; align-items:center; gap:8px;
  transition:color .3s, gap .3s;
}
.svc:hover .svc-cta{gap:14px}
.svc-num{
  position:absolute; top:24px; right:28px; z-index:1;
  font-family:'Geologica'; font-weight:400; font-size:13px;
  color:var(--ink-2); opacity:.5;
}
.svc:hover .svc-num{color:var(--lime); opacity:1}

/* ============ UTP DARK ============ */
.utp{
  background:var(--navy); color:var(--mist);
  position:relative; overflow:hidden;
  padding:130px 0;
}
.utp::before{
  content:""; position:absolute; top:-20%; right:-10%;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, var(--green) 0%, transparent 70%);
  opacity:.35; filter:blur(20px);
}
.utp::after{
  content:""; position:absolute; bottom:-30%; left:-15%;
  width:500px; height:500px; border-radius:50%;
  background:radial-gradient(circle, var(--lime) 0%, transparent 65%);
  opacity:.18; filter:blur(20px);
}
.utp .wrap{position:relative; z-index:1}
.utp-quote{
  font-family:'Geologica'; font-weight:500;
  font-size:clamp(28px, 3.4vw, 46px); line-height:1.18;
  max-width:1000px; margin:24px 0 80px;
  letter-spacing:-.01em;
}
.utp-quote em{font-style:normal; color:var(--lime);}
.utp-quote .mark{
  color:var(--lime); font-size:1.3em; font-family:'Geologica'; opacity:.7;
  display:inline-block; transform:translateY(.1em);
}
.utp-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  overflow:hidden;
}
.utp-item{
  background:var(--navy); padding:36px 32px;
  transition:background .3s;
}
.utp-item:hover{background:var(--navy-2)}
.utp-num{
  font-family:'Geologica'; font-weight:500; font-size:14px;
  color:var(--lime); letter-spacing:.1em;
  display:flex; align-items:center; gap:10px; margin-bottom:18px;
}
.utp-num::after{content:""; flex:1; height:1px; background:rgba(255,255,255,.12)}
.utp-item h4{font-family:'Geologica'; font-weight:500; font-size:22px; margin-bottom:12px;}
.utp-item p{font-size:15px; color:rgba(255,255,255,.7); line-height:1.6}
.utp .eyebrow{color:var(--lime)}

/* ============ CONFIGURATOR ============ */
.config{
  background:var(--cream); position:relative; overflow:hidden;
}
.config::before{
  content:""; position:absolute; top:80px; right:-200px;
  width:500px; height:500px; border-radius:50%;
  border:1.5px dashed var(--green); opacity:.18;
}
.config-shell{
  margin-top:60px;
  display:grid; grid-template-columns: 1fr 380px; gap:0;
  border-radius:24px; overflow:hidden;
  background:#fff; border:1px solid var(--line);
  box-shadow:var(--shadow);
  min-height:560px;
}
.config-main{padding:44px 48px; display:flex; flex-direction:column;}
.config-side{
  background:var(--navy); color:var(--mist);
  padding:44px 36px; display:flex; flex-direction:column; gap:20px;
  position:relative; overflow:hidden;
}
.config-side::before{
  content:""; position:absolute; right:-100px; bottom:-100px;
  width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, var(--green) 0%, transparent 65%);
  opacity:.4;
}
.progress{
  display:flex; align-items:center; gap:8px; margin-bottom:36px;
}
.progress-step{
  display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-2);
  flex:1;
}
.progress-step .dot{
  width:28px; height:28px; border-radius:50%; background:var(--mist);
  display:grid; place-items:center; font-weight:600; font-size:13px;
  color:var(--ink-2); transition:all .3s;
  flex-shrink:0;
}
.progress-step.active .dot{background:var(--navy); color:var(--lime)}
.progress-step.done .dot{background:var(--green); color:#fff}
.progress-step.done .dot::after{content:"✓"}
.progress-step.done .dot span{display:none}
.progress-step .lbl{font-weight:500}
.progress-step.active .lbl{color:var(--navy)}
.progress-line{flex:1; height:1.5px; background:var(--line); margin:0 4px}
.progress-step.done + .progress-line{background:var(--green)}

.step-title{
  font-family:'Geologica'; font-weight:500; font-size:24px; letter-spacing:-.01em;
  margin-bottom:6px;
}
.step-sub{color:var(--ink-2); font-size:15px; margin-bottom:28px;}
.step{display:none; flex:1; flex-direction:column;}
.step.active{display:flex}

.options{display:grid; gap:12px;}
.options.cols-3{grid-template-columns:repeat(3, 1fr);}
.options.cols-2{grid-template-columns:repeat(2, 1fr);}
.opt{
  padding:20px 22px; border:1.5px solid var(--line); border-radius:14px;
  background:#fff; cursor:pointer; transition:all .2s;
  display:flex; flex-direction:column; gap:6px; text-align:left;
  position:relative;
}
.opt:hover{border-color:var(--green); background:var(--mist)}
.opt.selected{border-color:var(--navy); background:var(--navy); color:var(--paper); }
.opt.selected .opt-sub{color:rgba(255,255,255,.7)}
.opt.selected::after{
  content:"✓"; position:absolute; top:14px; right:14px;
  width:22px; height:22px; border-radius:50%;
  background:var(--lime); color:var(--navy);
  display:grid; place-items:center; font-weight:700; font-size:12px;
}
.opt-title{font-family:'Geologica'; font-weight:500; font-size:16px; padding-right:30px}
.opt-sub{font-size:13px; color:var(--ink-2); line-height:1.4}

.slider-wrap{padding:8px 4px;}
.slider-vals{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:18px;
}
.slider-vals .big{font-family:'Geologica'; font-weight:500; font-size:38px; color:var(--navy);}
.slider-vals .unit{color:var(--ink-2); font-size:14px; margin-left:8px}
.slider-vals .range{color:var(--ink-2); font-size:13px}
input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:6px; border-radius:6px;
  background:linear-gradient(to right, var(--green) 0%, var(--green) var(--pct, 30%), var(--line) var(--pct, 30%), var(--line) 100%);
  outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:var(--navy); border:3px solid var(--lime);
  cursor:pointer; box-shadow:0 4px 12px -2px rgba(0,0,0,.2);
}
input[type=range]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:var(--navy); border:3px solid var(--lime);
  cursor:pointer;
}
.area-marks{
  display:flex; justify-content:space-between; margin-top:14px;
  font-size:12px; color:var(--ink-2); font-family:'Nunito';
}

.addons{display:flex; flex-direction:column; gap:10px}
.addon{
  display:flex; align-items:center; gap:16px;
  padding:16px 20px; border:1.5px solid var(--line); border-radius:14px;
  cursor:pointer; transition:all .2s; background:#fff;
}
.addon:hover{border-color:var(--green); background:var(--mist)}
.addon.on{border-color:var(--green); background:var(--mist);}
.addon-check{
  width:24px; height:24px; border-radius:7px;
  border:1.5px solid var(--line); background:#fff;
  display:grid; place-items:center; flex-shrink:0;
  transition:all .2s;
}
.addon.on .addon-check{background:var(--green); border-color:var(--green); color:#fff;}
.addon.on .addon-check::after{content:"✓"; font-weight:700; font-size:14px}
.addon-body{flex:1}
.addon-body strong{font-family:'Geologica'; font-weight:500; font-size:15px; display:block; margin-bottom:2px}
.addon-body span{font-size:13px; color:var(--ink-2)}
.addon-price{font-family:'Geologica'; font-weight:500; font-size:15px; color:var(--green-deep); white-space:nowrap}

.step-nav{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:auto; padding-top:32px;
}
.btn-back{
  color:var(--ink-2); font-weight:600; font-size:14px;
  display:inline-flex; align-items:center; gap:6px; padding:8px 0;
}
.btn-back:hover{color:var(--navy)}
.btn-back:disabled{opacity:.35; cursor:not-allowed}
.btn-next{
  background:var(--navy); color:var(--paper);
  padding:14px 24px; border-radius:12px; font-weight:600; font-size:14.5px;
  display:inline-flex; align-items:center; gap:10px; border:1.5px solid rgba(123,193,66,.55);
  transition: background .2s, transform .2s, border-color .2s;
}
.btn-next:hover{background:var(--green-deep); transform:translateX(2px)}
.btn-next .arrow{
  width:22px; height:22px; border-radius:50%; background:var(--lime); color:var(--navy);
  display:grid; place-items:center; font-size:12px;
}
.btn-next:disabled{opacity:.45; cursor:not-allowed; transform:none}

.config-side h4{
  font-family:'Geologica'; font-weight:500; font-size:14px;
  color:var(--lime); letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:4px; position:relative; z-index:1;
}
.config-side .your{position:relative; z-index:1}
.your-row{
  display:flex; justify-content:space-between; gap:12px;
  padding:14px 0; border-bottom:1px dashed rgba(255,255,255,.12);
  font-size:14.5px;
}
.your-row .k{color:rgba(255,255,255,.6); flex-shrink:0}
.your-row .v{text-align:right; font-weight:500;}
.total-block{
  position:relative; z-index:1; margin-top:auto;
  padding:24px; background:rgba(255,255,255,.06); border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
}
.total-block .tag{
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--lime-soft); margin-bottom:8px;
}
.total-num{
  font-family:'Geologica'; font-weight:600;
  font-size:38px; line-height:1; letter-spacing:-.01em;
  color:#fff;
}
.total-num span{font-size:.5em; color:var(--lime-soft); font-weight:400; margin-left:4px}
.total-note{font-size:12px; color:rgba(255,255,255,.55); margin-top:10px; line-height:1.5}
.btn-side{
  margin-top:16px; width:100%;
  background:var(--lime); color:var(--navy);
  padding:14px; border-radius:12px; font-weight:700; font-size:14px;
  text-align:center; display:block; border:1.5px solid rgba(255,255,255,.35);
  transition:background .2s, transform .2s;
}
.btn-side:hover{background:#92d65a; transform:translateY(-1px)}

/* ============ PORTFOLIO (главная) ============ */
.portfolio .head{display:flex; justify-content:space-between; align-items:end; margin-bottom:40px; gap:30px; flex-wrap:wrap}
.filters,
.portfolio-filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px}
.filter,
.filter-btn{
  padding:10px 18px; border-radius:999px; font-size:14px; font-weight:600;
  background:transparent; color:var(--ink-2); border:1.5px solid var(--line);
  transition:all .2s; cursor:pointer;
}
.filter:hover,.filter-btn:hover{border-color:var(--navy); color:var(--navy)}
.filter.active,.filter-btn.active{background:var(--navy); color:var(--paper); border-color:var(--navy)}
.page-btn{
  padding:10px 18px; border-radius:999px; font-size:14px; font-weight:600;
  background:transparent; color:var(--ink-2); border:1.5px solid var(--line);
  transition:all .2s; cursor:pointer; min-width:42px; text-align:center;
}
.page-btn:hover:not(:disabled){border-color:var(--navy); color:var(--navy)}
.page-btn.active{background:var(--navy); color:var(--paper); border-color:var(--navy)}
.page-btn:disabled{opacity:.35; cursor:default}
.portfolio-grid{
  display:grid; grid-template-columns:repeat(12, 1fr); gap:18px;
}
.pcard{
  grid-column: span 4;
  position:relative; border-radius:20px; overflow:hidden;
  aspect-ratio: 4/3.4; cursor:pointer; background:var(--mist);
  transition:transform .35s ease;
}
.pcard.wide{grid-column: span 6}
.pcard.tall{grid-column: span 4; aspect-ratio: 4/4.8}
.pcard .ph-img{padding:24px}
.pcard:hover{transform:translateY(-6px)}
.pcard.hidden{display:none}
.pcard-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(13,27,42,.92) 100%);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:24px; color:var(--paper);
  transition:background .3s;
}
.pcard:hover .pcard-overlay{background: linear-gradient(180deg, rgba(13,27,42,.2) 0%, rgba(13,27,42,.95) 100%);}
.pcard-type{
  align-self:flex-start;
  font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--navy); background:var(--lime);
  padding:5px 10px; border-radius:6px;
  margin-bottom:auto;
}
.pcard h3{
  font-family:'Geologica'; font-weight:500; font-size:22px; margin-bottom:6px;
  transform: translateY(8px); opacity:0; transition:all .3s ease;
}
.pcard p{
  font-size:14px; color:rgba(255,255,255,.78);
  transform: translateY(8px); opacity:0; transition:all .3s ease .05s;
}
.pcard:hover h3, .pcard:hover p{transform:translateY(0); opacity:1}
.pcard h3.always{transform:none; opacity:1}
.pcard-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .55s ease;
  color:transparent;
}
.pcard:hover .pcard-img{transform:scale(1.06)}
.more-btn{
  display:flex; margin:40px auto 0;
  padding:16px 36px; border-radius:14px;
  background:var(--navy); color:var(--paper);
  font-weight:600; font-size:15px; gap:10px; align-items:center;
  transition:background .2s, transform .2s;
}
.more-btn:hover{background:var(--green-deep); transform:translateY(-2px)}

/* ============ OWNER ============ */
.owner{
  background:linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%);
}
.owner-grid{
  display:grid; grid-template-columns: .9fr 1.1fr; gap:80px; align-items:center;
}
.owner-photo{
  position:relative; aspect-ratio:4/5; border-radius:24px; overflow:hidden;
  background:var(--green-deep); box-shadow:var(--shadow);
}
.owner-photo .ph-img{padding:24px}
.owner-photo > img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  display:block;
}
.owner-badge{
  position:absolute; bottom:24px; left:24px; right:24px;
  background:rgba(255,255,255,.95); backdrop-filter:blur(8px);
  border-radius:14px; padding:16px 20px;
  display:flex; align-items:center; gap:14px;
}
.owner-badge .yrs{
  font-family:'Geologica'; font-weight:600; font-size:32px; line-height:1;
  color:var(--green-deep);
}
.owner-badge .lbl{font-size:13px; color:var(--ink-2); line-height:1.4}
.owner-text h2{margin-bottom:28px}
.owner-text p{margin-bottom:18px; color:var(--ink-2); font-size:17px}
.owner-text p:first-of-type{font-size:19px; color:var(--ink); font-family:'Geologica'; font-weight:400; line-height:1.4}
.signature{
  margin-top:36px; display:flex; align-items:center; gap:16px;
}
.sig-name{
  font-family:'Geologica'; font-weight:500; font-size:18px;
}
.sig-name small{display:block; font-family:'Nunito'; font-weight:400; font-size:13px; color:var(--ink-2); margin-top:2px}
.sig-mark{
  font-family:'Geologica'; font-weight:300; font-size:42px; color:var(--green);
  transform: skew(-12deg) rotate(-4deg); line-height:1;
}

/* ============ CONTACTS ============ */
.contacts{background:var(--navy); color:var(--mist); padding-top:120px; padding-bottom:60px}
.contacts-grid{
  display:grid; grid-template-columns: .9fr 1.1fr; gap:80px;
  margin-top:60px;
}
.contacts h2{color:#fff; max-width:580px; font-size:clamp(24px, 2.6vw, 38px);}
.contacts .eyebrow{color:var(--lime)}
.contact-channels{display:flex; flex-direction:column; gap:14px; margin-top:36px}
.channel{
  display:flex; align-items:center; gap:18px;
  padding:20px 24px; border-radius:16px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  transition: all .25s ease;
}
.channel:hover{background:rgba(255,255,255,.08); border-color:var(--lime); transform:translateX(4px)}
.channel-ic{
  width:50px; height:50px; border-radius:14px;
  display:grid; place-items:center; flex-shrink:0;
  color:#fff;
}
.channel-ic.wa{background:#25D366}
.channel-ic.tg{background:#26A5E4}
.channel-ic.ph{background:var(--lime); color:var(--navy)}
.channel-ic.max{background:linear-gradient(135deg,#4F6EE0,#8B30E5); color:#fff; font-family:'Geologica',sans-serif; font-weight:700; font-size:11px; letter-spacing:.03em;}
.channel-ic svg{width:24px; height:24px}
.channel-body{flex:1}
.channel-body small{display:block; font-size:12px; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:.08em; margin-bottom:2px}
.channel-body strong{font-family:'Geologica'; font-weight:500; font-size:18px; color:#fff}
.channel-arrow{color:rgba(255,255,255,.3); transition:color .2s, transform .2s}
.channel:hover .channel-arrow{color:var(--lime); transform:translateX(4px)}
.geo{
  margin-top:28px; padding:20px 24px; border-radius:14px;
  background:rgba(123,193,66,.08); border:1px dashed rgba(123,193,66,.3);
  display:flex; align-items:center; gap:14px;
  font-size:14px; color:rgba(255,255,255,.85);
}
.geo svg{flex-shrink:0; color:var(--lime)}

.form{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px; padding:36px;
}
.form h3{
  font-family:'Geologica'; font-weight:500; font-size:22px; color:#fff;
  margin-bottom:6px;
}
.form-sub{color:rgba(255,255,255,.6); font-size:14px; margin-bottom:24px}
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px}
.field label{font-size:12px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.08em; font-weight:600}
.field input, .field textarea, .field select{
  background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.1);
  border-radius:12px; padding:14px 16px; color:#fff; font-size:15px;
  transition:border-color .2s, background .2s;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--lime); background:rgba(255,255,255,.07);
}
.field input::placeholder, .field textarea::placeholder{color:rgba(255,255,255,.3)}
.field textarea{resize:vertical; min-height:90px; font-family:inherit}
.field select option{background:var(--navy); color:#fff}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.submit{
  width:100%; margin-top:8px;
  background:var(--lime); color:var(--navy);
  padding:16px; border-radius:12px; font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  transition: background .2s, transform .2s;
}
.submit:hover{background:#92d65a; transform:translateY(-1px)}
.form-note{font-size:12px; color:rgba(255,255,255,.4); margin-top:14px; text-align:center}
.form-note a{color:var(--lime-soft); text-decoration:underline}

/* ============ FOOTER ============ */
footer{
  background:var(--navy); color:rgba(255,255,255,.5);
  padding:40px 0 28px; border-top:1px solid rgba(255,255,255,.08);
  font-size:13px;
}
.foot{
  display:grid; grid-template-columns: 1fr auto 1fr;
  align-items:center; gap:32px;
}
.foot-brand .logo{color:#fff; margin-bottom:6px; display:inline-flex;}
.foot-brand .logo small{color:rgba(255,255,255,.55); text-transform:none; letter-spacing:0;}
.foot-copy{font-size:12px; color:rgba(255,255,255,.38); margin-top:4px;}
.foot-socials{display:flex; gap:8px; justify-content:center;}
.soc{
  width:40px; height:40px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  display:grid; place-items:center;
  color:rgba(255,255,255,.65);
  transition:background .2s, border-color .2s, color .2s, transform .2s;
  text-decoration:none;
}
.soc:hover{background:rgba(255,255,255,.12); border-color:var(--lime); color:var(--lime); transform:translateY(-2px)}
.soc svg{width:18px; height:18px; display:block;}
.soc-max{font-family:'Geologica'; font-weight:700; font-size:10px; letter-spacing:.02em;}
.foot-right{text-align:right; display:flex; flex-direction:column; gap:6px; line-height:1.5;}
.foot-right a:hover{color:var(--lime)}
.foot a{transition:color .2s}
.wh-sign{display:inline-flex;align-items:center;gap:10px;padding:8px 15px 8px 9px;border-radius:12px;background:#0d0f13;border:1px solid rgba(255,255,255,.1);text-decoration:none;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1;transition:border-color .2s,transform .2s;align-self:flex-end;margin-top:6px;}
.wh-sign img{width:32px;height:32px;border-radius:9px;display:block;border:1.5px solid rgba(24,229,138,.5);box-shadow:0 0 14px -3px rgba(24,229,138,.4);max-width:none;}
.wh-sign__txt{display:inline-flex;flex-direction:column;gap:3px;align-items:flex-start;}
.wh-sign__eyebrow{font-size:10.5px;font-weight:500;letter-spacing:.2px;color:#9aa3af;}
.wh-sign__name{font-size:19px;font-weight:700;letter-spacing:-.3px;color:#f4f7fa;}
.wh-sign__name b{color:#18e58a;font-weight:700;}
.wh-sign__sub{font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#8a94a3;}
.wh-sign:hover{border-color:rgba(24,229,138,.4);transform:translateY(-1px);}

/* ============ SERVICES OVERVIEW PAGE ============ */
.page-hero{
  padding:160px 0 80px;
  background:
    radial-gradient(800px 400px at 85% -10%, rgba(123,193,66,.15), transparent 55%),
    radial-gradient(600px 500px at -5% 110%, rgba(45,122,58,.1), transparent 55%),
    var(--paper);
}
.page-hero .eyebrow{margin-bottom:18px; display:inline-flex;}
.page-hero h1{font-size:clamp(40px,5.5vw,72px); margin-bottom:22px; max-width:760px;}
.page-hero p{font-size:clamp(16px,1.3vw,19px); color:var(--ink-2); max-width:520px;}

.svc-full-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:48px;}
.svc-full{
  padding:36px 32px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); display:flex; flex-direction:column; gap:16px;
  transition:transform .3s, box-shadow .3s, border-color .3s;
}
.svc-full:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--green-deep);}
.svc-full .svc-icon{width:60px; height:60px; border-radius:16px; flex-shrink:0;}
.svc-full h3{font-family:'Geologica'; font-weight:500; font-size:22px;}
.svc-full p{font-size:15.5px; color:var(--ink-2); line-height:1.6; flex:1;}
.svc-full-footer{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; border-top:1px solid var(--line); margin-top:auto;
}
.svc-price-tag{font-family:'Geologica'; font-size:13px; color:var(--green-deep); font-weight:500;}
.svc-link{
  font-size:14px; font-weight:600; color:var(--navy);
  display:flex; align-items:center; gap:6px;
  transition:gap .2s, color .2s;
}
.svc-full:hover .svc-link{gap:10px; color:var(--green-deep);}

/* ============ SERVICE PAGE ============ */
.svc-page-hero{
  padding:160px 0 80px;
  background:
    radial-gradient(900px 400px at 80% -10%, rgba(123,193,66,.14), transparent 60%),
    radial-gradient(600px 500px at -10% 110%, rgba(45,122,58,.1), transparent 60%),
    var(--paper);
}
.svc-page-hero h1{font-size:clamp(40px,5.5vw,72px); max-width:800px; margin:18px 0 24px;}
.svc-page-hero p{font-size:clamp(17px,1.4vw,20px); color:var(--ink-2); max-width:560px; margin-bottom:36px;}
.hero-price-chip{
  display:inline-flex; align-items:baseline; gap:8px;
  background:var(--mist); border-radius:10px; padding:10px 18px;
  font-family:'Geologica'; font-size:13px; color:var(--ink-2);
}
.hero-price-chip .price{font-size:22px; font-weight:600; color:var(--green-deep);}

.features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px;}
.feat{
  padding:28px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); display:flex; flex-direction:column; gap:12px;
}
.feat-icon{
  width:52px; height:52px; border-radius:13px;
  background:var(--mist); color:var(--green-deep);
  display:grid; place-items:center;
}
.feat-icon svg{width:26px; height:26px;}
.feat h4{font-family:'Geologica'; font-weight:500; font-size:16px;}
.feat p{font-size:14.5px; color:var(--ink-2); line-height:1.55;}

.process-steps{display:flex; flex-direction:column; gap:0;}
.process-step{
  display:grid; grid-template-columns:80px 1fr; gap:28px;
  padding:32px 0; border-bottom:1px solid var(--line); align-items:start;
}
.process-step:last-child{border:0;}
.step-num{
  font-family:'Geologica'; font-weight:500; font-size:44px;
  color:var(--lime); line-height:1;
}
.process-step h4{font-family:'Geologica'; font-weight:500; font-size:18px; margin-bottom:8px;}
.process-step p{font-size:15px; color:var(--ink-2);}

.price-card{
  background:var(--navy); color:var(--mist);
  border-radius:var(--radius); padding:48px;
  display:grid; grid-template-columns:1fr auto; gap:48px; align-items:center;
}
.price-card h3{font-family:'Geologica'; font-weight:500; font-size:26px; margin-bottom:14px; color:#fff;}
.price-card p{font-size:15px; color:rgba(255,255,255,.7); max-width:480px; line-height:1.6;}
.price-card .eyebrow{color:var(--lime); margin-bottom:16px; display:inline-flex;}
.price-big{
  font-family:'Geologica'; font-weight:600; font-size:clamp(36px,4vw,56px);
  color:#fff; line-height:1; white-space:nowrap; text-align:right;
}
.price-big small{display:block; font-size:13px; color:var(--lime-soft); font-weight:400; margin-top:6px; white-space:nowrap;}
.price-note{font-size:12px; color:rgba(255,255,255,.45); margin-top:28px; line-height:1.6; max-width:480px;}

.faq-list{display:flex; flex-direction:column; margin-top:48px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; text-align:left;
  padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:20px;
  font-family:'Geologica'; font-weight:500; font-size:17px;
  cursor:pointer; transition:color .2s;
}
.faq-q:hover{color:var(--green-deep)}
.faq-icon{
  width:28px; height:28px; border-radius:50%; background:var(--mist);
  display:grid; place-items:center; flex-shrink:0; font-size:20px; line-height:1;
  transition:transform .3s, background .3s, color .3s;
}
.faq-item.open .faq-icon{transform:rotate(45deg); background:var(--navy); color:var(--lime);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .4s ease;}
.faq-item.open .faq-a{max-height:400px;}
.faq-a-inner{padding-bottom:22px; font-size:15.5px; color:var(--ink-2); line-height:1.65;}

/* ============ CTA BLOCK ============ */
.cta-block{background:var(--cream);}
.cta-inner{
  display:grid; grid-template-columns:1fr auto; gap:60px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:56px 60px;
}
.cta-inner h2{margin-bottom:16px;}
.cta-inner p{color:var(--ink-2); font-size:17px; max-width:480px;}
.cta-actions{display:flex; flex-direction:column; gap:12px; flex-shrink:0;}

/* ============ PORTFOLIO FULL PAGE ============ */
.portfolio-full-head{
  display:flex; justify-content:space-between; align-items:end;
  margin-bottom:40px; gap:30px; flex-wrap:wrap;
}

/* ============ BLOG ============ */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px;}
.blog-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .3s, box-shadow .3s;
  text-decoration:none; color:inherit;
}
.blog-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.blog-card-img{
  aspect-ratio:16/9; position:relative; overflow:hidden;
}
.blog-card-body{padding:24px; display:flex; flex-direction:column; gap:10px; flex:1;}
.blog-meta{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-2); flex-wrap:wrap;}
.blog-cat{
  position:absolute; top:14px; left:14px; z-index:2;
  background:var(--mist); color:var(--green-deep);
  padding:4px 10px; border-radius:20px; font-weight:600; font-size:11.5px; letter-spacing:.04em;
}
.blog-card h3{font-family:'Geologica'; font-weight:500; font-size:18px; line-height:1.3;}
.blog-card p{font-size:14px; color:var(--ink-2); line-height:1.55; flex:1;}
.blog-read{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--line);
  font-size:13.5px; font-weight:600; color:var(--green-deep);
  display:flex; align-items:center; gap:6px; transition:gap .2s;
}
.blog-meta .blog-read{margin-top:0; padding-top:0; border-top:none; font-size:12.5px;}
.blog-meta .blog-read::before{content:"·"; margin-right:6px; color:var(--green); font-weight:700; font-size:16px; line-height:1;}
.blog-card:hover .blog-read{gap:10px;}
.blog-card-img .ph-img{inset:0; position:absolute;}

/* ============ ANIMATIONS ============ */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1; transform:none}
.reveal-1{transition-delay:.08s}
.reveal-2{transition-delay:.16s}
.reveal-3{transition-delay:.24s}
.reveal-4{transition-delay:.32s}
.reveal-5{transition-delay:.4s}
.reveal-6{transition-delay:.48s}

/* ============ LIGHTBOX ============ */
.lb-overlay{
  position:fixed; inset:0; z-index:300;
  background:rgba(5,8,15,.94);
  display:none; flex-direction:column;
  align-items:center; justify-content:center;
  padding:20px;
}
.lb-overlay.open{display:flex}
.lb-img-wrap{
  flex:1; display:flex; align-items:center; justify-content:center;
  max-width:min(92vw, 1200px); width:100%;
}
.lb-img{
  max-width:100%; max-height:78vh;
  object-fit:contain; display:block;
  border-radius:8px;
}
.lb-close{
  position:fixed; top:16px; right:20px;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff;
  font-size:20px; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  z-index:302; transition:background .2s;
}
.lb-close:hover{background:rgba(255,255,255,.25)}
.lb-prev,.lb-next{
  position:fixed; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff;
  font-size:28px; line-height:1; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  z-index:302; transition:background .2s, opacity .2s;
}
.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.25)}
.lb-prev{left:16px}
.lb-next{right:16px}
.lb-prev.hidden,.lb-next.hidden{opacity:.2; pointer-events:none}
.lb-meta{
  display:flex; flex-direction:column; align-items:center;
  gap:4px; padding-top:14px; min-height:52px;
}
.lb-counter{color:rgba(255,255,255,.5); font-size:13px; font-family:'Nunito',sans-serif}
.lb-title{color:rgba(255,255,255,.85); font-size:14px; font-family:'Nunito',sans-serif; text-align:center}
@media(max-width:560px){
  .lb-prev{left:6px} .lb-next{right:6px}
  .lb-prev,.lb-next{width:42px;height:42px;font-size:22px}
}

/* ============ YOUTUBE SECTION ============ */
.yt-intro{
  display:grid; grid-template-columns:72px 1fr; gap:20px;
  align-items:center;
  background:var(--navy); border-radius:20px;
  padding:28px 32px; margin-bottom:48px;
}
.yt-intro-photo{
  width:72px; height:72px; border-radius:50%;
  object-fit:cover; object-position:top center;
  flex-shrink:0; border:3px solid var(--lime);
}
.yt-intro-text{font-family:'Nunito',sans-serif; color:rgba(255,255,255,.85); font-size:16px; line-height:1.6; font-style:italic;}
.yt-intro-text strong{display:block; margin-top:10px; font-style:normal; font-size:13px; color:var(--lime); font-family:'Nunito',sans-serif; letter-spacing:.04em;}

/* Featured (large) video cards */
.yt-featured{display:flex; flex-direction:column; gap:20px; margin-bottom:32px;}
.yt-feat-card{
  display:grid; grid-template-columns:340px 1fr; border-radius:20px;
  overflow:hidden; background:var(--navy); cursor:pointer;
  transition:transform .3s;
}
.yt-feat-card:hover{transform:translateY(-4px)}
.yt-thumb-wrap{position:relative; aspect-ratio:16/9; overflow:hidden; background:#0d1620;}
.yt-thumb{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s;color:transparent;}
.yt-feat-card:hover .yt-thumb{transform:scale(1.05)}
.yt-play-btn{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.25); transition:background .2s;
}
.yt-feat-card:hover .yt-play-btn{background:rgba(0,0,0,.1)}
.yt-play-btn svg{width:60px;height:60px;filter:drop-shadow(0 2px 10px rgba(0,0,0,.6));transition:transform .2s;}
.yt-feat-card:hover .yt-play-btn svg{transform:scale(1.1)}
.yt-feat-info{padding:28px 32px;display:flex;flex-direction:column;justify-content:center;gap:10px;}
.yt-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--lime);font-family:'Nunito',sans-serif;
}
.yt-tag svg{width:14px;height:14px;}
.yt-feat-title{
  font-family:'Geologica',sans-serif; font-weight:500;
  font-size:18px; line-height:1.35; color:#fff;
}
.yt-hook{font-size:14px;color:rgba(255,255,255,.65);line-height:1.6;font-family:'Nunito',sans-serif;}
.yt-watch{
  display:inline-flex;align-items:center;gap:8px;margin-top:4px;
  font-size:13px;font-weight:600;color:var(--lime);font-family:'Nunito',sans-serif;
  transition:gap .2s;
}
.yt-feat-card:hover .yt-watch{gap:12px;}
.yt-duration{font-size:12px;color:rgba(255,255,255,.4);font-family:'Nunito',sans-serif;}

/* Small grid cards */
.yt-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:40px;}
.yt-small-card{
  border-radius:14px;overflow:hidden;background:var(--navy);
  cursor:pointer;transition:transform .3s;
}
.yt-small-card:hover{transform:translateY(-4px)}
.yt-small-card .yt-thumb-wrap{aspect-ratio:16/9;}
.yt-small-card:hover .yt-thumb{transform:scale(1.05)}
.yt-small-card .yt-play-btn svg{width:40px;height:40px;}
.yt-small-info{padding:12px 14px 16px;}
.yt-small-meta{font-size:11px;color:rgba(255,255,255,.4);font-family:'Nunito',sans-serif;margin-bottom:5px;}
.yt-small-title{font-size:13px;font-weight:500;color:rgba(255,255,255,.88);font-family:'Nunito',sans-serif;line-height:1.4;}

/* YouTube channel CTA */
.yt-channel-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:8px;}

/* YouTube modal */
.yt-modal-overlay{
  position:fixed;inset:0;z-index:400;
  background:rgba(5,8,15,.97);
  display:none;align-items:center;justify-content:center;
  padding:20px;
}
.yt-modal-overlay.open{display:flex}
.yt-modal-wrap{width:min(92vw,1000px);aspect-ratio:16/9;position:relative;}
.yt-modal-wrap iframe{width:100%;height:100%;border:none;border-radius:10px;}
.yt-modal-close{
  position:fixed;top:16px;right:20px;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;
  font-size:20px;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  z-index:401;transition:background .2s;
}
.yt-modal-close:hover{background:rgba(255,255,255,.28)}

@media(max-width:1060px){
  .yt-feat-card{grid-template-columns:260px 1fr}
  .yt-grid{grid-template-columns:repeat(3,1fr)}
  .yt-feat-title{font-size:16px}
}
@media(max-width:560px){
  .yt-intro{grid-template-columns:56px 1fr;gap:14px;padding:20px 18px;}
  .yt-intro-photo{width:56px;height:56px;}
  .yt-intro-text{font-size:14px;}
  .yt-feat-card{grid-template-columns:1fr;} /* stack vertically on mobile */
  .yt-feat-card .yt-thumb-wrap{aspect-ratio:16/9;}
  .yt-feat-info{padding:18px 18px 22px;}
  .yt-feat-title{font-size:15px;}
  .yt-grid{grid-template-columns:repeat(2,1fr);}
}

/* ============ MODAL ============ */
.modal-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(13,27,42,.55); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; visibility:hidden;
  transition:opacity .25s, visibility .25s;
}
.modal-overlay.open{opacity:1; visibility:visible;}
.modal{
  background:#fff; border-radius:var(--radius);
  max-width:660px; width:100%; max-height:82vh;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow-lg);
  transform:translateY(18px);
  transition:transform .25s cubic-bezier(.2,.7,.2,1);
}
.modal-overlay.open .modal{transform:translateY(0);}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 32px 20px; border-bottom:1px solid var(--line);
  flex-shrink:0;
}
.modal-head h3{font-size:18px; font-weight:600; color:var(--navy); margin:0;}
.modal-close{
  width:34px; height:34px; border-radius:10px;
  background:var(--mist); border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-2); font-size:16px;
  transition:background .2s, color .2s; flex-shrink:0;
}
.modal-close:hover{background:var(--navy); color:#fff;}
.modal-body{
  overflow-y:auto; padding:28px 32px; flex:1;
  font-size:15px; line-height:1.75; color:var(--ink-2);
}
.modal-body h4{
  font-family:'Geologica',sans-serif; font-size:13px; font-weight:600;
  color:var(--navy); margin:26px 0 8px; letter-spacing:-.01em;
}
.modal-body h4:first-child{margin-top:0;}
.modal-body p{margin:0 0 10px;}
.modal-body ul{margin:0 0 10px; padding-left:20px;}
.modal-body ul li{margin-bottom:5px;}
@media(max-width:560px){
  .modal-head{padding:20px 20px 16px;}
  .modal-body{padding:20px;}
}

/* ============ CUSTOM SELECT ============ */
.cs-wrap{position:relative; width:100%;}
.cs-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.10);
  border-radius:12px; padding:14px 16px; color:#fff; font-size:15px;
  font-family:inherit; cursor:pointer; text-align:left;
  transition:border-color .2s, background .2s;
}
.cs-trigger:hover{border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.06);}
.cs-wrap.open .cs-trigger{border-color:var(--lime); background:rgba(255,255,255,.07);}
.cs-value{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cs-arrow{
  width:16px; height:16px; flex-shrink:0; color:rgba(255,255,255,.45);
  transition:transform .22s cubic-bezier(.4,0,.2,1), color .2s;
}
.cs-wrap.open .cs-arrow{transform:rotate(180deg); color:var(--lime);}
.cs-list{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60;
  background:#16263a; border:1.5px solid rgba(255,255,255,.12);
  border-radius:14px; overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25);
  opacity:0; visibility:hidden; transform:translateY(-6px) scale(.98);
  transform-origin:top center;
  transition:opacity .18s, visibility .18s, transform .18s cubic-bezier(.2,.7,.2,1);
  padding:6px;
  list-style:none; margin:0;
}
.cs-wrap.open .cs-list{opacity:1; visibility:visible; transform:translateY(0) scale(1);}
.cs-option{
  padding:11px 14px; border-radius:9px; cursor:pointer; font-size:15px; color:rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  transition:background .14s, color .14s;
  user-select:none;
}
.cs-option:hover{background:rgba(255,255,255,.08); color:#fff;}
.cs-option.active{color:var(--lime); font-weight:500;}
.cs-option.active::after{
  content:""; display:block; width:18px; height:18px; flex-shrink:0;
  background:var(--lime); border-radius:50%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 6.5 11.5 13 4.5' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='3 8 6.5 11.5 13 4.5' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ============ TOAST ============ */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(120%);
  background:var(--navy); color:var(--paper); padding:16px 24px; border-radius:14px;
  box-shadow:var(--shadow-lg); z-index:100;
  transition:transform .4s cubic-bezier(.2,.7,.2,1);
  display:flex; align-items:center; gap:12px; font-weight:500;
  border:1px solid rgba(123,193,66,.4);
}
.toast.on{transform:translateX(-50%) translateY(0)}
.toast::before{
  content:"✓"; width:22px; height:22px; border-radius:50%;
  background:var(--lime); color:var(--navy);
  display:grid; place-items:center; font-weight:700; font-size:13px;
  flex-shrink:0;
}

/* ============ DECORATIVE SECTION PATTERNS ============ */

/* Травинки — Hero главной (все слои фона вместе) */
.hero{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='60'%3E%3Cpath d='M8 60 Q9 38 11 60' stroke='%232d7a3a' stroke-width='2.2' stroke-opacity='.07' fill='none'/%3E%3Cpath d='M12 60 Q14 24 16 60' stroke='%232d7a3a' stroke-width='2' stroke-opacity='.06' fill='none'/%3E%3Cpath d='M26 60 Q28 18 30 60' stroke='%232d7a3a' stroke-width='2.2' stroke-opacity='.07' fill='none'/%3E%3Cpath d='M30 60 Q33 40 36 60' stroke='%232d7a3a' stroke-width='1.8' stroke-opacity='.05' fill='none'/%3E%3Cpath d='M44 60 Q46 30 48 60' stroke='%232d7a3a' stroke-width='2.2' stroke-opacity='.07' fill='none'/%3E%3Cpath d='M48 60 Q51 46 54 60' stroke='%232d7a3a' stroke-width='1.8' stroke-opacity='.05' fill='none'/%3E%3Cpath d='M62 60 Q64 22 66 60' stroke='%232d7a3a' stroke-width='2.2' stroke-opacity='.07' fill='none'/%3E%3Cpath d='M66 60 Q69 38 72 60' stroke='%232d7a3a' stroke-width='2' stroke-opacity='.06' fill='none'/%3E%3C/svg%3E"),
    radial-gradient(900px 500px at 90% -10%, rgba(123,193,66,.18), transparent 60%),
    radial-gradient(700px 600px at -10% 100%, rgba(45,122,58,.12), transparent 60%);
  background-size: 80px 60px, auto, auto;
  background-repeat: repeat-x, no-repeat, no-repeat;
  background-position: bottom center, center, center;
  background-color: var(--paper);
}

/* Посадочная сетка — Услуги */
.section.services{
  background-image:radial-gradient(circle, rgba(45,122,58,.04) 2px, transparent 2px);
  background-size:26px 26px;
}

/* Ручеёк / волны — CTA */
.cta-block{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='50'%3E%3Cpath d='M0 16 Q25 6 50 16 Q75 26 100 16 Q125 6 150 16 Q175 26 200 16' stroke='%232d7a3a' stroke-width='2' stroke-opacity='.08' fill='none'/%3E%3Cpath d='M0 28 Q25 18 50 28 Q75 38 100 28 Q125 18 150 28 Q175 38 200 28' stroke='%232d7a3a' stroke-width='1.6' stroke-opacity='.06' fill='none'/%3E%3Cpath d='M0 40 Q25 30 50 40 Q75 50 100 40 Q125 30 150 40 Q175 50 200 40' stroke='%232d7a3a' stroke-width='1.2' stroke-opacity='.05' fill='none'/%3E%3C/svg%3E");
  background-size:200px 50px;
  background-repeat:repeat-x;
  background-position:center;
}

/* Топография — О нас */
.section#owner{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120'%3E%3Cellipse cx='100' cy='60' rx='95' ry='55' stroke='%232d7a3a' stroke-width='1.4' stroke-opacity='.07' fill='none'/%3E%3Cellipse cx='100' cy='60' rx='68' ry='38' stroke='%232d7a3a' stroke-width='1.4' stroke-opacity='.07' fill='none'/%3E%3Cellipse cx='100' cy='60' rx='40' ry='22' stroke='%232d7a3a' stroke-width='1.4' stroke-opacity='.07' fill='none'/%3E%3Cellipse cx='100' cy='60' rx='15' ry='8' stroke='%232d7a3a' stroke-width='1.4' stroke-opacity='.07' fill='none'/%3E%3C/svg%3E");
  background-size:200px 120px;
  background-repeat:repeat;
}

/* ---- Индивидуальные паттерны для hero-секций ---- */

/* Fallback — тонкие полосы (если класс не совпал) */
.svc-page-hero,.page-hero{
  background-image:repeating-linear-gradient(
    -58deg, transparent, transparent 20px,
    rgba(45,122,58,.08) 20px, rgba(45,122,58,.08) 21px
  );
}

/* 🌿 Озеленение — пунктирная подложка из реального фото сада */
.hero-plants{ position:relative; }
.hero-plants::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:url("../assets/images/stipple.svg");
  background-size:cover; background-position:center top; background-repeat:no-repeat;
  opacity:.12; pointer-events:none;
}
.hero-plants .wrap{ position:relative; z-index:1; }

/* 💧 Автополив — трубка с капельницами */
.hero-water{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='72'%3E%3Cline x1='0' y1='12' x2='120' y2='12' stroke='%232d7a3a' stroke-width='3' stroke-opacity='.08'/%3E%3Ccircle cx='20' cy='12' r='3.5' fill='%232d7a3a' fill-opacity='.03'/%3E%3Cline x1='20' y1='15' x2='20' y2='50' stroke='%232d7a3a' stroke-width='1.2' stroke-opacity='.07' stroke-dasharray='4,3'/%3E%3Cpath d='M15 50 Q20 63 25 50Z' fill='%232d7a3a' fill-opacity='.03'/%3E%3Ccircle cx='60' cy='12' r='3.5' fill='%232d7a3a' fill-opacity='.03'/%3E%3Cline x1='60' y1='15' x2='60' y2='38' stroke='%232d7a3a' stroke-width='1.2' stroke-opacity='.07' stroke-dasharray='4,3'/%3E%3Cpath d='M55 38 Q60 51 65 38Z' fill='%232d7a3a' fill-opacity='.03'/%3E%3Ccircle cx='100' cy='12' r='3.5' fill='%232d7a3a' fill-opacity='.03'/%3E%3Cline x1='100' y1='15' x2='100' y2='56' stroke='%232d7a3a' stroke-width='1.2' stroke-opacity='.07' stroke-dasharray='4,3'/%3E%3Cpath d='M95 56 Q100 69 105 56Z' fill='%232d7a3a' fill-opacity='.03'/%3E%3C/svg%3E");
  background-size:120px 72px;
  background-repeat:repeat-x;
  background-position:top center;
}

/* 📐 Ландшафтный дизайн — чертёж плана сада */
.hero-design{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M0 20 L120 20 M0 40 L120 40 M0 60 L120 60 M0 80 L120 80 M0 100 L120 100 M20 0 L20 120 M40 0 L40 120 M60 0 L60 120 M80 0 L80 120 M100 0 L100 120' stroke='%232d7a3a' stroke-width='.8' stroke-opacity='.05'/%3E%3Crect x='6' y='6' width='46' height='46' stroke='%232d7a3a' stroke-width='1.8' stroke-opacity='.09' fill='none'/%3E%3Ccircle cx='76' cy='72' r='28' stroke='%232d7a3a' stroke-width='1.8' stroke-opacity='.09' fill='none'/%3E%3Cline x1='52' y1='29' x2='48' y2='72' stroke='%232d7a3a' stroke-width='1.2' stroke-opacity='.07' stroke-dasharray='6,4'/%3E%3Cline x1='6' y1='2' x2='52' y2='2' stroke='%232d7a3a' stroke-width='.8' stroke-opacity='.07'/%3E%3Cline x1='6' y1='0' x2='6' y2='5' stroke='%232d7a3a' stroke-width='.8' stroke-opacity='.07'/%3E%3Cline x1='52' y1='0' x2='52' y2='5' stroke='%232d7a3a' stroke-width='.8' stroke-opacity='.07'/%3E%3C/svg%3E");
  background-size:120px 120px;
  background-repeat:repeat;
}

/* ✂️ Уход и обслуживание — ножницы (крупный тайл, не обои) */
.hero-tools{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Ccircle cx='130' cy='130' r='7' stroke='%232d7a3a' stroke-width='2.5' stroke-opacity='.08' fill='none'/%3E%3Cpath d='M130 123 L54 47' stroke='%232d7a3a' stroke-width='3' stroke-opacity='.08' stroke-linecap='round'/%3E%3Cpath d='M54 47 Q36 30 42 52 L124 127' stroke='%232d7a3a' stroke-width='2.2' stroke-opacity='.07' fill='none'/%3E%3Ccircle cx='40' cy='46' r='18' stroke='%232d7a3a' stroke-width='2.2' stroke-opacity='.08' fill='none'/%3E%3Cpath d='M130 137 L206 213' stroke='%232d7a3a' stroke-width='3' stroke-opacity='.08' stroke-linecap='round'/%3E%3Cpath d='M206 213 Q224 230 218 208 L136 133' stroke='%232d7a3a' stroke-width='2.2' stroke-opacity='.07' fill='none'/%3E%3Ccircle cx='220' cy='214' r='18' stroke='%232d7a3a' stroke-width='2.2' stroke-opacity='.08' fill='none'/%3E%3C/svg%3E");
  background-size:260px 260px;
  background-repeat:repeat;
}

/* 🌿 Вертикальное озеленение — шпалера с листьями */
.hero-trellis{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M0 40 L40 0 L80 40 L40 80 Z' stroke='%232d7a3a' stroke-width='1.8' stroke-opacity='.08' fill='none'/%3E%3Cline x1='0' y1='40' x2='80' y2='40' stroke='%232d7a3a' stroke-width='.8' stroke-opacity='.06'/%3E%3Cline x1='40' y1='0' x2='40' y2='80' stroke='%232d7a3a' stroke-width='.8' stroke-opacity='.06'/%3E%3Cpath d='M40 40 C28 22 34 10 40 16 C46 10 52 22 40 40Z' stroke='%232d7a3a' stroke-width='1.4' stroke-opacity='.09' fill='%232d7a3a' fill-opacity='.04'/%3E%3Cpath d='M40 8 C36 12 38 20 40 14 C42 20 44 12 40 8Z' stroke='%232d7a3a' stroke-width='1.2' stroke-opacity='.08' fill='%232d7a3a' fill-opacity='.04'/%3E%3Cpath d='M72 40 C68 36 60 38 66 40 C60 42 68 44 72 40Z' stroke='%232d7a3a' stroke-width='1.2' stroke-opacity='.08' fill='%232d7a3a' fill-opacity='.04'/%3E%3Cpath d='M40 72 C44 68 42 60 40 66 C38 60 36 68 40 72Z' stroke='%232d7a3a' stroke-width='1.2' stroke-opacity='.08' fill='%232d7a3a' fill-opacity='.04'/%3E%3Cpath d='M8 40 C12 44 20 42 14 40 C20 38 12 36 8 40Z' stroke='%232d7a3a' stroke-width='1.2' stroke-opacity='.08' fill='%232d7a3a' fill-opacity='.04'/%3E%3C/svg%3E");
  background-size:80px 80px;
  background-repeat:repeat;
}

/* 💡 Ландшафтное освещение — лучи под углом (CSS, без иконок) */
.hero-lights{
  background-image:
    repeating-linear-gradient(30deg,
      transparent, transparent 28px,
      rgba(45,122,58,.04) 28px, rgba(45,122,58,.04) 29px),
    repeating-linear-gradient(-30deg,
      transparent, transparent 42px,
      rgba(45,122,58,.04) 42px, rgba(45,122,58,.04) 43px);
}

/* 🖼️ Портфолио — рамки фотографий (крупный нетесный тайл) */
.hero-portfolio{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200'%3E%3Crect x='10' y='14' width='130' height='100' rx='4' stroke='%232d7a3a' stroke-width='2' stroke-opacity='.07' fill='none'/%3E%3Crect x='20' y='24' width='110' height='80' rx='2' stroke='%232d7a3a' stroke-width='.8' stroke-opacity='.05' fill='none'/%3E%3Crect x='90' y='50' width='130' height='110' rx='4' stroke='%232d7a3a' stroke-width='2' stroke-opacity='.07' fill='none'/%3E%3Crect x='100' y='60' width='110' height='90' rx='2' stroke='%232d7a3a' stroke-width='.8' stroke-opacity='.05' fill='none'/%3E%3Crect x='192' y='10' width='110' height='90' rx='4' stroke='%232d7a3a' stroke-width='2' stroke-opacity='.07' fill='none'/%3E%3Crect x='202' y='20' width='90' height='70' rx='2' stroke='%232d7a3a' stroke-width='.8' stroke-opacity='.05' fill='none'/%3E%3C/svg%3E");
  background-size:320px 200px;
  background-repeat:repeat;
}

/* 📰 Блог — строки текста с красной строкой */
.hero-blog{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='52'%3E%3Cline x1='0' y1='13' x2='240' y2='13' stroke='%232d7a3a' stroke-width='1.2' stroke-opacity='.07'/%3E%3Cline x1='0' y1='26' x2='240' y2='26' stroke='%232d7a3a' stroke-width='1.2' stroke-opacity='.07'/%3E%3Cline x1='0' y1='39' x2='240' y2='39' stroke='%232d7a3a' stroke-width='1.2' stroke-opacity='.07'/%3E%3Cline x1='30' y1='13' x2='195' y2='13' stroke='%232d7a3a' stroke-width='3' stroke-opacity='.04'/%3E%3Cline x1='0' y1='26' x2='218' y2='26' stroke='%232d7a3a' stroke-width='3' stroke-opacity='.04'/%3E%3Cline x1='0' y1='39' x2='152' y2='39' stroke='%232d7a3a' stroke-width='3' stroke-opacity='.04'/%3E%3Cline x1='0' y1='0' x2='0' y2='52' stroke='%232d7a3a' stroke-width='3.5' stroke-opacity='.08'/%3E%3C/svg%3E");
  background-size:240px 52px;
  background-repeat:repeat;
}

/* 🗂️ Обзор услуг — соты/гексагоны */
.hero-services{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='92'%3E%3Cpolygon points='40,2 76,22 76,62 40,82 4,62 4,22' stroke='%232d7a3a' stroke-width='1.6' stroke-opacity='.08' fill='none'/%3E%3Cpolygon points='40,14 66,29 66,59 40,74 14,59 14,29' stroke='%232d7a3a' stroke-width='.8' stroke-opacity='.05' fill='none'/%3E%3C/svg%3E");
  background-size:80px 92px;
  background-repeat:repeat;
}

/* Листья — Портфолио */
.section#portfolio{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M60 100 C28 78 28 20 60 14 C92 20 92 78 60 100Z' stroke='%232d7a3a' stroke-width='2' stroke-opacity='.07' fill='none'/%3E%3Cline x1='60' y1='14' x2='60' y2='100' stroke='%232d7a3a' stroke-width='1' stroke-opacity='.05'/%3E%3Cpath d='M60 35 Q75 42 82 58' stroke='%232d7a3a' stroke-width='1' stroke-opacity='.05' fill='none'/%3E%3Cpath d='M60 50 Q72 56 76 70' stroke='%232d7a3a' stroke-width='1' stroke-opacity='.05' fill='none'/%3E%3Cpath d='M60 35 Q45 42 38 58' stroke='%232d7a3a' stroke-width='1' stroke-opacity='.05' fill='none'/%3E%3Cpath d='M60 50 Q48 56 44 70' stroke='%232d7a3a' stroke-width='1' stroke-opacity='.05' fill='none'/%3E%3C/svg%3E");
  background-size:120px 120px;
  background-repeat:repeat;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1060px){
  .nav-links{
    display:none; flex-direction:column; align-items:flex-start;
    position:fixed; top:74px; left:0; right:0;
    background:rgba(251,250,246,.98); backdrop-filter:blur(14px);
    padding:20px 28px 28px; border-bottom:1px solid var(--line);
    gap:4px; z-index:40;
  }
  .nav-links.open{display:flex;}
  .nav-links > a{padding:12px 0; font-size:16px; width:100%;}
  .nav-drop-btn{padding:12px 0; font-size:16px;}
  .dropdown-menu{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; background:transparent; padding:4px 16px;
    display:none; min-width:auto;
  }
  .dropdown-menu.open{display:block;}
  .nav-dropdown:hover .dropdown-menu{opacity:1; visibility:visible; display:none;}
  .nav-dropdown:hover .dropdown-menu.open{display:block;}
  .burger{display:grid; margin-left:auto;}
  .nav-messengers{display:none;}
  .section{padding:80px 0}
  .hero{padding:130px 0 70px}
  .hero-grid{grid-template-columns:1fr; gap:40px}
  .hero-visual{max-width:520px; margin:0 auto; min-height:400px;}
  .hero-floating{right:0; top:24px; bottom:auto;}
  .services .head{grid-template-columns:1fr; gap:20px}
  .svc-grid{grid-template-columns:1fr 1fr}
  .utp-grid{grid-template-columns:1fr}
  .config-shell{grid-template-columns:1fr; min-height:auto}
  .config-main, .config-side{padding:32px 24px}
  .options.cols-3{grid-template-columns:1fr}
  .options.cols-2{grid-template-columns:1fr}
  .portfolio-grid{grid-template-columns:repeat(6, 1fr)}
  .pcard, .pcard.wide, .pcard.tall{grid-column: span 6; aspect-ratio: 4/3.4}
  .owner-grid, .contacts-grid{grid-template-columns:1fr; gap:48px}
  .stat-row{grid-template-columns:1fr; gap:18px; padding-top:24px}
  .stat-row > div{padding-bottom:18px; border-bottom:1px solid var(--line)}
  .stat-row > div:last-child{border:0; padding-bottom:0}
  .progress-step .lbl{display:none}
  .form-row{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr 1fr}
  .svc-full-grid{grid-template-columns:1fr}
  .price-card{grid-template-columns:1fr; text-align:left; padding:32px 28px; gap:24px;}
  .price-big{text-align:left;}
  .blog-grid{grid-template-columns:1fr 1fr}
  .cta-inner{grid-template-columns:1fr; padding:36px 28px; gap:28px;}
  .svc-page-hero{padding:120px 0 60px}
  .page-hero{padding:120px 0 60px}
  .foot{grid-template-columns:1fr 1fr;}
  .foot-socials{grid-column:1 / -1; justify-content:flex-start;}
  .foot-right{text-align:left;}
}
@media (max-width: 560px){
  /* === Layout === */
  .wrap{padding:0 18px}
  .nav{padding:13px 18px}
  .logo small{font-size:9px;letter-spacing:.03em;}
  .section{padding:60px 0}
  .section--tight{padding:52px 0}

  /* === Logo === */
  .logo{font-size:15px; gap:8px}
  .logo > div{white-space:nowrap}
  .logo-mark{width:44px; height:44px; border-radius:12px}

  /* === Nav tagline (mobile only) === */
  .nav-tagline{display:block;flex:1;font-size:9.5px;font-weight:500;color:var(--ink-2);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;text-align:right;padding-right:10px;}

  /* === Header button (скрываем) === */
  .nav-cta{display:none}
  .nav-phone{display:none}

  /* === Main hero === */
  .hero{padding:96px 0 52px}
  .hero h1{font-size:clamp(30px,8vw,44px);text-align:center;}
  .hero h1 em{white-space:normal}
  .hero .eyebrow{text-align:center;display:block;}
  .hero-ctas{flex-direction:column; gap:10px; margin-bottom:36px;align-items:center;}
  .hero-ctas .btn{width:100%; justify-content:center}
  .hero-sub{margin-bottom:24px;text-align:center;}

  /* === Stats === */
  .stat-row{text-align:center;}
  .stat-num{justify-content:center;}

  /* === Service page hero === */
  .svc-page-hero{padding:106px 0 52px}
  .svc-page-hero h1{font-size:clamp(26px,7.5vw,40px); margin:12px 0 16px}
  .svc-page-hero p{margin-bottom:20px}

  /* === Page hero (portfolio / blog / services) === */
  .page-hero{padding:106px 0 52px}
  .page-hero h1{font-size:clamp(26px,7.5vw,40px)}

  /* === Breadcrumb === */
  .breadcrumb-wrap{padding-top:68px}

  /* === Hero price chip === */
  .hero-price-chip{font-size:12px; padding:8px 14px}
  .hero-price-chip .price{font-size:18px}

  /* === Cards / grids === */
  .svc-grid{grid-template-columns:1fr}
  .portfolio-grid{grid-template-columns:1fr}
  .pcard, .pcard.wide, .pcard.tall{grid-column:auto; aspect-ratio:4/3.4}
  .hero-badge{left:0; bottom:-8px; padding:14px 16px; font-size:12px}

  /* === Form === */
  .form{padding:20px}

  /* === Features / Process === */
  .features-grid{grid-template-columns:1fr}
  .process-step{grid-template-columns:56px 1fr; gap:16px}
  .step-num{font-size:32px}

  /* === Blog === */
  .blog-grid{grid-template-columns:1fr}

  /* === Service page price chip === */
  .hero-price-chip{align-self:center;}

  /* === Footer === */
  .foot{grid-template-columns:1fr}
  .foot-brand{display:flex;flex-direction:column;align-items:center;}
  .foot-brand .logo{justify-content:center;}
  .foot-copy{text-align:center;}
  .foot-socials{justify-content:center;}
  .foot-right{text-align:center;align-items:center;}
  .wh-sign{align-self:center;margin:8px auto 0;}

  /* === Configurator === */
  .config-main,.config-side{padding:24px 18px}
  .progress-steps{gap:6px}
  .progress-step .lbl{display:none}

  /* === CTA block === */
  .cta-inner{padding:28px 18px; gap:20px}
  .cta-inner h2{font-size:clamp(24px,6.5vw,36px)}

  /* === Contacts === */
  .contacts-grid{gap:32px; margin-top:36px}
  .contact-channels{gap:10px; margin-top:16px}
  .channel{padding:16px 18px; gap:14px}
  .channel-ic{width:44px; height:44px}
  .channel-body strong{font-size:15px}

  /* === Price card === */
  .price-card{padding:24px 20px}
  .price-big{font-size:clamp(28px,7vw,40px)}
  .price-note{margin-top:16px}

  /* === Owner/about === */
  .owner-grid{gap:32px}

  /* === Hero visual (image cards) === */
  .hero-visual{
    display:flex; flex-direction:row; gap:10px;
    height:140px; min-height:unset; aspect-ratio:unset;
    max-width:100%; margin:0;
  }
  .hero-card{flex:1; min-height:unset; border-radius:16px;}
  .hero-card.big{flex:1.5; grid-row:auto;}
  .hero-floating{display:none}

  /* === FAQ === */
  .faq-q{font-size:15px; padding:18px 0; align-items:flex-start}
  .faq-icon{margin-top:2px}

  /* === Article meta one line === */
  .article-meta-row{font-size:11px;flex-wrap:nowrap;overflow:hidden;}
  .article-meta-row > span:not(.blog-cat) + span:not(.blog-cat)::before{margin:0 5px;font-size:12px;}

  /* === Lightbox nav more visible === */
  .lb-prev,.lb-next{background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.3);}
}

/* ================================================================
   СТАТЬИ БЛОГА
   ================================================================ */
.article-wrap{max-width:800px; margin:0 auto; padding:0 20px 64px;}
.article-header{padding:48px 0 32px;}
.article-header .eyebrow{margin-bottom:16px; display:block;}
.article-header h1{font-family:var(--ff-head); font-size:clamp(22px,3vw,36px); line-height:1.25; margin:0 0 20px; color:var(--ink);}
.article-meta-row{display:flex; align-items:center; gap:0; flex-wrap:wrap; font-size:13px; color:var(--ink-2); padding-bottom:28px; border-bottom:1px solid var(--line);}
.article-meta-row .blog-cat{position:static; font-size:11px; margin-right:14px; display:inline-flex; align-items:center;}
.article-meta-row > span:not(.blog-cat) + span:not(.blog-cat)::before{
  content:"·"; margin:0 10px; color:var(--green); font-weight:700; font-size:16px; line-height:1;
}
.article-body{margin-top:36px;}
.article-body h2{font-family:var(--ff-head); font-size:clamp(17px,2vw,22px); font-weight:600; margin:44px 0 14px; color:var(--ink); line-height:1.3;}
.article-body h3{font-family:var(--ff-head); font-size:clamp(15px,1.6vw,18px); font-weight:600; margin:28px 0 10px; color:var(--ink);}
.article-body p{margin:0 0 18px; line-height:1.78; color:var(--ink); font-size:16px;}
.article-body ul,.article-body ol{margin:0 0 20px 24px; padding:0;}
.article-body li{margin-bottom:9px; line-height:1.7; font-size:15px;}
.article-body strong{color:var(--ink); font-weight:600;}
.article-img{
  width:100%; display:block; object-fit:cover; border-radius:12px;
  margin:28px 0; max-height:480px;
}
.article-img-hero{
  width:100%; display:block; object-fit:cover; border-radius:14px;
  margin:0 0 36px; max-height:420px;
}
/* ---- Watermark wrapper ---- */
.img-wm-wrap{
  position:relative; display:block; padding:0; line-height:0; overflow:hidden;
}
.img-wm-wrap--body{ border-radius:12px; margin:28px 0; }
.img-wm-wrap--hero{ border-radius:14px; margin:0 0 36px; }
.img-wm-wrap .article-img,
.img-wm-wrap .article-img-hero{ border-radius:0; margin:0; }
.img-wm{
  position:absolute; bottom:12px; right:12px;
  width:150px; height:auto;
  pointer-events:none; user-select:none; display:block;
}
/* Watermark на карточках портфолио */
.pcard-wm{
  position:absolute; bottom:10px; right:10px;
  width:130px; height:auto;
  pointer-events:none; user-select:none; z-index:3; display:block;
}
/* Watermark в лайтбоксе */
.lb-wm{
  position:absolute; bottom:16px; right:16px;
  width:150px; height:auto;
  pointer-events:none; user-select:none; z-index:3; display:block;
}
@media(max-width:560px){
  .img-wm{ width:110px; bottom:8px; right:8px; }
  .pcard-wm{ width:90px; bottom:6px; right:6px; }
  .lb-wm{ width:110px; bottom:8px; right:8px; }
}
.article-tip{background:var(--mist); border-left:4px solid var(--green); padding:16px 20px; border-radius:0 10px 10px 0; margin:24px 0; font-size:15px; line-height:1.7;}
.article-tip strong{color:var(--green);}
.article-warn{background:#fff8e6; border-left:4px solid #e6a817; padding:16px 20px; border-radius:0 10px 10px 0; margin:24px 0; font-size:15px; line-height:1.7;}
.article-table{width:100%; border-collapse:collapse; margin:24px 0; font-size:14px; border-radius:10px; overflow:hidden;}
@media(max-width:560px){
  .article-table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; font-size:13px; border-radius:8px;}
}
.article-table th{background:var(--navy); color:var(--paper); padding:11px 16px; text-align:left; font-weight:600; font-size:13px;}
.article-table td{padding:10px 16px; border-bottom:1px solid var(--line);}
.article-table tr:last-child td{border-bottom:none;}
.article-table tr:nth-child(even) td{background:var(--cream);}
.article-checklist{list-style:none; margin:0 0 24px; padding:0;}
.article-checklist li{padding:10px 0 10px 36px; position:relative; border-bottom:1px solid var(--line); font-size:15px; line-height:1.6;}
.article-checklist li::before{content:"✓"; position:absolute; left:0; top:10px; color:var(--green); font-weight:700; font-size:16px;}
.article-cta{background:var(--navy); color:var(--paper); padding:36px 40px; border-radius:var(--radius); margin-top:48px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.article-cta h3{font-family:var(--ff-head); font-size:clamp(18px,2vw,22px); margin:0 0 8px;}
.article-cta p{margin:0; font-size:14px; color:rgba(255,255,255,.7);}
@media(max-width:560px){
  .article-header{padding:32px 0 20px;}
  .article-cta{padding:24px 20px;}
  .article-body p,.article-body li{font-size:15px;}
}