:root{--bg:#fffaf3;--ink:#1d1b2f;--muted:#6b6880;--accent:#ff8a5b;--card:#ffffff;--line:#efe6da}
@media (prefers-color-scheme:dark){:root{--bg:#15131f;--ink:#f3eee8;--muted:#a7a2b8;--card:#1e1b2c;--line:#2b2740}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:inherit}
.top{display:flex;justify-content:space-between;align-items:center;max-width:1100px;margin:0 auto;padding:22px 20px}
.logo{font-weight:800;font-size:20px;text-decoration:none;display:flex;align-items:center;gap:8px}
.dot{width:14px;height:14px;border-radius:50%;background:var(--accent);display:inline-block}
nav a{margin-left:22px;text-decoration:none;color:var(--muted)}
nav a:hover{color:var(--ink)}
main{max-width:1100px;margin:0 auto;padding:0 20px}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;padding:60px 0 40px}
.kicker{text-transform:uppercase;letter-spacing:.12em;font-size:13px;color:var(--accent);font-weight:700;margin:0}
h1{font-size:clamp(34px,5vw,56px);line-height:1.08;margin:12px 0 18px}
.lead{color:var(--muted);max-width:34em}
.btn{display:inline-block;margin-top:14px;padding:12px 22px;border-radius:999px;background:var(--ink);color:var(--bg);text-decoration:none;font-weight:600}
.hero-art{aspect-ratio:1/1;max-width:340px;justify-self:center;animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-10px) rotate(-2deg)}}
h2{font-size:28px;margin:70px 0 22px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:14px 14px 4px}
.card h3{margin:12px 4px 2px;font-size:18px}
.card p{margin:0 4px 12px;color:var(--muted);font-size:15px}
.thumb{aspect-ratio:4/3;border-radius:12px}
.t1{background:linear-gradient(135deg,#7bc47f,#2f6e5b)}
.t2{background:linear-gradient(135deg,#3b3f8f,#e86a92)}
.t3{background:linear-gradient(135deg,#ffd166,#06d6a0)}
.t4{background:linear-gradient(135deg,#4cc9f0,#4361ee)}
.t5{background:linear-gradient(135deg,#f77f00,#d62828)}
.t6{background:linear-gradient(135deg,#e9c46a,#8d5b4c)}
.services ul{padding-left:20px}
.services li{margin:8px 0}
.about p,.contact p{max-width:42em;color:var(--muted)}
footer{max-width:1100px;margin:80px auto 0;padding:30px 20px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
@media (max-width:760px){.hero{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}nav a{margin-left:12px}}
@media (max-width:480px){.grid{grid-template-columns:1fr}nav{display:none}}