:root{
  --bg:#0b0b0e;
  --bg2:#0f1016;
  --card:#12131a;
  --text:#f2f3f7;
  --muted:#b7bac7;
  --line:rgba(255,255,255,.08);
  --shadow:0 18px 60px rgba(0,0,0,.55);
  --accent:#f6c343;
  --radius:18px;
  --radius2:26px;
  --max:1280px;
}

*{box-sizing:border-box}
html,body{height:100%}
html{background:#0b0b0e}

/* Hide scrollbars while keeping scroll functionality */
html, body{scrollbar-width:none; -ms-overflow-style:none;}
*{scrollbar-width:inherit; -ms-overflow-style:inherit;}
*::-webkit-scrollbar{display:none; height:0; width:0;}

/* Mobile safety nets (desktop unaffected) */
img, video, canvas, svg{max-width:100%;height:auto}


body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background: #0b0b0e;
  position:relative;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
}

body::before{
  content:"";
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:70vh;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 18% -12%, rgba(255,59,212,.18), transparent 62%),
    radial-gradient(900px 700px at 85% -8%, rgba(52,210,255,.16), transparent 62%),
    radial-gradient(700px 520px at 52% 8%, rgba(246,195,67,.14), transparent 60%),
    linear-gradient(180deg, rgba(11,11,14,.98) 0%, rgba(11,11,14,0) 85%);
}
body > *{position:relative; z-index:1;}

.wildlifePage .pageIntro{max-width: 72ch}
.wildlifeHero{
  padding: 10px 0 20px;
}
.wildlifeHeroGrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:20px;
  align-items:stretch;
}
.wildlifeBadges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.wildlifeBadges span{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(242,243,247,.86);
}
.wildlifeHeroCard{
  border:1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background: rgba(10,10,14,.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding:18px;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
}
.wildlifeHeroMeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color: rgba(242,243,247,.7);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  margin-bottom:10px;
}
.wildlifeHeroCard h3{
  margin:0 0 8px;
  font-size:16px;
}
.wildlifeHeroCard p{
  margin:0;
  color: rgba(242,243,247,.74);
  font-size:13px;
  line-height:1.5;
}
.wildlifeHeroFooter{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:14px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(242,243,247,.68);
}
.wildlifeHighlights .grid{margin-top:8px}
.wildlifeIndex .pageIntro{margin-bottom:14px}
.wildlifeIndexGrid{
  column-count: 3;
  column-gap: 12px;
}
.wildlifeDetail{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(12,12,16,.65);
  padding: 12px 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,.3);
  break-inside: avoid;
  display:inline-block;
  width:100%;
  margin: 0 0 12px;
}
.wildlifeDetail summary{
  cursor:pointer;
  list-style:none;
  font-size:13px;
  letter-spacing:.03em;
  text-transform:none;
}
.wildlifeDetail summary::-webkit-details-marker{display:none}
.wildlifeDetail summary::after{
  content:"+";
  float:right;
  color: rgba(246,195,67,.8);
  font-weight:700;
}
.wildlifeDetail[open] summary::after{
  content:"-";
}
.wildlifeTags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:8px 0 0;
}
.tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 8px;
  border-radius:999px;
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(242,243,247,.86);
}
.tagSafe{border-color: rgba(120,220,160,.45); color: rgba(190,255,220,.9); background: rgba(120,220,160,.12)}
.tagCaution{border-color: rgba(246,195,67,.55); color: rgba(255,230,170,.95); background: rgba(246,195,67,.12)}
.tagDanger{border-color: rgba(255,120,120,.6); color: rgba(255,190,190,.95); background: rgba(255,120,120,.12)}
.tagProtected{border-color: rgba(96,180,255,.55); color: rgba(200,235,255,.95); background: rgba(96,180,255,.12)}
.tagCommon{border-color: rgba(255,255,255,.25); color: rgba(242,243,247,.82); background: rgba(255,255,255,.06)}
.tagUncommon{border-color: rgba(200,200,220,.35); color: rgba(220,224,235,.85); background: rgba(255,255,255,.04)}
.tagRare{border-color: rgba(180,160,255,.45); color: rgba(215,205,255,.9); background: rgba(180,160,255,.12)}
.tagSeasonal{border-color: rgba(120,200,255,.4); color: rgba(210,235,255,.9); background: rgba(120,200,255,.1)}
.wildlifeDetail p{
  margin:10px 0 0;
  color: rgba(242,243,247,.75);
  font-size:12px;
  line-height:1.55;
}


