body {

font-family: "Poppins", sans-serif;

text-align: center;

padding: 20px;
overflow-x: hidden;
background:

radial-gradient(
circle at top left,
rgba(255,195,0,0.18),
transparent 35%
),

radial-gradient(
circle at bottom right,
rgba(245,166,35,0.12),
transparent 30%
),

#FCFCFC;

}

#logo {

width: 290px;

margin-top: 0px;
border-radius: 3px;
margin-bottom: 0px;

}
#logoWrapper {

position: relative;

display: inline-block;

margin-bottom: 5px;

}
#logoWrapper::before {

content: "";

position: absolute;

width: 220px;

height: 70px;

left: 50%;

top: 50%;

transform:

translate(-50%,-50%);

background:

radial-gradient(

rgba(220, 181, 39, 0.35),

transparent 70%

);

filter: blur(22px);

z-index: -1;

animation:

sunGlow

4s ease-in-out infinite alternate;

}
@keyframes sunGlow {

from {

opacity: 0.9;

transform:

translate(-50%,-50%)

scale(1);

}

to {

opacity: 1;

transform:

translate(-50%,-50%)

scale(1.12);

}

}
h1 {

font-size: 30px;

margin-top: 5px;

margin-bottom: 10px;

}


p {

margin-bottom: 25px;

}
#solarWord {

text-decoration: underline;

text-decoration-color: #df9a2ad2;

text-decoration-thickness: 2px;

text-underline-offset: 3.5px;

}
#mainWrapper {

display: flex;

justify-content: center;

align-items: flex-start;

gap: 70px;

padding-top: 3px;
max-width: 1200px;
margin: auto;
}
#container {

width: 580px;

margin-right: 25px;

padding: 40px;

border-radius: 28px;

background: rgba(255,255,255,0.35);

backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);

border: 1px solid rgba(255,255,255,0.4);

box-shadow:

0 10px 40px rgba(0,0,0,0.08),

0 4px 12px rgba(255,255,255,0.3) inset;

}
#solarBenefits {
animation:

float 5s ease-in-out infinite;

width: 280px;

padding: 30px;

border-radius: 28px;

background:

rgba(255,255,255,0.35);

backdrop-filter: blur(18px);

-webkit-backdrop-filter: blur(18px);

border:

1px solid rgba(255,255,255,0.4);

box-shadow:

0 10px 40px rgba(0,0,0,0.08);

text-align: left;

}
@keyframes float {

0% {

transform:

translateY(0px);

}

50% {

transform:

translateY(-7px);

}

100% {

transform:

translateY(0px);

}

}

#solarBenefits h2 {

margin-top: 0;

margin-bottom: 22px;

font-size: 24px;

}
.benefit {

display: flex;

align-items: flex-start;

gap: 15px;

padding: 16px;

margin-bottom: 15px;

border-radius: 18px;

background:

rgba(255,255,255,0.28);

border:

1px solid rgba(255,255,255,0.4);

backdrop-filter: blur(10px);

transition: 0.25s;

}
.benefit:hover {

transform:

translateY(-3px);

box-shadow:

0 10px 25px rgba(0,0,0,0.08);

}
.icon {

font-size: 28px;

line-height: 1;

margin-top: 3px;

}
.benefit.active {

transform: translateY(-3px);

background:

rgba(255,255,255,0.5);

box-shadow:

0 12px 25px rgba(245,166,35,0.18);

border:

1px solid rgba(245,166,35,0.35);

}
.benefit h3 {

margin: 0;

font-size: 18px;

color: #222;

}
.benefit p {

margin-top: 6px;

margin-bottom: 0;

font-size: 14px;

color: #666;

line-height: 1.5;

}
input {

width: 360px;

padding: 13px;

font-size: 15px;

margin-top: 6px;

border-radius: 16px;

border: 1px solid rgba(231, 230, 222, 0.685);

background: rgba(234, 230, 201, 0.3);

backdrop-filter: blur(10px);

outline: rgb(218, 214, 210);

transition: 0.25s;

}
input:focus {

background: rgba(255,255,255,0.5);

border: 1px solid rgba(255,255,255,0.8);

box-shadow:

0 0 0 4px rgba(245,166,35,0.12),

0 8px 24px rgba(0,0,0,0.08);

}
button {

padding: 14px 28px;

border: none;

border-radius: 50px;

background:

linear-gradient(
135deg,
#F5A623,
#FFCC4D
);

color: white;

font-size: 15px;

font-weight: 700;

cursor: pointer;

box-shadow:

0 8px 20px rgba(245,166,35,0.35);

transition: 0.25s;

}


