/* ==========================================================================
   CH PROJECT — design system
   Base: graphite / warm-black / off-white. Accent: molten steel orange.
   Headings: Unbounded (geometric, industrial). Body: Manrope.
   ========================================================================== */

:root{
  --bg: #121317;
  --bg-raised: #191b20;
  --surface: #1e2126;
  --surface-2: #24272d;
  --line: #34383f;
  --line-soft: #292c32;
  --text: #f3f1ec;
  --text-dim: #a9acb3;
  --text-faint: #868a92; /* было #74777e — контраст 4.14:1 не проходил WCAG AA (нужно 4.5:1), исправлено */
  --accent: #e1571f;
  --accent-hi: #ff7a42;
  --accent-ink: #1a0d06;
  --ok: #6fae7f;

  --container: 1180px;
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-l: 18px;

  --font-head: 'Unbounded', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;

  --ease: cubic-bezier(.22,.68,0,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{font-family:var(--font-head);margin:0;font-weight:600;letter-spacing:-0.01em;}
p{margin:0;}

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

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

@media (min-width:900px){
  .container{padding:0 40px;}
}

/* ---------- type scale ---------- */
.h-display{font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.02;}
.h-1{font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.06;}
.h-2{font-size:clamp(1.5rem,3vw,2.15rem);line-height:1.12;}
.h-3{font-size:1.15rem;line-height:1.3;}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--text-dim);line-height:1.6;}
.eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  font-size:.8rem;
  color:var(--accent-hi);
}

/* ---------- section rhythm ---------- */
section{padding:88px 0;}
@media (max-width:640px){section{padding:56px 0;}}
.section-head{max-width:640px;margin-bottom:44px;}
.section-head .lead{margin-top:14px;}

.split-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  margin-bottom:44px;
}
.split-head .section-head{margin-bottom:0;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 28px;
  border-radius:999px;
  font-weight:700;
  font-size:.98rem;
  border:1px solid transparent;
  transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-hi);}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--text);}
.btn-ghost:hover{border-color:var(--text-dim);}
.btn-light{background:var(--text);color:var(--bg);}
.btn-light:hover{background:#fff;}
.btn-block{width:100%;}
.btn-sm{padding:11px 20px;font-size:.88rem;}

.cta-row{display:flex;gap:14px;flex-wrap:wrap;}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(18,19,23,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  height:76px;
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-size:1.05rem;font-weight:600;}
.brand-mark{
  width:34px;height:34px;border-radius:8px;
  background:linear-gradient(135deg,var(--accent),#8a2f0f);
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;color:#fff;
}
.main-nav{display:none;gap:30px;align-items:center;}
.main-nav a{font-size:.94rem;color:var(--text-dim);transition:color .15s;}
.main-nav a:hover{color:var(--text);}
.header-actions{display:flex;align-items:center;gap:14px;}
.phone-link{display:none;font-size:.92rem;font-weight:700;}
@media (min-width:980px){
  .main-nav{display:flex;}
  .phone-link{display:inline-flex;}
}
.nav-toggle{
  display:flex;width:40px;height:40px;border-radius:8px;border:1px solid var(--line);
  align-items:center;justify-content:center;background:transparent;
}
@media (min-width:980px){.nav-toggle{display:none;}}
.nav-toggle span,.nav-toggle::before,.nav-toggle::after{content:"";display:block;width:18px;height:2px;background:var(--text);}
.nav-toggle{flex-direction:column;gap:4px;}

.mobile-nav{
  position:fixed;inset:76px 0 0 0;background:var(--bg);z-index:59;
  display:none;flex-direction:column;padding:24px;gap:2px;overflow:auto;
}
.mobile-nav.open{display:flex;}
.mobile-nav a{padding:16px 4px;border-bottom:1px solid var(--line-soft);font-size:1.05rem;}
.mobile-nav .cta-row{margin-top:20px;}

/* ---------- hero ---------- */
.hero{padding-top:64px;padding-bottom:64px;position:relative;overflow:hidden;}
.hero-grid{display:grid;gap:44px;align-items:center;}
@media (min-width:980px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:60px;}}
.hero-eyebrow{display:flex;align-items:center;gap:10px;color:var(--text-dim);font-size:.92rem;margin-bottom:20px;}
.hero-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);}
.hero h1{margin-bottom:20px;}
.hero .lead{max-width:520px;margin-bottom:32px;}
.hero-trust{display:flex;gap:22px;flex-wrap:wrap;margin-top:36px;}
.hero-trust div{font-size:.85rem;color:var(--text-faint);max-width:150px;line-height:1.4;}
.hero-trust strong{display:block;color:var(--text);font-family:var(--font-head);font-size:1rem;margin-bottom:4px;font-weight:600;}

