/* Reset & Base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;line-height:1.7;color:#333;background:#fff}
img{max-width:100%;height:auto}
a{color:#2a7d4f;text-decoration:none;transition:color .2s}
a:hover{color:#1a5c38;text-decoration:underline}

/* Layout */
.container{max-width:900px;margin:0 auto;padding:0 20px}
header{background:#1a3c2a;color:#fff;padding:15px 0;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.15)}
header .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
header h1{font-size:1.3rem;font-weight:700}
header h1 a{color:#fff}
header h1 a:hover{text-decoration:none;color:#a5d6b8}
nav{display:flex;gap:8px;flex-wrap:wrap}
nav a{color:#c8e6d4;font-size:.85rem;padding:4px 10px;border-radius:4px;transition:background .2s,color .2s}
nav a:hover,nav a.active{background:rgba(255,255,255,.15);color:#fff;text-decoration:none}

/* Hero */
.hero{background:linear-gradient(135deg,#1a3c2a 0%,#2a7d4f 100%);color:#fff;padding:50px 0 40px;text-align:center}
.hero h2{font-size:2rem;margin-bottom:12px;font-weight:700}
.hero p{font-size:1.1rem;max-width:650px;margin:0 auto;opacity:.92;line-height:1.6}

/* Article */
article{padding:40px 0 60px}
article h1{font-size:1.9rem;color:#1a3c2a;margin-bottom:8px;line-height:1.3}
article .meta{color:#777;font-size:.85rem;margin-bottom:25px}
article h2{font-size:1.45rem;color:#1a3c2a;margin:35px 0 12px;padding-bottom:6px;border-bottom:2px solid #e8f5e9}
article h3{font-size:1.15rem;color:#2a7d4f;margin:22px 0 8px}
article p{margin-bottom:16px}
article ul,article ol{margin:0 0 18px 24px}
article li{margin-bottom:6px}
blockquote{border-left:4px solid #2a7d4f;margin:20px 0;padding:12px 20px;background:#f1f8f4;border-radius:0 6px 6px 0;font-style:italic;color:#555}

/* Cards grid */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:30px 0}
.card{border:1px solid #e0e0e0;border-radius:8px;padding:22px;transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:0 4px 16px rgba(0,0,0,.1);transform:translateY(-2px)}
.card h3{color:#1a3c2a;margin-bottom:8px;font-size:1.1rem}
.card p{font-size:.92rem;color:#555;margin-bottom:12px}
.card a{font-weight:600;font-size:.9rem}

/* Info box */
.info-box{background:#f1f8f4;border:1px solid #c8e6d4;border-radius:8px;padding:18px 22px;margin:20px 0}
.info-box h4{color:#1a3c2a;margin-bottom:6px}
.info-box a{font-weight:600}

/* Cocon links */
.cocon-links{background:#fafafa;border:1px solid #e8e8e8;border-radius:8px;padding:22px;margin:35px 0}
.cocon-links h3{color:#1a3c2a;margin-bottom:12px;font-size:1.1rem}
.cocon-links ul{list-style:none;margin:0;padding:0}
.cocon-links li{margin-bottom:8px;padding-left:18px;position:relative}
.cocon-links li::before{content:"\2192";position:absolute;left:0;color:#2a7d4f}

/* Footer */
footer{background:#1a3c2a;color:#c8e6d4;padding:25px 0;text-align:center;font-size:.85rem}
footer a{color:#a5d6b8}
footer p{margin-bottom:4px}

/* Table */
table{width:100%;border-collapse:collapse;margin:18px 0}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid #e0e0e0}
th{background:#f1f8f4;color:#1a3c2a;font-weight:600}
tr:hover{background:#fafafa}

/* Responsive */
@media(max-width:600px){
  header .container{flex-direction:column;gap:8px}
  nav{justify-content:center}
  .hero h2{font-size:1.5rem}
  .hero p{font-size:1rem}
  article h1{font-size:1.5rem}
  article h2{font-size:1.25rem}
}