/* Tite Home Solar — premium stylesheet. Same selectors as the base template, restyled to look high-end. */
:root{
  --primary:#0E4D8B; --primary-dk:#0A3A6B;
  --accent:#F2632B; --accent-d:#D94E18;
  --ink:#0F1729; --muted:#5B6677; --line:#E7EBF0;
  --bg:#F4F7FB; --white:#fff;
  --radius:16px; --radius-sm:12px;
  --shadow-card:0 24px 60px -18px rgba(13,42,79,.28), 0 6px 16px -8px rgba(13,42,79,.18);
  --shadow-soft:0 10px 30px -12px rgba(13,42,79,.16);
  --max:560px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:16px; line-height:1.6; padding-bottom:84px;
  -webkit-font-smoothing:antialiased;
}

/* HEADER */
header{
  background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line); padding:16px 20px;
  display:flex; align-items:center; justify-content:center;
  position:sticky; top:0; z-index:50;
}
#brand-logo{font-size:21px; font-weight:800; color:var(--primary); letter-spacing:-.4px}
#brand-logo span{color:var(--accent)}

/* HERO */
#hero{
  position:relative; color:#fff; padding:22px 20px 26px; text-align:center; overflow:hidden;
  background:var(--primary);
}
#hero-inner{position:relative; z-index:1; max-width:var(--max); margin:0 auto}
#trust-bar{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18);
  border-radius:40px; padding:6px 15px; font-size:12px; font-weight:600;
  margin-bottom:12px; backdrop-filter:blur(4px);
}
#trust-bar .stars{color:#FFCB45; letter-spacing:2px}
#trust-bar .sep{opacity:.45}
#hero h1{
  font-size:clamp(22px,5vw,32px); font-weight:800; line-height:1.1;
  letter-spacing:-.6px; margin-bottom:8px; text-shadow:0 2px 18px rgba(0,0,0,.18);
}
#hero-sub{font-size:clamp(13.5px,3.2vw,15.5px); line-height:1.45; opacity:.95; margin-bottom:4px; max-width:32em; margin-left:auto; margin-right:auto}
#hero-urgency{margin-top:18px; font-size:12.5px; opacity:.82; font-weight:500}

/* FORM CARD — overlaps the hero for a premium, app-like feel */
#form-card{
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-card);
  overflow:hidden; max-width:var(--max); margin:14px auto 0; position:relative;
  text-align:left; border:1px solid rgba(255,255,255,.6);
}
#form-header{
  background:linear-gradient(135deg,var(--primary),var(--primary-dk));
  color:#fff; padding:13px 22px 11px; text-align:center;
}
#form-header h2{font-size:18px; font-weight:800; letter-spacing:-.3px}
#form-header p{font-size:13px; opacity:.9; margin-top:5px}
#progress-wrap{background:#EAEFF5; height:6px}
#progress-bar{height:100%; background:linear-gradient(90deg,var(--accent),#FF8A4C); width:8%; transition:width .35s cubic-bezier(.4,0,.2,1)}

