:root { color-scheme: dark; }
* { box-sizing: border-box; }
html { background: #020d09; scroll-behavior: smooth; }
body.sunzee-home-page { min-width: 320px; margin: 0; overflow-x: hidden; color: #eaf4e7; background: #020d09; font-family: "Space Grotesk", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.shell { width: min(100% - 64px, 1200px); margin-inline: auto; position: relative; z-index: 1; }
.sunzee-home-glow { position: fixed; z-index: 0; inset: 0; pointer-events: none; background: radial-gradient(ellipse 46% 40% at 62% 0%, rgba(194, 209, 26, .15), transparent 70%), radial-gradient(ellipse 38% 30% at 2% 97%, rgba(0, 173, 126, .13), transparent 72%), #020d09; }
.sunzee-home-glow::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(136, 255, 95, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(136, 255, 95, .02) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(90deg, #000, transparent 58%, #000); opacity: .42; }

.site-header { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-brand { display: inline-flex; align-items: center; gap: 8px; color: transparent; background: linear-gradient(90deg, #02e6b8, #51ee65 55%, #d8ec12); background-clip: text; -webkit-background-clip: text; font-family: Orbitron, sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -1.6px; white-space: nowrap; }
.site-brand img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 5px #dbff50) drop-shadow(0 0 12px rgba(90, 255, 77, .5)); }
.site-nav { display: flex; align-items: center; gap: 27px; margin-left: auto; color: #bdc7ae; font-size: 12px; }
.site-nav a:hover { color: #c8ff52; }
.site-actions { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; }
.nav-login, .nav-register { min-height: 33px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(139, 236, 75, .17); border-radius: 12px; }
.nav-login { background: rgba(3, 26, 15, .5); }
.nav-register { gap: 9px; border: 0; color: #071608; background: linear-gradient(105deg, #a0f827, #d6ed1c 51%, #ff9700); box-shadow: 0 5px 15px rgba(196, 221, 18, .22); }

.hero { min-height: 478px; padding: 27px 0 9px; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(380px, .88fr); align-items: center; gap: 70px; }
.live-pill, .section-tag { width: max-content; margin: 0 0 27px; padding: 5px 12px; border: 1px solid rgba(153, 244, 50, .5); border-radius: 999px; color: #c5ff66; background: rgba(71, 130, 26, .11); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.live-pill i, .console-topline i { width: 6px; height: 6px; display: inline-block; margin-right: 6px; border-radius: 50%; background: #86ff31; box-shadow: 0 0 8px #9aff3d; }
.hero h1, .section h2, .final-cta h2 { margin: 0; color: #fffdf0; font-family: Orbitron, sans-serif; font-size: clamp(36px, 4.2vw, 54px); font-weight: 700; letter-spacing: -3.8px; line-height: 1.02; }
.hero h1 span, .section h2 span, .final-cta h2 span { color: transparent; background: linear-gradient(90deg, #00e7b7, #52ec63 53%, #e4e912); background-clip: text; -webkit-background-clip: text; }
.hero-lede { max-width: 535px; margin: 20px 0 24px; color: #c5c7a7; font-size: 14px; line-height: 1.65; }.hero-lede strong { color: #b8fa58; font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.button { min-height: 45px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 12px; font-size: 13px; font-weight: 700; transition: transform .18s ease, filter .18s ease; }
.button:hover { filter: brightness(1.08); transform: translateY(-1px); }.button-primary { color: #071608; background: linear-gradient(105deg, #a0f827, #d6ed1c 49%, #ff9901); box-shadow: 0 9px 20px rgba(200, 219, 17, .22); }.button-secondary { border-color: rgba(133, 241, 67, .54); color: #d7f6c8; background: rgba(1, 23, 13, .48); }
.trust-list { margin: 24px 0 29px; padding: 0; display: flex; flex-wrap: wrap; gap: 11px 18px; color: #90a895; font-size: 9px; list-style: none; }.trust-list li::first-letter { color: #b5fc52; }
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }.hero-stats div { min-height: 63px; padding: 12px; border: 1px solid rgba(118, 221, 121, .15); border-radius: 16px; background: linear-gradient(110deg, rgba(5, 38, 23, .87), rgba(3, 29, 17, .72)); box-shadow: inset 4px 0 #8ded37; }.hero-stats span { display: block; color: #97ad98; font-size: 7px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }.hero-stats strong { display: block; margin-top: 8px; color: #15edcc; font-family: Orbitron, sans-serif; font-size: 14px; letter-spacing: -.7px; }

.array-console { padding: 18px 17px 15px; border: 1px solid rgba(135, 230, 91, .22); border-top-color: rgba(151, 255, 67, .67); border-radius: 27px; background: radial-gradient(ellipse at 0 105%, rgba(195, 170, 10, .18), transparent 52%), radial-gradient(ellipse at 100% 18%, rgba(74, 154, 34, .35), transparent 53%), #061e12; box-shadow: 0 20px 42px rgba(0, 0, 0, .26); }.console-topline, .console-bottom { display: flex; justify-content: space-between; color: #a7bd9f; font-size: 8px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }.console-topline time { color: #9cae9d; font-size: 7px; letter-spacing: .02em; }
.yield-card { margin: 15px 0 11px; padding: 17px 16px 11px; display: grid; grid-template-columns: 1fr auto; border-radius: 13px; background: rgba(0, 13, 8, .74); }.yield-card span { display: block; color: #aab89a; font-size: 8px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }.yield-card strong { display: block; margin-top: 5px; color: #bfff23; font-family: Orbitron, sans-serif; font-size: 24px; letter-spacing: -1px; }.yield-card em { color: #1edbbf; font-style: normal; }.power-readout { text-align: right; }.power-readout strong { font-size: 16px; }
.chart { grid-column: 1 / -1; height: 101px; margin-top: 8px; }.chart svg { width: 100%; height: 100%; overflow: visible; }.chart-grid { fill: none; stroke: rgba(136, 236, 101, .08); stroke-dasharray: 2 3; }.array-area { fill: url(#arrayArea); }.array-line { fill: none; stroke: #8cf12c; stroke-width: 2.2; }.chart circle { fill: #d8ff53; }
.panel-array { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }.panel-array span { min-height: 42px; border: 1px solid #08798c; border-radius: 3px; background: linear-gradient(90deg, transparent 32%, rgba(28, 211, 231, .28) 33% 35%, transparent 36% 65%, rgba(28, 211, 231, .28) 66% 68%, transparent 69%), linear-gradient(transparent 31%, rgba(28, 211, 231, .28) 32% 35%, transparent 36% 64%, rgba(28, 211, 231, .28) 65% 68%, transparent 69%), #022738; box-shadow: inset 0 0 8px rgba(0, 171, 205, .22); }.console-bottom { margin-top: 10px; }.console-bottom b { color: #c7fb65; }

.section { padding: 83px 0 4px; }.section-tag { margin-bottom: 14px; }.section-tag.cyan { border-color: rgba(0, 219, 220, .45); color: #46e8e5; background: rgba(0, 129, 137, .1); }.section-tag.gold { border-color: rgba(242, 192, 0, .5); color: #f5d218; background: rgba(154, 113, 0, .12); }.section h2 { font-size: clamp(27px, 3vw, 39px); letter-spacing: -2.7px; }.section-intro { max-width: 630px; margin: 11px 0 41px; color: #c7caa9; font-size: 14px; line-height: 1.55; }
.process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; }.process-card, .feature-card { position: relative; min-height: 187px; padding: 17px 18px; overflow: hidden; border: 1px solid rgba(129, 231, 125, .16); border-radius: 19px; background: linear-gradient(120deg, rgba(8, 43, 27, .9), rgba(3, 30, 18, .8)); }.process-card::before, .feature-card::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: linear-gradient(#9bfd32, #20520f 50%, transparent); }.card-top { display: flex; align-items: flex-start; justify-content: space-between; }.process-icon, .feature-icon { width: 43px; height: 43px; display: grid; place-items: center; position: relative; border: 1px solid rgba(143, 236, 72, .24); border-radius: 14px; color: #ccff57; background: rgba(99, 151, 20, .25); font-size: 22px; }.process-icon b { position: absolute; right: -4px; bottom: -4px; padding: 2px 3px; border: 1px solid #9cf13c; border-radius: 3px; color: #dfff7f; background: #092b16; font-size: 7px; }.card-top small { color: #b4c4ac; font-size: 8px; letter-spacing: .15em; text-transform: uppercase; }.process-card h3, .feature-card h3 { margin: 19px 0 9px; color: #f0fae9; font-family: Orbitron, sans-serif; font-size: 15px; letter-spacing: -1px; }.process-card p, .feature-card p { margin: 0; color: #b0b9aa; font-size: 12px; line-height: 1.65; }

.network-section { display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 65px; padding-top: 92px; }.network-section .section-intro { margin-bottom: 25px; }.network-points { margin: 0; padding: 0; display: grid; gap: 13px; list-style: none; color: #a9f04e; font-size: 25px; }.network-points li { display: flex; align-items: center; gap: 12px; }.network-points span { color: #e3eddc; font-size: 12px; }
.array-list { display: grid; gap: 10px; }.array-row { position: relative; min-height: 83px; padding: 16px 16px 15px; display: grid; grid-template-columns: 37px 1fr auto; column-gap: 10px; align-items: start; overflow: hidden; border: 1px solid rgba(138, 230, 127, .15); border-radius: 18px; background: linear-gradient(110deg, rgba(10, 48, 29, .95), rgba(3, 29, 17, .85)); }.array-sun { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid rgba(172, 249, 78, .27); border-radius: 50%; color: #d0ff58; background: rgba(91, 146, 18, .31); font-size: 19px; }.array-row h3 { margin: 1px 0 3px; font-size: 12px; }.array-row p, .utilization span { margin: 0; color: #a6bd9f; font-size: 8px; font-family: Orbitron, sans-serif; letter-spacing: .15em; text-transform: uppercase; }.utilization { text-align: right; }.utilization strong { display: block; color: #b9ff55; font-size: 12px; }.utilization span { font-size: 7px; }.util-bar { position: absolute; right: 15px; bottom: 14px; left: 15px; height: 6px; overflow: hidden; border-radius: 99px; background: #092317; }.util-bar i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #ffc800, #8aff37 52%, #1bdbd7); }

.feature-grid { margin-top: 42px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }.feature-card { min-height: 178px; padding: 20px 22px; }.feature-card::before { display: none; }.feature-card h3 { margin-top: 18px; }.feature-card .feature-icon { font-size: 20px; }
.faq-section { padding-top: 91px; }.faq-section h2 { margin-bottom: 33px; }.faq-list { width: min(100%, 690px); margin-inline: auto; display: grid; gap: 11px; }.faq-item { border: 1px solid rgba(129, 230, 124, .16); border-radius: 18px; background: linear-gradient(110deg, rgba(9, 45, 27, .9), rgba(4, 31, 18, .82)); }.faq-item[open] { border-top-color: #8cec36; }.faq-item summary { min-height: 62px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; cursor: pointer; color: #eef7e9; font-family: Orbitron, sans-serif; font-size: 13px; letter-spacing: -1px; }.faq-item summary::-webkit-details-marker { display: none; }.faq-item summary span { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; border: 1px solid #81db30; border-radius: 50%; color: #c9ff63; font-family: "Space Grotesk", sans-serif; font-size: 19px; }.faq-item[open] summary span { transform: rotate(45deg); }.faq-item p { margin: -3px 58px 17px 17px; color: #b5c3b1; font-size: 12px; line-height: 1.6; }
.final-cta { margin-top: 87px; padding: 53px 51px; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 30px; border: 1px solid rgba(144, 239, 71, .4); border-radius: 27px; background: radial-gradient(ellipse at 2% 100%, rgba(190, 159, 10, .3), transparent 38%), radial-gradient(ellipse at 78% 14%, rgba(81, 152, 39, .28), transparent 47%), #062516; }.final-cta h2 { font-size: clamp(25px, 3vw, 35px); letter-spacing: -1.25px; line-height: 1.22; }.final-cta h2 span { letter-spacing: -1.25px; }.final-cta p { grid-column: 1; margin: 13px 0 0; color: #e0e1bd; font-size: 14px; line-height: 1.45; }.final-cta .hero-actions { grid-column: 2; grid-row: 1 / span 2; }
.site-footer { padding: 74px 0 37px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 50px; color: #a5b3a3; font-size: 12px; }.footer-brand { margin-bottom: 13px; }.site-footer p { max-width: 280px; line-height: 1.6; }.site-footer small { display: block; margin-top: 18px; color: #748879; }.site-footer > div:not(:first-child) { display: grid; align-content: start; gap: 10px; }.site-footer strong { margin-bottom: 4px; color: #e6f3de; font-family: Orbitron, sans-serif; font-size: 11px; }.site-footer a:hover { color: #bafa52; }

@media (max-width: 900px) { .shell { width: min(100% - 40px, 650px); }.site-nav { display: none; }.hero { padding-top: 40px; grid-template-columns: 1fr; gap: 38px; }.hero-copy { order: 1; }.array-console { order: 2; }.hero-stats { max-width: 590px; }.process-grid { grid-template-columns: repeat(2, 1fr); }.network-section { grid-template-columns: 1fr; gap: 35px; }.feature-grid { grid-template-columns: repeat(2, 1fr); }.final-cta { grid-template-columns: 1fr; }.final-cta .hero-actions { grid-column: 1; grid-row: auto; margin-top: 23px; }.site-footer { grid-template-columns: 1.6fr 1fr 1fr; gap: 25px; } }
@media (max-width: 560px) { .shell { width: calc(100% - 36px); }.site-header { min-height: 68px; gap: 10px; }.site-brand { font-size: 15px; }.site-brand img { width: 34px; height: 34px; }.site-actions { margin-left: auto; font-size: 10px; }.nav-login, .nav-register { min-height: 30px; padding: 0 9px; border-radius: 9px; }.nav-register span { display: none; }.hero { min-height: auto; padding: 42px 0 0; gap: 28px; }.live-pill { margin-bottom: 20px; font-size: 8px; }.hero h1 { font-size: clamp(32px, 12vw, 48px); letter-spacing: -3px; }.hero-lede { margin: 17px 0 20px; font-size: 13px; }.button { min-height: 43px; padding: 0 14px; font-size: 12px; }.trust-list { margin: 20px 0 23px; gap: 8px 13px; font-size: 8px; }.hero-stats { grid-template-columns: 1fr 1fr; }.hero-stats div { min-height: 59px; }.array-console { padding: 14px 12px; border-radius: 20px; }.yield-card { padding: 14px 12px 7px; }.panel-array span { min-height: 31px; }.section { padding-top: 67px; }.section h2 { font-size: 26px; letter-spacing: -2.4px; }.section-intro { margin-bottom: 27px; font-size: 13px; }.process-grid, .feature-grid { grid-template-columns: 1fr; gap: 12px; }.process-card { min-height: 160px; }.network-section { padding-top: 66px; }.array-row { min-height: 77px; }.feature-grid { margin-top: 26px; }.feature-card { min-height: 158px; }.faq-section { padding-top: 67px; }.faq-item summary { min-height: 58px; font-size: 11px; }.final-cta { margin-top: 64px; padding: 31px 23px; border-radius: 21px; }.final-cta p { font-size: 13px; }.site-footer { padding: 57px 0 29px; grid-template-columns: 1fr 1fr; gap: 30px 20px; }.site-footer > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 374px) { .shell { width: calc(100% - 28px); }.site-brand img { width: 30px; height: 30px; }.site-brand { font-size: 13px; }.site-actions { gap: 4px; }.nav-login, .nav-register { padding: 0 7px; }.hero h1 { font-size: 32px; }.hero-actions { gap: 7px; }.button { padding: 0 12px; }.hero-stats div { padding: 10px; }.yield-card strong { font-size: 20px; }.panel-array { gap: 3px; }.panel-array span { min-height: 27px; }.array-row { padding-inline: 11px; }.array-row h3 { font-size: 11px; }.network-points span { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* The compact landing hero follows the supplied mobile composition. */
.mobile-menu { display: none; }
.mobile-title-break { display: none; }
.hero-title-main { display: block; color: #fffdf0 !important; background: none !important; -webkit-text-fill-color: #fffdf0; }

@media (max-width: 560px) {
  .site-header { min-height: 68px; }
  .site-brand { font-size: 24px; }
  .site-brand img { width: 54px; height: 54px; }
  .site-actions { display: none; }
  .mobile-menu { width: 35px; height: 35px; margin-left: auto; padding: 8px; display: grid; align-content: center; gap: 4px; border: 1px solid rgba(130, 239, 76, .32); border-radius: 50%; background: rgba(4, 35, 19, .77); cursor: pointer; }
  .mobile-menu span { height: 1px; display: block; background: #a9f653; }
  .mobile-nav-open .site-nav { position: absolute; z-index: 5; top: 61px; right: 0; width: 166px; padding: 10px; display: grid; gap: 2px; border: 1px solid rgba(127, 236, 76, .23); border-radius: 13px; background: #062416; box-shadow: 0 16px 30px rgba(0, 0, 0, .38); }
  .mobile-nav-open .site-nav a { padding: 9px; border-radius: 8px; font-size: 12px; }
  .hero { padding-top: 31px; }
  .live-pill { margin-bottom: 22px; }
  .hero h1 { max-width: 300px; font-size: clamp(37px, 12vw, 42px); letter-spacing: -2.3px; line-height: 1.1; }
  .hero-title-main { display: inline; }
  .mobile-title-break { display: initial; }
  .hero-lede { margin: 18px 0 27px; font-size: 14px; line-height: 1.7; }
  .hero-copy .hero-actions { display: block; }
  .hero-copy .hero-actions .button { width: 100%; min-height: 50px; }
  .hero-copy .hero-actions .button-secondary { display: none; }
}

@media (max-width: 374px) {
  .site-brand { font-size: 21px; }
  .site-brand img { width: 48px; height: 48px; }
  .hero h1 { font-size: 37px; }
}