:root{
  --max-width: 1200px;
  --accent: #f2f2f2;
  --brand: #111111;
  --muted: #6b6b6b;
  --primary: #111111;
  --btn-bg: #111111;
  --btn-contrast: #fff;
  --radius: 22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin:0; color:var(--brand); background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* container helper */
.container{
  width:90%;
  max-width:var(--max-width);
  margin:0 auto;
}

/* HEADER */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.98);
  border-bottom:1px solid #eee;
}
.header-inner{
  display:flex; align-items:center; gap:1rem; padding:18px 0;
}
.brand .logo{height:96px; object-fit:contain}
.main-nav ul{display:flex; gap:28px; list-style:none; margin:0; padding:0; align-items:center}
.main-nav a{color:var(--brand); text-decoration:none; font-weight:600}
.header-actions{margin-left:auto; display:flex; align-items:center; gap:12px}
.btn-outline{
  padding:10px 18px; border-radius:30px; border:2px solid var(--brand);
  text-decoration:none; font-weight:600;
}
.nav-toggle{display:none; background:none; border:0; font-size:20px}

/* HERO */
.hero{padding:36px 0 46px;}
.hero-inner{display:grid; grid-template-columns:1fr 420px; gap:36px; align-items:center}
.hero-left h1{
  font-family: "Montserrat", "Inter", sans-serif;
  font-weight:900;
  line-height:0.95;
  margin:0 0 12px;
  color:#fff;
  font-size:clamp(32px, 8vw, 96px);
}
.hero .accent{color:var(--btn-contrast)}
.lede{color:#d0d0d0; font-size:1.05rem; font-weight:300; margin:8px 0 0}

/* dark hero panel */
.hero{background:linear-gradient(180deg,#222 0,#222 100%); padding:40px 0 70px; border-radius: var(--radius); margin-top:18px;}
.hero .container{max-width:var(--max-width); padding:20px}

/* hero right image */
.hero-mock{width:100%; max-width:520px; display:block; margin-left:auto; border-radius:18px; object-fit:cover}

/* two-column section */
.two-col{padding:70px 0}
.section-title{text-align:center; font-weight:700; margin-bottom:36px; font-size:28px}
.cols{display:grid; grid-template-columns:460px 1fr; gap:40px; align-items:center}
.card-image{background:#000000; padding:28px; border-radius:18px; display:flex; justify-content:center; align-items:center}
.card-image img{max-width:100%; display:block; border-radius:8px}
.col-right h3{margin-top:0}
.col-right p{color:var(--muted)}
.services{margin-top:14px; padding-left:18px; color:var(--muted)}
.btn-primary{display:inline-block; margin-top:18px; padding:12px 18px; background:var(--btn-bg); color:var(--btn-contrast); border-radius:10px; text-decoration:none; font-weight:600}

/* footer */
.site-footer{padding:28px 0; border-top:1px solid #eee; margin-top:40px; color:var(--muted)}
.site-footer p{margin:0; text-align:center}

/* RESPONSIVE */
@media (max-width:1000px){
  .hero-inner{grid-template-columns:1fr 360px}
  .cols{grid-template-columns:1fr}
  .hero-mock{max-width:360px}
}

@media (max-width:760px){
  .main-nav{display:none}
  .nav-toggle{display:block}
  .brand .logo{height:64px}
  .hero-inner{grid-template-columns:1fr; text-align:left}
  .hero{border-radius:18px}
  .hero-right{order:2}
  .hero-left{order:1}
  .hero-left h1{font-size:clamp(28px,8vw,48px)}
  .cols{gap:20px}
  .card-image{padding:18px}
}

/* mobile nav open class (added by JS) */
body.nav-open .main-nav{
  position:fixed; top:68px; left:0; right:0; background:#fff; z-index:60; padding:20px 0;
}
body.nav-open .main-nav ul{flex-direction:column; gap:12px; align-items:center}


/* ABOUT PAGE & SERVICES STYLES */
.about-hero {background:#111; color:#fff;}
.about-content {padding:70px 0;}
.about-content p {max-width:800px; margin:auto; text-align:center; color:#666;}
.three-cols {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:24px; margin-top:40px;}
.card {background:#f9f9f9; padding:24px; border-radius:12px; text-align:center;}
.card h3 {margin-top:0;}

.team-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:24px; margin-top:40px;}
.team-card {background:#fafafa; border-radius:12px; text-align:center; padding:16px;}
.team-card img {width:100%; border-radius:12px;}
.team-card h4 {margin:12px 0 4px;}
.team-card p {color:#777; margin:0;}

/* SERVICES PAGE */
.services-list {padding:70px 0;}
.grid-services {display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; margin-top:40px;}
.service-card {background:#f9f9f9; border-radius:12px; padding:24px; transition:all .3s ease;}
.service-card:hover {transform:translateY(-4px); box-shadow:0 6px 20px rgba(0,0,0,0.06);}
.service-card h3 {margin-top:0; color:#111;}
.service-card p {color:#666;}