:root{ --bg:#0b0d13; --panel:#13161f; --line:#1e2333; --text:#e8eaf2; --muted:#8b90a8; --accent:#00e5a0; --accent2:#3b82f6; }
*{ box-sizing:border-box; margin:0; padding:0; }
body{ background:var(--bg); color:var(--text); font-family:'Inter',system-ui,sans-serif; line-height:1.6; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1040px; margin:0 auto; padding:0 24px; }
header{ display:flex; align-items:center; justify-content:space-between; padding:22px 0; }
.logo{ display:flex; align-items:center; gap:9px; font-weight:800; font-size:18px; letter-spacing:-.01em; }
.logo .wordmark span{ color:var(--accent); }
.nav{ display:flex; gap:18px; align-items:center; font-size:14px; }
.nav a{ color:var(--muted); }
.nav a:hover{ color:var(--text); }
.btn{ display:inline-block; padding:9px 16px; border-radius:9px; font-weight:700; font-size:14px; cursor:pointer; border:none; }
.btn-primary{ background:var(--accent); color:#04130d; }
.article a.btn{ color:#04130d; text-decoration:none; }

/* ---- blog index ---- */
.blog-head{ padding:48px 0 8px; }
.blog-head h1{ font-size:34px; letter-spacing:-.02em; margin-bottom:10px; }
.blog-head p{ color:var(--muted); font-size:16px; max-width:600px; }
.post-list{ display:grid; gap:16px; padding:32px 0 64px; }
.post-card{ display:block; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:26px; transition:border-color .15s; }
.post-card:hover{ border-color:var(--accent); }
.post-card h2{ font-size:21px; letter-spacing:-.01em; margin-bottom:8px; }
.post-card p{ color:var(--muted); font-size:15px; }
.post-card .meta{ color:var(--accent); font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:12px; }

/* ---- article ---- */
.article{ max-width:720px; margin:0 auto; padding:24px 24px 72px; }
.article .kicker{ color:var(--accent); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin:32px 0 14px; display:inline-block; }
.article h1{ font-size:clamp(30px,4.5vw,42px); line-height:1.15; letter-spacing:-.02em; margin-bottom:28px; }
.article h2{ font-size:25px; letter-spacing:-.01em; margin:42px 0 16px; }
.article p{ font-size:17px; color:#d4d7e2; line-height:1.75; margin-bottom:20px; }
.article p strong{ color:var(--text); }
.article a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.article hr{ border:none; border-top:1px solid var(--line); margin:40px 0; }
.article .endnote{ color:var(--muted); font-size:15px; font-style:italic; }
.back{ display:inline-block; color:var(--muted); font-size:14px; margin:24px 0 0; }
.back:hover{ color:var(--text); }
.cta-band{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:32px; text-align:center; margin:48px 0 0; }
.cta-band h3{ font-size:20px; margin-bottom:10px; letter-spacing:-.01em; }
.cta-band p{ color:var(--muted); font-size:15px; margin-bottom:20px; }

footer{ padding:40px 0; color:var(--muted); font-size:13px; text-align:center; border-top:1px solid var(--line); }