:root{--tomato:#F04A32;--saffron:#FFC23D;--basil:#1F7A4D;--plum:#7B3FA0;--ink:#1D1410;--muted:#6B5C55;--bg:#FFF3EC;--card:#fff}
*{box-sizing:border-box}body{margin:0;font-family:"DM Sans",system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;line-height:1.15}a{color:var(--tomato)}
header{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;max-width:1040px;margin:auto}
.logo{font-family:Fraunces,serif;font-size:26px;font-weight:700;color:var(--tomato);text-decoration:none}
nav a{margin-left:18px;color:var(--ink);text-decoration:none;font-weight:500}nav a:hover{color:var(--tomato)}
main{max-width:820px;margin:auto;padding:12px 24px 64px}
.hero{max-width:1040px;margin:auto;padding:40px 24px;display:grid;grid-template-columns:1.1fr 1fr;gap:36px;align-items:center}
.hero h1{font-size:56px;margin:0 0 16px}.hero p{font-size:19px;color:var(--muted)}
.hero img{width:100%;border-radius:28px;box-shadow:0 20px 50px rgba(240,74,50,.25);aspect-ratio:4/5;object-fit:cover}
.btn{display:inline-block;background:var(--tomato);color:#fff;padding:14px 26px;border-radius:999px;text-decoration:none;font-weight:700}
.features{max-width:1040px;margin:auto;padding:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.card{background:var(--card);border-radius:22px;padding:22px}.card .e{font-size:30px}
.c1{border-top:6px solid var(--tomato)}.c2{border-top:6px solid var(--saffron)}.c3{border-top:6px solid var(--basil)}.c4{border-top:6px solid var(--plum)}
.todo{background:#FFF0B3;border:2px dashed #E0A800;padding:2px 6px;border-radius:6px}
.note{background:var(--card);border-left:5px solid var(--saffron);padding:14px 18px;border-radius:12px}
table{border-collapse:collapse;width:100%;background:#fff;border-radius:12px;overflow:hidden}td,th{padding:10px;border-bottom:1px solid #f1e3da;text-align:left;vertical-align:top}
footer{text-align:center;color:var(--muted);padding:30px;font-size:14px}footer a{margin:0 8px;color:var(--muted)}
@media(max-width:760px){.hero{grid-template-columns:1fr}.hero h1{font-size:40px}nav a{margin-left:10px;font-size:14px}}