/* BAKU ZOO — ZONES. Colourful card grid of park areas. */
.page-hero { position: relative; min-height: 54vh; display:flex; align-items:flex-end; padding: calc(var(--header-h) + 4rem) 0 3rem; text-align: center; overflow:hidden; isolation:isolate; }
.page-hero::before { content:""; position:absolute; inset:0; z-index:-2; background: url('../img/gen/hero.jpg') center/cover; }
.page-hero::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(10,30,20,.35) 0%, rgba(10,30,20,.4) 50%, rgba(10,30,20,.85) 100%); }
.page-hero .container { position: relative; }
.page-hero .kicker { justify-content:center; margin-bottom:1rem; color:#fff; }
.page-hero h1 { font-size: clamp(2.2rem,1.6rem+3.6vw,4.2rem); color: #fff; text-shadow: 0 8px 30px rgba(0,0,0,.4); }
.page-hero p { max-width: 60ch; margin: 1.1rem auto 0; color: rgba(255,255,255,.92); }

.zsec { padding: clamp(3.5rem,7vw,6rem) 0; }
.zgrid { display:grid; grid-template-columns: repeat(3,1fr); gap:1.6rem; }
@media (max-width:900px){ .zgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .zgrid{ grid-template-columns:1fr; } }
.zcard { background: var(--bg-card); border-radius: var(--r-lg); padding: 2.2rem; box-shadow: var(--shadow); position: relative; overflow:hidden; transition: transform .4s var(--ease); border-top: 5px solid var(--leaf); }
.zcard:nth-child(2){ border-top-color: var(--teal); } .zcard:nth-child(3){ border-top-color: var(--coral); }
.zcard:nth-child(4){ border-top-color: var(--sand-dp); } .zcard:nth-child(5){ border-top-color: var(--forest); } .zcard:nth-child(6){ border-top-color: var(--teal-dp); }
.zcard:hover { transform: translateY(-6px); }
.zcard .ic { width:62px; height:62px; border-radius:16px; display:grid; place-items:center; background: var(--leaf-soft); color: var(--forest); margin-bottom:1.2rem; }
.zcard:nth-child(2) .ic{ background:#dcf0f3; color:var(--teal-dp);} .zcard:nth-child(3) .ic{ background:#fde3ea; color:var(--coral-dp);}
.zcard:nth-child(4) .ic{ background:#f6ecd2; color:var(--sand-dp);} .zcard:nth-child(6) .ic{ background:#dcf0f3; color:var(--teal-dp);}
.zcard .ic svg { width:30px; height:30px; }
.zcard h3 { font-size:1.4rem; color: var(--ink); margin-bottom:.6rem; }
.zcard p { color: var(--ink-soft); font-size:.95rem; }
.zcta { text-align:center; margin-top:2.6rem; }