/*
 * Marketing homepage (front-page.php) — ported from the design
 * system's ui_kits/website/homepage.html ("Website — homepage": nav,
 * hero dashboard, dual engine, dashboard showcase, audiences, CTA)
 * and its home/*.jsx source, client feedback 2026-08-14 ("hoàn toàn
 * mới" — a completely new page, replacing the previous index.html
 * port). Requires tokens.css + auth.css (.eco-btn) loaded first — see
 * functions.php's enqueue for this template.
 *
 * All new `eco-home-*` classes — the previous `eco-landing__*` port
 * is retired entirely (confirmed unused anywhere else in the theme
 * before deleting).
 *
 * The design's own inline `style` values (React) are ported to real
 * CSS values here, using this theme's semantic tokens (--text-muted,
 * --text-body, --border-subtle, --eco-ink, etc.) wherever the design's
 * raw slate/blue values map onto one directly, rather than
 * reintroducing raw hex.
 */

.eco-home-page { background: var(--eco-white); font-family: var(--font-body); color: var(--eco-ink); }
/* :not(:where(.eco-btn)) — the inner :where() keeps this exclusion at
   ZERO added specificity (bare :not(.eco-btn) would instead ADD
   .eco-btn's specificity, silently beating every later fix that relies
   on this rule staying at class+tag — e.g. .eco-home-nav .eco-home-nav__link
   below broke exactly this way when this was plain :not(.eco-btn)).
   Still needed so this rule doesn't override every .eco-btn--variant's
   own text color anywhere on the page (a real bug: a plain
   <a class="eco-btn eco-btn--primary"> would render --text-link blue
   instead of --action-primary-text indigo — easy to miss, both dark blues). */
.eco-home-page a:not(:where(.eco-btn)) { color: var(--text-link); }
.eco-home-page a:not(:where(.eco-btn)):hover { color: var(--text-link-hover); }

/* ============================================================
   Shared primitives
   ============================================================ */
/* 1440px everywhere except Hero's own .eco-home-hero__inner (also
   1440px, just declared separately since Hero doesn't use this shared
   class) — all section containers now match "02 — What it solves",
   which is where this width was first introduced. */
.eco-home-section__inner { max-width: 1440px; margin: 0 auto; padding: 0 40px; }
/* scroll-margin-top clears the sticky 72px header (auth.css sets
   scroll-behavior: smooth site-wide) so #product/#serve/#showcase land
   below the bar instead of underneath it. */
.eco-home-section,
.eco-home-footer { scroll-margin-top: 88px; }
.eco-home-section { padding: 104px 0; background: var(--eco-white); }
.eco-home-section--tint { background: var(--eco-slate-50); }
.eco-home-section--rule-top { border-top: 1px solid var(--border-subtle); }

.eco-home-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.eco-home-eyebrow--blue { color: var(--eco-blue); }
.eco-home-eyebrow--light { color: rgba(255, 255, 255, 0.55); }
.eco-home-eyebrow--dots { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.eco-home-eyebrow__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--eco-green); flex-shrink: 0; box-shadow: 0 0 6px rgba(188, 237, 9, 0.7); }

.eco-home-display { font-family: var(--font-display); font-weight: 800; font-size: 52px; line-height: 1; letter-spacing: -0.02em; color: var(--eco-ink); margin: 16px 0 18px; }
.eco-home-display--sm { font-size: 36px; margin: 14px 0 30px; }
.eco-home-display--md { font-size: 46px; margin: 16px 0 0; }
.eco-home-display--light { color: var(--eco-white); }

.eco-home-lede { font-size: 17px; line-height: 1.6; color: var(--text-muted); margin: 0; max-width: 560px; }
.eco-home-lede--light { color: rgba(255, 255, 255, 0.68); }

.eco-home-section__head { max-width: 720px; margin-bottom: 56px; }
.eco-home-section__head--wide { max-width: 660px; margin-bottom: 20px; }

.eco-home-pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); color: var(--text-muted); background: var(--eco-slate-100); white-space: nowrap; }
.eco-home-pill--soft { color: var(--eco-blue); background: var(--eco-blue-50); }
.eco-home-pill--lime { color: var(--eco-indigo); background: var(--eco-green); }

.eco-home-textlink { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--eco-blue); text-decoration: none; }
.eco-home-textlink svg { transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.3, 1); }
.eco-home-textlink:hover svg { transform: translateX(4px); }
.eco-home-textlink--light { color: var(--eco-green); }
.eco-home-textlink--light:hover { text-decoration: underline; }

.eco-home-panel__label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }
.eco-home-panel__label--light { color: rgba(255, 255, 255, 0.5); }
.eco-home-panel__company { font-size: 15px; font-weight: 700; color: var(--eco-ink); line-height: 1.2; }
.eco-home-panel__meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* Sparkline / bars / ring — shared data-viz primitives */
.eco-home-spark { width: 100%; display: block; overflow: visible; }
.eco-home-bars { display: flex; flex-direction: column; gap: 9px; }
.eco-home-bars__head { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-muted); margin-bottom: 4px; }
.eco-home-bars__head strong { color: var(--eco-ink); font-weight: 700; }
.eco-home-bars__track { height: 5px; border-radius: 3px; background: var(--eco-slate-100); }
.eco-home-bars__fill { height: 100%; border-radius: 3px; background: var(--eco-blue); transition: width 1s cubic-bezier(0.2, 0.7, 0.3, 1); }
.eco-home-bars__fill--hi { background: var(--eco-green); }
.eco-home-ring { position: relative; display: inline-flex; flex-shrink: 0; }
.eco-home-ring__fill { transition: stroke-dashoffset 1.2s cubic-bezier(0.2, 0.7, 0.3, 1); }
.eco-home-ring__label { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--eco-white); line-height: 1; }

/* Scroll-reveal (client feedback — light "wow" polish, not required for correctness: sections are already fully visible/correct with no JS) */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1); }
[data-reveal].eco-home-revealed { opacity: 1; transform: none; }

/* ============================================================
   Header
   ============================================================ */
/* Transparent by default — the header sits directly on the Hero's own
   dark gradient (see Hero section below) until the visitor scrolls
   past it, at which point .eco-home-header--scrolled (toggled in
   landing.js) swaps it to an opaque white bar. Nav text/logo/burger
   all have a matching light-on-transparent -> dark-on-white pair of
   rules for the same reason (light text unreadable once the bar turns
   white). */
/* Taller + bigger logo before scroll (more presence sitting over the
   Hero), settling back to the compact 72px/48px bar once scrolled —
   .eco-home-hero's own -96px margin-top and 110px top padding are
   tuned to this 96px resting height, see the comment there. */
.eco-home-header { position: sticky; top: 0; z-index: 50; height: 96px; background: transparent; border-bottom: 1px solid transparent; will-change: background, height; transition: background 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), height 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.eco-home-header--scrolled { height: 72px; background: rgba(255, 255, 255, 0.9); backdrop-filter: saturate(180%) blur(12px); border-bottom-color: var(--border-subtle); }
.eco-home-header__inner { width: 100%; height: 100%; margin: 0; padding: 0 40px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 38px; }
.eco-home-header__logo { display: flex; align-items: center; justify-self: start; }
.eco-home-header__logo img { height: 60px; width: auto; transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.eco-home-header--scrolled .eco-home-header__logo img { height: 48px; }

.eco-home-nav { display: flex; align-items: center; gap: 30px; justify-self: center; }
.eco-home-nav__item { position: relative; }
.eco-home-nav__link { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; padding: 22px 0; transition: color 0.25s; }
/* Specificity bumped to .eco-home-nav .eco-home-nav__link (two classes)
   so it beats .eco-home-page a's (class + tag) rule above — otherwise
   the <a>-based links here (About, Contact) fall back to the global
   link color while the <span>-based ones (Product, Who we serve) stay
   correctly white/ink, splitting the nav's color inconsistently. */
.eco-home-nav .eco-home-nav__link { color: rgba(255, 255, 255, 0.92); }
.eco-home-header--scrolled .eco-home-nav__link { color: var(--eco-ink); }
/* Active state (hover, or open for the Product/Who we serve dropdown
   triggers) — the same signal-green as the primary buttons
   (--eco-green), unified across the scrolled/unscrolled header since
   it reads well on both the dark Hero and the white scrolled bar. */
a.eco-home-nav__link:hover,
.eco-home-nav__item:hover > .eco-home-nav__link,
.eco-home-nav__item:focus-within > .eco-home-nav__link { color: var(--eco-green); }

.eco-home-dropdown { opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.18s, transform 0.18s, visibility 0.18s; position: absolute; top: 100%; left: 0; padding-top: 14px; }
.eco-home-nav__item:hover .eco-home-dropdown,
.eco-home-nav__item:focus-within .eco-home-dropdown { opacity: 1; visibility: visible; transform: none; }
/* Same white-dominant + corner neon glow + noise treatment as
   .eco-home-dual__col's light column (see there for the full
   rationale) — ::after painted last (on top) with multiply blend +
   low opacity so the noise reads without darkening the links. */
.eco-home-dropdown__inner {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 70% at 92% 96%, rgba(188, 237, 9, 0.4), transparent 70%),
    var(--eco-white);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: 0 20px 44px rgba(18, 15, 136, 0.14);
  padding: 22px 26px;
  min-width: 260px;
}
.eco-home-dropdown__inner::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.22;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.eco-home-dropdown--wide .eco-home-dropdown__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; min-width: 520px; }
.eco-home-dropdown__label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px; }
.eco-home-dropdown__link { display: block; font-size: 14.5px; font-weight: 600; color: var(--eco-ink); padding: 7px 9px; margin: 0 -9px; border-radius: 8px; text-decoration: none; }
.eco-home-dropdown__link:hover { background: var(--eco-slate-50); color: var(--eco-blue); }
.eco-home-dropdown__soon-row { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--text-muted); }

