/* ============================================================
   ec.css — EnergyCloud v5 page layer  (rides on v5-base + v5-kit)
   ------------------------------------------------------------
   Rich combination lifted from the original energycloud.html:
     · ground  = deep blue  #0E243B  (band #143150 / scrim #08182C)
     · accent  = saffron     #E8B92E  (hover #F2C94C)
     · paper   = bone        #F4F1EC
   Alternating sections: .ec-night (rich blue) / .ec-day (bone).
   Light sections render TEXT in the rich blue. CTAs are saffron;
   on bone they'd wash out, so there they flip to a blue fill with
   saffron type. Hero + band imagery get a blue (not black) scrim.
   ============================================================ */

:root{
  --ec-blue:#0E243B; --ec-blue-2:#143150; --ec-blue-deep:#08182C;
  --ec-saffron:#E8B92E; --ec-saffron-hi:#F2C94C; --ec-bone:#F4F1EC;
}

/* ---- alternating palettes (drive every kit component via tokens) ---- */
.ec-night{
  --tw-bg:var(--ec-blue); --tw-fg:#EAF2FA; --tw-mark:var(--ec-saffron);
  --tw-slogan-fg:#9DB1C6; --tw-line:rgba(234,242,250,0.14); --tw-data-bg:rgba(234,242,250,0.045);
  --v5-on-mark:#0E243B;
  background:var(--tw-bg); color:var(--tw-fg);
}
.ec-day{
  --tw-bg:var(--ec-bone); --tw-fg:var(--ec-blue); --tw-mark:var(--ec-blue);
  --tw-slogan-fg:#3A4856; --tw-line:rgba(14,36,59,0.14); --tw-data-bg:#FFFFFF;
  --v5-on-mark:var(--ec-saffron);
  background:var(--tw-bg); color:var(--tw-fg);
}
/* band over a photo is always a night ground */
.ec-band{ isolation:isolate; }

/* ---- CTA: saffron everywhere; blue fill on bone so it never washes out ---- */
.ec-night .v5-btn--primary{ background:var(--ec-saffron); color:var(--ec-blue); border-color:var(--ec-saffron); }
.ec-night .v5-btn--primary:hover{ background:var(--ec-saffron-hi); color:var(--ec-blue); }
.ec-day .v5-btn--primary{ background:var(--ec-blue); color:var(--ec-saffron); border-color:var(--ec-blue); }
.ec-day .v5-btn--primary:hover{ background:var(--ec-blue-2); color:var(--ec-saffron-hi); }
.ec-day .v5-btn:not(.v5-btn--primary){ color:var(--ec-blue); border-color:rgba(14,36,59,0.22); }
.ec-day .v5-btn:not(.v5-btn--primary):hover{ border-color:var(--ec-blue); color:var(--ec-blue); background:rgba(14,36,59,0.04); }
.ec-night .v5-btn:not(.v5-btn--primary){ color:#EAF2FA; border-color:rgba(234,242,250,0.24); }
.ec-night .v5-btn:not(.v5-btn--primary):hover{ border-color:var(--ec-saffron); color:var(--ec-saffron); }
/* chrome bar CTA stays saffron */
.bar__cta.tw-btn--primary{ background:var(--ec-saffron); color:var(--ec-blue); border-color:var(--ec-saffron); }

/* ---- HERO: big H1 (matched to the original), blue scrim ---- */
.ec .v5-hero{ min-height:clamp(620px,86vh,900px); }
.ec .v5-hero h1{ font-size:clamp(2.75rem,7vw,5.75rem); line-height:0.96; letter-spacing:-0.05em; max-width:16ch; }
.ec .v5-hero__lede{ font-size:clamp(1.0625rem,1.4vw,1.3125rem); max-width:50ch; }
.ec .v5-hero__scrim{
  background:
    linear-gradient(90deg, rgba(8,24,44,0.94) 0%, rgba(8,24,44,0.66) 42%, rgba(20,49,80,0.22) 100%),
    linear-gradient(180deg, rgba(8,24,44,0.30) 0%, rgba(8,24,44,0.78) 100%);
}
/* blue scrim on any photographic band */
.ec .v5-section--band .v5-section__scrim{
  background:linear-gradient(180deg, rgba(8,24,44,0.90) 0%, rgba(8,24,44,0.72) 38%, rgba(8,24,44,0.92) 100%);
}
.ec .v5-section--band .v5-section__media img{ filter:saturate(0.92) contrast(1.04) brightness(0.92); }

/* ---- HERO telemetry card (glass, live-fleet feel) ---- */
.ec-hero-card{ background:rgba(8,24,44,0.55); border:1px solid rgba(232,185,46,0.30); border-radius:12px;
  backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%); overflow:hidden; box-shadow:0 24px 60px -20px rgba(0,0,0,0.6); }
