/* Eternal Solar Energy — production stylesheet
   Mobile first. One breakpoint at 900px for desktop. */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --blue-50:#EFF6FB; --blue-100:#DBEAF5; --blue-300:#8FBBD8; --blue-500:#2F79A8;
  --blue-600:#1B5E8C; --blue-700:#154A6F; --blue-800:#103A57;
  --amber-100:#FFF3DF; --amber-300:#F5CB86; --amber-500:#FAA61A; --amber-700:#B0720A; --amber-800:#8A5A08; --amber-900:#6B4506;
  --ink-0:#FFFFFF; --ink-100:#F4F4F5; --ink-200:#E4E4E7; --ink-400:#A1A1AA;
  --ink-600:#52525B; --ink-800:#27272A; --ink-900:#0B0B0F;
  --paper:#FAF7F1; --paper-2:#F1EDE4;

  --fg:var(--ink-900); --fg-muted:var(--ink-600); --fg-subtle:#71717A;
  --bg:#FFFFFF; --border:var(--ink-200); --border-strong:#C9C9CF;
  --primary:var(--blue-600); --primary-hover:var(--blue-700);
  --focus-ring:rgba(27,94,140,.5);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(11,11,15,.06),0 1px 3px rgba(11,11,15,.04);
  --shadow-md:0 4px 12px rgba(11,11,15,.08);
  --shadow-lg:0 12px 32px rgba(11,11,15,.12);
  --shadow-brand:0 10px 24px rgba(27,94,140,.3);
  --ease-out:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--fg); text-decoration:none}
a:hover{color:var(--primary); text-decoration:underline}
h1,h2,h3{margin:0; letter-spacing:-.03em; text-wrap:balance; line-height:1.08}
p{margin:0; text-wrap:pretty}
:focus-visible{outline:3px solid var(--focus-ring); outline-offset:2px}
.tnum{font-variant-numeric:tabular-nums}
.mark{color:var(--primary)}
.wrap{max-width:1240px; margin:0 auto; padding:0 20px}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-subtle)}
.cap{font-size:13px; color:var(--fg-subtle); line-height:1.5}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:15px 24px; border:none;
  border-radius:var(--r-md); font:inherit; font-weight:700; font-size:16px;
  cursor:pointer; transition:background .14s var(--ease-out), transform .14s var(--ease-out), box-shadow .14s var(--ease-out);
  text-decoration:none; width:100%;
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-hover); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-brand)}
.btn-primary:active{background:var(--blue-800); transform:none; box-shadow:none}
.btn-ghost{background:#fff; color:var(--fg); border:1px solid var(--border-strong)}
.btn-ghost:hover{background:var(--ink-100); color:var(--fg)}
.btn-amber{background:var(--amber-500); color:var(--ink-900)}
.btn-amber:hover{background:#E0930F; color:var(--ink-900)}
.btn svg{flex:none}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--border);
}
.bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 16px; padding-top:10px}
.logo{display:flex; align-items:center; gap:8px}
.logo img{width:32px; height:32px; object-fit:contain}
.logo b{display:block; font-size:16px; font-weight:800; letter-spacing:.02em; color:var(--amber-500); line-height:1.05}
.logo span{display:block; font-size:8px; font-weight:700; letter-spacing:.22em; color:var(--fg)}
.nav{
  display:flex; gap:20px; font-size:14px; font-weight:600; order:3; width:100%;
  padding:0 20px 10px; margin:0 -20px; overflow-x:auto; white-space:nowrap;
  scrollbar-width:none; -ms-overflow-style:none;
}
.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--fg-muted)}
.hdr-call{display:flex; align-items:center; gap:6px; font-size:14px; font-weight:700; white-space:nowrap}

/* ---------- hero / calculator ---------- */
.hero{background:var(--paper); padding:28px 0 32px}
.hero h1{font-size:clamp(30px,8vw,38px); font-weight:800; margin:12px 0 14px}
.hero .lead{color:var(--fg-muted); font-size:17px}
.calc{margin-top:22px}
.calc-label{font-size:13px; font-weight:700; color:var(--fg-muted)}
.chips{display:flex; gap:8px; margin:10px 0}
.chip{flex:1; min-height:44px; padding:11px 0; border:1px solid var(--border-strong); background:#fff;
  border-radius:var(--r-sm); font:inherit; font-weight:700; font-size:14px; cursor:pointer; transition:.14s var(--ease-out)}
