/* Homepage live bands. Power runs through them: a current lights the tagline, and houses light up one meter at a time.
   Everything is fully lit by default, so with scripts off or reduced motion the bands read complete.
   Motion starts from .is-live, only while the band is on screen. Keyframes stay last in this file. */
.hl {
    --hl-green: #0B5F2A;
    --hl-deep: #084422;
    --hl-lime: #4DFF88;
    --hl-ease: cubic-bezier(.16, 1, .3, 1);
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--hl-green); color: #fff;
}
/* Slow-moving light, so the green is never flat. */
.hl-glow { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.hl-glow--a {
    width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; left: -14%; top: -90%;
    background: radial-gradient(closest-side, rgba(77,255,136,.26), transparent);
}
.hl-glow--b {
    width: 54vw; height: 54vw; max-width: 820px; max-height: 820px; right: -10%; bottom: -100%;
    background: radial-gradient(closest-side, rgba(8,68,34,.95), transparent);
}
.is-live .hl-glow--a { animation: hl-drift-a 16s ease-in-out infinite alternate; }
.is-live .hl-glow--b { animation: hl-drift-b 19s ease-in-out infinite alternate; }

/* ── Tagline strip ── */
/* main.css forces large section padding with !important, so these bands must answer in kind. */
html body section.hl-wire { padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(1.5rem, 3vw, 2.25rem) !important; }
.hl-words { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.hl-word {
    position: relative; display: flex; justify-content: center; padding: 0 clamp(.375rem, 1.2vw, 1rem) 1.25rem;
}
/* The node each word hangs from. */
.hl-word::after {
    content: ''; position: absolute; left: 50%; bottom: -5px; width: 12px; height: 12px; margin-left: -6px;
    border-radius: 50%; background: var(--hl-lime); box-shadow: 0 0 0 3px var(--hl-green);
}
.hl-track { position: relative; height: 2px; overflow: hidden; background: rgba(255,255,255,.28); }
.hl-pulse {
    position: absolute; inset: 0; opacity: 0;
    background: linear-gradient(90deg, transparent calc(100% - 220px), var(--hl-lime));
}
.hl-legal {
    margin: 1rem 0 0 !important; text-align: center; color: rgba(255,255,255,.8);
    font-size: .75rem !important; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; line-height: 1.5 !important;
}
.is-live .hl-pulse { animation: hl-run 6s linear infinite; }
.is-live .hl-word .ms-light { animation: hl-lit 6s linear infinite backwards; }
.is-live .hl-word::after { animation: hl-node 6s linear infinite backwards; }
.is-live .hl-word:nth-child(1)::after, .is-live .hl-word:nth-child(1) .ms-light { animation-delay: 1s; }
.is-live .hl-word:nth-child(2)::after, .is-live .hl-word:nth-child(2) .ms-light { animation-delay: 3s; }
.is-live .hl-word:nth-child(3)::after, .is-live .hl-word:nth-child(3) .ms-light { animation-delay: 5s; }

@media (max-width: 639px) {
    .hl-stack { position: relative; padding-left: 1.75rem; }
    .hl-words { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
    .hl-word { padding: 0; justify-content: flex-start; }
    .hl-word::after { left: -1.75rem; margin-left: -5px; top: 50%; bottom: auto; margin-top: -6px; }
    .hl-track { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; height: auto; }
    .hl-pulse { background: linear-gradient(180deg, transparent 40%, var(--hl-lime)); }
    .is-live .hl-pulse { animation-name: hl-run-down; }
    .hl-legal { text-align: left; letter-spacing: .14em; }
}

/* ── Get a price ── */
/* The footer is green, so this band can never be. Bright leaf lime from the logo and the meter's M-PESA plate. */
.hl-cta {
    --hl-bg: var(--hl-green); --hl-head: #fff; --hl-text: rgba(255,255,255,.88); --hl-mark: var(--hl-lime);
    --hl-solid: #fff; --hl-solid-ink: var(--hl-green); --hl-solid-hover: var(--hl-lime); --hl-solid-hover-ink: var(--hl-deep); --hl-edge: #fff;
    --hl-house: rgba(255,255,255,.1); --hl-stroke: rgba(255,255,255,.42); --hl-lit: var(--hl-lime); --hl-flow: var(--hl-lime);
    background: var(--hl-bg);
}
.hl-cta--lime {
    --hl-bg: #A8CF39; --hl-head: #062E17; --hl-text: #0B3419; --hl-mark: #084422;
    --hl-solid: #084422; --hl-solid-ink: #fff; --hl-solid-hover: #062E17; --hl-solid-hover-ink: #fff; --hl-edge: #084422;
    --hl-house: rgba(255,255,255,.34); --hl-stroke: #084422; --hl-lit: #FFFFFF; --hl-flow: #FFFFFF;
}
.hl-cta--lime .hl-glow--a { background: radial-gradient(closest-side, rgba(255,255,255,.5), transparent); }
.hl-cta--lime .hl-glow--b { background: radial-gradient(closest-side, rgba(120,165,30,.7), transparent); }
.hl-cta--cream {
    --hl-bg: #F5F0E8; --hl-head: #062E17; --hl-text: #27382C; --hl-mark: #0B5F2A;
    --hl-solid: #0B5F2A; --hl-solid-ink: #fff; --hl-solid-hover: #084422; --hl-solid-hover-ink: #fff; --hl-edge: #0B5F2A;
    --hl-house: rgba(11,95,42,.07); --hl-stroke: #0B5F2A; --hl-lit: #22C55E; --hl-flow: #16A34A;
}
.hl-cta--cream .hl-glow--a { background: radial-gradient(closest-side, rgba(168,207,57,.34), transparent); }
.hl-cta--cream .hl-glow--b { background: radial-gradient(closest-side, rgba(224,217,206,.9), transparent); }
html body section.hl-cta { padding: clamp(2.5rem, 5vw, 4.25rem) 0 !important; }
.hl-cta-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; align-items: center; }
html body .hl-cta h2.hl-title {
    margin: 0; color: var(--hl-head); font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem) !important; font-weight: 900 !important;
    letter-spacing: -.035em !important; line-height: 1.02 !important;
}
.hl-line { display: block; }
.hl-mark { position: relative; display: inline-block; color: var(--hl-mark); }
.hl-mark::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -.08em; height: .07em; background: var(--hl-mark); transform-origin: left center;
}
html body .hl-cta p.hl-body { margin: 1.5rem 0 0; max-width: 52ch; color: var(--hl-text); font-size: 1.0625rem !important; line-height: 1.55 !important; }
.hl-actions { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.5rem; }
.hl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .625rem; min-height: 48px; padding: 0 1.5rem;
    border: 2px solid var(--hl-edge); font-size: .8125rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s var(--hl-ease);
}
.hl-btn svg { width: 16px; height: 16px; transition: transform .25s var(--hl-ease); }
.hl-btn--solid { background: var(--hl-solid); border-color: var(--hl-solid); color: var(--hl-solid-ink); }
.hl-btn--solid:hover { background: var(--hl-solid-hover); border-color: var(--hl-solid-hover); color: var(--hl-solid-hover-ink); }
.hl-btn--solid:hover svg { transform: translateX(5px); }
.hl-btn--line { color: var(--hl-edge); }
.hl-btn--line:hover { background: var(--hl-edge); color: var(--hl-bg); }
.hl-btn:active { transform: translateY(1px); }
.hl-btn:focus-visible { outline: 3px solid var(--hl-edge); outline-offset: 3px; }