button:hover {

transform: translateY(-3px);

box-shadow:

0 12px 28px rgba(245,166,35,0.45);

scale:(1.03);

}


#resultCard {

display: none;

opacity: 0;

transform: translateY(50px);

transition: all 0.8s ease;

scale: 0.9;

width: 420px;

margin: 28px auto;
padding-left: 50px;
padding: 32px;

border-radius: 30px;
position: relative;

overflow: hidden;
background:

rgba(255,255,255,0.35);

backdrop-filter: blur(16px);

-webkit-backdrop-filter: blur(16px);

border:

1px solid rgba(255,255,255,0.45);

box-shadow:

0 15px 45px rgba(0,0,0,0.08),

0 2px 15px rgba(255,255,255,0.25) inset;

text-align: left;

}
#watermark {

position: absolute;

right: 5px;

top: 300px;

font-family: "Arial Black", sans-serif;

font-size: 95px;

font-weight: 900;

color: #de9415;

opacity: 0.12;

writing-mode: vertical-rl;

letter-spacing: -11px;

pointer-events: none;

user-select: none;

}

#heroSavings {

text-align: center;

padding: 20px;

margin-bottom: 24px;

border-radius: 24px;

background:

linear-gradient(

135deg,

rgba(245,166,35,0.15),

rgba(255,220,120,0.08)

);

}
#heroSavings p {

margin: 0;

font-size: 18px;

color: #555;

}
#heroSavings h1 {

margin: 8px 0;

font-size: 48px;

font-weight: 800;

color: #F5A623;

}
#heroSavings span {

font-size: 14px;

letter-spacing: 3px;

font-weight: 700;

color: #777;

}
.resultLabel {

font-size: 15px;

font-weight: 500;

color: #7E6E57;
margin-bottom: 0px;
letter-spacing: 0.3px;

}

.resultValue {

font-size: 27px;

font-family:

"Poppins",

sans-serif;

font-weight: 700;
line-height: 1.1;
color: #222;

}

.goldValue {

color: #E89C14;

}
#resultCard h2 {

font-size: 29px;

font-weight: 700;

margin-bottom: 30px;

color: #222;

}
hr {

border: none;

height: 1px;

background-color: #d9d6d6;

margin-top: 30px;

margin-bottom: 12px;

}
.divider {

width: 137px;

height: 1px;

background:

rgba(232,156,20,0.25);

margin:

18px 0 20px 0;

}
#trust {

text-align: center;

font-size: 16px;

color: #666;

margin-top: 10px;

}
#consult {

margin-top: 20px;

margin-bottom: 1px;

font-size: 18px;

color: #333;

}
#contactBtn {

margin-bottom: 6px;

padding: 12px 20px;

font-size: 14px;

}
#system,
#roofResult,
#cost,
#subsidy,
#payback,
#newBill {

font-size: 19px;

font-weight: 500;

margin-bottom: 14px;

line-height: 1.6;

}


#extra {

margin-top: 25px;

font-size: 14px;

color: #777;

font-style: italic;

}
#resultCard.show {

opacity: 1;
scale: 1;
transform: translateY(0);

}
#errorMsg {

color: red;

font-size: 13px;

margin-top: 5px;

margin-bottom: 0px;

}
.error {

border: 1px solid red;

}
@media (max-width: 768px) {
body{

padding:15px;
overflow-x: hidden;
}
#mainWrapper {

flex-direction: column;

align-items: center;

gap: 25px;
position:static;
}

#container {

width: calc(100% - 40px);

padding: 25px;

}
button {

width: 85%;

max-width: 260px;

}

#solarBenefits {

width: 90%;

padding: 25px;

margin: 0;

}


#logo {

width: 175px;

}


h1 {

font-size: 24px;

line-height: 1.3;

}


input {

width: 90%;
font-size: 16px;
}


#resultCard {

width: 90%;

padding: 24px;

}


#heroSavings h1 {

font-size: 44px;

}


#watermark {

font-size: 70px;

right: -5px;

top: 220px;

opacity: 0.06;

}

}