a{color:inherit;text-decoration:none}

/* Site notice banner */
.siteBanner{
  position:relative;
  z-index:2;
  background: linear-gradient(90deg, rgba(42,30,18,.98), rgba(20,38,46,.98));
  border-bottom:1px solid rgba(255,255,255,.12);
}
.siteBanner .wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:8px 14px;
}
.siteBanner p{
  margin:0;
  font-size:15px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.siteBanner a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(246,195,67,.7);
  background: rgba(246,195,67,.18);
  transition: transform .14s ease, background .18s ease, border-color .18s ease;
}
.siteBanner .donateLink{
  border-color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.16);
  color: #fff6d1;
  box-shadow: 0 10px 20px rgba(0,0,0,.25);
}
.siteBanner a:hover{
  transform: translateY(-1px);
  background: rgba(246,195,67,.28);
  border-color: rgba(246,195,67,.9);
}
.siteBanner .donateLink:hover{
  background: rgba(255,255,255,.24);
  border-color: rgba(255,255,255,.7);
}

@media (max-width: 720px){
  .siteBanner .wrap{
    flex-direction:column;
    align-items:flex-start;
  }
}

:focus-visible{
  outline: 3px solid rgba(246,195,67,.55);
  outline-offset: 3px;
}

button{font:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 18px}

