﻿:root { --stachanov-rood: #9D3030; }
    body { font-family: 'Roboto Condensed', sans-serif; color: #000; }
    h1,h2,h3 { font-family: 'Oswald', sans-serif; letter-spacing: 0.5px; color:#000; }
    main h1, main h2, main h3 { color:#000; }
    .text-stachanov-rood { color: var(--stachanov-rood); }
    .border-stachanov-rood { border-color: var(--stachanov-rood); }
    .bg-stachanov-rood { background-color: var(--stachanov-rood); }


:root { --stachanov-rood:#9D3030; }
@layer utilities { .bg-custom-dark { background-color: rgba(17,17,17,0.92); } }
.text-stachanov-rood { color: var(--stachanov-rood); }


@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }


.hero-section {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  padding: 5rem 1.25rem;
  background: #fff;
  color: #000;
  min-height: 360px;
}

.hero-left {
  flex: 1 1 50%;
  max-width: 56rem;
}

.hero-right {
  flex: 1 1 40%;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-section h1 {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 1.04;
  margin: 0 0 0.75rem 0;
  color: #000;
}

.hero-section p {
  font-family: 'Roboto Condensed', 'Roboto', sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  color: #374151;
  margin: 0 0 1.25rem 0;
  max-width: 46rem;
}

.hero-cta {
  display: inline-flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.hero-cta a,
.hero-cta button {
  background: var(--stachanov-rood);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.hero-right img {
  max-width: 480px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 767px) {
  .hero-section {
    flex-direction: column-reverse;
    padding: 3rem 1rem;
    min-height: auto;
    gap: 1.25rem;
  }
  .hero-left,
  .hero-right {
    width: 100%;
    max-width: none;
  }
  .hero-right img {
    max-width: 360px;
  }
  .hero-right {
    min-height: 160px;
  }
}


@media (min-width: 768px) {
  .hero-section {
    flex-direction: row;
    padding: 6rem 4rem;
  }
  .hero-section > div:first-child {
    flex: 1 1 50%;
  }
  .hero-section > div:last-child {
    flex: 1 1 50%;
  }
}

* { transition: transform .3s ease, opacity .3s ease; }


.bg-white.rounded-xl { transition: all .3s cubic-bezier(0.4,0,0.2,1); }
.bg-white.rounded-xl:hover {
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
}


button { position: relative; overflow: hidden; }
button::before {
  content:''; position:absolute; top:50%; left:50%; width:0; height:0; border-radius:50%;
  background: rgba(255,255,255,0.3); transform:translate(-50%,-50%); transition: width .6s, height .6s;
}
button:active::before { width:300px; height:300px; }



.scroll-progress {
  position: fixed; top:0; left:0; width:0%; height:4px;
  background: linear-gradient(to right, #9D3030, #ff6b6b); z-index:9999; transition: width .1s ease;
}


.parallax-layer { transition: transform .5s cubic-bezier(0.4,0,0.2,1); }


@media (max-width: 768px) {
  .hero-section h1 { font-size: 2rem; }
  .hero-section p { font-size: 1rem; }
}


body { padding-top: 80px; }
main { min-height: calc(100vh - 80px); }


.lang-btn { background: transparent; color:#9ca3af; border:1px solid transparent; }
.lang-btn:hover { color:#60a5fa; }
.lang-btn.active { background:#9D3030; color:#fff; border-color:#9D3030; }


.reveal { opacity: 0; transform: translateY(12px); }
.reveal.show { opacity: 1; transform: translateY(0); }


.customer-item {
  background:#fff; border:1px solid #e5e7eb; border-radius: 0.75rem;
  padding: 1rem; cursor: pointer;
}
.customer-item:hover { border-color: var(--stachanov-rood); box-shadow: 0 10px 20px -10px rgba(0,0,0,.2); }
.customer-name { font-weight:600; color:#111827; line-height:1.35; }
.customer-sub { font-size:.8125rem; color:#6b7280; }


.icon-wrapper {
  width: 2.5rem; height: 2.5rem; border-radius: .5rem; margin-right:.75rem;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background: var(--stachanov-rood); color:#fff;
}
.service-icon { width: 1.25rem; height: 1.25rem; }


.careers-container { max-width: 72rem; margin: 0 auto; }
.accreditation-badge { display:flex; justify-content:center; margin-top: 1rem; }
.accreditation-badge .badge {  object-fit: contain; }
.careers-highlight { color:#374151; }


.map-overlay-btn { backdrop-filter: saturate(180%) blur(6px); }


#main-nav, #main-nav a {
  font-family: 'Roboto Condensed', Arial, sans-serif;
  letter-spacing: 0.5px;
}


#main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #000; 
  z-index: 100;
}
#main-nav::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:25%;               
  background:#fff;
  z-index:0;               
  pointer-events:none;
}


#main-nav .nav-inner,
#main-nav .max-w-7xl,
#main-nav * { position: relative; z-index: 200; }


#main-nav .logo {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: var(--logo-left-offset, 8px);
  z-index: 250;
  pointer-events: auto;
}
#main-nav .logo img { height: var(--logo-height,44px); width:auto; display:block; }


@media (min-width:1200px) {
  #main-nav .logo { left: 4px; } 
  
  #main-nav .nav-inner,
  #main-nav .max-w-7xl { padding-left: calc(4px + var(--logo-height,44px) + 12px); }
}


#main-nav .max-w-7xl {
  height: 5rem; 
}
#main-nav .dropdown { position: relative; }
#main-nav .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  background: #000;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  z-index: 300;
  min-width: 12rem;
  white-space: nowrap;
}
#main-nav .dropdown.open > .dropdown-menu { display: block; }

#main-nav .nav-has-dropdown { position: relative; }
#main-nav .nav-dropdown,
#main-nav .dropdown-menu {
  position: absolute !important;
  top: 100% !important; 
  left: 0 !important;   
  margin-top: 0 !important;
  display: none;
}


#main-nav .dropdown.open > .dropdown-menu,
#main-nav .nav-dropdown.open { display: block; }


@media (max-width:768px){
  
  #main-nav .dropdown-menu { position: static !important; box-shadow:none !important; border-radius:0; }
}


#main-nav a:focus,
#main-nav .dropdown-toggle:focus,
#main-nav .mobile-toggle:focus { outline:none; box-shadow:0 0 0 3px rgba(255,255,255,0.06); border-radius:6px; }
#main-nav { overflow: visible; }


#aboutMenu { display: none !important; z-index: 9999 !important; pointer-events: auto !important; }
#aboutWrapper.open #aboutMenu { display: block !important; }


#aboutMenu { position: absolute !important; top: 100% !important; left: 0 !important; margin-top: 0 !important; }

#main-nav .max-w-7xl { height: 5rem; }