.eco-home-header__actions { justify-self: end; display: flex; align-items: center; gap: 20px; }
/* Glass morphism — scoped to the marketing header only, not the shared
   .eco-app-user-menu component itself (auth.css), since the plain
   white /app/* shell header doesn't benefit from a glass look. */
.eco-home-header .eco-app-user-menu__trigger { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); transition: background 0.25s, border-color 0.25s; }
.eco-home-header .eco-app-user-menu__trigger:hover { background: rgba(255, 255, 255, 0.22); }
.eco-home-header .eco-app-user-menu__name { color: var(--eco-white); transition: color 0.25s; }
.eco-home-header .eco-app-user-menu__chevron { color: rgba(255, 255, 255, 0.7); transition: color 0.25s; }
.eco-home-header--scrolled .eco-app-user-menu__trigger { background: rgba(255, 255, 255, 0.55); border-color: var(--border-subtle); }
.eco-home-header--scrolled .eco-app-user-menu__trigger:hover { background: rgba(255, 255, 255, 0.8); }
.eco-home-header--scrolled .eco-app-user-menu__name { color: var(--text-strong); }
.eco-home-header--scrolled .eco-app-user-menu__chevron { color: var(--text-muted); }
.eco-home-header .eco-app-user-menu__panel { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-color: rgba(255, 255, 255, 0.4); }
/* Specificity bumped (.eco-home-header__actions + .eco-home-header__signin)
   to beat .eco-home-page a's rule — same recurring fix as the nav
   links/footer links/finalcta button; a single class alone (0,1,0)
   loses to that rule's (0,1,1), which would otherwise render this
   link in --text-link blue instead of white/muted regardless of
   scroll state. */
.eco-home-header__actions .eco-home-header__signin { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, 0.85); text-decoration: none; transition: color 0.25s; }
.eco-home-header--scrolled .eco-home-header__actions .eco-home-header__signin { color: var(--text-muted); }
.eco-home-header__actions .eco-home-header__signin:hover { color: var(--eco-green); }
.eco-home-header--scrolled .eco-home-header__actions .eco-home-header__signin:hover { color: var(--eco-blue); }
.eco-home-burger { display: none; align-items: center; justify-content: center; background: none; border: none; color: rgba(255, 255, 255, 0.92); cursor: pointer; padding: 6px; transition: color 0.25s; }
.eco-home-header--scrolled .eco-home-burger { color: var(--eco-ink); }
/* Solid background — this sits inside <header>, which is transparent
   pre-scroll (over the dark Hero); without its own background here,
   the dark-ink nav links were rendering illegible over the hero. */
.eco-home-mobile-nav { display: none; flex-direction: column; gap: 4px; padding: 12px 24px 20px; background: var(--eco-white); border-top: 1px solid var(--border-subtle); box-shadow: 0 16px 32px rgba(18, 15, 136, 0.14); }
.eco-home-mobile-nav a:not(.eco-btn) { display: block; padding: 10px 0; font-size: 15px; font-weight: 600; color: var(--eco-ink); text-decoration: none; }
.eco-home-mobile-nav .eco-btn { margin-top: 8px; }
.eco-home-mobile-nav--open { display: flex; }
/* Toggled on <body> alongside the drawer (landing.js) so the page
   behind it can't scroll while it's open. */
.eco-home-scroll-lock { overflow: hidden; }

@media (max-width: 820px) {
  .eco-home-nav,
  .eco-home-header__signin,
  .eco-home-header__actions .eco-btn--primary { display: none; }
  .eco-home-burger { display: inline-flex; }
  /* The 3-column grid (logo | nav | actions) leaves a now-empty middle
     track once .eco-home-nav is hidden above, and .eco-home-header__actions'
     own justify-self:end then aligns it to that track's own end rather
     than the header's true right edge — not flush right in practice.
     A plain 2-item flex (logo, actions) sidesteps the empty-track math
     entirely. */
  .eco-home-header__inner { display: flex; justify-content: space-between; }
  .eco-home-header__actions { justify-self: unset; }
  .eco-home-header__logo img { height: 44px; }
  .eco-home-header--scrolled .eco-home-header__logo img { height: 36px; }
}

/* ============================================================
   Hero
   ============================================================ */
.eco-home-hero {
  /* position: sticky still occupies its own 96px of flow space at rest
     (it only *behaves* like fixed once you scroll past it, at which
     point it shrinks to 72px — see .eco-home-header) — a transparent
     header alone would just reveal <body>'s white background sitting
     behind it, not this section. Pulling Hero up by the header's resting
     height makes Hero's own box (and its gradient) start at the very
     top of the page, underneath the header, which is what the
     transparent-header effect actually needs. eco-home-hero__inner's
     own 110px top padding already clears the 96px header by 14px, so
     no extra padding-top is needed here. */
  position: relative;
  margin-top: -96px;
  border-bottom: 1px solid var(--border-subtle);
  background:
    radial-gradient(60% 60% at 8% 0%, rgba(188, 237, 9, 0.14), transparent 72%),
    radial-gradient(125% 125% at 50% 115%, rgba(255, 255, 255, 0.08) 0%, rgba(11, 92, 255, 0) 65%),
    radial-gradient(150% 150% at 50% 115%, #8acb45 0%, #65b83f 6%, #32984a 14%, #216f9d 25%, #3049a5 40%, #192f8f 55%, #0b246d 72%, rgba(5, 27, 90, 0) 100%),
    #00052f;
}
/* Noise, same feTurbulence technique as .eco-home-dual__col's ::after —
   blend mode here is overlay rather than that rule's multiply though:
   multiply on a base this dark (#00053d) would crush the grain toward
   pure black instead of showing it. Overlay is what .eco-home-pt
   (also dark) already uses for the same reason. */
.eco-home-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.2;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 10px 10px;
  background-repeat: repeat;
}
/* Header (96px resting, see above) + Hero fill exactly one viewport on
   first load, desktop only (client feedback) — mobile keeps its
   natural (shorter) content height, matching the burger-nav breakpoint
   above. */
@media (min-width: 821px) {
  .eco-home-hero { min-height: 100vh; display: flex; align-items: center; }
}
.eco-home-hero__inner { position: relative; z-index: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: 110px 40px 96px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 72px; align-items: center; }
.eco-home-hero__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5.4vw, 78px); line-height: 0.96; letter-spacing: -0.03em; color: var(--eco-white); margin: 20px 0 22px; }
.eco-home-hero__title-accent { color: var(--eco-green); }
.eco-home-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin: 34px 0 28px; }
.eco-home-hero__tags { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.6); }
.eco-home-hero__dot { width: 4px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.35); }
/* The dark hero gradient above needs its own text-color override —
   .eco-home-lede is shared across the page on light backgrounds
   elsewhere, so this is scoped to .eco-home-hero rather than changed
   globally. */
.eco-home-hero .eco-home-lede { color: rgba(255, 255, 255, 0.72); }

/* Gentle on-load entrance for the Hero copy column — plain CSS
   (plays immediately, no scroll-triggered IntersectionObserver like
   [data-reveal] below, since this content is above the fold from the
   first frame) staggered per direct child: eyebrow, title, lede,
   CTAs, tags. */
