/* =========================
   Color System
========================= */

:root{
  --bg-color:#ffffff;
  --text-color:#111111;
  --subtext-color:#666666;
  --border-color:#eeeeee;
  --card-bg:#ffffff;
  --card-shadow:rgba(0,0,0,.06);
  --button-bg:#000000;
  --button-text:#ffffff;
  --link-color:#0066cc;
  --footer-color:#888888;
}

/* Dark Mode */
@media (prefers-color-scheme: dark){
  :root{
    --bg-color:#0f0f0f;
    --text-color:#f5f5f5;
    --subtext-color:#aaaaaa;
    --border-color:#2a2a2a;
    --card-bg:#151515;
    --card-shadow:rgba(0,0,0,.4);
    --button-bg:#ffffff;
    --button-text:#000000;
    --link-color:#4da3ff;
    --footer-color:#777777;
  }
}

/* =========================
   Base Layout
========================= */

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial;
  background:var(--bg-color);
  color:var(--text-color);
  transition:background .3s,color .3s;
}

.container{
  max-width:1000px;
  margin:auto;
  padding:80px 20px;
}

.narrow{
  max-width:900px;
  margin:80px auto;
  padding:20px;
}

h1{
  font-size:48px;
  margin-bottom:10px;
}

h2{
  margin-top:60px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border-color);
}

.subtitle{
  font-size:22px;
  color:var(--subtext-color);
  margin-bottom:60px;
}

.section{
  margin-bottom:80px;
}

p{
  color:var(--subtext-color);
}

ul{
  line-height:1.8;
}

/* =========================
   Components
========================= */

.card{
  border:1px solid var(--border-color);
  border-radius:16px;
  padding:30px;
  background:var(--card-bg);
  transition:.2s;
}

.card:hover{
  box-shadow:0 10px 30px var(--card-shadow);
}

.button{
  display:inline-block;
  margin-top:20px;
  padding:10px 20px;
  border-radius:8px;
  text-decoration:none;
  background:var(--button-bg);
  color:var(--button-text);
  transition:.2s;
}

a{
  color:var(--link-color);
  text-decoration:none;
}

a:hover{
  text-decoration:underline;
}

.footer{
  margin-top:100px;
  font-size:14px;
  color:var(--footer-color);
}


/* =========================
   Header
========================= */

.header{
  position:sticky;
  top:0;
  backdrop-filter:blur(20px);
  background:rgba(255,255,255,.7);
  border-bottom:1px solid var(--border-color);
  z-index:1000;
}

@media (prefers-color-scheme: dark){
  .header{
    background:rgba(15,15,15,.7);
  }
}

.nav{
  max-width:1000px;
  margin:auto;
  padding:16px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.nav a{
  font-weight:500;
}

.nav-links a{
  margin-left:20px;
}