@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
/* ============================================================
   Solar Panel Malaysia — shared stylesheet
   Palette: deep tropical navy + solar gold
   Type: Plus Jakarta Sans (display/headings) / Inter (body)
   ============================================================ */

:root{
  --navy-900:#0b1733;
  --navy-800:#10204a;
  --navy-700:#16285c;
  --ink:#1a2238;
  --slate:#5b6580;
  --line:#e4e7f0;
  --paper:#ffffff;
  --mist:#f6f8fc;
  --gold:#f6b026;
  --gold-deep:#e0951a;
  --gold-soft:#fff4dc;
  --green:#1f9d6b;
  --green-soft:#e7f7ef;
  --maxw:1180px;
  --radius:16px;
  --shadow-sm:0 1px 2px rgba(11,23,51,.06),0 4px 14px rgba(11,23,51,.05);
  --shadow-md:0 10px 40px rgba(11,23,51,.10);
  --shadow-gold:0 10px 30px rgba(246,176,38,.30);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6{font-family:'Plus Jakarta Sans',system-ui,sans-serif;line-height:1.12;margin:0 0 .5em;letter-spacing:-.02em;color:var(--navy-900)}
h1{font-size:clamp(2.1rem,5vw,3.5rem);font-weight:700}
h2{font-size:clamp(1.6rem,3.4vw,2.5rem);font-weight:700}
h3{font-size:1.25rem;font-weight:600}
p{margin:0 0 1rem}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.gold{color:var(--gold-deep)}
.eyebrow{
  display:inline-block;font-family:'Plus Jakarta Sans',sans-serif;font-size:.78rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);
  margin-bottom:.9rem;
}
.section{padding:84px 0}
.section--mist{background:var(--mist)}
.section--navy{background:var(--navy-900);color:#dbe2f4}
.section--navy h2,.section--navy h3{color:#fff}
.center{text-align:center}
.lead{font-size:1.15rem;color:var(--slate);max-width:60ch}
.center .lead{margin-left:auto;margin-right:auto}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:.98rem;
  padding:14px 26px;border-radius:999px;cursor:pointer;border:none;
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn--gold{background:var(--gold);color:var(--navy-900);box-shadow:var(--shadow-gold)}
.btn--gold:hover{transform:translateY(-2px)}
.btn--ghost{background:transparent;color:inherit;border:1.5px solid rgba(255,255,255,.35)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn--dark{background:var(--navy-900);color:#fff}
.btn--dark:hover{transform:translateY(-2px)}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgba(11,23,51,.03);
}
/* offset anchor jumps so headings clear the sticky header */
:target{scroll-margin-top:90px}
section[id]{scroll-margin-top:90px}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:grid;grid-template-columns:auto 1fr;column-gap:.55rem;align-items:center;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1.05rem;color:var(--navy-900);line-height:1.1}
.brand::after{content:"solarpanelmalaysia.my";margin-top:1px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.brand .sun{grid-column:1;grid-row:1 / 3;align-self:center;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffd569,var(--gold-deep));box-shadow:0 0 0 4px var(--gold-soft)}
.nav-links{display:flex;align-items:center;gap:1.6rem;list-style:none;margin:0;padding:0}
.nav-links a{font-size:.94rem;font-weight:500;color:var(--ink);position:relative}
.nav-links a:hover{color:var(--gold-deep)}
.has-drop{position:relative}
.drop{
  position:absolute;top:130%;left:50%;transform:translateX(-50%) translateY(8px);
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-md);
  padding:10px;min-width:230px;opacity:0;visibility:hidden;transition:.18s;
}
.has-drop:hover .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop a{display:block;padding:9px 12px;border-radius:9px;font-size:.9rem}
.drop a:hover{background:var(--mist)}
.nav-cta{padding:10px 20px;font-size:.9rem}
.burger{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--navy-900)}

