
:root {
  --text: #fff;
  --muted: rgba(255,255,255,.85);
  --panel: rgba(0,0,0,.45);
  --green: #14532d;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:#000; color:var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* Fixed header with logo */
.header {
  position: fixed; inset: 0 0 auto 0; height: 64px; display:flex; align-items:center; justify-content:space-between;
  padding: 10px 16px; z-index: 1000;
  background: rgba(0,0,0,.35); backdrop-filter: blur(6px) saturate(120%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand { display:flex; align-items:center; gap: 10px; }
.brand img.logo { height: 40px; width:auto; display:block; }
.header .cta { color:#fff; text-decoration:none; background:#198754; padding:10px 14px; border-radius:10px; font-weight:700; }

/* Sections with background photos */
.section {
  position: relative; min-height: 100vh; display:flex; align-items:flex-end; justify-content:center;
  background-position: center; background-size: cover; padding: 90px 16px 64px;
}
.section .overlay {
  width: min(920px, 92%); background: var(--panel); padding: 16px 18px; border-radius: 14px;
  text-align:center; animation: fade .9s ease forwards; opacity:0; transform: translateY(14px);
}
.section h1, .section h2 { margin:0 0 8px; text-shadow: 2px 2px 10px rgba(0,0,0,.7); }
.section p { margin: 0; color: var(--muted); }

/* Crown watermark in hero only */
.section.hero .wm {
  position:absolute; right:18px; bottom:18px; width:78px; height:auto; opacity:.16; pointer-events:none;
}

/* About Section with watermark behind text */
.about { position:relative; background:#0f0f0f; padding: 80px 16px; }
.about .container {
  position:relative; width:min(950px, 92%); margin:0 auto; background:rgba(0,0,0,.35); border-radius:14px; padding:22px;
}
.about .crown-bg {
  position:absolute; inset:auto 12px 8px auto; width:120px; opacity:.09; pointer-events:none;
}
.about h2 { margin:0 0 8px; }
.about p { line-height:1.6; color:var(--muted); }

/* Reviews grid */
.reviews { background:#f6f6f6; color:#111; padding: 60px 16px; }
.reviews h2 { text-align:center; margin:0 0 18px; }
.review-grid { width:min(1100px, 95%); margin:0 auto; display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.review-grid img { width:100%; height:auto; border-radius:12px; box-shadow:0 8px 26px rgba(0,0,0,.15); background:#fff; }

/* Contact */
.contact { background: var(--green); padding: 60px 16px; }
.contact .wrap { width:min(760px, 92%); margin:0 auto; text-align:center; }
.form { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0; }
.form input, .form textarea {
  width:100%; padding:12px; border-radius:10px; border:none; outline:none;
}
.form textarea { grid-column:1 / -1; min-height:120px; }
.form button { grid-column:1 / -1; padding:12px 16px; border:none; border-radius:10px; font-weight:700; background:#0d3b1f; color:#fff; cursor:pointer; }

/* Footer */
.footer { background:#0b0b0b; color:#ddd; padding: 20px 16px; }
.footer .inner { width:min(1100px, 95%); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.footer .brand { display:flex; align-items:center; gap: 10px; }
.footer img.logo { height:30px; }

@keyframes fade { to { opacity:1; transform:none; } }
