:root {
    --blue:    #1a5fa8;
    --blue2:   #154d8c;
    --blue3:   #0e3660;
    --green:   #2db551;
    --green2:  #239e43;
    --green3:  #1a7a32;
    --gold:    #f5c518;
    --gold2:   #e8a800;
    --bg:      #f5f7fa;
    --bg2:     #edf1f7;
    --card:    #ffffff;
    --card2:   #f0f4f9;
    --border:  #d4dde8;
    --dark:    #0f1f33;
    --heading: #0d1a2a;
    --muted:   #6b7f99;
    --text:    #3a4a5c;
    --hero-overlay: 220 45% 12%;
    --primary-font: 'Montserrat', sans-serif;
    --hover-transition: 0.3s ease-out;
    --orange:  #e85c1a;
    --orange2: #c44d14;
}

@keyframes gridMove { 
    0% { 
        background-position: 0 0; 
    } 
    100% { 
        background-position: 64px 64px; 
    } 
}

@keyframes fadeUp { 
    from { 
        opacity: 0; 
        transform: translateY(22px); 
    } 
    to { 
        opacity: 1; 
        transform: translateY(0); 
    } 
}


html, body {
    width: 100%;
    padding: 0;
    margin: 0;
    font-family: var(--primary-font);
    font-optical-sizing: auto;
    font-size: 17px;
    font-weight: 300;
    font-style: normal;
    color: var(--text);
    background: var(--bg);
    line-height: 1.3;
}


*,::after,::before {
    box-sizing: border-box
}

* {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: #1E272E;
    cursor: pointer;
    text-decoration: none;
    transition: 0.3s ease-out;
}

a:hover {
    text-decoration: none !important;
    list-style-type: none;
    transition: 0.3s ease-out;
    color: var(--primary-color);
}

a:active {
    text-decoration: none;
    list-style-type: none;
}

button {
    outline: none;
    cursor: pointer;
    color: inherit;
    background: transparent;
    transition: 0.3s ease-out;
}

button:hover {
    transition: 0.3s ease-out;
}

button[disabled] {
    cursor: not-allowed;
    opacity: 0.8;
}

img {
    max-width: 100%;
    height: auto;
    width: auto\9;
    /* ie8 */
    border: none;
}

ul {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}

ul li {
    list-style: none;
}

input,
textarea {
    font-weight: 400;
    font-size: 17px;
    font-family: var(--primary-font);
}

input:focus {
    outline: none !important;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

::-webkit-input-placeholder {
    color: #535353 !important;
}

::-moz-placeholder {
    color: #535353 !important;
}

:-ms-input-placeholder {
    color: #535353 !important;
}

:-moz-placeholder {
    color: #535353 !important;
}

input[type="search" i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button {
    display: none;
}

[hidden] {
    display: none!important;
}


h1, h2, h3, h4 {
    margin-top: 0;
}

h2 {
    font-size: 32px;
}

h3 {
    font-size: 24px;
}

p {
    margin-top: 0;
}

strong {
    font-weight: 600;
}

.primary-font {
    font-family: var(--primary-font);
    font-optical-sizing: auto;
    font-style: normal;
}

.secondary-font {
  font-family: var(--secondary-font);
  font-weight: 400;
  font-style: normal;
}

.font-light {
    font-weight: 300;
}

.font-regular {
    font-weight: 400;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.font-bold {
    font-weight: 700;
}

.font-13 {
    font-size: 13px;
}

.font-15 {
    font-size: 15px;
}

.font-17 {
    font-size: 17px;
}

.font-20 {
    font-size: 20px;
}

.font-22 {
    font-size: 22px;
}

.font-24 {
    font-size: 24px;
}

.font-28 {
    font-size: 28px;
}

.font-32 {
    font-size: 32px;
}

.font-40 {
    font-size: 40px;
}

.font-42 {
    font-size: 42px;
}

.font-90 {
    font-size: 90px;
}

.uppercase {
    text-transform: uppercase;
}

.accent-blue {
    color: var(--blue);
}

.accent-green {
    color: var(--green);
}

.text-white {
    color: #FDFDFD;
}

.text-white-opacity-80 {
    color: rgba(255, 255, 255, 0.8);
}

.text-white-opacity-50 {
    color: rgba(255, 255, 255, 0.5);
}

.text-muted {
    color: var(--text-muted);
}

.text-green {
    color: var(--primary-color);
}

.text-light-gold {
    color: var(--gold-light);
}

.text-gray {
    color: #535353;
}

.text-black {
    color: #000000;
}

.flex-1 {
    flex: 1
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.d-grid {
    display: grid;
    gap: 24px;
}

.gap-0 {
    gap: 0;
}

.gap-2 {
    gap: 2px;
}

.gap-8 {
    gap: 8px;
}

.gap-12 {
    gap: 12px;
}

.gap-16 {
    gap: 16px;
}

.gap-24 {
    gap: 24px;
}

.gap-48 {
    gap: 48px;
}

.d-flex-gap-24 {
    gap: 24px;
    display: flex;
    flex-wrap: wrap;
}

.mt-30 {
    margin-top: 30px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-50 {
    margin-top: 50px;
}

.mt-80 {
    margin-top: 80px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-40 {
    margin-bottom: 40px;
}

.white-card {
    background: var(--card);
    padding: 48px 36px;
    position: relative;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(26, 95, 168, 0.05);
}

.white-card:hover {
    box-shadow: 0 14px 40px rgba(26, 95, 168, 0.12);
}

.white-card-left-border-hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--green);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}

.white-card-left-border-hover:hover::before {
    transform: scaleX(1);
}

.white-card-bottom-border-hover::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--green));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}

.white-card-bottom-border-hover:hover::before {
    transform: scaleX(1);
}

.grid-item > div {
    height: 100%;
}

.bg-light-white-grid {
    background: rgba(255,255,255,.04);
}


.wf-animate { 
    opacity: 0; 
    transform: translateY(24px); 
    transition: opacity .6s ease, transform .6s ease; 
}

.wf-animate.visible { 
    opacity: 1; 
    transform: translateY(0); 
}

.btn {
    padding: 14px 34px;
    border: none;
    font-family: 'Montserrat', sans-serif; 
    font-size: 11px; 
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase; 
    cursor: pointer;
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
    transition: opacity .2s, transform .15s; 
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    width: max-content;
    flex-shrink: 0;
}

.w-full-btn {
    width: 100%;
    max-width: 100%;
    justify-content: center;
}

.btn:hover {
    opacity: .88; 
    transform: translateY(-1px);
}

.btn-primary {
    background: linear-gradient(135deg, var(--blue), var(--green));
    color: #fff; 
}

.btn-primary:hover { 
    color: #fff;
}

.btn-white {
    background: #fff;
    color: var(--blue);   
}

.btn-outline-white {
    background: transparent;
    color: #fff;
    clip-path: none;
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: border-color .2s, background .2s;
}

.btn-outline-white:hover {
    border-color: #fff;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.btn-orange {
    background: var(--orange);
    color: #fff;
}

.btn-orange:hover {
    background: var(--orange2);
    color: #fff;
    opacity: 1;
}

.cta-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.page-section {
    padding-top: 100px;
    padding-bottom: 100px;
}

.page-section-white {
    background: #fff;
}

.page-section-bg2 {
    background: var(--bg2);
}

.page-section-bg-dark {
    background: var(--dark); 
}

.page-section-bg-dark .section-title { 
    color: #fff; 
}

.page-section-bg-dark .section-sub  { 
    color: rgba(255,255,255,0.4); 
}

.section-label {
    font-size: 10px;
    letter-spacing: 4px;
    color: var(--green);
    text-transform: uppercase;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-label::before {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background: var(--green);
}

.section-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(36px, 5vw, 64px);
    color: var(--heading);
    line-height: 1;
    letter-spacing: .5px;
    margin-bottom: 16px;
}

.section-sub {
    font-size: 14px;
    line-height: 1.85;
    color: var(--muted);
    max-width: 560px;
    margin-top: 16px;
}

.item-title,
.item-title-secondary {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    color: var(--heading);
    letter-spacing: 1px;
    margin-bottom: 14px;
    font-weight: 400;
}

.item-title-secondary {
    font-size: 16px;
}

.item-description {
    font-size: 13px;
    line-height: 1.85;
    color: var(--muted);
}

/*-----HEADER-----*/
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    height: 72px;
    box-shadow: 0 1px 20px rgba(26, 95, 168, 0.06);
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    transition: background .35s, backdrop-filter .35s, border-color .35s, box-shadow .35s;
}

header.scrolled {
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 20px rgba(26, 95, 168, .07);
}

header .header-inner {
    position: relative;
    width: 100%;
}

header .header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: -15px;
    margin-right: -15px;
}

header .header-row  > div {
    padding-left: 15px;
    padding-right: 15px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.logo .logo-mark {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
}

.logo .logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.logo .logo-text .brand {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 17px;
    letter-spacing: 2px;
    color: #fff;
}

header.scrolled .logo .logo-text .brand {
    color: var(--heading);
}

.logo .logo-text .sub {
    font-size: 8.5px;
    letter-spacing: 2.5px;
    color: var(--green);
    text-transform: uppercase;
    margin-top: 3px;
}

header .menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

header .menu li a {
    font-size: 12px;
    letter-spacing: 1.25px;
    text-transform: uppercase;
    font-weight: 500;
    color: rgba(255,255,255,.85);
    transition: color .2s;
}

header.scrolled .menu li a {
    color: var(--muted);
}

header .menu li a:hover {
    color: var(--green);
}


/* Dropdown sub-menu */

header .menu li .sub-menu li {
    flex-direction: column;
    align-items: flex-start;
}

header .menu > li > .sub-menu > li > .sub-menu {
    padding-left: 12px;
}

header .menu li .sub-menu li a {
    display: block;
    padding: 9px 20px;
    white-space: nowrap;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--muted);
    transition: color .2s, background .2s;
}

header .menu li .sub-menu li a:hover {
    color: var(--green);
    background: rgba(255,255,255,0.04);
}

header .menu > li > .sub-menu > li > a {
    font-weight: 600;
}

.navbar-toggles {
    display: none;
}

.nav-cta {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-cta .nav-phone {
    font-size: 12px;
    color: rgba(255,255,255,.85);
    text-decoration: none;
    letter-spacing: .5px;
    transition: color .2s;
    font-weight: 500;
}

header.scrolled .nav-cta .nav-phone {
    color: var(--muted);
}

.nav-cta .nav-phone:hover {
    color: var(--blue); 
}
/*-----END HEADER-----*/


/*-----FOOTER-----*/
footer {
    background: var(--dark);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 60px 0 36px;
}


.footer-top .footer-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

footer .logo .logo-text .brand {
    color: #fff;
}

.footer-brand p {
    font-size: 12px;
    line-height: 1.85;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 20px;
    max-width: 260px;
}

.footer-col-title {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links a {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: color .2s;
}

.footer-links a:hover {
    color: var(--green);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 28px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.25);
}
/*-----END FOOTER-----*/

/*-----HERO------*/
.hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: hsl(var(--hero-overlay) / .75);
    animation: gridMove 24s linear infinite;
}

.hero .hero-content {
    position: relative;
    z-index: 9;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.hero .hero-label {
    font-size: 11px;
    letter-spacing: 4px;
    color: var(--green);
    text-transform: uppercase;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    animation: fadeUp .8s ease both;
}


.hero .hero-content-left.hero-content {
    text-align: left;
    margin: 0;
    padding-bottom: 56px;
}

.hero .hero-content-left.hero-content .hero-label {
    justify-content: flex-start;
}

.hero .hero-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(42px, 8vw, 86px);
    line-height: .92;
    color: #fff;
    letter-spacing: -.5px;
    animation: fadeUp .8s .1s ease both;
    margin-bottom: 15px;
}

.hero .hero-desc {
    margin-top: 28px;
    font-size: 14px;
    line-height: 1.9;
    color: #fff;
    max-width: 560px;
    margin: 0 auto;
    animation: fadeUp .8s .2s ease both;
}

.hero .hero-content-left.hero-content .hero-desc {
    margin: 0;
}

.hero-lead {
    font-family: 'Lora', Georgia, serif;
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.60);
    max-width: 560px;
    margin-top: 24px;
    animation: fadeUp .7s .16s ease both;
}

.hero .hero-actions {
    margin-top: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    animation: fadeUp .8s .3s ease both;
}

.hero-year {
    position: absolute;
    right: 5vw;
    bottom: 80px;
    z-index: 2;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(120px, 18vw, 260px);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.06);
    letter-spacing: 4px;
    pointer-events: none;
    animation: fadeUp .9s .5s ease both;
}

.hero .hero-stats {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
   
    z-index: 2;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    animation: fadeUp .8s .45s ease both;
    background: rgba(8, 16, 28, 0.7);
    backdrop-filter: blur(8px);
}

.hero .hero-stats .hero-stats-row {
    display: flex;
}

.hero .hero-stat-item {
    flex: 1;
    padding: 28px;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 16px;
}

.hero .hero-stat-item:last-child {
    border-right: none;
}

.hero .hero-stat-item .stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 44px;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
}

.hero .hero-stat-item .stat-num .unit {
    color: var(--green);
    font-size: 32px;
}

.hero .hero-stat-item .stat-label {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 4px;
}
/*-----END HERO-----*/


/*-----HOME PAGE-----*/
.page-section-advantages {
    background: var(--bg2);
}

.service-card .service-num {
    position: absolute;
    top: 16px;
    right: 20px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 68px;
    color: rgba(26, 95, 168, 0.05);
    line-height: 1;
}

.service-card .service-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 28px;
}

.adv-item .adv-icon {
    width: 30px;
    height: 30px;
    margin-bottom: 20px;
}

.projects-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
}

.project-card {
    background: var(--card);
    padding: 44px 40px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(26, 95, 168, 0.05);
}

