/* ============ Species Wall — Auto-animated photo grid ============ */

/* Base grid */
.species-wall{position:relative;overflow:hidden}
.species-wall__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:4px}

/* When used as section background — absolute fill */
.section--species-bg{background:#0a0f0d;position:relative;overflow:hidden}
.section--species-bg .species-wall{position:absolute;inset:0;z-index:0;overflow:hidden}
.section--species-bg .species-wall__grid{overflow:hidden}

/* Grid cells — 1:1 square */
.species-wall__cell{aspect-ratio:1;overflow:hidden;background:#111}
.species-wall__cell img{width:100%;height:100%;object-fit:cover;display:block;
  opacity:.18;filter:saturate(.6);
  transition:opacity 1s ease,filter 1s ease,transform 1s ease}
.species-wall__cell.is-lit img{opacity:1;filter:saturate(1.1) brightness(1.05);transform:scale(1.04)}

/* Overlay — enough to read text, thin enough to see wall */
.species-wall__overlay{position:absolute;inset:0;z-index:1;pointer-events:none}
.species-wall__overlay--dark{
  background:
    linear-gradient(180deg,rgba(10,15,13,.90) 0%,rgba(10,15,13,.60) 35%,rgba(10,15,13,.60) 65%,rgba(10,15,13,.90) 100%),
    radial-gradient(ellipse at 50% 50%,transparent 0%,rgba(10,15,13,.3) 100%);
}
.species-wall__overlay--gradient{
  background:linear-gradient(90deg,rgba(10,15,13,.92) 0%,rgba(10,15,13,.70) 50%,rgba(10,15,13,.30) 100%);
}

/* Content layer */
.species-wall__content{position:relative;z-index:2}

/* ============ Dark section typography ============ */
.section--species-bg .section-head h2{
  color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.6),0 0 60px rgba(0,0,0,.3);
}
.section--species-bg .section-head p{
  color:rgba(255,255,255,.70);
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}

/* AI numbers */
.section--species-bg .ai-num__num{color:#7DD3A0;font-size:48px;font-weight:800}
.section--species-bg .ai-num__label{color:rgba(255,255,255,.55);font-size:14px}
.section--species-bg .ai-num__divider{background:rgba(255,255,255,.10)}

/* ============ Pipeline cards — three distinct identities ============ */
.section--species-bg .pipeline__card{
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  padding:36px 28px;
  box-shadow:0 4px 24px rgba(0,0,0,.3);
  transition:all .3s ease;
}
.section--species-bg .pipeline__card:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(0,0,0,.4);
}

/* Card 01 INPUT — cool blue */
.section--species-bg .pipeline__card:nth-child(1){
  background:rgba(3,105,161,.10);
  border:1px solid rgba(3,105,161,.20);
}
.section--species-bg .pipeline__card:nth-child(1):hover{
  background:rgba(3,105,161,.16);
  border-color:rgba(3,105,161,.35);
}
.section--species-bg .pipeline__card:nth-child(1) .pipeline__num{
  width:44px;height:44px;border-radius:12px;
  background:rgba(3,105,161,.15);border:1px solid rgba(3,105,161,.30);
  color:#38BDF8;font-size:18px;font-weight:800;
}
.section--species-bg .pipeline__card:nth-child(1) .pipeline__label{color:rgba(56,189,248,.5);font-size:11px;letter-spacing:.12em;font-weight:600}
.section--species-bg .pipeline__card:nth-child(1) .tag-chip{
  background:rgba(3,105,161,.12);color:rgba(125,211,248,.80);border:1px solid rgba(3,105,161,.20);font-size:12px;
}

/* Card 02 MODEL — brand green (highlight) */
.section--species-bg .pipeline__card--highlight{
  background:rgba(46,173,85,.12);
  border:1px solid rgba(46,173,85,.30);
  box-shadow:0 4px 24px rgba(46,173,85,.10);
}
.section--species-bg .pipeline__card--highlight:hover{
  background:rgba(46,173,85,.18);
  border-color:rgba(46,173,85,.45);
}
.section--species-bg .pipeline__card--highlight .pipeline__num{
  width:44px;height:44px;border-radius:12px;
  background:rgba(46,173,85,.18);border:1px solid rgba(46,173,85,.35);
  color:#7DD3A0;font-size:18px;font-weight:800;
}
.section--species-bg .pipeline__card--highlight .pipeline__label{color:rgba(125,211,160,.5);font-size:11px;letter-spacing:.12em;font-weight:600}
.section--species-bg .pipeline__card--highlight .tag-chip{
  background:rgba(46,173,85,.12);color:rgba(125,211,160,.80);border:1px solid rgba(46,173,85,.20);font-size:12px;
}

/* Card 03 OUTPUT — warm amber */
.section--species-bg .pipeline__card:nth-child(3){
  background:rgba(180,83,9,.10);
  border:1px solid rgba(180,83,9,.20);
}
.section--species-bg .pipeline__card:nth-child(3):hover{
  background:rgba(180,83,9,.16);
  border-color:rgba(180,83,9,.35);
}
.section--species-bg .pipeline__card:nth-child(3) .pipeline__num{
  width:44px;height:44px;border-radius:12px;
  background:rgba(180,83,9,.15);border:1px solid rgba(180,83,9,.30);
  color:#FBBF24;font-size:18px;font-weight:800;
}
.section--species-bg .pipeline__card:nth-child(3) .pipeline__label{color:rgba(251,191,36,.5);font-size:11px;letter-spacing:.12em;font-weight:600}
.section--species-bg .pipeline__card:nth-child(3) .tag-chip{
  background:rgba(180,83,9,.12);color:rgba(251,191,36,.80);border:1px solid rgba(180,83,9,.20);font-size:12px;
}

/* Shared text styles */
.section--species-bg .pipeline__title{color:rgba(255,255,255,.92);font-size:17px}
.section--species-bg .pipeline__desc{color:rgba(255,255,255,.55);font-size:14px;line-height:1.7}

/* ============ AI Hero — merged title + stats ============ */
.ai-hero{
  min-height:520px;
  display:flex;
  align-items:center;
}
.ai-hero__inner{
  padding:100px 0 80px;
  max-width:720px;
}
.ai-hero__title{
  font-family:var(--font-display);
  font-size:clamp(36px,5vw,56px);
  font-weight:700;
  color:var(--white);
  line-height:1.12;
  margin-bottom:20px;
  text-shadow:0 2px 30px rgba(0,0,0,.5);
}
.ai-hero__accent{
  color:#7DD3A0;
  font-weight:800;
}
.ai-hero__desc{
  font-size:17px;
  color:rgba(255,255,255,.70);
  line-height:1.8;
  margin-bottom:40px;
  max-width:560px;
  text-shadow:0 1px 12px rgba(0,0,0,.4);
}
.ai-hero__stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.ai-hero__stat{
  padding:20px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  text-align:center;
  transition:all .3s ease;
}
.ai-hero__stat:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.15);
  transform:translateY(-2px);
}
.ai-hero__stat-num{
  font-family:var(--font-display);
  font-size:clamp(24px,3vw,32px);
  font-weight:800;
  color:#7DD3A0;
  line-height:1;
  margin-bottom:8px;
}
.ai-hero__stat-label{
  font-size:13px;
  color:rgba(255,255,255,.55);
  line-height:1.4;
}

/* Responsive */
@media(max-width:768px){
  .species-wall__grid{grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:2px}
  .ai-hero__inner{padding:80px 0 60px}
  .ai-hero__stats{grid-template-columns:repeat(2,1fr);gap:12px}
  .ai-hero__stat{padding:16px 12px}
}
@media(min-width:1400px){
  .species-wall__grid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr))}
}