/* ================================
   Global Variables
================================ */
:root {
  --accent: #1b6ca8;
  --dark: #0b2540;
  --muted: #6b7b8a;
  --radius: 12px;
  --light-bg: #f6f8fa;
}

/* ================================
   Reset & Base
================================ */
* { box-sizing: border-box; margin:0; padding:0; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial; background: var(--light-bg); color: var(--dark); line-height:1.6; }
img { max-width: 100%; display: block; }

.container { max-width: 1200px; margin:0 auto; padding:0 20px; }

/* ================================
   Header
================================ */
.site-header { background: rgba(255,255,255,0.95); box-shadow:0 2px 10px rgba(0,0,0,0.05); position:sticky; top:0; z-index:50; padding:10px 0; }
.site-header .logo { font-weight:700; font-size:22px; }
.site-header .logo span { color: var(--accent); }
.site-header .nav a { margin-left:14px; text-decoration:none; color: var(--dark); padding:8px 12px; border-radius:var(--radius); transition:0.3s; }
.site-header .nav a:hover, .site-header .nav a.active { background: rgba(27,108,168,0.15); }
.site-header .nav a.cta { background: var(--accent); color:#fff; }

/* ================================
   Hero Section
================================ */
.projects-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color:#fff;
  background: url('../images/hero-bg.jpg') center/cover no-repeat;
}
.projects-hero .overlay {
  position: absolute;
  inset:0;
  background: linear-gradient(rgba(27,108,168,0.7), rgba(27,108,168,0.3));
}
.projects-hero .hero-content { position: relative; z-index:2; }
.projects-hero h1 { font-size:3rem; margin-bottom:1rem; font-weight:700; }
.projects-hero p { font-size:1.2rem; max-width:700px; margin:0 auto; }

/* ================================
   Projects Grid
================================ */
.projects-section { padding:60px 0; }
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
  gap:20px;
}

.project-card {
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 6px 14px rgba(12,30,40,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  cursor:pointer;
}

.project-card:hover {
  transform: translateY(-8px);
  box-shadow:0 10px 20px rgba(12,30,40,0.15);
}

.project-image img { width:100%; height:auto; display:block; }

.project-info { padding:20px; }
.project-info h3 { font-size:1.5rem; color: var(--accent); margin-bottom:10px; }
.project-info p { font-size:1rem; color:#555; }

/* ================================
   Footer
================================ */
.site-footer {
  background:#093142;
  color:#cfeff9;
  padding:40px 0;
  font-size:0.9rem;
}
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.footer-grid h4 { color:#fff; margin-bottom:10px; }
.footer-grid a { color:#cfeff9; text-decoration:none; margin-bottom:5px; display:inline-block; }
.footer-grid a:hover { text-decoration:underline; }
.copyright { text-align:center; padding-top:20px; border-top:1px solid rgba(255,255,255,0.2); margin-top:20px; font-size:0.85rem; }

/* ================================
   Responsive
================================ */
@media(max-width:768px){
  .projects-hero h1 { font-size:2rem; }
  .projects-hero p { font-size:1rem; }
}