/* Homepage only: refined CSS-only solar-energy hero. */
.home-hero { position: relative; overflow: hidden; min-height: auto; height: auto; padding: 58px 0 62px; color: #fff; background: radial-gradient(circle at 78% 46%, rgba(0, 191, 255, .16), transparent 27%), radial-gradient(circle at 92% 20%, rgba(48, 171, 235, .11), transparent 30%), linear-gradient(112deg, #062d67 0%, #064c91 52%, #0788c7 100%); }
.home-hero::after { position: absolute; top: -25%; right: 4%; width: 260px; height: 150%; content: ""; pointer-events: none; opacity: .7; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .035), transparent); transform: skewX(-18deg); animation: lightSweep 12s ease-in-out infinite; }
.home-hero::before { position: absolute; inset: 0; content: ""; pointer-events: none; opacity: .075; background-image: radial-gradient(rgba(201, 241, 255, .65) .7px, transparent .7px); background-position: right center; background-size: 18px 18px; -webkit-mask-image: linear-gradient(to left, #000, transparent 54%); mask-image: linear-gradient(to left, #000, transparent 54%); }
.home-hero__grid { position: relative; z-index: 1; display: grid; min-height: 500px; grid-template-columns: minmax(0, 1.08fr) minmax(440px, .92fr); align-items: center; gap: clamp(64px, 6vw, 100px); }
.home-hero__content { width: 100%; max-width: 720px; justify-self: start; }
.home-hero .eyebrow { margin: 0 0 24px; color: #ffd000; animation: heroReveal .65s ease both; }
.home-hero h1 { max-width: 700px; margin: 0; color: #fff; font-size: clamp(50px, 3.6vw, 64px); font-weight: 800; line-height: 1.05; letter-spacing: -.035em; animation: heroReveal .65s .08s ease both; }
.home-hero__description { max-width: 680px; margin: 26px 0 0; color: rgba(255, 255, 255, .86); font-size: 18px; font-weight: 400; line-height: 1.65; animation: heroReveal .65s .16s ease both; }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; animation: heroReveal .65s .24s ease both; }
.home-hero__actions .btn { min-height: 46px; border-radius: 9px; transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease; }
.home-hero__actions .btn--sun { background: #ffbd00; color: #082b63; }
.home-hero__actions .btn--sun:hover { background: #e8aa00; color: #082b63; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(255, 190, 0, .22); }
.home-hero__secondary { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08); color: #fff; }
.home-hero__secondary:hover { border-color: rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .13); color: #fff; transform: translateY(-2px); }
.home-hero__points { display: flex; flex-wrap: wrap; gap: 26px; margin: 30px 0 0; padding: 0; list-style: none; animation: heroReveal .65s .32s ease both; }
.home-hero__points li { color: rgba(255, 255, 255, .95); transition: color .2s ease; }
.home-hero__points li:hover { color: #fff; }
.home-hero__points li::before { color: #ffd000; }

.home-hero__energy { position: relative; isolation: isolate; width: min(100%, 540px); height: 390px; justify-self: end; align-self: center; animation: energyReveal .8s .15s ease both; }
.home-hero__energy-system { position: absolute; top: 50%; left: 50%; width: 360px; height: 360px; transform: translate(-50%, -50%); }
.home-hero__ring, .home-hero__solar-core, .home-hero__energy-arc, .home-hero__node-orbit { position: absolute; top: 50%; left: 50%; }
.home-hero__ring { border-radius: 50%; }
.home-hero__ring--inner { width: 220px; height: 220px; border: 1px solid rgba(179, 230, 255, .17); transform: translate(-50%, -50%); }
.home-hero__ring--middle { width: 300px; height: 300px; border: 1px dashed rgba(146, 218, 255, .18); transform: translate(-50%, -50%); }
.home-hero__ring--outer { width: 380px; height: 380px; border: 1px solid rgba(255, 255, 255, .09); transform: translate(-50%, -50%); }
.home-hero__energy-arc { z-index: 1; width: 330px; height: 330px; border-radius: 50%; background: conic-gradient(from 20deg, transparent 0 20%, rgba(88, 210, 255, .5) 28%, transparent 42% 72%, rgba(255, 194, 0, .4) 78%, transparent 88%); -webkit-mask: radial-gradient(transparent 64%, #000 65% 67%, transparent 68%); mask: radial-gradient(transparent 64%, #000 65% 67%, transparent 68%); transform: translate(-50%, -50%); animation: energyArcRotate 30s linear infinite; }
.home-hero__solar-core { z-index: 2; width: 145px; height: 145px; transform: translate(-50%, -50%); }
.home-hero__solar-halo { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255, 207, 32, .35) 0%, rgba(255, 181, 0, .18) 38%, rgba(40, 193, 255, .14) 60%, transparent 72%); filter: blur(4px); animation: haloBreathe 5.5s ease-in-out infinite; }
.home-hero__solar-body { position: absolute; top: 50%; left: 50%; display: grid; width: 72px; height: 72px; place-items: center; border: 1px solid rgba(255, 255, 255, .55); border-radius: 50%; background: linear-gradient(145deg, #ffd84a, #ffb400); color: #082b63; box-shadow: 0 0 24px rgba(255, 190, 0, .42), 0 0 70px rgba(255, 190, 0, .22), 0 0 130px rgba(37, 190, 255, .12); transform: translate(-50%, -50%); animation: solarBreathe 4.5s ease-in-out infinite; }
.home-hero__solar-body svg { width: 26px; height: 26px; }
.home-hero__node-orbit { width: 300px; height: 300px; transform: translate(-50%, -50%); }
.home-hero__node-orbit--one { animation: orbitNode1 18s linear infinite; }
.home-hero__node-orbit--two { width: 380px; height: 380px; animation: orbitNode2 24s linear infinite; }
.home-hero__node-orbit--three { width: 220px; height: 220px; animation: orbitNode3 32s linear infinite; }
.home-hero__node { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; border-radius: 50%; transform: translateX(-50%); }
.home-hero__node--one { background: #ffd000; box-shadow: 0 0 0 4px rgba(255, 208, 0, .11), 0 0 12px rgba(255, 208, 0, .65); }
.home-hero__node--two { width: 7px; height: 7px; background: #60d9ff; box-shadow: 0 0 0 4px rgba(96, 217, 255, .10), 0 0 12px rgba(96, 217, 255, .65); }
.home-hero__node--three { width: 5px; height: 5px; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .12), 0 0 10px rgba(168, 225, 255, .7); }
.home-hero__panel-grid { position: absolute; right: 3%; bottom: 4px; width: min(100%, 505px); height: 128px; opacity: .09; transform: perspective(480px) rotateX(58deg) rotateZ(-2deg); transform-origin: bottom right; background-image: linear-gradient(rgba(81, 211, 255, .95) 1px, transparent 1px), linear-gradient(90deg, rgba(81, 211, 255, .95) 1px, transparent 1px); background-size: 42px 28px; border: 1px solid rgba(108, 219, 255, .45); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 25%, transparent 95%); mask-image: linear-gradient(to bottom, transparent, #000 25%, transparent 95%); animation: gridBreathe 7s ease-in-out infinite; }
.home-hero__chip { position: absolute; z-index: 4; display: inline-flex; height: 44px; align-items: center; gap: 7px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 12px; background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .055)); color: #fff; font-size: 13px; font-weight: 650; line-height: 1; white-space: nowrap; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 12px 35px rgba(0, 25, 70, .18); }
.home-hero__chip::after { position: absolute; top: 50%; width: 56px; height: 1px; content: ""; opacity: .8; background: linear-gradient(90deg, rgba(255, 255, 255, .20), transparent); }
.home-hero__chip svg { width: 16px; height: 16px; color: #ffd000; }
.home-hero__chip--clean { top: 70px; left: 10px; animation: chipFloat 5.2s ease-in-out infinite; }
.home-hero__chip--clean::after { right: -56px; }
.home-hero__chip--savings { top: 190px; right: 0; animation: chipFloat 6.1s .35s ease-in-out infinite; }
.home-hero__chip--savings::after { left: -56px; transform: rotate(180deg); }
.home-hero__chip--power { bottom: 55px; left: 40px; animation: chipFloat 5.6s .18s ease-in-out infinite; }
.home-hero__chip--power::after { right: -56px; transform: rotate(-15deg); transform-origin: left; }

@keyframes heroReveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes energyReveal { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes solarBreathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.045); } }
@keyframes haloBreathe { 0%, 100% { opacity: .65; transform: scale(.96); } 50% { opacity: .95; transform: scale(1.08); } }
@keyframes energyArcRotate { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes orbitNode1 { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes orbitNode2 { from { transform: translate(-50%, -50%) rotate(180deg); } to { transform: translate(-50%, -50%) rotate(-180deg); } }
@keyframes orbitNode3 { from { transform: translate(-50%, -50%) rotate(100deg); } to { transform: translate(-50%, -50%) rotate(460deg); } }
@keyframes chipFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes gridBreathe { 0%, 100% { opacity: .07; } 50% { opacity: .11; } }
@keyframes lightSweep { 0%, 100% { transform: translateX(-60px) skewX(-18deg); } 50% { transform: translateX(170px) skewX(-18deg); } }

@media (min-width: 901px) and (max-width: 1200px) { .home-hero { padding-block: 52px; } .home-hero__grid { min-height: auto; } }
@media (max-width: 900px) { .home-hero { padding-block: 48px; } .home-hero__grid { min-height: auto; grid-template-columns: 1fr; gap: 26px; } .home-hero__content { max-width: 760px; } .home-hero__energy { width: min(100%, 500px); height: 300px; justify-self: center; } .home-hero__ring--inner { width: 185px; height: 185px; } .home-hero__ring--middle, .home-hero__node-orbit--one { width: 250px; height: 250px; } .home-hero__ring--outer, .home-hero__node-orbit--two { width: 315px; height: 315px; } .home-hero__energy-arc { width: 275px; height: 275px; } .home-hero__node-orbit--three { width: 185px; height: 185px; } .home-hero__panel-grid { right: 4%; width: 88%; height: 96px; } .home-hero__chip--clean { top: 20px; left: 3%; } .home-hero__chip--savings { top: 128px; right: 0; } .home-hero__chip--power { bottom: 12px; left: 12%; } }
@media (max-width: 600px) { .home-hero { padding-block: 40px; } .home-hero h1 { font-size: clamp(38px, 11vw, 48px); } .home-hero__description { font-size: 16px; } .home-hero__energy { height: 250px; } .home-hero__ring--inner { width: 165px; height: 165px; } .home-hero__ring--middle, .home-hero__node-orbit--one { width: 220px; height: 220px; } .home-hero__ring--outer, .home-hero__node-orbit--two { display: none; } .home-hero__energy-arc { width: 240px; height: 240px; } .home-hero__node-orbit--three { width: 165px; height: 165px; } .home-hero__solar-core { transform: translate(-50%, -50%) scale(.88); } .home-hero__panel-grid { right: 0; width: 96%; height: 76px; } .home-hero__chip { height: 38px; padding: 0 10px; font-size: 12px; } .home-hero__chip::after { width: 28px; } .home-hero__chip--clean { top: 8px; left: 0; } .home-hero__chip--clean::after { right: -28px; } .home-hero__chip--savings { top: 105px; right: 0; } .home-hero__chip--savings::after { left: -28px; } .home-hero__chip--power { bottom: 0; left: 4%; } .home-hero__chip--power::after { right: -28px; } }
@media (prefers-reduced-motion: reduce) { .home-hero *, .home-hero *::before, .home-hero *::after { animation: none !important; transition: none !important; } }

@media (max-width: 767px) {
    .home-hero {
        padding-bottom: 44px;
    }

    .home-hero h1 {
        font-size: clamp(40px, 11vw, 44px);
        line-height: 1.04;
        letter-spacing: -.02em;
    }

    .home-hero__description {
        white-space: normal;
        overflow-wrap: normal;
        word-break: normal;
    }

    .home-hero__actions {
        gap: 16px;
    }

    .home-hero__points {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 22px;
        margin: 30px 0;
    }

    .home-hero__energy {
        width: min(100%, 500px);
        margin-inline: auto;
        justify-self: center;
    }

    .home-hero__chip--clean {
        left: 12px;
    }

    .home-hero__chip--savings {
        right: 12px;
    }

    .home-hero__chip--power {
        left: 12px;
    }
}