/* Base */
:root {
  --green: #7a9e7e;
  --green-dark: #5d7a60;
  --ink: #333;
}
* { box-sizing: border-box; }
body { font-family: Arial, sans-serif; margin:0; background:#fafafa; color:var(--ink); }

/* Nav */
.nav { background:var(--green); padding:12px; position:sticky; top:0; z-index:10; }
.nav .nav-inner { display:flex; justify-content:space-between; align-items:center; gap:12px; max-width:1100px; margin:0 auto; padding:0 12px; }
.brand { color:#fff; font-weight:700; }
.menu a { margin:0 10px; color:white; text-decoration:none; font-weight:bold; }
.menu a[aria-current="page"] { text-decoration:underline; text-underline-offset:3px; }
.start-link { background:rgba(255,255,255,.18); padding:6px 10px; border-radius:6px; }

/* Hero */
.hero { text-align:center; padding:40px 20px; background:#ddd; }
.hero-banner {
  background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.25)), url('yard-banner.jpg') center/cover no-repeat;
  color:white;
  text-shadow:1px 1px 4px rgba(0,0,0,.6);
  padding:80px 22px 60px;
  min-height:260px;
}
.tag { opacity:.95; }

/* Layout */
.section { padding:20px; }
.card { background:white; padding:20px; border-radius:12px; margin:20px auto; box-shadow:0 2px 6px rgba(0,0,0,0.1); max-width:1100px; }
.grid { display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.img { width:100%; border-radius:8px; }
footer { text-align:center; padding:20px; background:#eee; margin-top:20px; }

/* Buttons */
.btn {
  display:inline-block;
  text-decoration:none;
  padding:12px 18px;
  border-radius:999px;
  font-weight:700;
  white-space:nowrap;
}

/* Fairy button ✨ (noticeable + playful) */
.fairy {
  background: radial-gradient(100% 100% at 50% 0%, #ffffffdd 0%, #ffffff88 60%, transparent 61%) top / 180% 180%,
              linear-gradient(90deg, #ffd6e8, #d7e8ff, #e2ffd6) border-box;
  color:#2a2a2a;
  border:3px solid transparent;
  box-shadow: 0 8px 18px rgba(0,0,0,.18), 0 0 18px rgba(255,255,255,.5) inset;
  position:relative;
  transition: transform .15s ease, box-shadow .2s ease, background-position .6s ease;
}

/* sparkles */
.fairy::after {
  content:"✳";
  position:absolute;
  right:-10px; top:-10px;
  font-size:18px; opacity:.9;
  animation: twinkle 1.4s infinite steps(1);
}
@keyframes twinkle {
  0%, 100% { content:"✴"; opacity:.9; transform: rotate(0deg) scale(1); }
  25% { content:"✦"; }
  50% { content:"✺"; transform: rotate(20deg) scale(1.1); }
  75% { content:"✧"; }
}

.fairy:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.22), 0 0 24px rgba(255,255,255,.7) inset; }
.fairy:active { transform: translateY(0); }

/* Accessibility tweak for keyboard focus */
a:focus-visible, button:focus-visible {
  outline:3px solid #0000ff88; outline-offset:3px;
}