/* Endpoint Security - responsive modern CSS */
:root{
  --bg: #ffffff;
  --text:#0c283c;
  --muted:#6b6b6b;
  --primary:#1f6f8b;
  --primary-dark:#0c4b5c;
  --radius:12px;
  --container:1140px;
}
*{box-sizing:border-box}
html,body{height:100%; margin:0; font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; color:var(--text); background:var(--bg);}
.container{max-width:var(--container); margin:0 auto; padding:0 20px;}
.site-header{position:fixed; top:0; left:0; right:0; z-index:60; background:linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.88)); border-bottom:1px solid rgba(10,20,30,0.04);}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 20px;}
.logo{font-weight:700; letter-spacing:0.6px; color:var(--primary-dark); line-height:1; font-size:18px;}
.logo span{font-weight:300; font-size:12px; display:block; margin-top:2px;}
.nav{display:flex; gap:18px; align-items:center;}
.nav a{color:var(--muted); text-decoration:none; font-weight:500;}
.header-actions{display:flex; align-items:center; gap:10px;}
.btn{display:inline-block; padding:9px 16px; border-radius:10px; text-decoration:none; font-weight:600;}
.btn-cta{background:var(--primary); color:#fff; box-shadow:0 6px 18px rgba(31,111,139,0.12);}
.btn-primary{background:var(--primary); color:#fff; padding:12px 20px; border-radius:10px; text-decoration:none; display:inline-block;}
.btn-outline{border:2px solid rgba(10,20,30,0.06); padding:10px 18px; border-radius:10px; text-decoration:none; color:var(--text)}

/* Hamburger */
.hamburger{display:none; background:none; border:0; padding:8px; cursor:pointer;}
.hamburger .bar{display:block; width:22px; height:2px; background:var(--text); margin:4px 0; transition:transform .25s ease, opacity .2s ease;}
.mobile-nav{position:fixed; inset:0; display:none; z-index:70;}
.mobile-nav-inner{position:absolute; right:0; top:0; width:320px; height:100%; background:#fff; box-shadow:-8px 0 24px rgba(10,20,30,0.08); padding:36px 20px; display:flex; flex-direction:column; gap:12px;}
.mobile-link{padding:12px 0; color:var(--text); text-decoration:none; font-weight:600;}

/* HERO */
.hero{ position:relative; height:80vh; min-height:520px; display:flex; align-items:center; overflow:hidden; margin-top:64px;}
.hero-picture{ position:absolute; inset:0; z-index:0; display:block;}
.hero-picture img.hero-img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.03); transition:transform .6s ease;}
.hero-overlay{ position:relative; z-index:2; width:100%; height:100%; display:flex; align-items:center; background:linear-gradient(90deg, rgba(12,40,60,0.45), rgba(12,40,60,0.22));}
.hero-content{ color:#fff; padding:40px 20px; max-width:760px;}
.hero h1{font-size:40px; line-height:1.05; margin:0 0 12px;}
.lead{font-size:16px; opacity:0.95; margin-bottom:18px;}

/* Services */
.section{padding:64px 0;}
.services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.card{background:#fff; border-radius:12px; padding:24px; box-shadow:0 10px 30px rgba(12,40,60,0.06); text-align:left; transition:transform .28s ease, box-shadow .28s ease;}
.card .icon{font-size:28px; margin-bottom:8px;}
.card h3{margin:6px 0 8px;}
.card p{color:var(--muted); margin:0;}
.card:hover{ transform:translateY(-6px); box-shadow:0 18px 40px rgba(12,40,60,0.12);}

/* About and contact */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:center;}
.about-image img{width:100%; border-radius:10px;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.contact-form label{display:block; margin-bottom:12px; font-weight:500;}
.contact-form input, .contact-form textarea{width:100%; padding:10px; border-radius:8px; border:1px solid #e6e6e6; font-family:inherit;}
.site-footer{background:#0b1220; color:#fff; padding:18px 0; margin-top:24px;}
.footer-inner{display:flex; justify-content:space-between; align-items:center;}

/* Responsive */
@media (max-width:980px){
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .two-col, .contact-grid{grid-template-columns:1fr;}
  .hero h1{font-size:34px;}
  .logo{font-size:16px;}
}
@media (max-width:680px){
  .nav{display:none;}
  .hamburger{display:inline-block;}
  .mobile-nav{display:block; visibility:hidden; opacity:0; transition:opacity .25s ease;}
  .mobile-nav.open{visibility:visible; opacity:1;}
  .hero{min-height:60vh; margin-top:56px;}
  .hero h1{font-size:26px;}
  .header-inner{padding:10px 16px;}
  .hero-content{padding:28px 16px;}
  .services-grid{grid-template-columns:1fr;}
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce){
  * { transition:none !important; animation:none !important; }
}