/*
  Prosper Power Night
  A presentation layer for the battery landing page. It keeps the site's
  interactive behavior and existing content intact while giving the page a
  high-contrast, panel-led energy-system treatment.
*/

:root {
  --night: #141414;
  --night-raised: #1b1b1b;
  --night-panel: #202020;
  --night-panel-strong: #272727;
  --paper: #ffffff;
  --signal: #0b5cff;
  --signal-strong: #0746c4;
  --signal-line: #0b5cff60;
  --signal-faint: #0b5cff17;
  --prosper-blue: #0b5cff;
  --blue: var(--signal);
  --blue-dark: var(--signal-strong);
  --cream: var(--night);
  --white: var(--paper);
  --ink: var(--paper);
  --muted: #c4c4c4;
  --line: #ffffff26;
  color: var(--paper);
  background: var(--night);
}

html { background: var(--night); }
body {
  color: var(--paper);
  background:
    radial-gradient(circle at 86% 12%, #0b5cff12 0, transparent 26rem),
    radial-gradient(circle at 7% 42%, #0b5cff14 0, transparent 30rem),
    var(--night);
}
::selection { background: var(--signal); color: var(--night); }

/* Navigation becomes a compact, dark command bar. */
.header,
.header.is-scrolled,
.header:has(.menu-toggle[aria-expanded="true"]) {
  background: color-mix(in srgb, var(--night) 92%, transparent);
  color: var(--paper);
  border-bottom: 1px solid var(--signal-line);
  box-shadow: 0 12px 30px #0000004a;
  backdrop-filter: blur(18px) saturate(130%);
}
.brand img { filter: drop-shadow(0 0 14px #0b5cff35); }
.desktop-nav a,
.desktop-nav button { color: #efefef; }
.desktop-nav .active,
.desktop-nav a:hover,
.desktop-nav button:hover { color: var(--signal); }
.header .outline {
  color: var(--paper);
  border-color: var(--signal-line);
  background: #ffffff08;
}
.header .outline:hover { color: var(--night); background: var(--signal); border-color: var(--signal); }
.menu-toggle { color: var(--signal); border-color: var(--signal-line); background: #ffffff08; }
.mobile-nav { color: var(--paper); background: #202020f5; border-top-color: var(--signal-line); box-shadow: 0 22px 42px #00000070; }
.mobile-nav a,.mobile-nav button { border-bottom-color: #ffffff1b; }
.mobile-nav a:last-child { color: var(--signal); }

/* Film-led opening: the house imagery becomes an atmospheric backdrop. */
.hero { background: #0c0c0c; border-bottom: 1px solid var(--signal-line); }
.hero-video { filter: brightness(.45) saturate(.67) contrast(1.18); }
.hero-shade {
  background:
    linear-gradient(180deg, #141414b8 0%, #14141482 32%, #1414148c 60%, #141414ee 100%),
    radial-gradient(circle at 73% 28%, #0b5cff26, transparent 34%);
}
.hero-content { position: relative; z-index: 1; }
.hero .eyebrow { color: var(--yellow); text-shadow: 0 0 18px #f4ff0070; }
.hero h1 {
  color: var(--paper);
  text-transform: uppercase;
  letter-spacing: -.052em;
  text-shadow: 0 8px 26px #0000008f;
}
.hero h1 .hero-first { color: var(--paper); }
.hero h1 > span:last-child { color: var(--signal); text-shadow: 0 0 26px #0b5cff46; }
.hero-description { color: #dfdfdf; }
.hero .button.yellow { box-shadow: 0 0 0 1px #f4ff0066, 0 12px 30px #00000070; }
.explore { color: var(--signal); }
.video-toggle { color: var(--signal); border-color: var(--signal-line); background: #202020bd; }
.video-toggle:hover { background: var(--signal); color: var(--night); border-color: var(--signal); }

/* The page body alternates dark energy bays rather than light marketing blocks. */
#main > .section:not(.hero):not(.closing) {
  color: var(--paper);
  background-color: var(--night);
  background-image:
    linear-gradient(90deg, #ffffff055 1px, transparent 1px),
    linear-gradient(#ffffff045 1px, transparent 1px),
    radial-gradient(circle at 91% 8%, #0b5cff12, transparent 22rem);
  background-size: 66px 66px, 66px 66px, auto;
  border-top: 1px solid #ffffff0d;
}
#choices,#markets,#savings,#vision,#stories {
  background-color: var(--night-raised) !important;
  background-image:
    linear-gradient(90deg, #ffffff035 1px, transparent 1px),
    linear-gradient(#ffffff035 1px, transparent 1px),
    radial-gradient(circle at 10% 20%, #0b5cff16, transparent 27rem) !important;
}
#main .section h2 {
  color: var(--paper);
  text-transform: uppercase;
  letter-spacing: -.045em;
}
#main .section h2 span { color: var(--signal); }
#main .section .lead { color: var(--muted); }
.eyebrow,.why-kicker,.step-label { color: var(--signal) !important; }
.eyebrow { letter-spacing: .2em; }

.button { background: var(--signal); color: var(--night); border-radius: 2px; box-shadow: 0 10px 24px #00000045; }
.button:hover { background: #0746c4; color: var(--night); }
.button.yellow { background: var(--yellow); color: var(--night); }
.button.yellow:hover { background: #fff; }
.text-link { color: var(--signal); }
.text-link:hover { color: #f4ff00; }
.circle-button { color: var(--signal); border-color: var(--signal-line); background: #ffffff06; }
.circle-button:hover:enabled { background: var(--signal); color: var(--night); border-color: var(--signal); }

/* Product presentation. */
.products { min-height: 0; }
.product-art-disc {
  background: radial-gradient(circle, #0b5cff24 0%, #0b5cff18 52%, transparent 68%);
  box-shadow: inset 0 0 0 1px var(--signal-line), 0 0 66px #0b5cff1d;
}
.product-art-disc:after { border-color: #0b5cff80; }
.product-art img { filter: drop-shadow(0 22px 28px #000000b0) drop-shadow(0 0 24px #0b5cff1a); }
.product-art img.photo-product { border: 1px solid var(--signal-line); box-shadow: 0 22px 50px #00000070; }
.art-caption { color: #cccccc; }
.specs { border-top-color: var(--signal-line); }
.specs > div { position: relative; padding-left: 14px; }
.specs > div:before { content: ''; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--signal); box-shadow: 0 0 15px #0b5cff88; }
.specs strong { color: var(--signal); }
.specs p { color: var(--muted); }
.carousel-dots button:after { background: #808080; }
.carousel-dots button[aria-pressed=true]:after { background: var(--signal); box-shadow: 0 0 12px #0b5cff99; }

/* Framed data modules inspired by an energy system interface. */
.choice-card,.why-grid article,.market-card,.journey-cards article,
.battery-form,.battery-results > div,.day-night-grid figure {
  background: linear-gradient(145deg, #ffffff0a, #ffffff035 48%, #0b5cff0a);
  color: var(--paper);
  border: 1px solid var(--signal-line);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 #ffffff12, 0 16px 32px #00000035;
}
.choice-card,.why-grid article,.market-card { overflow: hidden; position: relative; }
.choice-card:before,.why-grid article:before,.market-card:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 72px;
  height: 2px;
  background: var(--signal);
  box-shadow: 0 0 16px #0b5cffad;
}
.choice-card h3,.why-grid h3,.market-card h3 { color: var(--paper); text-transform: uppercase; }
.choice-card p,.why-grid p,.market-card p { color: var(--muted); }
.choice-card:hover,.why-grid article:hover,.market-card:hover { border-color: #0b5cffc9; transform: translateY(-3px); }
.day-night-grid figure { padding: 8px; overflow: hidden; }
.day-night-grid img { border-radius: 1px; filter: saturate(.8) brightness(.82) contrast(1.1); }
.day-night-grid figcaption { color: var(--signal); }

.markets .market-grid { gap: 16px; }
.market-card { min-height: 106px; display: grid; align-content: end; }
.market-card h3 { margin: 0; color: var(--paper); }

/* Prosper system strip and its supporting UI. */
.prosper-section { background-color: #1b1b1b !important; }
.prosper-section .service-grid {
  border-top-color: var(--signal-line);
  background: linear-gradient(90deg, #ffffff05, #ffffff02);
}
.service-grid > div { border-right-color: var(--signal-line); }
.service-grid h3 { color: var(--paper); text-transform: uppercase; }
.service-grid p { color: var(--muted); }
.service-icon { color: var(--signal); }
.service-icon svg { filter: drop-shadow(0 0 8px #0b5cff66); }
.brand-watermark { display: block; opacity: .055; filter: grayscale(1) brightness(5) sepia(1) hue-rotate(120deg); }

.savings .calculator {
  padding: clamp(24px,4vw,48px);
  border: 1px solid var(--signal-line);
  background: linear-gradient(135deg, #ffffff08, #0b5cff0b 50%, #0b5cff0a);
  box-shadow: inset 0 1px 0 #ffffff15, 0 20px 52px #00000038;
}
.dial { background: conic-gradient(from 225deg, var(--signal) 0 var(--progress), #ffffff16 var(--progress) 75%, transparent 75% 100%); box-shadow: 0 0 34px #0b5cff18; }
.dial:after { border-color: var(--signal-line); }
.dial-face { color: var(--paper); background: var(--night-panel); }
.dial-face > span:first-child,.dial-sub,.dial-instruction,.range-labels { color: var(--muted); }
.bill-range { accent-color: var(--signal); }
.bill-comparison > div > span,.bill-comparison p,.long-term > span { color: var(--muted); }
.bill-comparison > div:last-child strong { color: var(--signal); }
.comparison-arrow { color: var(--signal); }
.savings-highlight { background: linear-gradient(120deg, #0b5cff66, #0b5cff50); border: 1px solid var(--signal-line); border-radius: 2px; box-shadow: 0 12px 28px #0000004c; }
.savings-highlight > span,.savings-highlight > div { color: #ffffff; }
.savings-highlight > strong { color: var(--yellow); text-shadow: 0 0 20px #f4ff0066; }
.long-term,.assumptions { border-color: var(--signal-line); }
.assumptions summary { color: var(--paper); }

.vision,.experience { color: var(--paper); }
.feature-list > div,.experience-features > div { border-color: var(--signal-line); }
.feature-list > div > span,.experience-features > div > span { color: var(--signal); }
.feature-list p,.experience-features p { color: var(--muted); }
.proposal-card { border: 1px solid var(--signal-line); background: var(--night-panel); box-shadow: 0 24px 50px #00000073; }
.proposal-top,.proposal-bottom { background: #181818; }
.proposal-body { background: var(--night-panel); color: var(--paper); }
.proposal-body p,.proposal-detail div > span { color: var(--muted); }
.proposal-tabs button { color: #c4c4c4; }
.proposal-tabs button[aria-selected=true] { color: var(--signal); border-color: var(--signal); }
.proposal-float { color: var(--paper); background: #202020; border: 1px solid var(--signal-line); box-shadow: 0 18px 34px #00000055; }
.phone { border: 1px solid var(--signal-line); background: #141414; box-shadow: 16px 30px 56px #0000009b, 0 0 24px #0b5cff15; }
.phone-scene:before { background: radial-gradient(circle, #0b5cff20, transparent 68%); }
.phone-caption { color: var(--signal); }

.journey {
  background: #181818 url('/assets/solar-evening.png') center/cover !important;
  border-top-color: var(--signal-line) !important;
}
.journey-shade { display: block; background: linear-gradient(120deg, #141414ef, #181818d9 52%, #0b5cff80); }
.journey .lead { color: #e1e1e1; }
.journey-cards article { color: var(--paper); background: #181818c9; border-color: #0b5cff66; backdrop-filter: blur(9px); }
.journey-cards h3 { color: var(--paper); text-transform: uppercase; }
.journey-cards p { color: #d0d0d0; }
.step-icon { color: var(--signal); }
.journey-controls { color: var(--signal); }

.stories { background-color: #181818 !important; }
.stories .lead { color: var(--muted); }
.story-card { border: 1px solid #0b5cff55; border-radius: 3px; box-shadow: 0 20px 42px #00000054; }
.story-overlay { background: linear-gradient(180deg, #14141481, #14141409 32%, #141414dc); }
.story-top { color: var(--signal); }
.story-arrow { color: var(--signal); border-color: var(--signal-line); background: #1b1b1ba6; }
.story-card:hover .story-arrow { background: var(--signal); border-color: var(--signal); color: var(--night); }

.closing { background: #141414; }
.closing-video { filter: brightness(.4) saturate(.72) contrast(1.16); }
.closing-shade { background: linear-gradient(180deg, #141414c0, #141414b0 54%, #181818f5), radial-gradient(circle at 72% 25%, #0b5cff22, transparent 34%); }
.closing h2 { color: var(--paper); text-transform: uppercase; }
.closing h2 span { color: var(--signal); }
.closing .lead { color: #e1e1e1; }

.footer { color: var(--paper); background: #101010; border-top-color: var(--signal-line); }
.footer-main { border-top-color: var(--signal-line); }
.footer-brand p,.footer-brand .footer-contact,.footer-quote p,.footer-bottom { color: var(--muted); }
.footer-main h2 { color: var(--signal); }
.footer a:hover,.footer button:hover { color: var(--signal); }
.footer-quote > a.button { color: var(--night); background: var(--yellow); }
.footer-bottom { border-top-color: #ffffff20; }

dialog { color: var(--paper); background: var(--night-panel); border-color: var(--signal-line); box-shadow: 0 28px 100px #000000b8; }
dialog::backdrop { background: #141414d9; backdrop-filter: blur(8px); }
.dialog-close { color: var(--signal); border-color: var(--signal-line); background: #ffffff08; }
.dialog-close:hover { background: var(--signal); color: var(--night); }
.dialog-inner p,.dialog-inner p.dialog-small,.info-copy ul { color: var(--muted); }
.dialog-inner h2,.quote-person strong { color: var(--paper); }
.dialog-logo { background: transparent; }
.quote-person { border-block-color: var(--signal-line); }
.quote-person div span { color: var(--muted); }
.quote-person a { color: var(--signal); border-color: var(--signal-line); }
.faq-list details { border-bottom-color: var(--signal-line); }
.faq-list summary:after { color: var(--signal); }

@media (max-width: 960px) {
  .header,
  .header.is-scrolled,
  .header:has(.menu-toggle[aria-expanded="true"]) { background: #141414f2; }
  .savings .calculator { padding: 28px; }
  .service-grid > div { border-color: var(--signal-line); }
}

@media (max-width: 640px) {
  #main > .section:not(.hero):not(.closing) { background-size: 42px 42px, 42px 42px, auto; }
  .header { gap: 8px; padding-inline: 16px; }
  .header-actions { gap: 8px; }
  .header .join-button { display: none; }
  .menu-toggle { width: 38px; height: 38px; flex: 0 0 38px; }
  .hero-content { width: calc(100% - 32px); }
  .hero h1 { font-size: clamp(50px, 13.5vw, 70px); letter-spacing: -.06em; line-height: .94; }
  .hero h1 .hero-first { font-size: .94em; white-space: normal; }
  .hero h1 > span:last-child { margin-top: 10px; }
  .choice-card,.why-grid article,.market-card,.journey-cards article,.battery-form,.battery-results > div { border-radius: 2px; }
  .savings .calculator { padding: 22px 18px; margin-inline: -2px; }
  .specs > div { padding-left: 12px; }
  .service-grid { background: transparent; }
}

@media (max-width: 390px) {
  .hero h1 { font-size: clamp(50px, 13.5vw, 54px); }
  .hero-description { max-width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .choice-card:hover,.why-grid article:hover,.market-card:hover { transform: none; }
}