:root{
  --accent:#ff6b35;
  --dark:#111;
  --bg:#f4f5f7;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--dark);
}

/* HEADER */
.header{
  position:fixed;
  top:0;left:0;
  width:100%;
  background:#fff;
  padding:14px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:1000;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
}

.logo{font-weight:800;color:var(--accent);font-size:20px}
.header-right{display:flex;align-items:center;gap:15px}
.phone{text-decoration:none;color:#000;font-weight:600}
.burger{font-size:22px;cursor:pointer}

/* MOBILE MENU */
.mobile-menu{
  position:fixed;
  top:0;right:-100%;
  width:70%;
  height:100%;
  background:#fff;
  padding:80px 30px;
  transition:.3s;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.mobile-menu a{text-decoration:none;color:#000;font-size:18px}
.mobile-menu.active{right:0}

/* HERO */
.hero{
  height:100vh;
  background:
    linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.45)),
    url("../img/hero.jpg") center/cover;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  padding:20px;
}

.hero h1{font-size:42px;margin-bottom:10px}
.hero p{font-size:18px;margin-bottom:20px}
.hero-btn{
  background:var(--accent);
  padding:14px 26px;
  border-radius:30px;
  color:#fff;
  text-decoration:none;
  font-weight:700;
}

/* SECTIONS */
.section{
  max-width:1200px;
  margin:0 auto;
  padding:80px 20px;
}

.section h2{
  font-size:28px;
  margin-bottom:30px;
}

/* CARDS */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:24px;
}

.card{
  background:#fff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 15px 40px rgba(0,0,0,.08);
  transition:.3s;
}
.card:hover{transform:translateY(-6px)}
.card img{width:100%;height:180px;object-fit:cover}
.card h3{padding:16px 16px 0}
.card p{padding:8px 16px 20px;color:#666}

/* NEWS */
.news #newsList div{
  background:#fff;
  padding:16px 20px;
  border-radius:14px;
  margin-bottom:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}

/* MAP */
.map iframe{
  width:100%;
  height:320px;
  border:0;
  border-radius:16px;
}

/* CALL BUTTON */
.call-btn{
  position:fixed;
  bottom:20px;right:20px;
  background:var(--accent);
  color:#fff;
  font-size:24px;
  padding:16px;
  border-radius:50%;
  text-decoration:none;
  box-shadow:0 10px 30px rgba(0,0,0,.3);
}

/* FOOTER */
.footer{
  text-align:center;
  padding:30px;
  background:#fff;
  color:#777;
}

/* MOBILE */
@media(max-width:768px){
  .hero h1{font-size:30px}
}
.marquee-container {
  width: 100%;
  background: #ff6b35; /* оранжевый акцент */
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 10px 0;
  font-weight: 600;
  font-size: 16px;
}

.marquee {
  display: inline-block;
  padding-left: 100%; /* стартовая позиция справа */
  animation: marquee 20s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

.marquee span {
  margin-right: 50px; /* расстояние между новостями */
}
