.energy-page {
    overflow: hidden;
    color: var(--gmp-dark-deep);
    background: var(--gmp-light);
}

.energy-hero {
    position: relative;
    overflow: hidden;
    padding: 180px 0 100px;
    border-bottom: 1px solid rgba(var(--gmp-primary-rgb), 0.06);
    background:
        radial-gradient(circle at 82% 18%, rgba(var(--gmp-primary-rgb), 0.1), transparent 38%),
        radial-gradient(circle at 10% 84%, rgba(0, 255, 133, 0.06), transparent 30%),
        var(--gmp-warm);
}

.energy-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 16px;
    padding: 4px 16px;
    border-radius: 999px;
    color: var(--gmp-primary);
    background: rgba(var(--gmp-primary-rgb), 0.09);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1.5;
}

.energy-title {
    margin-bottom: 22px;
    color: var(--gmp-dark-deep);
    font-size: clamp(2.35rem, 4vw, 3.65rem);
    line-height: 1.15;
}

.energy-title span {
    color: var(--gmp-primary);
    background: linear-gradient(135deg, var(--gmp-primary), #00b35c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.energy-subtitle {
    max-width: 760px;
    margin-bottom: 30px;
    color: var(--gmp-slate);
    font-size: 1.15rem;
    line-height: 1.6;
}

.energy-certificate-wrap { position: relative; max-width: 430px; margin: 0 auto; }
.energy-certificate-mark { position: absolute; top: -54px; right: -28px; color: rgba(var(--gmp-primary-rgb), 0.07); font-size: 12rem; }

.energy-certificate {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.energy-certificate:hover { transform: translateY(-4px); box-shadow: 0 30px 70px rgba(15, 23, 42, 0.18); }
.energy-content { padding: 96px 0; background: #fff; }
.energy-intro { margin-bottom: 48px; }
.energy-section-label { margin-bottom: 8px; color: var(--gmp-primary); font-size: 0.8rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; }
.energy-intro h2 { margin-bottom: 20px; font-size: clamp(1.85rem, 3vw, 2.55rem); }
.energy-intro p:not(.energy-section-label) { color: #64748b; line-height: 1.9; }

.energy-commitment {
    padding: 24px;
    border-left: 4px solid var(--gmp-primary);
    border-radius: 6px 22px 22px 6px;
    background: #f8fafc;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.04);
}

.energy-commitment h3 { margin-bottom: 24px; font-size: 1.2rem; }
.energy-commitment ul { display: grid; gap: 19px; margin: 0; padding: 0; list-style: none; }
.energy-commitment li { display: flex; align-items: flex-start; gap: 12px; }
.energy-commitment li > i { margin-top: 4px; color: var(--gmp-primary); }
.energy-commitment strong, .energy-commitment span { display: block; }
.energy-commitment strong { margin-bottom: 3px; color: var(--gmp-dark-deep); }
.energy-commitment span { color: #64748b; font-size: 0.92rem; line-height: 1.65; }

.energy-card {
    height: 100%;
    padding: 34px;
    border: 1px solid rgba(15, 23, 42, 0.05);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(15, 23, 42, 0.035);
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.energy-card:hover { transform: translateY(-6px); border-color: rgba(var(--gmp-primary-rgb), 0.18); box-shadow: 0 22px 46px rgba(var(--gmp-primary-rgb), 0.08); }
.energy-icon { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-bottom: 22px; border-radius: 50%; color: var(--gmp-primary); background: rgba(var(--gmp-primary-rgb), 0.08); font-size: 1.45rem; }
.energy-card h3 { margin-bottom: 13px; font-size: 1.18rem; }
.energy-card p { margin: 0; color: #64748b; font-size: 0.94rem; line-height: 1.8; }

@media (max-width: 991.98px) {
    .energy-certificate-wrap { max-width: 500px; }
}

@media (max-width: 575.98px) {
    .energy-hero .row.g-5,
    .energy-intro.g-5 { --bs-gutter-x: 1.5rem; }
    .energy-title { font-size: 2.25rem; }
    .energy-subtitle { font-size: 1.15rem; }
    .energy-certificate-mark { display: none; }
    .energy-commitment { padding: 24px; }
    .energy-card { padding: 35px; }
}