.hl-street { display: block; width: 100%; height: auto; max-height: 150px; }
.hl-house { fill: var(--hl-house); stroke: var(--hl-stroke); stroke-width: 1.5; }
.hl-window { fill: var(--hl-lit); }
.hl-led { fill: var(--hl-lit); }
.hl-line-wire { fill: none; stroke: var(--hl-stroke); stroke-width: 1.5; }
.hl-flow { fill: none; stroke: var(--hl-flow); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 26 174; opacity: 0; }
.is-live .hl-flow { opacity: 1; animation: hl-flow 3.2s linear infinite; }
.is-live .hl-window { animation: hl-house 8s linear infinite backwards; animation-delay: calc(var(--i) * .55s); }
.is-live .hl-led { animation: hl-house 8s linear infinite backwards; animation-delay: calc(var(--i) * .55s - .15s); }

/* The headline comes in once, on the first sighting. */
.is-seen .hl-line { animation: hl-rise .8s var(--hl-ease) backwards; }
.is-seen .hl-line + .hl-line { animation-delay: .12s; }
.is-seen .hl-mark::after { animation: hl-draw 1s var(--hl-ease) .5s backwards; }
.is-seen .hl-body, .is-seen .hl-actions { animation: hl-rise .8s var(--hl-ease) .22s backwards; }

@media (min-width: 640px) {
    .hl-actions { flex-direction: row; flex-wrap: wrap; }
}
@media (min-width: 960px) {
    .hl-cta-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3rem; }
    .hl-street { max-height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
    .hl *, .hl *::after { animation: none !important; }
    .hl-pulse, .hl-flow { display: none; }
}

@keyframes hl-drift-a { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(22vw, 14%, 0); } }
@keyframes hl-drift-b { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-20vw, -12%, 0); } }
@keyframes hl-run { 0% { transform: translateX(-100%); opacity: 1; } 96% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
@keyframes hl-run-down { 0% { transform: translateY(-100%); opacity: 1; } 96% { opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes hl-lit { 0% { opacity: .22; } 2% { opacity: 1; } 3.4% { opacity: .5; } 5.5%, 62% { opacity: 1; } 74%, 100% { opacity: .22; } }
@keyframes hl-node { 0% { transform: scale(.7); } 4% { transform: scale(1.5); } 12%, 100% { transform: scale(1); } }
@keyframes hl-flow { to { stroke-dashoffset: -200; } }
@keyframes hl-house { 0% { opacity: .12; } 2%, 78% { opacity: 1; } 84%, 100% { opacity: .12; } }
@keyframes hl-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hl-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }