:root{
  --bg:#ffffff;
  --text:#0b1f16;
  --muted:#476b5a;
  --accent:#0a7a4f;
  --accent-2:#0f9a62;
  --card:#f2f7f4;
  --border:#dce8e2;
  --shadow:0 10px 30px rgba(0,0,0,.06);
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d1311;
    --text:#e7f2ed;
    --muted:#a6c7b8;
    --accent:#21b77d;
    --accent-2:#39d598;
    --card:#0f1916;
    --border:#21342d;
    --shadow:0 10px 30px rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
}

.container{max-width:1080px;margin-inline:auto;padding:0 1rem}

.site-header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(120%) blur(8px);
  background-color: color-mix(in srgb, var(--bg) 75%, transparent);
  border-bottom:1px solid var(--border);
}

.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}

.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text); font-weight:700}
.logo{height:36px;width:auto; border-radius:8px}

nav a{margin-left:1rem; text-decoration:none; color:var(--text); opacity:.85}
nav a:hover{opacity:1}

.btn{
  display:inline-block; padding:.7rem 1rem; border-radius:10px;
  background:var(--accent); color:white; text-decoration:none; font-weight:600;
  box-shadow:var(--shadow); border:1px solid color-mix(in srgb, var(--accent) 80%, black 5%);
}
.btn:hover{background:var(--accent-2)}
.btn-ghost{
  background:transparent; color:var(--accent); border:1px solid var(--accent); box-shadow:none;
}
.btn-ghost:hover{background:color-mix(in srgb, var(--accent) 12%, transparent)}

.hero{
  padding:4rem 0 2.5rem;
  background: radial-gradient(1200px 600px at 10% -10%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%);
}
.hero-grid{
  display:grid; grid-template-columns:1.3fr .7fr; gap:2rem; align-items:center;
}
.hero .lead{font-size:1.1rem; color:var(--muted)}
.hero-card{
  background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1.2rem; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
}
.hero-card img{max-width:100%; height:auto; border-radius:12px}

.section{padding:3rem 0}
.section.alt{background:linear-gradient(180deg, color-mix(in srgb, var(--card) 65%, transparent) 0%, transparent 100%)}

.grid-3{
  display:grid; gap:1rem;
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1rem 1.1rem; box-shadow:var(--shadow);
}
.card h3{margin-top:.2rem}

.codeblock{
  position:relative; margin:1rem 0; background:#0b1f16; color:#daf3e7; border-radius:12px; border:1px solid #123428;
  overflow:hidden;
}
.codeblock pre{margin:0; padding:1rem; overflow:auto}
.copy-btn{
  position:absolute; top:.6rem; right:.6rem;
  background:var(--accent); color:#fff; border:none; padding:.45rem .7rem; border-radius:8px; cursor:pointer; font-weight:600;
}
.copy-btn:hover{background:var(--accent-2)}

.link{color:var(--accent); text-decoration:none; border-bottom:1px dashed color-mix(in srgb, var(--accent) 60%, transparent)}
.link:hover{border-bottom-style:solid}

.meta{list-style:none; padding-left:1rem}
.meta li{margin:.25rem 0}

.site-footer{
  padding:2rem 0; border-top:1px solid var(--border); margin-top:2rem; color:var(--muted); font-size:.95rem;
}

@media (max-width: 880px){
  .hero-grid{grid-template-columns:1fr}
  nav a{margin-left:.6rem}
  .grid-3{grid-template-columns:1fr}
}