/* ============================================================
   ГЛУШИТЕЛИ.COM.UA — редизайн
   Дизайн: тёмная мастерская + искра сварки.
   Шрифты: Oswald (заголовки, конденсед) + Inter (текст)
   ============================================================ */

:root{
  --bg:        #1c1a17;
  --bg-panel:  #242119;
  --bg-panel-2:#2b2720;
  --line:      #3a352b;
  --line-soft: #302c24;
  --steel:     #a8a196;
  --steel-dim: #746e63;
  --text:      #f3efe6;
  --text-dim:  #c9c2b4;
  --accent:    #ff6a2c;
  --accent-2:  #ffc93c;
  --accent-ink:#1c1a17;

  --font-head: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;

  --maxw: 1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--font-head);
  font-weight:600;
  line-height:1.08;
  margin:0 0 .5em;
  letter-spacing:.01em;
}
h1{font-size:clamp(2.4rem,5vw,4.2rem);}
h2{font-size:clamp(1.7rem,3vw,2.5rem);}
h3{font-size:1.3rem;}
p{margin:0 0 1em;max-width:62ch;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.dim{color:var(--text-dim);}
.steel{color:var(--steel);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-head);
  font-size:1.02rem;
  letter-spacing:.02em;
  padding:14px 26px;
  border:2px solid var(--accent);
  background:var(--accent);
  color:var(--accent-ink);
  text-decoration:none;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .1s ease;
}
.btn:hover{background:transparent;color:var(--accent);}
.btn:active{transform:translateY(1px);}
.btn-ghost{
  background:transparent;
  color:var(--text);
  border:2px solid var(--line);
}
.btn-ghost:hover{border-color:var(--steel);color:var(--text);}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(28,26,23,.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;
  max-width:var(--maxw);margin:0 auto;
}
.logo{
  font-family:var(--font-head);
  font-size:1.3rem;
  text-decoration:none;
  color:var(--text);
  display:flex;align-items:baseline;gap:8px;
}
.logo span{color:var(--accent);}
nav.main{display:flex;gap:2px;flex-wrap:wrap;}
nav.main a{
  font-size:.92rem;
  padding:10px 14px;
  text-decoration:none;
  color:var(--text-dim);
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
nav.main a:hover,nav.main a.active{color:var(--text);border-color:var(--accent);}
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:var(--text);
  padding:8px 12px;font-size:1.1rem;cursor:pointer;}

@media (max-width:900px){
  nav.main{
    display:none;
    flex-direction:column;
    width:100%;
    position:absolute;top:100%;left:0;
    background:var(--bg-panel);
    border-bottom:1px solid var(--line);
    padding:8px 0;
  }
  nav.main.open{display:flex;}
  nav.main a{padding:14px 28px;border-bottom:1px solid var(--line-soft);}
  .nav-toggle{display:block;}
  header.site{position:relative;}
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:88px 0 96px;
  background:
    linear-gradient(180deg, rgba(28,26,23,0) 0%, var(--bg) 92%),
    repeating-linear-gradient(135deg, var(--bg-panel) 0 2px, var(--bg) 2px 34px);
}
.hero .container{position:relative;z-index:2;}
.hero .eyebrow{
  font-family:var(--font-head);
  color:var(--accent);
  font-size:1rem;
  margin-bottom:14px;
  display:flex;align-items:center;gap:10px;
}
.hero .eyebrow .dash{width:36px;height:2px;background:var(--accent);display:inline-block;}
.hero h1{max-width:16ch;}
.hero .lead{font-size:1.15rem;color:var(--text-dim);max-width:52ch;margin:18px 0 32px;}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;}
.hero-shape{
  position:absolute;right:-8%;top:-10%;width:56%;height:130%;
  background:linear-gradient(160deg, var(--bg-panel-2), var(--bg-panel) 60%);
  clip-path:polygon(28% 0, 100% 0, 100% 100%, 0% 100%);
  z-index:1;
  border-left:2px solid var(--line);
}
.hero-shape::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,106,44,.18), transparent 40%),
    radial-gradient(circle at 70% 75%, rgba(255,201,60,.10), transparent 45%);
}

/* ---------- section scaffolding ---------- */
section{padding:76px 0;}
.section-head{margin-bottom:44px;max-width:60ch;}
.section-head .kicker{
  font-family:var(--font-head);color:var(--accent);font-size:.95rem;margin-bottom:8px;display:block;
}
.alt{background:var(--bg-panel);}

/* ---------- service grid (metal plates) ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.plate{
  background:var(--bg-panel);
  padding:32px 28px;
  border-left:3px solid transparent;
  transition:border-color .15s ease, background .15s ease;
}
.plate:hover{border-left-color:var(--accent);background:var(--bg-panel-2);}
.plate .icon{color:var(--accent);margin-bottom:16px;}
.plate h3{margin-bottom:10px;}
.plate p{font-size:.95rem;color:var(--text-dim);margin-bottom:14px;}
.plate a.more{font-size:.9rem;color:var(--accent);text-decoration:none;font-family:var(--font-head);}
.plate a.more:hover{text-decoration:underline;}

/* ---------- price table ---------- */
.price-table{width:100%;border-collapse:collapse;margin-top:8px;}
.price-table th{
  text-align:left;font-family:var(--font-head);font-weight:500;
  color:var(--steel);font-size:.85rem;
  padding:10px 16px;border-bottom:1px solid var(--line);
}
.price-table td{
  padding:16px;
  border-bottom:1px solid var(--line-soft);
  font-size:.98rem;
}
.price-table tr:hover td{background:var(--bg-panel);}
.price-table td.price{
  font-family:var(--font-head);
  color:var(--accent-2);
  font-size:1.05rem;
  white-space:nowrap;
  text-align:right;
}
.price-note{font-size:.87rem;color:var(--steel-dim);margin-top:14px;}