.project-card:hover {
    box-shadow: 0 10px 36px rgba(26, 95, 168, 0.11);
}

.project-card.featured {
    grid-row: span 2;
    background: linear-gradient(140deg, #eef4ff 0%, #eaf6ef 100%);
    border: 1px solid rgba(26, 95, 168, 0.14);
}

.project-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, var(--blue), var(--green));
    opacity: 0;
    transition: opacity .3s;
}

.project-card:hover::after {
    opacity: 1;
}

.project-tag {
    display: inline-block;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--green);
    border: 1px solid rgba(45, 181, 81, 0.4);
    padding: 4px 10px;
    margin-bottom: 20px;
}

.project-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    color: var(--heading);
    line-height: 1.1;
    margin-bottom: 14px;
    letter-spacing: .5px;
}

.project-card.featured .project-title {
    font-size: 40px;
}

.project-meta {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .5px;
}

.proj-meta { 
    margin-top: 20px; 
    display: flex; 
    gap: 16px; 
    flex-wrap: wrap; 
}

.project-power {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 72px;
    color: rgba(26, 95, 168, 0.07);
    line-height: 1;
    position: absolute;
    bottom: -8px;
    right: 16px;
}

.cta-band {
    background: linear-gradient(110deg, var(--blue3) 0%, var(--blue) 50%, var(--green3) 100%);
    padding: 64px 5vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    overflow: hidden;
}

.cta-band-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(28px, 3.5vw, 50px);
    color: #fff;
    letter-spacing: 1px;
    line-height: 1.15;
}

.cta-band-sub {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 10px;
    max-width: 480px;
}

.contact-detail {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 28px;
}

.c-icon {
    width: 40px;
    height: 40px;
    background: var(--bg2);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--green);
}

.c-label {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}

.c-value {
    font-size: 14px;
    color: var(--heading);
    text-decoration: none;
    display: block;
    font-weight: 500;
}

.c-value:hover {
    color: var(--blue);
}

.contact-form,
.contact-form form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--heading);
    padding: 12px 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    resize: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(26, 95, 168, 0.08);
}

form .btn-group {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}


.wpcf7-not-valid-tip {
    font-size: 11px;
    margin-top: 4px;
}

.wpcf7 form .wpcf7-response-output {
    margin: 0;
    padding: 0.2em 1em;
    border: none;
}

/*-----END HOME PAGE-----*/


/*-----SOLAR POWER PAGE-----*/
.type-card {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 0;
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 14px rgba(26, 95, 168, 0.06);
    transition: transform .3s, box-shadow .3s;
    text-decoration: none;
    display: block;
}

.type-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(26, 95, 168, 0.13);
}

.type-card-thumb {
    height: 200px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.type-card-thumb.osbb {
    background: linear-gradient(135deg, #0e3660, #1a5fa8);
}

.type-card-thumb.biz {
    background: linear-gradient(135deg, #1a5fa8, #239e43);
}

.type-card-thumb.priv {
    background: linear-gradient(135deg, #1a7a32, #2db551);
}

.type-card-thumb-icon {
    font-size: 64px;
    opacity: .85;
}

.type-card-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 4px 10px;
    backdrop-filter: blur(8px);
}

.type-card-body {
    padding: 32px 28px 28px;
}

.type-card-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    color: var(--heading);
    letter-spacing: .5px;
    margin-bottom: 12px;
}

.type-card-desc {
    font-size: 13px;
    line-height: 1.8;
    color: var(--muted);
    margin-bottom: 20px;
}

.type-card-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.type-card-list li {
    font-size: 12px;
    color: var(--text);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}

.type-card-list li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
    margin-top: 5px;
}

.type-card-link {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--blue);
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: gap .2s;
}

.type-card:hover .type-card-link {
    gap: 10px;
}

.steps {
    display: grid;
    gap: 0;
    position: relative;
}

.steps::before {
    content: '';
    position: absolute;
    top: 36px;
    left: calc(10% + 16px);
    right: calc(10% + 16px);
    height: 1px;
    background: linear-gradient(90deg, var(--blue), var(--green));
    z-index: 0;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 12px;
    position: relative;
    z-index: 1;
}

.step-num {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--dark);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    color: #fff;
    margin-bottom: 24px;
    position: relative;
    transition: border-color .3s, background .3s;
}

.step:hover .step-num {
    border-color: var(--green);
    background: rgba(45, 181, 81, 0.08);
}

.step-num .step-icon {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 26px;
    height: 26px;
    background: var(--green);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: .3px;
}

.step-desc {
    font-size: 12px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.45);
}

.equip-card {
    display: flex;
    gap: 24px;
    padding: 32px 28px;
}

.equip-card:hover {
    box-shadow: 0 10px 32px rgba(26, 95, 168, 0.1);
    transform: translateY(-2px);
}

.equip-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(26, 95, 168, 0.08), rgba(45, 181, 81, 0.08));
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.equip-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    color: var(--heading);
    letter-spacing: .5px;
    margin-bottom: 10px;
}

.equip-desc {
    font-size: 13px;
    line-height: 1.8;
    color: var(--muted);
}

.equip-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.equip-tag {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--blue);
    background: rgba(26, 95, 168, 0.07);
    padding: 3px 9px;
}

.calc-section {
    background: var(--bg2);
}

.calc-inner {
    align-items: start;
}

.calc-form {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 40px;
    box-shadow: 0 2px 14px rgba(26, 95, 168, 0.06);
}

.calc-form-dark {
    background: var(--dark);
    border: 1px solid var(--border);
    box-shadow: 0 2px 14px rgba(26, 95, 168, 0.06);
}

.calc-form-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    color: var(--heading);
    letter-spacing: .5px;
    margin-bottom: 28px;
}

.calc-form-dark .calc-form-title {
    color: #fff;
}

.calc-form .form-group {
    margin-bottom: 20px;
}

.calc-form .form-group input,
.calc-form .form-group select,
.contact-form-bg-fields .form-group input,
.contact-form-bg-fields .form-group select,
.contact-form-bg-fields .form-group textarea {
    background: var(--bg);
}

.calc-form-dark .form-group input,
.calc-form-dark .form-group select {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    color: #fff;
}

.calc-result {
    background: linear-gradient(135deg, #eef4ff, #eaf6ef);
    border: 1px solid rgba(26, 95, 168, 0.12);
    padding: 32px;
    display: none;
}

.calc-form-dark .calc-result {
    background: var(--dark);
    border: none;
    padding: 0;
    margin-top: 25px;
}

.calc-result.show {
    display: block;
    animation: fadeUp .4s ease both;
}

.calc-result-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    color: var(--heading);
    margin-bottom: 20px;
}

.result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.result-row:last-child {
    border: none;
}

.result-key {
    color: var(--muted);
}

.result-val {
    font-weight: 700;
    color: var(--heading);
}

.result-val.white {
    color: #fff;
}

.result-val.green {
    color: var(--green);
}

.result-val.blue {
    color: var(--blue);
}

.result-total {
    margin-top: 16px;
    background: rgba(45, 181, 81, .1);
    border: 1px solid rgba(45, 181, 81, .25);
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.cr-tl {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .35)
}

.cr-tv {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 32px;
    color: var(--green);
    line-height: 1
}

.calc-info {
    padding-top: 8px;
}

.calc-info-item {
    display: flex;
    gap: 20px;
    margin-bottom: 32px;
}

.calc-info-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 52px;
    line-height: 1;
    flex-shrink: 0;
}

.calc-info-num.blue {
    color: var(--blue);
}

.calc-info-num.green {
    color: var(--green);
}

.calc-info-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--heading);
    margin-bottom: 6px;
}

.calc-info-desc {
    font-size: 12px;
    line-height: 1.75;
    color: var(--muted);
}

.faq-item {
    background: var(--card);
    border: 1px solid var(--border);
    overflow: hidden;
}

.faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--heading);
    line-height: 1.45;
    transition: background .2s;
}

.faq-q:hover {
    background: var(--bg2);
}

.faq-q .faq-ico {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s, background .2s;
}

.faq-item.open .faq-q {
    background: var(--bg2);
}

.faq-item.open .faq-ico {
    background: var(--blue);
    border-color: var(--blue);
    transform: rotate(45deg);
}

.faq-item.open .faq-ico svg {
    color: #fff;
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.faq-a-inner {
    padding: 0 24px 22px;
    font-size: 13px;
    line-height: 1.85;
    color: var(--muted);
}

.faq-item.open .faq-a {
    max-height: 400px;
}

.testimonials-card {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 36px 32px;
    box-shadow: 0 2px 12px rgba(26, 95, 168, .05);
    position: relative;
    overflow: hidden;
    transition: box-shadow .3s, transform .3s;
}

.testimonials-card:hover {
    box-shadow: 0 12px 36px rgba(26, 95, 168, .10);
    transform: translateY(-4px)
}

.testimonials-quote {
    font-size: 42px;
    font-family: Georgia, serif;
    color: var(--green);
    line-height: 1;
    margin-bottom: 16px;
    opacity: .4;
}

.testimonials-text {
    font-size: 13px;
    line-height: 1.85;
    color: var(--text);
    margin-bottom: 24px;
    font-style: italic
}

.testimonials-sep {
    width: 36px;
    height: 2px;
    background: linear-gradient(90deg, var(--blue), var(--green));
    margin-bottom: 18px
}

.testimonials-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--heading)
}

.testimonials-role {
    font-size: 11px;
    letter-spacing: .5px;
    color: var(--muted);
    margin-top: 3px
}

.testimonials-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 16px
}

.testimonials-stars span {
    color: var(--green);
    font-size: 14px
}
/*-----END SOLAR POWER PAGE-----*/

/*-----SES FOR OSBB PAGE-----*/

.hero-bg-svg {
    flex-direction: column;
    justify-content: center;
}

.hero-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #071018;
    background-image: linear-gradient(155deg, #071018 0%, #0d2040 45%, #071510 100%);
    background-size: cover;
    background-position: center;
}

/* animated building silhouette + sun rays */
.hero-deco {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden
}

.hero-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(5, 12, 22, .40) 0%, rgba(5, 12, 22, .68) 45%, rgba(5, 12, 22, .94) 82%, rgba(5, 12, 22, 1) 100%);
}

.hero-tint {
    position: absolute;
    inset: 0;
    z-index: 3;
    background:
        radial-gradient(ellipse 55% 55% at 50% 30%, rgba(26, 95, 168, .22) 0%, transparent 68%),
        radial-gradient(ellipse 30% 40% at 80% 70%, rgba(45, 181, 81, .12) 0%, transparent 60%);
}

.why-rows {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 56px;
    background: var(--border)
}

.why-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--card);
    min-height: 300px;
}

.why-row.reverse {
    direction: rtl
}

.why-row.reverse>* {
    direction: ltr
}

.why-visual {
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.why-visual.c1 {
    background: linear-gradient(135deg, #0e3660, #1a5fa8)
}

.why-visual.c2 {
    background: linear-gradient(135deg, #1a5fa8, #2db551)
}

.why-visual.c3 {
    background: linear-gradient(135deg, #1a7a32, #2db551)
}

.why-visual.c4 {
    background: linear-gradient(135deg, #0a2845, #154d8c)
}

.why-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .1) 1px, transparent 1px);
    background-size: 20px 20px
}

.why-icon {
    font-size: 72px;
    position: relative;
    z-index: 1
}

.why-text {
    padding: 48px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.why-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 64px;
    color: rgba(26, 95, 168, .07);
    line-height: 1;
    margin-bottom: 4px
}

.why-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    color: var(--heading);
    letter-spacing: .5px;
    margin-bottom: 14px
}

.why-desc {
    font-size: 13px;
    line-height: 1.9;
    color: var(--muted)
}

.why-bullets {
    list-style: none;
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.why-bullets li {
    font-size: 12px;
    color: var(--text);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5
}

.why-bullets li::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
    margin-top: 5px
}

.ib-item {
    padding: 32px 28px;
    border-right: 1px solid rgba(255, 255, 255, .07);
    display: flex;
    align-items: flex-start;
    gap: 18px;
    transition: background .2s;
}

.ib-item:last-child {
    border-right: none
}

.ib-item:hover {
    background: rgba(255, 255, 255, .03)
}

.ib-icon {
    color: var(--green);
    flex-shrink: 0;
    margin-top: 2px
}

.ib-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px
}

.ib-desc {
    font-size: 12px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .38)
}

.eco-card {
    background: var(--card);
    padding: 28px 32px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.eco-card:not(:last-child) {
    border-bottom: 2px solid var(--border);
}

.eco-card:hover {
    background: #fafcff
}

.eco-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 52px;
    line-height: 1;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--blue), var(--green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.eco-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 6px
}

.eco-desc {
    font-size: 13px;
    line-height: 1.8;
    color: var(--muted)
}

.sol-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 56px
}

.sol-card {
    background: var(--card);
    border: 1px solid var(--border);
    overflow: hidden;
    position: relative;
    box-shadow: 0 2px 14px rgba(26, 95, 168, .05);
    transition: transform .3s, box-shadow .3s
}

.sol-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 48px rgba(26, 95, 168, .13)
}

.sol-thumb {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden
}

.sol-thumb.t1 {
    background: linear-gradient(135deg, #0e3660, #1a5fa8)
}

.sol-thumb.t2 {
    background: linear-gradient(135deg, #1a5fa8, #2db551)
}

.sol-thumb.t3 {
    background: linear-gradient(135deg, #1a7a32, #2db551)
}

.sol-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .1) 1px, transparent 1px);
    background-size: 18px 18px
}

.sol-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .25);
    padding: 4px 10px;
    backdrop-filter: blur(6px)
}

.sol-rec {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: var(--green);
    color: #fff;
    padding: 4px 10px
}

.sol-body {
    padding: 32px 28px
}

.sol-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    color: var(--heading);
    letter-spacing: .5px;
    margin-bottom: 12px
}

