* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; }

html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { background:#000; color:#fff; line-height:1.7; overflow-x:hidden; }
img { width:100%; display:block; filter: grayscale(100%) contrast(110%); }

header { padding:2rem 4rem; border-bottom:1px solid #333; display:flex; justify-content:space-between; align-items:center; position:fixed; width:100%; background:#000; z-index:1000; transition:all 0.3s ease; }
header.scrolled { padding:1.2rem 4rem; background:rgba(0,0,0,0.95); }
header h1 { font-size:1.8rem; letter-spacing:2px; }

nav a { color:#fff; text-decoration:none; margin-left:2rem; font-size:0.9rem; text-transform:uppercase; transition:opacity 0.3s ease; }
nav a:hover { opacity:0.7; }

section { width:100%; padding:8rem 4rem; }
.section-inner { max-width:1300px; margin:0 auto; }

.hero { height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; background:linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=2000&q=80') center/cover no-repeat; }
.hero-content { max-width:900px; }
.hero h2 { font-size:3rem; margin-bottom:1.5rem; }
.hero p { font-size:1.2rem; color:#ccc; }

.btn { display:inline-block; margin-top:2rem; padding:0.9rem 2.5rem; border:1px solid #fff; background:#fff; color:#000; text-decoration:none; font-size:0.9rem; transition:all 0.3s ease; }
.btn:hover { background:#000; color:#fff; border:1px solid #fff; }

h2 { margin-bottom:3rem; font-size:2rem; }

.services { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2.5rem; }
.card { border:1px solid #333; overflow:hidden; background:#0a0a0a; display:flex; flex-direction:column; transition:all 0.3s ease; }
.card:hover { border-color:#fff; transform:translateY(-6px); }
.service-image { height:220px; overflow:hidden; }
.service-image img { height:100%; width:100%; object-fit:cover; }
.card-content { padding:2rem; flex-grow:1; }

.two-column { display:grid; grid-template-columns:repeat(auto-fit,minmax(350px,1fr)); gap:4rem; align-items:center; }

.carousel-wrapper { overflow:hidden; position:relative; }
.carousel-track { display:flex; gap:2rem; animation: scroll 22s linear infinite; }
.testimonial { min-width:320px; max-width:320px; border:1px solid #333; padding:2rem; background:#0a0a0a; flex-shrink:0; }
.testimonial p { color:#ccc; margin-bottom:1rem; }
.testimonial strong { font-size:0.9rem; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.contact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(350px,1fr)); gap:4rem; }
form { display:flex; flex-direction:column; gap:1.2rem; }

input, textarea { padding:1rem; background:#111; border:1px solid #333; color:#fff; }
input:focus, textarea:focus { outline:none; border-color:#fff; }

form button { padding:1rem; background:#fff; color:#000; border:1px solid #fff; cursor:pointer; transition:all 0.3s ease; }
form button:hover { background:#000; color:#fff; border:1px solid #fff; }

iframe { width:100%; height:400px; border:0; filter:grayscale(100%) contrast(110%); }

footer { border-top:1px solid #333; text-align:center; padding:3rem 2rem; font-size:0.8rem; color:#aaa; }

@media(max-width:768px){ header{padding:1.5rem 2rem;} section{padding:6rem 2rem;} .hero h2{font-size:2.2rem;} .service-image{height:180px;} }