.form-step{padding:18px 22px 22px; display:none}
.form-step.active{display:block; animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.step-label{font-size:11.5px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.8px; margin-bottom:10px}
.step-q{font-size:17px; font-weight:800; letter-spacing:-.3px; margin-bottom:14px; line-height:1.3}

/* Step 1 choice buttons */
.type-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.type-btn{
  border:1.5px solid var(--line); background:#fff; border-radius:var(--radius-sm);
  padding:20px 12px; text-align:center; cursor:pointer; font-size:14.5px; font-weight:700;
  color:var(--ink); transition:all .18s ease; line-height:1.3; box-shadow:0 1px 2px rgba(13,42,79,.04);
}
.type-btn .icon{font-size:26px; display:block; margin-bottom:8px}
.type-btn:hover{border-color:var(--primary); transform:translateY(-2px); box-shadow:var(--shadow-soft)}
.type-btn.selected{border-color:var(--primary); background:#EFF5FC; color:var(--primary)}

/* Inputs */
.field-group{margin-bottom:16px}
.field-group label{display:block; font-size:13px; font-weight:700; margin-bottom:7px; color:var(--ink)}
.field-group input{
  width:100%; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  padding:15px 16px; font-size:16px; color:var(--ink); outline:none; font-family:inherit;
  transition:border-color .15s, box-shadow .15s; background:#FCFDFE;
}
.field-group input:focus{border-color:var(--primary); box-shadow:0 0 0 4px rgba(14,77,139,.12); background:#fff}
.yes-no{display:flex; gap:12px}
.yn-btn{
  flex:1; border:1.5px solid var(--line); background:#fff; border-radius:var(--radius-sm);
  padding:15px; font-size:15px; font-weight:700; cursor:pointer; text-align:center;
  transition:all .18s ease; font-family:inherit;
}
.yn-btn:hover{border-color:var(--primary); transform:translateY(-1px)}
.yn-btn.selected{border-color:var(--primary); background:#EFF5FC; color:var(--primary)}

/* Consent */
.consent-block{background:#F6F9FC; border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px; margin-top:16px}
.consent-row{display:flex; gap:11px; align-items:flex-start}
.consent-row input[type=checkbox]{width:19px; height:19px; flex-shrink:0; margin-top:2px; accent-color:var(--primary); cursor:pointer}
.consent-text{font-size:11px; line-height:1.55; color:var(--muted)}
.consent-text a{color:var(--primary)}
.consent-required{color:#DC2626; font-weight:700}

/* Buttons */
.btn-row{display:flex; gap:12px; margin-top:22px}
.btn-back{flex:1; border:1.5px solid var(--line); background:#fff; border-radius:var(--radius-sm); padding:15px; font-size:15px; font-weight:700; cursor:pointer; color:var(--muted); font-family:inherit}
.btn-next{flex:2; background:var(--primary); color:#fff; border:none; border-radius:var(--radius-sm); padding:15px; font-size:15px; font-weight:800; cursor:pointer; font-family:inherit; transition:filter .15s, transform .15s}
.btn-next:hover{filter:brightness(1.08); transform:translateY(-1px)}
.cta-btn,.btn-submit{
  display:inline-block; width:100%; text-align:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-d));
  color:#fff; font-size:17px; font-weight:800; padding:18px; border:none; border-radius:50px;
  cursor:pointer; text-decoration:none; letter-spacing:.2px;
  box-shadow:0 12px 28px -8px rgba(242,99,43,.6); transition:transform .15s, box-shadow .15s; font-family:inherit;
}
.btn-submit{margin-top:18px}
.cta-btn:hover,.btn-submit:not(:disabled):hover{transform:translateY(-2px); box-shadow:0 16px 34px -8px rgba(242,99,43,.7)}
.btn-submit:disabled{opacity:.5; cursor:not-allowed}
#form-micro-trust{text-align:center; font-size:12px; color:var(--muted); padding:14px 20px; border-top:1px solid #F0F3F7}

/* Confirm / error */
#confirm-state{display:none; padding:44px 26px; text-align:center}
#confirm-state .check-icon{font-size:60px; margin-bottom:14px}
#confirm-state h2{font-size:23px; font-weight:800; color:var(--primary); margin-bottom:10px}
#confirm-state p{font-size:15px; color:var(--muted)}
#error-state{display:none; padding:26px; text-align:center}
#error-state p{color:#DC2626; font-size:14px; margin-bottom:12px}
#retry-btn{background:var(--primary); color:#fff; border:none; border-radius:var(--radius-sm); padding:13px 26px; font-size:15px; font-weight:700; cursor:pointer; font-family:inherit}

/* Sections */
.section{max-width:var(--max); margin:0 auto; padding:34px 22px}
.section-title{font-size:23px; font-weight:800; letter-spacing:-.4px; color:var(--ink); margin-bottom:22px; text-align:center}

/* Trust stack — as cards */
#trust-stack{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.trust-items{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.trust-item{display:flex; align-items:flex-start; gap:12px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; box-shadow:0 2px 8px rgba(13,42,79,.04)}
.trust-item .ti-icon{font-size:22px; flex-shrink:0; width:42px; height:42px; display:flex; align-items:center; justify-content:center; background:#EFF5FC; border-radius:10px}
.trust-item .ti-text{font-size:13.5px; font-weight:700; line-height:1.4}
.trust-item .ti-sub{font-weight:500; color:var(--muted); font-size:12px; margin-top:2px}
#review-block{margin-top:24px; background:linear-gradient(135deg,#F6F9FC,#EEF4FB); border:1px solid var(--line); border-radius:var(--radius); padding:22px}
.review-stars{color:#FFCB45; font-size:19px; letter-spacing:2px}
.review-quote{font-size:15px; line-height:1.65; font-style:italic; margin:10px 0; color:var(--ink)}
.review-author{font-size:12.5px; font-weight:700; color:var(--muted)}

/* FAQ */
#faq-section{background:var(--bg)}
details{border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; margin-bottom:10px; overflow:hidden; box-shadow:0 1px 3px rgba(13,42,79,.04)}
summary{padding:16px 18px; font-size:14.5px; font-weight:700; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:'+'; font-size:20px; color:var(--accent); font-weight:700}
details[open] summary::after{content:'−'}
details p{padding:0 18px 16px; font-size:14px; color:var(--muted); line-height:1.65}

/* Bottom CTA */
#cta-bottom{background:linear-gradient(135deg,var(--primary),var(--primary-dk)); color:#fff; text-align:center}
#cta-bottom h2{font-size:24px; font-weight:800; letter-spacing:-.4px; margin-bottom:10px}
#cta-bottom p{font-size:14.5px; opacity:.9; margin-bottom:22px}

/* Footer */
footer{background:#0B1220; color:#8A93A3; text-align:center; padding:26px 20px; font-size:12px; line-height:1.85}
footer a{color:#B9C2D0}
#footer-brand{font-size:16px; font-weight:800; color:#fff; margin-bottom:4px}

/* Sticky bar */
#sticky-call{position:fixed; bottom:0; left:0; right:0; z-index:999; padding:10px 14px; background:linear-gradient(to top,rgba(244,247,251,.96),rgba(244,247,251,.7)); backdrop-filter:blur(8px)}
#sticky-call a{display:flex; align-items:center; justify-content:center; gap:8px; padding:16px; font-size:15.5px; font-weight:800; text-decoration:none; color:#fff; border-radius:50px; background:linear-gradient(135deg,var(--accent),var(--accent-d)); box-shadow:0 10px 24px -8px rgba(242,99,43,.6)}
#sticky-call a span{font-size:18px}

/* Spinner + validation */
.spinner{display:inline-block; width:20px; height:20px; border:3px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; vertical-align:middle; margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}
input.invalid{border-color:#DC2626 !important}
.field-error{font-size:11.5px; color:#DC2626; margin-top:5px; display:none}
.field-error.show{display:block}