.hero-visual{
  position:relative;border-radius:var(--radius-l);overflow:hidden;
  aspect-ratio:4/5;background:var(--surface);border:1px solid var(--line-soft);
}
@media (min-width:980px){.hero-visual{aspect-ratio:5/6;}}
.hero-visual img{width:100%;height:100%;object-fit:cover;}
.placeholder-tag{
  position:absolute;left:14px;bottom:14px;
  background:rgba(18,19,23,.75);backdrop-filter:blur(4px);
  padding:8px 14px;border-radius:999px;font-size:.75rem;color:var(--text-dim);
  border:1px solid var(--line-soft);
}
.img-ph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;
  background:
    repeating-linear-gradient(135deg, var(--surface-2) 0 2px, var(--surface) 2px 26px);
  color:var(--text-faint);font-size:.85rem;padding:20px;
}

/* ---------- usp strip ---------- */
.usp-strip{padding:0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--bg-raised);}
.usp-grid{display:grid;grid-template-columns:1fr;}
@media (min-width:760px){.usp-grid{grid-template-columns:repeat(4,1fr);}}
.usp-item{padding:26px 24px;border-bottom:1px solid var(--line-soft);}
@media (min-width:760px){.usp-item{border-bottom:none;border-right:1px solid var(--line-soft);}
  .usp-item:last-child{border-right:none;}}
.usp-item strong{display:block;font-family:var(--font-head);font-size:.98rem;margin-bottom:6px;font-weight:600;}
.usp-item p{color:var(--text-faint);font-size:.86rem;}

/* ---------- services ---------- */
.service-grid{display:grid;gap:20px;grid-template-columns:1fr;}
@media (min-width:700px){.service-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1080px){.service-grid{grid-template-columns:repeat(4,1fr);}}
.service-card{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-m);
  padding:28px 24px;display:flex;flex-direction:column;gap:16px;min-height:280px;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.service-card:hover{border-color:var(--line);background:var(--surface-2);}
.service-icon{width:44px;height:44px;border-radius:10px;background:var(--bg-raised);display:flex;align-items:center;justify-content:center;color:var(--accent-hi);}
.service-card h3{font-size:1.15rem;}
.service-card ul{color:var(--text-dim);font-size:.9rem;display:flex;flex-direction:column;gap:6px;flex:1;}
.service-card ul li{position:relative;padding-left:14px;}
.service-card ul li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--line);}
.service-card .btn{align-self:flex-start;margin-top:auto;}

/* ---------- calculator ---------- */
.calc-panel{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-l);
  padding:32px;display:grid;gap:32px;
}
@media (min-width:980px){.calc-panel{grid-template-columns:1.3fr .9fr;padding:44px;}}
.calc-field{margin-bottom:22px;}
.calc-field label{display:block;font-size:.85rem;color:var(--text-dim);margin-bottom:10px;font-weight:600;}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--text-dim);
  font-size:.88rem;transition:all .15s var(--ease);
}
.chip:hover{border-color:var(--text-dim);color:var(--text);}
.chip.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.range-row{display:flex;align-items:center;gap:16px;}
.range-row input[type=range]{flex:1;accent-color:var(--accent);}
.range-val{font-family:var(--font-head);font-size:1.1rem;min-width:78px;text-align:right;}
.stepper{display:flex;align-items:center;gap:14px;}
.stepper button{width:38px;height:38px;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--text);font-size:1.1rem;}
.stepper button:hover{border-color:var(--text-dim);}
.stepper span{font-family:var(--font-head);min-width:24px;text-align:center;}
.calc-result{
  background:var(--bg-raised);border:1px solid var(--line-soft);border-radius:var(--radius-m);
  padding:28px;align-self:start;position:sticky;top:96px;
}
.calc-result .label{font-size:.82rem;color:var(--text-faint);margin-bottom:6px;}
.calc-result .price{font-family:var(--font-head);font-size:2.3rem;margin-bottom:4px;}
.calc-result .price small{font-size:1rem;color:var(--text-faint);font-weight:400;}
.calc-note{font-size:.8rem;color:var(--text-faint);margin:14px 0 22px;line-height:1.5;}
.calc-breakdown{display:flex;flex-direction:column;gap:8px;margin-bottom:22px;font-size:.85rem;}
.calc-breakdown div{display:flex;justify-content:space-between;color:var(--text-dim);}
.calc-breakdown div strong{color:var(--text);font-weight:600;}
select.field-select{
  width:100%;padding:14px 16px;border-radius:var(--radius-s);border:1px solid var(--line);background:var(--bg-raised);color:var(--text);
  font-family:inherit;font-size:.95rem;
}

