:root{--ink:#083c36;--teal:#0e6d78;--teal-dark:#07545d;--gold:#d4aa3a;--paper:#f6faf9;--white:#fff;--muted:#5e706e;--line:#d9e8e5;--shadow:0 18px 50px rgba(8,60,54,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Segoe UI,Arial,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}.hp-header{position:sticky;top:0;z-index:50;background:rgba(7,84,93,.97);border-bottom:3px solid var(--gold);box-shadow:0 8px 25px rgba(0,0,0,.12)}.hp-nav{max-width:1240px;margin:auto;min-height:76px;padding:10px 22px;display:flex;align-items:center;gap:30px}.hp-logo{width:82px;height:46px;object-fit:contain;background:#fff;border:2px solid #e5c75b;border-radius:50%;padding:3px;flex:none}.hp-links{margin-left:auto;display:flex;align-items:center;gap:24px;font-weight:700;color:#fff;font-size:14px}.hp-links a{opacity:.95}.hp-links a:hover{color:#ffe18a}.hp-menu{display:none;color:#fff;font-size:28px;cursor:pointer}.hp-wrap{max-width:1240px;margin:auto;padding:0 22px}.hero{padding:76px 0 58px;background:radial-gradient(circle at 80% 20%,rgba(212,170,58,.17),transparent 30%),linear-gradient(135deg,#f8fcfb,#edf7f5)}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}.eyebrow{display:inline-flex;align-items:center;gap:8px;background:#e4f2ef;color:var(--teal-dark);padding:7px 13px;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:.4px;text-transform:uppercase}.hero h1{font-size:clamp(42px,5vw,68px);line-height:1.05;margin:20px 0 18px;letter-spacing:-2px}.hero p{font-size:19px;color:var(--muted);max-width:650px;margin:0 0 28px}.hero-actions{display:flex;gap:13px;flex-wrap:wrap}.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 20px;border-radius:10px;font-weight:800;border:1px solid var(--teal)}.btn-primary{background:var(--teal);color:#fff}.btn-secondary{background:#fff;color:var(--teal)}.hero-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:15px;box-shadow:var(--shadow);transform:rotate(1deg)}.hero-card img{width:100%;display:block;aspect-ratio:3/2;object-fit:contain;border-radius:15px;background:#f4f8f7}.hero-card-caption{padding:16px 8px 5px}.hero-card-caption strong{font-size:18px}.section{padding:70px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:26px}.section-head h2{font-size:34px;line-height:1.15;margin:0}.section-head p{margin:5px 0 0;color:var(--muted)}.text-link{font-weight:800;color:var(--teal);white-space:nowrap}.feature-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:24px}.feature-card,.mini-card,.tool-card,.about-box{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 8px 30px rgba(8,60,54,.06)}.feature-card img{width:100%;height:360px;object-fit:cover;display:block}.feature-body{padding:22px}.feature-body h3{font-size:27px;margin:0 0 8px}.feature-body p,.mini-body p,.tool-card p,.about-box p{color:var(--muted);margin:0 0 14px}.mini-list{display:grid;gap:16px}.mini-card{display:grid;grid-template-columns:125px 1fr}.mini-card img{width:125px;height:100%;min-height:120px;object-fit:cover}.mini-body{padding:14px}.mini-body h3{font-size:17px;line-height:1.3;margin:0 0 7px}.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.category{background:#fff;border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:15px;padding:22px}.category span{font-size:27px}.category h3{margin:10px 0 5px}.category p{color:var(--muted);font-size:14px;margin:0}.tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.tool-card{padding:22px}.tool-card h3{margin:0 0 6px}.tool-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#e7f4f1;color:var(--teal);font-weight:900;font-size:20px;margin-bottom:14px}.latest{background:#edf6f4}.latest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.post-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}.post-card img{width:100%;height:210px;object-fit:cover;display:block}.post-card-body{padding:18px}.post-card h3{margin:0 0 8px;font-size:20px;line-height:1.3}.post-card p{margin:0 0 12px;color:var(--muted);font-size:14px}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.about-box{padding:30px}.about-box h2{margin-top:0;font-size:30px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.stat{padding:15px;background:#eef7f5;border-radius:12px;text-align:center}.stat strong{display:block;font-size:24px}.cta{padding:55px 0}.cta-box{background:var(--teal-dark);color:#fff;border-radius:22px;padding:38px;display:flex;align-items:center;justify-content:space-between;gap:30px}.cta-box h2{margin:0 0 7px;font-size:30px}.cta-box p{margin:0;color:#d8eeeb}.hp-footer{background:#073f46;color:#d9ece9;padding:40px 0 20px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}.hp-footer h3{color:#fff;margin-top:0}.hp-footer a{display:block;margin:7px 0;color:#d9ece9}.copyright{border-top:1px solid rgba(255,255,255,.15);margin-top:28px;padding-top:18px;font-size:13px;color:#aac6c2}@media(max-width:900px){.hp-links{display:none}.hp-menu{display:block;margin-left:auto}.hero-grid,.feature-grid,.about-grid{grid-template-columns:1fr}.category-grid,.tools-grid{grid-template-columns:repeat(2,1fr)}.latest-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.hero{padding-top:50px}}@media(max-width:600px){.hp-nav{min-height:65px;padding:8px 14px}.hp-logo{width:70px;height:40px}.hp-wrap{padding:0 14px}.hero h1{font-size:42px}.hero p{font-size:17px}.section{padding:50px 0}.category-grid,.tools-grid,.latest-grid,.footer-grid{grid-template-columns:1fr}.feature-card img{height:250px}.mini-card{grid-template-columns:105px 1fr}.mini-card img{width:105px;min-height:105px}.cta-box{padding:26px;display:block}.cta-box .btn{margin-top:18px}}

.topic-hero{padding:72px 0 54px;background:linear-gradient(135deg,#f4fbfa 0%,#eef7f5 55%,#fffdf4 100%);border-bottom:1px solid rgba(12,91,91,.12)}
.topic-hero h1{max-width:900px;font-size:clamp(42px,6vw,76px);line-height:1.02;margin:18px 0}.topic-hero p{max-width:800px;font-size:19px;line-height:1.7;color:#45616b}.topic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.topic-card{background:#fff;border:1px solid rgba(12,91,91,.16);border-radius:20px;overflow:hidden;box-shadow:0 12px 30px rgba(0,40,40,.06)}.topic-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.topic-body{padding:20px}.topic-body h2{font-size:21px;line-height:1.3;margin:0 0 16px;color:#063f3b}.topic-body .text-link{font-weight:700}@media(max-width:900px){.topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.topic-grid{grid-template-columns:1fr}.topic-hero{padding:52px 0 40px}}

/* Exact Inverter110 transparent navbar logo */
.hp-logo {
    width: 190px !important;
    height: auto !important;
    max-width: 32vw !important;
    max-height: 58px !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}
@media (max-width: 600px) {
    .hp-logo {
        width: 145px !important;
        max-width: 45vw !important;
        max-height: 48px !important;
    }
}


/* FINAL INVERTER110 NAVBAR LOGO */
header > img,
.hp-logo,
.blog-logo {
    width: 260px !important;
    height: 58px !important;
    max-width: 38vw !important;
    max-height: 62px !important;
    object-fit: contain !important;
    object-position: left center !important;
    display: block !important;
    padding: 0 !important;
    margin-left: 2% !important;
    margin-right: 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

@media screen and (max-width: 765px) {
    header > img,
    .hp-logo,
    .blog-logo {
        width: 185px !important;
        height: 50px !important;
        max-width: 58vw !important;
        max-height: 54px !important;
        margin-left: 10px !important;
        margin-right: 8px !important;
    }
}



/* INVERTER110 FINAL BRIGHT NAVBAR LOGO */
header > img,
.hp-logo,
.blog-logo {
    width: 260px !important;
    height: 58px !important;
    max-width: 38vw !important;
    max-height: 62px !important;
    object-fit: contain !important;
    object-position: left center !important;
    display: block !important;
    padding: 0 !important;
    margin-left: 2% !important;
    margin-right: 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

@media screen and (max-width: 765px) {
    header > img,
    .hp-logo,
    .blog-logo {
        width: 185px !important;
        height: 50px !important;
        max-width: 58vw !important;
        max-height: 54px !important;
        margin-left: 10px !important;
        margin-right: 8px !important;
    }
}



/* ==========================================================
   INVERTER110 — APPROVED NAVBAR
   Matches the supplied reference: teal + gold + large logo.
   ========================================================== */
:root {
    --brand-teal: #0b6f77;
    --brand-gold: #f3c12b;
}

header,
.blog-header {
    background: var(--brand-teal) !important;
    border-bottom: 3px solid var(--brand-gold) !important;
    box-shadow: none !important;
}

header {
    min-height: 98px !important;
    height: 98px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 max(28px, calc((100% - 1330px) / 2)) !important;
    gap: 28px !important;
    box-sizing: border-box !important;
}

header > img,
header > a > img,
header .hp-logo,
header .blog-logo {
    width: 385px !important;
    height: 78px !important;
    max-width: 40vw !important;
    max-height: 82px !important;
    object-fit: contain !important;
    object-position: left center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
}

header nav,
.blog-nav {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 32px !important;
}

header nav a,
.blog-nav a {
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    padding: 8px 0 !important;
}

header nav a:hover,
.blog-nav a:hover {
    color: #fff !important;
    opacity: .9;
}

.blog-header {
    height: 98px !important;
    min-height: 98px !important;
    padding: 0 max(28px, calc((100% - 1330px) / 2)) !important;
    gap: 28px !important;
}

.blog-header .blog-logo {
    width: 385px !important;
    height: 78px !important;
    max-width: 40vw !important;
}

@media (max-width: 900px) {
    header {
        min-height: 82px !important;
        height: 82px !important;
        padding: 0 18px !important;
    }

    header > img,
    header > a > img,
    header .hp-logo,
    header .blog-logo {
        width: 260px !important;
        height: 66px !important;
        max-width: 45vw !important;
    }

    header nav,
    .blog-nav {
        gap: 18px !important;
    }
}

@media (max-width: 650px) {
    header,
    .blog-header {
        min-height: 70px !important;
        height: 70px !important;
        padding: 0 12px !important;
    }

    header > img,
    header > a > img,
    header .hp-logo,
    header .blog-logo {
        width: 205px !important;
        height: 56px !important;
        max-width: 58vw !important;
    }

    header nav,
    .blog-nav {
        gap: 12px !important;
    }

    header nav a,
    .blog-nav a {
        font-size: 12px !important;
    }
}


/* ==========================================================
   INVERTER110 — HOMEPAGE CENTRAL HEADER DROPDOWN FIX
   Scoped to the shared site-header markup. This overrides the
   homepage navigation rules without changing URLs or redirects.
   ========================================================== */

.site-header-menu {
    position: relative !important;
    overflow: visible !important;
    z-index: 10000 !important;
}

.site-header-menu > .dropdown {
    position: relative !important;
    display: block !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
}

.site-header-menu > .dropdown > .dropdown-content {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    width: max-content !important;
    min-width: 240px !important;
    max-width: min(420px, calc(100vw - 20px)) !important;
    height: auto !important;
    max-height: min(75vh, 620px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    background: #fff !important;
    flex-direction: column !important;
    align-items: stretch !important;
    z-index: 10001 !important;
}

.site-header-menu > .dropdown:hover > .dropdown-content,
.site-header-menu > .dropdown:focus-within > .dropdown-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: min-content !important;
}

.site-header-menu > .dropdown > .dropdown-content > a {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    white-space: nowrap !important;
    text-align: left !important;
    line-height: 1.35 !important;
    grid-column: 1 !important;
    flex: none !important;
}

.site-header-menu > .dropdown > .dropdown-content > a + a {
    margin-top: 0 !important;
}

.site-header-menu > .dropdown > .dropdown-content > a:hover {
    background: #f0f7f6 !important;
}

.site-header-menu > .dropdown:last-of-type > .dropdown-content {
    left: auto !important;
    right: 0 !important;
}

@media (max-width: 765px) {
    .site-header-menu > .dropdown > .dropdown-content {
        position: static !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .site-header-menu.nav-open > .dropdown > .dropdown-content {
        display: grid !important;
    }
}