/* Ecosystem (and philosophy) page. Shared nav/reveal/overlay rules live in style.css. */
.ecosystem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 4rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}
@media (max-width: 600px) {
    .ecosystem-grid > div[style*="padding: 3rem"] { padding: 2rem !important; border-radius: 28px !important; }
}

/* ---------- Shared section intro (map + previews) ---------- */
.eco-intro { max-width: 720px; margin: 0 auto 3rem; text-align: center; }
.eco-h2 { font-size: clamp(2.25rem, 6vw, 3.5rem); margin-bottom: 1.25rem; }
.eco-lede { color: var(--text-muted); line-height: 1.7; max-width: 60ch; margin: 0 auto; text-wrap: pretty; }

/* ---------- Ecosystem map ----------
   Nodes and links are positioned by js/ecosystem.js with transform only. The static layout below
   (no JS / reduced motion) uses the same three resting angles the animation starts from. */
.eco-map-section { padding-top: 2rem; padding-bottom: 3rem; }
.eco-map-section .eco-intro { margin-bottom: 1.5rem; }
.eco-map { max-width: 640px; margin: 0 auto; }
.eco-map__stage {
    --core: clamp(80px, 22%, 150px);
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.7;
    isolation: isolate;
}
.eco-map__orbit {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 16%;
    bottom: 16%;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.12);
    pointer-events: none;
}
.eco-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--core);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: grid;
    place-items: center;
    z-index: 2;
    text-decoration: none;
    color: var(--text);
    background: radial-gradient(circle at 34% 28%, rgba(157, 184, 255, 0.55), var(--mix) 34%, #1b1440 66%, #07050f 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 60px rgba(73, 66, 207, 0.45), inset -14px -18px 36px rgba(0, 0, 0, 0.55);
}
.eco-core img { width: 44%; height: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); }
.eco-core__name {
    position: absolute;
    top: calc(100% + 0.6rem);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.eco-node {
    position: absolute;
    left: 0;
    top: 0;
    width: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.25rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text);
    z-index: 3;
    will-change: transform;
}
.eco-node img,
.eco-node > i {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 50%;
    padding: 8px;
    background: rgba(18, 18, 18, 0.9);
    border: 1px solid var(--border-strong);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}
.eco-node > i { display: grid; place-items: center; font-size: 1.35rem; color: var(--mix); }
.eco-node__name { font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; text-align: center; line-height: 1.2; }
.eco-node__soon { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.66rem; color: var(--text-muted); }
.eco-node--soon { opacity: 0.6; }
.eco-node--soon img, .eco-node--soon > i { border-style: dashed; }
/* Links: a 100px line from the centre, rotated and stretched (scaleX) to reach its node. */
.eco-link {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 2px;
    margin-top: -1px;
    transform-origin: 0 50%;
    background: linear-gradient(90deg, rgba(157, 184, 255, 0.55), rgba(199, 0, 255, 0.35));
    opacity: 0.45;
    z-index: 1;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-out);
}
.eco-link--soon { background: linear-gradient(90deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.08)); }
.eco-node[data-node="pennysphere"] img { border-color: rgba(224, 122, 46, 0.55); }
.eco-node[data-node="waverate"] img { border-color: rgba(180, 108, 255, 0.55); }

/* Highlight: the hovered/focused product's link brightens, the others step back. */
.eco-map__stage[data-active]:not([data-active=""]) .eco-link { opacity: 0.12; }
.eco-map__stage[data-active="avlory"] .eco-link,
.eco-map__stage[data-active="waverate"] .eco-link[data-for="waverate"],
.eco-map__stage[data-active="pennysphere"] .eco-link[data-for="pennysphere"],
.eco-map__stage[data-active="upnext"] .eco-link[data-for="upnext"] { opacity: 1; }
.eco-node .eco-node__name { transition: color var(--dur-fast) var(--ease-out); }
.eco-node.is-active .eco-node__name { color: var(--white); }
.eco-node.is-active img, .eco-node.is-active > i { border-color: var(--accent-text); }
.eco-node:focus-visible, .eco-core:focus-visible { outline-offset: 4px; }

/* Static resting layout (before JS positions them, without JS, and under reduced motion). */
.eco-map__stage:not(.is-live) .eco-node[data-node="waverate"] { left: 15%; top: 65%; transform: translate(-50%, -50%); }
.eco-map__stage:not(.is-live) .eco-node[data-node="pennysphere"] { left: 85%; top: 65%; transform: translate(-50%, -50%); }
.eco-map__stage:not(.is-live) .eco-node[data-node="upnext"] { left: 50%; top: 20%; transform: translate(-50%, -50%); }
.eco-map__stage:not(.is-live) .eco-link { display: none; }

.eco-map__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1rem; margin-top: 1.5rem; text-align: center; }
.eco-map__caption { flex: 1 1 100%; min-height: 3.2em; color: var(--text-muted); line-height: 1.6; max-width: 52ch; margin: 0 auto; text-wrap: pretty; }