.sol-desc {
    font-size: 13px;
    line-height: 1.85;
    color: var(--muted);
    margin-bottom: 18px
}

.sol-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px
}

.sol-list li {
    font-size: 12px;
    color: var(--text);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5
}

.sol-list li::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
    margin-top: 5px
}

.how-inner {
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 64px;
    align-items: center;
    margin-top: 56px
}

.how-diagram {
    position: relative;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center
}

.hw-step {
    display: flex;
    gap: 24px;
    padding: 24px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    transition: background .2s
}

.hw-step:last-child {
    border-bottom: none
}

.hw-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 40px;
    line-height: 1;
    flex-shrink: 0;
    width: 48px;
    background: linear-gradient(135deg, var(--blue), var(--green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

.hw-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px
}

.hw-desc {
    font-size: 12px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .4)
}

.pkg {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 0;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(26, 95, 168, .05);
    position: relative;
    transition: transform .3s, box-shadow .3s
}

.pkg:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 44px rgba(26, 95, 168, .12)
}

.pkg.popular {
    border-color: var(--blue);
    border-width: 2px
}

.pkg-head {
    padding: 32px 32px 28px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border)
}

.pkg.popular .pkg-head {
    background: linear-gradient(135deg, var(--blue3), var(--blue));
    border-bottom-color: rgba(255, 255, 255, .1)
}

.pkg-tag-popular {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--green);
    color: #fff;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 16px
}

.pkg-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    letter-spacing: 1px;
    color: var(--heading);
    margin-bottom: 4px
}

.pkg.popular .pkg-name {
    color: #fff
}

.pkg-power {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted)
}

.pkg.popular .pkg-power {
    color: rgba(255, 255, 255, .55)
}

.pkg-price {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 48px;
    color: var(--blue);
    line-height: 1;
    margin-top: 16px
}

.pkg.popular .pkg-price {
    color: var(--green)
}

.pkg-price-note {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px
}

.pkg.popular .pkg-price-note {
    color: rgba(255, 255, 255, .4)
}

.pkg-body {
    padding: 28px 32px 36px
}

.pkg-includes {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px
}

.pkg-includes li {
    font-size: 13px;
    color: var(--text);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5
}

.pkg-includes li svg {
    flex-shrink: 0;
    margin-top: 1px
}

.pkg-includes li.dim {
    color: var(--muted);
    opacity: .6
}

.pkg-includes li.dim svg {
    color: var(--border)
}

.monitor-screen {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .08);
    padding: 32px;
    position: relative;
    overflow: hidden
}

.ms-title {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .3);
    margin-bottom: 24px
}

.ms-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px
}

.ms-val {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .07);
    padding: 16px
}

.ms-val-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 34px;
    line-height: 1;
    margin-bottom: 4px
}

.ms-val-num.gn {
    color: var(--green)
}

.ms-val-num.bl {
    color: var(--blue)
}

.ms-val-num.wh {
    color: #fff
}

.ms-val-num.yw {
    color: #f5c518
}

.ms-val-lbl {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .3)
}

.ms-bar-wrap {
    margin-top: 16px
}

.ms-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: rgba(255, 255, 255, .35);
    margin-bottom: 6px
}

.ms-bar-track {
    height: 6px;
    background: rgba(255, 255, 255, .08);
    border-radius: 3px;
    overflow: hidden
}

.ms-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 1s ease
}

.ms-bar-fill.solar {
    background: linear-gradient(90deg, var(--blue), var(--green));
    width: 78%
}

.ms-bar-fill.consumed {
    background: var(--green);
    width: 62%
}

.ms-bar-fill.sold {
    background: var(--blue);
    width: 16%
}

.monitor-features {
    display: flex;
    flex-direction: column;
    gap: 0
}

.mf-item {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.mf-item:last-child {
    border-bottom: none
}

.mf-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green);
    transition: border-color .2s, background .2s
}

.mf-item:hover .mf-icon {
    border-color: var(--green);
    background: rgba(45, 181, 81, .08)
}

.mf-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 5px
}

.mf-desc {
    font-size: 12px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .38)
}

/*-----END SES FOR OSBB PAGE-----*/

/*-----SES FOR BUSINESS PAGE-----*/
.sectors-label {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    margin-bottom: 36px
}

.sectors-row {
    display: flex;
    justify-content: center;
    gap: 0;
    border: 1px solid var(--border)
}

.sector-cell {
    flex: 1;
    padding: 32px 16px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: background .2s
}

.sector-cell:last-child {
    border-right: none
}

.sector-cell:hover {
    background: var(--bg2)
}

.sector-icon {
    font-size: 32px
}

.sector-name {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    line-height: 1.4
}

.process-inner {
    gap: 2px;
    background: var(--border);
}

.pc {
    background: var(--card);
    padding: 36px 28px;
    position: relative;
    transition: background .2s, transform .3s, box-shadow .3s
}

.pc:hover {
    background: #fafcff;
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(26, 95, 168, .1);
    z-index: 2
}

.pc-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 52px;
    background: linear-gradient(135deg, var(--blue), var(--green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 16px
}

.pc-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 8px
}

.pc-desc {
    font-size: 12px;
    line-height: 1.7;
    color: var(--muted)
}

.roi-right {
    background: var(--dark);
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    gap: 0
}

.roi-metrics {
    display: flex;
    flex-direction: column;
    gap: 0
}

.rm {
    padding: 28px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07)
}

.rm:last-child {
    border-bottom: none
}

.rm-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 52px;
    line-height: 1;
    margin-bottom: 6px
}

.rm-num.blue {
    color: var(--blue)
}

.rm-num.green {
    color: var(--green)
}

.rm-label {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px
}

.rm-desc {
    font-size: 12px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .35)
}

.ben-card {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    padding: 40px 32px;
    transition: background .2s, border-color .25s
}

.ben-card:hover {
    background: rgba(26, 95, 168, .1);
    border-color: rgba(26, 95, 168, .3)
}

.ben-icon {
    color: var(--green);
    margin-bottom: 20px
}

.ben-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    color: #fff;
    letter-spacing: .5px;
    margin-bottom: 10px
}

.ben-desc {
    font-size: 13px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .4)
}

.segments-nav {
    display: flex;
    gap: 2px;
    background: var(--border);
    margin-top: 48px
}

.seg-tab {
    flex: 1;
    padding: 18px 20px;
    background: var(--card);
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    text-align: center;
    border: none;
    font-family: 'Montserrat', sans-serif;
    transition: background .2s, color .2s;
    border-bottom: 3px solid transparent;
}

.seg-tab.active {
    color: var(--blue);
    border-bottom-color: var(--blue);
    background: #fafcff
}

.seg-tab:hover:not(.active) {
    background: var(--bg2);
    color: var(--text)
}

.seg-panels {
    margin-top: 2px;
    background: var(--border)
}

.seg-panel {
    display: none!important;
    background: var(--card)
}

.seg-panel.active {
    display: grid!important;
    gap: 0
}

.seg-info {
    padding: 56px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.seg-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 36px;
    color: var(--heading);
    letter-spacing: .5px;
    margin-bottom: 16px
}

.seg-desc {
    font-size: 13px;
    line-height: 1.9;
    color: var(--muted);
    margin-bottom: 24px
}

.seg-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 4px
}

.seg-kpi {
    background: var(--bg2);
    padding: 20px;
    border-left: 3px solid var(--green)
}

.seg-kpi-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 36px;
    color: var(--blue);
    line-height: 1
}

.seg-kpi-lbl {
    font-size: 11px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 4px
}

.seg-visual {
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden
}

.seg-visual.sv1 {
    background: linear-gradient(135deg, #0e3660, #1a5fa8)
}

.seg-visual.sv2 {
    background: linear-gradient(135deg, #1a5fa8, #1a7a32)
}

.seg-visual.sv3 {
    background: linear-gradient(135deg, #0a2845, #239e43)
}

.seg-visual.sv4 {
    background: linear-gradient(135deg, #154d8c, #2db551)
}

.seg-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 22px 22px
}
/*-----END SES FOR BUSINESS PAGE-----*/


/*-----ELECTRICAL INSTALLATION PAGE-----*/
.services-grid {
    gap: 0.5px;
    background: var(--border);
}

.srv-card {
    background: var(--card);
    padding: 44px 36px;
    position: relative;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
}

.srv-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--green));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s;
}

.srv-card:hover::after {
    transform: scaleX(1);
}

.srv-num {
    position: absolute;
    top: 16px;
    right: 20px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 72px;
    color: rgba(26, 95, 168, 0.05);
    line-height: 1;
}

.srv-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 24px;
}

.srv-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    color: var(--heading);
    letter-spacing: .5px;
    margin-bottom: 12px;
    font-weight: 400;
}

.srv-desc {
    font-size: 13px;
    line-height: 1.85;
    color: var(--muted);
}

.srv-list {
    list-style: none;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.srv-list li {
    font-size: 12px;
    color: var(--text);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}

.srv-list li::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
    margin-top: 6px;
}

.split {
    background: var(--dark);
}

.split-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    min-height: 520px;
}

.split-photo {
    position: relative;
    overflow: hidden;
    min-height: 420px;
    background:
        url('https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=900&auto=format&fit=crop&q=80') center / cover no-repeat;
}

.split-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 60%, rgba(15, 31, 51, 0.9) 100%);
}

/* accent diagonal line */
.split-photo::before {
    content: '';
    position: absolute;
    top: 0;
    right: -1px;
    bottom: 0;
    width: 60px;
    z-index: 2;
    background: linear-gradient(to bottom, var(--blue), var(--green));
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.split-content {
    padding: 72px 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.split-content .section-label::before {
    background: var(--green);
}

.split-content .section-title {
    color: #fff;
}

.split-content .section-sub {
    color: rgba(255, 255, 255, 0.5);
    max-width: 420px;
}

.feature-list {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.feature-item {
    display: flex;
    gap: 20px;
}

.feature-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    transition: border-color .2s, background .2s;
}

.feature-item:hover .feature-icon {
    border-color: var(--green);
    background: rgba(45, 181, 81, 0.08);
}

.feature-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

.feature-desc {
    font-size: 12px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.45);
}

.process-grid {
    background: var(--border);
}

.process-item {
    background: var(--card);
    padding: 40px 36px;
    display: flex;
    gap: 28px;
    align-items: flex-start;
}

.process-item:hover {
    background: #fafcff;
    transition: background .2s;
}

.process-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 56px;
    line-height: 1;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--blue), var(--green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.process-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    color: var(--heading);
    letter-spacing: .5px;
    margin-bottom: 10px;
}

.process-desc {
    font-size: 13px;
    line-height: 1.8;
    color: var(--muted);
}

.process-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 14px;
}

.ptag {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--blue);
    background: rgba(26, 95, 168, 0.07);
    padding: 3px 9px;
}

.objects {
    background: var(--bg2);
}

.obj-card {
    background: var(--card);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(26, 95, 168, 0.05);
    transition: transform .3s, box-shadow .3s;
}

.obj-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(26, 95, 168, 0.12);
}

.obj-thumb {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 52px;
    position: relative;
}

.obj-thumb.industrial {
    background: linear-gradient(135deg, #0e3660, #1a5fa8);
}

.obj-thumb.civil {
    background: linear-gradient(135deg, #1a5fa8, #2db551);
}

.obj-thumb.outdoor {
    background: linear-gradient(135deg, #1a7a32, #2db551);
}

.obj-thumb.shield {
    background: linear-gradient(135deg, #154d8c, #239e43);
}

.obj-body {
    padding: 22px 20px;
}

.obj-cat {
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 8px;
}

.obj-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    color: var(--heading);
    margin-bottom: 8px;
    letter-spacing: .3px;
}

.obj-desc {
    font-size: 12px;
    line-height: 1.7;
    color: var(--muted);
}

.safety-band {
    background: var(--dark);
}

.safety-band .section-title {
    color: #fff;
}

.safety-band .section-sub {
    color: rgba(255, 255, 255, 0.45);
}

.safety-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 40px;
}

.safety-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
    transition: border-color .2s, background .2s;
}

.safety-item:hover {
    border-color: var(--green);
    background: rgba(45, 181, 81, 0.05);
}

.safety-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
}

.safety-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.safety-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    background: rgba(255, 255, 255, 0.05);
}

.s-stat {
    padding: 36px 32px;
    background: rgba(15, 31, 51, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background .2s;
}

.s-stat:hover {
    background: rgba(26, 95, 168, 0.12);
}

.s-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 52px;
    line-height: 1;
}

.s-num.blue {
    color: var(--blue);
}

.s-num.green {
    color: var(--green);
}

.s-lbl {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 8px;
    line-height: 1.5;
}


/*-----END ELECTRICAL INSTALLATION PAGE-----*/

/*-----ELECTRICAL PANEL EQUIPMENT PAGE-----*/
.prod-card {
    background: var(--card);
    padding: 0;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
    position: relative;
}

.prod-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 48px rgba(26, 95, 168, 0.14);
    z-index: 2;
}

.prod-thumb {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.prod-card {
    background: var(--card);
    padding: 0;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
    position: relative;
}

.prod-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 48px rgba(26, 95, 168, 0.14);
    z-index: 2;
}

