/* ========== Base / Reset ========== */
* { box-sizing: border-box; }

:root{
  --outer-bg: #0b1f14;   /* deep muted green-gray */
  --inner-bg: #4e8651;   /* light green content & header */
  --ink: #052e16;        /* dark readable text on light green */
  --ink-soft: #064e3b;
  --ink-hover: #047857;

  .btn:hover {
  background: #a8d5a2;   /* hover green */
  color: #ffffff;        /* switch text to white for contrast */
  transform: translateY(-2px);
}

}

/* Page */
body{
  margin:0;
  font-family: system-ui, Arial, sans-serif;
  background: var(--outer-bg);
  color: var(--ink);
  line-height:1.6;
}

/* Links */
a{
  color: var(--ink-soft);
  text-decoration:none;
  transition: color .3s ease;
}
a:hover{ color: var(--ink-hover); }

/* ========== Header ========== */
.header{
  background: var(--inner-bg);           /* lighten header so brand/logo pop */
  border-bottom: 2px solid var(--ink-soft);
  padding:.5rem 0;
}

.header .wrap{
  width:min(1000px,92%);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-weight:800;
}
.brand img{ width:40px; height:40px; }
.brand a{
  color: var(--ink);
  font-size:1.25rem;
  font-weight:800;
}

/* Primary nav */
.nav{
  display:flex;
  gap:1rem;
}
.nav a{
  font-weight:700;
  position:relative;
  color: var(--ink-soft);
}
.nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:-4px;
  height:2px; width:0%;
  background: var(--ink-hover);
  transition: width .3s ease;
}
.nav a:hover::after{ width:100%; }

/* ========== Content Containers ========== */
/* Support both .wrap and .container */
.wrap,
.container{
  width:min(1000px,92%);
  margin: 1rem auto 2rem auto;
  background: var(--inner-bg);
  border-radius:12px;
  padding:2rem;
}

/* Content cards */
.card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  padding:1.5rem;
  border-radius:.75rem;
}

/* Images never overflow the card/container */
.card img,
.wrap img,
.container img{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:12px;
  margin:1rem 0;
}

/* ========== Button (notched, animated) ========== */
.btn{
  display:inline-block;
  background: var(--btn-base);
  color:#0b0f19;
  padding:.85rem 1.6rem;
  font-weight:800;
  letter-spacing:.2px;
  border:0;
  cursor:pointer;
  text-decoration:none;

  box-shadow:0 6px 12px rgba(0,0,0,.28);
  transition: background .25s ease, box-shadow .25s ease, transform .15s ease;

  /* Notched polygon shape */
  clip-path: polygon(
    16px 0,
    100% 0,
    100% calc(100% - 16px),
    calc(100% - 34px) 100%,
    0 100%,
    0 16px
  );
  position:relative;
}
.btn::after{
  content:"";
  position:absolute;
  inset:0;
  clip-path:inherit;
  border:2px solid rgba(0,0,0,.06);
  pointer-events:none;
}

.btn:hover{
  background: var(--btn-hover);
  box-shadow:0 10px 20px rgba(0,0,0,.35), 0 0 12px rgba(144,238,144,.55);
  transform: translateY(-2px);
}
.btn:active{
  background: var(--btn-hover);
  box-shadow:0 4px 8px rgba(0,0,0,.25);
  transform: translateY(1px) scale(.985);
}
.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(89,169,255,.45), 0 10px 20px rgba(0,0,0,.35);
}

/* ========== Footer ========== */
.footer{
  background: transparent;
  border:0;
  text-align:center;
  margin-bottom:1rem;
}
footer small{ color: var(--ink-soft); }