/* ---------- forms ---------- */
.form-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-l);padding:32px;}
.form-row{display:grid;gap:16px;margin-bottom:16px;}
@media (min-width:600px){.form-row.cols-2{grid-template-columns:1fr 1fr;}}
.field{display:flex;flex-direction:column;gap:8px;}
.field label{font-size:.85rem;color:var(--text-dim);font-weight:600;}
.field input[type=text],.field input[type=tel],.field textarea{
  padding:14px 16px;border-radius:var(--radius-s);border:1px solid var(--line);background:var(--bg-raised);color:var(--text);
  font-family:inherit;font-size:.95rem;
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-faint);}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media (min-width:600px){.check-grid{grid-template-columns:repeat(3,1fr);}}
.check-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-s);font-size:.88rem;}
.check-item input{accent-color:var(--accent);width:16px;height:16px;}
.upload-drop{
  border:1.5px dashed var(--line);border-radius:var(--radius-m);padding:26px;text-align:center;color:var(--text-faint);font-size:.88rem;
  cursor:pointer;transition:border-color .15s;
}
.upload-drop:hover{border-color:var(--text-dim);}
.upload-drop strong{color:var(--text);display:block;margin-bottom:4px;font-family:var(--font-body);}
.form-foot-note{font-size:.78rem;color:var(--text-faint);margin-top:16px;line-height:1.5;}
.form-success{display:none;text-align:center;padding:40px 20px;}
.form-success.show{display:block;}
.form-success .check{
  width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:1.5rem;
}

/* ---------- portfolio ---------- */
.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px;}
.portfolio-grid{display:grid;gap:20px;grid-template-columns:1fr;}
@media (min-width:700px){.portfolio-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1080px){.portfolio-grid{grid-template-columns:repeat(3,1fr);}}
.portfolio-card{border:1px solid var(--line-soft);border-radius:var(--radius-m);overflow:hidden;background:var(--surface);}
.portfolio-thumb{aspect-ratio:4/3;position:relative;}
.portfolio-body{padding:18px 20px;}
.portfolio-body .tag{font-size:.72rem;color:var(--accent-hi);font-weight:700;margin-bottom:8px;}
.portfolio-body h4{font-size:1rem;margin-bottom:8px;}
.portfolio-meta{font-size:.82rem;color:var(--text-faint);display:flex;flex-direction:column;gap:3px;}

/* ---------- why / process ---------- */
.why-grid{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--radius-m);overflow:hidden;grid-template-columns:1fr;}
@media (min-width:700px){.why-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1080px){.why-grid{grid-template-columns:repeat(3,1fr);}}
.why-item{background:var(--surface);padding:30px 26px;}
.why-item h3{font-size:1.05rem;margin-bottom:10px;}
.why-item p{color:var(--text-dim);font-size:.9rem;}

.process-list{display:flex;flex-direction:column;}
.process-item{
  display:grid;grid-template-columns:56px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid var(--line-soft);
}
.process-item:first-child{padding-top:0;}
.process-num{font-family:var(--font-head);font-size:1.3rem;color:var(--accent-hi);}
.process-item h3{font-size:1.1rem;margin-bottom:6px;}
.process-item p{color:var(--text-dim);font-size:.92rem;max-width:520px;}

/* ---------- pricing ---------- */
.price-table{width:100%;border-collapse:collapse;font-size:.92rem;}
.price-table th,.price-table td{text-align:left;padding:16px 14px;border-bottom:1px solid var(--line-soft);}
.price-table th{color:var(--text-faint);font-weight:600;font-size:.8rem;}
.price-table td.price-cell{font-family:var(--font-head);font-size:1rem;}
.price-wrap{overflow-x:auto;border:1px solid var(--line-soft);border-radius:var(--radius-m);padding:6px 20px;background:var(--surface);}

.offer-card{
  background:linear-gradient(135deg,var(--surface) 0%, var(--surface-2) 100%);
  border:1px solid var(--line-soft);border-radius:var(--radius-l);
  padding:40px;display:flex;flex-direction:column;gap:18px;align-items:flex-start;
}
@media (min-width:900px){.offer-card{flex-direction:row;justify-content:space-between;align-items:center;padding:44px 48px;}}
.offer-card .lead{max-width:520px;}