@keyframes eco-home-hero-copy-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.eco-home-hero__copy > * {
  opacity: 0;
  animation: eco-home-hero-copy-in 0.9s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
.eco-home-hero__copy > *:nth-child(1) { animation-delay: 0.05s; }
.eco-home-hero__copy > *:nth-child(2) { animation-delay: 0.25s; }
.eco-home-hero__copy > *:nth-child(3) { animation-delay: 0.45s; }
.eco-home-hero__copy > *:nth-child(4) { animation-delay: 0.65s; }
.eco-home-hero__copy > *:nth-child(5) { animation-delay: 0.85s; }
@media (prefers-reduced-motion: reduce) {
  .eco-home-hero__copy > * { opacity: 1; animation: none; }
}

/* Hero visual — floating-card collage, ported from the design
   system's home/hero.jsx "HeroCollage" (client design update). Kept on
   the Hero's existing dark navy backdrop rather than the design's own
   light-cream Hero background — the sticky header's white-on-dark
   contrast logic depends on Hero staying dark, so card colors below
   are tuned for a dark backdrop instead (e.g. the navy breakdown card
   uses --eco-indigo-800 to stay visible against it). */
.eco-home-panel { position: relative; }
.eco-home-panel__stage { position: relative; width: 100%; max-width: 560px; margin: 0 0 0 auto; aspect-ratio: 1 / 1.28; }

.eco-home-panel__orb { position: absolute; border-radius: 50%; pointer-events: none; }
/* 3 concentric rings — same anchor point (top/right), translate(50%,-50%)
   self-centers each one on it regardless of its own diameter, so they
   nest around a shared center rather than scattering independently. */
/* ring-a/ring-c slowly spin in place (transform combines the centering
   translate with the rotation inside the keyframes, since an element's
   `transform` can only hold one value at a time); ring-b itself stays
   static — its "motion" is a separate droplet dot orbiting around it
   instead (.eco-home-panel__orb-droplet-track below), not the ring's
   own dashes rotating. */
.eco-home-panel__orb--ring-a { top: 50%; left: 50%; width: 510px; height: 510px; border: 1.5px dashed rgba(255, 255, 255, 0.35); animation: eco-panel-ring-spin 60s linear infinite; }
.eco-home-panel__orb--ring-b { top: 50%; left: 50%; width: 390px; height: 390px; transform: translate(-50%, -50%); border: 1.5px dashed rgba(255, 255, 255, 0.45); }
.eco-home-panel__orb--ring-c { top: 50%; left: 50%; width: 270px; height: 270px; border: 1.5px dashed rgba(255, 255, 255, 0.55); animation: eco-panel-ring-spin 42s linear infinite reverse; }
@keyframes eco-panel-ring-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Droplet orbiting ring-b — an invisible same-size track rotates
   continuously; the small dot fixed at its top edge is carried around
   in a circle while the underlying dashed ring stays put. */
.eco-home-panel__orb-droplet-track { position: absolute; top: 50%; left: 50%; width: 390px; height: 390px; pointer-events: none; animation: eco-panel-droplet-spin 6s linear infinite; }
@keyframes eco-panel-droplet-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.eco-home-panel__orb-droplet { position: absolute; top: 0; left: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--eco-green); box-shadow: 0 0 10px 2px rgba(188, 237, 9, 0.8); transform: translate(-50%, -50%); }
@media (prefers-reduced-motion: reduce) {
  .eco-home-panel__orb--ring-a,
  .eco-home-panel__orb--ring-c,
  .eco-home-panel__orb-droplet-track { animation: none; }
}
.eco-home-panel__orb--blur-b { bottom: 2%; right: -6%; width: 170px; height: 170px; background: var(--eco-blue); opacity: .3; filter: blur(50px); }
/* Same center anchor as the 3 rings (top/left 50%, translate -50%,-50%). */
.eco-home-panel__center-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(6px); display: grid; place-items: center; }
.eco-home-panel__center-logo img { width: 28px; height: auto; }

.eco-home-panel__card {
  --rot: 0deg;
  position: absolute;
  z-index: 1;
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: translateY(14px) rotate(var(--rot));
  transition: opacity .6s cubic-bezier(.2, .7, .3, 1), transform .3s ease, box-shadow .3s ease, z-index 0s;
}
.eco-home-revealed .eco-home-panel__card { opacity: 1; transform: translateY(0) rotate(var(--rot)); }
/* Gentle idle float once revealed, staggered per card. Delay must clear
   this card's OWN entrance transition (transition-delay + .6s duration,
   latest is .51s + .6s = 1.11s for --credit) with real margin — cutting
   it close (e.g. .05s) caused a visible snap where the transition's
   still-in-progress transform got yanked to the animation's 0% frame
   mid-flight. 1.3s+ gives every card a safe buffer regardless. */
@keyframes eco-panel-card-float {
  0%, 100% { transform: translateY(0) rotate(var(--rot)); }
  50% { transform: translateY(-8px) rotate(var(--rot)); }
}
.eco-home-revealed .eco-home-panel__card { animation: eco-panel-card-float 6s ease-in-out infinite; animation-delay: var(--float-delay, 1.3s); }
.eco-home-panel__card--impact { --float-delay: 1.3s; }
.eco-home-panel__card--esg { --float-delay: 1.7s; }
.eco-home-panel__card--breakdown { --float-delay: 1.5s; }
.eco-home-panel__card--credit { --float-delay: 1.9s; }
/* Hover — bring the card to the front (z-index) so it's never clipped
   by a neighbor. Pausing (not stopping) the float is what keeps this
   smooth: animation:none would hand transform back to the cascade
   instantly, snapping from wherever mid-float the card was to a fixed
   hover position — and snapping again on mouse-out when the animation
   restarts from its 0% frame. Pausing just freezes the current frame,
   so there's nothing to snap to/from. */
