:root{
  --primary:#2E7D32; --secondary:#0288D1; --accent:#F9A825; --bg:#FAFAFA; --text:#212121;
  --space-1:.5rem; --space-2:.75rem; --space-3:1rem; --space-4:1.5rem; --space-5:2rem; --space-6:3rem;
  --radius-lg:16px; --shadow:0 8px 20px rgba(0,0,0,.06); --maxw:1100px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Open Sans",Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.6}
h1,h2,h3{font-family:Roboto,Arial,sans-serif;line-height:1.3;margin:0 0 var(--space-3)}
h1{font-size:36px} h2{font-size:28px} p{margin:0 0 var(--space-3)}
a{color:var(--secondary);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-3)}
.header{background:#fff;box-shadow:var(--shadow);position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) 0}
.brand{display:flex;align-items:center;gap:var(--space-2);font-weight:800;font-size:1.25rem;letter-spacing:.3px;color:#FFD700;text-shadow:1px 1px 2px #000}
.brand-logo{height:48px;width:auto;display:inline-block;border-radius:8px;vertical-align:middle;filter:drop-shadow(0 .5px 1px rgba(0,0,0,.28))}
#nav-toggle{display:none}
.nav{display:flex;gap:var(--space-4);align-items:center}
.nav a{color:var(--text);padding:.5rem .75rem;border-radius:10px}
.nav a.active,.nav a:hover{background:rgba(46,125,50,.10)}
.hamburger{display:none;cursor:pointer;padding:.25rem .5rem;border-radius:8px;border:1px solid rgba(0,0,0,.08)}
.hero{background:linear-gradient(180deg,rgba(46,125,50,.08),rgba(2,136,209,.06));padding:var(--space-6) 0 var(--space-5);border-bottom:1px solid rgba(0,0,0,.06)}
.hero .actions{display:flex;gap:var(--space-3);flex-wrap:wrap}
.btn{display:inline-block;border:none;padding:.8rem 1.2rem;border-radius:999px;font-weight:700;text-decoration:none;cursor:pointer}
.btn-primary{background:var(--primary);color:#fff}
.btn-secondary{background:#fff;color:var(--secondary);border:2px solid var(--secondary)}
.btn-primary:hover{filter:brightness(.95)} .btn-secondary:hover{background:rgba(2,136,209,.06)}
.section{padding:var(--space-6) 0} .muted{color:#555}
.grid-2{display:grid;gap:var(--space-4);grid-template-columns:repeat(2,1fr)}
.grid-3{display:grid;gap:var(--space-4);grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow);border:1px solid rgba(0,0,0,.04)}
.badge{display:inline-block;padding:.25rem .6rem;border-radius:999px;font-size:.8rem;background:rgba(249,168,37,.15);color:#8b5d00}
.breadcrumbs{font-size:.9rem;margin:var(--space-3) 0;color:#555}
.breadcrumbs a{color:inherit} .breadcrumbs .sep{margin:0 .35rem}
.highlight{background:#fff;border-left:6px solid var(--accent);padding:var(--space-4);border-radius:10px;box-shadow:var(--shadow)}
.footer{background:#333;color:#e9f3ea;padding:var(--space-5) 0;margin-top:var(--space-6)}
.footer a{color:#cfe8ff}
.footer .cols{display:grid;gap:var(--space-4);grid-template-columns:repeat(3,1fr)}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin:.35rem 0}
.form{display:grid;gap:var(--space-3)}
.form input,.form textarea{width:100%;padding:.9rem 1rem;border-radius:10px;border:1px solid rgba(0,0,0,.15);background:#fff}
.form button{width:max-content}
.figure{background:#fff;border-radius:var(--radius-lg);padding:var(--space-3);border:1px dashed rgba(0,0,0,.15);text-align:center;font-size:.95rem;color:#666}
.lottie-wrap{width:100%;max-width:420px;height:260px;margin:0 auto var(--space-3)}
@media (max-width:900px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .brand-logo{height:40px}
  .nav{display:none;position:absolute;top:64px;right:var(--space-3);left:var(--space-3);background:#fff;box-shadow:var(--shadow);border-radius:12px;padding:var(--space-3);flex-direction:column}
  #nav-toggle:checked ~ .nav{display:flex}
  .hamburger{display:inline-flex;align-items:center;gap:.5rem}
}
@media (max-width:600px){
  .container{padding:0 var(--space-2)}
  h1{font-size:28px}
  h2{font-size:22px}
  .hero{padding:var(--space-5) 0 var(--space-4)}
  .btn{padding:.7rem 1rem}
  .lottie-wrap{height:220px;max-width:360px}
}
@media print{.header,.hero .actions,.footer{display:none !important} a[href]:after{content:" (" attr(href) ")";font-size:.8em}}

.cs-anim{width:100%;max-width:420px;height:auto;display:block;margin:0 auto var(--space-3)}