/* ---------- reviews ---------- */
.review-grid{display:grid;gap:20px;grid-template-columns:1fr;}
@media (min-width:760px){.review-grid{grid-template-columns:repeat(3,1fr);}}
.review-card{border:1px solid var(--line-soft);border-radius:var(--radius-m);padding:26px;background:var(--surface);display:flex;flex-direction:column;gap:16px;min-height:220px;}
.review-avatar{width:40px;height:40px;border-radius:50%;background:var(--bg-raised);border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--text-faint);}
.review-card p{color:var(--text-dim);font-size:.92rem;flex:1;}
.review-meta{display:flex;align-items:center;gap:12px;}
.review-meta span{font-size:.8rem;color:var(--text-faint);}

/* ---------- faq ---------- */
.faq-item{border-bottom:1px solid var(--line-soft);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;color:var(--text);
  padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:1rem;font-family:var(--font-body);font-weight:600;
}
.faq-q .plus{width:22px;height:22px;flex:none;position:relative;}
.faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:var(--text-dim);transition:transform .25s var(--ease);}
.faq-q .plus::before{width:100%;height:2px;top:50%;left:0;transform:translateY(-50%);}
.faq-q .plus::after{height:100%;width:2px;left:50%;top:0;transform:translateX(-50%);}
.faq-item.open .plus::after{transform:translateX(-50%) rotate(90deg);opacity:0;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease);}
.faq-a p{color:var(--text-dim);font-size:.92rem;padding-bottom:22px;max-width:640px;}
.faq-item.open .faq-a{max-height:220px;}

/* ---------- final cta ---------- */
.final-cta{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-l);
  padding:52px 40px;text-align:center;
}
.final-cta h2{max-width:640px;margin:0 auto 14px;}
.final-cta .lead{max-width:560px;margin:0 auto 30px;}
.final-cta .cta-row{justify-content:center;}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line-soft);padding:60px 0 100px;background:var(--bg-raised);}
.footer-grid{display:grid;gap:36px;grid-template-columns:1fr;}
@media (min-width:760px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;}}
.footer-grid h4{font-size:.85rem;color:var(--text-faint);margin-bottom:14px;font-weight:600;}
.footer-grid ul{display:flex;flex-direction:column;gap:10px;font-size:.9rem;color:var(--text-dim);}
.footer-grid ul a:hover{color:var(--text);}
.footer-bottom{
  margin-top:50px;padding-top:24px;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;color:var(--text-faint);font-size:.8rem;
}

/* ---------- sticky mobile cta ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(18,19,23,.92);backdrop-filter:blur(10px);
  border-top:1px solid var(--line-soft);
  display:flex;gap:10px;
}
@media (min-width:760px){.sticky-cta{display:none;}}
.sticky-cta .btn{flex:1;}
.sticky-cta .btn-icon{flex:0 0 auto;width:52px;padding:0;}

/* ---------- ai chat ---------- */
.ai-fab{
  position:fixed;right:20px;bottom:86px;z-index:65;
  width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(225,87,31,.35);
  border:none;font-size:1.3rem;
}
@media (min-width:760px){.ai-fab{bottom:32px;}}
.ai-panel{
  position:fixed;right:16px;bottom:150px;z-index:66;width:min(360px, calc(100vw - 32px));
  max-height:min(520px, calc(100vh - 200px));
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-l);
  display:none;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5);
}
@media (min-width:760px){.ai-panel{bottom:96px;}}
.ai-panel.open{display:flex;}
.ai-head{padding:16px 18px;border-bottom:1px solid var(--line-soft);display:flex;justify-content:space-between;align-items:center;}
.ai-head strong{font-family:var(--font-head);font-size:.95rem;font-weight:600;}
.ai-head p{font-size:.76rem;color:var(--text-faint);margin-top:2px;}
.ai-close{background:none;border:none;color:var(--text-faint);font-size:1.2rem;}
.ai-body{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:12px;}
.ai-msg{max-width:85%;padding:10px 14px;border-radius:14px;font-size:.87rem;line-height:1.5;}
.ai-msg.bot{background:var(--bg-raised);align-self:flex-start;border-bottom-left-radius:4px;}
.ai-msg.user{background:var(--accent);color:#fff;align-self:flex-end;border-bottom-right-radius:4px;}
.ai-input-row{padding:12px;border-top:1px solid var(--line-soft);display:flex;gap:8px;}
.ai-input-row input{flex:1;padding:12px 14px;border-radius:999px;border:1px solid var(--line);background:var(--bg-raised);color:var(--text);font-family:inherit;font-size:.88rem;}
.ai-input-row button{width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;border:none;flex:none;}

/* ---------- misc ---------- */
.badge-row{display:flex;flex-wrap:wrap;gap:10px;}
.badge{
  border:1px solid var(--line-soft);border-radius:999px;padding:9px 16px;font-size:.82rem;color:var(--text-dim);
  display:flex;align-items:center;gap:8px;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);}
