/* ========= Base ========= */
* { box-sizing: border-box; }
:root {
  --ink:#0b1e26;
  --sea:#0f766e;
  --muted:#4b6368;
  --bg:#f7fafa;
}
html, body { height: 100%; }
body { margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--bg); }
a { color: inherit; text-decoration: none; }

/* ========= Layout ========= */
.container { max-width:1100px; margin:0 auto; padding:24px; }

header, footer {
  background: var(--sea);
  color: #fff;
  padding: 18px 24px;
  display: flex; justify-content: space-between; align-items: center;
}
.brand { display:flex; align-items:center; gap:10px; }
.brand img { height:40px; }
nav a { color:#fff; margin-left:14px; font-weight:600; }
footer p { margin:0; }

/* ========= Typography & Buttons ========= */
h1 { font-size:40px; line-height:1.1; margin:0 0 10px; }
h2 { font-size:24px; margin:24px 0 10px; }
.lead { font-size:18px; color:#1f3a3d; margin:0 0 18px; }
.btn-primary {
  display:inline-block; background:var(--sea); color:#fff;
  padding:12px 18px; border-radius:10px; font-weight:700;
}

/* ========= Shared Hero (ocean bg + soft overlay) ========= */
.hero { position:relative; border-radius:16px; overflow:hidden; }
.hero::before {
  content:""; position:absolute; inset:0;
  background:url('/bg-ocean.png') center/cover no-repeat;
  opacity:.25;
}
.hero-inner {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.1fr .9fr; gap:24px;
  padding:48px;
  background:linear-gradient(180deg, rgba(15,118,110,.10), rgba(15,118,110,.04));
  border-radius:16px;
}
@media (max-width:900px) { .hero-inner { grid-template-columns:1fr; } }

/* ========= Beacon image ========= */
.beacon { display:flex; align-items:center; justify-content:center; }
.beacon img { max-width:320px; width:100%; }

/* ========= Sections / Lists ========= */
section { margin:28px 0; }
ul { margin:10px 0 0 18px; color:var(--muted); }
li { margin:8px 0; }

/* ========= Page-specific tweaks ========= */
/* Root homepage hero (ensures CTA always clickable above overlays) */
.hero-home .hero-inner { position:relative; z-index:1; }
.cta-mindanchor { position:relative; z-index:5; }
/* --- Hero Buttons Styling --- */
.cta-mindanchor, .cta-donate {
  display: inline-block;
  margin: 8px 10px 0 0;   /* space between buttons */
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  color: #fff;
}

/* MindAnchor button (solid green) */
.cta-mindanchor {
  background: #28a745;
  color: #fff;
}
.cta-mindanchor:hover {
  background: #218838;   /* darker green */
  color: #fff;
}

/* Donate Now button (green with purple text & outline, turns purple on hover) */
.cta-donate {
  background: #28a745;
  border: 2px solid #635BFF;
  color: #635BFF;
}
.cta-donate:hover {
  background: #635BFF;   /* Stripe purple fill */
  color: #fff;
}

/* Buy Me a Coffee button (yellow) */
.cta-coffee {
  background: #FFDD00;
  color: #000;
}
.cta-coffee:hover {
  background: #ffcc00;   /* brighter yellow */
  color: #000;
}
/* Mobile tweaks: stack buttons, full-width, comfy tap targets */
@media (max-width: 480px) {
  .cta-mindanchor, .cta-donate, .cta-coffee {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 10px 0;         /* vertical spacing between buttons */
    padding: 14px 16px;     /* bigger tap area */
    font-size: 18px;        /* easier to read */
    text-align: center;
  }
}