/* Reset / Base */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #0f172a; background: #fff; }

/* Navbar */
.navbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 28px; border-bottom: 1px solid #e2e8f0; background: #0b0b0b;
}
.logo { height: 40px; display: block; }
.navbar-right a {
  color: #fff; text-decoration: none; font-weight: 700; margin-left: 22px;
  transition: opacity .2s ease;
}
.navbar-right a:hover { opacity: .85; }

/* Hero */
.hero {
  position: relative; min-height: calc(100vh - 65px);
  display: grid; place-items: center; overflow: hidden;
  background: #C9A227; /* dark yellow brand */
}
.hero-content { position: relative; z-index: 2; text-align: center; padding: 24px; max-width: 720px; color: #111; }
.hero h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; margin-bottom: 12px; letter-spacing: .2px; }
.hero p { font-size: 1.1rem; margin-bottom: 18px; color: #1f2937; }

/* Subtle line-art overlay (soft, tiny diagonal lines) */
.hero-pattern {
  position: absolute; inset: 0; z-index: 1;
  opacity: .3; pointer-events: none;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.06) 12%, transparent 12%),
    linear-gradient(225deg, rgba(255,255,255,.06) 12%, transparent 12%),
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.04), transparent 45%),
    radial-gradient(circle at 90% 80%, rgba(255,255,255,.05), transparent 50%);
  background-size: 40px 40px, 40px 40px, 360px 360px, 420px 420px;
  background-position: 0 0, 20px 20px, 0 0, 0 0;
}

/* Buttons */
.buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .8rem 1.1rem; border-radius: 12px; font-weight: 800;
  background: #0b0b0b; color: #fff; border: 2px solid transparent;
  transition: transform .12s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover { transform: translateY(-1px); opacity: .95; }
.btn-outline { background: transparent; color: #0b0b0b; border-color: #0b0b0b; }
.btn-outline:hover { background: rgba(0,0,0,.06); }

/* Responsive navbar stack */
@media (max-width: 640px) {
  .navbar { flex-wrap: wrap; row-gap: 10px; }
  .navbar-right { width: 100%; display: flex; justify-content: flex-start; gap: 16px; }
  .navbar-right a { margin-left: 0; }
}