.reveal{
  opacity:0;
  transform: translateY(10px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
.reveal.in{opacity:1;transform:none}

/* Slower hero banner reveal */
.heroStage.reveal,
.heroStage .reveal{
  transition: opacity 1.1s ease, transform 1.1s ease;
}

@keyframes floaty{
  0%{transform: translateY(0)}
  50%{transform: translateY(-2px)}
  100%{transform: translateY(0)}
}

.portalTop{
  position:sticky;
  top:0;
  z-index:60;
  background: rgba(10,10,14,.60);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.portalTopInner{
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.portalBrand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  flex:0 0 auto;
}

.portalBrand img{
  height:34px;
  width:auto;
  display:block;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}

.portalBrandBadge{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(242,243,247,.80);
  white-space:nowrap;
}

.portalNavWrap{
  position:relative;
  flex:1 1 auto;
  min-width:0;
}

.portalNavWrap::before,
.portalNavWrap::after{
  content:"";
  position:absolute;
  top:0;bottom:0;
  width:28px;
  pointer-events:none;
  z-index:2;
}

.portalNavWrap::before{
  left:0;
  background: linear-gradient(to right, rgba(10,10,14,.92), rgba(10,10,14,0));
}
.portalNavWrap::after{
  right:0;
  background: linear-gradient(to left, rgba(10,10,14,.92), rgba(10,10,14,0));
}

.portalNav{
  display:flex;
  gap:10px;
  align-items:center;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  -webkit-overflow-scrolling: touch;
  padding: 0 22px;
}
.portalNav::-webkit-scrollbar{height:0}

.portalNav a{
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(242,243,247,.82);
  padding:10px 10px;
  border-radius:999px;
  transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
  flex:0 0 auto;
}
.portalNav a:hover{
  background: rgba(255,255,255,.06);
  color:var(--text);
  transform: translateY(-1px);
}
.portalNav a.active{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}

.portalRight{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  white-space:nowrap;
}

.portalChip{
  font-size:12px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(242,243,247,.84);
  white-space:nowrap;
}

.portalBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(242,243,247,.92);
  cursor:pointer;
  transition: background .18s ease, border-color .18s ease, transform .12s ease, filter .18s ease;
  line-height:1;
  min-height: 36px;
  user-select:none;
}
.portalBtn:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  transform: translateY(-1px);
}
.portalBtn:active{
  transform: translateY(0);
}
.portalBtn.primary{
  border-color: rgba(246,195,67,.36);
  background: rgba(246,195,67,.14);
}
.portalBtn.primary:hover{
  background: rgba(246,195,67,.20);
  border-color: rgba(246,195,67,.52);
}

.portalBtn.music{
  min-width:126px;
  text-align:center;
}
.portalBtn.music .on{display:none}
.portalBtn.music.isOn{
  border-color: rgba(52,210,255,.30);
  background: rgba(52,210,255,.10);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.portalBtn.music.isOn .off{display:none}
.portalBtn.music.isOn .on{display:inline}

.heroStage{
  position: relative;
  width:100%;
  height: clamp(480px, 58vh, 640px);
  overflow:hidden;
  background: transparent;
}

.heroStage img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: 50% 5%;
  filter: brightness(1.08) contrast(1.06) saturate(1.06);
  display:block;
  transform: scale(1.02);
  opacity:1;
  transition: opacity 1.5s ease-in-out;
  animation: heroBreathe 16s ease-in-out infinite;
  -webkit-mask-image: radial-gradient(120% 92% at 50% 34%, rgba(0,0,0,1) 62%, rgba(0,0,0,.78) 78%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(120% 92% at 50% 34%, rgba(0,0,0,1) 62%, rgba(0,0,0,.78) 78%, rgba(38, 128, 128, 0) 100%);
}
.heroStage img.heroFadeOut{
  opacity:0;
}

@keyframes heroBreathe{
  0%{ transform: scale(1.02); filter: brightness(1.06) contrast(1.06) saturate(1.04); }
  50%{ transform: scale(1.045); filter: brightness(1.12) contrast(1.08) saturate(1.1); }
  100%{ transform: scale(1.02); filter: brightness(1.06) contrast(1.06) saturate(1.04); }
}

.heroStage::after{
  content:"";
  position:absolute;
  inset:-2px; /* overscan to prevent 1px seams */
  transform: translateZ(0);
  background:
    radial-gradient(1200px 700px at 18% 18%, rgba(255,59,212,.10), rgba(255,59,212,0) 66%),
    radial-gradient(900px 520px at 78% 20%, rgba(52,210,255,.08), rgba(52,210,255,0) 70%),
    linear-gradient(
      180deg,
      rgba(240, 29, 29, 0) 10%,
      rgba(10,12,16,0.12) 50%,
      rgba(79, 100, 141, 0.28) 68%,
      rgba(16, 18, 26, 0.78) 82%,
      rgba(15, 16, 22, 1) 100%
    );
  pointer-events:none;
}


.heroStageInner{
  max-width: var(--max);
  margin:0 auto;
  padding:0 18px;
  height:100%;
  position:relative;
  display:grid;
  align-items:end;
}

.heroStageGrid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:16px;
  padding-bottom: 18px;
}

.heroLogoBlock{
  display:flex;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
  animation: floaty 5s ease-in-out infinite;
}

.heroLogoBlock img{
  width: min(360px, 78vw);
  height:auto;
  filter: drop-shadow(0 16px 36px rgba(0,0,0,.55));
}

.heroTag{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:10px;
}

.heroTag span{
  font-size:12px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(242,243,247,.82);
  letter-spacing:.10em;
  text-transform:uppercase;
}

.heroGlass{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  background: rgba(10,10,14,.54);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 30px 110px rgba(0,0,0,.70);
  overflow:hidden;
}

.heroGlass .pad{padding:22px}

.heroOverline{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: rgba(242,243,247,.78);
}

.dot{
  width:8px;height:8px;border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 0 6px rgba(246,195,67,.12);
}

.heroTitle{
  margin: 10px 0 8px;
  font-size: clamp(36px, 4.2vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.heroSub{
  margin:0;
  color: rgba(242,243,247,.80);
  font-size:15px;
  line-height:1.55;
  max-width: 62ch;
}

.heroCTA{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
}

.heroCTA .ctaPrimary,
.heroCTA .ctaAlt{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:12px 16px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:12px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.heroCTA .ctaPrimary:hover{background: rgba(255,255,255,.12);border-color: rgba(255,255,255,.22);transform: translateY(-1px)}
.heroCTA .ctaAlt{
  border-color: rgba(246,195,67,.40);
  background: rgba(246,195,67,.16);
}
.heroCTA .ctaAlt:hover{background: rgba(246,195,67,.22);border-color: rgba(246,195,67,.58);transform: translateY(-1px)}

.heroMiniControls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
  padding-top:14px;
  border-top: 1px solid rgba(255,255,255,.10);
  color: rgba(242,243,247,.72);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.progress{
  width:180px;
  height:8px;
  border-radius:999px;
  background: rgba(255,255,255,.10);
  overflow:hidden;
}
.progress > i{
  display:block;
  height:100%;
  width:42%;
  background: rgba(255,255,255,.55);
}

.featureStage{
  position:relative;
  padding: 34px 0 44px;
  margin-top: 0;
  overflow:hidden;
  background:
    radial-gradient(900px 520px at 78% 18%, rgba(52,210,255,.08), rgba(52,210,255,0) 70%),
    radial-gradient(1200px 520px at 20% 8%, rgba(255,59,212,.10), rgba(255,59,212,0) 66%),
    linear-gradient(180deg, #11131b 0%, #0f1016 100%);
}

.featureStage::before{
  content:"";
  position:absolute;
  inset: 0;
  transform: translateZ(0);
  background:
    radial-gradient(1200px 420px at 20% 0%, rgba(255,59,212,.10), rgba(255,59,212,0) 62%),
    radial-gradient(1000px 420px at 80% 0%, rgba(52,210,255,.08), rgba(52,210,255,0) 66%),
    linear-gradient(
      180deg,
      rgba(10,12,16,0.00) 0%,
      rgba(10,12,16,0.20) 38%,
      rgba(10,12,16,0.55) 78%,
      rgba(10,12,16,0.72) 100%
    );
  pointer-events:none;
}


.featureStage > *{position:relative;z-index:1}

.faqStage{
  position:relative;
  padding: 34px 0 44px;
  margin-top: 0;
  overflow:hidden;
  background:
    linear-gradient(180deg, #0c0d12 0%, #0e1017 45%, #0c0d12 100%);
}
.faqStage::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:120px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(12,13,18,0) 0%, rgba(12,13,18,.75) 100%);
  z-index:0;
}
.faqStage > *{position:relative; z-index:1;}
.faqHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.faqHead h2{
  font-size:18px;
}
.faqHead p{
  margin:0;
  color: rgba(242,243,247,.70);
  font-size:13px;
  max-width:62ch;
  line-height:1.45;
}
.faqGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:16px;
  align-items:start;
}
.faqItem{
  border-radius: var(--radius);
  background: rgba(12,12,16,.72);
  border:1px solid rgba(255,255,255,.10);
  padding: 14px 16px;
  box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
  align-self:start;
}
.faqItem summary{
  cursor:pointer;
  list-style:none;
  font-size:14px;
  letter-spacing:.02em;
  text-transform:none;
}
.faqItem summary::-webkit-details-marker{display:none}
.faqItem summary::after{
  content:"+";
  float:right;
  color: rgba(246,195,67,.8);
  font-weight:700;
}
.faqItem[open] summary::after{
  content:"–";
}
.faqItem p{
  margin:10px 0 0;
  color: rgba(242,243,247,.75);
  font-size:13px;
  line-height:1.6;
}

.sectionHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
h2{
  margin:0;
  font-size:20px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.sectionHead p{
  margin:0;
  color: rgba(242,243,247,.70);
  font-size:13px;
  max-width:62ch;
  line-height:1.45;
}

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}


.card{
  border: none;
  border-radius: var(--radius);
  background: rgba(12,12,16,.62);
  backdrop-filter: blur(18px);
  overflow:hidden;
  box-shadow:
    0 18px 38px rgba(0,0,0,.50),
    inset 0 1px 0 rgba(255,255,255,.04);
  transition: transform .16s ease, box-shadow .16s ease;
  will-change: transform;
}
.card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  opacity:.55;
}

.card:hover{
  transform: translateY(-3px);
  
}

.cardImg{
  width:100%;
  height:190px;
  object-fit:cover;
  display:block;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 82%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 82%, rgba(0,0,0,0) 100%);
}

.body{padding:14px}
.card h3{margin:0 0 6px;font-size:16px;letter-spacing:.02em}
.card p{margin:0 0 12px;color: rgba(242,243,247,.72);font-size:13px;line-height:1.45}
.card ul{
  margin:0 0 12px;
  padding-left:18px;
  color: rgba(242,243,247,.72);
  font-size:13px;
  line-height:1.5;
}
.card li{margin:0 0 6px}
.card li:last-child{margin-bottom:0}


.bulletinMeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: rgba(242,243,247,.64);
}
.bulletinTag{
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  font-weight:600;
}
.bulletinTag--notice{
  border-color: rgba(255,255,255,.28);
  color: rgba(242,243,247,.84);
}
.bulletinTag--advisory{
  border-color: rgba(246,195,67,.55);
  color: rgba(246,195,67,.9);
}
.bulletinTag--alert{
  border-color: rgba(255,120,120,.6);
  color: rgba(255,170,170,.9);
}
.bulletinTime{
  color: rgba(242,243,247,.62);
}

.metaRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
  color: rgba(242,243,247,.68);
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.page{padding: 26px 0}
.pageMain{max-width: var(--max); margin:0 auto; padding: 0 18px}
.pageTitle{
  margin: 8px 0 8px;
  font-size: clamp(30px, 3.6vw, 44px);
  letter-spacing: -0.02em;
}
.pageIntro{
  margin:0 0 18px;
  color: rgba(242,243,247,.78);
  line-height:1.55;
  max-width: 70ch;
}
.pageSection{padding: 18px 0}

.callout{
  border:1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(0,0,0,.16);
  padding: 14px;
}
.callout strong{
  display:block;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
}
.callout p{
  margin:8px 0 0;
  color: rgba(242,243,247,.75);
  font-size:13px;
  line-height:1.5;
}

footer{
    position:relative;
    padding: 32px 0 32px;
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: 0;
    background: linear-gradient(180deg, rgba(14,14,18,.96), rgba(7,7,10,.98));
  }
  footer::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:1px;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.18), rgba(255,255,255,0));
    opacity:.7;
  }
  .footHero{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
  }
  .footHeroTitle{
    margin:0;
    font-size: clamp(28px, 4.4vw, 48px);
    font-weight:800;
    letter-spacing:.01em;
    color: #f6f7fb;
    max-width: 20ch;
  }
  .footHeroBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: 12px 26px;
    border-radius:999px;
    background: #f7f7f9;
    color: #0c0c10;
    font-size:13px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 14px 30px rgba(0,0,0,.35);
  }
  .footHeroBtn:hover{transform: translateY(-1px)}
  .footRule{
    height:1px;
    margin: 16px 0 24px;
    background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.22), rgba(255,255,255,.06));
    opacity:.6;
  }
  .footMain{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns: minmax(240px, 1.2fr) minmax(320px, 1fr);
    gap:28px;
    align-items:start;
  }
  .footBrand{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .footLogo{
    width: 180px;
    height:auto;
  }
  .footNote{
    color: rgba(242,243,247,.72);
    font-size:12px;
    line-height:1.6;
    margin:0;
  }
  .donateCallout{
    margin:0;
    color: rgba(242,243,247,.88);
    font-size:11px;
    letter-spacing:.06em;
    text-transform:uppercase;
  }
  .footCols{
    display:grid;
    grid-template-columns: repeat(3, minmax(140px, 1fr));
    gap:18px;
  }
  .footCol h3{
    margin:0 0 12px;
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color: rgba(242,243,247,.56);
  }
  .footCol a{
    display:block;
    color: rgba(242,243,247,.82);
    font-size:13px;
    margin: 0 0 10px;
    text-decoration:none;
    transition: color .18s ease;
  }
  .footCol a:hover{color:#fff}
  .footBottom{
    margin-top: 26px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    color: rgba(242,243,247,.56);
    font-size:11px;
    letter-spacing:.04em;
  }

  @media (max-width: 980px){
  .portalBrandBadge{display:none}
  .portalChip{display:none}
  .heroStageGrid{grid-template-columns:1fr}
  .heroStage{height: clamp(520px, 76vh, 820px)}
   .grid{grid-template-columns: repeat(2, 1fr)}
  .faqGrid{grid-template-columns:1fr}
    .wildlifeHeroGrid{grid-template-columns:1fr}
    .wildlifeIndexGrid{column-count: 2}
    .footHero{
      flex-direction:column;
      align-items:flex-start;
    }
    .footHeroTitle{max-width:none}
    .footMain{grid-template-columns:1fr}
    .footCols{grid-template-columns: repeat(2, minmax(140px, 1fr))}
    .footBottom{
      flex-direction:column;
      align-items:flex-start;
    }
  }

  @media (max-width: 640px){
    .footCols{grid-template-columns:1fr}
    .footHeroBtn{width:100%}
  }

@media (max-width: 560px){
  .portalTopInner{
    flex-wrap: wrap;
    gap:10px;
  }
  .portalLeft{order:1}
  .portalMenuBtn{order:2; margin-left:auto}
  .portalNav.topbarNav{
    order:3;
    flex-basis:100%;
    justify-content:flex-start;
    padding: 6px 6px 0;
    scroll-padding-left: 6px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
  .portalNavWrap{
    flex-basis: 100%;
    order: 3;
  }
  .portalNav{
    padding: 0 14px;
  }
  .portalRight{
    order: 2;
    width: 100%;
    justify-content:flex-end;
  }
  .heroStage img{
    object-position: 50% 22%;
    -webkit-mask-image: radial-gradient(130% 95% at 50% 32%, rgba(0,0,0,1) 58%, rgba(0,0,0,.78) 76%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(130% 95% at 50% 32%, rgba(0,0,0,1) 58%, rgba(0,0,0,.78) 76%, rgba(0,0,0,0) 100%);
  }
  .heroGlass{border-radius: 22px}
  .heroGlass .pad{padding:18px}
  .progress{width: 140px}
}

/* --- Extra mobile ergonomics (desktop stays identical) --- */
@media (max-width: 720px){
  .wrap, .pageMain{padding: 0 16px}

  /* Make the hero fit smaller phone screens better */
  .heroStage{height: clamp(460px, 72vh, 720px)}
  .heroTitle{font-size: clamp(30px, 7.4vw, 48px)}
  .heroSub{font-size: 14px}

  /* Bigger, easier tap targets */
  .portalNav a{padding: 12px 12px}
  .portalBtn{min-height: 44px}
  .heroCTA .ctaPrimary,
  .heroCTA .ctaAlt{min-height: 44px}

  /* Reduce oversized media blocks */
  .cardImg{height: 170px}
}


@media (max-width: 640px){
  .grid{grid-template-columns:1fr}
  .sectionHead{flex-direction:column; align-items:flex-start}
  .sectionHead p{max-width: 100%}
  .wildlifeIndexGrid{column-count: 1}
}

@media (max-width: 420px){
  /* Stack CTAs cleanly on very small screens */
  .heroCTA{gap:10px}
  .heroCTA .ctaPrimary,
  .heroCTA .ctaAlt{width:100%}

  .heroMiniControls{flex-wrap:wrap;justify-content:flex-start}
  .progress{width: 100%}
}


@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .reveal{transition:none !important; transform:none !important; opacity:1 !important}
  .heroLogoBlock{animation:none !important}
  .portalBtn, .portalNav a, .card{transition:none !important}
}


/* =========================
   Rockstar-style Topbar
   ========================= */
.portalTop{
  background: rgba(8,8,12,.72);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.portalTopInner.topbar{
  padding: 18px 20px;
  gap: 18px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
}
.portalLeft{display:flex; align-items:center; justify-content:flex-start;}
.portalBrandCompact{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color: var(--text);
}
.portalTopLogo{
  height:34px;
  width:auto;
  display:block;
  opacity:.94;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.35));
}
.portalMark{
  display:inline-flex;
  width:40px;
  height:40px;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.portalPipe{
  width:1px;
  height:22px;
  background: rgba(255,255,255,.18);
  display:inline-block;
}
.portalSectionLabel{
  font-size:14px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: rgba(242,243,247,.92);
}

/* Center nav as tabs */
.portalNav.topbarNav{
  flex: 1 1 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  overflow-x:auto;
  padding: 0 10px;
  scrollbar-width: none;
}
.portalNav.topbarNav::-webkit-scrollbar{height:0}

.portalNav.topbarNav a{
  padding: 12px 18px;
  font-size:13px;
  letter-spacing:.10em;
  border-radius:999px;
  border:1px solid transparent;
  background: transparent;
  color: rgba(242,243,247,.82);
}
.portalNav.topbarNav a:hover{
  background: rgba(255,255,255,.06);
  transform: translateY(0);
}
.portalNav.topbarNav a.active{
  background: rgba(255,255,255,.96);
  color: rgba(10,10,14,.96);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}

/* Hamburger */
.portalMenuBtn{
  justify-self:end;
  width:52px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.portalMenuBtn:hover{background: rgba(255,255,255,.06)}
.menuIcon{
  position:relative;
  display:block;
  width:22px;
  height:14px;
  background: linear-gradient(rgba(242,243,247,.92), rgba(242,243,247,.92)) center/100% 2px no-repeat;
  transform: translateY(0);
}
.menuIcon::before,
.menuIcon::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  border-radius:2px;
  background: rgba(242,243,247,.92);
}
.menuIcon::before{top:0}
.menuIcon::after{bottom:0}

/* Full-screen Menu (Rockstar-style) */
.portalDrawer{
  position:fixed;
  inset:0;
  background: radial-gradient(1200px 600px at 20% 10%, rgba(255,255,255,.10), rgba(0,0,0,0)),
              rgba(8,8,12,.84);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  opacity:0;
  pointer-events:none;
  transform: translateY(-10px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 90;
}
.portalDrawer.open{
  opacity:1;
  pointer-events:auto;
  transform: none;
}
.portalDrawerInner{
  height:100%;
  display:flex;
  flex-direction:column;
  padding: 22px 22px 18px;
  gap: 22px;
  overflow:auto;
}

.drawerHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

.drawerTabs{
  display:flex;
  align-items:center;
  gap: 10px;
  overflow:auto;
  padding: 4px;
  scrollbar-width:none;
}
.drawerTabs::-webkit-scrollbar{height:0}
.drawerTabs a{
  text-decoration:none;
  color: rgba(242,243,247,.88);
  padding: 12px 18px;
  border-radius:999px;
  border:1px solid transparent;
  letter-spacing:.01em;
  font-weight:700;
  font-size: 15px;
  background: rgba(255,255,255,.00);
  white-space:nowrap;
}
.drawerTabs a:hover{background: rgba(255,255,255,.06)}
.drawerTabs a.active{
  background: rgba(255,255,255,.96);
  color: rgba(10,10,14,.96);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}

.drawerClose{
  width:54px;
  height:54px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(242,243,247,.92);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.drawerClose:hover{background: rgba(255,255,255,.08)}

/* Ensure the X icon is perfectly centered across browsers */
.drawerClose svg{
  width:22px;
  height:22px;
  display:block;
}

.drawerBigLinks{
  padding: 24px 6px 0;
}
.drawerBigLinks a{
  display:block;
  text-decoration:none;
  color: rgba(242,243,247,.96);
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: clamp(42px, 7vw, 86px);
  line-height: 1.02;
  padding: 6px 0;
  opacity:.96;
}
.drawerBigLinks a:hover{opacity:1; filter: drop-shadow(0 14px 40px rgba(0,0,0,.35))}

.drawerFooter{
  margin-top:auto;
  padding-top: 26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 16px;
}
.drawerFooterLeft{
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
}
.drawerFootBtn{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: rgba(242,243,247,.90);
  cursor:pointer;
  font-size: 16px;
  line-height: 1;
  min-height: 44px;
  user-select:none;
}
.drawerFootBtn:hover{background: rgba(255,255,255,.06)}

/* Drawer music button mirrors the main "Music" pill behavior */
.drawerFootBtn.drawerMusic{
  min-width: 160px;
  justify-content:center;
}
.drawerFootBtn.drawerMusic .on{display:none}
.drawerFootBtn.drawerMusic.isOn{
  border-color: rgba(52,210,255,.30);
  background: rgba(52,210,255,.10);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.drawerFootBtn.drawerMusic.isOn .off{display:none}
.drawerFootBtn.drawerMusic.isOn .on{display:inline}

/* Language icon spacing */
.drawerFootBtn .langIcon{font-size:18px; line-height:1;}

/* Optional manual motion reduction (also respects prefers-reduced-motion) */
html.reduceMotion *,
html.reduceMotion *::before,
html.reduceMotion *::after{
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html.reduceMotion .reveal{opacity:1 !important; transform:none !important;}
.drawerFootBtn .chev{
  width:10px;
  height:10px;
  border-right:2px solid rgba(242,243,247,.76);
  border-bottom:2px solid rgba(242,243,247,.76);
  transform: rotate(45deg);
  display:inline-block;
  margin-top:-2px;
}

html.drawerOpen, html.drawerOpen body{overflow:hidden}

/* Improve section title spacing (text too close to images) */
.pageSection > h2{
  margin: 0 0 18px;
  padding: 10px 6px 0;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.featureHead{margin-bottom: 18px}
.featureHead h2{margin-bottom: 10px}

/* Remove "cramped" headings on small screens */
@media (max-width: 720px){
  .portalTopInner.topbar{padding: 14px 14px}
  .portalNav.topbarNav a{padding: 10px 14px; font-size:12px}
  .pageSection > h2{margin-bottom: 14px; padding-top: 6px}
}

/* Scrollbar theme (desktop) + hide on mobile */
*{scrollbar-color: rgba(255,255,255,.20) rgba(255,255,255,.06); scrollbar-width: thin;}
*::-webkit-scrollbar{height:8px;width:8px}
*::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
  border: 2px solid rgba(10,10,14,.70);
}
*::-webkit-scrollbar-thumb:hover{background: rgba(255,255,255,.28)}
*::-webkit-scrollbar-track{background: rgba(255,255,255,.05); border-radius:999px}

@media (hover:none) and (pointer:coarse){
  *{scrollbar-width:none;}
  *::-webkit-scrollbar{width:0;height:0}
}

.pageSection{padding: 26px 0 18px}



/* === Cinematic intro === */
.vl-intro-lock, .vl-intro-lock body{
  overflow:hidden !important;
}

.vl-intro-lock .reveal.in{
  opacity:0;
  transform: translateY(14px);
}

.vl-intro-lock.vl-intro-fade .reveal.in{
  opacity:1;
  transform:none;
}

#vl-intro{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  opacity:1;
  pointer-events:auto;
}

#vl-intro .vl-intro-inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:14px;
  transform:translateY(6px) scale(.985);
  opacity:0;
  filter:blur(0.2px);
}

#vl-intro .vl-intro-logo{
  width:min(320px, 62vw);
  height:auto;
  opacity:0;
  transform:scale(1.02);
  filter:drop-shadow(0 0 0 rgba(255,255,255,0));
}

#vl-intro .vl-intro-glow{
  position:absolute;
  inset:-22%;
  background:
    radial-gradient(closest-side, rgba(0, 230, 255, .18), rgba(0,0,0,0) 70%),
    radial-gradient(closest-side, rgba(255, 0, 200, .14), rgba(0,0,0,0) 70%);
  opacity:0;
  filter:blur(18px);
  pointer-events:none;
}

#vl-intro .vl-intro-prompt{
  color:#fff;
  font:600 13px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  letter-spacing:.04em;
  transform:translateY(6px);
  opacity:0;
  transition:opacity .35s ease, transform .35s ease;
}

#vl-intro .vl-intro-skip{
  position:absolute;
  right:20px;
  bottom:18px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.84);
  font:600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  letter-spacing:.12em;
  text-transform:uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor:pointer;
  opacity:.0;
  transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease, background .2s ease, border-color .2s ease;
}

