:root{
  --bg:#0b120d;          /* richer forest green */
  --panel:#101812;       /* deeper moss */
  --ink:#e6f7e6;         /* brighter misty green */
  --muted:#a3c2a3;       /* softer lichen */
  --accent:#3f9b6b;      /* stronger green */
  --accent-2:#6ecf8a;    /* vivid herb highlight */
  --ring:#1e2f22;
}

::selection { background: #145c18; color: #fff; }
::-moz-selection { background: #17631c; color: #fff; } /* Firefox */

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 700px at 80% -10%, rgba(123,91,214,.18), transparent 60%),
              radial-gradient(900px 600px at -10% 90%, rgba(63,191,127,.18), transparent 55%),
              var(--bg);
  color:var(--ink);
}

.container{max-width:900px;margin:1.5rem auto;padding:0 1rem}

a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-2);text-decoration:underline}

header.container{margin-top:1rem}
.brand{color:inherit;text-decoration:none}
.tagline{color:var(--muted)}

.hero{
  position:relative;
  height:42vh; min-height:280px; max-height:520px;
  margin:0 0 1.5rem 0;
  border-radius:18px;
  background:
    linear-gradient(to bottom, rgba(11,15,12,.1), rgba(11,15,12,.65)),
    url("/static/img/banner.jpg") center/cover no-repeat;
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05);
  overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(600px 200px at 10% 95%, rgba(77,164,122,.25), transparent 70%),
    radial-gradient(500px 180px at 95% 10%, rgba(126,207,146,.2), transparent 70%);
  mix-blend-mode:screen; pointer-events:none;
}
.hero-inner{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:2rem;
}
.hero p{margin:0; color:var(--muted); text-shadow:0 2px 10px rgba(0,0,0,.6)}

h2{margin-top:2rem}
h1{
  margin:0 0 .5rem 0;
  font-size:2.8rem;       /* bigger */
  text-align:center;      /* centered */
  letter-spacing:.5px;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}

.cards{
  list-style:none; padding:0;
  display:grid; gap:1rem; grid-template-columns:1fr;
}
@media(min-width:760px){.cards{grid-template-columns:1fr 1fr}}

.card{
  background:linear-gradient(180deg, rgba(18,24,20,.7), rgba(18,24,20,.9));
  border:1px solid var(--ring);
  border-radius:16px; padding:1rem;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.card h3{margin-top:.2rem}
.links a{margin-right:.75rem}

.form{
  display:flex; gap:.6rem; flex-wrap:wrap; align-items:center;
  background:linear-gradient(180deg, rgba(18,24,20,.7), rgba(18,24,20,.9));
  border:1px solid var(--ring); border-radius:16px; padding:1rem;
}
.form input[type=email]{
  flex:1; min-width:240px; padding:.7rem .85rem;
  background:#0e1411; color:var(--ink);
  border:1px solid var(--ring); border-radius:10px;
  outline:none;
}
.form input[type=email]:focus{border-color:var(--accent-2); box-shadow:0 0 0 3px rgba(63,191,127,.2)}
.form button{
  padding:.75rem 1rem;
  border:0; border-radius:10px; cursor:pointer;
  color:#0a0d0b;
  background:linear-gradient(180deg, var(--accent-2), var(--accent));
  box-shadow:0 6px 16px rgba(77,164,122,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.form button:hover{filter:brightness(1.05)}
.muted{color:var(--muted);font-size:.92rem}

.small{font-size:.875rem;color:var(--muted)}

.alert{
  padding:.7rem .9rem; border-radius:10px; margin:.5rem 0;
  border:1px solid var(--ring);
}
.alert.ok{background:rgba(63,191,127,.12)}
.alert.err{background:rgba(214,91,91,.12)}

.hp{display:none}

/* Mobile tweaks */
@media (max-width: 600px){
  /* fluid base so rems scale nicely */
  html { font-size: clamp(15px, 3.8vw, 17px); }

  .container{ padding: 0 1.1rem; margin: 1rem auto; }

  /* soften / reframe background glows for small screens */
  body{
    background:
      radial-gradient(70% 45% at 80% -10%, rgba(123,91,214,.16), transparent 60%),
      radial-gradient(65% 40% at -10% 90%, rgba(63,191,127,.18), transparent 55%),
      var(--bg);
  }

  .hero{
    height: 36vh; min-height: 220px; max-height: 420px;
    border-radius: 14px;
    background:
      linear-gradient(to bottom, rgba(11,15,12,.10), rgba(11,15,12,.65)),
      url("/static/img/banner.jpg") center/cover no-repeat;
  }
  .hero::after{
    background:
      radial-gradient(55% 28% at 12% 92%, rgba(77,164,122,.25), transparent 70%),
      radial-gradient(50% 26% at 92% 8%, rgba(126,207,146,.20), transparent 70%);
  }
  .hero-inner{ padding: 1.25rem; }
  .hero h2{
    font-size: clamp(1.7rem, 7vw, 2.4rem);
    text-align: center;
  }
  .hero p{ font-size: .98rem; }

  /* cards already 1-col below 760px — add breathing room */
  .cards{ gap: .85rem; }
  .card{ padding: .9rem; border-radius: 14px; }

  /* form: stack + full-width controls */
  .form{
    gap: .55rem; padding: .9rem; border-radius: 14px;
    flex-direction: column; align-items: stretch;
  }
  .form input[type=email]{ min-width: 0; width: 100%; }
  .form button{ width: 100%; padding: .85rem 1rem; }

  /* tidy link rows on wrap */
  .links a{ display: inline-block; margin: 0 .6rem .4rem 0; }

  /* small text legibility */
  .small, .muted{ font-size: .95rem; }
}

/* Tiny phones */
@media (max-width: 380px){
  .hero{ min-height: 200px; }
  .hero h2{ font-size: clamp(1.6rem, 8.2vw, 2.1rem); }
}

.use-theme-bg {
  background:rgba(0,0,0,0);
}