/* everconnected Lab — additions on top of the editorial design system.
   Reuses the editorial tokens (--paper, --ink, --r, --serif, dark theme, …). */

/* hero centrepiece: bodhi / wisdom tree with a network canopy */
.hero__tree{display:flex; justify-content:center; margin:clamp(-6px,0vw,0) auto clamp(8px,1.6vw,18px);
  animation:tree-float 8s var(--ease) infinite}
.hero__tree .tree{width:clamp(208px,28vw,330px); height:auto; color:var(--ink); overflow:visible;
  filter:drop-shadow(0 18px 40px rgba(124,92,255,.18))}
@keyframes tree-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion:reduce){.hero__tree{animation:none}}
:root[data-theme="dark"] .hero__tree .tree{filter:drop-shadow(0 18px 46px rgba(124,92,255,.42))}

/* calmer, more credible hero wash (research site): drop the playful yellow/pink,
   cooler palette, desaturated and softer than the consumer editorial */
.hero__glow{
  filter:blur(66px) saturate(.74); opacity:.58;
  background:
    radial-gradient(48% 62% at 50% 38%, var(--lav), transparent 70%),
    radial-gradient(42% 54% at 66% 56%, var(--sky), transparent 72%),
    radial-gradient(40% 52% at 32% 62%, var(--mint), transparent 74%);
}
:root[data-theme="dark"] .hero__glow{opacity:.5; filter:blur(74px) saturate(.66)}

/* smaller, more restrained masthead for a research-lab feel */
.site-head .brand__logo{height:20px; width:auto}
.brand{display:inline-flex; align-items:center; gap:.5rem}
.brand__lab{font-family:var(--serif); font-weight:500; font-size:.8rem; line-height:1;
  letter-spacing:.02em; padding:.26em .56em .3em; border:1.3px solid currentColor;
  border-radius:999px; opacity:.7}

/* hero CTA cluster (centres inside centred heroes, left-aligns in split columns) */
.hero__cta{display:inline-flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:center}
.hero .hero__cta{margin-top:clamp(22px,3vw,34px)}

/* ---- Portfolio / products ---- */
.prods{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(18px,2.2vw,26px)}
.prod{background:var(--paper-2); border:1.4px solid color-mix(in srgb, var(--ink) 12%, transparent);
  border-radius:var(--r-lg); padding:clamp(24px,2.6vw,36px); display:flex; flex-direction:column}
.prod__top{display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem}
.prod__ico{width:46px; height:46px; color:var(--ink); opacity:.9}
.prod__ico svg{width:100%; height:100%}
.prod__name{font-family:var(--serif); font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem); margin:0 0 .5rem}
.prod p{margin:0; color:var(--ink-soft); font-size:1.06rem; line-height:1.55}
.prod__link{margin-top:1.2rem; font-family:var(--sans); font-weight:600; font-size:.95rem;
  display:inline-flex; align-items:center; gap:.4em; text-decoration:none; color:var(--ink)}
.prod__link svg{width:18px; height:18px; transition:transform .25s var(--ease)}
.prod__link:hover svg{transform:translateX(4px)}

/* status tags */
.tag{font-family:var(--sans); font-weight:700; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; padding:.4em .8em; border-radius:999px; color:#17160f; white-space:nowrap}
.tag--live{background:#7ee3bb}
.tag--use{background:#a9e2ef}
.tag--soon{background:#f3ea5c}

/* ---- Research pillars ---- */
.pillars{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.6vw,34px)}
.pillar{display:flex; gap:1rem; align-items:flex-start}
.pillar__n{font-family:var(--serif); font-weight:500; font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem);
  line-height:1; color:var(--peri); flex:none; min-width:1.6em}
.pillar h3{font-size:1.18rem; margin:.1rem 0 .35rem}
.pillar p{margin:0; color:var(--ink-soft); font-size:1.02rem; line-height:1.55}
.src-note{font-family:var(--body); font-style:italic; opacity:.85; text-align:center;
  margin-top:clamp(28px,3.5vw,48px)}
.src-note a{font-style:normal; font-weight:600; color:var(--ink)}

/* footer fine print */
.foot__fine{font-family:var(--sans); font-size:.82rem; opacity:.6; margin-top:1.4rem}
.foot__fine a{color:inherit; text-decoration:underline}

@media (max-width:760px){
  .prods{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
}