/* ---------- hero ---------- */
.hero{position:relative;background:linear-gradient(160deg,var(--navy-900),var(--navy-700));color:#eaf0ff;overflow:hidden}
.hero::before{
  content:"";position:absolute;top:-180px;right:-120px;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(246,176,38,.32),transparent 62%);pointer-events:none;
}
.hero-inner{position:relative;padding:96px 0 88px;max-width:760px}
.hero h1{color:#fff}
.hero p{font-size:1.18rem;color:#bcc8e8;max-width:54ch}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.hero-stats{display:flex;gap:38px;flex-wrap:wrap;margin-top:54px}
.hero-stats .n{font-family:'Plus Jakarta Sans',sans-serif;font-size:2rem;font-weight:700;color:var(--gold)}
.hero-stats .l{font-size:.86rem;color:#9fb0d8}
.pill{display:inline-flex;align-items:center;gap:.5rem;background:rgba(246,176,38,.14);color:var(--gold);font-size:.82rem;font-weight:600;padding:7px 15px;border-radius:999px;margin-bottom:22px;font-family:'Plus Jakarta Sans',sans-serif}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:24px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column;overflow:hidden}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.card .ico{width:54px;height:54px;border-radius:14px;background:var(--gold-soft);display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:18px}
.card-img{display:block;width:calc(100% + 60px);max-width:none;height:200px;object-fit:cover;margin:-30px -30px 22px}
.card h3{margin-bottom:.4rem}
.card p{color:var(--slate);font-size:.96rem;margin-bottom:0}
.tag{display:inline-block;margin-top:16px;font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-deep);background:var(--gold-soft);padding:5px 11px;border-radius:999px}
.card-link{align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:18px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:.9rem;color:var(--navy-900)}
.card-link:hover{color:var(--gold-deep)}
.card-link:hover .arr{transform:translateX(3px)}
.card-link .arr{transition:transform .15s ease}
/* blog */
.post-thumb{display:block;width:calc(100% + 60px);max-width:none;height:200px;object-fit:cover;margin:-30px -30px 22px}
/* parallax band */
.parallax{position:relative;background-size:cover;background-position:center;background-attachment:fixed;color:#fff;text-align:center;overflow:hidden}
.parallax::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(11,23,51,.85),rgba(16,32,74,.82))}
.parallax .wrap{position:relative;z-index:1}
.parallax h2{color:#fff}
.parallax .eyebrow{color:var(--gold)}
.parallax p{color:#cdd7ef;max-width:60ch;margin-left:auto;margin-right:auto;margin-bottom:24px}
@media(max-width:900px){.parallax{background-attachment:scroll}}
/* homepage hero slideshow */
.hero-slide{display:none}
.hero-slide.active{display:block}
.hero-fade{animation:heroFade .7s ease}
@keyframes heroFade{from{opacity:.25}to{opacity:1}}
.hero-dots{display:flex;gap:10px;margin-top:30px}
.hero-dots button{width:11px;height:11px;border-radius:50%;border:none;background:rgba(255,255,255,.4);cursor:pointer;padding:0;transition:.2s}
.hero-dots button.on{background:var(--gold);transform:scale(1.15)}
.post-meta{font-size:.8rem;color:var(--slate);font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.5rem}
.article{max-width:760px;margin:0 auto}
.article img.feature{width:100%;height:auto;border-radius:var(--radius);margin:0 0 26px;box-shadow:var(--shadow-sm)}
.article h2{margin-top:1.6em}
.article p,.article li{color:var(--slate)}
.article strong{color:var(--ink)}

/* numbered process */
.step{position:relative;padding-left:0}
.step .num{font-family:'Plus Jakarta Sans',sans-serif;font-size:2.4rem;font-weight:700;color:var(--gold);opacity:.55;line-height:1}
.step h3{margin-top:.5rem}

/* feature list */
.feat{display:flex;gap:16px;align-items:flex-start}
.feat .dot{flex:0 0 auto;width:40px;height:40px;border-radius:11px;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif}

/* brand strip */
.brands{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.brand-chip{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 26px;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;color:var(--navy-800);box-shadow:var(--shadow-sm)}
.brand-chip span{display:block;font-family:'Inter',sans-serif;font-weight:500;font-size:.74rem;color:var(--slate);letter-spacing:.04em}

/* incentive items */
.inc{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:12px;padding:22px 24px}
.inc h3{font-size:1.05rem;margin-bottom:.35rem}
.inc p{font-size:.92rem;color:var(--slate);margin:0}

/* states grid */
.states{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.state-link{display:flex;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 18px;font-weight:600;font-size:.95rem;transition:.16s}
.state-link:hover{border-color:var(--gold);color:var(--gold-deep);transform:translateX(3px)}
.state-link::before{content:"📍";font-size:.95rem}

/* CTA band */
.cta-band{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--navy-900);border-radius:24px;padding:54px 48px;text-align:center}
.cta-band h2{color:var(--navy-900)}
.cta-band p{color:#5a4410;font-weight:500;max-width:52ch;margin-left:auto;margin-right:auto}
.cta-band .btn--dark{margin-top:8px}

/* breadcrumb */
.crumb{font-size:.85rem;color:var(--slate);padding:18px 0 0}
.crumb a:hover{color:var(--gold-deep)}

/* prose blocks for content pages */
.prose h2{margin-top:1.6em}
.prose ul{padding-left:1.1rem;color:var(--slate)}
.prose li{margin-bottom:.5rem}
.prose strong{color:var(--ink)}

/* FAQ */
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 22px;margin-bottom:12px}
.faq summary{cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;padding:14px 0;list-style:none;color:var(--navy-900)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--gold-deep);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--slate);padding-bottom:14px;margin:0}

/* footer */
.site-footer{background:var(--navy-900);color:#9fb0d8;padding:64px 0 28px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:30px}
.site-footer h4{color:#fff;font-size:.95rem;margin-bottom:1rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:.55rem}
.site-footer a{font-size:.92rem;color:#9fb0d8}
.site-footer a:hover{color:var(--gold)}
.foot-brand{display:flex;align-items:center;gap:.55rem;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;color:#fff;font-size:1.1rem;margin-bottom:1rem}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:44px;padding-top:24px;font-size:.84rem;color:#73829f;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

/* utility */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.sec-head{max-width:62ch;margin-bottom:44px}
.center.sec-head{margin-left:auto;margin-right:auto}

/* ===== contact form ===== */
.enquiry-form{display:grid;gap:18px}
.enquiry-form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.enquiry-form label{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:.88rem;color:var(--navy-900);margin-bottom:6px}
.enquiry-form input,.enquiry-form select,.enquiry-form textarea{
  width:100%;font-family:'Inter',sans-serif;font-size:.98rem;color:var(--ink);
  padding:13px 15px;border:1.5px solid var(--line);border-radius:11px;background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.enquiry-form input:focus,.enquiry-form select:focus,.enquiry-form textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);
}
.enquiry-form textarea{resize:vertical;min-height:110px}
.enquiry-form .btn{justify-content:center;width:100%;font-size:1.02rem;padding:15px}
#form-result{font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:.95rem;text-align:center;min-height:1.2em}
#form-result.ok{color:var(--green)}
#form-result.err{color:#c0392b}
.form-fallback{font-size:.9rem;color:var(--slate);text-align:center;margin:0}
.form-fallback a{color:var(--gold-deep);font-weight:600}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px;box-shadow:var(--shadow-sm)}
@media(max-width:560px){.enquiry-form .row{grid-template-columns:1fr}}

/* floating WhatsApp button */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:90;
  display:inline-flex;align-items:center;gap:.55rem;
  background:#25D366;color:#fff;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:.95rem;
  padding:13px 20px 13px 16px;border-radius:999px;
  box-shadow:0 8px 24px rgba(37,211,102,.45);
  transition:transform .15s ease,box-shadow .15s ease;
}
.wa-float:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(37,211,102,.55);color:#fff}
.wa-float svg{width:26px;height:26px;flex:0 0 auto}
.wa-float .wa-label{white-space:nowrap}
@media(max-width:560px){
  .wa-float{padding:14px;right:16px;bottom:16px}
  .wa-float .wa-label{display:none}
}

/* responsive */
@media(max-width:900px){
  .g-3,.g-4{grid-template-columns:repeat(2,1fr)}
  .states{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .burger{display:block}
  .nav-links.open{display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;background:#fff;padding:18px 24px;gap:1rem;border-bottom:1px solid var(--line);box-shadow:var(--shadow-md)}
}

/* ============================================================
   Header nav: EN | BM language switch + Bahasa Melayu fitting
   ------------------------------------------------------------
   Malay labels run ~35% longer than English, so at the 1180px
   container the items were wrapping onto two lines. Rather than
   shrink the English nav, the Malay tree gets its own tighter
   metrics, keyed off <html lang="ms-MY"> (set by head.php), and
   nav items are told never to break mid-label.
   ============================================================ */

/* --- applies to BOTH languages --- */
.nav-links > li{white-space:nowrap}        /* never split a label across lines */
.nav{gap:1rem}
.nav-lang{display:flex;align-items:center}
.lang-switch{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-family:'Plus Jakarta Sans',sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.04em;border:1px solid var(--line);border-radius:999px;padding:6px 11px;background:#fff;line-height:1}
.lang-switch__on{color:var(--gold-deep)}
.lang-switch__sep{color:var(--line)}
.nav-links .lang-switch__off{color:var(--slate);font-weight:600;font-size:.78rem}
.nav-links .lang-switch__off:hover{color:var(--gold-deep)}

/* --- Bahasa Melayu only: tighter nav so 8 items + CTA + switch fit one line --- */
html[lang="ms-MY"] .nav-links{gap:1.05rem}
html[lang="ms-MY"] .nav-links a{font-size:.86rem}
html[lang="ms-MY"] .nav-cta{padding:9px 15px;font-size:.83rem}
html[lang="ms-MY"] .brand{font-size:.98rem}
html[lang="ms-MY"] .drop a{font-size:.87rem}

/* Between 900px and 1120px the Malay nav still gets tight — squeeze a little more. */
@media(min-width:901px) and (max-width:1120px){
  html[lang="ms-MY"] .nav-links{gap:.8rem}
  html[lang="ms-MY"] .nav-links a{font-size:.82rem}
  html[lang="ms-MY"] .brand::after{display:none}   /* drop the strapline, keep the name */
}

/* Mobile: the nav collapses into the burger menu, so the switch can breathe again. */
@media(max-width:900px){
  .nav-lang{justify-content:flex-start;margin-top:4px}
  .lang-switch{padding:8px 14px;font-size:.9rem}
  html[lang="ms-MY"] .nav-links a{font-size:1rem}
}