.eco-home-panel__card:hover {
  animation-play-state: paused;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
  z-index: 20;
}
@media (prefers-reduced-motion: reduce) {
  .eco-home-revealed .eco-home-panel__card { animation: none; }
}
.eco-home-panel__card-head { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.eco-home-panel__card-head--muted { color: var(--text-muted); }
.eco-home-panel__card-head--light { color: rgba(255, 255, 255, .55); margin-bottom: 14px; }

/* Card 1 — Impact Score (gradient, the dominant card) */
.eco-home-panel__card--impact {
  --rot: -4deg;
  top: 20%; left: 10%; width: 52%;
  background: linear-gradient(135deg, var(--eco-blue) 0%, var(--eco-green) 100%);
  color: var(--eco-white);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .4), 0 0 44px rgba(188, 237, 9, .28);
}
.eco-home-revealed .eco-home-panel__card--impact { transition-delay: .15s; }
.eco-home-panel__chip--light { font-size: 10.5px; font-weight: 800; color: var(--eco-indigo); background: var(--eco-white); border-radius: 999px; padding: 3px 9px; }
.eco-home-panel__card--impact .eco-home-ring__label { font-size: 22px; }
.eco-home-panel__ring-row { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.eco-home-panel__ring-tone { font-size: 13px; font-weight: 800; color: var(--eco-white); }
.eco-home-panel__ring-sub { font-size: 11.5px; opacity: .85; margin-top: 2px; }
.eco-home-panel__icon-row { display: flex; gap: 6px; margin-top: 16px; }
.eco-home-panel__icon-chip { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
.eco-home-panel__icon-chip--light { background: rgba(255, 255, 255, .24); color: var(--eco-white); }

/* Card 2 — ESG Score (white) */
.eco-home-panel__card--esg {
  --rot: 3deg;
  top: 14%; right: 6%; width: 44%;
  background: var(--eco-white); color: var(--eco-ink);
}
.eco-home-revealed .eco-home-panel__card--esg { transition-delay: .27s; }
.eco-home-panel__dots { color: var(--text-muted); display: inline-flex; }
.eco-home-panel__scorerow { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.eco-home-panel__scoreval { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: 1; color: var(--eco-ink); }
.eco-home-panel__uptag { font-size: 11px; font-weight: 800; color: var(--eco-green-600); background: var(--eco-green-100); border-radius: 999px; padding: 3px 8px; }
.eco-home-panel__card--esg .eco-home-spark { margin-top: 10px; }
.eco-home-panel__tag-row { display: flex; gap: 6px; margin-top: 10px; }
.eco-home-panel__tag { font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 3px 9px; }
.eco-home-panel__tag--blue { color: var(--eco-blue); background: var(--eco-blue-50); }
.eco-home-panel__tag--muted { color: var(--text-muted); background: var(--eco-slate-50); }
.eco-home-panel__tag--green { color: var(--eco-green-600); background: var(--eco-green-100); }

/* Card 3 — Score breakdown (raised indigo, not plain navy, so it still
   reads as its own layer against the darker Hero background) */
.eco-home-panel__card--breakdown {
  top: 46%; right: 10%; width: 48%;
  background: var(--eco-indigo-800);
  border: 1px solid rgba(255, 255, 255, .08);
  color: var(--eco-white);
}
.eco-home-revealed .eco-home-panel__card--breakdown { transition-delay: .39s; }
.eco-home-panel__live { font-size: 10px; font-weight: 800; color: var(--eco-indigo); background: var(--eco-green); border-radius: 999px; padding: 3px 8px; box-shadow: 0 0 12px rgba(188, 237, 9, .7); }
.eco-home-panel__breakdown { display: flex; flex-direction: column; gap: 9px; }
.eco-home-panel__breakdown-head { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: rgba(255, 255, 255, .68); margin-bottom: 3px; }
.eco-home-panel__breakdown-dot { width: 6px; height: 6px; border-radius: 3px; flex-shrink: 0; }
.eco-home-panel__breakdown-k { flex: 1; }
.eco-home-panel__breakdown-v { font-weight: 700; color: var(--eco-white); }
.eco-home-panel__breakdown-track { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .16); }
.eco-home-panel__breakdown-fill { height: 100%; border-radius: 3px; transition: width 1s cubic-bezier(.2, .7, .3, 1); }

/* Card 4 — Credit Score (white) */
.eco-home-panel__card--credit {
  --rot: -2deg;
  bottom: 8%; left: 12%; width: 54%;
  background: var(--eco-white); color: var(--eco-ink);
}
.eco-home-revealed .eco-home-panel__card--credit { transition-delay: .51s; }
.eco-home-panel__card--credit .eco-home-panel__card-head { margin-bottom: 10px; }
.eco-home-panel__creditrow { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.eco-home-panel__creditval { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; color: var(--eco-blue); }
.eco-home-panel__creditsub { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.eco-home-panel__icon-row--labeled { gap: 8px; }
.eco-home-panel__icon-row--labeled .eco-home-panel__icon-chip { flex: 1; flex-direction: column; gap: 6px; width: auto; height: auto; padding: 10px 6px; border-radius: 10px; }
.eco-home-panel__icon-chip--blue { background: var(--eco-blue-50); color: var(--eco-blue); }
.eco-home-panel__icon-chip--green { background: var(--eco-green-100); color: var(--eco-green-600); }
.eco-home-panel__icon-chip--orange { background: rgba(241, 115, 0, .12); color: var(--eco-orange); }
.eco-home-panel__icon-chip span { font-size: 10px; font-weight: 600; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .eco-home-panel__card { opacity: 1; transform: rotate(var(--rot)); transition: none; }
}

@media (max-width: 1080px) {
  /* padding-top must still clear the sticky header (96px resting
     height, see .eco-home-header/.eco-home-hero) same as desktop's
     110px — this was left at a stale 56px from before the header grew
     to 96px, so hero's title was rendering underneath/behind it. */
  .eco-home-hero__inner { grid-template-columns: 1fr; gap: 48px; padding: 110px 24px 64px; }
  .eco-home-panel__stage { max-width: 420px; margin: 0 auto; }
}

@media (max-width: 480px) {
  .eco-home-panel__card { padding: 16px; }
  .eco-home-panel__scoreval { font-size: 26px; }
  .eco-home-panel__creditval { font-size: 28px; }
}

/* .eco-home-panel__stage living inside the auth brand panel
   (template-parts/auth-shell-open.php) rather than the Hero — same
   compact card sizing as the @media(max-width:480px) rule above,
   applied unconditionally since this panel is always narrow (44%
   width, max 560px, see .eco-auth-brand in auth.css) regardless of
   viewport. The decorative rings are deliberately left at full size —
   .eco-auth-brand already clips with overflow:hidden, same as the
   plain circles this replaced were designed to bleed off-panel. */
/* Normal flex flow, in document order right after the logo — not
   position:absolute (per feedback: show the whole thing under the
   logo, not as a cropped background decoration). */
/* margin-top: auto pushes this to the bottom of .eco-auth-brand's flex
   column (same trick .eco-auth-brand__content used to use before the
   stage-wrap existed) — the stage sits at the foot of the panel, with
   whatever space is left above it (logo/title) rather than sitting
   right under the title. */
/* Negative margin-bottom pulls it past .eco-auth-brand's own padding
   (var(--space-12), 48px) instead of leaving that full gap below it —
   margin-top:auto already pushes it as far down as the flex column
   allows, so closing the rest of the gap has to happen here. */
.eco-auth-brand__stage-wrap { margin: 20px 0 -32px; margin-top: auto; pointer-events: none; }
/* No max-width cap — full width of the parent, not capped at an
   arbitrary px value. */
.eco-auth-brand .eco-home-panel__stage { max-width: none; margin: 0; }
/* Bigger than the Hero's version, and anchored off toward the
   bottom-left corner instead of centered — only a slice of each ring
   peeks into view, clipped by .eco-auth-brand's own overflow:hidden.
   Same partial-bleed idea the original plain circles here used. */
/* animation: none — ring-a/ring-c's spin keyframes (see
   eco-panel-ring-spin) bake in transform: translate(-50%,-50%), which
   would keep overriding the transform:none below every frame since a
   running animation always wins that property regardless of selector
   specificity. Static rings read fine here; the spin was a Hero-only
   nicety, not asked for on this screen. */
/* Same anchor point (left/bottom 0 — the stage's own bottom-left
   corner) for all 3 — translate(-50%, 50%) self-centers each ring on
   that shared point regardless of its own size, same trick the
   centered Hero version uses, just pointed at a corner instead of the
   middle so only their upper-right arcs show. This is what makes them
   concentric despite the different diameters. */
.eco-auth-brand .eco-home-panel__orb--ring-a { width: 640px; height: 640px; top: auto; left: 0; bottom: 0; transform: translate(-50%, 50%); animation: none; }
.eco-auth-brand .eco-home-panel__orb--ring-b { width: 480px; height: 480px; top: auto; left: 0; bottom: 0; transform: translate(-50%, 50%); }
.eco-auth-brand .eco-home-panel__orb--ring-c { width: 340px; height: 340px; top: auto; left: 0; bottom: 0; transform: translate(-50%, 50%); animation: none; }
/* The droplet track is hardcoded to ring-b's Hero size/position
   (390px, dead center) — hidden here rather than also re-deriving its
   geometry for ring-b's new bottom-left placement above. */
.eco-auth-brand .eco-home-panel__orb-droplet-track { display: none; }
.eco-auth-brand .eco-home-panel__card { padding: 16px; }
.eco-auth-brand .eco-home-panel__scoreval { font-size: 26px; }
.eco-auth-brand .eco-home-panel__creditval { font-size: 28px; }

/* ============================================================
   Dual Engine
   ============================================================ */
.eco-home-dual { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border-subtle); border-radius: 20px; overflow: hidden; background: var(--eco-indigo); }
.eco-home-dual__col { padding: 44px 44px 40px; background: var(--eco-white); }
/* Was missing its own background (bug: fell through to the white
   base rule above, making the light-colored text unreadable) —
   client feedback asked for this column's background to be refreshed,
   so it's fixed here with a deliberate dark navy rather than left
   relying on the parent .eco-home-dual's background showing through. */
.eco-home-dual__col--dark { background: var(--eco-indigo); color: var(--eco-white); }
/* Flat neon was too harsh to read — softened into a white-dominant
   background with the neon glow pulled back to just the bottom-right
   corner (~1/3 of the card), same compositional idea as the Hero's own
   background (accent-color glow fading into a base) but with white as
   the dominant tone here since this column keeps dark ink text + white
   card tiles. */
.eco-home-dual__col:not(.eco-home-dual__col--dark) {
  position: relative;
  background:
    radial-gradient(83% 83% at 88% 92%, rgba(188, 237, 9, 0.55), transparent 70%),
    var(--eco-white);
  border-left: 1px solid var(--border-subtle);
}
/* Subtle noise over the gradient, same feTurbulence technique as
   .eco-home-pt. Uses ::after (painted last = on top of everything in
   this column, no z-index needed) rather than a z-index:-1 ::before —
   that version turned out unreliable/invisible in practice, this one
   isn't ambiguous about paint order. mix-blend-mode + low opacity
   keeps it from meaningfully darkening the text/tiles it sits over. */
.eco-home-dual__col:not(.eco-home-dual__col--dark)::after {
  content: '';
  position: absolute;
  inset: 0;
  /* multiply, not overlay — overlay barely shows up against a
     near-white base (it mostly affects mid-tones/shadows), multiply
     darkens visibly regardless of how light the base is. */
  opacity: 0.22;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.eco-home-flow { display: flex; flex-direction: column; }
.eco-home-flow__step { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--border-subtle); border-radius: 10px; background: var(--eco-white); font-size: 15.5px; font-weight: 600; color: var(--eco-ink); transition: border-color 0.2s, transform 0.2s; }
.eco-home-flow__step:hover { border-color: var(--eco-blue); transform: translateX(3px); }
.eco-home-flow__num { font-size: 12.5px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.eco-home-flow__arrow { display: flex; justify-content: center; color: var(--eco-slate-300); padding: 5px 0; }
/* Same traveling neon-glow "follow" treatment as .eco-home-audience__pain
   (Who We Serve's pain-points chain) — 3 steps here instead of 4, so the
   stagger is a third of the cycle instead of a quarter. */
.eco-home-flow--light .eco-home-flow__step { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04); color: var(--eco-white); }
.eco-home-flow--light .eco-home-flow__step:nth-child(1) { animation-delay: 0s; }
.eco-home-flow--light .eco-home-flow__step:nth-child(3) { animation-delay: 1.1s; }
.eco-home-flow--light .eco-home-flow__step:nth-child(5) { animation-delay: 2.1s; }
@keyframes eco-flow-chain-glow {
  0%, 100% { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04); }
  5% { border-color: var(--eco-green); background: rgba(188, 237, 9, 0.14); }
  20% { border-color: var(--eco-green); background: rgba(188, 237, 9, 0.14); }
  32% { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.04); }
}
.eco-home-flow--light .eco-home-flow__num { color: rgba(255, 255, 255, 0.4); }
.eco-home-flow--light .eco-home-flow__arrow { color: rgba(255, 255, 255, 0.3); }
@media (prefers-reduced-motion: reduce) {
  .eco-home-flow--light .eco-home-flow__step { animation: none; }
}

.eco-home-dual__desc { margin: 0 0 26px; }

/* Outputs — reuses the original score-tile grid's own visual language
   (same tile size/radius/background) rather than a plain text list, so
   the new "Outputs" content still reads as part of this design instead
   of bolted-on text. Plain tiles show just a label (.eco-home-dual__score-label);
   the one stat tile (25+) keeps the original k/v/t-style big-number layout. */
.eco-home-dual__scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0 30px; }
/* Plain card — the glow lives entirely in the traveling droplet below,
   not in the border/shadow itself (no "whole border glowing"). */