.chip[aria-pressed="true"]{background:var(--ink-900); color:#fff; border-color:var(--ink-900)}
.slider-row{display:flex; justify-content:space-between; align-items:baseline; margin-top:6px}
.slider-row .val{font-size:24px; font-weight:800; letter-spacing:-.02em}
input[type=range]{width:100%; height:32px; accent-color:var(--blue-600); cursor:pointer}

.result{background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-md); margin-top:18px}
.result-top{background:var(--ink-900); color:#fff; padding:20px; display:flex; justify-content:space-between; gap:16px}
.result-top .k{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-400)}
.result-top .kw{font-size:32px; font-weight:800; letter-spacing:-.02em; line-height:1.1}
.result-top .gen{font-size:20px; font-weight:800; color:var(--amber-500)}
.result-body{padding:20px; display:flex; flex-direction:column; gap:13px}
.line{display:flex; justify-content:space-between; gap:12px; font-size:15px}
.line span:first-child{color:var(--fg-muted)}
.line b{font-weight:700}
.line.sub{color:var(--amber-800)}
.line.sub span:first-child{color:var(--amber-800); font-weight:700}
.line.total{padding-top:13px; border-top:1px solid var(--border); align-items:baseline}
.line.total span:first-child{color:var(--fg); font-weight:700; font-size:16px}
.line.total b{font-size:30px; font-weight:800; color:var(--primary); letter-spacing:-.02em}
.savebox{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px;
  background:var(--amber-100); border:1px solid var(--amber-300); border-radius:var(--r-md)}
.savebox .k{font-size:12px; font-weight:700; color:var(--amber-900)}
.savebox .v{font-size:20px; font-weight:800; color:var(--amber-900); letter-spacing:-.02em}
.ctas{display:flex; flex-direction:column; gap:10px; margin-top:16px}

