body{margin:0;font-family:sans-serif;background:#fff;color:#111;line-height:1.6}
a{text-decoration:none;color:#111}
.nav{background:#fff;border-bottom:1px solid #eee;padding:10px 0;position:sticky;top:0}
.nav .wrap{display:flex;justify-content:space-between;align-items:center;max-width:1100px;margin:0 auto;padding:0 20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:bold}
.hero{padding:20px 0;text-align:left;max-width:1100px;margin:0 auto}
.hero h1{font-size:2rem;margin-bottom:10px}
.hero p{color:#555}
.section{padding:50px 0}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.grid{display:grid;gap:20px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{border:1px solid #eee;padding:20px;border-radius:12px;background:#fafafa}
.btn{padding:10px 16px;border:1px solid #000;border-radius:10px;display:inline-block}
.btn.fill{background:#000;color:#fff}
.hero-img{max-width:100%;border-radius:14px;margin-top:20px}
footer{border-top:1px solid #eee;padding:20px;text-align:center;color:#666}
/* --- Slim nav overrides --- */
.nav { padding: 6px 0; }                     /* was 10px */
.nav .wrap { padding: 0 12px; gap: 16px; }    /* tighter left/right */
.nav .brand { gap: 8px; }                     /* logo ↔ text spacing */
.nav-logo { height: 40px; width: auto; display: block; } /* force smaller logo */
.nav ul { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
.nav li { margin: 0; }
.nav a { font-size: 14px; }                   /* smaller link text */
.brand small { display: block; font-size: 12px; line-height: 1.2; color: #666; }
/* --- Slim hero/banner --- */
.hero {
  position: relative;
  padding: 24px 0;            /* adjust 20–32px to taste */
  text-align: left;
}
.hero h1 { margin-bottom: 8px; }

/* Faint logo watermark behind hero text */
.hero::before {
  content: "";
  position: absolute;
  top: 60px;                  /* push below headline */
  left: 50%;
  transform: translateX(-50%);
  width: 520px;               /* watermark size */
  height: 520px;
  background: url("assets/logo.png") no-repeat center/contain;
  opacity: 0.06;              /* 0.04–0.10 = lighter/darker */
  pointer-events: none;
  z-index: 0;
}

/* Keep hero text above watermark */
.hero .container {
  position: relative;
  z-index: 1;
}

/* Mobile tweaks */
@media (max-width: 700px) {
  .hero { padding: 20px 0; }
  .hero::before {
    top: 40px;
    width: 300px;
    height: 300px;
    opacity: 0.05;
  }
}