:root{
  --primary:#239b35;
  --primary-ghost:rgba(35,155,53,.12);
  --bg:#faf3dd;
  --card:#fff;
  --text:#09120b;
  --muted:#6b7280;
  --border:#e5e7eb;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:"Didact Gothic",sans-serif;
  color:var(--text); background:var(--bg);
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:1000;
  height:64px; background: #faf3dd;
; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between; padding:0 20px;
}
.topbar .nav{ display:flex; gap:16px; align-items:center; }
.topbar .nav a{ text-decoration:none; color:#111; padding:6px 8px; border-radius:8px; }
.topbar .nav a:hover{ background:var(--primary-ghost); }
.topbar .nav .cta{ background:var(--primary); color:#fff; font-weight:700; }
.topbar .nav .cta:hover{
  filter: brightness(0.9);
}
.hamburger{ display:none; background:transparent; border:none; font-size:22px; padding:8px; cursor:pointer; }
.logo img{ display:block; height:28px; }

.btn.primary:hover {
  background: #197727;
}

    /* Bullseye hero */
    .bullseye{
      background: var(--primary);
      color: #fff;
      /* Sit directly under fixed topbar and center content vertically */
      padding-top: 40px; /* equals topbar height */
      padding-bottom: 40px;
      min-height: 700px; /* larger hero on desktop */
      display: flex;
      align-items: center;
    }
    .bullseye .inner{
      max-width: 1200px;
      margin: 0 auto; /* remove extra gap; top padding handled by .bullseye */
      padding: 32px 24px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      align-items: center;
    }
    .bullseye h1{
      font-family: "Comfortaa", cursive;
      font-size: clamp(28px, 4vw, 44px);
      line-height: 1.2;
      margin: 14px 0 10px;
      color: #fff;
    }
    .bullseye p.lead{
      font-size: 18px;
      line-height: 1.7;
      margin: 10px 0 18px;
      color: #f4fff5;
    }
    .bullseye .cta-col{
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: 560px;
      padding-right: 40px;
    }
    .bullseye .shutter{
      width: 56px;
      height: 56px;
      object-fit: contain;
      display: block;
    }
    .btn.light{
      background: #faf3dd; /* light yellow used site-wide */
      color: #111;
      border: 1px solid rgba(0,0,0,.05);
      box-shadow: 0 1px 0 rgba(0,0,0,.04);
      padding: 12px 24px;
      text-align: center;
      align-self: start;
    }
    .btn.light:hover{
      background: #fae398;
      cursor: pointer;
    }
    .btn.link{
      background: transparent;
      color: #ffffff;
      text-decoration: underline;
      padding: 0;
      border-radius: 0;
      display: inline-block;
      width: fit-content;
    }
    .btn.link:hover{ text-decoration-thickness: 2px; }
    .bullseye .product{
      width: 100%;
      height: auto;
      display: block;
      border-radius: 14px;
    }

    @media (max-width: 800px){
      .bullseye{
        min-height: auto; /* allow content to define height on mobile */
        padding-top: 64px;
        padding-bottom: 20px;
        text-align: center;
      }
      .bullseye .inner{
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 0 auto;
        padding: 20px 18px;
      }
      .bullseye .cta-col{ max-width: none; padding-right: 0; }
      .bullseye .shutter{ display: none; } /* hide shutter on mobile */
      .visual-col{ order: -1; } /* move product image above text */
      .bullseye .product{
        width: 100%;
        height: auto;
        max-height: 42vh; /* prevent cut-off */
        object-fit: contain;
      }
      .btn.light {
        align-self: auto;
      }
      .btn.link {
        width: auto;;
      }
    }

/* Drawer (mobile menu) */
.drawer{
  position:fixed; top:64px; right:0; bottom:0; width:min(80vw,320px);
  background:#fff; border-left:1px solid var(--border);
  transform:translateX(100%); transition:transform .22s ease-in-out;
  display:flex; flex-direction:column; padding:16px;
  gap:8px; z-index:1100;
}
.drawer a{ text-decoration:none; color:#111; padding:10px 12px; border-radius:10px; }
.drawer a.cta{ background:var(--primary); color:#fff; font-weight:700; }
.drawer.open{ transform:translateX(0); }

/* Layout */
.wrap{ max-width:1200px; margin:32px auto; padding:0 20px; }
.hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; margin-top:40px; }
.hero h1{ font-family:"Comfortaa",cursive; font-size:44px; margin:0 0 6px; color:var(--primary); }
.lead{ font-size:18px; color:#111; }
.actions{ display:flex; gap:12px; margin-top:16px; }
.btn{ display:inline-block; padding:12px 16px; border-radius:10px; text-decoration:none; font-weight:700; }
.btn.primary{ background:var(--primary); color:#fff; }
.btn.ghost{ background:#fff; color:#111; border:1px solid var(--border); }
.hero-img{ width:100%; height:auto; border:1px solid var(--border); border-radius:14px; background:#fff; }

/* Features */
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:20px; }
.card h3{ font-family:"Comfortaa",cursive; margin:0 0 6px; }

/* Steps */
.steps h2{ font-family:"Comfortaa",cursive; margin-bottom:8px; }
.steps ol{ line-height:1.9; padding-left:20px; }

/* Footer */
.site-footer{
  margin-top:60px; background:#09120b; color:#fff;
}
.footer-inner{
  max-width:1100px; margin:0 auto; padding:18px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.footer-inner nav{ display:flex; gap:14px; }
.footer-inner a{ color:#fff; text-decoration:none; opacity:.9; }
.footer-inner a:hover{ opacity:1; }

/* Responsive */
@media (max-width: 900px){
  .hero{ grid-template-columns:1fr; }
}
@media (max-width: 740px){
  .topbar .nav{ display:none; }
  .hamburger{ display:block; }
}