/* ---------- trust strip ---------- */
.trust{display:flex; border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.trust div{flex:1; padding:14px 8px; text-align:center; border-right:1px solid var(--border)}
.trust div:last-child{border-right:none}
.trust b{display:block; font-size:13px; font-weight:800}
.trust span{font-size:11px; font-weight:600; color:var(--fg-subtle)}

/* ---------- sections ---------- */
section{padding:44px 0}
.sec-paper{background:var(--paper)}
.sec-ink{background:var(--ink-900); color:#fff}
.sec-ink h2, .sec-ink h3{color:#fff}
.sec-ink .mark{color:var(--amber-500)}
h2{font-size:clamp(24px,6vw,30px); font-weight:800}
.sec-head{display:flex; flex-direction:column; gap:12px; margin-bottom:22px}
.sec-head p{color:var(--fg-muted)}

/* price table */
.panel-toggle{display:flex; gap:8px; margin:14px 0 6px}
.panel-toggle .chip{flex:1}
.ptable{border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; overflow-x:auto; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; min-width:640px; font-size:15px}
thead{background:var(--ink-900); color:var(--ink-200)}
th{padding:13px 14px; text-align:left; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap}
th.pay{color:var(--amber-500)}
td{padding:15px 14px; border-bottom:1px solid var(--border); white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
td.size{font-weight:700}
td.muted{color:var(--fg-muted)}
td.sub{color:var(--amber-800); font-weight:700}
td.pay{font-size:19px; font-weight:800; color:var(--primary); letter-spacing:-.02em}
.tag{margin-left:8px; padding:3px 9px; border-radius:var(--r-pill); background:var(--amber-500);
  color:var(--ink-900); font-size:11px; font-weight:800; letter-spacing:.04em}

/* lists */
.ticks{display:flex; flex-direction:column; gap:11px}
.ticks li{display:flex; gap:10px; align-items:flex-start; font-size:15px; list-style:none}
.ticks svg{flex:none; margin-top:4px}
ul{margin:0; padding:0}
.excl{color:var(--fg-muted); padding-top:11px; margin-top:4px; border-top:1px solid var(--border)}

.promise{display:flex; flex-direction:column; gap:12px; padding:24px;
  background:var(--amber-100); border:1px solid var(--amber-300); border-radius:var(--r-lg)}
.promise .k{font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--amber-900)}
.promise .t{font-size:17px; font-weight:700; color:var(--amber-900); line-height:1.4}

.cards{display:grid; gap:20px}
.card{background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); padding:24px;
  display:flex; flex-direction:column; gap:12px; transition:box-shadow .14s var(--ease-out)}
.card:hover{box-shadow:var(--shadow-md)}
.card h3{font-size:19px; font-weight:700}
.card .cap{margin-top:-4px}
.warranty .n{font-size:38px; font-weight:800; letter-spacing:-.03em; line-height:1}

.photo{border-radius:var(--r-md); background:var(--paper-2); border:1px dashed var(--border-strong);
  min-height:200px; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:16px; font-size:12px; font-weight:700; color:var(--fg-muted)}
.badge-ok{display:flex; gap:8px; align-items:center; padding:10px 12px; background:var(--amber-100);
  border:1px solid var(--amber-300); border-radius:var(--r-sm); font-size:13px; font-weight:700; color:var(--amber-900)}
.areas{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px}
.area{padding:8px 14px; border-radius:var(--r-pill); background:#fff; border:1px solid var(--border-strong);
  font-size:13px; font-weight:600; color:var(--fg-muted)}
.area.on{background:var(--ink-900); color:#fff; border-color:var(--ink-900); font-weight:700}

/* steps */
.steps{display:flex; flex-direction:column; gap:14px}
.step{display:flex; gap:14px}
.step .n{flex:none; width:28px; font-size:20px; font-weight:800; color:var(--amber-500)}
.step b{display:block; font-size:15px}
.step span{font-size:13px; color:var(--ink-400)}

/* faq */
details{border-bottom:1px solid var(--border)}
details summary{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:16px 0; font-size:15px; font-weight:700; cursor:pointer; list-style:none;
}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+"; font-size:22px; font-weight:600; color:var(--primary); line-height:1}
details[open] summary::after{content:"–"}
details p{padding:0 0 16px; font-size:15px; color:var(--fg-muted)}

/* form */
.form{display:flex; flex-direction:column; gap:14px; padding:24px; background:var(--paper); border-radius:var(--r-lg)}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:14px; font-weight:700}
input[type=text],input[type=tel],input[type=email],select,textarea{
  font:inherit; font-size:16px; padding:14px 16px; background:#fff;
  border:1px solid var(--border); border-radius:var(--r-sm); min-height:50px; width:100%;
}
textarea{min-height:96px; resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--primary)}
.two{display:grid; gap:14px}
.hp{position:absolute; left:-9999px}
.note{padding:14px; border-radius:var(--r-sm); font-size:14px; font-weight:600; display:none}
.note.ok{display:block; background:var(--amber-100); border:1px solid var(--amber-300); color:var(--amber-900)}
.note.err{display:block; background:#FEF1F2; border:1px solid #F7C7CC; color:#9B1C29}

/* cta band */
.band{background:var(--primary); color:#fff; padding:40px 0}
.band h2{color:#fff}
.band p{color:var(--blue-100); font-size:17px; margin:10px 0 20px}

/* footer */
footer{background:var(--ink-900); color:var(--ink-400); padding:40px 0 24px; font-size:14px}
footer .cols{display:grid; gap:28px}
footer b{color:#fff; display:block; margin-bottom:10px}
footer a{color:var(--ink-400)}
footer a:hover{color:#fff}
footer ul li{list-style:none; margin-bottom:8px}
.legal{margin-top:28px; padding-top:20px; border-top:1px solid var(--ink-800); font-size:13px;
  display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between}

/* sticky mobile bar */
.stickybar{
  position:fixed; bottom:0; left:0; right:0; z-index:60; display:flex; gap:10px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95); backdrop-filter:blur(12px); border-top:1px solid var(--border);
}
.stickybar .btn{min-height:50px; font-size:15px}
.stickybar .btn-ghost{width:auto; padding:14px 20px}
body{padding-bottom:76px}

/* ---------- desktop ---------- */
@media (min-width:900px){
  .wrap{padding:0 48px}
  body{padding-bottom:0}
  .stickybar{display:none}
  .bar{height:72px}
  .logo img{width:38px; height:38px}
  .logo b{font-size:18px}
  .logo span{font-size:9px; letter-spacing:.24em}
  .bar{flex-wrap:nowrap; padding-top:0}
  .nav{width:auto; order:0; margin:0; padding:0; overflow:visible; gap:26px; font-size:15px; font-weight:500}
  .nav a{color:var(--fg)}
  .btn{width:auto}
  section{padding:80px 0}
  .hero{padding:64px 0 72px}
  .hero .grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
  .hero h1{font-size:56px; margin:14px 0 16px}
  .hero .lead{font-size:19px; max-width:480px}
  .chips{max-width:480px}
  .chip{flex:0 0 auto; padding:11px 22px; font-size:15px}
  .slider-wrap{max-width:480px}
  .calc{margin-top:24px}
  .result{margin-top:0}
  .result-top{padding:26px 30px}
  .result-top .kw{font-size:42px}
  .result-body{padding:28px 30px}
  .trust div{padding:20px}
  .trust b{font-size:16px}
  .trust span{font-size:12px}
  .sec-head{margin-bottom:32px}
  .two{grid-template-columns:1fr 1fr}
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .warranty{grid-template-columns:repeat(3,minmax(0,1fr))}
  .split{display:grid; grid-template-columns:1fr 1.15fr; gap:56px; align-items:start}
  .split-even{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
  .ticks.two-col{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .ticks.two-col .excl{grid-column:1/-1}
  .steps{display:grid; grid-template-columns:repeat(5,1fr); gap:20px}
  .step{flex-direction:column; gap:8px}
  .band{padding:56px 0}
  .band .inner{display:flex; align-items:center; justify-content:space-between; gap:40px}
  .band p{margin:10px 0 0}
  .band .btn{flex:none}
  footer .cols{grid-template-columns:1.5fr 1fr 1fr 1fr}
  table{min-width:0}
  .panel-toggle{max-width:420px}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
  html{scroll-behavior:auto}
  .btn-primary:hover{transform:none}
}