.page-hero{padding-top:56px;padding-bottom:40px;border-bottom:1px solid var(--line-soft);}
.page-hero .lead{max-width:600px;margin-top:16px;}
.crumbs{font-size:.82rem;color:var(--text-faint);margin-bottom:18px;}
.crumbs a:hover{color:var(--text-dim);}

.two-col{display:grid;gap:60px;}
@media (min-width:900px){.two-col{grid-template-columns:1.1fr .9fr;}}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease), transform .6s var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- calculator wizard ---------- */
.wizard{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius-l);padding:28px;}
@media (min-width:760px){.wizard{padding:40px;}}
.wizard-progress{display:flex;gap:6px;margin-bottom:28px;}
.wizard-progress span{flex:1;height:3px;border-radius:2px;background:var(--line-soft);transition:background .25s var(--ease);}
.wizard-progress span.done,.wizard-progress span.current{background:var(--accent);}
.wizard-stepline{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.wizard-stepline .step-count{font-size:.8rem;color:var(--text-faint);}
.wizard-step{display:none;}
.wizard-step.active{display:block;animation:wizardIn .35s var(--ease);}
@keyframes wizardIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.wizard-step h3{font-size:1.2rem;margin-bottom:6px;}
.wizard-step .step-hint{color:var(--text-dim);font-size:.9rem;margin-bottom:22px;}

.fence-gallery{display:grid;gap:14px;grid-template-columns:repeat(2,1fr);}
@media (min-width:640px){.fence-gallery{grid-template-columns:repeat(4,1fr);}}
.fence-card{
  border:1.5px solid var(--line);border-radius:var(--radius-m);overflow:hidden;background:var(--bg-raised);
  text-align:left;transition:border-color .15s var(--ease), transform .15s var(--ease);
}
.fence-card:hover{border-color:var(--text-dim);}
.fence-card.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
.fence-card .fence-thumb{aspect-ratio:4/3;}
.fence-card .fence-info{padding:12px 14px;}
.fence-card .fence-info strong{display:block;font-size:.88rem;margin-bottom:4px;}
.fence-card .fence-info span{font-size:.78rem;color:var(--text-faint);}

.color-grid{display:flex;flex-wrap:wrap;gap:14px;}
.color-swatch{display:flex;flex-direction:column;align-items:center;gap:8px;border:none;background:none;}
.color-swatch .dot{width:40px;height:40px;border-radius:50%;border:2px solid var(--line);transition:border-color .15s;}
.color-swatch.active .dot{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);}
.color-swatch span{font-size:.74rem;color:var(--text-faint);max-width:80px;text-align:center;line-height:1.3;}

.gate-span-row{display:flex;align-items:center;gap:16px;margin-top:16px;}
.gate-span-price{font-size:.86rem;color:var(--text-dim);margin-top:10px;}
.gate-span-price strong{color:var(--text);font-family:var(--font-head);}

.wizard-nav{display:flex;justify-content:space-between;gap:12px;margin-top:32px;padding-top:24px;border-top:1px solid var(--line-soft);}
.wizard-nav .btn{min-width:120px;}