/* Glowing card, one tile at a time — each tile gets its own slot in a
   shared 8.4s cycle (6 slots x 1.4s, enough for the 5 visible tiles
   plus the currently-hidden --hi one) via a shuffled nth-child->slot
   assignment, not visual left-to-right order, so which tile is lit
   doesn't read as a predictable sweep. Slots don't overlap, so exactly
   one tile is ever glowing at a time. */
.eco-home-dual__score { position: relative; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.09); border: 1px solid var(--glow-off, rgba(255, 255, 255, 0.16)); color: var(--eco-white); display: flex; flex-direction: column; justify-content: center; min-height: 64px; animation: eco-score-glow-solo 8.4s ease-in-out infinite; }
.eco-home-dual__score--hi { background: var(--eco-green); color: var(--eco-indigo); border-color: transparent; }
.eco-home-dual__score-label { font-size: 15px; font-weight: 700; line-height: 1.3; }
.eco-home-dual__score-v { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; }
.eco-home-dual__score-t { font-size: 12.5px; font-weight: 600; opacity: 0.85; margin-top: 4px; }
/* Reporting column (light bg) uses a deep blue glow instead of neon
   green here — green barely reads against white, blue is much more
   visible/legible in this context. */
.eco-home-dual__col:not(.eco-home-dual__col--dark) .eco-home-dual__score { --glow-off: var(--border-subtle); --glow-on: var(--eco-blue); --glow-shadow: rgba(47, 82, 224, 0.4); --glow-shadow-inset: rgba(47, 82, 224, 0.12); background: var(--eco-white); color: var(--eco-ink); }
.eco-home-dual__col:not(.eco-home-dual__col--dark) .eco-home-dual__score--hi { background: var(--eco-white); color: var(--eco-blue); }
@keyframes eco-score-glow-solo {
  0%, 20%, 100% { border-color: var(--glow-off, rgba(255, 255, 255, 0.16)); box-shadow: none; }
  4%, 16% { border-color: var(--glow-on, var(--eco-green)); box-shadow: 0 0 16px var(--glow-shadow, rgba(188, 237, 9, 0.4)), inset 0 0 10px var(--glow-shadow-inset, rgba(188, 237, 9, 0.1)); }
}
.eco-home-dual__score:nth-child(1) { animation-delay: 5.6s; }
.eco-home-dual__score:nth-child(2) { animation-delay: 2.8s; }
.eco-home-dual__score:nth-child(3) { animation-delay: 7s; }
.eco-home-dual__score:nth-child(4) { animation-delay: 0s; }
.eco-home-dual__score:nth-child(5) { animation-delay: 4.2s; }
.eco-home-dual__score:nth-child(6) { animation-delay: 1.4s; }
@media (prefers-reduced-motion: reduce) {
  .eco-home-dual__score { animation: none; }
}

/* Animated glowing droplet traveling the card's own rounded-rect
   border, continuously, from page load — not a hover effect, not a
   spinning border/gradient, not the whole border glowing. CSS Motion
   Path (offset-path: border-box) walks the element along the card's
   actual border box, so it naturally follows the rounded corners
   instead of cutting through them. Unsupported browsers (offset-path
   has partial support) just show a static, harmless dot — the card
   itself is unaffected either way. */
/* Small head + long fading tail, like an actual water droplet — the
   tail is a separate elongated ::before gradient, the bright core an
   ::after dot at its leading edge. offset-rotate: auto (not a fixed
   0deg) is what keeps the tail pointing backward correctly on every
   edge/corner, since it rotates the element to match the path's
   tangent direction as it travels. */
.eco-home-dual__score-droplet {
  /* Turned off per feedback — didn't read well in practice. Markup/rest
     of the rule left in place in case it's worth revisiting later. */
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 1.5px;
  pointer-events: none;
  offset-path: border-box;
  offset-distance: 0%;
  offset-rotate: auto;
  animation: eco-score-droplet-travel 4s linear infinite;
}
.eco-home-dual__score-droplet::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(to right, transparent 0%, rgba(188, 237, 9, 0.45) 55%, var(--eco-green) 100%);
  filter: blur(0.5px);
}
.eco-home-dual__score-droplet::after {
  content: '';
  position: absolute;
  right: -0.5px;
  top: 50%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle, #fff 0%, var(--eco-green) 60%, transparent 100%);
  box-shadow: 0 0 5px 1px rgba(188, 237, 9, 0.9);
}
@keyframes eco-score-droplet-travel {
  to { offset-distance: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .eco-home-dual__score-droplet { animation: none; }
}

@media (max-width: 1080px) {
  .eco-home-dual { grid-template-columns: 1fr; }
  .eco-home-dual__col:not(.eco-home-dual__col--dark) { border-left: none; border-top: 1px solid var(--border-subtle); }
}

@media (max-width: 480px) {
  .eco-home-dual__scores { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Value Prop
   ============================================================ */
.eco-home-value { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; }
.eco-home-value__head h2 { max-width: 420px; }
.eco-home-value__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 44px; }
.eco-home-value__item { border-top: 2px solid var(--eco-ink); padding-top: 18px; }
.eco-home-value__top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.eco-home-value__n { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.eco-home-value__t { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--eco-ink); }
.eco-home-value__s { font-size: 13.5px; font-weight: 600; color: var(--eco-blue); margin: 16px 0 6px; }
.eco-home-value__d { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); margin: 0; }

.eco-home-value__viz { height: 30px; display: flex; align-items: center; }
.eco-home-value__viz--dual { gap: 8px; }
.eco-home-value__viz--dual span { height: 6px; border-radius: 3px; flex: 1; }
.eco-home-value__viz--dual span:first-child { background: var(--eco-green); }
.eco-home-value__viz--dual span:last-child { background: var(--eco-blue); }
.eco-home-value__viz--grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; width: 100%; }
.eco-home-value__viz--grid span { height: 6px; border-radius: 2px; background: var(--eco-slate-200); }
.eco-home-value__viz--grid span.eco-home-value__cell--on { background: var(--eco-blue); }
.eco-home-value__viz--arrow { gap: 6px; color: var(--eco-blue); }
.eco-home-value__track { height: 6px; flex: 1; border-radius: 3px; background: var(--eco-blue-100); }
.eco-home-value__nub { height: 6px; width: 26px; border-radius: 3px; background: var(--eco-blue); }

