/* Knopoff background fix: tolerates .jpg or .png and ensures correct path */
*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#222;background:#f5f7fb}
.hero{
  min-height:100vh;
  background-image: url('../img/rainbow_vineyard.jpg'), url('../img/rainbow_vineyard.png');
  background-size: cover;
  background-position: center;
  display:flex;
  flex-direction:column;
}
.wrap{width:min(1100px,92vw);margin:0 auto;padding:1rem 0}
header{color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:space-between}
nav a{color:#fff;text-decoration:none;margin-left:1rem;padding:.35rem .6rem;border-radius:.5rem;background:rgba(0,0,0,.25)}
nav a:hover{background:rgba(0,0,0,.4)}
.card{background:rgba(255,255,255,.9);backdrop-filter:blur(2px);padding:1.2rem 1.4rem;border-radius:14px;box-shadow:0 10px 25px rgba(0,0,0,.14);margin-top:2rem}
.btn{padding:.6rem 1rem;border:none;border-radius:10px;background:#0050a0;color:#fff;cursor:pointer;font-weight:600}
.btn:hover{background:#0a67c4}
.output{margin-top:.8rem;font-size:1.05rem;font-weight:600}
footer{margin-top:auto;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.35);padding:1.2rem 0}