/* ---------- stripe / callout ---------- */
.stripe{
  background:
    repeating-linear-gradient(135deg, var(--accent) 0 18px, var(--accent-2) 18px 36px);
  height:6px;width:100%;
}
.callout{
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  background:var(--bg-panel);
  padding:28px 30px;
  display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;justify-content:space-between;
}
.callout p{margin:0;max-width:48ch;}

/* ---------- steps ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line);}
.steps li{
  display:grid;grid-template-columns:64px 1fr;gap:20px;
  padding:22px 0;border-bottom:1px solid var(--line);
}
.steps li .num{
  font-family:var(--font-head);font-size:1.6rem;color:var(--accent);
}
.steps li h4{margin:0 0 6px;}
.steps li p{margin:0;color:var(--text-dim);font-size:.95rem;}

/* ---------- brands strip ---------- */
.brands{display:flex;flex-wrap:wrap;gap:10px 14px;}
.brands span{
  border:1px solid var(--line);
  padding:7px 14px;
  font-size:.88rem;
  color:var(--text-dim);
}

/* ---------- footer ---------- */
footer.site{
  background:var(--bg-panel);
  border-top:1px solid var(--line);
  padding:56px 0 28px;
  margin-top:40px;
}
.footer-grid{
  display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;margin-bottom:40px;
}
footer.site h4{font-family:var(--font-head);font-size:1rem;color:var(--steel);margin-bottom:14px;}
footer.site a{color:var(--text-dim);text-decoration:none;font-size:.94rem;}
footer.site a:hover{color:var(--accent);}
footer.site ul{list-style:none;padding:0;margin:0;display:grid;gap:8px;}
.footer-bottom{
  border-top:1px solid var(--line);padding-top:20px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:.85rem;color:var(--steel-dim);
}
@media (max-width:760px){
  .footer-grid{grid-template-columns:1fr;gap:28px;}
}

/* ---------- contact form ---------- */
.form-box{background:var(--bg-panel);border:1px solid var(--line);padding:32px;max-width:480px;}
.form-box label{display:block;font-size:.85rem;color:var(--steel);margin:14px 0 6px;font-family:var(--font-head);}
.form-box input,.form-box textarea{
  width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);
  padding:12px 14px;font-family:var(--font-body);font-size:.95rem;
}
.form-box textarea{min-height:100px;resize:vertical;}
.form-box .btn{margin-top:20px;width:100%;justify-content:center;}

/* ---------- contact info block ---------- */
.info-list{list-style:none;padding:0;margin:0;display:grid;gap:18px;}
.info-list li{display:flex;gap:14px;align-items:flex-start;}
.info-list .icon{color:var(--accent);flex-shrink:0;margin-top:2px;}
.info-list b{display:block;font-family:var(--font-head);font-weight:500;color:var(--text);margin-bottom:2px;}

/* ---------- two-col layout ---------- */
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start;}
@media (max-width:860px){.two-col{grid-template-columns:1fr;}}

.tag{
  display:inline-block;border:1px solid var(--line);color:var(--steel);
  font-size:.78rem;padding:4px 10px;margin:0 8px 8px 0;
}

/* ---------- lang switcher ---------- */
.lang-switch{display:flex;gap:2px;align-items:center;margin-left:6px;}
.lang-switch a{
  font-family:var(--font-head);font-size:.82rem;
  padding:6px 9px;color:var(--steel-dim);text-decoration:none;
  border:1px solid var(--line);
}
.lang-switch a.current{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);}
.lang-switch a:not(.current):hover{color:var(--text);border-color:var(--steel);}

/* ---------- skip link ---------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--accent);color:var(--accent-ink);
  padding:12px 18px;font-family:var(--font-head);text-decoration:none;
}
.skip-link:focus{left:12px;top:12px;}

/* ---------- 404 ---------- */
.error-page{padding:120px 0;text-align:center;}
.error-page h1{font-size:clamp(3rem,10vw,7rem);color:var(--accent);margin-bottom:10px;}

/* ---------- breadcrumb ---------- */
.breadcrumb{padding:16px 0;border-bottom:1px solid var(--line-soft);}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:.85rem;color:var(--steel-dim);}
.breadcrumb a{color:var(--steel-dim);text-decoration:none;}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb li:not(:last-child)::after{content:"/";margin-left:6px;color:var(--line);}
.breadcrumb li[aria-current]{color:var(--text-dim);}

/* ---------- FAQ (native disclosure, no JS needed) ---------- */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);padding:18px 0;}
.faq summary{
  cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:var(--font-head);font-size:1.05rem;color:var(--text);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--accent);font-size:1.3rem;flex-shrink:0;transition:transform .15s ease;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq .a{margin:14px 0 0;color:var(--text-dim);font-size:.96rem;max-width:70ch;}

/* ---------- related services ---------- */
.related{display:flex;flex-wrap:wrap;gap:10px;}
.related a{
  border:1px solid var(--line);padding:10px 16px;text-decoration:none;color:var(--text-dim);
  font-size:.9rem;transition:border-color .15s ease,color .15s ease;
}
.related a:hover{border-color:var(--accent);color:var(--text);}

/* ---------- form validation states ---------- */
.form-box input:invalid:not(:placeholder-shown),
.form-box textarea:invalid:not(:placeholder-shown){border-color:#e2554a;}
.form-box input:valid:not(:placeholder-shown),
.form-box textarea:valid:not(:placeholder-shown){border-color:#5a9c6a;}
.form-box .field-hint{font-size:.78rem;color:var(--steel-dim);margin-top:4px;}
.form-box .field-hint.error{color:#e2554a;}
.form-box label .req{color:var(--accent);}