@media (max-width: 1080px) {
  .eco-home-value,
  .eco-home-dual,
  .eco-home-audience,
  .eco-home-network,
  .eco-home-people,
  .eco-home-finalcta__inner { grid-template-columns: 1fr !important; gap: 0 !important; }
  .eco-home-value__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 820px) {
  .eco-home-value__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Dashboard Showcase
   ============================================================ */
.eco-home-shot-tags { display: flex; gap: 26px; flex-wrap: wrap; padding: 22px 0 24px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.eco-home-shot-tags span { display: flex; align-items: center; gap: 8px; }
.eco-home-shot-tags__dot { width: 5px; height: 5px; border-radius: 3px; background: var(--eco-green); }

/* Sectors line — 3 representative examples + a "+N more" badge, not
   an exhaustive list (see ADR-0015's industry taxonomy — the real
   list lives in the Data network section further up this page). */
.eco-home-shot-sectors { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); margin-bottom: 22px; }
.eco-home-shot-sectors__label { font-weight: 700; color: var(--eco-ink); }
.eco-home-shot-sectors__dot { opacity: 0.4; }
.eco-home-shot-sectors__badge { font-size: 11.5px; font-weight: 700; color: var(--text-muted); background: var(--eco-slate-50); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 3px 10px; }

.eco-home-shot { border: 1px solid var(--border-subtle); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px rgba(18, 15, 136, 0.14); display: grid; grid-template-columns: 196px 1fr; background: var(--eco-white); }
.eco-home-shot__side { background: var(--eco-indigo); color: var(--eco-white); padding: 20px 16px; }
.eco-home-shot__logo { height: 22px; margin-bottom: 26px; }
.eco-home-shot__nav { display: flex; flex-direction: column; gap: 2px; }
.eco-home-shot__nav span { font-size: 13px; font-weight: 500; padding: 8px 10px; border-radius: 8px; color: rgba(255, 255, 255, 0.62); }
.eco-home-shot__nav-item--active { font-weight: 700 !important; background: rgba(255, 255, 255, 0.1); color: var(--eco-white) !important; }
.eco-home-shot__completion { margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.eco-home-shot__completion-track { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); }
.eco-home-shot__completion-fill { height: 100%; border-radius: 3px; background: var(--eco-green); transition: width 1.3s cubic-bezier(0.2, 0.7, 0.3, 1); }
.eco-home-shot__completion-note { font-size: 11.5px; color: rgba(255, 255, 255, 0.6); margin-top: 7px; }
.eco-home-shot__sector { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.eco-home-shot__sector-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.45); margin-bottom: 10px; }
.eco-home-shot__sector-row { display: flex; align-items: center; gap: 8px; }
.eco-home-shot__sector-icon { width: 24px; height: 24px; border-radius: 7px; background: rgba(255, 255, 255, 0.1); color: var(--eco-green); display: grid; place-items: center; flex-shrink: 0; }
.eco-home-shot__sector-row span:last-child { font-size: 12.5px; font-weight: 700; color: var(--eco-white); }

/* .eco-home-shot is a grid (196px sidebar + 1fr main) that stretches
   both cells to equal height — main's own content (head/scores/grid3)
   is naturally shorter than the sidebar, leaving blank space below
   .eco-home-shot__grid3. Filled with a textured gray rather than left
   as plain white dead space. */
.eco-home-shot__main { position: relative; background: var(--eco-slate-50); display: flex; flex-direction: column; }
.eco-home-shot__main::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.15;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.eco-home-shot__head { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 24px; border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; background: var(--eco-white); }
.eco-home-shot__head-pills { margin-left: auto; display: flex; gap: 8px; }
.eco-home-shot__scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border-subtle); }
.eco-home-shot__score { padding: 20px 24px; background: var(--eco-white); color: var(--eco-ink); }
.eco-home-shot__score--dark { background: var(--eco-indigo); color: var(--eco-white); }
.eco-home-shot__score-row { display: flex; align-items: flex-end; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 42px; line-height: 0.9; }
.eco-home-shot__score-row em { font-family: var(--font-body); font-style: normal; font-size: 12px; font-weight: 600; color: var(--text-muted); padding-bottom: 5px; }
.eco-home-shot__score--dark .eco-home-shot__score-row em { color: var(--eco-green); }

.eco-home-shot__grid3 { flex: 1; display: grid; grid-template-columns: 1.1fr 1fr 0.9fr; gap: 1px; background: var(--border-subtle); border-top: 1px solid var(--border-subtle); }
.eco-home-shot__grid3 > div { padding: 20px 24px; background: var(--eco-white); }
.eco-home-shot__trend-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); margin-top: 8px; }
.eco-home-compare-row { margin-bottom: 12px; }
.eco-home-compare-row__head { display: flex; justify-content: space-between; font-size: 11.5px; margin-bottom: 5px; color: var(--text-muted); font-weight: 500; }
.eco-home-compare-row__head--hi { color: var(--eco-ink); font-weight: 700; }
.eco-home-compare-row__track { height: 8px; border-radius: 4px; background: var(--eco-slate-100); }
.eco-home-compare-row__fill { height: 100%; border-radius: 4px; background: var(--eco-blue-100); transition: width 1.1s cubic-bezier(0.2, 0.7, 0.3, 1); }
.eco-home-compare-row__fill--hi { background: var(--eco-indigo); }

@media (max-width: 1080px) {
  .eco-home-shot { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .eco-home-shot { overflow-x: auto; }
  .eco-home-shot__main { min-width: 660px; }
}

/* ============================================================
   Capabilities — auto-advancing tabs (watershed.com-style)
   ============================================================ */
.eco-home-pt {
  position: relative;
  padding: 104px 0;
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 12% -10%, rgba(47, 82, 224, 0.4), transparent 60%),
    radial-gradient(55% 55% at 92% 105%, rgba(188, 237, 9, 0.14), transparent 65%),
    linear-gradient(160deg, #171296 0%, #0c0968 55%, #05043f 100%);
}
/* Subtle film-grain noise (feTurbulence SVG data-URI) over the
   gradient so the dark fill doesn't read as flat/solid. */
.eco-home-pt::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.eco-home-pt .eco-home-section__inner { position: relative; z-index: 1; }
.eco-home-pt__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: 48px; }
.eco-home-pt__title { max-width: 520px; }
.eco-home-pt__sub { max-width: 480px; margin-top: 14px; }

.eco-home-pt__grid { display: grid; grid-template-columns: 340px 1fr; gap: 56px; }

/* ---- Tab list ---- */
.eco-home-pt__tabs { display: flex; flex-direction: column; }
.eco-home-pt__tab { display: block; width: 100%; text-align: left; background: none; border: none; padding: 22px 0 18px; cursor: pointer; font-family: var(--font-body); }
.eco-home-pt__tab-head { display: flex; align-items: center; gap: 12px; }
.eco-home-pt__tab-num { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.4); transition: color 0.25s; }
.eco-home-pt__tab--active .eco-home-pt__tab-num { color: var(--eco-green); }
.eco-home-pt__tab-title { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.5); transition: color 0.25s; }
.eco-home-pt__tab--active .eco-home-pt__tab-title { color: var(--eco-white); }
.eco-home-pt__tab-head .eco-home-pill { margin-left: auto; }
.eco-home-pt__tab-desc { display: none; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.65); max-width: 300px; margin: 10px 0 0; }
.eco-home-pt__tab--active .eco-home-pt__tab-desc { display: block; }
.eco-home-pt__tab-track { position: relative; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); margin-top: 16px; overflow: hidden; }
.eco-home-pt__tab-fill { position: absolute; inset: 0; width: 0%; border-radius: 2px; background: var(--eco-green); animation: eco-pt-fill 5.2s linear; }
@keyframes eco-pt-fill { from { width: 0%; } to { width: 100%; } }
.eco-home-pt__tabs:hover .eco-home-pt__tab-fill,
.eco-home-pt__grid:has(.eco-home-pt__panel:hover) .eco-home-pt__tab-fill { animation-play-state: paused; }

