/* ==========================================================================
   eco.css — additive components for the AIC ecosystem redesign.
   Loaded AFTER site.css (home) or page.css (inside pages); never overrides
   existing selectors. Safe to remove wholesale to roll back the redesign.
   Components: .ecoflow (journey strip) · .funnel (Founders Lab levels)
   · .venture (featured venture) · .pillars4 grid tweaks · .involve grid
   ========================================================================== */

/* ---------- ecosystem journey strip: CONNECT → … → SCALE ---------- */
.ecoflow {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .35rem .5rem; margin: 1.8rem 0 .4rem;
}
.ecoflow__step {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: clamp(.72rem, 1.1vw, .92rem);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink, #eaf2fb);
  border: 1px solid rgba(122, 191, 255, .35);
  background: rgba(14, 34, 57, .55);
  padding: .55rem .95rem; border-radius: 999px; white-space: nowrap;
}
.ecoflow__step--hot { border-color: var(--accent, #1E8FE8); color: #fff;
  background: rgba(30, 143, 232, .18); }
.ecoflow__arrow { color: var(--accent, #1E8FE8); font-size: 1rem; opacity: .85; }

/* ---------- Founders Lab funnel ---------- */
.funnel { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: 2rem; }
.funnel__level {
  position: relative; width: min(100%, var(--fw, 100%));
  border: 1px solid rgba(122, 191, 255, .28);
  background: linear-gradient(180deg, rgba(16, 38, 63, .82), rgba(10, 26, 44, .82));
  border-radius: 14px; padding: 1.4rem 1.5rem 1.5rem; text-align: left;
}
.funnel__level + .funnel__connector { margin: 0; }
.funnel__level--1 { --fw: 100%; }
.funnel__level--2 { --fw: 78%;  border-color: rgba(30, 143, 232, .45); }
.funnel__level--3 { --fw: 56%;  border-color: rgba(45, 212, 196, .5); }
.funnel__tag {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent, #1E8FE8); display: block; margin-bottom: .45rem;
}
.funnel__level--3 .funnel__tag { color: #2DD4C4; }
.funnel__level h3 { margin: 0 0 .5rem; font-size: clamp(1.05rem, 1.8vw, 1.35rem); color: #fff; }
.funnel__level p { margin: 0 0 .6rem; color: rgba(234, 242, 251, .82); font-size: .95rem; line-height: 1.55; }
.funnel__level ul { margin: .2rem 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: .4rem; }
.funnel__level ul li {
  font-size: .78rem; color: rgba(234, 242, 251, .85);
  border: 1px solid rgba(122, 191, 255, .25); border-radius: 999px;
  padding: .28rem .7rem; background: rgba(14, 34, 57, .5);
}
.funnel__connector {
  display: flex; flex-direction: column; align-items: center;
  color: var(--accent, #1E8FE8); padding: .35rem 0;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
}
.funnel__connector::before { content: "↓"; font-size: 1.25rem; line-height: 1; margin-bottom: .15rem; }
.funnel__note { margin-top: 1.1rem; font-size: .85rem; color: rgba(234, 242, 251, .65);
  text-align: center; max-width: 46rem; }

/* ---------- mini path (IDEA → BUILD → VALIDATE → LAUNCH etc.) ---------- */
.minipath { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; margin: .9rem 0; }
.minipath span {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(234, 242, 251, .9);
  border: 1px solid rgba(122, 191, 255, .3); border-radius: 6px;
  padding: .35rem .6rem; background: rgba(14, 34, 57, .5);
}
.minipath em { font-style: normal; color: var(--accent, #1E8FE8); }

/* ---------- featured venture ---------- */
.venture {
  border: 1px solid rgba(122, 191, 255, .3); border-radius: 18px;
  background: linear-gradient(135deg, rgba(16, 38, 63, .9), rgba(10, 26, 44, .92));
  padding: clamp(1.4rem, 3.5vw, 2.6rem);
  display: grid; grid-template-columns: 1.25fr .9fr; gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: center;
}
.venture__badge {
  display: inline-block; font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: #0b1c30; background: var(--accent, #1E8FE8);
  border-radius: 999px; padding: .32rem .8rem; margin-bottom: 1rem;
}
.venture h3 { margin: 0 0 .7rem; font-size: clamp(1.5rem, 3vw, 2.2rem); color: #fff; }
.venture p { color: rgba(234, 242, 251, .85); line-height: 1.6; }
.venture__proof {
  border-left: 2px solid var(--accent, #1E8FE8); padding-left: .9rem;
  font-size: .9rem; color: rgba(234, 242, 251, .7); margin-top: 1rem;
}
.venture__visual { text-align: center; }
.venture__visual .minipath { justify-content: center; }

/* ---------- get involved grid ---------- */
.involve { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: 1.6rem; }
.involve a {
  display: block; text-decoration: none; border: 1px solid rgba(122, 191, 255, .25);
  border-radius: 12px; padding: 1rem 1.1rem; background: rgba(14, 34, 57, .5);
  transition: border-color .2s, transform .2s;
}
.involve a:hover { border-color: var(--accent, #1E8FE8); transform: translateY(-2px); }
.involve a strong { display: block; color: #fff; font-size: .98rem; margin-bottom: .25rem; }
.involve a span { color: rgba(234, 242, 251, .7); font-size: .82rem; line-height: 1.4; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .venture { grid-template-columns: 1fr; }
  .involve { grid-template-columns: repeat(2, 1fr); }
  .funnel__level--2 { --fw: 88%; }
  .funnel__level--3 { --fw: 76%; }
}
@media (max-width: 560px) {
  .involve { grid-template-columns: 1fr; }
  .funnel__level--2, .funnel__level--3 { --fw: 100%; }
  .ecoflow { gap: .3rem .35rem; }
  .ecoflow__step { padding: .42rem .7rem; }
}