/* 915MESH minimal stylesheet — reset + components */

/* --- Variables & base colors --- */
:root{
  --bg:#0b0c10;
  --fg:#e8ecf1;
  --muted:#9aa3af;
  --brand:#4ade80;     /* green */
  --border:#232634;
  --ink:#0a0a0a;       /* near-black on green */
}
@media (prefers-color-scheme:light){
  :root{--bg:#ffffff;--fg:#0b0c10;--muted:#4b5563;--border:#e5e7eb}
}

/* --- Base elements --- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
  background:var(--bg);
  color:var(--fg);
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:960px;margin:0 auto;padding:0 16px}
main{padding:36px 0}

/* --- Buttons --- */
.btn{display:inline-block;padding:.55rem .9rem;border-radius:12px;text-decoration:none;font-weight:700}
.btn.filled{background:var(--brand);color:var(--ink)}
.btn.ghost{border:1px solid var(--border);color:var(--fg)}

/* --- Layout helpers --- */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media(min-width:900px){
  .grid-2{grid-template-columns:1.4fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
}

/* --- Cards, text sizes --- */
.card{border:1px solid var(--border);border-radius:14px;padding:14px;background:transparent}
.small{font-size:.95rem;color:var(--muted)}
.list{margin:0;padding-left:1.2rem}

/* --- Footer --- */
footer{border-top:1px solid var(--border);color:var(--muted);padding:24px 0;font-size:.95rem}

/* =========================
   Header — green banner
   ========================= */
header{
  background:var(--brand,#4ade80);   /* full-width green bar */
  position:relative;
  height:120px;
  display:flex;align-items:center;justify-content:center;
}
header .brand{
  position:absolute;left:50%;transform:translateX(-50%);
  font-family:"Arial Black","Segoe UI Black","Helvetica Neue",Impact,Haettenschweiler,Arial,sans-serif;
  font-weight:900;
  font-size:3.5rem;  /* bump if you want bigger */
  color:var(--ink);
  text-transform:uppercase;letter-spacing:.06em;
}
header .links{
  position:absolute;right:2rem;top:50%;transform:translateY(-50%);
  display:flex;gap:1rem;
}
header .links a{
  color:var(--ink);
  font-weight:600;font-size:1rem;
  padding:.4rem .7rem;border-radius:6px;
  text-decoration:none;
}
header .links a:hover{ background:rgba(0,0,0,.08) }

/* --- Mobile (and mid widths): stack links below brand, skip the 2-row state --- */
@media (max-width: 1100px) {
  header {
    height: auto;
    padding: 20px 12px 20px;
  }

  header .brand {
    position: static;
    transform: none;
    display: block;
    width: 100%;
    text-align: center;
    font-size: 2.6rem;   /* tweak 2.4–2.8rem to taste */
    margin: 0 0 10px 0;
    line-height: 1.1;
  }

  header .links {
    position: static;
    transform: none;
    width: 100%;
    display: flex;
    flex-wrap: wrap;     /* wrap nicely on small screens */
    justify-content: center;
    gap: 10px 14px;
    margin: 0;
  }

  header .links a {
    font-size: 1.05rem;
    padding: .52rem .85rem;
    white-space: nowrap; /* keep each link on one line */
  }
}