@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@300;400;500;600;700;800&display=swap');

:root{
  --industrial-blue: 213 60% 45%;
  --industrial-blue-dark: 213 50% 35%;
  --slate-dark: 215 25% 15%;
  --slate-mid: 215 15% 45%;
  --surface-light: 210 11% 96%;
  --surface-white: 0 0% 100%;
  --border: 214 20% 85%;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Assistant', sans-serif;
  color:hsl(var(--slate-dark));
  background:hsl(var(--surface-white));
  line-height:1.6;
}
img{max-width:100%;display:block}
.container{max-width:1180px;margin:0 auto;padding:0 24px}
a{color:inherit;text-decoration:none}

/* HEADER */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:transparent;
  transition:background .3s ease, box-shadow .3s ease;
}
.site-header.scrolled{
  background:hsl(var(--surface-white));
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo img{height:46px;width:auto}
.main-nav{display:flex;gap:32px}
.main-nav a{
  font-weight:600;font-size:.95rem;color:#fff;
  transition:color .2s;
}
.site-header.scrolled .main-nav a{color:hsl(var(--slate-dark))}
.main-nav a:hover{color:hsl(var(--industrial-blue))}
.menu-toggle{
  display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;z-index:110;
}
.menu-toggle span{width:24px;height:2px;background:#fff;transition:.2s}
.site-header.scrolled .menu-toggle span{background:hsl(var(--slate-dark))}

@media(max-width:860px){
  .menu-toggle{display:flex}
  .main-nav{
    position:fixed;inset:0 auto 0 0;width:78%;max-width:320px;
    background:hsl(var(--surface-white));
    flex-direction:column;padding:100px 32px 32px;gap:24px;
    transform:translateX(-100%);transition:transform .3s ease;
    box-shadow:4px 0 20px rgba(0,0,0,.12);
  }
  .main-nav.open{transform:translateX(0)}
  .main-nav a{color:hsl(var(--slate-dark))!important;font-size:1.1rem}
}

/* HERO */
.hero{
  position:relative;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;color:#fff;overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,20,35,.75) 0%, rgba(10,20,35,.55) 50%, rgba(10,20,35,.85) 100%);
}
.hero-content{position:relative;z-index:2;padding-top:78px}
.hero h1{
  font-size:clamp(1.7rem, 4vw, 2.9rem);font-weight:800;max-width:900px;margin:0 auto 24px;line-height:1.35;
}
.hero-divider{width:80px;height:3px;background:hsl(var(--industrial-blue));margin:0 auto 28px;border-radius:2px}
.hero-sub{font-size:1.15rem;color:#dbe3ec;max-width:640px;margin:0 auto 36px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 28px;border-radius:8px;font-weight:700;font-size:1rem;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn .icon{width:20px;height:20px}
.btn-whatsapp{background:#25D366;color:#fff;box-shadow:0 6px 20px rgba(37,211,102,.35)}
.btn-instagram{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:#fff}
.scroll-hint{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  z-index:2;color:#fff;font-size:1.6rem;opacity:.8;animation:bounce 2s infinite;
}
@keyframes bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* STATS */
.stats{background:hsl(var(--industrial-blue-dark));padding:56px 0}
.stats-grid{display:flex;justify-content:center;gap:90px;text-align:center;flex-wrap:wrap}
.stat-num{font-size:clamp(2.2rem,5vw,3.2rem);font-weight:800;color:rgba(255,255,255,.92)}
.stat-label{color:rgba(255,255,255,.75);margin-top:6px;font-size:1rem}

/* SECTION TITLES */
.section-title{
  text-align:center;font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800;
  color:hsl(var(--slate-dark));margin-bottom:14px;position:relative;padding-bottom:18px;
}
.section-title::after{
  content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:60px;height:3px;background:hsl(var(--industrial-blue));border-radius:2px;
}
.section-title.light{color:#fff}
.section-title.light::after{background:hsl(var(--industrial-blue))}

/* ABOUT */
.about{padding:90px 0 60px}
.about-grid{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:start;margin-top:48px}
.about-photo img{border-radius:14px;box-shadow:0 20px 40px rgba(0,0,0,.15);width:100%}
.certificate-badge{
  display:flex;align-items:center;gap:14px;width:100%;text-align:right;
  background:hsl(var(--surface-light));border:1px solid hsl(var(--border));border-radius:12px;
  padding:14px 18px;margin-bottom:28px;cursor:pointer;transition:.2s;font-family:inherit;
}
.certificate-badge:hover{border-color:hsl(var(--industrial-blue));background:#fff}
.cert-icon{font-size:1.6rem}
.cert-text{display:flex;flex-direction:column;gap:2px;flex:1}
.cert-text strong{font-size:1rem;color:hsl(var(--slate-dark))}
.cert-text span{font-size:.85rem;color:hsl(var(--slate-mid))}
.cert-thumb{width:44px;height:60px;object-fit:cover;border-radius:6px;flex-shrink:0}
.about-content h3{font-size:1.5rem;font-weight:800;margin-bottom:16px}
.about-content p{color:hsl(var(--slate-mid));margin-bottom:16px;font-size:1.02rem}

@media(max-width:800px){
  .about-grid{grid-template-columns:1fr}
  .about-photo{max-width:280px;margin:0 auto}
}

/* ENGINEER BANNER */
.engineer-banner{
  position:relative;background-size:cover;background-position:center top;
  min-height:70vh;display:flex;align-items:flex-end;color:#fff;
}
.engineer-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(10,20,35,.55) 60%, rgba(10,20,35,.85) 100%);
}
.engineer-content{position:relative;z-index:2;padding:60px 0;text-align:center}
.engineer-content h2{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;margin-bottom:20px}
.engineer-content p{color:#e4e9ef;max-width:650px;margin:0 auto 28px;font-size:1.05rem}
.engineer-tag{
  display:inline-block;background:#fff;color:hsl(var(--slate-dark));
  padding:14px 26px;border-radius:8px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.2);
}

/* SERVICES */
.services{padding:90px 0}
.services-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:48px;
}
.service-card{
  background:hsl(var(--surface-light));border-radius:14px;padding:30px;text-align:center;
  transition:transform .2s, box-shadow .2s;
}
.service-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.08)}
.service-icon{
  width:56px;height:56px;border-radius:12px;background:hsl(var(--industrial-blue)/.12);
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0 auto 18px;
}
.service-card h4{font-size:1.1rem;font-weight:700;margin-bottom:8px}
.service-card p{color:hsl(var(--slate-mid));font-size:.95rem}

@media(max-width:700px){.services-grid{grid-template-columns:1fr}}

/* CLIENTS */
.clients{padding:70px 0 100px}
.clients-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:48px;
}
.client-logo{
  background:#fff;border:1px solid hsl(var(--border));border-radius:10px;
  display:flex;align-items:center;justify-content:center;padding:20px;height:100px;
}
.client-logo img{max-height:52px;width:auto;object-fit:contain}
@media(max-width:800px){.clients-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.clients-grid{grid-template-columns:repeat(2,1fr)}}

/* CONTACT */
.contact{
  background:linear-gradient(160deg, hsl(var(--slate-dark)), hsl(var(--industrial-blue-dark)));
  color:#fff;padding:90px 0 50px;text-align:center;
}
.contact-sub{color:#c7d1dc;margin:14px 0 36px;font-size:1.05rem}
.contact-buttons{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:50px}
.footer-note{color:#93a1b0;font-size:.9rem;border-top:1px solid rgba(255,255,255,.1);padding-top:24px}

/* LIGHTBOX */
.lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:30px}
.lightbox.open{display:flex}
.lightbox-backdrop{position:absolute;inset:0;background:rgba(10,15,25,.9)}
.lightbox-box{position:relative;max-width:min(90vw,600px);max-height:90vh;z-index:2}
.lightbox-box img{max-height:90vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox-close{
  position:absolute;top:-40px;left:0;background:none;border:none;color:#fff;
  font-size:1.6rem;cursor:pointer;
}