/* BAKU ZOO — HOME. Bright wild-nature landing. */

/* ---------- HERO ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding: calc(var(--header-h) + 3rem) 0 4rem; overflow: hidden; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -3; background: center/cover no-repeat; }
.hero::after { content:""; position:absolute; inset:0; z-index:-2; background: linear-gradient(180deg, rgba(8,20,14,.35) 0%, rgba(8,20,14,.15) 35%, rgba(8,20,14,.85) 100%); }
.hero-inner { width: min(100% - 2.4rem, var(--maxw)); margin-inline: auto; color: #fff; }
.hero .kicker { color: #fff; }
.hero .kicker::before { background: var(--coral); }
.hero h1 { font-size: clamp(2.6rem, 1.6rem + 5.5vw, 5.6rem); color: #fff; max-width: 16ch; text-shadow: 0 10px 40px rgba(0,0,0,.4); }
.hero-sub { max-width: 56ch; margin: 1.4rem 0 2rem; font-size: clamp(1.05rem,1rem+.5vw,1.3rem); color: rgba(255,255,255,.92); }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-scroll { position:absolute; inset-block-end:1.4rem; inset-inline-end:2rem; z-index:1; color: rgba(255,255,255,.8); font-size:.64rem; letter-spacing:.28em; text-transform:uppercase; writing-mode: vertical-rl; }

/* ---------- STATS ---------- */
.stats { background: var(--forest); color: #fff; }
.stats .container { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; }
.stat { padding: 2.2rem 1.4rem; text-align: center; position: relative; }
.stat + .stat::before { content:""; position:absolute; inset-block:20% ; inset-inline-start:0; width:1px; background: rgba(255,255,255,.18); }
.stat-v { font-family: var(--f-display); font-weight: 900; font-size: clamp(2.2rem,1.6rem+2vw,3.4rem); line-height:1; color: #fff; }
.stat-v .u { color: var(--sand); }
.stat-l { font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; opacity:.85; margin-top:.5rem; }
@media (max-width:680px){ .stats .container{ grid-template-columns:1fr 1fr; } .stat+.stat::before{display:none} }

/* ---------- INTRO ---------- */
.intro { padding: clamp(4rem,8vw,7rem) 0; }
.intro-grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
.intro-media { border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--shadow); position: relative; }
.intro-media img { width:100%; aspect-ratio: 5/4; object-fit:cover; }
.intro-copy h2 { font-size: clamp(1.9rem,1.4rem+2.2vw,3rem); color: var(--ink); margin:1rem 0 1.2rem; }
.intro-copy p { color: var(--ink-soft); margin-bottom: 1rem; }
@media (max-width:820px){ .intro-grid{ grid-template-columns:1fr; } .intro-media{ order:-1 } }

/* ---------- HIGHLIGHTS (flagship animals) ---------- */
.highlights { padding: clamp(4rem,8vw,7rem) 0; background: var(--bg-2); }
.hl-head { text-align:center; max-width:60ch; margin:0 auto 2.8rem; }
.hl-head .kicker { justify-content:center; }
.hl-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:1.4rem; }
@media (max-width:900px){ .hl-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .hl-grid{ grid-template-columns:1fr; } }
.hl-card { position:relative; border-radius: var(--r); overflow:hidden; aspect-ratio: 3/4; box-shadow: var(--shadow); display:block; }
.hl-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease); }
.hl-card:hover img { transform: scale(1.07); }
.hl-card::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 40%, rgba(8,20,14,.85)); }
.hl-cap { position:absolute; inset-block-end:0; inset-inline:0; z-index:2; padding:1.3rem; color:#fff; }
.hl-cap h3 { color:#fff; font-size:1.3rem; }
.hl-cap p { font-size:.85rem; opacity:.9; margin-top:.2rem; }

/* ---------- ZONES ---------- */
.zones { padding: clamp(4rem,8vw,7rem) 0; }
.zones .section-head { text-align:center; margin:0 auto 2.6rem; } .zones .section-head .kicker{ justify-content:center; }
.zones-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1.5rem; }
@media (max-width:820px){ .zones-grid{ grid-template-columns:1fr; } }
.zone-card { background: var(--bg-card); border:1px solid var(--line-soft); border-radius: var(--r); padding:2rem; box-shadow: var(--shadow); transition: transform .4s var(--ease); }
.zone-card:hover { transform: translateY(-6px); }
.zone-ic { width:56px; height:56px; border-radius:14px; display:grid; place-items:center; background: var(--leaf-soft); color: var(--forest); margin-bottom:1.1rem; }
.zone-ic svg { width:28px; height:28px; }
.zone-card h3 { font-size:1.35rem; color:var(--ink); margin-bottom:.5rem; }
.zone-card p { color: var(--ink-soft); font-size:.95rem; }
.zones .more { text-align:center; margin-top:2.4rem; }

/* ---------- CONSERVATION band ---------- */
.conserv { position: relative; padding: clamp(4rem,8vw,7rem) 0; background: linear-gradient(120deg, var(--teal-dp), var(--teal)); color:#fff; overflow:hidden; isolation:isolate; }
.conserv::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.12; background: radial-gradient(circle at 80% 20%, #fff, transparent 40%); }
.conserv-grid { display:grid; grid-template-columns: 1.2fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.conserv h2 { color:#fff; font-size: clamp(1.9rem,1.4rem+2vw,3rem); margin:1rem 0 1.2rem; }
.conserv .kicker { color:#fff; } .conserv .kicker::before{ background: var(--sand); }
.conserv p { color: rgba(255,255,255,.92); margin-bottom: 1.6rem; }
.conserv-badge { text-align:center; background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); border-radius: var(--r-lg); padding: 2.4rem; }
.conserv-badge .n { font-family:var(--f-display); font-weight:900; font-size: clamp(3rem,2rem+4vw,5rem); line-height:1; color: var(--sand); }
.conserv-badge .t { margin-top:.6rem; font-size:1rem; opacity:.95; }
@media (max-width:760px){ .conserv-grid{ grid-template-columns:1fr; } }

/* ---------- VISIT teaser ---------- */
.visit { padding: clamp(4rem,8vw,7rem) 0; background: var(--bg-2); }
.visit-card { background: var(--coral); color:#fff; border-radius: var(--r-lg); padding: clamp(2.4rem,5vw,4rem); text-align:center; box-shadow: 0 24px 50px -24px rgba(214,62,105,.6); }
.visit-card .kicker{ color:#fff; justify-content:center; } .visit-card .kicker::before{ background:#fff; }
.visit-card h2 { color:#fff; font-size: clamp(1.9rem,1.4rem+2vw,3rem); margin:1rem 0 .8rem; }
.visit-card p { color: rgba(255,255,255,.95); max-width: 50ch; margin: 0 auto 1.8rem; }
.visit-card .btn-light { background:#fff; color: var(--coral-dp); }
.visit-card .btn-light:hover { transform: translateY(-3px); }