.prod-thumb {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.prod-thumb.t1 {
    background: linear-gradient(135deg, #0e3660, #1a5fa8);
}

.prod-thumb.t2 {
    background: linear-gradient(135deg, #154d8c, #2db551);
}

.prod-thumb.t3 {
    background: linear-gradient(135deg, #0e3660, #239e43);
}

.prod-thumb.t4 {
    background: linear-gradient(135deg, #1a5fa8, #1a7a32);
}

.prod-thumb.t5 {
    background: linear-gradient(135deg, #0a2845, #154d8c);
}

.prod-thumb.t6 {
    background: linear-gradient(135deg, #1a7a32, #2db551);
}

/* circuit dot overlay on thumbs */
.prod-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 18px 18px;
}

.prod-label-top {
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 4px 10px;
    backdrop-filter: blur(6px);
}

.prod-body {
    padding: 32px 28px;
}

.prod-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    color: var(--heading);
    letter-spacing: .5px;
    margin-bottom: 12px;
}

.prod-desc {
    font-size: 13px;
    line-height: 1.85;
    color: var(--muted);
    margin-bottom: 20px;
}

.prod-specs {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.prod-specs li {
    font-size: 12px;
    color: var(--text);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}

.prod-specs li::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
    margin-top: 5.5px;
}

.config-inner {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 48px;
    margin-top: 56px;
    align-items: start;
}

/* step tabs */
.config-steps {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.config-step {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    padding: 28px 28px;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

.config-step.active {
    background: rgba(26, 95, 168, 0.12);
    border-color: rgba(26, 95, 168, 0.35);
}

.config-step:hover:not(.active) {
    background: rgba(255, 255, 255, 0.05);
}

.step-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.step-num-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.4);
    transition: background .2s, border-color .2s, color .2s;
}

.config-step.active .step-num-badge {
    background: var(--blue);
    border-color: var(--blue);
    color: #fff;
}

.step-title {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    transition: color .2s;
}

.config-step.active .step-title {
    color: #fff;
}

.step-content {
    margin-top: 16px;
    padding-left: 48px;
    display: none;
}

.config-step.active .step-content {
    display: block;
}

.step-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.step-option {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    transition: border-color .2s, background .2s;
}

.step-option:hover {
    border-color: rgba(45, 181, 81, 0.3);
    background: rgba(45, 181, 81, 0.05);
}

.step-option input[type="radio"] {
    accent-color: var(--green);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.step-option label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    line-height: 1.4;
}

.step-option input:checked+label {
    color: #fff;
}

.step-option:has(input:checked) {
    border-color: rgba(45, 181, 81, 0.4);
    background: rgba(45, 181, 81, 0.06);
}

/* summary card */
.config-summary {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 32px 28px;
    position: sticky;
    top: 96px;
}

.summary-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    color: #fff;
    letter-spacing: 1px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.summary-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 12px;
}

.summary-row:last-child {
    border-bottom: none;
}

.sum-key {
    color: rgba(255, 255, 255, 0.35);
    line-height: 1.4;
}

.sum-val {
    color: #fff;
    font-weight: 500;
    text-align: right;
    max-width: 55%;
    line-height: 1.4;
}

.sum-val.green {
    color: var(--green);
}

.sum-total {
    margin-top: 20px;
    padding: 16px;
    background: rgba(26, 95, 168, 0.12);
    border: 1px solid rgba(26, 95, 168, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sum-total-label {
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

.sum-total-val {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    color: var(--green);
    line-height: 1;
}

.config-note {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.25);
    line-height: 1.65;
    margin-top: 14px;
}

.features-visual {
    position: relative;
    background: var(--dark);
    padding: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.features-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(26, 95, 168, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(45, 181, 81, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
}

.vis-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--blue), var(--green));
}

.features-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.feat-item {
    display: flex;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid var(--border);
    transition: background .2s;
}

.feat-item:last-child {
    border-bottom: none;
}

.feat-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(26, 95, 168, 0.08), rgba(45, 181, 81, 0.08));
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s, background .2s;
}

.feat-item:hover .feat-icon {
    border-color: var(--green);
    background: rgba(45, 181, 81, 0.08);
}

.feat-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 6px;
}

.feat-desc {
    font-size: 12px;
    line-height: 1.75;
    color: var(--muted);
}

/*-----END ELECTRICAL PANEL EQUIPMENT PAGE-----*/


/*-----ABOUT US PAGE-----*/
.hero.about-us-hero {
    background-color: #0a1828;
    background-image: linear-gradient(135deg, #071020 0%, #0d2040 45%, #071a10 100%);
    background-size: cover;
    background-position: center 40%;
}

.hero.about-us-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;    
    background: radial-gradient(ellipse 50% 60% at 20% 40%, rgba(26, 95, 168, 0.20) 0%, transparent 65%), radial-gradient(ellipse 40% 40% at 80% 30%, rgba(45, 181, 81, 0.10) 0%, transparent 60%);
}

.story-visual {
    position: relative;
}

.story-img-wrap {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0e3660 0%, #1a5fa8 50%, #1a7a32 100%);
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG illustration — power lines & solar panels */
.story-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(26, 95, 168, 0.2), rgba(45, 181, 81, 0.15));
}

.story-badge {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--green));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(26, 95, 168, 0.35);
    z-index: 2;
}

.story-badge-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 40px;
    color: #fff;
    line-height: 1;
}

.story-badge-lbl {
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    line-height: 1.4;
    margin-top: 2px;
}

.timeline-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 64px;
    margin-top: 64px;
    position: relative;
}

.timeline-grid::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, var(--blue), var(--green), rgba(45, 181, 81, 0));
    transform: translateX(-50%);
}

.tl-card {
    padding: 0 40px 48px 0;
    position: relative;
}

.tl-card.right {
    padding: 0 0 48px 40px;
}

.tl-card:last-child,
.tl-card.right:last-child {
    padding-bottom: 0;
}

.tl-card-year {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(48px, 5vw, 72px);
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.12);
    line-height: 1;
    margin-bottom: 12px;
}

.tl-card-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    color: #fff;
    letter-spacing: .5px;
    margin-bottom: 10px;
}

.tl-card-desc {
    font-size: 13px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.4);
}

.tl-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: rgba(45, 181, 81, 0.1);
    color: var(--green);
    border: 1px solid rgba(45, 181, 81, 0.25);
    padding: 4px 12px;
}

.lic-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    padding: 32px 28px;
    transition: border-color .25s, background .25s;
}

.lic-card:hover {
    border-color: rgba(45, 181, 81, 0.3);
    background: rgba(45, 181, 81, 0.04);
}

.lic-icon {
    color: var(--green);
    margin-bottom: 18px;
}

.lic-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    color: #fff;
    letter-spacing: .5px;
    margin-bottom: 8px;
}

.lic-desc {
    font-size: 12px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.4);
}

.lic-num {
    font-size: 11px;
    color: var(--green);
    margin-top: 14px;
    letter-spacing: .5px;
}
/*-----END ABOUT US PAGE-----*/

/*-----CONTACT US PAGE-----*/

.hero.contact-us-hero {
    background-color: #0a1828;
    background-image: linear-gradient(135deg, #0a1828 0%, #0e2a45 50%, #071a14 100%);
    background-size: cover;
    background-position: center;
    height: 56vh;
    min-height: 420px;
    align-items: flex-end;
}

.hero.contact-us-hero::before {
    content: '';
    position: absolute;
    z-index: 1;
    background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(26, 95, 168, 0.15) 0%, transparent 70%);
}

.hero.contact-us-hero .hero-bolt {
    position: absolute;
    right: 8vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    opacity: .06;
    pointer-events: none;
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 0;
    min-height: 560px;
}

.form-side {
    background: var(--card);
    padding: 72px 5vw 72px;
    border-right: 1px solid var(--border);
}

.form-head h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(28px, 3.5vw, 46px);
    color: var(--heading);
    letter-spacing: .5px;
}

.form-head p {
    font-size: 13px;
    line-height: 1.8;
    color: var(--muted);
    margin-top: 12px;
    max-width: 440px;
}

.form-note { font-size: 14px; color: var(--muted); line-height: 1.6; }

.info-side {
    background: var(--dark);
    padding: 72px 48px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.info-block {
    margin-bottom: 40px;
}

.info-block:last-child {
    margin-bottom: 0;
}

.info-label {
    font-size: 9px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.info-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

.info-row:last-child {
    margin-bottom: 0;
}

.info-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green);
    transition: border-color .2s, background .2s;
}

.info-row:hover .info-icon {
    border-color: var(--green);
    background: rgba(45, 181, 81, 0.08);
}

.info-text-label {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
    margin-bottom: 4px;
}

.info-text-val {
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    display: block;
    transition: color .2s;
}

.info-text-val:hover {
    color: var(--green);
}

.info-text-val.small {
    font-size: 13px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.7);
}

/* working hours */
.hours-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hours-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hours-row:last-child {
    border-bottom: none;
}

.hours-day {
    color: rgba(255, 255, 255, 0.45);
}

.hours-time {
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
}

.hours-time.green {
    color: var(--green);
}

/* social links */
.social-row {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.social-btn {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    transition: border-color .2s, color .2s, background .2s;
}

.social-btn:hover {
    border-color: var(--green);
    color: var(--green);
    background: rgba(45, 181, 81, 0.08);
}

/* emergency badge */
.emergency-badge {
    margin-top: 40px;
    padding: 20px 20px;
    background: rgba(45, 181, 81, 0.08);
    border: 1px solid rgba(45, 181, 81, 0.25);
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.emergency-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
    margin-top: 5px;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(45, 181, 81, 0.5)
    }

    50% {
        box-shadow: 0 0 0 6px rgba(45, 181, 81, 0)
    }
}

.emergency-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--green);
    letter-spacing: .5px;
    margin-bottom: 4px;
}

.emergency-desc {
    font-size: 11px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.4);
}
/*-----END CONTACT US PAGE-----*/

/*-----LIGHTING SYSTEMS PAGE-----*/

/* Hero overrides for lighting */
.lighting-hero .hero-photo {
    background-color: #07090f;
    background-image: linear-gradient(150deg, #07090f 0%, #0d1428 45%, #110d04 100%);
}

.lighting-hero .hero-tint {
    background:
        radial-gradient(ellipse 55% 50% at 50% 28%, rgba(245, 197, 24, .12) 0%, transparent 60%),
        radial-gradient(ellipse 35% 40% at 80% 65%, rgba(26, 95, 168, .10) 0%, transparent 55%);
}

.hero-content-center {
    padding-bottom: 56px;
}

/* Breadcrumb */
.hero .breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .35);
    justify-content: center;
    background: transparent;
    padding: 0;
    border-radius: 0;
}

.hero .breadcrumb a {
    color: rgba(255, 255, 255, .35);
    transition: color .2s;
}

.hero .breadcrumb a:hover {
    color: var(--gold);
}

.hero .breadcrumb span {
    color: rgba(255, 255, 255, .15);
}

/* Hero label decorative lines (lighting) */
.lighting-hero .hero-label::before,
.lighting-hero .hero-label::after {
    content: '';
    display: block;
    width: 36px;
    height: 1px;
    background: currentColor;
}

/* Gold accents */
.accent-gold {
    color: var(--gold);
}

.section-label-gold {
    color: var(--gold);
}

.section-label-gold::before {
    background: var(--gold);
}

/* Gold button */
.btn-gold {
    background: var(--gold);
    color: var(--heading);
    clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
    font-weight: 700;
    letter-spacing: 2px;
}

.btn-gold:hover {
    background: var(--gold2);
    color: var(--heading);
    transform: translateY(-1px);
}

/* Savings Band */
.savings-band {
    background: var(--card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 48px 5vw;
}

.savings-band-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.sb-item {
    padding: 20px 32px;
    border-right: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.sb-item:last-child {
    border-right: none;
}

.sb-icon {
    color: var(--gold);
    flex-shrink: 0;
    margin-top: 2px;
}

.sb-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 38px;
    color: var(--heading);
    line-height: 1;
    margin-bottom: 4px;
}

.sb-num span {
    color: var(--gold);
    font-size: 28px;
}

.sb-label {
    font-size: 11px;
    letter-spacing: .5px;
    color: var(--muted);
    line-height: 1.5;
}

/* LED Tech section */
.tech-inner {
    gap: 64px;
    align-items: center;
    margin-top: 56px;
}

.tech-diagram {
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tech-list {
    display: flex;
    flex-direction: column;
}

.tl-item {
    display: flex;
    gap: 22px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.tl-item:last-child {
    border-bottom: none;
}

.tl-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    transition: border-color .25s, background .25s;
}

.tl-item:hover .tl-icon {
    border-color: var(--gold);
    background: rgba(245, 197, 24, .08);
}

.tl-title {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
}

.tl-desc {
    font-size: 12px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .4);
}

/* Comparison table */
.compare-wrap {
    overflow-x: auto;
    margin-top: 56px;
    border: 1px solid var(--border);
}

.compare-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 660px;
}

.compare-wrap thead th {
    background: var(--dark);
    color: #fff;
    padding: 14px 20px;
    text-align: left;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
}

.compare-wrap thead th:first-child {
    background: var(--blue3);
}

.compare-wrap tbody td {
    padding: 13px 20px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.compare-wrap tbody tr:last-child td {
    border-bottom: none;
}

.compare-wrap tbody tr:nth-child(even) td {
    background: var(--bg);
}

.cell-good {
    color: var(--green);
    font-weight: 700;
}

.cell-mid {
    color: var(--gold);
    font-weight: 600;
}

.cell-tag {
    display: inline-block;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 2px 8px;
    border: 1px solid;
    border-radius: 0;
}

.tag-led {
    color: var(--green);
    border-color: rgba(45, 181, 81, .4);
    background: rgba(45, 181, 81, .07);
}

.tag-fl {
    color: var(--gold);
    border-color: rgba(245, 197, 24, .4);
    background: rgba(245, 197, 24, .07);
}

.tag-inc {
    color: var(--muted);
    border-color: var(--border);
}

/* Smart Lighting section */
.smart-inner {
    gap: 0;
    background: var(--border);
    margin-top: 56px;
}

.smart-visual {
    background: var(--dark);
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.smart-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(245, 197, 24, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 95, 168, .05) 1px, transparent 1px);
    background-size: 40px 40px;
}

.smart-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--gold), var(--blue));
}

.smart-content {
    background: var(--card);
    padding: 56px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.smart-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 36px;
}

.sf {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.sf-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
    margin-top: 4px;
}

.sf-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 5px;
}

