/* ========== Base / Reset ========== */
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  margin: 0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color: #1f232b;
  background: #fff;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none }
.container { max-width: 1100px; margin: 0 auto; padding: 0 16px }

/* Theme colors */
:root{
  --accent: #F39C12;   /* EG orange */
  --slate:  #2B2F3A;   /* dark slate */
  --border: #eeeeee;
}

/* ========== Header / Nav ========== */
.header {
  position: sticky; top: 0; background: #fff; z-index: 999;
  box-shadow: 0 1px 8px rgba(0,0,0,.05);
}
.header-inner { display:flex; align-items:center; gap:14px; height:72px }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; color: var(--slate) }

/* BIGGER LOGO */
.brand img {
  height: 90px;      /* desktop size */
  width: auto;       /* keep aspect */
}

/* Nav */
.nav { margin-left:auto }
.nav ul { display:flex; gap:18px; list-style:none; margin:0; padding:0 }
.nav a { display:block; padding:10px 12px; border-radius:8px; color: var(--slate) }
.nav a:hover { background:#f3f3f3 }
.hamburger {
  display:none; margin-left:auto; border:1px solid var(--border);
  border-radius:8px; padding:8px 10px; cursor:pointer; background:#fff
}

/* ========== Mobile Nav ========== */
@media (max-width: 900px){
  .nav ul {
    display:none; position:absolute; top:72px; left:0; right:0;
    background:#fff; border-top:1px solid var(--border); padding:12px 16px;
    flex-direction:column
  }
  .nav ul.open { display:flex }
  .hamburger { display:block }
}

/* Slightly smaller logo on phones */
@media (max-width: 768px){
  .brand img { height: 70px; }
}

/* ========== Hero ========== */
.hero {
  position:relative; height:80vh; min-height:520px;
  display:flex; align-items:center; justify-content:center; color:#fff
}
.hero::before { content:''; position:absolute; inset:0; background:rgba(0,0,0,.45) }
.hero .slide {
  position:absolute; inset:0; background-position:center; background-size:cover;
  opacity:0; transition:opacity 1s ease
}
.hero .slide.show { opacity:1 }
.hero-content { position:relative; z-index:2; text-align:left; max-width:900px; padding:0 16px }
.hero h1 { font-size:clamp(36px,6vw,64px); line-height:1.1; margin:0 0 10px; font-weight:900 }
.hero p.lead { font-size:clamp(16px,3.2vw,22px); max-width:650px; opacity:.95; margin:0 0 18px }

/* Buttons */
.btn{
  display:inline-block; background:var(--accent); color:#fff;
  padding:14px 18px; border-radius:10px; font-weight:800; letter-spacing:.3px;
  border:2px solid var(--accent)
}
.btn.ghost{ background:transparent; border-color:#fff }

/* ========== Sections / Cards ========== */
.section { padding:64px 0 }
.section-title { text-align:center; margin:0 0 28px; color: var(--slate) }

.grid { display:grid; gap:18px }
.grid.cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid.cols-3 { grid-template-columns:repeat(3,minmax(0,1fr)) }

@media (max-width:900px){
  .grid.cols-3 { grid-template-columns:1fr }
  .grid.cols-2 { grid-template-columns:1fr }
}

.card{
  border:1px solid var(--border); border-radius:14px; padding:20px; background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.04)
}
.card h3 { margin:8px 0 8px }
.card .underline { width:48px; height:4px; background:var(--accent); border-radius:8px; margin:6px 0 12px }
.card .icon { font-size:36px }

/* ========== Footer ========== */
footer{
  border-top:4px solid var(--accent); background:#fafafa;
  padding:24px 0; color:#555; text-align:center
}