:root {
  --ink:#0f172a; --muted:#475569; --card:#fff; --bg:#f1f5f9; --accent:#2563eb;
}
*{box-sizing:border-box}
html,body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5}
.wrap{width:min(1000px,92%);margin:0 auto}

/* #2 background image (also used in header) */
header.hero{
  background-image:
    linear-gradient(to bottom, rgba(15,23,42,.72), rgba(15,23,42,.72)),
    url("img/renosign.jpg");
  /* rest unchanged */
}
header.hero h1{margin:0 0 6px; text-shadow:0 2px 6px rgba(0,0,0,.35)}
header.hero p{margin:0; opacity:.9}

.note{margin:24px 0; padding:12px 16px; background:#fff; border-left:4px solid var(--accent);
      box-shadow:0 4px 12px rgba(2,6,23,.06)}

/* cards: #4 rounded borders + #7 box shadow */
.card{background:var(--card); margin:18px 0; padding:18px 18px 22px;
      border-radius:14px; box-shadow:0 6px 16px rgba(2,6,23,.06)}
.card h2{margin-top:0}

/* #3 border */
.border-solid{border:3px solid #1e293b}

/* #1 figure box */
.figure-box{margin:0; border-radius:12px; overflow:hidden; border:2px solid #e2e8f0}
.figure-box img{display:block; width:100%; height:auto}
.figure-box figcaption{padding:10px 12px; background:#f8fafc; font-size:.95rem; color:var(--muted)}

/* #2 background image section */
.bg-image{
  background-image:
    linear-gradient(to bottom right, rgba(37,99,235,.6), rgba(99,102,241,.6)),
    url("img/LakeTahoe.png");
  /* rest unchanged */
}

/* #8 gradients */
.gradients{display:grid; gap:12px}
.grad{height:120px; border-radius:12px; display:grid; place-items:center; font-weight:600; border:2px solid #e2e8f0}
.grad.linear{background:linear-gradient(90deg,#93c5fd,#a7f3d0)}
.grad.radial{background:radial-gradient(circle at 30% 30%,#fde68a,#fca5a5)}

/* #9 opacity */
.opacity-demo{position:relative; overflow:hidden; border-radius:12px}
.opacity-demo img{display:block; width:100%; height:auto; transition:opacity .25s ease}
.opacity-demo:hover img{opacity:.5}
.opacity-label{position:absolute; inset:auto 12px 12px 12px; background:rgba(15,23,42,.7); color:#fff; padding:8px 12px; border-radius:8px}

/* #12 image map */
.map-img{display:block; width:100%; height:auto; border:2px solid #e2e8f0; border-radius:12px}
.map-help{color:var(--muted)}
.footer{margin:40px auto 60px; color:var(--muted); font-size:.95rem}