.sf-desc {
    font-size: 12px;
    line-height: 1.75;
    color: var(--muted);
}

/* Objects grid */
.objects-grid {
    gap: 16px;
    margin-top: 56px;
}

.obj-card {
    background: var(--card);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(26, 95, 168, .05);
    transition: transform .3s, box-shadow .3s;
}

.obj-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(26, 95, 168, .12);
}

.obj-thumb {
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    position: relative;
}

.obj-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 16px 16px;
}

.obj-thumb span {
    position: relative;
    z-index: 1;
}

.obj-thumb.o1 { background: linear-gradient(135deg, #07090f, #1a1a2e); }
.obj-thumb.o2 { background: linear-gradient(135deg, #0a0e1c, #0e3660); }
.obj-thumb.o3 { background: linear-gradient(135deg, #0f0a00, #2a1800); }
.obj-thumb.o4 { background: linear-gradient(135deg, #070f14, #0d2040); }
.obj-thumb.o5 { background: linear-gradient(135deg, #0a1200, #1a3000); }
.obj-thumb.o6 { background: linear-gradient(135deg, #0d0714, #200a30); }
.obj-thumb.o7 { background: linear-gradient(135deg, #07090f, #12100a); }
.obj-thumb.o8 { background: linear-gradient(135deg, #050810, #0e2038); }

.obj-body {
    padding: 20px 18px;
}

.obj-cat {
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 6px;
}

.obj-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 17px;
    color: var(--heading);
    margin-bottom: 6px;
    letter-spacing: .3px;
}

.obj-desc {
    font-size: 11px;
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: 0;
}

/* Type-card thumb backgrounds — Lighting variants */
.type-card-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 18px 18px;
    pointer-events: none;
}

.type-card-thumb.industrial   { background: linear-gradient(135deg, #07090f, #1a1a2e); }
.type-card-thumb.office       { background: linear-gradient(135deg, #0a0e1c, #1c1400); }
.type-card-thumb.street       { background: linear-gradient(135deg, #070f14, #0d2040); }
.type-card-thumb.architectural { background: linear-gradient(135deg, #0a1200, #1a3000); }
.type-card-thumb.emergency    { background: linear-gradient(135deg, #0f0a00, #2a1800); }
.type-card-thumb.smart        { background: linear-gradient(135deg, #0d0714, #200a30); }

/* Type-card bottom accent bar */
.type-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--gold));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s;
}

.type-card:hover::after {
    transform: scaleX(1);
}

/* Project extras */
.project-desc {
    font-size: 13px;
    line-height: 1.8;
    color: var(--muted);
    margin-top: 8px;
}

.pj-mi {
    font-size: 10px;
    letter-spacing: .5px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

/*-----END LIGHTING SYSTEMS PAGE-----*/



/* ==============================================
   BLOG PAGE & SINGLE POST
   ============================================== */

/* --- Blog / Post hero (compact, not 100vh) --- */
.hero.blog-hero,
.hero.post-hero {
    height: auto;
    min-height: 380px;
    background: var(--dark);
}

.blog-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: linear-gradient(155deg, #071018 0%, #0d2040 50%, #071510 100%);
}

.hero.blog-hero .hero-tint,
.hero.post-hero .hero-tint {
    z-index: 1;
}

.hero.blog-hero .hero-content,
.hero.post-hero .hero-content {
    padding-top: 110px;
    padding-bottom: 70px;
}

.post-hero-title {
    font-size: clamp(28px, 5vw, 60px) !important;
}

.post-hero-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    margin-top: 18px;
    animation: fadeUp .8s .3s ease both;
    flex-wrap: wrap;
}

.post-meta-sep {
    color: rgba(255,255,255,.2);
}

/* --- Blog listing --- */
.blog-listing-section {
    background: var(--bg);
    padding-top: 80px;
    padding-bottom: 100px;
}

.blog-gap {
    gap: 32px;
}

/* Blog card */
.blog-card {
    background: var(--card);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(26,95,168,.05);
    transition: transform .3s ease, box-shadow .3s ease;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 44px rgba(26,95,168,.12);
}

.blog-card-thumb {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--dark);
    flex-shrink: 0;
}

.blog-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
    display: block;
}

.blog-card:hover .blog-card-thumb img {
    transform: scale(1.06);
}

.blog-card-thumb-placeholder {
    background: linear-gradient(135deg, #0e2d56, #071018);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.25);
}

.blog-card-cat {
    position: absolute;
    bottom: 14px;
    left: 14px;
    background: linear-gradient(135deg, var(--blue), var(--green));
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 12px;
    clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}

.blog-card-body {
    padding: 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-card-meta {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-card-sep {
    color: var(--border);
}

.blog-card-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: .5px;
    color: var(--heading);
    margin-bottom: 12px;
}

.blog-card-title a {
    color: inherit;
    transition: color .2s;
}

.blog-card-title a:hover {
    color: var(--blue);
}

.blog-card-excerpt {
    font-size: 13px;
    line-height: 1.8;
    color: var(--muted);
    margin-bottom: 20px;
    flex: 1;
}

.blog-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--blue);
    transition: gap .2s, color .2s;
    margin-top: auto;
}

.blog-card-link:hover {
    color: var(--green);
    gap: 10px;
}

.blog-card-link svg {
    flex-shrink: 0;
    transition: transform .2s;
}

.blog-card-link:hover svg {
    transform: translateX(3px);
}

/* Pagination */
.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 64px;
    flex-wrap: wrap;
}

.blog-pagination a,
.blog-pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    background: var(--card);
    transition: border-color .2s, color .2s, background .2s;
    text-decoration: none;
}

.blog-pagination a:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.blog-pagination .current {
    background: linear-gradient(135deg, var(--blue), var(--green));
    border-color: transparent;
    color: #fff;
    font-weight: 700;
}

.blog-pagination .dots {
    border: none;
    background: transparent;
    color: var(--muted);
}

.blog-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
    padding: 80px 0;
    color: var(--muted);
    font-size: 15px;
}

/* ==============================================
   SINGLE POST
   ============================================== */

.post-section {
    background: var(--bg);
    padding-top: 80px;
    padding-bottom: 100px;
}

/* Featured image */
.post-featured-img {
    margin-bottom: 40px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.post-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Post content typography */
.post-content {
    color: var(--text);
    line-height: 1.9;
    font-size: 16px;
}

.post-content > *:first-child {
    margin-top: 0;
}

.post-content h2 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(26px, 4vw, 40px);
    color: var(--heading);
    letter-spacing: .5px;
    margin-top: 48px;
    margin-bottom: 18px;
    line-height: 1;
}

.post-content h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(21px, 3vw, 30px);
    color: var(--heading);
    letter-spacing: .5px;
    margin-top: 36px;
    margin-bottom: 14px;
    line-height: 1;
}

.post-content h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--heading);
    margin-top: 28px;
    margin-bottom: 10px;
}

.post-content p {
    margin-bottom: 20px;
}

.post-content ul,
.post-content ol {
    padding-left: 0;
    margin-bottom: 20px;
}

.post-content ul li,
.post-content ol li {
    list-style: none;
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--text);
}

.post-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--blue), var(--green));
}

.post-content ol {
    counter-reset: ol-counter;
}

.post-content ol li {
    counter-increment: ol-counter;
    padding-left: 28px;
}

.post-content ol li::before {
    content: counter(ol-counter) '.';
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: var(--blue);
    font-size: 13px;
    line-height: 1.8;
}

.post-content a {
    color: var(--blue);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(26,95,168,.3);
}

.post-content a:hover {
    color: var(--green);
    text-decoration-color: var(--green);
}

.post-content img {
    width: 100%;
    height: auto;
    display: block;
    margin: 28px 0;
}

.post-content blockquote {
    border-left: 3px solid var(--green);
    padding: 18px 28px;
    margin: 32px 0;
    background: var(--bg2);
    font-size: 16px;
    font-style: italic;
    color: var(--heading);
}

.post-content blockquote p:last-child {
    margin-bottom: 0;
}

.post-content code {
    background: var(--bg2);
    padding: 2px 7px;
    font-size: 13px;
    border: 1px solid var(--border);
    font-style: normal;
}

.post-content pre {
    background: var(--dark);
    color: rgba(255,255,255,.8);
    padding: 24px;
    overflow-x: auto;
    margin: 24px 0;
    font-size: 13px;
    line-height: 1.7;
}

.post-content pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 28px 0;
    font-size: 14px;
}

.post-content table th {
    background: var(--dark);
    color: #fff;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.post-content table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.post-content table tr:nth-child(even) td {
    background: var(--bg2);
}

/* Post tags */
.post-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.post-tags-label {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    margin-right: 4px;
}

.post-tag {
    padding: 5px 14px;
    border: 1px solid var(--border);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    transition: border-color .2s, color .2s;
}

.post-tag:hover {
    border-color: var(--blue);
    color: var(--blue);
}

/* Post navigation */
.post-nav-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
}

.post-nav-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    background: var(--card);
    border: 1px solid var(--border);
    transition: border-color .2s, box-shadow .2s;
    color: var(--heading);
}

.post-nav-item:hover {
    border-color: var(--blue);
    box-shadow: 0 4px 20px rgba(26,95,168,.1);
    color: var(--heading);
}

.post-nav-next {
    text-align: right;
}

.post-nav-dir {
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--green);
    font-weight: 700;
    display: block;
}

.post-nav-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 17px;
    color: var(--heading);
    line-height: 1.2;
    letter-spacing: .5px;
    display: block;
}

/* Sidebar */
.post-sidebar {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.post-sidebar-widget {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 28px;
}

.sidebar-widget-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    letter-spacing: 1px;
    color: var(--heading);
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--green);
}

/* Sidebar categories */
.sidebar-cats {
    display: flex;
    flex-direction: column;
}

.sidebar-cats li {
    border-bottom: 1px solid var(--bg2);
}

.sidebar-cats li:last-child {
    border-bottom: none;
}

.sidebar-cats li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 13px;
    color: var(--text);
    transition: color .2s;
}

.sidebar-cats li a:hover {
    color: var(--blue);
}

/* Sidebar recent */
.sidebar-recent {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-recent-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    transition: opacity .2s;
    color: var(--heading);
}

.sidebar-recent-item:hover {
    opacity: .75;
    color: var(--heading);
}

.sidebar-recent-thumb {
    width: 72px;
    height: 54px;
    flex-shrink: 0;
    overflow: hidden;
}

.sidebar-recent-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sidebar-recent-info {
    flex: 1;
    min-width: 0;
}

.sidebar-recent-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--heading);
    line-height: 1.4;
    margin-bottom: 5px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.sidebar-recent-date {
    font-size: 10px;
    color: var(--muted);
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* Sidebar CTA widget */
.sidebar-cta-widget {
    text-align: center;
}

.sidebar-cta-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(26,95,168,.1), rgba(45,181,81,.1));
    border: 1px solid rgba(26,95,168,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--blue);
}

.sidebar-cta-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: .5px;
    color: var(--heading);
    margin-bottom: 10px;
}

.sidebar-cta-text {
    font-size: 13px;
    line-height: 1.7;
    color: var(--muted);
    margin-bottom: 20px;
}

/* Post CTA band (below nav, inside main content) */
.post-cta-band {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 40px;
    padding: 28px 32px;
    background: linear-gradient(135deg, rgba(26,95,168,.06), rgba(45,181,81,.06));
    border: 1px solid rgba(26,95,168,.15);
    border-left: 3px solid var(--green);
    flex-wrap: wrap;
}

.post-cta-band-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(26,95,168,.12), rgba(45,181,81,.12));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    flex-shrink: 0;
}

.post-cta-band-text {
    flex: 1;
    min-width: 180px;
}

.post-cta-band-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    letter-spacing: .5px;
    color: var(--heading);
    margin-bottom: 4px;
}

.post-cta-band-text p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
}

/* Related posts */
.related-posts-section {
    padding-top: 80px;
    padding-bottom: 80px;
}



/* ===================================================================
   CABLES INSTALLATION PAGE
   =================================================================== */

   .accent-orange {
    color: var(--orange);
}

.section-label.orange {
    color: var(--orange);
}

.section-label.orange::before {
    background: var(--orange);
}

/* --- Hero --- */
.cables-hero {
    background: linear-gradient(155deg, #060b10 0%, #0c1a28 50%, #080c06 100%);
    background-image: none;
    flex-direction: column;
    justify-content: center;
}

.cables-hero::before {
    animation: none;
    background-color: #060b10;
    background-image: linear-gradient(155deg, #060b10 0%, #0c1a28 50%, #080c06 100%);
}

.cables-hero-tint {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(ellipse 55% 50% at 50% 30%, rgba(26,95,168,.18) 0%, transparent 65%),
        radial-gradient(ellipse 30% 40% at 85% 65%, rgba(232,92,26,.08) 0%, transparent 55%);
    pointer-events: none;
}

.cables-hero-deco {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.cables-hero > .container {
    position: relative;
    z-index: 3;
}

.cables-hero .hero-content {
    max-width: 900px;
}

.cables-hero .hero-label {
    color: var(--orange);
    justify-content: center;
}

.cables-hero .hero-label::before,
.cables-hero .hero-label::after {
    content: '';
    display: block;
    width: 36px;
    height: 1px;
    background: var(--orange);
}

.cables-hero .hero-stat-item .unit {
    color: var(--orange);
}

/* --- Methods grid --- */
.cables-method-card {
    background: var(--card);
    overflow: hidden;
    position: relative;
    transition: transform .3s, box-shadow .3s;
}

.cables-method-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 48px rgba(26,95,168,.12);
    z-index: 2;
}

.cables-method-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--orange), var(--blue));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s;
}

.cables-method-card:hover::after {
    transform: scaleX(1);
}

