:root{--ink:#1e1f24;--muted:#5b6470;--bg:#fbfaf7;--card:#fff;--line:#e6e2da;--accent:#d9493a;--coral:#FF6B57;--charcoal:#1e1f24}
*{box-sizing:border-box}body{margin:0;font:17px/1.6 Georgia,"Times New Roman",serif;color:var(--ink);background:var(--bg)}
a{color:var(--accent)}.wrap{max-width:960px;margin:0 auto;padding:0 1.25rem}
header{border-bottom:1px solid var(--line)}header .wrap{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem}
.brand{font-weight:bold;letter-spacing:.04em;text-decoration:none;color:var(--ink)}nav a{margin-left:1rem;font-family:system-ui,sans-serif;font-size:.95rem;text-decoration:none}
.hero{padding:4.5rem 0 3rem}.hero h1{font-size:clamp(2rem,5vw,3rem);margin:0 0 .5rem;font-weight:normal}.hero p{color:var(--muted);font-size:1.15rem;max-width:40rem}
section{padding:2rem 0}h2{font-weight:normal;font-size:1.6rem;border-bottom:1px solid var(--line);padding-bottom:.4rem}
.cards{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:1.4rem}.card h3{margin:0 0 .2rem}.tag{font-style:italic;color:var(--muted);margin:0 0 .8rem}
.card p{font-size:.97rem}.todo{background:#fff4d6;border:1px dashed #d4a72c;padding:.1rem .4rem;border-radius:4px;font-family:system-ui,sans-serif;font-size:.85rem}
footer{border-top:1px solid var(--line);margin-top:3rem;padding:1.5rem 0;color:var(--muted);font-size:.9rem;font-family:system-ui,sans-serif}
header{background:var(--charcoal);border-bottom:3px solid var(--coral)}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff}.brand img{height:30px;width:auto}
nav a{color:#f3f1ec}nav a:hover{color:var(--coral)}
.hero{display:flex;align-items:center;gap:2rem;flex-wrap:wrap}.hero-logo{width:120px;height:120px;background:var(--charcoal);border-radius:20px;padding:22px;flex:none}
.hero-logo img{width:100%;height:100%}.hero-text{flex:1;min-width:240px}
h2{border-bottom:2px solid var(--coral)}.card{border-top:3px solid var(--coral)}
footer{background:var(--charcoal);color:#c9c6bf;border-top:none}
@media(max-width:560px){nav a{margin-left:.6rem;font-size:.85rem}.hero-logo{width:84px;height:84px;padding:14px}}
.btn{display:inline-block;background:var(--coral);color:#fff;text-decoration:none;font-family:system-ui,sans-serif;padding:.7rem 1.3rem;border-radius:6px;font-weight:600}.btn:hover{background:var(--accent)}.back{font-family:system-ui,sans-serif;font-size:.9rem}
.follow{font-family:system-ui,sans-serif;font-size:.95rem;margin-top:1rem}.follow a{margin-right:1rem;text-decoration:none}