/* ---------- Product previews ---------- */
.eco-try { padding-top: 4rem; }
.eco-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
    align-items: stretch;
}
.eco-card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
    padding: 2rem;
    border-radius: 28px;
    background: var(--dark);
    border: 1px solid var(--glass-border);
}
.eco-card__head { display: flex; align-items: center; gap: 0.9rem; }
.eco-card__head img, .eco-card__icon { width: 44px; height: 44px; object-fit: contain; flex: none; }
.eco-card__icon { display: grid; place-items: center; border-radius: 50%; border: 1px dashed var(--border-strong); color: var(--mix); font-size: 1.1rem; }
.eco-card h3 { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.2; }
.eco-card__status { font-size: 0.78rem; font-weight: 600; color: var(--ok); }
.eco-card__status--soon { color: var(--text-muted); }
.eco-card__desc { color: var(--text-muted); font-size: 0.92rem; line-height: 1.7; }
.eco-card__desc--muted { font-size: 0.85rem; }
.eco-card__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; }
.eco-card--soon { border-style: dashed; }

/* Waverate rating preview: colour set per value by js/ecosystem.js (--rate on the card). */
.eco-card--waverate { --rate: var(--rating-high); }
.rate-demo { padding: 1.25rem; border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--border-subtle); }
.rate-demo__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.rate-demo__label { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }
.rate-demo__score {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.6rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--rate);
    transition: color var(--dur-fast) ease;
}
.rate-demo__scale { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-muted); margin-top: 0.35rem; font-variant-numeric: tabular-nums; }

/* Range inputs (rating + budget): a 44px hit area with a slim track. */
.rate-demo__input,
.budget-demo__range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 44px;
    background: transparent;
    cursor: pointer;
    touch-action: pan-y;
    --fill: 50%;
    --track-on: var(--rate, var(--brand-pennysphere));
}
.budget-demo__range { --track-on: var(--brand-pennysphere); }
.rate-demo__input::-webkit-slider-runnable-track,
.budget-demo__range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--track-on) var(--fill), rgba(255, 255, 255, 0.14) var(--fill));
}
.rate-demo__input::-moz-range-track,
.budget-demo__range::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); }
.rate-demo__input::-moz-range-progress,
.budget-demo__range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--track-on); }
.rate-demo__input::-webkit-slider-thumb,
.budget-demo__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    margin-top: -9px;
    border-radius: 50%;
    background: var(--white);
    border: 3px solid var(--track-on);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.rate-demo__input::-moz-range-thumb,
.budget-demo__range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--white);
    border: 3px solid var(--track-on);
}
.rate-demo__input:focus-visible,
.budget-demo__range:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: 8px; }

/* PennySphere budget preview (copper, like its logo). */
.budget-demo { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.25rem; border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--border-subtle); }
.budget-demo__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.budget-demo__row label { font-size: 0.88rem; color: var(--text-muted); font-weight: 600; }
.budget-demo__money {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 44px;
    padding: 0 0.75rem;
    border-radius: var(--radius-md);
    background: var(--surface-field);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
}
.budget-demo__money:focus-within { outline: var(--focus-ring); outline-offset: 2px; }
.budget-demo__money input {
    width: 5.5ch;
    min-height: 42px;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
    outline: none;
    -moz-appearance: textfield;
}
.budget-demo__money input::-webkit-outer-spin-button,
.budget-demo__money input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.budget-demo__bar {
    position: relative;
    height: 8px;
    margin-top: 0.4rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}
/* Each segment is full width and scaled (transform only): A shows the first category, B (under it)
   reaches to the total spent, so it reads as the second category stacked after the first. */
.budget-demo__seg {
    position: absolute;
    inset: 0;
    transform-origin: 0 50%;
    transform: scaleX(0);
    transition: transform var(--dur-med) var(--ease-out);
}
.budget-demo__seg--a { background: var(--brand-pennysphere); z-index: 1; }
.budget-demo__seg--b { background: var(--brand-pennysphere-text); opacity: 0.65; }
.budget-demo__result { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: var(--ok); font-variant-numeric: tabular-nums; }
.budget-demo__result.is-over { color: var(--danger-text); }

@media (max-width: 600px) {
    .eco-map__stage { aspect-ratio: 1 / 0.84; }
    .eco-card { padding: 1.5rem; border-radius: 22px; }
    .eco-node { width: 76px; }
    .eco-node img, .eco-node > i { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
    .eco-link, .rate-demo__score, .budget-demo__seg, .eco-node .eco-node__name { transition: none; }
}
/* The money field's wrapper draws the focus ring (one ring, around the $ too). */
.budget-demo__money input:focus-visible { outline: none !important; }

/* Avlory Next milestone: the one card with the full gradient border */
.timeline-card--next { border: 1.5px solid transparent; background: linear-gradient(#111113, #111113) padding-box, linear-gradient(135deg, var(--p-base), var(--b-base)) border-box; }