.cables-method-thumb {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.cables-method-thumb.m1 { background: linear-gradient(135deg, #0a0e14, #1a1500); }
.cables-method-thumb.m2 { background: linear-gradient(135deg, #060b10, #0e2040); }
.cables-method-thumb.m3 { background: linear-gradient(135deg, #0a0c06, #1a2a08); }
.cables-method-thumb.m4 { background: linear-gradient(135deg, #100608, #2a0e0e); }
.cables-method-thumb.m5 { background: linear-gradient(135deg, #080810, #10102a); }
.cables-method-thumb.m6 { background: linear-gradient(135deg, #0a0e12, #101c2a); }

.cables-method-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 18px 18px;
}

.cables-method-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: rgba(255,255,255,.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    padding: 4px 10px;
    backdrop-filter: blur(6px);
}

.cables-method-body {
    padding: 32px 28px;
}

.cables-method-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 23px;
    color: var(--heading);
    letter-spacing: .5px;
    margin-bottom: 10px;
}

.cables-method-desc {
    font-size: 13px;
    line-height: 1.85;
    color: var(--muted);
    margin-bottom: 16px;
}

.cables-method-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cables-method-list li {
    font-size: 12px;
    color: var(--text);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}

.cables-method-list li::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--orange);
    flex-shrink: 0;
    margin-top: 5px;
}

/* --- Depth band --- */
.cables-depth-band {
    background: var(--card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 48px 0;
}

.cables-depth-item {
    padding: 20px 32px;
    border-right: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.cables-depth-item:last-child {
    border-right: none;
}

.cables-depth-icon {
    color: var(--orange);
    flex-shrink: 0;
    margin-top: 2px;
}

.cables-depth-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 40px;
    color: var(--heading);
    line-height: 1;
    margin-bottom: 4px;
}

.cables-depth-num span {
    color: var(--orange);
    font-size: 28px;
}

.cables-depth-lbl {
    font-size: 11px;
    letter-spacing: .5px;
    color: var(--muted);
    line-height: 1.5;
}

/* --- Cable types (dark section) --- */

.cable-type-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    padding: 28px 24px;
    height: 100%;
    transition: border-color .25s, background .25s;
}

.cable-type-card:hover {
    border-color: rgba(232,92,26,.3);
    background: rgba(232,92,26,.05);
}

.cable-type-icon {
    margin-bottom: 18px;
}

.cable-type-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    color: #fff;
    letter-spacing: .5px;
    margin-bottom: 6px;
}

.cable-type-badge {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 10px;
}

.cable-type-desc {
    font-size: 12px;
    line-height: 1.75;
    color: rgba(255,255,255,.38);
}

.cable-type-specs {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cable-spec {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    padding: 3px 8px;
}

/* --- Split section (approach) --- */
.cables-split-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--border);
    margin-top: 56px;
}

.cables-split-visual {
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: var(--dark);
}

.cables-split-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(232,92,26,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,95,168,.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

.cables-split-accent {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--orange), var(--blue));
}

.cables-split-content {
    background: var(--card);
    padding: 56px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cables-feat-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 36px;
}

.cables-feat-item {
    display: flex;
    gap: 20px;
    padding: 22px 0;
    border-bottom: 1px solid var(--border);
}

.cables-feat-item:last-child {
    border-bottom: none;
}

.cables-feat-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(232,92,26,.08), rgba(26,95,168,.08));
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s, background .2s;
}

.cables-feat-item:hover .cables-feat-icon {
    border-color: var(--orange);
    background: rgba(232,92,26,.1);
}

.cables-feat-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 5px;
}

.cables-feat-desc {
    font-size: 12px;
    line-height: 1.75;
    color: var(--muted);
}

/* --- Process (dark) --- */

.cables-proc-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    padding: 40px 32px;
    transition: background .2s, border-color .25s;
}

.cables-proc-card:hover {
    background: rgba(232,92,26,.06);
    border-color: rgba(232,92,26,.2);
}

.cables-proc-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 52px;
    background: linear-gradient(135deg, var(--orange), var(--blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 16px;
}

.cables-proc-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 9px;
}

.cables-proc-desc {
    font-size: 12px;
    line-height: 1.75;
    color: rgba(255,255,255,.38);
}

.cables-proc-tag {
    display: inline-block;
    margin-top: 14px;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--orange);
    border: 1px solid rgba(232,92,26,.3);
    padding: 3px 10px;
}

/* --- Standards band --- */
.cables-standards {
    background: var(--bg2);
    padding: 64px 0;
}

.cables-standards-label {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    margin-bottom: 36px;
}

.cables-std-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.cables-std-card {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 24px 20px;
    box-shadow: 0 2px 10px rgba(26,95,168,.04);
    transition: border-color .2s, box-shadow .2s;
}

.cables-std-card:hover {
    border-color: var(--blue);
    box-shadow: 0 6px 24px rgba(26,95,168,.1);
}

.cables-std-icon {
    color: var(--green);
    margin-bottom: 12px;
}

.cables-std-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    color: var(--heading);
    letter-spacing: .5px;
    margin-bottom: 6px;
}

.cables-std-desc {
    font-size: 12px;
    line-height: 1.7;
    color: var(--muted);
}

/* --- Projects strip --- */


