/* MT Strechy - header/footer/hero screenshot refinement patch */

:root{
  --mt-accent:#ff7a1a;
  --mt-topbar:#0b1118;
  --mt-text:#111827;
}

/* ========== TOP BLACK STRIP ========== */
.topbar,
.site-topbar,
.header-top,
.top-strip{
  background:var(--mt-topbar) !important;
  color:#fff !important;
  font-size:13px !important;
  line-height:1.2 !important;
}

.topbar .container,
.site-topbar .container,
.header-top .container,
.top-strip .container{
  min-height:42px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

.topbar .topbar-left,
.site-topbar .topbar-left,
.header-top .topbar-left,
.top-strip .topbar-left{
  display:flex !important;
  align-items:center !important;
  gap:26px !important;
  flex-wrap:wrap !important;
}

.topbar .topbar-right,
.site-topbar .topbar-right,
.header-top .topbar-right,
.top-strip .topbar-right{
  display:flex !important;
  align-items:center !important;
  gap:22px !important;
  flex-wrap:wrap !important;
}

.topbar .topbar-item,
.site-topbar .topbar-item,
.header-top .topbar-item,
.top-strip .topbar-item,
.topbar .contact-item,
.site-topbar .contact-item,
.header-top .contact-item,
.top-strip .contact-item{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  color:#fff !important;
  text-decoration:none !important;
  font-weight:500 !important;
}

.topbar a:hover,
.site-topbar a:hover,
.header-top a:hover,
.top-strip a:hover{
  color:#fff !important;
  opacity:.92;
}

/* Explicit icon support for phone/mail + left info texts */
.topbar .contact-item i,
.topbar .contact-item svg,
.topbar .topbar-item i,
.topbar .topbar-item svg,
.site-topbar .contact-item i,
.site-topbar .contact-item svg,
.site-topbar .topbar-item i,
.site-topbar .topbar-item svg,
.header-top .contact-item i,
.header-top .contact-item svg,
.header-top .topbar-item i,
.header-top .topbar-item svg,
.top-strip .contact-item i,
.top-strip .contact-item svg,
.top-strip .topbar-item i,
.top-strip .topbar-item svg{
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  min-height:16px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:var(--mt-accent) !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2.2 !important;
  flex:0 0 auto !important;
}

/* If icons were hidden by older CSS, bring them back */
.topbar .contact-item i,
.topbar .contact-item svg,
.site-topbar .contact-item i,
.site-topbar .contact-item svg,
.header-top .contact-item i,
.header-top .contact-item svg,
.top-strip .contact-item i,
.top-strip .contact-item svg{
  opacity:1 !important;
  visibility:visible !important;
}

/* Footer phone/mail icons */
.site-footer .contact-item i,
.site-footer .contact-item svg,
footer .contact-item i,
footer .contact-item svg,
.footer-contact i,
.footer-contact svg{
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  min-height:16px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:var(--mt-accent) !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2.2 !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* ========== HERO HEADING ========== */
.hero-title,
.hero h1,
.hero-content h1,
.home-hero h1{
  color:var(--mt-text) !important;
  font-weight:800 !important;
  line-height:1.05 !important;
  letter-spacing:-0.03em !important;
}

/* Orange second line or highlighted phrase */
.hero-title .accent,
.hero-title .highlight,
.hero h1 .accent,
.hero h1 .highlight,
.hero-content h1 .accent,
.hero-content h1 .highlight,
.home-hero h1 .accent,
.home-hero h1 .highlight{
  color:var(--mt-accent) !important;
}

/* Fallback when orange phrase is separate line element */
.hero-title .hero-accent-line,
.hero-content .hero-accent-line,
.home-hero .hero-accent-line{
  color:var(--mt-accent) !important;
  display:block !important;
  font-weight:800 !important;
}

/* Match screenshot proportions a bit closer */
.hero,
.home-hero{
  position:relative;
}
.hero .hero-content,
.home-hero .hero-content{
  max-width:620px !important;
}
.hero-buttons,
.hero-actions{
  display:flex !important;
  gap:14px !important;
  flex-wrap:wrap !important;
}

/* Buttons closer to screenshot */
.hero-buttons .btn,
.hero-actions .btn,
.btn{
  border-radius:12px !important;
  font-weight:700 !important;
  padding:14px 22px !important;
}
.hero-buttons .btn-primary,
.hero-actions .btn-primary{
  background:var(--mt-accent) !important;
  border-color:var(--mt-accent) !important;
  color:#fff !important;
}
.hero-buttons .btn-secondary,
.hero-actions .btn-secondary{
  background:#fff !important;
  color:#111827 !important;
  border:1px solid #d7dce2 !important;
}

/* Benefit strip under hero closer to screenshot */
.hero-benefits,
.benefits-strip,
.hero-features{
  background:#131a22 !important;
  color:#fff !important;
  border-radius:16px !important;
  box-shadow:0 12px 30px rgba(0,0,0,.16) !important;
}
.hero-benefits .item i,
.hero-benefits .item svg,
.benefits-strip .item i,
.benefits-strip .item svg,
.hero-features .item i,
.hero-features .item svg{
  color:var(--mt-accent) !important;
  width:22px !important;
  height:22px !important;
  stroke-width:2.1 !important;
}
.hero-benefits .item-title,
.benefits-strip .item-title,
.hero-features .item-title{
  font-weight:700 !important;
  color:#fff !important;
}
.hero-benefits .item-text,
.benefits-strip .item-text,
.hero-features .item-text{
  color:rgba(255,255,255,.78) !important;
}

/* Mobile */
@media (max-width: 820px){
  .topbar .container,
  .site-topbar .container,
  .header-top .container,
  .top-strip .container{
    min-height:auto !important;
    padding:10px 0 !important;
    align-items:flex-start !important;
    flex-direction:column !important;
    gap:8px !important;
  }

  .topbar .topbar-left,
  .site-topbar .topbar-left,
  .header-top .topbar-left,
  .top-strip .topbar-left,
  .topbar .topbar-right,
  .site-topbar .topbar-right,
  .header-top .topbar-right,
  .top-strip .topbar-right{
    gap:12px !important;
  }

  .hero-title,
  .hero h1,
  .hero-content h1,
  .home-hero h1{
    font-size:42px !important;
  }
}
@media (max-width: 820px) {
  .hero-benefits,
  .benefits-strip,
  .hero-features {
    margin-top: 28px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .hero-buttons,
  .hero-actions {
    margin-bottom: 110px !important;
    position: relative !important;
    z-index: 3 !important;
  }
}