/*────────────────────────────────
  VARIABLES & BASE SETUP
────────────────────────────────*/
:root {
  --brand: #e31b23;
  --dark: #111;
  --light: #fafafa;
  --gap: 1.5rem;
  --radius: 0.5rem;
  --shadow: 0 4px 8px rgba(0,0,0,0.1);
  --bp-md: 768px;
  --header-h: 60px;
  --transition: 0.3s ease;
  font-family: 'Montserrat', sans-serif;
}

/* Reset & base */
* { box-sizing: border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body { background: var(--light); color: var(--dark); line-height:1.6; }

/* Utility */
.container { width:90%; max-width:1200px; margin:0 auto; }
.skip-link {
  position:absolute; top:-40px; left:0;
  background:var(--brand); color:#fff; padding:.5rem;
  z-index:1001; transition: top var(--transition);
}
.skip-link:focus { top:0; }

/* Buttons */
.btn {
  background: var(--brand);
  color: #fff;
  padding: .75em 1.5em;
  border:none; border-radius:var(--radius);
  text-decoration:none; font-weight:600;
  transition: opacity var(--transition);
}
.btn:hover { opacity:.9; }

/* Lang Switch */
.lang-switch {
  background: none;
  border: 2px solid var(--brand);
  color: var(--brand);
  padding: .25em .75em;
  border-radius: var(--radius);
  font-size: .9rem;
  cursor: pointer;
  margin-right: 1rem;
  transition: background var(--transition), color var(--transition);
}
.lang-switch:hover {
  background: var(--brand);
  color: #fff;
}

/*────────────────────────────────
  HEADER & NAV
────────────────────────────────*/
.site-header {
  position: sticky; top:0; height:var(--header-h);
  background:#fff; display:flex; align-items:center;
  box-shadow:var(--shadow); z-index:1000;
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
}
.logo img { height:40px; }

/* Hamburger */
.hamburger {
  display:flex; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer;
}
.hamburger span {
  width:25px; height:3px; background:var(--dark);
  border-radius:2px;
}

/* Off-canvas nav */
.nav-menu {
  position:fixed; top:0; right:0; width:250px; height:100vh;
  background:#fff; padding:2rem;
  box-shadow:-2px 0 8px rgba(0,0,0,0.2);
  transform:translateX(100%); transition:transform var(--transition);
}
.nav-menu.open { transform: translateX(0); }
.nav-menu ul {
  list-style:none; display:flex; flex-direction:column; gap:1rem;
}
.nav-menu a {
  text-decoration:none; color:var(--dark); font-weight:600;
}

/*────────────────────────────────
  HERO
────────────────────────────────*/
.hero { position:relative; height:80vh; overflow:hidden; }
.hero picture, .hero img {
  width:100%; height:100%; object-fit:cover;
}
.hero-overlay {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); text-align:center;
  color:#fff; text-shadow:0 2px 4px rgba(0,0,0,0.7);
}
.hero-overlay h1 { font-size:2.5rem; margin-bottom:.5rem; }
.hero-overlay p { margin-bottom:1rem; }

/*────────────────────────────────
  SECTION TITLES
────────────────────────────────*/
.section-title {
  text-align:center; font-size:2rem;
  margin:3rem 0 1rem;
}

/*────────────────────────────────
  ABOUT
────────────────────────────────*/
.about-grid {
  display:grid; grid-template-columns:1fr; gap:var(--gap);
  align-items:center; margin-bottom:4rem;
}
.about-image img {
  width:100%; border-radius:var(--radius); box-shadow:var(--shadow);
}

/*────────────────────────────────
  SERVICES
────────────────────────────────*/
.services-grid {
  display:grid; grid-template-columns:1fr; gap:var(--gap);
  margin-bottom:4rem;
}
.service-card {
  background:#fff; border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow);
  transition:transform var(--transition);
}
.service-card:hover { transform: translateY(-5px); }
.service-card img { width:100%; display:block; }
.service-card h3 { margin:1rem; font-size:1.25rem; }
.service-card p { margin:0 1rem 1rem; font-size:.95rem; }

/*────────────────────────────────
  PRICING
────────────────────────────────*/
.pricing-wrapper {
  overflow-x:auto; margin-bottom:4rem;
}
.pricing table {
  width:100%; border-collapse:collapse;
}
.pricing th, .pricing td {
  border:1px solid #ddd; padding:.75rem; text-align:center;
}
.pricing thead { background:var(--brand); color:#fff; }

/*────────────────────────────────
  TEAM
────────────────────────────────*/
.team-grid {
  display:grid; grid-template-columns:1fr; gap:var(--gap);
  margin-bottom:4rem;
}
.team-member {
  text-align:center; transition:transform var(--transition);
}
.team-member:hover { transform: translateY(-5px); }
.team-member img {
  width:150px; height:150px; object-fit:cover;
  border-radius:50%; margin-bottom:.5rem; box-shadow:var(--shadow);
}

/*────────────────────────────────
  FOOTER
────────────────────────────────*/
.site-footer {
  background:var(--dark); color:#fff; padding:2rem 0;
  text-align:center;
}
.site-footer p { margin:.5rem 0; }

/*────────────────────────────────
  LAZY-LOAD
────────────────────────────────*/
.lazy { opacity:0; transition:opacity var(--transition); }
.lazy.loaded { opacity:1; }

/*────────────────────────────────
  RESPONSIVE
────────────────────────────────*/
@media(min-width:var(--bp-md)) {
  .about-grid { grid-template-columns:1fr 1fr; }
  .services-grid { grid-template-columns:repeat(3,1fr); }
  .team-grid { grid-template-columns:repeat(2,1fr); }
  .hamburger { display:none; }
  .nav-menu {
    position:static; transform:none; box-shadow:none;
    background:transparent; height:auto; padding:0;
  }
  .nav-menu ul { flex-direction:row; gap:2rem; }
}