*{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#070707;
  --dark:#120000;
  --red:#b80000;
  --red2:#5b0000;
  --yellow:#ffc400;
  --white:#ffffff;
}
body{font-family:Arial,sans-serif;background:#0b0b0b;color:#f5f5f5;line-height:1.6}
.hero{
  background:
    radial-gradient(circle at 20% 20%,rgba(255,196,0,.18),transparent 28%),
    linear-gradient(135deg,var(--black),var(--red2) 55%,var(--black));
  padding:24px 7% 60px;
  border-bottom:4px solid var(--yellow);
}
nav{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
nav strong{font-size:1.6rem;color:var(--yellow);letter-spacing:1px}
nav a{color:white;text-decoration:none;font-weight:900;border:2px solid var(--yellow);padding:10px 18px;border-radius:999px}
.hero-content{display:grid;grid-template-columns:1fr 1fr;gap:38px;align-items:center;margin-top:48px}
.tag{color:var(--yellow);font-weight:900;text-transform:uppercase;margin-bottom:12px}
h1{font-size:clamp(2.1rem,5vw,4.3rem);line-height:1.05;margin-bottom:20px}
.hero-text p{font-size:1.2rem}
.main-logo{width:100%;border-radius:20px;border:3px solid var(--yellow);box-shadow:0 0 35px rgba(255,196,0,.35)}
.buttons{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-weight:900;padding:14px 22px;border-radius:10px}
.primary{background:var(--yellow);color:#111}
.secondary{background:white;color:#111}
main{padding:65px 7%;background:linear-gradient(180deg,#111,#1b0000)}
section{margin-bottom:70px}
h2{font-size:2.2rem;color:var(--yellow);margin-bottom:26px;text-transform:uppercase}
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
article,.project,.contact{
  background:#151515;
  border:1px solid rgba(255,196,0,.35);
  border-radius:18px;
  padding:26px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
article h3,.project h3{color:var(--yellow);margin-bottom:10px}
.project{margin-bottom:30px}
.before-after{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:22px 0}
.photo-card{
  position:relative;
  background:#050505;
  border:2px solid rgba(255,196,0,.5);
  border-radius:16px;
  padding:12px;
}
.photo-card span{
  position:absolute;
  top:22px;
  left:22px;
  background:linear-gradient(135deg,var(--red),#330000);
  color:white;
  border:2px solid var(--yellow);
  padding:8px 18px;
  border-radius:999px;
  font-weight:900;
  text-transform:uppercase;
  z-index:2;
}
.photo-card img{
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  border-radius:12px;
  display:block;
  background:#000;
}
.project p{margin-top:10px}
.contact a{
  display:block;
  color:var(--yellow);
  font-size:1.4rem;
  font-weight:900;
  text-decoration:none;
  margin-top:14px;
}
footer{text-align:center;background:#050505;color:white;padding:24px;border-top:3px solid var(--yellow)}
@media(max-width:900px){
  .hero-content,.services,.before-after{grid-template-columns:1fr}
}