/*
Theme Name: Borders Solar
Theme URI: https://borderssolar.com/
Author: Borders Solar
Description: Borders Solar EcoFlow specialist theme - Version 2 with enhanced local branding, contact, FAQs and quote form.
Version: 6.0
Text Domain: borders-solar
*/

:root{
  --green:#7dbb16;
  --green2:#97ca2e;
  --deep:#06351f;
  --deep2:#0b4328;
  --ink:#142d3a;
  --muted:#68777d;
  --soft:#f5f7f2;
  --line:#dde5dc;
  --white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1500px;margin:auto;padding:0 4%}
.kicker{text-transform:uppercase;letter-spacing:1.7px;font-size:13px;font-weight:900;color:var(--green)}
.btn{display:inline-block;padding:15px 22px;font-weight:900;border:0;cursor:pointer}
.btn-green{background:var(--green);color:white}
.btn-dark{background:var(--deep);color:white}
.btn-outline{border:2px solid white;color:white;background:transparent}

/* Header */
.topbar{background:#06351f;color:white;font-size:12px;padding:8px 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.mainnav{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.06);position:sticky;top:0;z-index:50}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:16px 4%}
.brand{display:flex;align-items:center;gap:14px;font-weight:900}
.brand-mark{width:50px;height:42px;border:2px solid var(--deep);position:relative}
.brand-mark:before{content:"⌂";position:absolute;inset:0;display:grid;place-items:center;font-size:28px;color:var(--deep)}
.brand-title{font-size:22px;letter-spacing:.6px}
.brand-title span{color:var(--green)}
.brand-sub{font-size:12px;letter-spacing:1.4px;color:#203743}
.menu{display:flex;align-items:center;gap:25px;font-size:14px;font-weight:800}
.menu a:hover{color:var(--green)}
.nav-quote{background:var(--green);color:white;padding:14px 18px}

/* Hero */
.hero{
  position:relative;
  min-height:650px;
  display:flex;
  align-items:center;
  color:white;
  overflow:hidden;
  background:
   linear-gradient(90deg,rgba(1,26,15,.93) 0%,rgba(3,35,20,.78) 37%,rgba(2,25,15,.28) 67%,rgba(2,25,15,.10) 100%),
   url('assets/borders-design-reference.png') center 21% / cover no-repeat;
}
.hero .wrap{width:100%}
.hero-copy{max-width:760px;padding:75px 0}
.hero h1{font-size:64px;line-height:1.02;margin:14px 0 10px;color:white}
.hero h1 span{color:var(--green2)}
.script{font-size:33px;font-style:italic;margin-bottom:18px}
.hero p{font-size:19px;line-height:1.6;color:#f1f5f1;max-width:660px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0}
.hero-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:30px;border-top:1px solid rgba(255,255,255,.25);padding-top:18px}
.hero-trust strong{display:block;font-size:14px}
.hero-trust span{font-size:12px;color:#dbe4de}

/* Section generic */
.section{padding:75px 0}
.section-soft{background:var(--soft)}
.section-dark{background:var(--deep);color:white}
.heading{text-align:center;max-width:900px;margin:0 auto 40px}
.heading h2{font-size:42px;margin:8px 0 14px}
.heading p{font-size:17px;line-height:1.6;color:var(--muted)}
.section-dark .heading p{color:#c7d4cd}
.section-dark .heading h2{color:white}

/* Towns */
.towns{padding:62px 0 35px}
.town-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.town{
  min-height:165px;border-radius:10px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#c9d5ca,#8aa193);
  box-shadow:0 6px 18px rgba(0,0,0,.08)
}
.town:before{
  content:"";position:absolute;inset:0;
  background:
   linear-gradient(180deg,transparent 25%,rgba(4,52,30,.93) 100%),
   radial-gradient(circle at 25% 20%,rgba(255,255,255,.65),transparent 24%),
   linear-gradient(145deg,#dce4dd,#9bad9f);
}
.town:nth-child(2n):before{background:linear-gradient(180deg,transparent 25%,rgba(4,52,30,.93) 100%),linear-gradient(145deg,#c9d8df,#8badbd)}
.town:nth-child(3n):before{background:linear-gradient(180deg,transparent 25%,rgba(4,52,30,.93) 100%),linear-gradient(145deg,#dfe5d2,#98a985)}
.town-label{position:absolute;left:0;right:0;bottom:0;padding:18px 10px;text-align:center;color:white}
.town-label strong{display:block;font-size:18px}
.town-label span{font-size:12px;color:#d8e4dc}
.nearby{text-align:center;margin-top:22px;font-size:16px}

/* Demo home */
.demo{
  background:var(--deep);
  color:white;
  margin-top:26px;
  border-radius:12px;
  padding:28px 30px;
  display:grid;
  grid-template-columns:1.3fr .9fr;
  gap:30px;
  align-items:center
}
.demo h3{font-size:25px;margin:0 0 8px}
.demo h3 span{color:var(--green2)}
.demo p{color:#d4dfd8;line-height:1.55;margin:0 0 14px}
.demo-points{display:flex;gap:25px;flex-wrap:wrap;font-size:13px;color:#e3ebe6}
.demo-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}

/* Benefits */
.benefits{padding:24px 0 55px}
.benefit-grid{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);background:#fff}
.benefit{padding:24px 22px;border-right:1px solid var(--line)}
.benefit:last-child{border-right:0}
.benefit strong{display:block;margin-bottom:7px}
.benefit p{font-size:13px;line-height:1.5;color:var(--muted);margin:0}

/* Products */
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.product-card{background:white;border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.06)}
.product-visual{height:290px;background:linear-gradient(145deg,#edf1ed,#cbd4cd);display:grid;place-items:center;overflow:hidden}
.product-unit{width:150px;height:220px;background:linear-gradient(145deg,#8f9692,#242a27 65%);border-radius:9px;box-shadow:0 22px 35px rgba(0,0,0,.22);position:relative}
.product-unit:before{content:"ECOFLOW";position:absolute;top:18px;left:16px;color:white;font-size:12px;font-weight:900}
.product-unit.stream:after{content:"STREAM 5000";position:absolute;top:46px;left:16px;color:#c7f36c;font-weight:900;font-size:13px}
.product-unit.ocean{width:170px;height:245px}
.product-unit.ocean:after{content:"OCEAN 2 PLUS";position:absolute;top:46px;left:16px;color:#c7f36c;font-weight:900;font-size:13px}
.product-unit.ev{width:135px;height:210px;border-radius:22px;background:linear-gradient(145deg,#fff,#cfd6d1)}
.product-unit.ev:before{content:"PowerPulse 2";color:#2d3b34;left:0;right:0;text-align:center}
.product-unit.ev:after{content:"⚡";position:absolute;left:50%;top:85px;transform:translateX(-50%);font-size:34px;color:var(--green)}
.product-copy{padding:28px}
.product-copy h3{font-size:25px;margin:8px 0 10px}
.product-copy p{line-height:1.6;color:var(--muted)}
.product-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}
.meta{background:#f5f7f4;padding:11px}
.meta b{display:block;font-size:16px}
.meta span{font-size:11px;color:#6d797d}

/* Why / installation */
.split{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}
.split h2{font-size:42px;line-height:1.1;margin:8px 0 18px}
.split p{font-size:17px;line-height:1.7;color:var(--muted)}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.check{font-weight:800;font-size:14px}
.check:before{content:"✓";color:var(--green);margin-right:8px}
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#315342}
.step{background:#0c4328;color:white;padding:30px;min-height:220px}
.step-num{font-size:44px;color:var(--green2);font-weight:900}
.step h3{margin:8px 0}
.step p{color:#c8d6ce;line-height:1.55;font-size:14px}

/* FAQ */
.faq-list{max-width:920px;margin:0 auto}
details{background:white;border:1px solid var(--line);padding:18px 20px;margin-bottom:10px}
summary{font-weight:900;cursor:pointer}
details p{color:var(--muted);line-height:1.6}

/* Quote */
.quote-section{background:linear-gradient(120deg,#06351f,#0b4b2b);color:white;padding:75px 0}
.quote-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:55px;align-items:start}
.quote-grid h2{font-size:42px;margin-top:0}
.quote-grid p{color:#c9d8d0;line-height:1.7}
form{display:grid;grid-template-columns:1fr 1fr;gap:13px}
input,select,textarea{width:100%;padding:14px;border:1px solid #cfd8d2;font:inherit}
textarea{grid-column:1/-1;min-height:120px}
.full{grid-column:1/-1}
button{background:var(--green);color:white;border:0;padding:15px 20px;font-weight:900}

/* Footer */
footer{background:#041f12;color:#b7c4bd;padding:45px 0 25px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:45px}
footer h4{color:white;margin-top:0}
footer a{display:block;margin:7px 0}
.footer-bottom{border-top:1px solid #214230;margin-top:30px;padding-top:18px;font-size:12px}

/* Responsive */
@media(max-width:1100px){
  .menu{display:none}
  .town-grid{grid-template-columns:repeat(2,1fr)}
  .benefit-grid{grid-template-columns:1fr 1fr}
  .benefit{border-right:0;border-bottom:1px solid var(--line)}
  .product-grid{grid-template-columns:1fr}
  .process{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .hero h1{font-size:47px}
  .hero-trust{grid-template-columns:1fr 1fr}
  .demo,.split,.quote-grid{grid-template-columns:1fr}
  .demo-actions{justify-content:flex-start}
}
@media(max-width:600px){
  .topbar .wrap{display:block}
  .brand-title{font-size:18px}
  .hero{min-height:620px}
  .hero-copy{padding:60px 0}
  .hero h1{font-size:38px}
  .script{font-size:27px}
  .hero-trust,.town-grid,.benefit-grid,.process,form,.checks{grid-template-columns:1fr}
  textarea,.full{grid-column:auto}
  .town{min-height:145px}
}