/* ---- Preview panel ---- */
.eco-home-pt__panel { position: relative; border-radius: 18px; min-height: 500px; padding: 32px; background: linear-gradient(135deg, rgba(47, 82, 224, 0.35), rgba(18, 15, 136, 0.15)); overflow: hidden; }
.eco-home-pt__panel-inner { position: absolute; inset: 32px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(10px); transition: opacity 0.45s ease, transform 0.45s ease; pointer-events: none; }
.eco-home-pt__panel-inner--active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.eco-home-pt__match { flex-direction: column; text-align: center; gap: 14px; }

.eco-home-pt__score-card,
.eco-home-pt__check-card { width: 100%; max-width: 320px; background: var(--eco-white); border-radius: 16px; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35); padding: 24px; }
.eco-home-pt__score-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); font-size: 14px; font-weight: 600; color: var(--eco-ink); }
.eco-home-pt__score-row:last-child { border-bottom: none; }
.eco-home-pt__score-row--hi { background: var(--eco-indigo); color: var(--eco-white); margin: 0 -24px; padding: 12px 24px; border-radius: 10px; border-bottom: none; }
.eco-home-pt__score-val { font-family: var(--font-display); font-weight: 800; font-size: 18px; display: flex; align-items: baseline; gap: 8px; }
.eco-home-pt__score-val em { font-family: var(--font-body); font-style: normal; font-weight: 600; font-size: 12px; color: var(--eco-blue); }
.eco-home-pt__score-row--hi .eco-home-pt__score-val em { color: var(--eco-green); }

.eco-home-pt__check-item { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--eco-ink); padding: 8px 0; }
.eco-home-pt__check-icon { display: flex; color: var(--eco-green); flex-shrink: 0; }

.eco-home-pt__match-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: var(--eco-green); display: grid; place-items: center; }
.eco-home-pt__match-title { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--eco-white); }
.eco-home-pt__match-caption { font-size: 14px; color: rgba(255, 255, 255, 0.6); max-width: 260px; margin: 0; }

@media (max-width: 860px) {
  .eco-home-pt__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .eco-home-pt__tab-fill { animation: none !important; }
  .eco-home-pt__panel-inner { transition: none; }
}

/* ============================================================
   People
   ============================================================ */
.eco-home-people { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 0.9fr); gap: 64px; align-items: center; }
.eco-home-people__founder { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: 2px; }
.eco-home-people__founder-name { font-size: 16px; font-weight: 700; color: var(--eco-ink); }
.eco-home-people__founder-role { font-size: 13.5px; color: var(--text-muted); }
.eco-home-people > div:first-child .eco-home-textlink { margin-top: 18px; }

.eco-home-founder-card { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--border-subtle); border-radius: 18px; overflow: hidden; background: linear-gradient(150deg, #191590 0%, #0e0c40 100%); cursor: pointer; aspect-ratio: 4 / 5; font-family: var(--font-body); text-align: left; }
.eco-home-founder-card:hover .eco-home-founder-card__play { transform: scale(1.08); background: var(--eco-white); }
.eco-home-founder-card__badge { position: absolute; left: 24px; top: 22px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--eco-indigo); background: var(--eco-green); border-radius: var(--radius-pill); padding: 4px 10px; }
.eco-home-founder-card__dur { position: absolute; right: 22px; top: 24px; font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--radius-pill); padding: 3px 9px; }
.eco-home-founder-card__play { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--eco-indigo); display: grid; place-items: center; box-shadow: 0 14px 38px rgba(14, 12, 64, 0.36); transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1), background 0.22s; }

@media (max-width: 1080px) {
  .eco-home-people { grid-template-columns: 1fr; gap: 40px; }
}

/* ============================================================
   Founder modal
   ============================================================ */
