@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green-dark:   #1a1a1a;
  --green-nav:    #262421;
  --green-card:   #2c2c2c;
  --green-hover:  #363430;
  --green-border: #3d3b39;

  --accent:       #81b64c;
  --accent-dark:  #5e8a35;
  --accent-light: #a4cc6b;

  --sq-light:     #f0d9b5;
  --sq-dark:      #b58863;

  --text-main:    #e8e6e3;
  --text-muted:   #9e9b96;
  --text-faint:   #5c5a57;

  --font: 'Noto Sans', sans-serif;
  --radius: 6px;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--green-dark);
  color: var(--text-main);
  font-size: 15px;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }

/* NAV */
.navbar {
  background: var(--green-nav);
  border-bottom: 1px solid var(--green-border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 52px;
  position: sticky; top: 0; z-index: 100;
}
.logo {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent);
  margin-right: 32px;
  letter-spacing: -.3px;
}
.logo span { color: var(--text-main); }
.nav-links { display: flex; gap: 4px; flex: 1; }
.nav-links a {
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text-muted);
  transition: background .15s, color .15s;
}
.nav-links a:hover { background: var(--green-hover); color: var(--text-main); }
.nav-right { display: flex; gap: 8px; }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 20px; border-radius: var(--radius);
  font-family: var(--font); font-size: 14px; font-weight: 600;
  cursor: pointer; border: none; transition: all .15s;
}
.btn-green  { background: var(--accent); color: #fff; }
.btn-green:hover  { background: var(--accent-light); }
.btn-outline { background: transparent; color: var(--text-main); border: 1px solid var(--green-border); }
.btn-outline:hover { background: var(--green-hover); }
.btn-lg { padding: 13px 28px; font-size: 16px; border-radius: 8px; }

/* HERO */
.hero {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 60px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 24px;
}
.hero-text h1 {
  font-size: 2.6rem; font-weight: 700;
  line-height: 1.15; margin-bottom: 16px;
  color: var(--text-main);
}
.hero-text h1 span { color: var(--accent); }
.hero-text p { font-size: 16px; color: var(--text-muted); margin-bottom: 28px; max-width: 420px; }
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* SCHAAKBORD */
.board-wrap { position: relative; }
.chess-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  width: 400px;
  height: 400px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.sq {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  cursor: default;
  user-select: none;
}
.sq.l { background: var(--sq-light); }
.sq.d { background: var(--sq-dark); }

/* FEATURES */
.features {
  background: var(--green-nav);
  border-top: 1px solid var(--green-border);
  border-bottom: 1px solid var(--green-border);
  padding: 48px 24px;
}
.features-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3,1fr); gap: 32px;
}
.feature-card {
  background: var(--green-card);
  border: 1px solid var(--green-border);
  border-radius: 10px;
  padding: 28px 24px;
  transition: border-color .2s;
}
.feature-card:hover { border-color: var(--accent); }
.feature-icon { font-size: 2rem; margin-bottom: 14px; }
.feature-card h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 8px; }
.feature-card p  { font-size: 14px; color: var(--text-muted); line-height: 1.6; }

/* STATS */
.stats {
  max-width: 1100px; margin: 48px auto;
  display: grid; grid-template-columns: repeat(3,1fr); gap: 20px;
  padding: 0 24px;
}
.stat-box { text-align: center; }
.stat-box .num { font-size: 2.2rem; font-weight: 700; color: var(--accent); }
.stat-box .lbl { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

/* FOOTER */
footer {
  background: var(--green-nav);
  border-top: 1px solid var(--green-border);
  padding: 20px 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-faint);
}

/* FORMS */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--text-muted); margin-bottom: 6px;
}
.form-control {
  width: 100%; padding: 10px 14px;
  background: var(--green-nav); border: 1px solid var(--green-border);
  border-radius: var(--radius); color: var(--text-main);
  font-family: var(--font); font-size: 14px; outline: none;
  transition: border-color .15s;
}
.form-control:focus { border-color: var(--accent); }
.form-control::placeholder { color: var(--text-faint); }

/* CARD */
.card {
  background: var(--green-card);
  border: 1px solid var(--green-border);
  border-radius: 10px;
  padding: 24px;
}

/* UTILS */
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }