:root{
  --bg:#0f1720;
  --card:#0d1520;
  --muted:#95a0ad;
  --accent:#2b8fd6;   /* modern blue accent */
  --accent-2:#b6c9d9; /* silver */
  --glass: rgba(255,255,255,0.04);
  --glass-2: rgba(255,255,255,0.02);
  --radius:14px;
  --max-width:1200px;
  --transition:300ms;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg),#07101a);
  color:#e6eef7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* container */
.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:24px;
}

/* header */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  backdrop-filter: blur(6px);
  background:linear-gradient(180deg, rgba(10,16,22,0.65), rgba(10,16,22,0.3));
  border-bottom:1px solid rgba(255,255,255,0.03);
}
.header-inner{
  display:flex;
  align-items:center;
  gap:20px;
  justify-content:space-between;
}
.brand{
  font-weight:800;
  letter-spacing:1px;
  color:var(--accent-2);
  text-decoration:none;
  font-size:1.25rem;
}
.brand span{color:var(--accent); margin-left:6px; font-weight:600;}

/* nav */
.nav{display:flex; gap:18px; align-items:center}
.nav a{color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:10px; font-weight:500}
.nav a:hover{color:#fff; background:rgba(255,255,255,0.03); transform:translateY(-2px)}
.btn-outline{border:1px solid rgba(255,255,255,0.06); padding:8px 12px; border-radius:10px; color:var(--muted)}
.btn-primary{background:linear-gradient(90deg,var(--accent),#54a7e6); color:#041024; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:700}
.btn-ghost{background:transparent; border:1px solid rgba(255,255,255,0.04); padding:10px 14px; color:var(--muted); border-radius:10px; text-decoration:none}

/* mobile toggle */
.mobile-toggle{display:none; background:none; border:0; padding:8px}
.mobile-toggle span{display:block; width:22px; height:2px; background:var(--accent-2); margin:4px 0; transition:var(--transition)}

/* hero */
.hero{
  position:relative;
  height:74vh;
  min-height:520px;
  display:flex;
  align-items:center;
  color:#fff;
  overflow:hidden;
}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(0.45) contrast(1.05) saturate(0.95);
  z-index:0;
}
.hero-overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, rgba(3,9,14,0.15), rgba(3,9,14,0.55)); z-index:1;
}
.hero-content{position:relative; z-index:2; width:100%; padding:48px 24px}
.hero h1{font-size:2.6rem; margin:0 0 12px; letter-spacing:-0.6px; line-height:1.05}
.lead{color:var(--muted); font-size:1.05rem; margin-bottom:18px}
.hero-cta{display:flex; gap:12px; margin-bottom:18px}
.hero-meta{display:flex; gap:18px; color:var(--muted); font-weight:600}

/* cards & grids */
.grid-3{display:grid; gap:18px; grid-template-columns:repeat(3,1fr)}
.card{background:var(--glass); padding:20px; border-radius:12px; border:1px solid rgba(255,255,255,0.03)}
.card-icon{font-size:28px; margin-bottom:8px}

/* projects */
.project-card{background:var(--glass-2); border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,0.03)}
.project-card img{width:100%; height:160px; object-fit:cover; display:block}
.project-info{padding:12px}

/* CTA strip */
.cta-strip{background:linear-gradient(90deg, rgba(20,40,60,0.6), rgba(6,12,18,0.6)); border-top:1px solid rgba(255,255,255,0.03); padding:22px 0; margin-top:36px}
.cta-inner{display:flex; justify-content:space-between; align-items:center; gap:16px}

/* page-hero */
.page-hero{padding:64px 24px 28px}
.page-hero--small{padding:40px 0}

/* about */
.about-grid{display:grid; grid-template-columns:2fr 1fr; gap:28px; align-items:start}
.team-card{background:var(--card); padding:18px; border-radius:12px; border:1px solid rgba(255,255,255,0.03)}
.stats{display:flex; gap:12px; margin-top:14px}
.stats div{background:var(--glass); padding:10px 14px; border-radius:10px; text-align:center}

/* services & portfolio */
.services-list .service{background:var(--glass); padding:18px; margin-bottom:12px; border-radius:12px}
.portfolio-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px}
.project-tile{background:var(--glass-2); border-radius:12px; overflow:hidden; border:1px solid rgba(255,255,255,0.03)}
.project-tile img{display:block; width:100%; height:200px; object-fit:cover}

/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 360px; gap:28px; align-items:start}
.contact-form label{display:block; margin-bottom:12px}
.contact-form input, .contact-form textarea{
  width:100%; padding:12px; border-radius:10px; border:1px solid rgba(255,255,255,0.06); background:transparent; color:inherit;
}
.form-actions{display:flex; gap:12px; margin-top:8px}
.form-status{margin-top:12px; color:var(--accent-2)}

/* footer */
.site-footer{padding:28px 0; border-top:1px solid rgba(255,255,255,0.03); margin-top:40px}
.footer-inner{display:flex; justify-content:space-between; gap:18px; align-items:center}

/* utilities */
.center{text-align:center}
.cards{margin-top:18px}

/* responsiveness */
@media (max-width:980px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .portfolio-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}

@media (max-width:700px){
  .nav{display:none}
  .mobile-toggle{display:block}
  .hero{min-height:60vh}
  .hero h1{font-size:1.6rem}
  .grid-3{grid-template-columns:1fr}
  .portfolio-grid{grid-template-columns:1fr}
  .cta-inner{flex-direction:column; align-items:flex-start}
}