:root {
  --container: min(100% - 2rem, 1100px);
  --radius: 12px;
  --header-bg: #1e293b;   /* slate/dark navy */
  --header-text: #fff;
  --header-link: #e2e8f0;
}

/* Base */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.5;
  color: #111;
  background: #fafafa;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--header-bg);
  color: var(--header-text);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.header-inner {
  width: var(--container);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 0;
}
.brand { margin: 0; font-size: clamp(1.1rem, 1vw + 1rem, 1.6rem); letter-spacing: .2px; }
.brand a { color: var(--header-text); text-decoration: none; }

/* Scope nav styles INSIDE the header only */
.site-header nav ul { list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0; }
.site-header nav a {
  color: var(--header-link);
  text-decoration: none;
  padding: .5rem .75rem;
  border-radius: 8px;
}
.site-header nav a:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Main layout: container + responsive 2-col grid */
main {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;                 /* mobile default: single column */
}

/* Cards/forms */
main > section {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  background: #fff;
  height: 100%;
}
section > h2 { text-align: center; }
form { width: min(100%, 460px); margin-inline: auto; }
label { display: block; margin-top: .75rem; }
input { width: 100%; padding: .5rem; margin-top: .25rem; }
button { align-self: center; margin-top: 1rem; padding: .6rem 1rem; cursor: pointer; }

.result-list {
  margin: 1rem 0 0;
  padding: .75rem 1rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  list-style: none;
}
.result-list li + li { margin-top: .5rem; }
.result-list strong { color: #1e293b; }

button {
  background: #1e293b;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: .6rem 1.2rem;
  font-weight: 600;
  transition: background .2s ease;
}
button:hover { background: #334155; }

.site-header nav a.active {
  background: rgba(255,255,255,.15);
  border-radius: 8px;
}

main section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1.5rem 2rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

main h2 {
  text-align: center;
  margin-bottom: 1.25rem;
}

main p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.feature-list {
  margin-top: 1rem;
  padding-left: 1.25rem;
}
.feature-list li {
  margin: .4rem 0;
}

.feature-list li::before {
  content: "✓";
  color: #2563eb;
  font-weight: bold;
  margin-right: .5rem;
}
.home main{
  width: var(--container);
  margin-inline: auto;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;              /* stack on mobile */
}
@media (min-width:768px){
  .home main{ grid-template-columns: repeat(2,1fr); align-items: stretch; }
}
/* Cards/forms only on home */
.home main > section{
  display:flex; flex-direction:column;
  padding:1.25rem;
  border:1px solid #e5e5e5; border-radius:12px; background:#fff; height:100%;
}
.home section > h2{ text-align:center; }
.home form{ width:min(100%,460px); margin-inline:auto; }
.home label{ display:block; margin-top:.75rem; }
.home input{ width:100%; padding:.5rem; margin-top:.25rem; }

/* —— ABOUT (single centered card) —— */
.about main{
  width: min(100% - 2rem, 720px);
  margin-inline: auto;
  padding: 2rem 1rem;
}

.home main, .about main { margin-top: 1.25rem; }

.about main section{
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  padding:1.5rem 2rem; box-shadow:0 1px 3px rgba(0,0,0,.05);
  margin-inline:auto; max-width:600px;
}
.about main h2{ text-align:center; margin-bottom:1.25rem; }
.about main p{ font-size:1.1rem; line-height:1.6; margin-bottom:1rem; }

/* Feature list bullets */
.feature-list{
  list-style:none; margin-top:1rem; padding-left:0;
}
.feature-list li{ margin:.4rem 0; display:flex; gap:.5rem; }
.feature-list li::before{ content:"✓"; color:#2563eb; font-weight:700; }