.summary-total{background:var(--bg-raised);border:1px solid var(--line-soft);border-radius:var(--radius-m);padding:26px;margin-bottom:24px;}
.summary-total .label{font-size:.82rem;color:var(--text-faint);margin-bottom:6px;}
.summary-total .price-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.summary-total .price-now{font-family:var(--font-head);font-size:2.1rem;}
.summary-total .price-old{font-size:1.1rem;color:var(--text-faint);text-decoration:line-through;}
.summary-total .discount-badge{background:var(--accent);color:#fff;font-size:.76rem;font-weight:700;padding:4px 10px;border-radius:999px;}

.discount-panel{border:1px dashed var(--line);border-radius:var(--radius-m);padding:22px;margin-bottom:24px;}
.discount-panel h4{font-size:1rem;margin-bottom:6px;}
.discount-panel p{color:var(--text-dim);font-size:.87rem;margin-bottom:16px;}
.discount-panel.unlocked{border-style:solid;border-color:var(--accent);}
.discount-form-row{display:grid;gap:10px;grid-template-columns:1fr;}
@media (min-width:560px){.discount-form-row{grid-template-columns:1fr 1fr auto;align-items:end;}}
.discount-result{display:none;align-items:center;gap:10px;color:var(--ok);font-size:.9rem;margin-top:12px;}
.discount-result.show{display:flex;}

.more-request-toggle{font-size:.86rem;text-decoration:underline;color:var(--text-dim);background:none;border:none;padding:0;}
/* ============================ ПРЕМИАЛЬНЫЙ ДИЗАЙН ============================ */

/* Улучшение визуального восприятия */
:root {
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.18);
}

/* Более чёткие карточки с микротенями */
.service-card,
.review-card,
.portfolio-card,
.form-card,
.fence-card {
  box-shadow: var(--shadow-sm);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}

.service-card:hover,
.review-card:hover,
.portfolio-card:hover,
.fence-card.active {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Премиальный вид карточек */
.service-card {
  background: linear-gradient(135deg, var(--surface) 0%, var(--bg-raised) 100%);
  border-color: var(--line-soft);
}

.service-card:hover {
  border-color: var(--text-dim);
}

/* Более выраженная типография */
h1, h2, h3, h4 {
  letter-spacing: -0.015em;
  font-weight: 700;
}

.h-display {
  line-height: 1.08;
  letter-spacing: -0.02em;
}

/* Улучшение читаемости body текста */
body {
  font-weight: 400;
  letter-spacing: 0.3px;
}

/* Премиальные кнопки с более явным хавером */
.btn {
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: all .25s var(--ease);
  position: relative;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255, 0);
  transition: background .25s var(--ease);
  pointer-events: none;
}

.btn:hover::after {
  background: rgba(255,255,255, 0.08);
}

.btn-primary {
  box-shadow: 0 2px 8px rgba(225, 87, 31, 0.15);
}

.btn-primary:hover {
  box-shadow: 0 4px 16px rgba(225, 87, 31, 0.25);
}

/* Более аккуратные инпуты и текстареи */
.field input,
.field textarea,
select.field-select {
  transition: border-color .15s, box-shadow .15s;
}

.field input:focus,
.field textarea:focus,
select.field-select:focus {
  border-color: var(--accent-hi);
  box-shadow: 0 0 0 3px rgba(225, 87, 31, 0.08);
}

/* Премиальный вид фото-плейсхолдера */
.img-ph {
  background: linear-gradient(135deg, #1a1d22 0%, #0f1114 100%);
  color: var(--text-faint);
  font-size: 0.8rem;
  position: relative;
  overflow: hidden;
}

.img-ph::before {
  content: "📷";
  position: absolute;
  font-size: 2.5rem;
  opacity: 0.1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

/* Лучший вид демо-ярлычка */
.placeholder-tag {
  background: rgba(30, 33, 38, 0.9);
  border: 1px solid var(--line);
  color: var(--text-faint);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  backdrop-filter: blur(8px);
}

/* Улучшение цветных свотчей */
.color-swatch .dot {
  box-shadow: inset 0 0 0 1px var(--line);
  transition: all .2s var(--ease);
}

.color-swatch.active .dot {
  box-shadow: 0 0 0 3px var(--accent), inset 0 0 0 1px var(--accent);
}

/* Более премиальный вид героя */
.hero {
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(225,87,31,0.03) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Премиальный вид полосы USP */
.usp-strip {
  background: linear-gradient(135deg, var(--bg-raised) 0%, var(--bg) 100%);
}

/* Улучшение процесса шагов */
.wizard-step {
  animation: none;
}

.wizard-step.active {
  animation: fadeIn .3s var(--ease);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Более приятный калькулятор */
.wizard {
  background: linear-gradient(135deg, var(--surface) 0%, var(--bg-raised) 100%);
}

/* Улучшение фокуса на интерактивные элементы */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 2px;
}

/* Премиальный вид шапки */
.site-header {
  background: linear-gradient(180deg, rgba(18,19,23,0.95) 0%, rgba(18,19,23,0.92) 100%);
}

/* Лучший вид скидок и выделений */
.discount-badge {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 2px 8px rgba(225, 87, 31, 0.3);
}

/* Улучшение навигации */
.main-nav a {
  position: relative;
  font-weight: 500;
}

.main-nav a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width .3s var(--ease);
}

.main-nav a:hover::after {
  width: 100%;
}

/* Слегка улучшенный контрастный вид текста */
p {
  color: var(--text);
}

.lead {
  color: var(--text-dim);
  font-weight: 400;
}

/* Более аккуратный вид инпутов в формах */
input[type="text"],
input[type="tel"],
textarea {
  font-size: 16px; /* предотвращает zoom на iOS */
}


/* ---------- quiz (лидформа) ---------- */
.quiz-error{color:#ff6b5a;font-size:.85rem;margin-top:10px;}
.visually-hidden-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.quiz-recap{
  background:var(--bg-raised);border:1px solid var(--line-soft);border-radius:var(--radius-m);
  padding:18px 20px;margin:20px 0 24px;
}
.quiz-recap div{display:flex;justify-content:space-between;gap:16px;padding:7px 0;font-size:.9rem;}
.quiz-recap div+div{border-top:1px solid var(--line-soft);}
.quiz-recap span{color:var(--text-dim);}
.quiz-recap strong{text-align:right;}

.quiz-success{text-align:center;padding:36px 20px;}
.quiz-success .check{
  width:60px;height:60px;border-radius:50%;background:var(--accent);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;margin:0 auto 20px;
}
.quiz-success p{color:var(--text-dim);margin-bottom:10px;}
.quiz-success .quiz-success-note{
  color:var(--text-faint);font-size:.88rem;margin:20px 0 24px;
  padding-top:20px;border-top:1px solid var(--line-soft);
}

.wizard input[type="number"]{
  width:100%;padding:13px 15px;background:var(--bg-raised);border:1.5px solid var(--line);
  border-radius:var(--radius-s);color:var(--text);font-size:16px;font-family:inherit;
}
.wizard input[type="number"]:focus{border-color:var(--accent-hi);outline:none;}

/* ---------- honeypot (скрытое антиспам-поле) ---------- */
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none;}

/* ---------- hero: цепочка процесса ---------- */
.hero-chain{
  margin-top:22px;color:var(--text-faint);font-size:.9rem;line-height:1.6;
}
@media (max-width:600px){
  .hero-chain{font-size:.85rem;}
}

/* ---------- крупная главная кнопка ---------- */
.btn-lg{padding:17px 32px;font-size:1.02rem;}
@media (max-width:600px){
  .btn-lg{width:100%;justify-content:center;}
  .hero .cta-row{flex-direction:column;align-items:stretch;gap:10px;}
  .hero .cta-row .btn{width:100%;justify-content:center;}
}

/* ---------- mobile safety ---------- */
html, body { max-width:100%; overflow-x:hidden; }
img, video, table { max-width:100%; }

/* минимальный размер тач-таргета (рекомендация 44×44) */
@media (max-width:768px){
  .btn, .chip, .faq-q, .stepper button { min-height:44px; }
  .chip { padding:11px 16px; }
  /* чтобы sticky-панель не перекрывала конец страницы */
  body { padding-bottom:76px; }
}

/* ---------- реальные фотографии сайта ---------- */
.site-photo{
  width:100%;
  height:100%;
  object-fit:cover;      /* фото заполняет блок, не растягиваясь уродливо */
  display:block;
  border-radius:inherit;
}
.hero-visual .site-photo{ aspect-ratio:4/3; }
.portfolio-thumb .site-photo{ aspect-ratio:4/3; }
.fence-thumb .site-photo{ aspect-ratio:4/3; }

/* ---------- первый экран с фоновым фото ---------- */
.hero-bg{
  position:relative;
  background-image:url('/images/hero-bg.jpg');
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
  min-height:600px;
  display:flex;
  align-items:center;
  padding:80px 0;
  overflow:hidden;
}
/* затемнение слева, чтобы текст читался поверх фото */
.hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,
    rgba(12,13,16,0.94) 0%,
    rgba(12,13,16,0.86) 32%,
    rgba(12,13,16,0.52) 58%,
    rgba(12,13,16,0.22) 100%);
  pointer-events:none;
  z-index:0;
}
.hero-bg .container{ position:relative; z-index:1; }
.hero-bg .hero-content{ max-width:560px; }
.hero-bg .h-display{ margin-bottom:14px; }
.hero-bg .lead{ color:#d6d8dc; max-width:440px; }
.hero-bg .hero-chain{ color:#a9acb3; }

/* фоновая картинка отменяет декоративное свечение из базового .hero */
.hero-bg::before{ display:none; }

@media (max-width:900px){
  .hero-bg{
    min-height:520px;
    background-position:68% center;
    padding:60px 0;
  }
  .hero-bg::after{
    background:linear-gradient(180deg,
      rgba(12,13,16,0.92) 0%,
      rgba(12,13,16,0.86) 45%,
      rgba(12,13,16,0.72) 100%);
  }
  .hero-bg .hero-content{ max-width:100%; }
}
@media (max-width:600px){
  .hero-bg{ min-height:480px; }
}

/* ---------- карточки выбора забора: подпись поверх фото ---------- */
.fence-card{
  position:relative;
  padding:0;
  overflow:hidden;
  border-radius:var(--radius-m);
}
.fence-card .fence-thumb{
  aspect-ratio:4/3;
  margin:0;
}
.fence-card .fence-thumb img,
.fence-card .fence-thumb .img-ph{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .4s var(--ease);
}
.fence-card:hover .fence-thumb img{ transform:scale(1.04); }

/* подпись лежит на фото, снизу, на мягком затемнении */
.fence-label{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:26px 12px 10px;
  font-size:.86rem;
  font-weight:600;
  color:#fff;
  text-align:left;
  letter-spacing:.2px;
  background:linear-gradient(to top, rgba(10,11,14,0.88) 0%, rgba(10,11,14,0.55) 55%, rgba(10,11,14,0) 100%);
  pointer-events:none;
}

/* галочка выбранного варианта */
.fence-check{
  position:absolute;
  top:10px; right:10px;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-size:.82rem;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:scale(.7);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
  pointer-events:none;
}
.fence-card.active .fence-check{ opacity:1; transform:scale(1); }
.fence-card.active .fence-label{ background:linear-gradient(to top, rgba(225,87,31,0.92) 0%, rgba(225,87,31,0.45) 60%, rgba(225,87,31,0) 100%); }

@media (max-width:600px){
  .fence-label{ font-size:.8rem; padding:22px 10px 8px; }
}

/* ---------- шапки внутренних страниц: то же фото, что и на главной ---------- */
.page-hero-bg{
  position:relative;
  background-image:url('/images/hero-bg.jpg');
  background-size:cover;
  background-position:center 35%;
  background-repeat:no-repeat;
  padding:64px 0 56px;
  overflow:hidden;
}
.page-hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,
    rgba(12,13,16,0.95) 0%,
    rgba(12,13,16,0.88) 40%,
    rgba(12,13,16,0.66) 72%,
    rgba(12,13,16,0.42) 100%);
  pointer-events:none;
  z-index:0;
}
.page-hero-bg .container{ position:relative; z-index:1; }
.page-hero-bg .lead{ color:#d6d8dc; }
.page-hero-bg .crumbs{ color:#a9acb3; }
.page-hero-bg .crumbs a{ color:#c7cad0; }

@media (max-width:900px){
  .page-hero-bg{ padding:48px 0 42px; background-position:68% 35%; }
  .page-hero-bg::after{
    background:linear-gradient(180deg,
      rgba(12,13,16,0.93) 0%,
      rgba(12,13,16,0.86) 60%,
      rgba(12,13,16,0.76) 100%);
  }
}

/* ---------- телефон в шапке: отдельная кнопка с иконкой ---------- */
.phone-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 16px 9px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,0.03);
  color:var(--text);
  font-family:var(--font-head);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.2px;
  white-space:nowrap;
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.phone-btn svg{
  width:16px;
  height:16px;
  fill:var(--accent);
  flex-shrink:0;
  transition:fill .2s var(--ease);
}
.phone-btn:hover{
  border-color:var(--accent);
  background:rgba(225,87,31,0.10);
  color:#fff;
}
.phone-btn:hover svg{ fill:var(--accent-hi); }
.phone-btn:focus-visible{
  outline:2px solid var(--accent-hi);
  outline-offset:3px;
}

/* на узких экранах прячем номер — там работает нижняя панель со звонком */
@media (max-width:1080px){
  .phone-btn span{ display:none; }
  .phone-btn{ padding:9px 11px; }
}
@media (max-width:860px){
  .phone-btn{ display:none; }
}

/* телефон в футере — крупнее остальных пунктов */
.footer-phone{
  font-family:var(--font-head);
  font-size:1.05rem;
  font-weight:600;
  color:var(--text);
}
.footer-phone:hover{ color:var(--accent-hi); }