:root{
  --teal:#004d4d;
  --coral:#ff6f61;
  --ink:#222;
  --bg:#ffffff;
  --soft:#f9fdfd;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; color:var(--ink); background:var(--bg); line-height:1.6}

header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid #eee}
.header-inner{display:flex;align-items:center;justify-content:space-between;max-width:1100px;margin:0 auto;padding:0.8rem 1rem}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--teal)}
.logo img{height:36px}
nav a{color:#333;text-decoration:none;margin-left:1.2rem;position:relative}
nav a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--coral);transition:width .25s ease}
nav a:hover::after{width:100%}
nav a:hover{color:var(--teal)}

.hero{display:grid;grid-template-columns:1.1fr 0.9fr;gap:2rem;align-items:center;max-width:1100px;margin:0 auto;padding:3rem 1rem;background:var(--soft)}
.hero h1{font-size:2.2rem;line-height:1.25;margin:0 0 .5rem;color:var(--teal);opacity:0;transform:translateY(12px);animation:fadeUp .7s .1s forwards}
.hero p{max-width:52ch;opacity:0;transform:translateY(12px);animation:fadeUp .7s .25s forwards}
.hero .cta{margin-top:1rem;display:inline-block;padding:.8rem 1.2rem;background:var(--teal);color:#fff;border-radius:10px;text-decoration:none;box-shadow:0 2px 8px rgba(0,0,0,.08);transition:transform .2s, background .2s}
.hero .cta:hover{transform:translateY(-2px);background:var(--coral)}
.hero img{width:100%;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.08);opacity:0;transform:translateX(12px);animation:fadeInRight .8s .15s forwards}

.section{max-width:1100px;margin:0 auto;padding:3rem 1rem}
.section h2{color:var(--teal);margin:0 0 1rem 0}

.cards{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:1rem}
.card{background:#fff;border:1px solid #eee;border-radius:14px;padding:1.2rem;transition:transform .2s, box-shadow .2s; text-decoration:none;color:inherit}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.card img{height:72px}
.card h3{margin:.8rem 0 .4rem 0;color:var(--teal);font-size:1.05rem}
.card p{margin:0;color:#444}

.blog-grid{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:1rem}
.post{background:#fff;border:1px solid #eee;border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s, box-shadow .2s}
.post:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.08)}
.post img{width:100%;height:170px;object-fit:cover}
.post .content{padding:1rem}
.post h3{margin:.6rem 0 .4rem 0;color:var(--teal)}
.post p{margin:0;color:#444}

.footer{background:var(--teal);color:#fff}
.footer .inner{max-width:1100px;margin:0 auto;padding:1.4rem 1rem;text-align:center}

.form{max-width:720px;margin:0 auto}
input, textarea{width:100%;padding:.8rem;border:1px solid #ddd;border-radius:10px;margin:.5rem 0;transition:box-shadow .2s,border-color .2s}
input:focus, textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 4px rgba(0,77,77,.08)}
button.btn{padding:.9rem 1.2rem;border:none;border-radius:10px;background:var(--teal);color:#fff;cursor:pointer;transition:transform .2s, background .2s}
button.btn:hover{transform:translateY(-2px);background:var(--coral)}

.back{display:inline-block;margin-top:1rem;text-decoration:none;color:var(--teal)}
.back:hover{color:var(--coral)}

@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
@keyframes fadeInRight{to{opacity:1;transform:translateX(0)}}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .blog-grid{grid-template-columns:1fr}
}