/* RESET */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Inter', sans-serif;}
body {line-height:1.6; background:#fff; color:#000;}
a {text-decoration:none; color:inherit;}
img {max-width:100%; display:block;}

/* NAV */
.nav {background:#000; color:#fff; padding:1rem 0; position:sticky; top:0; z-index:1000;}
.nav-inner {max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center;}
.nav-logo {height:50px;}
.nav-links {list-style:none; display:flex; gap:2rem;}
.nav-links li a {color:#fff; font-weight:600; transition:0.3s;}
.nav-links li a:hover {color:#ff0000;}
.hamburger {display:none; flex-direction:column; justify-content:space-between; width:25px; height:20px; cursor:pointer;}
.hamburger span{display:block; height:3px; width:100%; background:red; border-radius:2px;}
.nav-links.active{display:flex !important;}

/* MOBILE NAV */
@media(max-width:768px){
  .hamburger{display:flex;}
  .nav-links{position:absolute; top:70px; right:0; background:#000; flex-direction:column; width:200px; display:none; border-radius:0 0 5px 5px; padding:1rem 0;}
  .nav-links li{text-align:center; margin:10px 0;}
  .nav-links a{color:#fff; font-weight:600;}
}

/* BUTTONS */
.btn {background:#ff0000; color:#fff; padding:.6rem 1.2rem; border-radius:5px; font-weight:600; margin-right:1rem; transition:.3s;}
.btn:hover{background:#cc0000;}
.btn-outline{border:2px solid #ff0000; color:#ff0000; padding:.6rem 1.2rem; border-radius:5px; font-weight:600; transition:.3s;}
.btn-outline:hover{background:#ff0000; color:#fff;}

/* SECTIONS */
.section-light{background:#fff; color:#000; padding:4rem 0;}
.section-dark{background:#000; color:#fff; padding:4rem 0;}
.section-title{text-align:center; font-size:2rem; margin-bottom:2rem; color:#ff0000;}
.section-sub{text-align:center; margin-bottom:2rem; color:#333;}

/* HERO */
.hero-inner{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.hero-text, .hero-visual{flex:1 1 400px; padding:1rem;}

/* SERVICES */
.services-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem;}
.service-card{border:2px solid #ff0000; border-radius:10px; padding:1.5rem; position:relative;}
.service-card h3{color:#ff0000; margin-bottom:1rem;}
.details{display:none; margin-top:1rem; list-style:disc inside; color:#000;}
.toggle-details{margin-top:1rem; background:#000; color:#fff; border:none; padding:.5rem 1rem; cursor:pointer; border-radius:5px;}
.toggle-details:hover{background:#ff0000;}

/* ABOUT */
.about-inner{display:flex; flex-wrap:wrap; gap:2rem; align-items:center;}
.about-left, .about-right{flex:1 1 400px;}
.founder-photo{border-radius:10px;}
.founder-name{text-align:center; margin-top:1rem;}
.founder-title{font-size:.9rem; color:#ff0000;}

/* PORTFOLIO */
.portfolio-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem;}
.portfolio-item{cursor:pointer; transition:transform .3s;}
.portfolio-item:hover{transform:scale(1.05);}

/* LIGHTBOX */
.lightbox{display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.9); justify-content:center; align-items:center; flex-direction:column; z-index:2000;}
.lightbox-img{max-width:80%; max-height:80%;}
.lightbox .close, .lightbox .prev, .lightbox .next{background:none; border:none; color:#fff; font-size:2rem; cursor:pointer; margin:.5rem;}
.lightbox-caption{margin-top:1rem; color:#fff;}

/* TESTIMONIALS */
.testimonial-wrap{position:relative; overflow:hidden; max-width:800px; margin:0 auto 2rem;}
.testimonial-slide{display:none; text-align:center;}
.testimonial-slide.active{display:block;}
.testimonial-controls{display:flex; justify-content:center; align-items:center; gap:1rem;}
.test-btn{background:#ff0000; border:none; color:#fff; font-size:1.5rem; padding:.5rem 1rem; cursor:pointer;}
.testimonial-dots{display:flex; gap:.5rem;}
.dot{width:12px; height:12px; border-radius:50%; background:#ccc; cursor:pointer;}
.dot.active{background:#ff0000;}

/* CONTACT */
.contact-ctas{margin-top:1.5rem;}
.contact-ctas a{margin-right:1rem;}

/* FOOTER */
.footer{padding:2rem 0; text-align:center; color:#fff; background:#000;}
.footer-links{list-style:none; display:flex; justify-content:center; gap:1.5rem; margin-bottom:1rem;}
.footer-social{margin-bottom:1rem;}
.footer-social a{color:#fff; font-size:1.5rem; margin:0 .5rem; transition:.3s;}
.footer-social a:hover{color:#ff0000;}

/* RESPONSIVE */
@media(max-width:900px){
  .hero-inner, .about-inner{flex-direction:column; text-align:center;}
}