:root{
  --green:#0e7c59;
  --dark:#16322c;
  --shadow:0 10px 30px rgba(0,0,0,.15);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--dark);line-height:1.55}

/* Universal background (show full graphic) */
body{
  background-image:url("./assets/bg.jpg");
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:contain;              /* show entire graphic */
  background-position:center 72px;      /* shift down so navbar doesn't overlap */
  background-color:#9fe18e;             /* subtle edge fill */
}
/* Respect notches/safe-area and dynamic bars on phones */
@supports (top: env(safe-area-inset-top)){
  body{ background-position: center calc(72px + env(safe-area-inset-top)); }
}
@media (max-width:600px){
  /* Slightly more offset on smaller phones */
  body{ background-position:center 88px; }
}

/* Sticky, translucent nav */
.navbar{position:sticky;top:0;z-index:10;backdrop-filter:saturate(160%) blur(6px);background:rgba(255,255,255,.85);border-bottom:1px solid rgba(0,0,0,.06)}
.nav{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--dark);text-decoration:none}
.navlinks{display:flex;gap:22px}
.navlinks a{color:var(--dark);text-decoration:none;font-weight:600}
.cta{background:linear-gradient(135deg,#1aa374,#0e7c59);color:#fff !important;padding:10px 16px;border-radius:999px;box-shadow:var(--shadow)}

/* Page container */
.page{max-width:1100px;margin:0 auto;padding:64px 20px 80px}

/* White content cards (same across all pages) */
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;margin:18px auto}
.center{text-align:center}
.form-card{background:#fff}
form{display:flex;flex-direction:column;gap:12px;max-width:560px;margin:0 auto}
input[type=email]{padding:14px 16px;border:1px solid rgba(0,0,0,.15);border-radius:12px;font-size:16px}
button{padding:12px 16px;border:0;border-radius:12px;background:linear-gradient(135deg,#1aa374,#0e7c59);color:#fff;font-weight:700;cursor:pointer;box-shadow:var(--shadow)}
small{opacity:.7}

/* Spacer to showcase background on home before first card */
.hero-spacer{height:24vh}
@media (max-width:900px){ .hero-spacer{height:16vh} }