.ec-hero-card__top{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px;
  border-bottom:1px solid rgba(234,242,250,0.12); font-family:var(--tw-font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:rgba(234,242,250,0.72); }
.ec-hero-card__top .live{ display:inline-flex; align-items:center; gap:7px; color:var(--ec-saffron); }
.ec-hero-card__top .live .d{ width:7px; height:7px; border-radius:50%; background:var(--ec-saffron); box-shadow:0 0 0 0 rgba(232,185,46,.6); animation:ecpulse 1.8s var(--tw-ease) infinite; }
@keyframes ecpulse{ 0%{box-shadow:0 0 0 0 rgba(232,185,46,.5)} 70%{box-shadow:0 0 0 8px rgba(232,185,46,0)} 100%{box-shadow:0 0 0 0 rgba(232,185,46,0)} }
.ec-hero-card__chart{ padding:8px 14px 0; }
.ec-hero-card__chart svg{ width:100%; height:auto; display:block; }
.ec-hero-card__stats{ display:grid; grid-template-columns:1fr 1fr; }
.ec-hero-card__stat{ padding:16px 18px; }
.ec-hero-card__stat + .ec-hero-card__stat{ border-left:1px solid rgba(234,242,250,0.12); }
.ec-hero-card__stat .v{ font-family:var(--tw-font-display); font-weight:800; letter-spacing:-0.04em; font-size:clamp(1.5rem,2.4vw,2rem); line-height:1; color:#EAF2FA; }
.ec-hero-card__stat .v .u{ font-size:.45em; color:var(--ec-saffron); margin-left:4px; font-weight:700; }
.ec-hero-card__stat .l{ font-family:var(--tw-font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(234,242,250,0.62); margin-top:7px; }

/* ---- featured tier emphasis ---- */
.ec-day .v5-card--panel.is-featured{ border-color:var(--ec-blue); box-shadow:0 18px 40px -22px rgba(14,36,59,0.45); }
.ec-night .v5-card--panel.is-featured{ border-color:var(--ec-saffron); box-shadow:0 18px 44px -22px rgba(0,0,0,0.55); }
.v5-card__flag{ position:absolute; top:-11px; left:22px; z-index:4; padding:4px 12px; background:var(--ec-saffron); color:var(--ec-blue);
  font-family:var(--tw-font-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:600; border-radius:3px; }

/* ---- ROI dashboard tuning (mobile-safe grids) ---- */
.ec-roi{ border:1px solid var(--tw-line); border-radius:10px; background:var(--tw-data-bg); overflow:hidden; margin-top:clamp(32px,4vw,48px); }
.ec-roi__head{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:14px 22px; border-bottom:1px solid var(--tw-line);
  font-family:var(--tw-font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--tw-slogan-fg); }
.ec-roi__head .lead{ color:var(--tw-mark); }
.ec-roi__body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); }
.ec-roi__controls{ padding:clamp(22px,3vw,32px); border-right:1px solid var(--tw-line); display:flex; flex-direction:column; gap:22px; }
.ec-roi__row .top{ display:flex; justify-content:space-between; align-items:baseline; }
.ec-roi__row label{ font-family:var(--tw-font-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--tw-slogan-fg); }
.ec-roi__row .out{ font-family:var(--tw-font-display); font-weight:700; font-size:1.25rem; letter-spacing:-.02em; color:var(--tw-fg); }
.ec-roi__row input[type=range]{ width:100%; margin-top:10px; accent-color:var(--tw-mark); }
.ec-roi__note{ margin-top:auto; padding-top:14px; border-top:1px solid var(--tw-line); font-family:var(--tw-font-mono); font-size:10.5px; letter-spacing:.04em; color:var(--tw-slogan-fg); line-height:1.55; }
.ec-roi__out{ display:grid; grid-template-columns:repeat(2,1fr); }
.ec-roi__cell{ padding:clamp(18px,2.5vw,26px); border-bottom:1px solid var(--tw-line); }
.ec-roi__cell:nth-child(odd){ border-right:1px solid var(--tw-line); }
.ec-roi__cell .k{ font-family:var(--tw-font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--tw-slogan-fg); }
.ec-roi__cell .v{ font-family:var(--tw-font-display); font-weight:800; letter-spacing:-.03em; font-size:clamp(1.6rem,3vw,2.25rem); line-height:1; margin-top:9px; color:var(--tw-fg); }
.ec-roi__cell.hl .v{ color:var(--tw-mark); }
.ec-roi__cta{ grid-column:1 / -1; padding:clamp(18px,2.5vw,24px); display:flex; }
.ec-roi__cta .v5-btn{ width:100%; justify-content:center; }

/* ---- DROPBOX + LISTS on bone read in blue ---- */
.ec-day .v5-dropbox{ border-color:rgba(14,36,59,0.35); }
.ec-day .v5-dropbox .di{ border-color:var(--ec-blue); color:var(--ec-blue); }
.ec-day .v5-dropbox .dt{ color:var(--ec-blue); }

/* ---- MOBILE polish ---- */
@media(max-width:900px){
  .ec .v5-hero{ min-height:auto; padding:clamp(104px,22vw,140px) 0 clamp(40px,9vw,64px); align-items:flex-start; }
  .ec .v5-hero h1{ font-size:clamp(2.5rem,10vw,3.5rem); }
}
@media(max-width:820px){
  .ec-roi__body{ grid-template-columns:1fr; }
  .ec-roi__controls{ border-right:0; border-bottom:1px solid var(--tw-line); }
}
@media(max-width:520px){
  .ec-roi__out{ grid-template-columns:1fr; }
  .ec-roi__cell:nth-child(odd){ border-right:0; }
  .ec-hero-card__stats{ grid-template-columns:1fr 1fr; }
}


/* ============================================================
   EnergyCloud — financial-dashboard components (redesign)
   Lead with rand, not kWh. Bill audit, scorecard, waterfall,
   the loop, segments, roadmap honesty.
   ============================================================ */

/* ---- HERO proof card: before/after mini bars + financial stats ---- */
.ec-hero-card__bars{ padding:14px 18px 4px; }
.ec-hero-card__barrow{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.ec-hero-card__barrow:last-child{ margin-bottom:2px; }
.ec-hero-card__barlbl{ width:46px; flex:none; font-family:var(--tw-font-mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:rgba(234,242,250,0.6); }
.ec-hero-card__bartrack{ flex:1; height:14px; background:rgba(234,242,250,0.07); border-radius:3px; overflow:hidden; }
.ec-hero-card__barfill{ height:100%; border-radius:3px; }
.ec-hero-card__barfill.is-before{ background:rgba(157,177,198,0.45); }
.ec-hero-card__barfill.is-after{ background:var(--ec-saffron); }
.ec-hero-card__barval{ width:62px; flex:none; text-align:right; font-family:var(--tw-font-mono); font-size:10px; color:#EAF2FA; }

/* ---- The loop: Upload -> Analyse -> Act -> Track ---- */
.ec-loop{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:clamp(40px,5vw,60px);
  border:1px solid var(--tw-line); border-radius:10px; overflow:hidden; background:var(--tw-data-bg); }
.ec-loop__step{ position:relative; padding:clamp(22px,2.6vw,32px); border-right:1px solid var(--tw-line); display:flex; flex-direction:column; gap:12px; }
.ec-loop__step:last-child{ border-right:0; }
.ec-loop__n{ display:flex; align-items:center; justify-content:space-between; font-family:var(--tw-font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--tw-slogan-fg); }
.ec-loop__n b{ color:var(--ec-saffron); font-weight:500; }
.ec-loop__arrow{ width:22px; height:22px; border-radius:50%; border:1px solid var(--tw-line); display:flex; align-items:center; justify-content:center; color:var(--ec-saffron); }
.ec-loop__arrow svg{ width:13px; height:13px; }
.ec-loop__step:last-child .ec-loop__arrow{ color:var(--tw-slogan-fg); }
.ec-loop__verb{ font-family:var(--tw-font-display); font-weight:800; letter-spacing:-.03em; font-size:1.5rem; line-height:1; color:var(--tw-fg); }
.ec-loop__step p{ font-size:.875rem; line-height:1.5; color:var(--tw-slogan-fg); margin:0; }
.ec-loop__step p strong{ color:var(--tw-fg); font-weight:600; }
@media(max-width:880px){ .ec-loop{ grid-template-columns:1fr 1fr; } .ec-loop__step:nth-child(2){ border-right:0; } .ec-loop__step:nth-child(1),.ec-loop__step:nth-child(2){ border-bottom:1px solid var(--tw-line); } }
@media(max-width:520px){ .ec-loop{ grid-template-columns:1fr; } .ec-loop__step{ border-right:0; border-bottom:1px solid var(--tw-line); } .ec-loop__step:last-child{ border-bottom:0; } }

/* ---- Problem reframe: EMS vs EnergyCloud contrast ---- */
.ec-vs{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:clamp(28px,3vw,40px); }
.ec-vs__col{ border:1px solid var(--tw-line); border-radius:10px; padding:clamp(22px,2.6vw,30px); background:var(--tw-data-bg); }
.ec-vs__col.is-them{ opacity:.92; }
.ec-vs__col.is-us{ border-color:color-mix(in srgb, var(--ec-saffron) 55%, var(--tw-line)); position:relative; }
.ec-vs__col.is-us::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--ec-saffron); border-radius:10px 10px 0 0; }
.ec-vs__k{ font-family:var(--tw-font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--tw-slogan-fg); }
.ec-vs__col.is-us .ec-vs__k{ color:var(--ec-saffron); }
.ec-vs__q{ font-family:var(--tw-font-display); font-weight:700; letter-spacing:-.02em; font-size:1.375rem; line-height:1.12; margin:12px 0 14px; color:var(--tw-fg); }
.ec-vs__col.is-us .ec-vs__q em{ font-style:normal; color:var(--ec-saffron); }
.ec-vs__list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.ec-vs__list li{ font-size:.9375rem; line-height:1.45; color:var(--tw-slogan-fg); padding-left:22px; position:relative; }
.ec-vs__list li::before{ content:"—"; position:absolute; left:0; color:var(--tw-slogan-fg); }
.ec-vs__col.is-us .ec-vs__list li::before{ content:"+"; color:var(--ec-saffron); font-weight:700; }
.ec-vs__col.is-us .ec-vs__list li{ color:var(--tw-fg); }
@media(max-width:760px){ .ec-vs{ grid-template-columns:1fr; } }

/* ---- Pillars: grouped feature blocks with roadmap tags ---- */
.ec-pillars{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:clamp(32px,4vw,44px); }
@media(max-width:880px){ .ec-pillars{ grid-template-columns:1fr; } }
.ec-pillar{ border:1px solid var(--tw-line); border-radius:10px; background:var(--tw-data-bg); padding:clamp(22px,2.6vw,30px); }
.ec-pillar__head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding-bottom:14px; margin-bottom:16px; border-bottom:1px solid var(--tw-line); }
.ec-pillar__title{ font-family:var(--tw-font-display); font-weight:800; letter-spacing:-.025em; font-size:1.25rem; line-height:1.1; margin:0; color:var(--tw-fg); }
.ec-pillar__tag{ font-family:var(--tw-font-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ec-saffron); white-space:nowrap; }
.ec-pillar.is-core{ border-color:color-mix(in srgb, var(--ec-saffron) 50%, var(--tw-line)); }
.ec-pillar.is-core .ec-pillar__head{ border-bottom-color:color-mix(in srgb, var(--ec-saffron) 40%, var(--tw-line)); }
.ec-flist{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; }
.ec-flist li{ display:grid; grid-template-columns:1fr auto; gap:12px; align-items:start; padding:11px 0; border-bottom:1px solid var(--tw-line); }
.ec-flist li:last-child{ border-bottom:0; padding-bottom:0; }
.ec-flist .ft{ font-family:var(--tw-font-body); font-weight:600; font-size:.9375rem; color:var(--tw-fg); line-height:1.3; }
.ec-flist .fd{ display:block; font-weight:400; font-size:.8125rem; color:var(--tw-slogan-fg); margin-top:3px; line-height:1.4; }
.ec-soon{ font-family:var(--tw-font-mono); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; padding:3px 7px; border-radius:99px; border:1px solid var(--tw-line); color:var(--tw-slogan-fg); white-space:nowrap; align-self:start; margin-top:1px; }

/* ---- 360 Scorecard ring ---- */
.ec-score{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.ec-score__ring{ position:relative; width:200px; height:200px; }
.ec-score__ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ec-score__center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ec-score__grade{ font-family:var(--tw-font-display); font-weight:800; letter-spacing:-.04em; font-size:3.25rem; line-height:.9; color:var(--tw-fg); }
.ec-score__glabel{ font-family:var(--tw-font-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--tw-slogan-fg); margin-top:6px; }
.ec-score__legend{ display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; width:100%; }
.ec-score__leg{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-family:var(--tw-font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--tw-slogan-fg); }
.ec-score__leg b{ color:var(--tw-fg); font-weight:600; }
.ec-score__leg .dot{ width:8px; height:8px; border-radius:2px; flex:none; }

/* ---- Segmented use cases ---- */
.ec-segs{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(36px,4vw,52px); }
@media(max-width:980px){ .ec-segs{ grid-template-columns:1fr; } }
.ec-seg{ border:1px solid var(--tw-line); border-radius:10px; background:var(--tw-data-bg); padding:clamp(22px,2.4vw,28px); display:flex; flex-direction:column; }
.ec-seg__tag{ font-family:var(--tw-font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ec-saffron); }
.ec-seg__title{ font-family:var(--tw-font-display); font-weight:800; letter-spacing:-.025em; font-size:1.375rem; line-height:1.05; margin:8px 0 4px; color:var(--tw-fg); }
.ec-seg__sub{ font-size:.8125rem; color:var(--tw-slogan-fg); margin:0 0 18px; line-height:1.4; }
.ec-pain{ padding:14px 0; border-top:1px solid var(--tw-line); }
.ec-pain__q{ font-family:var(--tw-font-display); font-weight:600; font-style:italic; font-size:.9375rem; line-height:1.35; color:var(--tw-fg); margin:0 0 7px; }
.ec-pain__a{ font-size:.875rem; line-height:1.45; color:var(--tw-slogan-fg); margin:0; padding-left:18px; position:relative; }
.ec-pain__a::before{ content:"→"; position:absolute; left:0; color:var(--ec-saffron); font-weight:700; }

/* ---- Differentiator trust badges ---- */
.ec-badges{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:clamp(32px,4vw,44px); }
@media(max-width:980px){ .ec-badges{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .ec-badges{ grid-template-columns:1fr; } }
.ec-badge{ border:1px solid var(--tw-line); border-radius:8px; background:var(--tw-data-bg); padding:18px 16px; display:flex; flex-direction:column; gap:9px; }
.ec-badge__n{ font-family:var(--tw-font-mono); font-size:10px; letter-spacing:.18em; color:var(--ec-saffron); }
.ec-badge h4{ font-family:var(--tw-font-display); font-weight:700; letter-spacing:-.02em; font-size:1.0625rem; line-height:1.1; margin:0; color:var(--tw-fg); }
.ec-badge p{ font-size:.8125rem; line-height:1.45; color:var(--tw-slogan-fg); margin:0; }

/* ---- Bill breakdown: before/after line items ---- */
.ec-bill{ background:var(--tw-bg); border:1px solid var(--tw-line); border-radius:8px; padding:clamp(20px,2.4vw,26px); }
.ec-bill__head{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid var(--tw-line);
  font-family:var(--tw-font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--tw-slogan-fg); }
.ec-bill__legend{ display:flex; gap:14px; }
.ec-bill__legend span{ display:inline-flex; align-items:center; gap:6px; }
.ec-bill__legend i{ width:10px; height:8px; border-radius:2px; display:inline-block; }
.ec-bline{ display:grid; grid-template-columns:118px 1fr auto; gap:14px; align-items:center; padding:11px 0; border-bottom:1px solid var(--tw-line); }
.ec-bline__name{ font-size:.8125rem; color:var(--tw-fg); font-weight:500; }
.ec-bline__bars{ display:flex; flex-direction:column; gap:4px; }
.ec-bline__bar{ height:7px; border-radius:2px; }
.ec-bline__bar.is-before{ background:rgba(14,36,59,0.28); }
.ec-day .ec-bline__bar.is-before{ background:rgba(14,36,59,0.22); }
.ec-bline__bar.is-after{ background:var(--ec-saffron); }
.ec-bline__delta{ font-family:var(--tw-font-mono); font-size:11px; color:var(--tw-slogan-fg); text-align:right; white-space:nowrap; }
.ec-bline__delta b{ color:#1b8f5a; font-weight:600; }
.ec-bill__total{ display:grid; grid-template-columns:118px 1fr auto; gap:14px; align-items:center; padding-top:14px; }
.ec-bill__total .t{ font-family:var(--tw-font-display); font-weight:700; font-size:.9375rem; color:var(--tw-fg); }
.ec-bill__total .nums{ grid-column:3; text-align:right; }
.ec-bill__total .was{ font-family:var(--tw-font-mono); font-size:11px; color:var(--tw-slogan-fg); text-decoration:line-through; }
.ec-bill__total .now{ font-family:var(--tw-font-display); font-weight:800; font-size:1.25rem; letter-spacing:-.03em; color:var(--ec-saffron); margin-left:8px; }

/* ---- Savings waterfall ---- */
.ec-fall{ display:flex; flex-direction:column; gap:14px; }
.ec-fall__bar{ }
.ec-fall__top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.ec-fall__lbl{ font-size:.8125rem; color:var(--tw-fg); font-weight:500; }
.ec-fall__val{ font-family:var(--tw-font-mono); font-size:11px; color:var(--ec-saffron); }
.ec-fall__track{ height:10px; background:var(--tw-data-bg); border:1px solid var(--tw-line); border-radius:3px; overflow:hidden; }
.ec-fall__fill{ height:100%; background:var(--ec-saffron); border-radius:2px; }

/* ---- Roadmap honesty strip ---- */
.ec-roadmap{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(28px,3vw,38px); }
.ec-rchip{ display:inline-flex; align-items:center; gap:10px; padding:11px 16px; border:1px dashed var(--tw-line); border-radius:99px; background:var(--tw-data-bg); }
.ec-rchip b{ font-family:var(--tw-font-display); font-weight:700; font-size:.9375rem; letter-spacing:-.01em; color:var(--tw-fg); }
.ec-rchip span{ font-family:var(--tw-font-mono); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; padding:3px 8px; border-radius:99px; background:color-mix(in srgb, var(--ec-saffron) 18%, transparent); color:var(--ec-saffron); }

/* ============================================================
   Product screenshots — SaaS-style app frames (user fills slots)
   ============================================================ */
.ec-day{  --ec-frame-bg:#FFFFFF; --ec-frame-bar:#ECE8E1; --ec-frame-line:rgba(14,36,59,0.10); }
.ec-night{ --ec-frame-bg:#0A1B2E; --ec-frame-bar:#0C2138; --ec-frame-line:rgba(234,242,250,0.10); }
.ec-frame{ border:1px solid var(--tw-line); border-radius:12px; overflow:hidden; background:var(--ec-frame-bg); box-shadow:0 30px 70px -30px rgba(0,0,0,0.5); }
.ec-frame__bar{ display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--ec-frame-bar); border-bottom:1px solid var(--ec-frame-line); }
.ec-frame__dots{ display:flex; gap:6px; flex:none; }
.ec-frame__dots i{ width:10px; height:10px; border-radius:50%; background:color-mix(in srgb, var(--tw-slogan-fg) 45%, transparent); }
.ec-frame__addr{ font-family:var(--tw-font-mono); font-size:10px; letter-spacing:.06em; color:var(--tw-slogan-fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ec-frame image-slot, .ec-frame img{ display:block; width:100%; aspect-ratio:16/10; background:var(--ec-frame-bg); object-fit:cover; }
.ec-frame--hero image-slot, .ec-frame--hero img{ aspect-ratio:16/11; }
.ec-frame--report image-slot, .ec-frame--report img{ aspect-ratio:4/3; }
.ec-frame--show image-slot, .ec-frame--show img{ aspect-ratio:5/4; }

/* hero figure with a floating financial-proof chip */
.ec-herofig{ position:relative; }
.ec-herofig__chip{ position:absolute; left:-16px; bottom:-20px; display:flex; gap:20px; padding:14px 20px; border-radius:12px;
  background:rgba(8,24,44,0.74); border:1px solid rgba(232,185,46,0.35); backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%); box-shadow:0 22px 50px -18px rgba(0,0,0,0.6); }
.ec-herofig__chip .v{ font-family:var(--tw-font-display); font-weight:800; letter-spacing:-.04em; font-size:1.45rem; line-height:1; color:#EAF2FA; }
.ec-herofig__chip .v .u{ color:var(--ec-saffron); font-size:.5em; margin-left:3px; font-weight:700; }
.ec-herofig__chip .l{ font-family:var(--tw-font-mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(234,242,250,0.62); margin-top:7px; }
@media(max-width:980px){ .ec-herofig__chip{ position:static; margin-top:16px; } }

/* report figure with a floating scorecard badge */
.ec-reportfig{ position:relative; }
.ec-reportfig__badge{ position:absolute; right:-18px; top:-18px; width:108px; height:108px; border-radius:50%;
  background:var(--tw-bg); border:1px solid var(--tw-line); box-shadow:0 18px 40px -16px rgba(14,36,59,0.35);
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ec-reportfig__badge svg{ position:absolute; width:108px; height:108px; transform:rotate(-90deg); }
.ec-reportfig__badge .g{ font-family:var(--tw-font-display); font-weight:800; letter-spacing:-.04em; font-size:1.75rem; line-height:1; color:var(--tw-fg); position:relative; }
.ec-reportfig__badge .gl{ font-family:var(--tw-font-mono); font-size:7px; letter-spacing:.16em; text-transform:uppercase; color:var(--tw-slogan-fg); margin-top:3px; position:relative; }
@media(max-width:520px){ .ec-reportfig__badge{ right:0; top:0; width:88px; height:88px; } .ec-reportfig__badge svg{ width:88px; height:88px; } }

/* product showcase strip */
.ec-show{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,22px); margin-top:clamp(32px,4vw,44px); }
@media(max-width:880px){ .ec-show{ grid-template-columns:1fr; max-width:460px; } }
.ec-show__item .cap{ display:block; margin-top:14px; }
.ec-show__item .cap b{ font-family:var(--tw-font-display); font-weight:700; font-size:1.0625rem; letter-spacing:-.02em; color:var(--tw-fg); display:block; }
.ec-show__item .cap span{ font-size:.8125rem; color:var(--tw-slogan-fg); line-height:1.45; display:block; margin-top:4px; }
.ec-show__item .cap .tag{ display:inline-block; font-family:var(--tw-font-mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ec-saffron); margin-bottom:7px; }