/* Homepage v6 — scroll-to-open hero + dark sections. Loads after styles.css. */

/* ---------- shared ---------- */
.ho-kicker { font-family: var(--font-btn); font-weight: 700; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: #43efb0; text-shadow: 0 0 12px rgba(67,239,176,.5); }
.ho-h2 { margin: 22px 0 0; font-family: var(--font-head); font-weight: 900; line-height: 1.08; color: #fff; }
.ho-h2 .glow { color: var(--cyan); text-shadow: 0 0 22px rgba(46,190,239,.55); }
.ho-pill { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(90deg,#2ebeef,#3fe0a8); color: #06121a; font-family: var(--font-btn); font-weight: 700; font-size: 13px; letter-spacing: 2.4px; text-transform: uppercase; text-decoration: none; padding: 17px 38px; border-radius: 999px; box-shadow: 0 0 34px rgba(46,224,180,.45); }
.ho-pill:hover { box-shadow: 0 0 54px rgba(46,224,180,.75); color: #06121a; }

@keyframes hoRise { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hoWord { from { opacity: 0; transform: translateY(70%); } to { opacity: 1; transform: translateY(0); } }
@keyframes hoCue { 0%,100% { transform: translateY(0); opacity: .85; } 50% { transform: translateY(7px); opacity: 1; } }
@keyframes hoMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- hero ---------- */
#hero-wrap { height: 400vh; position: relative; }
.ho-hero { position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: 0; background: radial-gradient(120% 90% at 50% 32%, #0d2b3d 0%, #081a27 55%, #060f18 100%); }
.ho-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(126,206,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(126,206,255,.045) 1px, transparent 1px); background-size: 150px 150px; background-position: center top; }
.ho-glow { position: absolute; left: 50%; top: 58%; transform: translate(-50%,-50%); width: 880px; height: 880px; background: radial-gradient(circle, rgba(46,190,239,.15) 0%, rgba(46,190,239,0) 62%); pointer-events: none; }
#hero-scene { position: absolute; inset: 0; }

#hero-head { position: absolute; left: 0; right: 0; top: 8.5vh; text-align: center; z-index: 3; will-change: transform, opacity; padding: 0 24px; }
#hero-head .ho-eyebrow { display: block; font-family: var(--font-btn); font-weight: 700; font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: #43efb0; text-shadow: 0 0 14px rgba(67,239,176,.55); animation: hoRise .7s cubic-bezier(.2,.7,.2,1) .05s both; }
#hero-head h1 { margin: 6px 0 0; font-family: var(--font-head); font-weight: 900; font-size: clamp(34px, 4.4vw, 64px); line-height: 1.22; color: #fff; animation: hoRise .7s cubic-bezier(.2,.7,.2,1) .18s both; }
#hero-word { display: inline-block; width: 2.95em; text-align: right; white-space: nowrap; color: var(--cyan); text-shadow: 0 0 26px rgba(46,190,239,.6); animation: hoWord .55s cubic-bezier(.2,.7,.2,1) both; }
.hw-static { color: var(--cyan); text-shadow: 0 0 26px rgba(46,190,239,.6); }

#charger { position: absolute; left: 50%; top: 50%; height: min(76vh, 850px); aspect-ratio: 1600 / 2845; transform: translate(-50%,-31%); will-change: transform; z-index: 2; }
.cab-frame { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: contain; will-change: opacity; filter: drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
#cab-f3 { opacity: 1; }
.fan-blades { position: absolute; width: 37.78%; aspect-ratio: 1; z-index: 1; pointer-events: none; animation: chFan .42s linear infinite; will-change: transform; }
#ch-fan-l { left: 8.47%; top: 7.89%; }
#ch-fan-r { left: 54.17%; top: 7.89%; }
@keyframes chFan { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fan-blades { animation: none; } }
.cab-door { position: absolute; top: 30.938%; height: 63.438%; z-index: 3; will-change: transform; backface-visibility: hidden; }
#door-l { left: 3.611%; width: 46.25%; transform-origin: left center; }
#door-r { left: 49.861%; width: 46.389%; transform-origin: right center; }
.ch-mod { position: absolute; left: 52%; right: 8.5%; height: 11%; opacity: 0; z-index: 4; border-radius: 5px; border: 1.5px solid rgba(66,214,231,.7); background: linear-gradient(100deg, rgba(46,190,239,.2), rgba(63,224,168,.05)); box-shadow: 0 0 24px rgba(46,190,239,.45), inset 0 0 20px rgba(46,190,239,.22); will-change: transform, opacity; }
#hmod-1 { top: 31%; } #hmod-2 { top: 47%; } #hmod-3 { top: 63%; } #hmod-4 { top: 79%; }
.ch-mod.left { left: 8.5%; right: 52%; background: linear-gradient(260deg, rgba(46,190,239,.2), rgba(63,224,168,.05)); }
.ch-mod.left .dot { right: auto; left: 6%; }
.ch-mod .batt { position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; margin-top: -1px; background: linear-gradient(90deg,rgba(46,190,239,0),#2ebeef,#3fe0a8,rgba(63,224,168,0)); }
.ch-mod .dot { position: absolute; right: 6%; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #3fe0a8; box-shadow: 0 0 9px rgba(63,224,168,.95); }

.ho-card { position: absolute; width: min(340px, 25vw); background: linear-gradient(158deg, rgba(14,40,55,.92) 0%, rgba(6,19,28,.94) 100%); border: 1px solid rgba(66,214,231,.32); border-radius: 12px; padding: 26px 28px; box-sizing: border-box; box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 34px rgba(46,190,239,.12); backdrop-filter: blur(6px); opacity: 0; will-change: transform, opacity; z-index: 4; }
.ho-card .chip { position: absolute; top: -4px; left: 28px; width: 64px; height: 8px; border-radius: 4px; background: linear-gradient(90deg,#2ebeef,#3fe0a8); box-shadow: 0 0 16px rgba(46,224,180,.6); }
.ho-card h3 { margin: 0 0 10px; font-family: var(--font-head); font-weight: 700; font-size: 19px; color: #eaf7fd; }
.ho-card p { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(198,224,236,.78); }
#hcard-1 { right: max(24px, calc(50% - 610px)); top: 17%; }
#hcard-2 { left: max(24px, calc(50% - 610px)); top: 17%; }
#hcard-3 { right: max(24px, calc(50% - 610px)); top: 52%; }
#hcard-4 { left: max(24px, calc(50% - 610px)); top: 52%; }

.ho-stat { position: absolute; width: 170px; text-align: center; opacity: 0; will-change: transform, opacity; z-index: 6; }
.ho-stat svg { width: 46px; height: 46px; fill: none; stroke: #2ebeef; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(46,190,239,.6)); }
.ho-stat .num { font-family: var(--font-head); font-weight: 900; font-size: 44px; color: #fff; line-height: 1.05; margin-top: 6px; }
.ho-stat .lbl { font-family: var(--font-btn); font-weight: 700; font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: rgba(255,255,255,.7); margin-top: 6px; }
#hstat-1 { right: calc(50% + 330px); bottom: 9%; }
#hstat-2 { left: 50%; transform: translateX(-50%); bottom: 9%; width: 220px; z-index: 6; }
#hstat-2 svg { stroke: #3fe0a8; filter: drop-shadow(0 0 6px rgba(63,224,168,.6)); }
#hstat-3 { left: calc(50% + 330px); bottom: 9%; }
#hstat-3 svg { stroke: #2ebeef; filter: drop-shadow(0 0 6px rgba(46,190,239,.6)); }

#hero-cta { position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); opacity: 0; will-change: transform, opacity; z-index: 6; }
#hero-cue { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; pointer-events: none; }
#hero-cue span { animation: hoCue 2.2s ease-in-out infinite; font-family: var(--font-btn); font-weight: 700; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.8); }

/* the homepage menu has longer labels ("Grid & Data Center Power") — keep the all-caps
   style but stop labels wrapping mid-item at laptop widths */
@media (min-width: 1001px) {
  .ho-home .nav-links > a, .ho-home .nav-links > li > a { white-space: nowrap; font-size: 14px; letter-spacing: 1px; padding: 10px 12px; }
  .ho-home .nav-links { gap: 6px; }
}

@media (max-height: 760px) {
  #hero-scene { transform: scale(.9); transform-origin: 50% 42%; }
  #charger { height: 58vh; }
  .ho-card { width: 230px; padding: 14px 16px; }
  .ho-card h3 { font-size: 14px; margin-bottom: 6px; }
  .ho-card p { font-size: 12px; line-height: 1.5; }
  #hcard-1, #hcard-2 { top: 10%; }
  #hcard-3, #hcard-4 { top: 42%; }
  #hstat-1 { right: calc(50% + 170px); bottom: 8%; }
  #hstat-3 { left: calc(50% + 170px); bottom: 8%; }
  .ho-stat svg { width: 32px; height: 32px; }
  .ho-stat .num { font-size: 28px; }
  .ho-stat .lbl { font-size: 10px; letter-spacing: 1.8px; }
  #hero-cta { padding: 12px 26px; font-size: 11px; bottom: 1%; }
  #hstat-2 { bottom: 12%; }
}

/* ---------- below the hero ---------- */
.ho-below { position: relative; z-index: 1; box-shadow: 0 -30px 60px rgba(0,0,0,.45); background: linear-gradient(180deg, #061520 0%, #082331 14%, #071a25 30%, #060f18 44%, #07202d 62%, #082635 74%, #061622 88%, #060f18 100%); }

.ho-ticker { background: rgba(6,15,24,.5); overflow: hidden; white-space: nowrap; padding: 16px 0; position: relative; }
.ho-ticker::before, .ho-ticker::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(46,190,239,0) 0%, rgba(46,190,239,.4) 22%, rgba(63,224,168,.4) 78%, rgba(63,224,168,0) 100%); }
.ho-ticker::before { top: 0; } .ho-ticker::after { bottom: 0; }
.ho-ticker .reel { display: inline-flex; animation: hoMarquee 30s linear infinite; }
.ho-ticker span.line { font-family: var(--font-btn); font-weight: 700; font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; color: rgba(255,255,255,.65); }
.ho-ticker .c { color: #2ebeef; } .ho-ticker .m { color: #3fe0a8; }

.ho-manifesto { background: none; padding: 170px 32px 150px; position: relative; overflow: hidden; contain: paint; }
.ho-manifesto .inner, .ho-chargers .inner, .ho-inverters .inner, .ho-cta-sec .inner { max-width: 1240px; margin: 0 auto; position: relative; }
.ho-manifesto::before { content: ''; position: absolute; left: -240px; top: -220px; width: 820px; height: 820px; pointer-events: none; background: radial-gradient(circle, rgba(63,224,168,.11) 0%, rgba(63,224,168,0) 62%); animation: hoDrift1 26s ease-in-out infinite alternate; }
.ho-manifesto::after { content: ''; position: absolute; right: -200px; bottom: -260px; width: 900px; height: 760px; pointer-events: none; background: radial-gradient(circle, rgba(46,190,239,.13) 0%, rgba(46,190,239,0) 64%); animation: hoDrift2 34s ease-in-out infinite alternate; }
@keyframes hoDrift1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(90px,70px,0) scale(1.12); } }
@keyframes hoDrift2 { from { transform: translate3d(0,0,0) scale(1.08); } to { transform: translate3d(-110px,-60px,0) scale(1); } }
@keyframes hoPulseRings { from { transform: scale(1); opacity: .75; } to { transform: scale(1.08); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ho-manifesto::before, .ho-manifesto::after, .ho-inverters::before, .ho-inverters::after { animation: none; } }
.ho-manifesto .inner { max-width: 1100px; text-align: center; }
.ho-manifesto .ho-kicker { justify-content: center; }
.mf-ceiling { width: min(100%, 760px); height: 2px; margin: 56px auto 0; border-radius: 2px; transform: scaleX(0); transform-origin: center; will-change: transform; background: linear-gradient(90deg, rgba(46,190,239,0) 0%, #2ebeef 20%, #9df0ff 50%, #2ebeef 80%, rgba(46,190,239,0) 100%); box-shadow: 0 0 18px rgba(46,190,239,.6); }
#manifesto-text { margin: 40px auto 0; max-width: 1100px; font-family: var(--font-head); font-weight: 900; font-size: clamp(34px, 4.2vw, 62px); line-height: 1.06; letter-spacing: -0.015em; color: #fff; }
#manifesto-text .l1 { display: block; text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .mf-ceiling { transform: none !important; } }
#manifesto-text .glow { color: var(--cyan); text-shadow: 0 0 26px rgba(46,190,239,.55); }
#manifesto-text .l2 { display: block; text-wrap: balance; margin: 30px auto 0; max-width: 1100px; font-size: clamp(21px, 2.1vw, 32px); font-weight: 500; letter-spacing: .02em; word-spacing: .08em; line-height: 1.5; color: rgba(255,255,255,.9); }
#manifesto-text .l2 br { display: none; } @media (min-width: 700px) { #manifesto-text .l2 { text-wrap: initial; } #manifesto-text .l2 br { display: inline; } }
#manifesto-text .l2-w { display: inline-block; opacity: 0; transform: translateY(14px); filter: blur(6px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease; }
#manifesto-text.is-lit .l2-w { opacity: 1; transform: none; filter: none; }
#manifesto-text .l2-w:nth-child(1){transition-delay:.05s}#manifesto-text .l2-w:nth-child(2){transition-delay:.12s}#manifesto-text .l2-w:nth-child(3){transition-delay:.19s}#manifesto-text .l2-w:nth-child(4){transition-delay:.26s}#manifesto-text .l2-w:nth-child(5){transition-delay:.33s}#manifesto-text .l2-w:nth-child(6){transition-delay:.44s}#manifesto-text .l2-w:nth-child(7){transition-delay:.52s}#manifesto-text .l2-w:nth-child(9){transition-delay:.64s}#manifesto-text .l2-w:nth-child(10){transition-delay:.71s}#manifesto-text .l2-w:nth-child(11){transition-delay:.9s}
#manifesto-text .l2-spectrum { font-weight: 800; letter-spacing: .03em; background: linear-gradient(90deg, #2ebeef 0%, #43efb0 35%, #ffffff 50%, #43efb0 65%, #2ebeef 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: mf-shimmer 4.5s linear infinite; }
#manifesto-text.is-lit .l2-spectrum { filter: drop-shadow(0 0 16px rgba(46,190,239,.45)); }
@keyframes mf-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { #manifesto-text .l2-w { opacity: 1; transform: none; filter: none; transition: none; } #manifesto-text .l2-spectrum { animation: none; background: linear-gradient(90deg,#2ebeef,#43efb0); background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; } }


.ho-tiles { display: grid; grid-template-columns: repeat(3, minmax(220px, 1fr)); gap: 20px; margin-top: 64px; }
.ho-tile { background: rgba(10,28,40,.7); border: 1.5px solid rgba(66,214,231,.35); border-radius: 12px; padding: 26px; box-shadow: 0 0 24px rgba(46,190,239,.12); }
.ho-tile .chip { width: 46px; height: 14px; border-radius: 4px; background: linear-gradient(90deg,#2ebeef,#3fe0a8); box-shadow: 0 0 12px rgba(46,224,180,.6); }
.ho-tile h3 { margin: 16px 0 8px; font-family: var(--font-head); font-weight: 700; font-size: 18px; color: #fff; }
.ho-tile p { margin: 0; font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.65); }

.ho-chargers { background: none; padding: 140px 32px; position: relative; overflow: hidden; }
.ho-chargers::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(46,190,239,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(46,190,239,.055) 1px, transparent 1px); background-size: 92px 92px; opacity: .9; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%), radial-gradient(130% 90% at 50% 10%, #000 0%, transparent 82%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 72%, transparent 100%), radial-gradient(130% 90% at 50% 10%, #000 0%, transparent 82%); mask-composite: intersect; }
.ho-chargers::after { content: ''; position: absolute; left: 50%; top: -180px; width: min(1100px, 92vw); height: 460px; transform: translateX(-50%); pointer-events: none; background: radial-gradient(ellipse at center, rgba(46,190,239,.15) 0%, rgba(46,190,239,0) 70%); }
.ho-chargers .ho-h2 { margin-bottom: 56px; font-size: clamp(34px, 4.2vw, 60px); line-height: 1.05; }
#prod-seam { position: absolute; left: -28px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: linear-gradient(180deg,#2ebeef,#3fe0a8); box-shadow: 0 0 14px rgba(46,224,180,.7); transform: scaleY(0); transform-origin: top; }
.ho-rows { display: flex; flex-direction: column; }
.ho-row { display: grid; grid-template-columns: minmax(220px, 1.1fr) minmax(0, .9fr) 150px; align-items: center; gap: 24px; padding: 30px 12px; border-top: 1px solid rgba(255,255,255,.14); color: inherit; text-decoration: none; }
.ho-row:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.ho-row .name-cell { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.ho-row .name { font-family: var(--font-head); font-weight: 900; font-size: 30px; color: #fff; }
.ho-row .desc { font-size: 14px; color: rgba(255,255,255,.6); }
.ho-row .specs { font-family: var(--font-btn); font-weight: 700; font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,.5); min-width: 0; }
.ho-row img { width: 150px; height: 100px; object-fit: contain; background: #0a1c28; padding: 6px; box-sizing: border-box; border-radius: 8px; border: 1px solid rgba(66,214,231,.35); justify-self: end; transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s; }
.ho-new { font-family: var(--font-btn); font-weight: 700; font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: #06121a; background: linear-gradient(90deg,#2ebeef,#3fe0a8); padding: 4px 10px; border-radius: 999px; box-shadow: 0 0 14px rgba(46,224,180,.5); }

.ho-inverters { background: none; padding: 140px 32px; position: relative; overflow: hidden; }
.ho-inverters .wash, .ho-manifesto .wash { display: none; }
.ho-inverters::before { content: ''; position: absolute; inset: -20%; pointer-events: none; background: repeating-radial-gradient(circle at 28% 52%, rgba(46,190,239,.06) 0 1px, transparent 1px 74px); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); animation: hoPulseRings 22s ease-in-out infinite alternate; }
.ho-inverters::after { content: ''; position: absolute; right: -180px; bottom: -220px; width: 720px; height: 720px; pointer-events: none; background: radial-gradient(circle, rgba(63,224,168,.12) 0%, rgba(63,224,168,0) 66%); animation: hoDrift2 30s ease-in-out infinite alternate; }
.ho-inverters .inner { display: grid; grid-template-columns: minmax(380px, 1.3fr) minmax(280px, 0.7fr); gap: 48px; align-items: center; max-width: 1360px; }
.ho-inverters .ho-h2 { margin: 0 0 22px; font-size: clamp(30px, 3.6vw, 50px); }
.ho-inverters .lead { font-size: 16px; line-height: 1.75; color: rgba(255,255,255,.65); margin: 0 0 34px; max-width: 520px; }
.ho-spin-wrap { position: relative; }
.ho-pin { position: relative; }
@media (min-width: 900px) and (min-height: 600px) {
  .ho-pin { height: 230vh; }
  .ho-pin .ho-inverters { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; box-sizing: border-box; padding-top: 40px; padding-bottom: 40px; }
  .ho-pin .ho-inverters > .inner { width: 100%; }
  .ho-pin #gf-spin { height: min(720px, 76vh); }
  .ho-pin .ho-inverters .lead { margin-bottom: 24px; }
  .ho-pin .ho-specs { margin-bottom: 24px; }
}
@media (min-width: 900px) and (max-height: 760px) {
  .ho-pin .ho-inverters .lead { font-size: 15px; line-height: 1.6; }
  .ho-pin .ho-inverters .ho-h2 { font-size: clamp(28px, 3vw, 40px); }
}
@media (prefers-reduced-motion: reduce) { .ho-pin { height: auto; } .ho-pin .ho-inverters { position: relative; min-height: 0; } }
.ho-pin.no-pin { height: auto !important; }
.ho-pin.no-pin .ho-inverters { position: relative !important; min-height: 0 !important; }
.ho-spin-glow { position: absolute; left: 50%; top: 55%; transform: translate(-50%,-50%); width: 700px; height: 700px; background: radial-gradient(circle, rgba(46,190,239,.22) 0%, rgba(46,190,239,0) 62%); pointer-events: none; }
#gf-spin { position: relative; width: 100%; height: 640px; z-index: 2; }
#gf-3d { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
#gf-3d[data-ready] { opacity: 1; }
#gf-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 1; transition: opacity .5s ease; filter: drop-shadow(0 0 28px rgba(46,190,239,.28)); }
#gf-3d[data-ready] + #gf-still { opacity: 0; }
#gf-spin img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#gf-spin img.on { opacity: 1; }
.ho-badge { position: absolute; top: 0; left: 0; font-family: var(--font-btn); font-weight: 700; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: #06121a; background: linear-gradient(90deg,#2ebeef,#3fe0a8); padding: 7px 14px; border-radius: 6px; box-shadow: 0 0 18px rgba(46,224,180,.5); }
.ho-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 34px; }
.ho-spec { background: rgba(10,28,40,.85); border: 1.5px solid rgba(66,214,231,.5); border-radius: 10px; padding: 18px 20px; box-shadow: 0 0 18px rgba(46,190,239,.2); }
.ho-spec .v { font-family: var(--font-head); font-weight: 900; font-size: 22px; color: #fff; }
.ho-spec .k { font-family: var(--font-btn); font-weight: 700; font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: #43efb0; margin-top: 6px; }
.ho-outline { display: inline-flex; align-items: center; gap: 10px; border: 1.5px solid var(--cyan); color: var(--cyan); font-family: var(--font-btn); font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; padding: 15px 28px; border-radius: 999px; }
.ho-outline:hover { background: var(--cyan); color: #06121a; box-shadow: 0 0 26px rgba(46,190,239,.6); }

.ho-cta-sec { background: none; padding: 170px 32px 160px; text-align: center; position: relative; overflow: hidden; }
.ho-cta-sec::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(118deg, rgba(46,190,239,.05) 0 2px, transparent 2px 120px); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%), radial-gradient(95% 100% at 50% 100%, #000 0%, transparent 76%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%), radial-gradient(95% 100% at 50% 100%, #000 0%, transparent 76%); mask-composite: intersect; }
.ho-cta-sec .halo { position: absolute; left: 50%; bottom: -300px; transform: translateX(-50%); width: 800px; height: 600px; background: radial-gradient(circle, rgba(46,190,239,.18) 0%, rgba(46,190,239,0) 62%); pointer-events: none; }
.ho-cta-sec .inner { max-width: 900px; }
.ho-cta-sec .ho-h2 { margin: 24px 0; font-size: clamp(36px, 4.8vw, 66px); line-height: 1.04; }
.ho-cta-sec p { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.65); max-width: 560px; margin: 0 auto 44px; }

/* dark-page footer/header adjustments */
body.ho-home { background: #060f18; }
/* roomier nav: more gap between dropdowns, Contact pushed to the right corner, brand tighter to the left */
.ho-home .nav-links { gap: 14px; }
.ho-home .brand { left: 12px; }
.ho-home .nav-links .btn { margin-left: 28px; }

@media (max-width: 900px) {
  .ho-inverters { padding: 64px 20px; }
  .ho-inverters .inner { grid-template-columns: 1fr; gap: 28px; }
  .ho-inverters .sec-copy { display: contents; }
  .ho-inverters .sec-head { order: -1; }
  .ho-inverters .sec-head .ho-h2 { margin-bottom: 0; }
  .ho-inverters .sec-body { order: 2; }
  .ho-inverters .sec-body .lead { margin-bottom: 26px; }
  .ho-spin-wrap .ho-badge { margin-bottom: 8px; }
  #gf-spin { height: auto; aspect-ratio: 1600 / 1494; max-height: 70svh; }
  .ho-spin-glow { width: 90vw; height: 90vw; }
  .ho-tiles { grid-template-columns: 1fr; }
  .ho-row { grid-template-columns: 1fr 150px; }
  .ho-row .specs { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* Weather band — hero only: proves the cabinet shrugs off sun, rain and snow */
#hero-weather { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.wx-tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; }
#wx-warm { background: radial-gradient(70% 55% at 84% 8%, rgba(255,210,130,.5) 0%, rgba(255,158,66,.2) 40%, rgba(255,150,60,.05) 72%, rgba(255,150,60,0) 100%), linear-gradient(180deg, rgba(255,176,88,.10) 0%, rgba(255,150,60,.03) 55%, rgba(255,150,60,0) 100%); }
#wx-cold { background: radial-gradient(120% 90% at 50% 0%, rgba(196,232,255,.20) 0%, rgba(150,200,235,.07) 45%, rgba(150,200,235,0) 70%); }
#wx-wet { background: linear-gradient(180deg, rgba(4,16,24,.42) 0%, rgba(4,16,24,0) 45%), radial-gradient(90% 60% at 50% 100%, rgba(46,190,239,.14) 0%, rgba(46,190,239,0) 70%); }
#hero-wx { position: absolute; left: max(24px, calc(50% - 610px)); bottom: 9%; z-index: 6; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; border-radius: 999px; background: rgba(6,20,29,.72); border: 1px solid rgba(66,214,231,.3); backdrop-filter: blur(8px); box-shadow: 0 14px 34px rgba(0,0,0,.4); opacity: 0; transition: opacity .6s ease; }
#hero-wx .wx-dot { width: 9px; height: 9px; border-radius: 50%; background: #3fe0a8; box-shadow: 0 0 12px rgba(63,224,168,.9); flex: none; }
#hero-wx .wx-copy { display: flex; flex-direction: column; gap: 2px; }
#hero-wx .wx-title { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: #eaf7fd; letter-spacing: .2px; }
#hero-wx .wx-sub { font-family: var(--font-btn); font-weight: 700; font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(160,205,225,.85); }
@media (max-width: 900px) { #hero-wx { display: none; } }

/* ---------- interaction: sections 01-04 ---------- */
/* 01 tiles: cursor spotlight + lift */
.ho-tile { position: relative; overflow: hidden; }
.ho-tile::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s ease; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(46,190,239,.16) 0%, rgba(46,190,239,0) 70%); }
.ho-tile .chip { transition: width .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; }
/* 02 rows: magnetic hover, image parallax, travelling hairline */
.ho-row { position: relative; }
.ho-row::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(46,190,239,0), #2ebeef 30%, #3fe0a8 70%, rgba(63,224,168,0)); transform: scaleX(0); transform-origin: left center; transition: transform .9s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.ho-row .name, .ho-row .desc, .ho-row .specs { transition: transform .4s cubic-bezier(.2,.7,.2,1), color .3s ease, text-shadow .3s ease; }
.ho-row img { transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .45s ease; will-change: transform; }
/* 03 turntable: scrubbable, chips drift with the pointer */
.ho-spin-wrap { cursor: default; }
#gf-spin { transition: none; }
.ho-spin-wrap:hover #gf-spin { transform: none; }
.ho-spin-glow { transition: opacity .5s ease, transform .5s ease; }
.ho-spin-wrap:hover .ho-spin-glow { opacity: 1; }
.ho-spin-hint { position: absolute; left: 50%; bottom: 6px; opacity: 1; transform: translateX(-50%); font-family: var(--font-btn); font-weight: 700; font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(170,215,235,.75); opacity: .85; transition: opacity .4s ease; pointer-events: none; }
.ho-spin-wrap:hover .ho-spin-hint { opacity: 1; }
.ho-spin-wrap .ho-badge { position: static; display: inline-block; margin-bottom: 18px; }

.ho-spec { will-change: transform; }
/* 04 contact: halo tracks the cursor, magnetic pill */
.ho-cta-sec .halo { transition: transform .5s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.ho-pill { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .ho-tile, .ho-row, .ho-row img, #gf-spin, .ho-spec, .ho-cta-sec .halo { transition: none !important; }
}

/* Global reach map (inside Who we are) */
.ho-manifesto { padding-bottom: 120px; }
.ho-manifesto .inner.reach-wrap { max-width: 1240px; margin-top: 64px; text-align: left; }
.reach-map { position: relative; width: 100%; aspect-ratio: 1200 / 560; border-radius: 18px; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #0a2238 0%, #040d18 72%); box-shadow: 0 0 0 1px rgba(46,190,239,.18), 0 30px 80px rgba(0,0,0,.45), inset 0 0 120px rgba(46,190,239,.08); }
.reach-map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .8s ease; }
.reach-map.is-ready svg { opacity: 1; }
.reach-map .reach-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; pointer-events: none; }
.reach-map.is-fallback .reach-fallback { opacity: .9; }
.rm-hub { outline: none; }
.rm-hub:focus-visible > .ring2 { stroke: #fff; stroke-width: 2.5; }
.rm-hub .halo { opacity: .6; transition: opacity .3s; }
.rm-hub.is-on .halo { opacity: 1; }
.rm-arc { opacity: .35; transition: opacity .3s; }
.rm-arc.is-on { opacity: 1; animation: rmDash 1.6s linear infinite; }
@keyframes rmDash { to { stroke-dashoffset: -24; } }
.rm-badge { pointer-events: none; }
.rm-badge .disc { fill: rgba(5,20,38,.9); stroke: #3fc6f5; stroke-width: 1.8; }
.rm-badge .ring { fill: none; stroke: rgba(124,232,255,.28); stroke-width: 1; }
.rm-badge .v { fill: #fff; font-family: var(--font-head); font-weight: 900; text-anchor: middle; }
.rm-badge .k { fill: #9df0ff; font-family: var(--font-btn); font-weight: 700; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; text-anchor: middle; paint-order: stroke; stroke: #07141f; stroke-width: 4px; stroke-linejoin: round; }
.reach-tip { position: absolute; z-index: 3; width: min(300px, calc(100% - 32px)); padding: 16px 18px 12px; border-radius: 12px; background: rgba(8,22,34,.88); border: 1px solid rgba(46,190,239,.5); box-shadow: 0 18px 50px rgba(0,0,0,.5), 0 0 30px rgba(46,190,239,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translate(-50%, 0); }
.reach-tip[hidden] { display: none; }
.reach-tip .rg { display: flex; align-items: center; gap: 8px; font-family: var(--font-btn); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.reach-tip .rg .clk { margin-left: auto; color: rgba(255,255,255,.75); letter-spacing: .06em; }
.reach-tip h3 { margin: 8px 0 6px; font-family: var(--font-head); font-weight: 800; font-size: 18px; line-height: 1.15; color: #fff; }
.reach-tip p { margin: 0 0 4px; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.82); }
.reach-tip a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-family: var(--font-btn); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); text-decoration: none; }
.reach-tip a:hover, .reach-tip a:focus-visible { color: #fff; }
.reach-legend { position: absolute; left: 16px; bottom: 14px; z-index: 2; font-family: var(--font-btn); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.72); display: flex; align-items: center; gap: 8px; }
.reach-legend i { width: 18px; height: 2px; background: rgba(46,190,239,.8); box-shadow: 0 0 8px rgba(46,190,239,.9); }
@media (max-width: 900px) {
  .ho-manifesto .inner.reach-wrap { margin-top: 40px; }
  /* the hub card is taller than the whole map at phone widths, so let it hang
     below instead of clipping - and lift contain:paint which would crop it */
  .ho-manifesto { contain: none; }
  .reach-map { border-radius: 12px; overflow: visible; }
  .reach-map svg, .reach-map .reach-fallback { border-radius: 12px; }
  .rm-hub text { display: none; }
  .reach-tip { left: 50% !important; top: calc(100% + 10px) !important; bottom: auto; transform: translateX(-50%); }
  .reach-legend { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rm-arc.is-on { animation: none; } }