.eco-home-modal { position: fixed; inset: 0; z-index: 100; background: rgba(14, 12, 64, 0.72); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 32px 24px; }
.eco-home-modal__panel { width: 100%; max-width: 520px; }
.eco-home-modal__head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 14px; }
.eco-home-modal__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.eco-home-modal__title { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.1; color: var(--eco-white); margin-top: 4px; }
.eco-home-modal__close { margin-left: auto; background: none; border: 1px solid rgba(255, 255, 255, 0.3); color: var(--eco-white); border-radius: var(--radius-pill); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.eco-home-modal__frame { position: relative; aspect-ratio: 4 / 5; background: #0e0c40; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.16); }
.eco-home-modal__waiting { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; }
.eco-home-modal__waiting-title { font-size: 14.5px; font-weight: 600; color: rgba(255, 255, 255, 0.82); }
.eco-home-modal__waiting-sub { font-size: 13px; color: rgba(255, 255, 255, 0.5); margin-top: 6px; max-width: 320px; }

/* ============================================================
   Who We Serve
   ============================================================ */
.eco-home-tabs { display: flex; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 38px; overflow-x: auto; }
.eco-home-tabs::-webkit-scrollbar { height: 0; }
.eco-home-tabs__btn { position: relative; display: flex; align-items: center; gap: 9px; background: none; border: none; border-radius: 10px; padding: 18px 22px 20px; font-family: var(--font-body); font-size: 15px; font-weight: 500; color: var(--text-muted); cursor: pointer; white-space: nowrap; transition: color 0.2s, background 0.2s; }
.eco-home-tabs__btn svg { color: var(--eco-slate-300); transition: color 0.2s; }
.eco-home-tabs__btn--active { background: var(--eco-green); font-weight: 700; color: var(--eco-indigo); }
.eco-home-tabs__btn--active svg { color: var(--eco-indigo); }
/* Auto-advance progress bar — same eco-pt-fill keyframe/timing as the
   Capability tabs (.eco-home-pt), see landing.js for the shared
   animationend-driven advance + hover-to-pause mechanism. */
.eco-home-tabs__track { position: absolute; left: 18px; right: 18px; bottom: 8px; height: 2px; border-radius: 2px; background: transparent; overflow: hidden; }
.eco-home-tabs__btn--active .eco-home-tabs__track { background: rgba(255, 255, 255, 0.4); }
.eco-home-tabs__fill { position: absolute; inset: 0; width: 0%; border-radius: 2px; background: var(--eco-indigo); animation: eco-pt-fill 5.2s linear; }
.eco-home-tabs:hover .eco-home-tabs__fill,
.eco-home-section__inner:has(.eco-home-audience-stack:hover) .eco-home-tabs__fill { animation-play-state: paused; }

/* All panels share one grid cell (grid-area:1/1) so the stack's height
   is always the tallest panel — swapping which one is visible (opacity,
   not display:none/hidden) no longer changes the container's height,
   which is what caused the jump on auto-advance. */
.eco-home-audience-stack { display: grid; }
.eco-home-audience { grid-area: 1 / 1; display: grid; grid-template-columns: 1.4fr 2fr; border: 1px solid var(--border-subtle); border-radius: 20px; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.eco-home-audience--active { opacity: 1; pointer-events: auto; }
.eco-home-audience__col { padding: 40px 42px; }
.eco-home-audience__col--tint { background: var(--eco-slate-50); }
.eco-home-audience__col--dark { background: var(--eco-indigo); color: var(--eco-white); }
.eco-home-audience__q { font-family: var(--font-display); font-weight: 800; font-size: 29px; line-height: 1.08; letter-spacing: -0.02em; color: var(--eco-ink); margin: 14px 0 28px; }
.eco-home-audience__q--light { color: var(--eco-white); }
.eco-home-audience__body { margin: 0 0 28px; }
.eco-home-audience__chain { display: flex; flex-direction: column; }
.eco-home-audience__pain { font-size: 15px; font-weight: 600; color: var(--text-body); padding: 11px 15px; background: var(--eco-white); border: 1px solid var(--border-subtle); border-radius: 10px; animation: eco-audience-chain-glow 3.2s ease-in-out infinite; }
.eco-home-audience__arrow { display: flex; justify-content: center; color: var(--eco-slate-300); padding: 6px 0; animation: eco-audience-chain-arrow-glow 3.2s ease-in-out infinite; }
.eco-home-audience__arrow svg { stroke-width: 2.6; }

/* "Follow" highlight — travels down the chain, one item at a time,
   then loops. Each pain shares the same 3.2s cycle, staggered a
   quarter-cycle apart (0.8s) via nth-child position (pains sit at
   odd child indexes 1/3/5/7, arrows at the even ones between them),
   so the glow hands off smoothly to the next item as it fades. Arrows
   glow too, delayed to the midpoint between the pain either side of
   them, so the highlight visibly passes through the connector. */
@keyframes eco-audience-chain-glow {
  0%, 100% { border-color: var(--border-subtle); background: var(--eco-white); }
  5% { border-color: var(--eco-green); background: var(--eco-green-100); }
  20% { border-color: var(--eco-green); background: var(--eco-green-100); }
  32% { border-color: var(--border-subtle); background: var(--eco-white); }
}
.eco-home-audience__pain:nth-child(1) { animation-delay: 0s; }
.eco-home-audience__pain:nth-child(3) { animation-delay: 0.8s; }
.eco-home-audience__pain:nth-child(5) { animation-delay: 1.6s; }
.eco-home-audience__pain:nth-child(7) { animation-delay: 2.4s; }

@keyframes eco-audience-chain-arrow-glow {
  0%, 100% { color: var(--eco-slate-300); }
  8% { color: var(--eco-green); }
  20% { color: var(--eco-slate-300); }
}
.eco-home-audience__arrow:nth-child(2) { animation-delay: 0.4s; }
.eco-home-audience__arrow:nth-child(4) { animation-delay: 1.2s; }
.eco-home-audience__arrow:nth-child(6) { animation-delay: 2s; }

@media (prefers-reduced-motion: reduce) {
  .eco-home-audience__pain,
  .eco-home-audience__arrow { animation: none; }
}
.eco-home-audience__sols { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.eco-home-audience__sol { display: flex; align-items: flex-start; gap: 12px; }
.eco-home-audience__sol-check { width: 24px; height: 24px; border-radius: 7px; background: var(--eco-green); color: var(--eco-indigo); display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; }
.eco-home-audience__sol-text { flex: 1; }
.eco-home-audience__sol-t { font-size: 15px; font-weight: 700; color: var(--eco-white); }
.eco-home-audience__sol-d { font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.68); margin: 4px 0 0; }

@media (max-width: 1080px) {
  .eco-home-audience { grid-template-columns: 1fr; }
}

/* ============================================================
   Network
   ============================================================ */
.eco-home-network { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; align-items: center; }
.eco-home-network__badge-row { display: flex; justify-content: center; }
.eco-home-network__badge { display: inline-flex; align-items: center; gap: 10px; background: var(--eco-indigo); color: var(--eco-white); padding: 11px 22px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 700; }
.eco-home-network__badge img { height: 16px; }
.eco-home-network__tree { width: 100%; height: 62px; display: block; }
/* "Traveling current" pulse — a second neon overlay on the same wire
   path, dashed and animated via stroke-dashoffset so short pulses
   appear to run from EcoChain down into the 3 data layers, looping.
   -28 is -2x the 14 (4+10) dash+gap cycle, so the loop has no jump. */
.eco-home-network__tree-pulse {
  stroke-dasharray: 2 6;
  animation: eco-network-tree-flow 1.6s linear infinite;
}
@keyframes eco-network-tree-flow {
  /* -16 = -2x the 8 (2+6) dash+gap cycle, so the loop has no jump. */
  to { stroke-dashoffset: -16; }
}
@media (prefers-reduced-motion: reduce) {
  .eco-home-network__tree-pulse { animation: none; opacity: 0; }
}
.eco-home-network__layers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 26px; }
.eco-home-network__layer { background: var(--eco-indigo); border: 1px solid var(--eco-indigo); border-radius: 12px; padding: 16px; }
.eco-home-network__layer-t { font-size: 17px; font-weight: 700; color: var(--eco-white); }
.eco-home-network__layer-d { font-size: 14px; color: rgba(255, 255, 255, 0.72); margin-top: 4px; line-height: 1.45; }
.eco-home-network__nodes { display: flex; flex-wrap: wrap; gap: 8px; }
.eco-home-network__node { font-size: 13px; font-weight: 600; color: var(--text-body); background: var(--eco-white); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); padding: 7px 14px; transition: border-color 0.2s, color 0.2s; }
.eco-home-network__node:hover { border-color: var(--eco-blue); color: var(--eco-blue); }

@media (max-width: 1080px) {
  .eco-home-network__layers { grid-template-columns: 1fr; }
}

/* ============================================================
   Final CTA
   ============================================================ */
.eco-home-finalcta { background: var(--eco-indigo); color: var(--eco-white); position: relative; overflow: hidden; }
.eco-home-finalcta__lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.5; }
.eco-home-finalcta__inner { position: relative; max-width: 1440px; margin: 0 auto; padding: 104px 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.eco-home-finalcta__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
/* Contact grid — 2x2, spec supplied as Tailwind utility classes,
   ported to this project's plain CSS (no Tailwind here) with the same
   literal colors/sizes rather than substituting brand tokens. */
.eco-home-finalcta__contact { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.eco-home-finalcta__card { background: #f3f2f8; border-radius: 16px; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; min-height: 200px; }
.eco-home-finalcta__card-t { font-size: 20px; font-weight: 600; color: #111827; }
.eco-home-finalcta__card-d { font-size: 15px; color: #4b5563; margin: 8px 0 24px; }
/* Specificity bumped (.eco-home-finalcta__contact + .eco-home-finalcta__card-btn)
   to beat .eco-home-page a's class+tag rule — same fix as the header
   nav links needed, see landing.css's note there. */
.eco-home-finalcta__contact .eco-home-finalcta__card-btn { width: fit-content; border-radius: 999px; background: var(--eco-green); padding: 8px 20px; font-size: 14px; font-weight: 700; color: var(--eco-indigo); text-decoration: none; transition: background-color 0.2s; }
.eco-home-finalcta__contact .eco-home-finalcta__card-btn:hover { background: var(--eco-green-600); }

@media (max-width: 640px) {
  .eco-home-finalcta__contact { grid-template-columns: 1fr; }
}

/* ============================================================
   Footer
   ============================================================ */
/* Starts at the same indigo as .eco-home-finalcta right above it (seamless
   continuation, no visible seam at the section boundary), then deepens
   toward --eco-ink by the bottom edge. */
.eco-home-footer { background: linear-gradient(to bottom, var(--eco-indigo) 0%, var(--eco-ink) 100%); border-top: 1px solid rgba(255, 255, 255, 0.12); }
.eco-home-footer__cols { max-width: 1920px; margin: 0 auto; padding: 80px 40px 36px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 0.7fr; gap: 44px; }
/* Colored logomark reads poorly on this now-dark background — swap to
   the white mark already used elsewhere for dark surfaces (Hero,
   header default state), same reasoning as those. 3x the old 28px. */
.eco-home-footer__logo { height: 84px; margin-bottom: 20px; }
.eco-home-footer__desc { font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.65); margin: 0; max-width: 320px; }
.eco-home-footer__label { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-bottom: 16px; }
/* Specificity bumped (.eco-home-footer__cols + .eco-home-footer__link)
   to beat .eco-home-page a's rule — same recurring fix as the header
   nav links and finalcta button; a single class alone (0,1,0) loses to
   that rule's (0,1,1), which would otherwise render these links in
   --text-link blue instead of white on this now-indigo background. */
.eco-home-footer__cols .eco-home-footer__link { display: block; font-size: 16px; color: rgba(255, 255, 255, 0.72); text-decoration: none; margin-bottom: 12px; transition: color 0.2s; }
.eco-home-footer__cols .eco-home-footer__link:hover { color: var(--eco-green); }
.eco-home-footer__bottom { max-width: 1920px; margin: 0 auto; padding: 20px 40px 44px; }
.eco-home-footer__bottom-inner { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 20px; display: flex; gap: 24px; flex-wrap: wrap; font-size: 14.5px; color: rgba(255, 255, 255, 0.55); }
.eco-home-footer__bottom-inner a { color: rgba(255, 255, 255, 0.72); text-decoration: none; transition: color 0.2s; }
.eco-home-footer__bottom-inner a:hover { color: var(--eco-green); }
.eco-home-footer__powered { margin-left: auto; }

@media (max-width: 1080px) {
  .eco-home-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .eco-home-footer__cols { grid-template-columns: 1fr; }
  .eco-home-footer__logo { height: 56px; }
}

/* ============================================================
   Section-wide responsive (1080px / 820px), matching the design's
   own breakpoints
   ============================================================ */
@media (max-width: 1080px) {
  .eco-home-section__inner,
  .eco-home-header__inner,
  .eco-home-finalcta__inner,
  .eco-home-footer__cols,
  .eco-home-footer__bottom { padding-left: 24px; padding-right: 24px; }
  .eco-home-section,
  .eco-home-pt { padding: 80px 0; }
  .eco-home-finalcta__inner { padding-top: 80px; padding-bottom: 80px; }
}
@media (max-width: 820px) {
  .eco-home-section,
  .eco-home-pt { padding: 64px 0; }
  .eco-home-finalcta__inner { padding-top: 64px; padding-bottom: 64px; }
}