/* Sunray Solar · concept by Brand Evolution */
:root{
  --cream:#FFF6E5; --paper:#FFFCF5; --navy:#102A43; --navy2:#173A5C; --night:#0C1630; --sun:#FFB020; --sun-soft:#FFE3A3; --sun-text:#9A5200;
  --leaf:#16A06A; --leaf-soft:#C9F2DE; --coral:#FF6B4A; --teal:#2CC7B6; --ink:#13202E; --ink-soft:#4C5A68;
  --display:"Red Hat Display", system-ui, sans-serif; --body:"Red Hat Text", system-ui, sans-serif; --r:22px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; font:400 1.03rem/1.62 var(--body); color:var(--ink); background:var(--cream); overflow-x:hidden}
svg{display:block}
h1,h2,h3{font-family:var(--display); line-height:1.02; margin:0 0 .45em; font-weight:900; letter-spacing:-.03em}
.display mark{background:linear-gradient(transparent 58%, var(--sun) 58%, var(--sun) 90%, transparent 90%); color:inherit; padding:0 .06em}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid #2F7DE1; outline-offset:3px; border-radius:8px}
.skip{position:absolute; left:-999px; top:8px; background:#fff; padding:8px 14px; border-radius:10px; z-index:100}
.skip:focus{left:12px}
.wrap{width:min(1180px, 100% - 32px); margin:0 auto; position:relative}
.two{display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(24px,5vw,64px); align-items:center}
.display{font-size:clamp(2.2rem, 4.8vw, 4rem)}
.kicker{font:800 .78rem/1.3 var(--body); letter-spacing:.18em; text-transform:uppercase; color:var(--sun-text); margin-bottom:1rem}
.lead{font-size:clamp(1.04rem,1.35vw,1.16rem); max-width:33em; color:var(--ink-soft)}
.tiny{font-size:.9rem; color:var(--ink-soft); margin-top:1.4rem}

.btn{display:inline-flex; align-items:center; font:700 1rem var(--body); text-decoration:none; color:var(--navy); background:var(--sun); border:0; cursor:pointer;
  padding:.85em 1.5em; border-radius:14px; box-shadow:0 8px 22px rgba(255,176,32,.35); transition:background .2s; will-change:transform}
.btn:hover{background:#FFC04D}
.btn-ghost{background:transparent; color:inherit; box-shadow:inset 0 0 0 2px currentColor}
.btn-ghost:hover{background:rgba(16,42,67,.06)}
.btn-dark{background:var(--navy); color:#fff; box-shadow:0 8px 22px rgba(16,42,67,.3)}
.btn-dark:hover{background:var(--navy2)}
.btn-small{padding:.56em 1.05em; font-size:.9rem; box-shadow:none}
.cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:1.6rem}

/* nav glass tinted to the section beneath */
.nav{position:fixed; top:12px; left:50%; transform:translateX(-50%); width:min(1180px, 100% - 24px); z-index:60; display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding:8px 8px 8px 12px; border-radius:18px; color:var(--ink);
  background:var(--navbg, rgba(255,246,229,.8)); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 6px 24px rgba(16,42,67,.1), inset 0 0 0 1px rgba(16,42,67,.08); transition:background .35s, color .35s}
.nav[data-tone="dark"]{color:#F2F6FA; box-shadow:0 6px 24px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.12)}
.logo{display:flex; align-items:center; gap:9px; text-decoration:none; font:900 1.14rem var(--display); letter-spacing:-.02em}
.logo svg{width:32px; height:32px}
.nav nav{display:flex; gap:2px}
.nav nav a{text-decoration:none; font-weight:700; font-size:.94rem; padding:7px 12px; border-radius:10px}
.nav nav a:hover{background:rgba(127,127,127,.18)}

.sec{scroll-margin-top:80px; position:relative; padding:clamp(92px,10vw,140px) 0 clamp(80px,9vw,120px)}

/* hero */
.ks-hero{min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding-top:110px;
  background:radial-gradient(60% 50% at 80% 30%, #FFE7B0, transparent 70%), var(--cream)}
.ks-hero-copy > *{animation:rise .6s cubic-bezier(.2,.8,.3,1) both}
.ks-hero-copy > :nth-child(2){animation-delay:.05s} .ks-hero-copy > :nth-child(3){animation-delay:.12s}
.ks-hero-copy > :nth-child(4){animation-delay:.18s} .ks-hero-copy > :nth-child(5){animation-delay:.24s}
@keyframes rise{from{opacity:0; transform:translateY(22px)}}
.ks-hero-art{min-width:0}
.ks-scene{width:100%; height:auto; border-radius:28px; box-shadow:0 30px 60px rgba(16,42,67,.18)}
.ks-lbl rect{fill:#fff; fill-opacity:.94; stroke:#102A43; stroke-opacity:.12}
.ks-lbl text{font:700 12px var(--body); fill:#102A43; text-anchor:middle}
.ks-digits{font:700 7.5px ui-monospace, Menlo, monospace; fill:#7CF2B5; letter-spacing:.04em}

.ks-ctrl{margin-top:16px; padding:16px 18px; border-radius:20px; background:var(--paper); box-shadow:0 10px 30px rgba(16,42,67,.08)}
.ks-ctrl-row{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.ks-ctrl label{font-weight:700; font-size:.92rem}
.ks-ctrl output{display:inline-block; min-width:5.4em; margin-left:6px; padding:2px 10px; border-radius:8px; background:var(--navy); color:#fff; font:700 .88rem var(--display)}
.ks-play{border:0; cursor:pointer; font:700 .86rem var(--body); padding:.5em 1em; border-radius:10px; background:var(--sun-soft); color:var(--navy)}
.ks-play[aria-pressed="true"]{background:var(--navy); color:#fff}
.ks-play:hover{filter:brightness(.97)}
.ks-ticks{display:flex; justify-content:space-between; font-size:.72rem; color:var(--ink-soft); margin-top:2px}
.ks-flow{margin:10px 0 8px; font-size:.92rem; font-weight:500; min-height:3em}
.ks-legend{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.78rem; color:var(--ink-soft)}
.ks-legend i{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:-1px}
.l-sun{background:#FFD45C} .l-dc{background:#FFA41B} .l-ac{background:var(--teal)} .l-ex{background:#22C55E} .l-im{background:var(--coral)}

/* range inputs */
input[type="range"]{-webkit-appearance:none; appearance:none; width:100%; height:30px; background:transparent; margin:6px 0 0; cursor:pointer}
input[type="range"]::-webkit-slider-runnable-track{height:8px; border-radius:8px; background:linear-gradient(90deg, var(--sun) var(--p,50%), #E3DAC6 var(--p,50%))}
input[type="range"]::-moz-range-track{height:8px; border-radius:8px; background:linear-gradient(90deg, var(--sun) var(--p,50%), #E3DAC6 var(--p,50%))}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none; width:24px; height:24px; margin-top:-8px; border-radius:50%; background:#fff; border:3px solid var(--navy); box-shadow:0 2px 8px rgba(0,0,0,.2)}
input[type="range"]::-moz-range-thumb{width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--navy)}
#hour::-webkit-slider-runnable-track{background:linear-gradient(90deg, #1B2850 0%, #3B3F70 22%, #F7A35C 27%, #7EC3F0 40%, #7EC3F0 66%, #F08A4B 74%, #1E2A5A 82%, #1B2850 100%)}
#hour::-moz-range-track{background:linear-gradient(90deg, #1B2850 0%, #3B3F70 22%, #F7A35C 27%, #7EC3F0 40%, #7EC3F0 66%, #F08A4B 74%, #1E2A5A 82%, #1B2850 100%)}
#hour::-webkit-slider-thumb{background:var(--sun); border-color:#fff}

/* savings */
.ks-save{background:radial-gradient(50% 40% at 85% 20%, #1D4670, transparent 70%), var(--navy); color:#F2F6FA}
.ks-save .kicker{color:var(--sun)}
.ks-save .lead{color:#C4D2DF}
.ks-calc{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,36px); margin-top:1.8rem; align-items:start}
.ks-form{display:grid; gap:20px; padding:24px; border-radius:26px; background:var(--paper); color:var(--ink)}
.ks-field label{display:block; font-weight:700; font-size:.94rem}
.ks-pair{display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center}
.ks-num{display:inline-flex; align-items:center; gap:4px; font-weight:700; border:1.5px solid #DCCFB5; border-radius:12px; padding:6px 10px; background:#fff}
.ks-num input{width:5.2em; border:0; font:700 1rem var(--body); color:var(--ink); background:transparent; min-width:0; -moz-appearance:textfield}
.ks-num input:focus{outline:none}
.ks-num:focus-within{border-color:var(--navy); outline:2px solid rgba(47,125,225,.35)}
.ks-field-s{display:grid; gap:8px}
.ks-field-s .ks-num{justify-self:start}
.ks-field-s .ks-num input{width:3.4em}
.ks-field small{font-size:.82rem; color:var(--ink-soft)}
.ks-roofviz{padding:14px; border-radius:18px; background:#EEF3F7}
.ks-roofviz p{margin:0 0 10px; font-weight:700; font-size:.9rem; display:flex; justify-content:space-between}
.ks-grid{display:grid; grid-template-columns:repeat(10, 1fr); gap:4px}
.ks-grid i{display:block; aspect-ratio:1/1.6; border-radius:3px; background:#D5DEE6}
.ks-grid i.on{background:linear-gradient(160deg, #3E7BD8, #1D3B6E); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); animation:pin .35s cubic-bezier(.3,1.7,.5,1) backwards}
@keyframes pin{from{transform:scale(.3); opacity:0}}

.ks-out{padding:24px; border-radius:26px; background:rgba(255,255,255,.06); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.ks-est-tag{display:inline-block; margin:0 0 14px; padding:4px 10px; border-radius:8px; background:var(--sun); color:var(--navy); font:800 .74rem var(--body); letter-spacing:.12em; text-transform:uppercase}
.ks-big{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px}
.ks-big div{padding:16px; border-radius:18px; background:rgba(255,255,255,.07)}
.ks-big span{display:block; font-size:.84rem; color:#C4D2DF}
.ks-big b{display:block; font:900 clamp(1.7rem,3.2vw,2.5rem)/1.05 var(--display)}
.ks-big div:last-child b{color:#5BE3A1}
.ks-big small{font-size:.8rem; color:#C4D2DF}
.ks-bars{display:grid; gap:10px; margin-bottom:16px}
.ks-bar{display:grid; grid-template-columns:7.5em 1fr auto; gap:10px; align-items:center; font-size:.86rem}
.ks-bar i{display:block; height:12px; border-radius:6px; background:linear-gradient(90deg, var(--coral) var(--w), rgba(255,255,255,.08) var(--w))}
.ks-bar-a i{background:linear-gradient(90deg, #5BE3A1 var(--w), rgba(255,255,255,.08) var(--w))}
.ks-bar b{font-weight:700; min-width:5.5em; text-align:right}
.ks-dl{margin:0; display:grid; gap:8px}
.ks-dl div{display:flex; justify-content:space-between; gap:12px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.1); font-size:.93rem}
.ks-dl dt{color:#C4D2DF} .ks-dl dd{margin:0; font-weight:700; text-align:right}
.ks-note{margin:12px 0 0; font-size:.9rem; color:var(--sun-soft); min-height:1.3em}
.ks-fine{margin:10px 0 0; font-size:.8rem; color:#A9BBCB}
.ks-fine b{color:#F2F6FA}

/* systems */
.ks-sys{background:var(--cream)}
.ks-cards{list-style:none; padding:0; margin:2rem 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.ks-card{position:relative; padding:24px; border-radius:var(--r); background:#fff; box-shadow:0 14px 34px rgba(16,42,67,.08); transition:transform .25s ease-out}
.ks-card-hot{box-shadow:0 0 0 3px var(--sun), 0 14px 34px rgba(16,42,67,.1)}
.ks-tag{font:800 .74rem var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--sun-text); margin-bottom:.5rem}
.ks-card h3{font-size:2.6rem; margin-bottom:.15em}
.ks-price{font-size:.92rem; color:var(--ink-soft)}
.ks-price b{font:900 1.5rem var(--display); color:var(--ink)}
.ks-card ul{list-style:none; padding:0; margin:0 0 1.2rem; display:grid; gap:6px; font-size:.94rem}
.ks-card ul li::before{content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--sun); margin-right:10px}
.ks-use{border:0; cursor:pointer; font:700 .9rem var(--body); padding:.6em 1.1em; border-radius:10px; background:var(--navy); color:#fff}
.ks-use:hover{background:var(--navy2)}
.ks-facts{list-style:none; padding:0; margin:20px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.ks-facts li{padding:16px; border-radius:18px; background:var(--sun-soft)}
.ks-facts b{display:block; font:900 2.2rem/1 var(--display); color:var(--navy)}
.ks-facts span{font-size:.88rem; font-weight:600; color:#4A3A12}

/* install timeline: line fills as you scroll */
.ks-inst{background:var(--night); color:#EEF3F8}
.ks-inst .kicker{color:var(--sun)}
.ks-inst .lead{color:#B9C6D6}
.ks-inst-grid{align-items:start}
.ks-inst-head{position:sticky; top:110px}
.ks-steps{--fill:0; list-style:none; padding:0 0 0 46px; margin:0; position:relative; display:grid; gap:18px; counter-reset:s}
.ks-steps::before,.ks-steps::after{content:""; position:absolute; left:15px; top:10px; bottom:10px; width:4px; border-radius:4px; background:rgba(255,255,255,.12)}
.ks-steps::after{background:linear-gradient(var(--sun), #FFD45C); transform-origin:top; transform:scaleY(var(--fill))}
.ks-steps li{counter-increment:s; position:relative; padding:18px 20px 16px; border-radius:18px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); transition:background .4s}
.ks-steps li::before{content:counter(s); position:absolute; left:-46px; top:14px; width:34px; height:34px; border-radius:50%; background:#1D2A4A; color:#B9C6D6; font:900 .95rem/34px var(--display); text-align:center; z-index:1; transition:background .3s, color .3s, transform .3s cubic-bezier(.3,1.7,.5,1)}
.ks-steps li.lit::before{background:var(--sun); color:var(--navy); transform:scale(1.12)}
.ks-steps li.lit{background:rgba(255,176,32,.08)}
.ks-when{display:inline-block; font:800 .72rem var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--sun); margin-bottom:4px}
.ks-steps b{display:block; font:800 1.15rem var(--display)}
.ks-steps p{margin:4px 0 0; font-size:.94rem; color:#B9C6D6}

/* footer */
.ks-footer{background:var(--sun); color:var(--navy); padding-bottom:90px}
.ks-foot-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(20px,4vw,56px); align-items:center}
.ks-footer .display{font-size:clamp(1.9rem,3.6vw,3rem)}
.ks-fmeta{font-size:.96rem}
.ks-lead{display:grid; gap:12px; padding:20px; border-radius:22px; background:var(--paper); box-shadow:0 14px 34px rgba(16,42,67,.16)}
.ks-lead label{display:grid; gap:6px; font-weight:700; font-size:.9rem}
.ks-lead input,.ks-lead select{font:500 1rem var(--body); color:var(--ink); padding:11px 12px; border-radius:12px; border:1.5px solid #DCCFB5; background:#fff; width:100%; min-width:0}
.ks-lead .btn{justify-self:start}
.ks-msg{margin:0; font-weight:700; color:#0B6B47; min-height:1.2em}
.copy{text-align:center; font-size:.86rem; margin:48px 0 0; opacity:.85}
.badge{position:fixed; left:12px; bottom:12px; z-index:70; font:700 .78rem var(--body); text-decoration:none; color:#fff; background:rgba(16,42,67,.92); padding:7px 12px; border-radius:999px}
.badge:hover{background:var(--sun-text)}

@media (max-width:860px){
  .nav nav{display:none}
  .two,.ks-calc,.ks-foot-grid{grid-template-columns:1fr}
  .ks-hero{min-height:auto}
  .ks-hero-art{margin-top:20px}
  .ks-cards,.ks-facts{grid-template-columns:1fr}
  .ks-inst-head{position:relative; top:0}
  .ks-form,.ks-out{padding:18px}
  .ks-bar{grid-template-columns:6.5em 1fr auto; font-size:.8rem}
}
@media (max-width:420px){
  .btn-small{font-size:.8rem; padding:.5em .8em}
  .logo{font-size:1rem}
  .logo svg{width:28px; height:28px}
  .ks-big b{font-size:1.5rem}
  .ks-grid{grid-template-columns:repeat(8, 1fr)}
}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none !important; transition:none !important} }
/* phone: steps slide in from the right (GSAP x:30); clip so the page never widens */
@media (max-width:860px){.ks-inst{overflow-x:clip}}

/* system photos */
.ks-card .ks-photo{display:block;width:calc(100% + 48px);max-width:none;height:auto;aspect-ratio:3/2;object-fit:cover;margin:-24px -24px 18px;border-radius:var(--r) var(--r) 0 0;background:#dfe9f2}