#vl-intro .vl-intro-skip:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.20);
}

#vl-intro.vl-intro--play .vl-intro-inner{
  opacity:1;
  transform:translateY(0) scale(1);
  transition:opacity .45s ease, transform .55s ease;
}

/* Neon flicker + fade-in */
#vl-intro.vl-intro--play .vl-intro-logo{
  animation: vlLogoIn 1.05s ease forwards, vlNeonFlicker 1.05s linear forwards;
}

#vl-intro.vl-intro--play .vl-intro-glow{
  animation: vlGlowIn 1.05s ease forwards;
}

#vl-intro.vl-intro--play .vl-intro-prompt{
  opacity:.92;
  transform:translateY(0);
}

#vl-intro.vl-intro--play .vl-intro-skip{
  opacity:.92;
  transform:translateY(0);
}

#vl-intro.vl-intro--out{
  opacity:0;
  transition:opacity 2.5s ease;
}

input, textarea{
  user-select:text;
  -webkit-user-select:text;
  -ms-user-select:text;
}

@keyframes vlLogoIn{
  0%{ opacity:0; transform:scale(1.02); filter:drop-shadow(0 0 0 rgba(255,255,255,0)); }
  55%{ opacity:1; transform:scale(1.0); }
  100%{ opacity:1; transform:scale(1.0); filter:drop-shadow(0 14px 34px rgba(0,0,0,.55)); }
}