.cables-proj-card.featured {
    grid-row: span 2;
    background: linear-gradient(140deg, #fff7f3, #eaf6ef);
    border-color: rgba(232,92,26,.15);
}

.cables-proj-card::after {
    content: '';
    background: linear-gradient(to bottom, var(--orange), var(--blue));
}


.cables-proj-tag {
    color: var(--orange);
    border: 1px solid rgba(232,92,26,.35);
}

.cables-proj-meta {
    margin-top: 18px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.cables-proj-mi {
    font-size: 10px;
    letter-spacing: .5px;
    color: var(--muted);
}

.cables-proj-big {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 60px;
    color: rgba(232,92,26,.08);
    line-height: 1;
    position: absolute;
    bottom: -6px;
    right: 12px;
}


/* --- Orange CTA band --- */
.cables-cta-band {
    background: linear-gradient(110deg, #140800 0%, var(--orange2) 38%, var(--blue3) 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.cables-cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 80% at 10% 50%, rgba(232,92,26,.15) 0%, transparent 60%),
        radial-gradient(ellipse 40% 60% at 85% 50%, rgba(26,95,168,.15) 0%, transparent 60%);
    pointer-events: none;
}

/* ============================================================
   BACKUP POWER / AVR PAGE
   ============================================================ */

.backup-hero {
    background: linear-gradient(155deg, #040d08 0%, #091a10 50%, #06100d 100%);
    background-image: none;
    flex-direction: column;
    justify-content: center;
}

.backup-hero::before {
    animation: none;
    background-color: #040d08;
    background-image: linear-gradient(155deg, #040d08 0%, #091a10 50%, #06100d 100%);
}

.backup-hero-tint {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(ellipse 55% 50% at 50% 30%, rgba(45,181,81,.14) 0%, transparent 65%),
        radial-gradient(ellipse 30% 40% at 80% 65%, rgba(26,95,168,.1) 0%, transparent 55%);
    pointer-events: none;
}

.backup-hero-deco {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.backup-hero > .container {
    position: relative;
    z-index: 3;
}

.backup-hero .hero-content {
    max-width: 900px;
}

.backup-hero .hero-label {
    color: var(--green);
    justify-content: center;
}

.backup-hero .hero-label::before,
.backup-hero .hero-label::after {
    content: '';
    display: block;
    width: 36px;
    height: 1px;
    background: var(--green);
}

.backup-hero .hero-stat-item .unit {
    color: var(--green);
}

/* Backup power method card thumbs */
.cables-method-thumb.bpm1 { background: linear-gradient(135deg, #040d08, #0e2a12); }
.cables-method-thumb.bpm2 { background: linear-gradient(135deg, #060b10, #0e2040); }
.cables-method-thumb.bpm3 { background: linear-gradient(135deg, #040d08, #0a1e14); }
.cables-method-thumb.bpm4 { background: linear-gradient(135deg, #060b10, #08152a); }
.cables-method-thumb.bpm5 { background: linear-gradient(135deg, #080810, #0a1a14); }
.cables-method-thumb.bpm6 { background: linear-gradient(135deg, #040e08, #0e1e10); }

/* ============================================================
   INDUSTRIAL SOLAR POWER PLANTS PAGE
   ============================================================ */

.ind-solar-hero {
    background: linear-gradient(165deg, #04090e 0%, #0a1520 55%, #050d06 100%);
    background-image: none;
    flex-direction: column;
    justify-content: center;
}

.ind-solar-hero::before {
    animation: none;
    background-color: #04090e;
    background-image: linear-gradient(165deg, #04090e 0%, #0a1520 55%, #050d06 100%);
}

.ind-solar-hero-tint {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(ellipse 60% 45% at 50% 25%, rgba(245,197,24,.1) 0%, transparent 65%),
        radial-gradient(ellipse 40% 50% at 20% 60%, rgba(26,95,168,.1) 0%, transparent 60%),
        radial-gradient(ellipse 30% 40% at 85% 65%, rgba(45,181,81,.07) 0%, transparent 55%);
    pointer-events: none;
}

.ind-solar-hero-deco {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.ind-solar-hero > .container {
    position: relative;
    z-index: 3;
}

.ind-solar-hero .hero-content {
    max-width: 940px;
}

.ind-solar-label {
    color: var(--gold) !important;
    justify-content: center;
}

.ind-solar-label::before,
.ind-solar-label::after {
    content: '';
    display: block;
    width: 36px;
    height: 1px;
    background: var(--gold);
}

.ind-solar-hero .hero-stat-item .unit {
    color: var(--gold);
}

/* accent-yellow utility */
.accent-yellow { color: var(--gold); }

/* Industrial solar method card thumbs */
.cables-method-thumb.isp1 { background: linear-gradient(135deg, #060b10, #101e08); }
.cables-method-thumb.isp2 { background: linear-gradient(135deg, #060b10, #0e1e2a); }
.cables-method-thumb.isp3 { background: linear-gradient(135deg, #100d02, #1e1a04); }
.cables-method-thumb.isp4 { background: linear-gradient(135deg, #060b10, #08162a); }
.cables-method-thumb.isp5 { background: linear-gradient(135deg, #040e06, #0a1e08); }
.cables-method-thumb.isp6 { background: linear-gradient(135deg, #080810, #0c1a12); }

/* Benefit cards — use cable-type-card base, override icon color */
.ind-ben-card .cable-type-icon svg { opacity: .9; }

/* Depth band yellow accent */
.ind-solar-band .cables-depth-num span { color: var(--gold); opacity: .75; }

/* CTA band */
.ind-solar-cta {
    background: linear-gradient(110deg, #090c04 0%, #0f1e0a 38%, #060c18 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.ind-solar-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 80% at 10% 50%, rgba(245,197,24,.08) 0%, transparent 60%),
        radial-gradient(ellipse 40% 60% at 85% 50%, rgba(26,95,168,.12) 0%, transparent 60%);
    pointer-events: none;
}

/* ============================================================
   404 PAGE
   ============================================================ */

.page-404 {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(155deg, #060b10 0%, #0c1828 55%, #080c06 100%);
    padding: 120px 0 80px;
}

.page-404-deco {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.page-404-tint {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(ellipse 60% 55% at 50% 40%, rgba(26,95,168,.14) 0%, transparent 65%),
        radial-gradient(ellipse 35% 45% at 80% 70%, rgba(232,92,26,.08) 0%, transparent 55%);
    pointer-events: none;
}

.page-404 > .container {
    position: relative;
    z-index: 3;
}

.page-404-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 780px;
    margin: 0 auto;
}

/* --- Giant 404 number --- */
.err-number {
    display: flex;
    align-items: center;
    gap: 0;
    line-height: 1;
    margin-bottom: 24px;
    user-select: none;
}

.err-4 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(120px, 18vw, 220px);
    letter-spacing: -4px;
    line-height: 1;
}

.err-4-left {
    color: var(--blue);
    text-shadow: 0 0 60px rgba(26,95,168,.4);
}

.err-4-right {
    color: var(--orange);
    text-shadow: 0 0 60px rgba(232,92,26,.4);
}

.err-0 {
    width: clamp(90px, 14vw, 170px);
    height: clamp(90px, 14vw, 170px);
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.err-bolt {
    width: 100%;
    height: 100%;
}

/* --- Label & heading --- */
.err-label {
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.err-label::before,
.err-label::after {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--orange);
}

.err-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(28px, 4.5vw, 56px);
    color: #fff;
    letter-spacing: 1px;
    line-height: 1.05;
    margin-bottom: 20px;
    text-shadow: 0 2px 30px rgba(0,0,0,.5);
}

.err-desc {
    font-size: 15px;
    line-height: 1.8;
    color: rgba(255,255,255,.5);
    max-width: 520px;
    margin-bottom: 44px;
}

/* --- Quick nav links --- */
.err-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 40px;
}

.err-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,.5);
    text-decoration: none;
    border: 1px solid rgba(255,255,255,.12);
    padding: 8px 16px;
    transition: color .2s, border-color .2s, background .2s;
    white-space: nowrap;
}

.err-nav-link svg {
    flex-shrink: 0;
    opacity: .6;
    transition: opacity .2s;
}

.err-nav-link:hover {
    color: #fff;
    border-color: rgba(255,255,255,.35);
    background: rgba(255,255,255,.06);
}

.err-nav-link:hover svg {
    opacity: 1;
}

/* --- CTA actions --- */
.err-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ============================================================
   PANEL INSTALLATION PAGE
   ============================================================ */

/* --- Hero --- */
.panel-hero {
    background: linear-gradient(155deg, #060b10 0%, #0c1a28 50%, #060c18 100%);
    background-image: none;
    flex-direction: column;
    justify-content: center;
}

.panel-hero::before {
    animation: none;
    background-color: #060b10;
    background-image: linear-gradient(155deg, #060b10 0%, #0c1a28 50%, #060c18 100%);
}

.panel-hero-tint {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(ellipse 55% 50% at 50% 30%, rgba(26,95,168,.2) 0%, transparent 65%),
        radial-gradient(ellipse 30% 40% at 85% 65%, rgba(45,181,81,.07) 0%, transparent 55%);
    pointer-events: none;
}

.panel-hero-deco {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.panel-hero > .container {
    position: relative;
    z-index: 3;
}

.panel-hero .hero-content {
    max-width: 900px;
}

.panel-hero .hero-label {
    color: var(--blue);
    justify-content: center;
}

.panel-hero .hero-label::before,
.panel-hero .hero-label::after {
    content: '';
    display: block;
    width: 36px;
    height: 1px;
    background: var(--blue);
}

.panel-hero .hero-stat-item .unit {
    color: var(--blue);
}

/* --- Panel types grid --- */
.panel-type-card {
    background: var(--card);
    overflow: hidden;
    position: relative;
    transition: transform .3s, box-shadow .3s;
}

.panel-type-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 48px rgba(26,95,168,.12);
    z-index: 2;
}

.panel-type-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--blue), var(--green));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s;
}

.panel-type-card:hover::after {
    transform: scaleX(1);
}

.panel-type-thumb {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.panel-type-thumb.pt1 { background: linear-gradient(135deg, #060e06, #0e2010); }
.panel-type-thumb.pt2 { background: linear-gradient(135deg, #060b10, #0e2040); }
.panel-type-thumb.pt3 { background: linear-gradient(135deg, #08060e, #1a0820); }
.panel-type-thumb.pt4 { background: linear-gradient(135deg, #060b10, #0e1a2a); }
.panel-type-thumb.pt5 { background: linear-gradient(135deg, #060c0a, #0e1e14); }
.panel-type-thumb.pt6 { background: linear-gradient(135deg, #080810, #10102a); }

.panel-type-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 18px 18px;
}

.panel-type-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: rgba(255,255,255,.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    padding: 4px 10px;
    backdrop-filter: blur(6px);
}

.panel-type-body {
    padding: 32px 28px;
}

.panel-type-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    color: var(--heading);
    letter-spacing: .5px;
    margin-bottom: 10px;
}

.panel-type-desc {
    font-size: 13px;
    line-height: 1.85;
    color: var(--muted);
    margin-bottom: 16px;
}

.panel-type-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.panel-type-list li {
    font-size: 12px;
    color: var(--text);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}

.panel-type-list li::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--blue);
    flex-shrink: 0;
    margin-top: 5px;
}

/* --- Stats band --- */
.panel-stats-band {
    background: var(--card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 48px 0;
}

.panel-stat-item {
    padding: 20px 32px;
    border-right: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.panel-stat-item:last-child {
    border-right: none;
}

.panel-stat-icon {
    color: var(--blue);
    flex-shrink: 0;
    margin-top: 2px;
}

.panel-stat-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 40px;
    color: var(--heading);
    line-height: 1;
    margin-bottom: 4px;
}

.panel-stat-num span {
    color: var(--blue);
    font-size: 28px;
}

.panel-stat-lbl {
    font-size: 11px;
    letter-spacing: .5px;
    color: var(--muted);
    line-height: 1.5;
}

/* --- Split section --- */
.panel-split-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--border);
}

.panel-split-visual {
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: var(--dark);
}

.panel-split-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(26,95,168,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,95,168,.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

.panel-split-accent {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--blue), var(--green));
}

.panel-split-content {
    background: var(--card);
    padding: 56px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.panel-feat-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 36px;
}

.panel-feat-item {
    display: flex;
    gap: 20px;
    padding: 22px 0;
    border-bottom: 1px solid var(--border);
}

.panel-feat-item:last-child {
    border-bottom: none;
}

.panel-feat-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(26,95,168,.08), rgba(45,181,81,.08));
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s, background .2s;
    color: var(--blue);
}

.panel-feat-item:hover .panel-feat-icon {
    border-color: var(--blue);
    background: rgba(26,95,168,.1);
}

.panel-feat-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 5px;
}

.panel-feat-desc {
    font-size: 12px;
    line-height: 1.75;
    color: var(--muted);
}

/* --- Process (dark) --- */
.panel-proc-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    padding: 40px 32px;
    transition: background .2s, border-color .25s;
}

.panel-proc-card:hover {
    background: rgba(26,95,168,.06);
    border-color: rgba(26,95,168,.2);
}

.panel-proc-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 52px;
    background: linear-gradient(135deg, var(--blue), var(--green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 16px;
}

.panel-proc-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 9px;
}

.panel-proc-desc {
    font-size: 12px;
    line-height: 1.75;
    color: rgba(255,255,255,.38);
}

.panel-proc-tag {
    display: inline-block;
    margin-top: 14px;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--blue);
    border: 1px solid rgba(26,95,168,.3);
    padding: 3px 10px;
}

/* --- Standards band --- */
.panel-standards {
    background: var(--bg2);
    padding: 64px 0;
}

.panel-standards-label {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
    margin-bottom: 36px;
}

.panel-std-card {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 24px 20px;
    box-shadow: 0 2px 10px rgba(26,95,168,.04);
    transition: border-color .2s, box-shadow .2s;
}

.panel-std-card:hover {
    border-color: var(--blue);
    box-shadow: 0 6px 24px rgba(26,95,168,.1);
}

.panel-std-icon {
    color: var(--blue);
    margin-bottom: 12px;
}

.panel-std-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    color: var(--heading);
    letter-spacing: .5px;
    margin-bottom: 6px;
}

.panel-std-desc {
    font-size: 12px;
    line-height: 1.7;
    color: var(--muted);
}

/* --- Projects strip --- */


.panel-proj-card {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 40px 36px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(26,95,168,.05);
    transition: box-shadow .3s, transform .3s;
}

.panel-proj-card:hover {
    box-shadow: 0 10px 36px rgba(26,95,168,.12);
    transform: translateY(-3px);
}

.panel-proj-card.featured {
    grid-row: span 2;
    background: linear-gradient(140deg, #f3f7ff, #eaf6ef);
    border-color: rgba(26,95,168,.15);
}

.panel-proj-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(to bottom, var(--blue), var(--green));
    opacity: 0;
    transition: opacity .3s;
}

.panel-proj-card:hover::after {
    opacity: 1;
}

.panel-proj-tag {
    display: inline-block;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--blue);
    border: 1px solid rgba(26,95,168,.35);
    padding: 4px 10px;
    margin-bottom: 18px;
}

.panel-proj-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    color: var(--heading);
    margin-bottom: 12px;
    letter-spacing: .3px;
    line-height: 1.05;
}

.panel-proj-card.featured .panel-proj-title {
    font-size: 38px;
}

.panel-proj-desc {
    font-size: 13px;
    line-height: 1.8;
    color: var(--muted);
}

.panel-proj-meta {
    margin-top: 18px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.panel-proj-mi {
    font-size: 10px;
    letter-spacing: .5px;
    color: var(--muted);
}

.panel-proj-big {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 60px;
    color: rgba(26,95,168,.07);
    line-height: 1;
    position: absolute;
    bottom: -6px;
    right: 12px;
}

/* --- Blue CTA band --- */
.panel-cta-band {
    background: linear-gradient(110deg, #050d18 0%, var(--blue2) 38%, #0a2010 100%);
}

.panel-cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 80% at 10% 50%, rgba(26,95,168,.18) 0%, transparent 60%),
        radial-gradient(ellipse 40% 60% at 85% 50%, rgba(45,181,81,.12) 0%, transparent 60%);
    pointer-events: none;
}

/* --- section-label blue variant --- */
.section-label.blue {
    color: var(--blue);
}

.section-label.blue::before {
    background: var(--blue);
}

/* --- btn-green --- */
.btn-green {
    background: var(--green);
    color: #fff;
}

.btn-green:hover {
    opacity: .88;
}

/* =================================================================
   OVERHEAD LINES (ЛЕП) PAGE  lep-*
   ================================================================= */

/* --- Hero --- */
.lep-hero {
    background: linear-gradient(145deg, #061420 0%, #0b1c2e 40%, #071a10 100%);
    background-image: none;
    flex-direction: column;
    justify-content: center;
}

.lep-hero::before {
    animation: none;
    background-color: #061420;
    background-image: linear-gradient(145deg, #061420 0%, #0b1c2e 40%, #071a10 100%);
}

.lep-hero-tint {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        radial-gradient(ellipse 55% 50% at 50% 30%, rgba(45,181,81,.12) 0%, transparent 65%),
        radial-gradient(ellipse 30% 40% at 85% 65%, rgba(26,95,168,.10) 0%, transparent 55%),
        linear-gradient(to bottom, rgba(6,20,32,.55) 0%, rgba(6,20,32,.2) 50%, rgba(6,20,32,.8) 100%);
    pointer-events: none;
}

.lep-hero-deco {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.lep-hero > .container {
    position: relative;
    z-index: 3;
}

.lep-hero .hero-content {
    max-width: 900px;
}

.lep-hero .hero-label {
    color: var(--orange);
    justify-content: center;
}

.lep-hero .hero-label::before,
.lep-hero .hero-label::after {
    content: '';
    display: block;
    width: 36px;
    height: 1px;
    background: var(--orange);
}

.lep-hero .hero-stat-item .unit {
    color: var(--green);
}

/* --- Line types grid --- */
.lep-type-card {
    background: var(--card);
    overflow: hidden;
    position: relative;
    transition: transform .3s, box-shadow .3s;
}

.lep-type-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 48px rgba(45,181,81,.1);
    z-index: 2;
}

.lep-type-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--green), var(--blue));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s;
}

.lep-type-card:hover::after {
    transform: scaleX(1);
}

.lep-type-thumb {
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.lt1 { background: linear-gradient(135deg, #060e09, #0e2012); }
.lt2 { background: linear-gradient(135deg, #060b10, #0e2040); }
.lt3 { background: linear-gradient(135deg, #0a0c06, #1a2010); }
.lt4 { background: linear-gradient(135deg, #060b10, #0e1a2a); }
.lt5 { background: linear-gradient(135deg, #060e09, #0b1c10); }
.lt6 { background: linear-gradient(135deg, #060b10, #10182a); }

.lep-type-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 18px 18px;
}

.lep-type-badge {
    position: absolute;
    top: 14px; left: 14px;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: rgba(255,255,255,.1);
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
    padding: 4px 10px;
    backdrop-filter: blur(6px);
    font-family: 'Bebas Neue', sans-serif;
}

.lep-type-body {
    padding: 28px 24px;
}

.lep-type-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 21px;
    color: var(--heading);
    letter-spacing: .5px;
    margin-bottom: 10px;
}

.lep-type-desc {
    font-size: 13px;
    line-height: 1.85;
    color: var(--muted);
    margin-bottom: 14px;
}

.lep-type-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lep-type-list li {
    font-size: 12px;
    color: var(--text);
    padding-left: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}

.lep-type-list li::before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
    margin-top: 5px;
}

/* --- Depth band --- */
.lep-depth-band {
    background: var(--card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 48px 0;
}

.lep-depth-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.lep-depth-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 32px;
    border-right: 1px solid var(--border);
}

.lep-depth-item:last-child {
    border-right: none;
}

.lep-depth-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(45,181,81,.2);
    background: rgba(45,181,81,.06);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--green);
}

.lep-depth-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 38px;
    color: var(--heading);
    line-height: 1;
    margin-bottom: 4px;
}

.lep-depth-num span {
    font-size: 24px;
    color: var(--green);
}

.lep-depth-lbl {
    font-size: 11px;
    letter-spacing: .5px;
    color: var(--muted);
    line-height: 1.5;
}

/* --- Tower/wire types (dark section) --- */
.lep-towers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.tower-type-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 4px;
    padding: 22px;
    transition: border-color .2s, background .2s;
}

.tower-type-card:hover {
    border-color: rgba(45,181,81,.22);
    background: rgba(45,181,81,.04);
}

.tower-type-icon {
    width: 44px;
    height: 44px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.tower-type-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    letter-spacing: .5px;
    color: #fff;
    margin-bottom: 4px;
}

.tower-type-badge {
    display: inline-block;
    font-size: 9px;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 2px;
    padding: 2px 8px;
    background: rgba(45,181,81,.1);
    border: 1px solid rgba(45,181,81,.2);
    color: rgba(45,181,81,.85);
    margin-bottom: 10px;
}

.tower-type-desc {
    font-size: 12px;
    color: rgba(255,255,255,.45);
    line-height: 1.7;
    margin-bottom: 12px;
}

.tower-type-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tower-spec {
    font-size: 10px;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1px;
    padding: 2px 7px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.4);
}

/* --- Split section (approach) --- */
.lep-split-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--border);
}

.lep-split-visual {
    min-height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: var(--dark);
}

.lep-split-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(45,181,81,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45,181,81,.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

.lep-split-accent {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--green), var(--blue));
}

.lep-split-content {
    background: var(--card);
    padding: 56px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lep-feat-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 32px;
}

.lep-feat-item {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
}

.lep-feat-item:last-child {
    border-bottom: none;
}

.lep-feat-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(45,181,81,.08), rgba(26,95,168,.08));
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green);
    transition: border-color .2s, background .2s;
}

.lep-feat-item:hover .lep-feat-icon {
    border-color: var(--green);
    background: rgba(45,181,81,.1);
}

.lep-feat-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--heading);
    margin-bottom: 5px;
}

.lep-feat-desc {
    font-size: 12px;
    line-height: 1.75;
    color: var(--muted);
}

/* --- Process grid (dark) --- */
.lep-proc-card {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    padding: 36px 32px;
    transition: background .2s, border-color .25s;
}

.lep-proc-card:hover {
    background: rgba(45,181,81,.06);
    border-color: rgba(45,181,81,.2);
}

.lep-proc-num {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 52px;
    background: linear-gradient(135deg, var(--green), var(--blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 16px;
}

.lep-proc-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    color: #fff;
    letter-spacing: .5px;
    margin-bottom: 12px;
}

.lep-proc-desc {
    font-size: 13px;
    color: rgba(255,255,255,.5);
    line-height: 1.75;
    margin-bottom: 16px;
}

.lep-proc-tag {
    display: inline-block;
    font-size: 9px;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 2px;
    padding: 3px 10px;
    border: 1px solid rgba(45,181,81,.25);
    background: rgba(45,181,81,.06);
    color: rgba(45,181,81,.8);
}

/* --- Projects strip --- */
.lep-proj-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.lep-proj-mi {
    font-size: 11px;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 2px;
    color: var(--muted);
}

.lep-proj-big {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 100px;
    letter-spacing: 2px;
    color: rgba(45,181,81,.05);
    line-height: 1;
    position: absolute;
    bottom: 10px;
    right: 20px;
    pointer-events: none;
}

/* --- Standards band --- */
.lep-standards {
    background: var(--dark);
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: 52px 0;
}

.lep-standards-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 11px;
    letter-spacing: 5px;
    color: rgba(255,255,255,.3);
    text-align: center;
    margin-bottom: 32px;
}

.lep-std-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.lep-std-card {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    padding: 24px;
    text-align: center;
    transition: border-color .2s;
}

.lep-std-card:hover {
    border-color: rgba(45,181,81,.2);
}

.lep-std-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(45,181,81,.25);
    background: rgba(45,181,81,.06);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    color: var(--green);
}

.lep-std-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 15px;
    letter-spacing: .5px;
    color: #fff;
    margin-bottom: 8px;
}

.lep-std-desc {
    font-size: 12px;
    color: rgba(255,255,255,.45);
    line-height: 1.7;
}


/*-----MEDIA QUERIES-----*/

@media (max-width: 1280px) {
    .container {
        max-width: 100%;
    }
}

@media (max-width: 1124px) {

    /*---MOBILE MENU---*/
    .header-menu-is-visible {
        overflow: hidden;
        position: fixed;
    }

    .header-menu-is-visible .header::before {
        content: '';
        width: 100%;
        height: 55px;
        display: block;
        background: #fff;
        position: fixed;
        top: 0;
        z-index: 9;
    }

    .navbar-toggle, 
    .navbar-collapse {
    	transition: -webkit-transform 0.3s cubic-bezier(.86,0,.07,1);
    	transition: transform 0.3s cubic-bezier(.86,0,.07,1);
    	transition: transform 0.3s cubic-bezier(.86,0,.07,1),-webkit-transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    }
    
    .navbar-collapse {
        transition: transform .3s ease-in-out;
    }

    .header .header-container > .header-row {
        justify-content: end;
    }

    .header .header-container > .header-row .header-logo {
        flex: 1 0 0;
    }

    .header .header-logo,
    .header .header-right-menu {
        z-index: 9;
    }

    .header .navbar-collapse {
        overflow-y: auto !important;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        -webkit-transform: translateX(105%);
        transform: translateX(105%);
        -webkit-overflow-scrolling: touch;
        width: 100%;
        height: 100vh;
        padding: 0;
        border: 0;
        text-align: left;
        text-transform: none;
        background: #fff;
        display: block;
        z-index: 1;
    }

    .header-menu-is-visible .header {
        backdrop-filter: none;
    }

    .header-menu-is-visible header .navbar-collapse {
        transform: translateX(0);
    }

    
    .header .navbar-toggles {
        display: inline-flex;
        z-index: 20;
        width: 55px;
        height: 55px;
        outline: 0;
        position: relative;
        margin-right: 0;
        padding: 9px 10px;
        background-image: none;
        border: none;
        align-items: center;
        justify-content: center;
        margin-left: 20px;
    }

     .nav-icons {
		position: relative;
		top: 0;
		right: inherit;
	}

	.nav-icons,
	.nav-icons:after, 
	.nav-icons:before{
        width: 45px;
        height: 2px;
        border-radius: 5px;
        background-color: var(--green);
        transition: var(--hover-transition);
        display: block;
        right: 0;
    }

	.nav-icons:before {
		top: -7px;
	}

	.nav-icons:after {
		top: 7px;
	}

	.nav-icons:after, .nav-icons:before {
		content: "";
		position: absolute;
		z-index: -1;
		width: 100%;
	}

    .header-menu-is-visible .nav-icons {
		background-color: transparent!important;
	}

	.header-menu-is-visible .nav-icons:before,
	.header-menu-is-visible .nav-icons:after{
		top: 0;
	}

	.header-menu-is-visible .nav-icons:before {
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}

	.header-menu-is-visible .nav-icons:after {
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}

    .header .header-menu-navbar #header-menu {
        flex-direction: column;
        padding: 90px 12px 40px;
        max-width: 960px;
        margin: 0 auto;
        gap: 15px;
        align-items: flex-start;
    }

    .header .header-menu-navbar > nav {
        height: auto;
    }

    .header .header-social-menu {
        padding: 0 12px 60px 20px;
        max-width: 960px;
        margin: 0 auto;
    }

    .header .header-menu-navbar #header-menu > li {
        padding: 6px 5px;
        flex-wrap: wrap;
    }

    .header .header-menu-navbar #header-menu > li > a {
        font-weight: 600;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header-menu-is-visible .header .header-menu-navbar #header-menu > li > a {
        color: var(--muted);
    }

    .header .header-menu-navbar #header-menu > li > a > .menu-item-btn {
        color: #263238;
        -webkit-text-fill-color: currentColor;
        background: transparent;
        border: 0;
        padding: 12px;
        margin-left: 8px;
        margin-right: -12px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .header .header-menu-navbar #header-menu > li.show  .icon-caret {
        transform: rotate(180deg);
        transition: transform .2s ease;
    }

    .header .header-menu-navbar #header-menu > li > .submenu-wrapper {
        position: static;
        transform: unset;
        padding: 0;
        max-height: 0;
        height: auto;
        display: block;
        overflow: hidden;
        opacity: 1;
        visibility: visible;
        transition: all 1s cubic-bezier(.77, 0, .175, 1);
    }

    .header .header-menu-navbar #header-menu > li.show > .submenu-wrapper  {
        max-height: 800px;
    }

    .header .header-menu-navbar #header-menu > li > .submenu-wrapper .submenu-banner,
    .header .header-menu-navbar #header-menu > li .submenu--level-3 {
        display: none;
    }

    .header .header-menu-navbar #header-menu > li > .submenu-wrapper .submenu--level-2 {
        display: block;
        padding: 25px 20px !important;
    }

    .header .header-menu-navbar #header-menu > li > .submenu-wrapper .submenu--level-2 > li:not(:last-child) {
        margin-bottom: 24px;
    }

    .header .header-menu-navbar #header-menu > li > .submenu-wrapper .submenu--level-2 li a {
        font-weight: 400;
        color: #5d6375;
    }
    
    /*--END MOBILE MENU---*/
}

@media (max-width: 1023px) {
    .sidebar-cta-widget {
        grid-column: span 2;
    }
}


@media (max-width: 991px) {
    .hero .hero-stats .hero-stats-row {
        flex-wrap: wrap;
    }

    .hero-stats-row .hero-stat-item {
        flex: 1 1 45%;
        padding: 20px 20px;
        border-right: none;
    }

    .config-inner { 
        grid-template-columns: 1fr; 
    }

    .config-summary { 
        position: static;
    }

    .why-row,
    .how-inner {
        grid-template-columns:1fr;
    }

    .why-row.reverse{
        direction:ltr;
    }

    .why-visual{
        min-height:200px;
    }

    .tech-inner {
        gap: 40px;
    }

    .tech-diagram {
        display: none;
    }

    .smart-inner {
        grid-template-columns: 1fr;
    }

    .smart-visual {
        min-height: 220px;
    }

    .cables-split-inner {
        grid-template-columns: 1fr;
    }

    .cables-split-visual {
        min-height: 220px;
        order: -1;
    }

    .cables-depth-item:nth-child(2n) {
        border-right: none;
    }

    .cables-depth-item:nth-child(n+3) {
        border-top: 1px solid var(--border);
    }

    .cables-std-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cables-proj-card.featured {
        grid-row: auto;
    }

    .cables-cta-inner {
        flex-direction: column;
    }

    .cables-split-content {
        padding: 40px 28px;
    }

    /* 404 page — tablet */
    .err-number {
        gap: 0;
    }

    /* Panel installation — tablet */
    .panel-split-inner {
        grid-template-columns: 1fr;
    }

    .panel-split-visual {
        min-height: 220px;
        order: -1;
    }

    .panel-split-content {
        padding: 40px 28px;
    }

    .panel-stat-item:nth-child(2n) {
        border-right: none;
    }

    .panel-stat-item:nth-child(n+3) {
        border-top: 1px solid var(--border);
    }

    .panel-proj-card.featured {
        grid-row: auto;
    }

    .panel-cta-inner {
        flex-direction: column;
    }

    .lep-towers-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lep-depth-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .lep-depth-item:nth-child(2n) {
        border-right: none;
    }

    .lep-depth-item:nth-child(n+3) {
        border-top: 1px solid var(--border);
    }

    .lep-std-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lep-split-inner {
        grid-template-columns: 1fr;
    }

    .lep-split-visual {
        min-height: 260px;
        order: -1;
    }

    .lep-split-content {
        padding: 40px 28px;
    }

    .lep-proc-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 766.9px) {
    .page-section {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .calc-form {
        padding: 25px;
    }

    .why-text {
        padding: 35px 30px;
    }

    .steps::before{
        display: none;
    }

    .eco-card {
        padding: 25px;
        flex-direction: column;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }

    .sectors-row{
        border:none;
        flex-direction:column;
        gap:2px;
        background:var(--border)
    }

    .savings-band-row {
        grid-template-columns: 1fr 1fr;
    }

    .sb-item:nth-child(2n) {
        border-right: none;
    }

    .sb-item:nth-child(n+3) {
        border-top: 1px solid var(--border);
    }

    /* 404 page — mobile */
    .err-nav {
        gap: 6px;
    }

    .err-nav-link {
        font-size: 10px;
        padding: 7px 12px;
    }

    .err-actions {
        flex-direction: column;
        align-items: center;
    }

    /* Panel installation — mobile */
    .panel-stat-item {
        padding: 16px 20px;
    }

    .smart-content {
        padding: 36px 28px;
    }

    .objects-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .hero.blog-hero .hero-content,
    .hero.post-hero .hero-content {
        padding-top: 100px;
        padding-bottom: 50px;
    }

    .post-nav-wrap {
        grid-template-columns: 1fr;
    }

    .post-nav-next {
        text-align: left;
    }


    .sidebar-cta-widget {
        grid-column: span 1;
    }

    .cables-depth-item {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .cables-depth-item:last-child {
        border-bottom: none;
    }

    .cables-std-grid {
        grid-template-columns: 1fr;
    }

    .lep-towers-grid {
        grid-template-columns: 1fr;
    }

    .lep-proc-grid {
        grid-template-columns: 1fr;
    }

    .lep-std-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lep-depth-item {
        padding: 14px 20px;
    }

    .footer-top .footer-row {
        gap: 24px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .footer-top .footer-row > .footer-col:first-child {
        grid-column: span 4;
        order: 1;
    }

    .footer-brand p {
        max-width: 480px;
    }
}

@media (max-width: 600px) {
    .post-cta-band {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 24px 20px;
    }

    .project-card {
        padding: 24px 20px;
    }

    .hero .hero-stat-item {
        width: 50%;
        flex: 1 1 50%;
    }
}

@media (max-width: 520px) { 
    .hero .hero-actions {
        flex-direction: column;
        margin-top: 24px;
    }
}

@media (max-width: 460px) {

    .hero .hero-stat-item {
        padding: 10px;
        width: 100%;
        flex: 1 1 100%;
    }

    .hero .hero-stat-item .stat-num {
        font-size: 26px;
    }

    .hero .hero-stat-item .stat-num .unit {
        font-size: 20px;
    }
    
    .hero .breadcrumb {
        display: none;
    }

    .savings-band-row {
        grid-template-columns: 1fr;
    }

    .sb-item {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .sb-item:last-child {
        border-bottom: none;
    }

    .objects-grid {
        grid-template-columns: 1fr !important;
    }


    .footer-top .footer-row {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .footer-top .footer-row > div {
        grid-column: span 4;
    }
}

@media (min-width: 576px) { 
    .sm-grid-2-columns {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm-grid-3-columns {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


@media (min-width: 767px) { 
    .md-grid-2-columns {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md-grid-3-columns {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md-grid-4-columns {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md-gap-64 {
        gap: 64px;
    }
}

@media (min-width: 1024px) { 
    .lg-grid-2-columns {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg-grid-3-columns {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg-grid-4-columns {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    
    .lg-grid-5-columns {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    
    .lg-grid-6-columns {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .lg-gap-64 {
        gap: 64px;
    }
}

@media (min-width: 1124px) {
    .header > .container,
    .header .header-inner,
    .header .header-row,
    .header .header-menu-navbar,
    .header .main-nav,
    .header .menu,
    .header .menu li {
        height: 100%;
    }

    .header .menu li {
        display: flex;
        align-items: center;
    }


    header .menu > li > .sub-menu {
        display: flex;
        gap: 15px;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        min-width: 220px;
        background: rgba(255, 255, 255, 0.95);
        border: 1px solid rgba(255, 255, 255, 0.08);
        padding: 20px 0;
        list-style: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-12px);
        z-index: 999;
        transition: opacity .2s ease, transform .2s ease;
        will-change: opacity, transform;
    }

    header .menu > li > .sub-menu::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translateX(-50%);
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid rgba(255,255,255,0.08);
    }

    header .menu > li:hover > .sub-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

}

@media (min-width: 1400px) { 
    .container {
        max-width: 1520px;
    }
}