@keyframes vlGlowIn{
  0%{ opacity:0; }
  60%{ opacity:.55; }
  100%{ opacity:.40; }
}

/* Quick, tasteful neon flicker */
@keyframes vlNeonFlicker{
  0%{ opacity:0; filter:drop-shadow(0 0 0 rgba(0,230,255,0)); }
  12%{ opacity:.25; }
  18%{ opacity:0; }
  26%{ opacity:.85; filter:drop-shadow(0 0 18px rgba(0,230,255,.22)); }
  34%{ opacity:.55; }
  40%{ opacity:1; filter:drop-shadow(0 0 28px rgba(0,230,255,.18)); }
  55%{ opacity:.88; }
  65%{ opacity:1; }
  100%{ opacity:1; filter:drop-shadow(0 0 18px rgba(0,230,255,.12)); }
}

@media (prefers-reduced-motion: reduce){
  #vl-intro .vl-intro-logo,
  #vl-intro .vl-intro-glow{
    animation:none !important;
  }
  #vl-intro .vl-intro-inner,
  #vl-intro .vl-intro-skip,
  #vl-intro .vl-intro-prompt{
    transition:none !important;
  }
  #vl-intro.vl-intro--out{
    transition:none !important;
  }
}



/* Subtle grain to prevent gradient banding (Rockstar-style polish) */
.heroStage::before,
.featureStage::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  opacity: 0.035;
  mix-blend-mode: overlay;
}
.heroStage::before{ z-index: 1; }
.heroStage img{ position: relative; z-index: 0; }
.heroStage::after{ z-index: 2; }
.featureStage::before{ z-index: 0; }
.featureStage::after{ z-index: 1; inset: 0; }
.featureStage > *{ position:relative; z-index: 2; }