:root {
            --yellow: #F4C400;
            --yellow-2: #FFD84A;
            --black: #101010;
            --black-2: #1B1B1B;
            --text: #2B2B2B;
            --muted: #6B6B6B;
            --line: #E8E8E8;
            --soft: #F7F7F5;
            --white: #FFFFFF;
            --radius: 20px;
            --shadow: 0 20px 60px rgba(0, 0, 0, .09);
            --container: 1200px;
        }

        .container {
            width: min(var(--container), calc(100% - 40px));
            margin: auto
        }

        .section {
            padding: 100px 0
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            text-transform: uppercase;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .14em;
            color: #8B6D00;
            margin-bottom: 16px;
        }

        .eyebrow::before {
            content: "";
            width: 32px;
            height: 3px;
            background: var(--yellow);
            border-radius: 999px;
        }

        h1,
        h2,
        h3,
        h4 {
            font-family: "Montserrat", sans-serif;
            line-height: 1.15;
            color: var(--black);
            letter-spacing: -.025em;
            font-weight: 700;
        }

        h2 {
            font-size: clamp(34px, 4vw, 40px)
        }

        .lead {
            margin-top: 22px;
            color: var(--muted);
            font-size: 17px;
            max-width: 660px;
        }

        /* Hero */
        .hero {
            min-height: 760px;
            display: flex;
            align-items: center;
            position: relative;
            color: white;
            background:
                linear-gradient(90deg, rgba(9, 9, 9, .90) 0%, rgba(9, 9, 9, .78) 42%, rgba(9, 9, 9, .26) 72%, rgba(9, 9, 9, .15) 100%),
                url("https://images.unsplash.com/photo-1508514177221-188b1cf16e9d?auto=format&fit=crop&w=2000&q=88") center/cover no-repeat;
        }

        .hero::after {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 82% 20%, rgba(244, 196, 0, .28), transparent 27%),
                linear-gradient(180deg, transparent 75%, rgba(0, 0, 0, .45));
            pointer-events: none;
        }

        .hero-grid {
            position: relative;
            z-index: 2;
            padding-top: 75px;
            display: grid;
            grid-template-columns: 1.15fr .85fr;
            gap: 70px;
            align-items: end;
        }

        .hero-copy {
            padding: 70px 0 90px
        }

        .hero .eyebrow {
            color: #FFE99A
        }

        .hero h1 {
            color: white;
            font-size: clamp(46px, 6vw, 60px);
            max-width: 850px;
        }

        .hero h1 span {
            color: var(--yellow)
        }

        .hero p {
            color: rgba(255, 255, 255, .78);
            max-width: 680px;
            margin: 24px 0 32px;
            font-size: 18px;
        }

        .actions {
            display: flex;
            gap: 14px;
            flex-wrap: wrap
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 54px;
            padding: 0 24px;
            border-radius: 10px;
            font-weight: 800;
            transition: .25s ease;
        }

        .btn-primary {
            color: var(--black);
            background: var(--yellow);
            box-shadow: 0 10px 30px rgba(244, 196, 0, .28);
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            background: #FFD42B
        }

        .btn-light {
            color: white;
            border: 1px solid rgba(255, 255, 255, .35);
            background: rgba(255, 255, 255, .07);
            backdrop-filter: blur(8px);
        }

        .btn-light:hover {
            background: rgba(255, 255, 255, .14)
        }

        .hero-card {
            margin-bottom: 70px;
            background: rgba(18, 18, 18, .76);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, .13);
            padding: 28px;
            border-radius: 18px;
            box-shadow: 0 25px 60px rgba(0, 0, 0, .25);
        }

        .hero-card strong {
            font-size: 17px
        }

        .hero-card ul {
            list-style: none;
            margin-top: 18px;
            display: grid;
            gap: 14px
        }

        .hero-card li {
            display: flex;
            gap: 12px;
            color: #EAEAEA;
            font-size: 14px
        }

        .check {
            flex: 0 0 23px;
            height: 23px;
            border-radius: 50%;
            background: var(--yellow);
            color: #111;
            display: grid;
            place-items: center;
            font-size: 13px;
            font-weight: 900;
        }

        /* Intro stats */
        .intro-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center
        }

        .intro-media {
            height: 540px;
            border-radius: var(--radius);
            overflow: hidden;
            position: relative;
            box-shadow: var(--shadow);
        }

        .intro-media::after {
            content: "";
            position: absolute;
            inset: auto 0 0;
            height: 42%;
            background: linear-gradient(transparent, rgba(0, 0, 0, .65));
        }

        .floating-note {
            position: absolute;
            z-index: 2;
            left: 24px;
            bottom: 24px;
            background: white;
            padding: 18px 20px;
            border-radius: 14px;
            width: min(330px, calc(100% - 48px));
            box-shadow: 0 16px 40px rgba(0, 0, 0, .16);
        }

        .floating-note b {
            font-family: "Montserrat";
            color: #111
        }

        .floating-note span {
            display: block;
            color: #777;
            font-size: 13px;
            margin-top: 4px
        }

        .stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1px;
            background: #DFDFDF;
            margin-top: 34px;
            border: 1px solid #DFDFDF;
            border-radius: 16px;
            overflow: hidden;
        }

        .stat {
            background: white;
            padding: 24px
        }

        .stat b {
            display: block;
            font: 800 32px "Montserrat";
            color: #111
        }

        .stat span {
            font-size: 13px;
            color: #777
        }

        /* Main fields */
        .fields {
            background: var(--black);
            color: white
        }

        .fields h2 {
            color: white
        }

        .fields .lead {
            color: #B9B9B9
        }

        .field-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 22px;
            margin-top: 48px
        }

        .field-card {
            min-height: 410px;
            position: relative;
            overflow: hidden;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, .12);
        }

        .field-card::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            background: linear-gradient(180deg, transparent 15%, rgba(0, 0, 0, .86) 92%);
        }

        .field-card .bg {
            position: absolute;
            inset: 0;
            transition: .6s
        }

        .field-card:hover .bg {
            transform: scale(1.045)
        }

        .field-content {
            position: absolute;
            z-index: 2;
            left: 30px;
            right: 30px;
            bottom: 30px
        }

        .field-index {
            color: var(--yellow);
            font: 700 13px "Montserrat";
            letter-spacing: .12em
        }

        .field-card h3 {
            font-size: 30px;
            color: white;
            margin: 10px 0 10px
        }

        .field-card p {
            color: #D0D0D0;
            max-width: 520px
        }

        /* Service split */
        .service-split {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 70px;
            align-items: center
        }

        .service-split.reverse .service-media {
            order: 2
        }

        .service-media {
            height: 550px;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            box-shadow: var(--shadow)
        }

        .service-badge {
            position: absolute;
            right: 22px;
            bottom: 22px;
            background: var(--yellow);
            color: #111;
            padding: 16px 18px;
            border-radius: 12px;
            font-weight: 800
        }

        .feature-list {
            display: grid;
            gap: 15px;
            margin: 30px 0
        }

        .feature {
            display: grid;
            grid-template-columns: 40px 1fr;
            gap: 14px;
            align-items: start
        }

        .feature-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: #FFF5C2;
            display: grid;
            place-items: center;
            font-weight: 900;
            color: #7F6500
        }

        .feature h4 {
            font-size: 15px;
            margin-bottom: 3px
        }

        .feature p {
            font-size: 14px;
            color: #777
        }

        /* Why */
        .why {
            background: var(--soft)
        }

        .why-grid {
            display: grid;
            grid-template-columns: .8fr 1.2fr;
            gap: 70px;
            margin-top: 52px
        }

        .why-quote {
            background: var(--yellow);
            border-radius: 20px;
            padding: 38px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 410px
        }

        .why-quote strong {
            font: 800 30px/1.25 "Montserrat";
            color: #111
        }

        .why-quote small {
            font-weight: 700
        }

        .benefits {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 18px
        }

        .benefit {
            background: white;
            padding: 26px;
            border-radius: 16px;
            border: 1px solid #E9E9E5;
        }

        .benefit-number {
            font: 800 12px "Montserrat";
            color: #A98500;
            margin-bottom: 20px
        }

        .benefit h3 {
            font-size: 18px;
            margin-bottom: 9px
        }

        .benefit p {
            font-size: 14px;
            color: #777
        }

        /* Projects */
        .section-heading {
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 30px;
            margin-bottom: 44px
        }

        .projects-grid {
            display: grid;
            grid-template-columns: 1.15fr .85fr .85fr;
            grid-template-rows: 290px 290px;
            gap: 16px;
        }

        .project {
            position: relative;
            overflow: hidden;
            border-radius: 16px;
            background: #ddd;
        }

        .project:first-child {
            grid-row: 1/3
        }

        .project::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(transparent 45%, rgba(0, 0, 0, .82));
        }

        .project img {
            transition: .5s
        }

        .project:hover img {
            transform: scale(1.04)
        }

        .project-info {
            position: absolute;
            z-index: 2;
            left: 24px;
            right: 24px;
            bottom: 22px;
            color: white
        }

        .project-info h3 {
            color: white;
            font-size: 20px;
            margin-bottom: 5px
        }

        .project-info span {
            font-size: 13px;
            color: #DADADA
        }

        /* Process */
        .process {
            background: var(--black);
            color: #fff
        }

        .process h2 {
            color: #fff
        }

        .process-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            margin-top: 52px
        }

        .process-step {
            padding: 30px;
            border-left: 1px solid rgba(255, 255, 255, .12);
            min-height: 260px
        }

        .process-step:first-child {
            border-left: 0
        }

        .process-step b {
            font: 800 42px "Montserrat";
            color: var(--yellow)
        }

        .process-step h3 {
            color: white;
            font-size: 18px;
            margin: 30px 0 10px
        }

        .process-step p {
            font-size: 14px;
            color: #AFAFAF
        }

        /* Capacity */
        .capacity-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 28px;
            margin-top: 48px
        }

        .capacity-card {
            padding: 34px;
            border: 1px solid var(--line);
            border-radius: 18px;
            background: #fff
        }

        .capacity-card.dark {
            background: #111;
            color: white;
            border-color: #111
        }

        .capacity-card.dark h3 {
            color: white
        }

        .capacity-card h3 {
            font-size: 24px;
            margin-bottom: 16px
        }

        .capacity-card ul {
            list-style: none;
            display: grid;
            gap: 13px
        }

        .capacity-card li {
            display: flex;
            gap: 12px;
            color: #696969
        }

        .capacity-card.dark li {
            color: #C8C8C8
        }

        /* Partners */
        .partners {
            padding: 70px 0;
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line)
        }

        .partner-marquee {
            position: relative;
            overflow: hidden;
            margin-top: 28px;
            mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
        }

        .partner-track {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .partner-track {
            width: max-content;
            animation: partnerMarquee 34s linear infinite;
            will-change: transform;
        }

        .partner-logo-card {
            flex: 0 0 200px;
            width: 200px;
            height: 92px;
            padding: 16px 22px;
            border: 1px solid var(--line);
            border-radius: 12px;
            display: grid;
            place-items: center;
            background: #fff;
            transition: border-color .25s ease, box-shadow .25s ease;
        }

        .partner-logo-card:hover {
            border-color: #D0B000;
            box-shadow: 0 8px 24px rgba(17, 17, 17, .07);
        }

        .partner-logo-image {
            display: block;
            width: 100%;
            max-width: 172px;
            height: 70px;
            max-height: 70px;
            object-fit: contain;
            object-position: center;
            transition: filter .25s ease, opacity .25s ease;
        }

        .partner-logo-card:hover .partner-logo-image {
            filter: grayscale(0);
            opacity: 1;
        }

        @keyframes partnerMarquee {
            from { transform: translate3d(-50%, 0, 0); }
            to { transform: translate3d(0, 0, 0); }
        }

        @media (prefers-reduced-motion: reduce) {
            .partner-marquee { overflow-x: auto; mask-image: none; }
            .partner-track { animation: none; transform: none; }
            .partner-logo-card[aria-hidden="true"] { display: none; }
        }

        /* Testimonials */
        .testimonials {
            background: #F5F4EF
        }

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

        .testimonial {
            background: #fff;
            padding: 28px;
            border-radius: 16px;
            border: 1px solid #E6E4DB;
        }

        .stars {
            color: #D3A900;
            letter-spacing: 3px;
            margin-bottom: 18px
        }

        .testimonial p {
            color: #555;
            font-size: 15px
        }

        .person {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 24px
        }

        .avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: #111;
            color: var(--yellow);
            font-weight: 800
        }

        .person b {
            display: block;
            font-size: 14px;
            color: #111
        }

        .person span {
            font-size: 12px;
            color: #888
        }

        /* CTA */
        .cta-wrap {
            padding: 80px 0
        }

        .cta {
            position: relative;
            overflow: hidden;
            background: var(--yellow);
            padding: 56px;
            border-radius: 24px;
            display: grid;
            grid-template-columns: 1.3fr .7fr;
            align-items: center;
            gap: 50px
        }

        .cta::after {
            content: "";
            position: absolute;
            width: 380px;
            height: 380px;
            border: 1px solid rgba(0, 0, 0, .14);
            border-radius: 50%;
            right: -120px;
            top: -170px;
        }

        .cta h2 {
            font-size: clamp(34px, 4vw, 45px)
        }

        .cta p {
            margin-top: 16px;
            color: #514500
        }

        .cta-actions {
            display: flex;
            flex-direction: column;
            gap: 12px;
            align-items: stretch;
            z-index: 2
        }

        .cta .btn {
            background: #111;
            color: white
        }

        .cta .btn.outline {
            background: transparent;
            color: #111;
            border: 1px solid rgba(0, 0, 0, .35)
        }

        /* Reveal */
        .reveal {
            opacity: 0;
            transform: translateY(24px);
            transition: .7s ease
        }

        .reveal.show {
            opacity: 1;
            transform: none
        }

        @media(max-width:980px) {
            .hero-grid,
            .intro-grid,
            .service-split,
            .why-grid,
            .cta {
                grid-template-columns: 1fr
            }

            .hero-card {
                display: none
            }

            .hero-copy {
                padding: 100px 0 75px
            }

            .service-split.reverse .service-media {
                order: 0
            }

            .projects-grid {
                grid-template-columns: 1fr 1fr;
                grid-template-rows: 330px 260px 260px
            }

            .project:first-child {
                grid-column: 1/3;
                grid-row: auto
            }

            .process-grid {
                grid-template-columns: repeat(2, 1fr)
            }

            .testimonial-grid {
                grid-template-columns: 1fr
            }

            .capacity-grid {
                grid-template-columns: 1fr
            }
        }

        @media(max-width:640px) {
            .container {
                width: min(100% - 28px, var(--container))
            }

            .section {
                padding: 74px 0
            }

            .hero {
                min-height: 690px;
                background-position: 62% center
            }

            .hero h1 {
                font-size: 42px
            }

            .hero p {
                font-size: 16px
            }

            .field-grid,
            .benefits,
            .stats {
                grid-template-columns: 1fr
            }

            .field-card {
                min-height: 350px
            }

            .intro-media,
            .service-media {
                height: 420px
            }

            .projects-grid {
                display: grid;
                grid-template-columns: 1fr;
                grid-template-rows: none
            }

            .project,
            .project:first-child {
                grid-column: auto;
                grid-row: auto;
                height: 300px
            }

            .process-grid {
                grid-template-columns: 1fr
            }

            .process-step {
                border-left: 0;
                border-top: 1px solid rgba(255, 255, 255, .12)
            }

            .section-heading {
                align-items: start;
                flex-direction: column
            }

            .cta {
                padding: 34px 24px
            }

        }

        /* ===== HERO V2 — ENERGY TRANSMISSION ===== */
        :root {
            --amber: #FFB800;
            --gold: #FFD84D;
            --orange: #FF8A00;
        }

        .hero {
            min-height: 820px;
            background:
                radial-gradient(circle at 76% 46%, rgba(255, 184, 0, .16), transparent 24%),
                radial-gradient(circle at 25% 30%, rgba(244, 196, 0, .08), transparent 28%),
                linear-gradient(90deg, #090909 0%, #0d0d0d 44%, #131313 100%);
            overflow: hidden;
        }

        .hero::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
            background-size: 42px 42px;
            mask-image: linear-gradient(to right, #000 20%, transparent 90%);
            pointer-events: none;
        }

        .hero::after {
            background:
                linear-gradient(90deg, transparent 0 48%, rgba(255, 184, 0, .035) 70%, transparent 100%),
                radial-gradient(circle at 80% 50%, rgba(255, 196, 0, .10), transparent 34%);
        }

        .hero-grid {
            grid-template-columns: 1.02fr .98fr;
            align-items: center;
            gap: 42px;
            padding-top: 86px;
        }

        .hero-copy {
            padding: 80px 0 90px;
            max-width: 760px;
        }

        .hero .eyebrow {
            color: #FFE9A3;
            background: rgba(255, 196, 0, .08);
            border: 1px solid rgba(255, 216, 77, .18);
            padding: 9px 13px;
            border-radius: 999px;
        }

        .hero .eyebrow::before {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--gold);
            box-shadow: 0 0 18px rgba(255, 216, 77, .9);
        }

        .hero h1 {
            font-size: clamp(48px, 5.7vw, 78px);
            max-width: 810px;
            letter-spacing: -.045em;
            text-wrap: balance;
        }

        .hero h1 .accent {
            background: linear-gradient(90deg, #FFE672 0%, #FFBF00 45%, #FF8A00 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .hero p {
            max-width: 700px;
            color: rgba(255, 255, 255, .74);
            font-size: 17px;
            line-height: 1.78;
        }

        .hero-trust {
            display: flex;
            gap: 22px;
            flex-wrap: wrap;
            margin-top: 28px;
            color: rgba(255, 255, 255, .62);
            font-size: 13px;
            font-weight: 700;
        }

        .hero-trust span {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .hero-trust i {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--yellow);
            box-shadow: 0 0 12px rgba(244, 196, 0, .8);
        }

        /* Energy visual */
        .energy-visual {
            position: relative;
            width: 100%;
            min-height: 520px;
            display: grid;
            place-items: center;
        }

        .energy-orbit {
            position: absolute;
            width: 440px;
            height: 440px;
            border-radius: 50%;
            border: 1px solid rgba(255, 214, 60, .13);
            box-shadow:
                inset 0 0 80px rgba(255, 184, 0, .025),
                0 0 120px rgba(255, 184, 0, .035);
        }

        .energy-orbit::before,
        .energy-orbit::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(255, 214, 60, .10);
        }

        .energy-orbit::before {
            inset: 58px
        }

        .energy-orbit::after {
            inset: 118px
        }

        .energy-core {
            position: relative;
            z-index: 4;
            width: 142px;
            height: 142px;
            border-radius: 32px;
            display: grid;
            place-items: center;
            transform: rotate(45deg);
            background:
                linear-gradient(145deg, rgba(255, 216, 77, .96), rgba(255, 151, 0, .95));
            box-shadow:
                0 0 0 10px rgba(255, 184, 0, .06),
                0 0 50px rgba(255, 184, 0, .36),
                0 22px 80px rgba(0, 0, 0, .35);
        }

        .energy-core svg {
            width: 72px;
            height: 72px;
            transform: rotate(-45deg);
            filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .18));
        }

        .energy-beam {
            position: absolute;
            z-index: 2;
            height: 2px;
            width: 220px;
            background: linear-gradient(90deg, transparent, rgba(255, 212, 50, .25), #FFD84D, transparent);
            transform-origin: right center;
            filter: drop-shadow(0 0 7px rgba(255, 196, 0, .9));
            animation: pulseBeam 2.3s ease-in-out infinite;
        }

        .energy-beam.b1 {
            left: 11%;
            top: 31%;
            transform: rotate(14deg)
        }

        .energy-beam.b2 {
            left: 7%;
            bottom: 29%;
            transform: rotate(-13deg);
            animation-delay: .5s
        }

        .energy-beam.b3 {
            right: 4%;
            top: 30%;
            transform: rotate(166deg);
            animation-delay: 1s
        }

        .energy-beam.b4 {
            right: 2%;
            bottom: 29%;
            transform: rotate(194deg);
            animation-delay: 1.4s
        }

        .energy-node {
            position: absolute;
            z-index: 5;
            min-width: 128px;
            padding: 13px 15px;
            border-radius: 14px;
            background: rgba(22, 22, 22, .76);
            border: 1px solid rgba(255, 255, 255, .10);
            backdrop-filter: blur(14px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
        }

        .energy-node b {
            display: block;
            color: #fff;
            font: 800 13px "Montserrat";
        }

        .energy-node span {
            display: block;
            margin-top: 2px;
            color: #AFAFAF;
            font-size: 11px;
        }

        .energy-node::before {
            content: "";
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--yellow);
            box-shadow: 0 0 16px rgba(255, 196, 0, .95);
        }

        .energy-node.n1 {
            left: 0;
            top: 22%
        }

        .energy-node.n2 {
            left: 2%;
            bottom: 18%
        }

        .energy-node.n3 {
            right: 0;
            top: 20%
        }

        .energy-node.n4 {
            right: 2%;
            bottom: 18%
        }

        .energy-node.n1::before,
        .energy-node.n2::before {
            right: -5px;
            top: 50%
        }

        .energy-node.n3::before,
        .energy-node.n4::before {
            left: -5px;
            top: 50%
        }

        .energy-meter {
            position: absolute;
            z-index: 6;
            bottom: 1%;
            left: 50%;
            transform: translateX(-50%);
            width: 82%;
            padding: 18px 20px;
            border-radius: 16px;
            background: linear-gradient(135deg, rgba(26, 26, 26, .90), rgba(15, 15, 15, .72));
            border: 1px solid rgba(255, 255, 255, .10);
            backdrop-filter: blur(16px);
        }

        .energy-meter-top {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            font-size: 11px;
            color: #9A9A9A;
            text-transform: uppercase;
            letter-spacing: .09em;
            font-weight: 800;
        }

        .energy-meter-top strong {
            color: #FFE46E
        }

        .energy-track {
            height: 5px;
            margin-top: 12px;
            border-radius: 999px;
            background: #272727;
            overflow: hidden;
        }

        .energy-track span {
            display: block;
            height: 100%;
            width: 78%;
            background: linear-gradient(90deg, #FFD84D, #FFB000, #FF8500);
            border-radius: inherit;
            box-shadow: 0 0 18px rgba(255, 176, 0, .8);
            animation: energyFlow 3s ease-in-out infinite alternate;
        }

        .energy-data {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 14px;
        }

        .energy-data div {
            border-right: 1px solid rgba(255, 255, 255, .08)
        }

        .energy-data div:last-child {
            border-right: 0
        }

        .energy-data b {
            display: block;
            color: white;
            font: 800 15px "Montserrat"
        }

        .energy-data span {
            color: #7F7F7F;
            font-size: 10px;
            text-transform: uppercase
        }

        @keyframes pulseBeam {

            0%,
            100% {
                opacity: .38;
                filter: drop-shadow(0 0 3px rgba(255, 196, 0, .5))
            }

            50% {
                opacity: 1;
                filter: drop-shadow(0 0 10px rgba(255, 196, 0, 1))
            }
        }

        @keyframes energyFlow {
            from {
                width: 54%
            }

            to {
                width: 88%
            }
        }

        /* richer section gradients */
        .fields {
            background:
                radial-gradient(circle at 75% 20%, rgba(255, 184, 0, .07), transparent 28%),
                linear-gradient(135deg, #0c0c0c 0%, #151515 52%, #0d0d0d 100%);
        }

        .why {
            background:
                linear-gradient(135deg, #F8F7F1 0%, #FFF9DC 44%, #F6F6F3 100%);
        }

        .process {
            background:
                radial-gradient(circle at 10% 50%, rgba(255, 184, 0, .07), transparent 30%),
                linear-gradient(120deg, #0b0b0b, #151515 58%, #0c0c0c);
        }

        .cta {
            background:
                radial-gradient(circle at 90% 10%, rgba(255, 255, 255, .28), transparent 22%),
                linear-gradient(120deg, #FFD84D 0%, #F4C400 52%, #FF9A00 100%);
            box-shadow: 0 24px 70px rgba(255, 174, 0, .19);
        }

        @media(max-width:980px) {
            .hero-grid {
                grid-template-columns: 1fr
            }

            .hero-copy {
                padding-bottom: 20px
            }

            .energy-visual {
                min-height: 500px;
                margin-bottom: 55px
            }
        }

        @media(max-width:640px) {
            .hero {
                min-height: auto
            }

            .hero-grid {
                padding-top: 96px
            }

            .hero-copy {
                padding-top: 42px
            }

            .hero h1 {
                font-size: 43px
            }

            .energy-visual {
                min-height: 430px;
                transform: scale(.86);
                margin: -18px -22px 34px;
                width: calc(100% + 44px)
            }

            .energy-node {
                min-width: 110px;
                padding: 11px
            }

            .energy-meter {
                width: 94%
            }
        }

        /* ===== HERO V3 — PREMIUM, CLEAN, FIXED RESPONSIVE ===== */
        .hero {
            min-height: 760px;
            background:
                radial-gradient(circle at 74% 48%, rgba(255, 184, 0, .11), transparent 25%),
                radial-gradient(circle at 18% 18%, rgba(255, 208, 66, .05), transparent 22%),
                linear-gradient(105deg, #080808 0%, #101010 55%, #151515 100%);
        }

        .hero-grid {
            grid-template-columns: 1.04fr .96fr;
            gap: 64px;
            align-items: center;
            padding-top: 86px;
        }

        .hero-copy {
            padding: 70px 0 74px;
            max-width: 690px;
        }

        .hero h1 {
            font-size: clamp(46px, 5vw, 60px);
            line-height: 1.04;
            letter-spacing: -.048em;
            max-width: 690px;
        }

        .hero h1 .accent {
            display: block;
            margin-top: 8px;
        }

        .hero p {
            max-width: 620px;
            margin: 22px 0 28px;
            font-size: 16px;
            line-height: 1.72;
        }

        .hero-trust {
            gap: 16px 22px;
            margin-top: 24px;
        }

        .hero-trust span {
            font-size: 12px;
            color: rgba(255, 255, 255, .58);
        }

        /* premium energy visual */
        .energy-visual {
            min-height: 500px;
            max-width: 560px;
            margin-left: auto;
            isolation: isolate;
        }

        .energy-orbit {
            width: 390px;
            height: 390px;
            border-color: rgba(255, 214, 60, .10);
            box-shadow:
                inset 0 0 60px rgba(255, 184, 0, .02),
                0 0 90px rgba(255, 184, 0, .025);
        }

        .energy-orbit::before {
            inset: 54px
        }

        .energy-orbit::after {
            inset: 108px
        }

        .energy-core {
            width: 132px;
            height: 132px;
            border-radius: 29px;
            box-shadow:
                0 0 0 8px rgba(255, 184, 0, .05),
                0 0 42px rgba(255, 184, 0, .28),
                0 22px 70px rgba(0, 0, 0, .35);
        }

        .energy-core svg {
            width: 66px;
            height: 66px;
        }

        /* keep beams inside the component */
        .energy-beam {
            width: 170px;
            opacity: .78;
        }

        .energy-beam.b1 {
            left: 15%;
            top: 32%;
            transform: rotate(15deg)
        }

        .energy-beam.b2 {
            left: 15%;
            bottom: 31%;
            transform: rotate(-15deg)
        }

        .energy-beam.b3 {
            right: 15%;
            top: 32%;
            transform: rotate(165deg)
        }

        .energy-beam.b4 {
            right: 15%;
            bottom: 31%;
            transform: rotate(195deg)
        }

        .energy-node {
            min-width: 118px;
            max-width: 132px;
            padding: 12px 13px;
            border-radius: 13px;
            background: linear-gradient(145deg, rgba(28, 28, 28, .90), rgba(18, 18, 18, .78));
        }

        .energy-node b {
            font-size: 12px
        }

        .energy-node span {
            font-size: 10px
        }

        .energy-node.n1 {
            left: 0;
            top: 22%
        }

        .energy-node.n2 {
            left: 2%;
            bottom: 23%
        }

        .energy-node.n3 {
            right: 0;
            top: 20%
        }

        .energy-node.n4 {
            right: 2%;
            bottom: 23%
        }

        .energy-meter {
            bottom: -8px;
            width: 78%;
            padding: 16px 18px;
            border-radius: 15px;
            box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
        }

        .energy-meter-top {
            font-size: 10px;
        }

        .energy-data {
            margin-top: 12px;
        }

        .energy-data b {
            font-size: 14px
        }

        .energy-data span {
            font-size: 9px
        }

        /* make intro heading shorter / cleaner */
        #about h2 {
            max-width: 620px;
        }

        /* cleaner CTA hierarchy */
        .hero .btn {
            min-height: 52px;
            padding-inline: 22px;
        }

        .hero .btn-primary {
            background: linear-gradient(135deg, #FFE36B 0%, #F4C400 52%, #FFAE00 100%);
            box-shadow: 0 12px 34px rgba(244, 196, 0, .20);
        }

        .hero .btn-light {
            background: rgba(255, 255, 255, .045);
            border-color: rgba(255, 255, 255, .18);
        }

        @media(max-width:1100px) {
            .hero-grid {
                grid-template-columns: 1fr 1fr;
                gap: 34px;
            }

            .energy-visual {
                transform: scale(.92);
                transform-origin: center;
            }
        }

        @media(max-width:980px) {
            .hero-grid {
                grid-template-columns: 1fr;
                gap: 8px;
            }

            .hero-copy {
                padding: 58px 0 28px;
                max-width: 760px;
            }

            .hero h1 {
                max-width: 760px;
            }

            .energy-visual {
                margin: 0 auto 50px;
                width: min(100%, 560px);
                min-height: 470px;
                transform: none;
            }
        }

        @media(max-width:640px) {
            .hero-grid {
                padding-top: 88px
            }

            .hero-copy {
                padding: 34px 0 18px
            }

            .hero h1 {
                font-size: 40px;
                line-height: 1.08;
            }

            .hero p {
                font-size: 15px;
                margin: 18px 0 24px;
            }

            .hero-trust {
                display: grid;
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .energy-visual {
                min-height: 390px;
                width: 100%;
                margin: 0 auto 34px;
                transform: none;
            }

            .energy-orbit {
                width: 300px;
                height: 300px;
            }

            .energy-orbit::before {
                inset: 42px
            }

            .energy-orbit::after {
                inset: 82px
            }

            .energy-core {
                width: 104px;
                height: 104px;
                border-radius: 24px;
            }

            .energy-core svg {
                width: 52px;
                height: 52px;
            }

            .energy-node {
                min-width: 96px;
                max-width: 104px;
                padding: 9px 10px;
            }

            .energy-node b {
                font-size: 10px
            }

            .energy-node span {
                font-size: 8px
            }

            .energy-node.n1 {
                left: 0;
                top: 20%
            }

            .energy-node.n2 {
                left: 0;
                bottom: 24%
            }

            .energy-node.n3 {
                right: 0;
                top: 20%
            }

            .energy-node.n4 {
                right: 0;
                bottom: 24%
            }

            .energy-beam {
                width: 110px;
            }

            .energy-beam.b1 {
                left: 18%;
                top: 31%
            }

            .energy-beam.b2 {
                left: 18%;
                bottom: 32%
            }

            .energy-beam.b3 {
                right: 18%;
                top: 31%
            }

            .energy-beam.b4 {
                right: 18%;
                bottom: 32%
            }

            .energy-meter {
                bottom: 0;
                width: 88%;
                padding: 13px 14px;
            }

            .energy-meter-top {
                font-size: 8px;
            }

            .energy-data b {
                font-size: 12px
            }

            .energy-data span {
                font-size: 8px
            }
        }

        /* ===== HERO V4 — PREMIUM ENERGY + HVAC ANIMATION ===== */

        /* Background motion */
        .hero::after {
            animation: heroGlowShift 10s ease-in-out infinite alternate;
        }

        @keyframes heroGlowShift {
            0% {
                background:
                    linear-gradient(90deg, transparent 0 48%, rgba(255, 184, 0, .035) 70%, transparent 100%),
                    radial-gradient(circle at 80% 50%, rgba(255, 196, 0, .10), transparent 34%);
            }

            100% {
                background:
                    linear-gradient(90deg, transparent 0 45%, rgba(255, 184, 0, .05) 72%, transparent 100%),
                    radial-gradient(circle at 72% 42%, rgba(255, 196, 0, .14), transparent 36%);
            }
        }

        /* Hero title and CTA feel more premium */
        .hero h1 .accent {
            position: relative;
        }

        .hero h1 .accent::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -6px;
            width: 78%;
            height: 10px;
            background: linear-gradient(90deg, rgba(255, 208, 66, .30), rgba(255, 138, 0, .0));
            filter: blur(9px);
            border-radius: 999px;
        }

        .hero .btn-primary {
            position: relative;
            overflow: hidden;
        }

        .hero .btn-primary::after {
            content: "";
            position: absolute;
            inset: -40% auto -40% -30%;
            width: 34%;
            transform: skewX(-22deg);
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .48), transparent);
            animation: btnShine 4.6s linear infinite;
        }

        @keyframes btnShine {
            0% {
                left: -40%
            }

            100% {
                left: 130%
            }
        }

        /* Energy visual ambient */
        .energy-visual::before {
            content: "";
            position: absolute;
            inset: 10% 8%;
            border-radius: 50%;
            background:
                radial-gradient(circle at 50% 50%, rgba(255, 184, 0, .11), transparent 32%),
                radial-gradient(circle at 58% 42%, rgba(255, 138, 0, .08), transparent 36%);
            filter: blur(18px);
            animation: ambientPulse 5.8s ease-in-out infinite;
            z-index: 0;
        }

        @keyframes ambientPulse {

            0%,
            100% {
                transform: scale(.96);
                opacity: .62
            }

            50% {
                transform: scale(1.04);
                opacity: 1
            }
        }

        .energy-orbit {
            animation: orbitRotate 24s linear infinite;
        }

        .energy-orbit::before {
            animation: orbitFloat 9s ease-in-out infinite;
        }

        .energy-orbit::after {
            animation: orbitFloat 9s ease-in-out infinite reverse;
        }

        @keyframes orbitRotate {
            from {
                transform: rotate(0deg)
            }

            to {
                transform: rotate(360deg)
            }
        }

        @keyframes orbitFloat {

            0%,
            100% {
                opacity: .56
            }

            50% {
                opacity: 1
            }
        }

        /* solar core */
        .energy-core {
            animation: coreHover 5.5s ease-in-out infinite, corePulse 2.8s ease-in-out infinite;
        }

        .energy-core::before,
        .energy-core::after {
            content: "";
            position: absolute;
            inset: -10px;
            border-radius: 36px;
            border: 1px solid rgba(255, 210, 80, .22);
            opacity: .55;
            z-index: -1;
        }

        .energy-core::before {
            animation: rippleOut 2.4s ease-out infinite;
        }

        .energy-core::after {
            animation: rippleOut 2.4s ease-out infinite 1.2s;
        }

        @keyframes coreHover {

            0%,
            100% {
                transform: rotate(45deg) translateY(0)
            }

            50% {
                transform: rotate(45deg) translateY(-8px)
            }
        }

        @keyframes corePulse {

            0%,
            100% {
                box-shadow:
                    0 0 0 8px rgba(255, 184, 0, .05),
                    0 0 42px rgba(255, 184, 0, .28),
                    0 22px 70px rgba(0, 0, 0, .35);
            }

            50% {
                box-shadow:
                    0 0 0 12px rgba(255, 184, 0, .08),
                    0 0 60px rgba(255, 184, 0, .42),
                    0 26px 90px rgba(0, 0, 0, .40);
            }
        }

        @keyframes rippleOut {
            0% {
                transform: scale(.92);
                opacity: .65
            }

            100% {
                transform: scale(1.35);
                opacity: 0
            }
        }

        /* energy beams with running current */
        .energy-beam {
            overflow: visible;
        }

        .energy-beam::before {
            content: "";
            position: absolute;
            inset: -1px auto -1px 0;
            width: 100%;
            background: linear-gradient(90deg, transparent 0%, rgba(255, 212, 50, .20) 20%, rgba(255, 236, 146, .95) 48%, rgba(255, 170, 0, .65) 62%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
            animation: beamCurrent 2.15s linear infinite;
        }

        .energy-beam::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #FFE46E;
            transform: translateY(-50%);
            box-shadow: 0 0 16px rgba(255, 212, 50, 1), 0 0 32px rgba(255, 176, 0, .75);
            animation: beamDot 2.15s linear infinite;
        }

        .energy-beam.b2::before,
        .energy-beam.b2::after {
            animation-delay: .45s
        }

        .energy-beam.b3::before,
        .energy-beam.b3::after {
            animation-delay: .9s
        }

        .energy-beam.b4::before,
        .energy-beam.b4::after {
            animation-delay: 1.35s
        }

        @keyframes beamCurrent {
            0% {
                transform: translateX(-24%)
            }

            100% {
                transform: translateX(24%)
            }
        }

        @keyframes beamDot {
            0% {
                left: 3%;
                opacity: 0
            }

            12% {
                opacity: 1
            }

            88% {
                opacity: 1
            }

            100% {
                left: 94%;
                opacity: 0
            }
        }

        /* nodes */
        .energy-node {
            animation: nodeFloat 6.5s ease-in-out infinite;
        }

        .energy-node.n2 {
            animation-delay: .6s
        }

        .energy-node.n3 {
            animation-delay: 1s
        }

        .energy-node.n4 {
            animation-delay: 1.4s
        }

        @keyframes nodeFloat {

            0%,
            100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-7px)
            }
        }

        .energy-node::after {
            content: "";
            position: absolute;
            inset: auto 14px 10px 14px;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 216, 77, .30), transparent);
        }

        /* floating particles */
        .energy-particles {
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
        }

        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: rgba(255, 226, 110, .92);
            box-shadow: 0 0 12px rgba(255, 208, 66, .95);
            animation: particleDrift linear infinite;
        }

        .particle.p1 {
            left: 24%;
            top: 18%;
            animation-duration: 9s
        }

        .particle.p2 {
            left: 35%;
            top: 68%;
            animation-duration: 7.8s;
            animation-delay: -1s
        }

        .particle.p3 {
            left: 69%;
            top: 26%;
            animation-duration: 8.4s;
            animation-delay: -2.2s
        }

        .particle.p4 {
            left: 75%;
            top: 64%;
            animation-duration: 10s;
            animation-delay: -.6s
        }

        .particle.p5 {
            left: 50%;
            top: 16%;
            animation-duration: 7.2s;
            animation-delay: -2s
        }

        .particle.p6 {
            left: 56%;
            top: 74%;
            animation-duration: 8.8s;
            animation-delay: -3.1s
        }

        @keyframes particleDrift {
            0% {
                transform: translate3d(0, 10px, 0) scale(.7);
                opacity: 0
            }

            18% {
                opacity: .9
            }

            80% {
                opacity: .8
            }

            100% {
                transform: translate3d(10px, -18px, 0) scale(1.25);
                opacity: 0
            }
        }

        /* HVAC airflow */
        .hvac-airflow {
            position: absolute;
            right: 6%;
            top: 15%;
            bottom: 15%;
            width: 150px;
            z-index: 1;
            pointer-events: none;
        }

        .air-line {
            position: absolute;
            right: 0;
            height: 2px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(186, 228, 255, .76), rgba(255, 255, 255, 0));
            filter: blur(.2px) drop-shadow(0 0 10px rgba(151, 222, 255, .33));
            animation: airFlow 3.6s ease-in-out infinite;
        }

        .air-line.a1 {
            top: 18%;
            width: 118px;
            animation-delay: 0s
        }

        .air-line.a2 {
            top: 36%;
            width: 142px;
            animation-delay: .55s
        }

        .air-line.a3 {
            top: 54%;
            width: 126px;
            animation-delay: 1.1s
        }

        .air-line.a4 {
            top: 72%;
            width: 110px;
            animation-delay: 1.65s
        }

        .air-line::before {
            content: "";
            position: absolute;
            inset: -10px -4px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(175, 232, 255, 0), rgba(200, 239, 255, .12), rgba(175, 232, 255, 0));
        }

        @keyframes airFlow {
            0% {
                transform: translateX(18px);
                opacity: 0
            }

            18% {
                opacity: .85
            }

            82% {
                opacity: .8
            }

            100% {
                transform: translateX(-18px);
                opacity: 0
            }
        }

        /* live meter */
        .energy-track span {
            position: relative;
            overflow: hidden;
        }

        .energy-track span::after {
            content: "";
            position: absolute;
            inset: 0;
            background: repeating-linear-gradient(90deg,
                    rgba(255, 255, 255, 0) 0 18px,
                    rgba(255, 255, 255, .24) 18px 26px,
                    rgba(255, 255, 255, 0) 26px 42px);
            animation: trackSweep 1.9s linear infinite;
            mix-blend-mode: screen;
        }

        @keyframes trackSweep {
            from {
                transform: translateX(-20px)
            }

            to {
                transform: translateX(40px)
            }
        }

        /* softer motion for mobile */
        @media(max-width:640px) {
            .hvac-airflow {
                right: 1%;
                width: 92px;
                top: 20%;
                bottom: 22%;
            }

            .air-line.a1 {
                width: 72px
            }

            .air-line.a2 {
                width: 84px
            }

            .air-line.a3 {
                width: 76px
            }

            .air-line.a4 {
                width: 68px
            }

            .particle {
                width: 3px;
                height: 3px
            }
        }

        /* ===== HERO V5 — PRECISE NODE ALIGNMENT FIX ===== */

        /* lock a stable canvas for the visual */
        .energy-visual {
            width: 560px;
            max-width: 100%;
            min-height: 500px;
            position: relative;
        }

        /* make all info nodes identical width for perfect alignment */
        .energy-node {
            width: 148px;
            min-width: 148px;
            max-width: 148px;
            padding: 12px 14px;
            box-sizing: border-box;
        }

        /* exact symmetrical node positions */
        .energy-node.n1,
        .energy-node.n2 {
            left: 22px;
        }

        .energy-node.n3,
        .energy-node.n4 {
            right: 22px;
        }

        .energy-node.n1,
        .energy-node.n3 {
            top: 19%;
        }

        .energy-node.n2,
        .energy-node.n4 {
            bottom: 24%;
        }

        /* keep dot anchor centered relative to side */
        .energy-node.n1::before,
        .energy-node.n2::before {
            right: -5px;
            top: 50%;
            transform: translateY(-50%);
        }

        .energy-node.n3::before,
        .energy-node.n4::before {
            left: -5px;
            top: 50%;
            transform: translateY(-50%);
        }

        /* align beams exactly with node rows */
        .energy-beam {
            width: 126px;
        }

        .energy-beam.b1 {
            left: 154px;
            top: 29.6%;
            transform: rotate(14deg);
        }

        .energy-beam.b2 {
            left: 154px;
            bottom: 33.8%;
            transform: rotate(-14deg);
        }

        .energy-beam.b3 {
            right: 154px;
            top: 29.6%;
            transform: rotate(166deg);
        }

        .energy-beam.b4 {
            right: 154px;
            bottom: 33.8%;
            transform: rotate(194deg);
        }

        /* slightly center the orbit/core relative to all four blocks */
        .energy-orbit {
            width: 388px;
            height: 388px;
        }

        .energy-meter {
            width: 430px;
            max-width: calc(100% - 36px);
            left: 50%;
            transform: translateX(-50%);
            bottom: -6px;
        }

        /* responsive fine tuning */
        @media(max-width:980px) {
            .energy-visual {
                width: 560px;
                margin: 0 auto 50px;
            }
        }

        @media(max-width:640px) {
            .energy-visual {
                width: 100%;
                min-height: 390px;
            }

            .energy-node {
                width: 108px;
                min-width: 108px;
                max-width: 108px;
                padding: 9px 10px;
            }

            .energy-node.n1,
            .energy-node.n2 {
                left: 4px;
            }

            .energy-node.n3,
            .energy-node.n4 {
                right: 4px;
            }

            .energy-node.n1,
            .energy-node.n3 {
                top: 19%;
            }

            .energy-node.n2,
            .energy-node.n4 {
                bottom: 25%;
            }

            .energy-beam {
                width: 84px;
            }

            .energy-beam.b1 {
                left: 112px;
                top: 29.5%;
                transform: rotate(14deg);
            }

            .energy-beam.b2 {
                left: 112px;
                bottom: 34%;
                transform: rotate(-14deg);
            }

            .energy-beam.b3 {
                right: 112px;
                top: 29.5%;
                transform: rotate(166deg);
            }

            .energy-beam.b4 {
                right: 112px;
                bottom: 34%;
                transform: rotate(194deg);
            }

            .energy-meter {
                width: 88%;
                bottom: 0;
            }
        }

        /* ===== HERO V6 — GUARANTEED NODE CONNECTORS ===== */

        /* Old beam lines remain as ambient energy only */
        .energy-beam {
            opacity: .34;
        }

        /* Dedicated connector attached to every node */
        .node-connector {
            position: absolute;
            top: 50%;
            width: 132px;
            height: 2px;
            transform: translateY(-50%);
            pointer-events: none;
            z-index: -1;
            background: linear-gradient(90deg,
                    rgba(255, 190, 0, .10) 0%,
                    rgba(255, 205, 40, .82) 42%,
                    rgba(255, 225, 110, .98) 58%,
                    rgba(255, 170, 0, .18) 100%);
            box-shadow: 0 0 9px rgba(255, 190, 0, .38);
            overflow: visible;
        }

        /* left nodes -> line travels toward center */
        .energy-node.n1 .node-connector,
        .energy-node.n2 .node-connector {
            left: calc(100% - 2px);
        }

        /* right nodes -> line travels toward center */
        .energy-node.n3 .node-connector,
        .energy-node.n4 .node-connector {
            right: calc(100% - 2px);
        }

        /* glowing packet moving along connector */
        .node-connector::before {
            content: "";
            position: absolute;
            top: 50%;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #FFE56E;
            box-shadow:
                0 0 12px rgba(255, 215, 55, 1),
                0 0 24px rgba(255, 175, 0, .72);
            transform: translateY(-50%);
            animation: connectorPulse 2.15s linear infinite;
        }

        .energy-node.n1 .node-connector::before,
        .energy-node.n2 .node-connector::before {
            left: 0;
        }

        .energy-node.n3 .node-connector::before,
        .energy-node.n4 .node-connector::before {
            right: 0;
            animation-name: connectorPulseReverse;
        }

        .energy-node.n2 .node-connector::before {
            animation-delay: .45s
        }

        .energy-node.n3 .node-connector::before {
            animation-delay: .85s
        }

        .energy-node.n4 .node-connector::before {
            animation-delay: 1.25s
        }

        @keyframes connectorPulse {
            0% {
                left: 0;
                opacity: 0
            }

            12% {
                opacity: 1
            }

            88% {
                opacity: 1
            }

            100% {
                left: calc(100% - 9px);
                opacity: 0
            }
        }

        @keyframes connectorPulseReverse {
            0% {
                right: 0;
                opacity: 0
            }

            12% {
                opacity: 1
            }

            88% {
                opacity: 1
            }

            100% {
                right: calc(100% - 9px);
                opacity: 0
            }
        }

        /* Make right-side connectors especially visible */
        .energy-node.n3 .node-connector,
        .energy-node.n4 .node-connector {
            background: linear-gradient(90deg,
                    rgba(255, 170, 0, .18) 0%,
                    rgba(255, 225, 110, .98) 42%,
                    rgba(255, 205, 40, .82) 58%,
                    rgba(255, 190, 0, .10) 100%);
        }

        /* Ensure cards sit above their lines */
        .energy-node {
            z-index: 8;
            overflow: visible;
        }

        /* The center sits above the line */
        .energy-core {
            z-index: 9;
        }

        /* Responsive connector length */
        @media(max-width:640px) {
            .node-connector {
                width: 82px;
            }
        }

        /* ===== HERO V7 — CONNECTORS TERMINATE AT ENERGY CORE ===== */

        /* Hide legacy connector visuals to avoid double lines */
        .energy-beam {
            display: none !important;
        }

        .node-connector {
            display: none !important;
        }

        /* Create precise node-to-core connectors */
        .energy-link {
            position: absolute;
            z-index: 5;
            height: 2px;
            transform-origin: 0 50%;
            pointer-events: none;
            background: linear-gradient(90deg,
                    rgba(255, 184, 0, .18) 0%,
                    rgba(255, 205, 45, .82) 36%,
                    rgba(255, 231, 125, .98) 62%,
                    rgba(255, 176, 0, .55) 100%);
            box-shadow:
                0 0 6px rgba(255, 190, 0, .45),
                0 0 15px rgba(255, 170, 0, .18);
            overflow: visible;
        }

        /* Exact desktop geometry:
   visual 560 x 500
   core center ~ 280 / 250
   core edge ~ 66px radius-equivalent
*/
        .energy-link.l1 {
            left: 168px;
            top: 111px;
            width: 154px;
            transform: rotate(25.6deg);
        }

        .energy-link.l2 {
            left: 168px;
            top: 337px;
            width: 154px;
            transform: rotate(-25.6deg);
        }

        .energy-link.l3 {
            left: 392px;
            top: 111px;
            width: 154px;
            transform: rotate(154.4deg);
        }

        .energy-link.l4 {
            left: 392px;
            top: 337px;
            width: 154px;
            transform: rotate(205.6deg);
        }

        /* Mask tiny excess so every line visually terminates on core boundary */
        .energy-core {
            z-index: 10;
        }

        .energy-core::after {
            z-index: -1;
        }

        /* Animated electricity packet */
        .energy-link::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 9px;
            height: 9px;
            margin-top: -4.5px;
            border-radius: 50%;
            background: #FFE56A;
            box-shadow:
                0 0 11px rgba(255, 224, 90, 1),
                0 0 24px rgba(255, 176, 0, .78);
            animation: energyPacketToCore 2.35s linear infinite;
        }

        .energy-link.l2::before {
            animation-delay: .48s
        }

        .energy-link.l3::before {
            animation-delay: .92s
        }

        .energy-link.l4::before {
            animation-delay: 1.38s
        }

        @keyframes energyPacketToCore {
            0% {
                left: 0;
                opacity: 0;
                transform: scale(.75);
            }

            12% {
                opacity: 1;
            }

            82% {
                opacity: 1;
            }

            100% {
                left: calc(100% - 9px);
                opacity: 0;
                transform: scale(1.15);
            }
        }

        /* small energy impact glow where lines meet core */
        .core-impact {
            position: absolute;
            z-index: 8;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #FFE569;
            box-shadow:
                0 0 12px rgba(255, 220, 80, .95),
                0 0 24px rgba(255, 170, 0, .55);
            animation: impactPulse 2.35s ease-in-out infinite;
        }

        .core-impact.i1 {
            left: 228px;
            top: 188px
        }

        .core-impact.i2 {
            left: 228px;
            top: 300px;
            animation-delay: .48s
        }

        .core-impact.i3 {
            right: 228px;
            top: 188px;
            animation-delay: .92s
        }

        .core-impact.i4 {
            right: 228px;
            top: 300px;
            animation-delay: 1.38s
        }

        @keyframes impactPulse {

            0%,
            72%,
            100% {
                opacity: .2;
                transform: scale(.65);
            }

            84% {
                opacity: 1;
                transform: scale(1.22);
            }
        }

        /* Tablet */
        @media(max-width:980px) {
            .energy-link.l1 {
                left: 168px;
                top: 111px;
            }

            .energy-link.l2 {
                left: 168px;
                top: 337px;
            }

            .energy-link.l3 {
                left: 392px;
                top: 111px;
            }

            .energy-link.l4 {
                left: 392px;
                top: 337px;
            }
        }

        /* Mobile geometry recalculated for smaller visual */
        @media(max-width:640px) {
            .energy-link.l1 {
                left: 106px;
                top: 92px;
                width: 100px;
                transform: rotate(28deg);
            }

            .energy-link.l2 {
                left: 106px;
                top: 278px;
                width: 100px;
                transform: rotate(-28deg);
            }

            .energy-link.l3 {
                left: auto;
                right: 106px;
                top: 92px;
                width: 100px;
                transform: rotate(152deg);
                transform-origin: 100% 50%;
            }

            .energy-link.l4 {
                left: auto;
                right: 106px;
                top: 278px;
                width: 100px;
                transform: rotate(208deg);
                transform-origin: 100% 50%;
            }

            .core-impact {
                width: 9px;
                height: 9px;
            }

            .core-impact.i1 {
                left: calc(50% - 54px);
                top: 143px
            }

            .core-impact.i2 {
                left: calc(50% - 54px);
                top: 238px
            }

            .core-impact.i3 {
                right: calc(50% - 54px);
                top: 143px
            }

            .core-impact.i4 {
                right: calc(50% - 54px);
                top: 238px
            }
        }

        /* ===== HERO V8 — PERFECTLY SYMMETRICAL ENERGY LINES ===== */

        /* Remove previous manual coordinates */
        .energy-link {
            position: absolute;
            z-index: 5;
            height: 2px;
            width: 154px;
            pointer-events: none;
            transform-origin: 0 50%;
            background: linear-gradient(90deg,
                    rgba(255, 184, 0, .20) 0%,
                    rgba(255, 207, 51, .84) 38%,
                    rgba(255, 232, 130, .98) 62%,
                    rgba(255, 178, 0, .50) 100%);
            box-shadow:
                0 0 6px rgba(255, 194, 0, .42),
                0 0 14px rgba(255, 170, 0, .17);
        }

        /* 
   Exact symmetric geometry around center:
   visual center: 280 / 250
   target connection points around core:
   TL 235 / 205
   BL 235 / 295
   TR 325 / 205
   BR 325 / 295
*/

        /* Left top */
        .energy-link.l1 {
            left: 166px;
            top: 112px;
            width: 126px;
            transform: rotate(36.5deg);
        }

        /* Left bottom */
        .energy-link.l2 {
            left: 166px;
            top: 338px;
            width: 126px;
            transform: rotate(-36.5deg);
        }

        /* Right top */
        .energy-link.l3 {
            left: 394px;
            top: 112px;
            width: 126px;
            transform-origin: 0 50%;
            transform: rotate(143.5deg);
        }

        /* Right bottom */
        .energy-link.l4 {
            left: 394px;
            top: 338px;
            width: 126px;
            transform-origin: 0 50%;
            transform: rotate(216.5deg);
        }

        /* identical packet speed / size */
        .energy-link::before {
            width: 8px;
            height: 8px;
            margin-top: -4px;
            box-shadow:
                0 0 10px rgba(255, 225, 95, 1),
                0 0 20px rgba(255, 178, 0, .72);
        }

        /* Core impact points perfectly mirrored */
        .core-impact.i1 {
            left: 231px;
            top: 201px;
        }

        .core-impact.i2 {
            left: 231px;
            top: 291px;
        }

        .core-impact.i3 {
            right: 231px;
            top: 201px;
        }

        .core-impact.i4 {
            right: 231px;
            top: 291px;
        }

        /* Make the visual composition slightly cleaner */
        .energy-node.n1,
        .energy-node.n3 {
            top: 18.5%;
        }

        .energy-node.n2,
        .energy-node.n4 {
            bottom: 23.5%;
        }

        /* Mobile recalculated symmetrically */
        @media(max-width:640px) {
            .energy-link {
                width: 84px;
            }

            .energy-link.l1 {
                left: 108px;
                top: 91px;
                width: 88px;
                transform: rotate(35deg);
            }

            .energy-link.l2 {
                left: 108px;
                top: 279px;
                width: 88px;
                transform: rotate(-35deg);
            }

            .energy-link.l3 {
                left: auto;
                right: 108px;
                top: 91px;
                width: 88px;
                transform-origin: 100% 50%;
                transform: rotate(-35deg);
            }

            .energy-link.l4 {
                left: auto;
                right: 108px;
                top: 279px;
                width: 88px;
                transform-origin: 100% 50%;
                transform: rotate(35deg);
            }

            .core-impact.i1 {
                left: calc(50% - 50px);
                top: 141px;
            }

            .core-impact.i2 {
                left: calc(50% - 50px);
                top: 239px;
            }

            .core-impact.i3 {
                right: calc(50% - 50px);
                top: 141px;
            }

            .core-impact.i4 {
                right: calc(50% - 50px);
                top: 239px;
            }
        }

        /* ===== ABOUT PREMIUM V2 ===== */
        .about-premium {
            position: relative;
            background:
                radial-gradient(circle at 90% 10%, rgba(255, 196, 0, .08), transparent 26%),
                linear-gradient(180deg, #ffffff 0%, #fbfaf6 100%);
            overflow: hidden;
        }

        .about-premium::before {
            content: "";
            position: absolute;
            right: -140px;
            top: 80px;
            width: 360px;
            height: 360px;
            border-radius: 50%;
            border: 1px solid rgba(244, 196, 0, .10);
            box-shadow:
                0 0 0 70px rgba(244, 196, 0, .025),
                0 0 0 140px rgba(244, 196, 0, .014);
            pointer-events: none;
        }

        .about-head {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 70px;
            align-items: end;
            margin-bottom: 54px;
        }

        .about-head h2 {
            max-width: 720px;
        }

        .about-intro {
            color: #696969;
            font-size: 16px;
            line-height: 1.8;
            max-width: 560px;
            justify-self: end;
        }

        .about-premium-grid {
            display: grid;
            grid-template-columns: 1.03fr .97fr;
            gap: 56px;
            align-items: stretch;
        }

        .about-visual {
            min-height: 610px;
            position: relative;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 28px 80px rgba(0, 0, 0, .13);
        }

        .about-visual img {
            position: absolute;
            inset: 0;
        }

        .about-overlay {
            position: absolute;
            inset: 0;
            background:
                linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .12) 48%, rgba(0, 0, 0, .68) 100%),
                linear-gradient(90deg, rgba(0, 0, 0, .10), transparent 42%);
        }

        .about-floating-card {
            position: absolute;
            left: 24px;
            bottom: 24px;
            width: min(390px, calc(100% - 48px));
            display: grid;
            grid-template-columns: 52px 1fr;
            gap: 14px;
            align-items: center;
            padding: 18px 20px;
            border: 1px solid rgba(255, 255, 255, .15);
            border-radius: 16px;
            background: linear-gradient(145deg, rgba(20, 20, 20, .84), rgba(12, 12, 12, .72));
            backdrop-filter: blur(14px);
            box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
        }

        .about-floating-icon {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            background: linear-gradient(135deg, #FFE36B, #FFB000);
            font-size: 22px;
            box-shadow: 0 8px 22px rgba(255, 184, 0, .24);
        }

        .about-floating-card b {
            display: block;
            color: #fff;
            font: 800 15px "Montserrat";
        }

        .about-floating-card span {
            display: block;
            margin-top: 4px;
            color: #bdbdbd;
            font-size: 12px;
            line-height: 1.5;
        }

        .about-badge {
            position: absolute;
            right: 22px;
            top: 22px;
            width: 132px;
            padding: 17px;
            border-radius: 16px;
            background: linear-gradient(135deg, #FFE36B 0%, #F4C400 54%, #FF9D00 100%);
            color: #111;
            box-shadow: 0 18px 38px rgba(255, 177, 0, .22);
        }

        .about-badge span {
            display: block;
            font: 800 32px/1 "Montserrat";
        }

        .about-badge small {
            display: block;
            margin-top: 7px;
            font-size: 10px;
            line-height: 1.4;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .04em;
        }

        .about-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 10px 0;
        }

        .about-kicker {
            display: inline-flex;
            align-self: flex-start;
            padding: 8px 11px;
            margin-bottom: 16px;
            border: 1px solid #eee2ad;
            border-radius: 999px;
            background: #fff9dc;
            color: #8a6c00;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .1em;
            text-transform: uppercase;
        }

        .about-content h3 {
            max-width: 570px;
            font-size: clamp(30px, 3.1vw, 43px);
            margin-bottom: 18px;
        }

        .about-content>p {
            max-width: 590px;
            color: #707070;
            font-size: 15px;
            line-height: 1.8;
        }

        .about-points {
            display: grid;
            gap: 0;
            margin-top: 30px;
            border-top: 1px solid #e8e5dd;
        }

        .about-point {
            display: grid;
            grid-template-columns: 54px 1fr;
            gap: 18px;
            align-items: start;
            padding: 20px 0;
            border-bottom: 1px solid #e8e5dd;
        }

        .about-point>span {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: grid;
            place-items: center;
            background: #111;
            color: #f4c400;
            font: 800 11px "Montserrat";
        }

        .about-point b {
            display: block;
            margin-bottom: 4px;
            font: 600 14px "Montserrat";
            color: #111;
        }

        .about-point small {
            display: block;
            max-width: 500px;
            color: #787878;
            font-size: 12px;
            line-height: 1.6;
        }

        .about-stats-premium {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-top: 26px;
        }

        .about-stat {
            padding: 18px 16px;
            border: 1px solid #e9e5d8;
            border-radius: 14px;
            background: rgba(255, 255, 255, .84);
            box-shadow: 0 10px 28px rgba(0, 0, 0, .035);
        }

        .about-stat strong {
            display: block;
            font: 600 24px "Montserrat";
            color: #111;
            letter-spacing: -.035em;
        }

        .about-stat span {
            display: block;
            margin-top: 4px;
            color: #7b7b7b;
            font-size: 10px;
            line-height: 1.4;
            text-transform: uppercase;
            letter-spacing: .035em;
            font-weight: 700;
        }

        @media(max-width:980px) {

            .about-head,
            .about-premium-grid {
                grid-template-columns: 1fr;
                gap: 36px;
            }

            .about-intro {
                justify-self: start;
            }

            .about-visual {
                min-height: 520px;
            }
        }

        @media(max-width:640px) {
            .about-head {
                margin-bottom: 36px;
            }

            .about-visual {
                min-height: 450px;
                border-radius: 19px;
            }

            .about-badge {
                width: 112px;
                padding: 14px;
            }

            .about-badge span {
                font-size: 26px;
            }

            .about-floating-card {
                left: 14px;
                bottom: 14px;
                width: calc(100% - 28px);
                padding: 15px;
            }

            .about-content h3 {
                font-size: 31px;
            }

            .about-stats-premium {
                grid-template-columns: 1fr;
            }
        }

        /* ===== WHY PREMIUM V2 ===== */
        .why-premium {
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(circle at 12% 18%, rgba(244, 196, 0, .11), transparent 25%),
                radial-gradient(circle at 88% 82%, rgba(255, 168, 0, .07), transparent 24%),
                linear-gradient(135deg, #f8f7f2 0%, #ffffff 48%, #f8f6ee 100%);
        }

        .why-premium::before {
            content: "";
            position: absolute;
            left: -180px;
            bottom: -200px;
            width: 480px;
            height: 480px;
            border-radius: 50%;
            border: 1px solid rgba(244, 196, 0, .09);
            box-shadow:
                0 0 0 70px rgba(244, 196, 0, .022),
                0 0 0 140px rgba(244, 196, 0, .012);
            pointer-events: none;
        }

        .why-premium-head {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 70px;
            align-items: end;
            margin-bottom: 54px;
        }

        .why-premium-head h2 {
            max-width: 760px;
        }

        .why-premium-head>p {
            max-width: 560px;
            justify-self: end;
            color: #707070;
            font-size: 16px;
            line-height: 1.8;
        }

        .why-premium-grid {
            display: grid;
            grid-template-columns: .92fr 1.08fr;
            gap: 22px;
            align-items: stretch;
        }

        .why-featured {
            position: relative;
            min-height: 560px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 34px;
            border-radius: 22px;
            overflow: hidden;
            background:
                radial-gradient(circle at 70% 28%, rgba(255, 198, 0, .14), transparent 26%),
                linear-gradient(145deg, #101010 0%, #171717 58%, #0b0b0b 100%);
            color: white;
            box-shadow: 0 28px 70px rgba(0, 0, 0, .16);
        }

        .why-featured::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
            background-size: 38px 38px;
            mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
        }

        .why-featured-top,
        .why-featured-content,
        .why-featured-bottom {
            position: relative;
            z-index: 2;
        }

        .why-featured-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .why-featured-label {
            padding: 8px 11px;
            border: 1px solid rgba(255, 216, 77, .18);
            border-radius: 999px;
            color: #ffe899;
            background: rgba(255, 196, 0, .06);
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .12em;
        }

        .why-featured-index {
            color: rgba(255, 255, 255, .32);
            font: 800 13px "Montserrat";
        }

        .why-energy-symbol {
            width: 76px;
            height: 76px;
            display: grid;
            place-items: center;
            border-radius: 20px;
            margin-bottom: 24px;
            background: linear-gradient(135deg, #FFE36B, #F4C400 58%, #FF9B00);
            color: #111;
            box-shadow:
                0 0 0 8px rgba(255, 196, 0, .045),
                0 18px 42px rgba(255, 174, 0, .18);
        }

        .why-energy-symbol svg {
            width: 46px;
            height: 46px;
        }

        .why-featured-content h3 {
            max-width: 520px;
            color: #fff;
            font-size: clamp(30px, 3.3vw, 45px);
            line-height: 1.15;
        }

        .why-featured-content p {
            max-width: 500px;
            margin-top: 18px;
            color: #bdbdbd;
            font-size: 14px;
            line-height: 1.75;
        }

        .why-featured-bottom {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1px;
            margin-top: 34px;
            border-top: 1px solid rgba(255, 255, 255, .09);
        }

        .why-featured-bottom div {
            padding-top: 20px;
        }

        .why-featured-bottom div+div {
            border-left: 1px solid rgba(255, 255, 255, .09);
            padding-left: 24px;
        }

        .why-featured-bottom strong {
            display: block;
            color: #ffe36b;
            font: 800 26px "Montserrat";
        }

        .why-featured-bottom span {
            display: block;
            margin-top: 4px;
            color: #8f8f8f;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: .04em;
        }

        .why-benefits-premium {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .why-benefit-premium {
            position: relative;
            min-height: 272px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 26px;
            border: 1px solid #e7e4da;
            border-radius: 18px;
            background: rgba(255, 255, 255, .9);
            box-shadow: 0 14px 36px rgba(0, 0, 0, .035);
            transition: .28s ease;
            overflow: hidden;
        }

        .why-benefit-premium::before {
            content: "";
            position: absolute;
            width: 150px;
            height: 150px;
            right: -70px;
            bottom: -80px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(244, 196, 0, .11), transparent 70%);
            opacity: 0;
            transform: scale(.8);
            transition: .35s ease;
        }

        .why-benefit-premium:hover {
            transform: translateY(-5px);
            border-color: #dfc765;
            box-shadow: 0 22px 48px rgba(0, 0, 0, .07);
        }

        .why-benefit-premium:hover::before {
            opacity: 1;
            transform: scale(1);
        }

        .why-benefit-icon {
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            border-radius: 12px;
            background: #111;
            color: #f4c400;
            font: 800 11px "Montserrat";
        }

        .why-benefit-premium h3 {
            max-width: 280px;
            margin-top: 26px;
            font-size: 18px;
            line-height: 1.3;
        }

        .why-benefit-premium p {
            margin-top: 10px;
            color: #777;
            font-size: 13px;
            line-height: 1.65;
        }

        .why-arrow {
            position: absolute;
            right: 20px;
            top: 20px;
            width: 32px;
            height: 32px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            border: 1px solid #e5e1d5;
            color: #8c7400;
            font-size: 15px;
            transition: .25s ease;
        }

        .why-benefit-premium:hover .why-arrow {
            background: #111;
            color: #f4c400;
            border-color: #111;
            transform: translate(2px, -2px);
        }

        @media(max-width:980px) {

            .why-premium-head,
            .why-premium-grid {
                grid-template-columns: 1fr;
                gap: 34px;
            }

            .why-premium-head>p {
                justify-self: start;
            }

            .why-featured {
                min-height: 500px;
            }
        }

        @media(max-width:640px) {
            .why-premium-head {
                margin-bottom: 36px;
            }

            .why-premium-head h2 br {
                display: none;
            }

            .why-featured {
                min-height: 480px;
                padding: 26px;
            }

            .why-featured-content h3 {
                font-size: 31px;
            }

            .why-benefits-premium {
                grid-template-columns: 1fr;
            }

            .why-benefit-premium {
                min-height: 230px;
            }
        }

        /* ===== PROCESS PREMIUM V2 ===== */
        .process-premium {
            position: relative;
            overflow: hidden;
            color: #fff;
            background:
                radial-gradient(circle at 14% 24%, rgba(255, 190, 0, .09), transparent 24%),
                radial-gradient(circle at 84% 74%, rgba(255, 138, 0, .05), transparent 26%),
                linear-gradient(135deg, #090909 0%, #121212 52%, #0b0b0b 100%);
        }

        .process-premium::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
            background-size: 42px 42px;
            mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
            pointer-events: none;
        }

        .process-premium-head {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 70px;
            align-items: end;
            margin-bottom: 68px;
        }

        .process-premium h2 {
            max-width: 760px;
            color: #fff;
        }

        .process-premium-head>p {
            max-width: 560px;
            justify-self: end;
            color: #a7a7a7;
            font-size: 16px;
            line-height: 1.8;
        }

        .process-system {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
        }

        .process-line {
            position: absolute;
            left: 7.5%;
            right: 7.5%;
            top: 38px;
            height: 2px;
            background: rgba(255, 255, 255, .08);
            z-index: 0;
            overflow: hidden;
        }

        .process-line-flow {
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg,
                    transparent 0%,
                    rgba(255, 196, 0, .25) 15%,
                    #ffd84d 46%,
                    #ff9a00 60%,
                    rgba(255, 196, 0, .2) 78%,
                    transparent 100%);
            transform: translateX(-55%);
            animation: processEnergyFlow 4.5s linear infinite;
            box-shadow: 0 0 16px rgba(255, 190, 0, .5);
        }

        @keyframes processEnergyFlow {
            from {
                transform: translateX(-65%)
            }

            to {
                transform: translateX(65%)
            }
        }

        .process-card {
            position: relative;
            z-index: 2;
            padding-top: 0;
        }

        .process-node {
            height: 76px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 18px;
        }

        .process-dot {
            position: absolute;
            top: 29px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #111;
            border: 4px solid #f4c400;
            box-shadow:
                0 0 0 7px rgba(244, 196, 0, .06),
                0 0 22px rgba(244, 196, 0, .34);
            animation: processNodePulse 3.4s ease-in-out infinite;
        }

        .process-card:nth-of-type(2) .process-dot {
            animation-delay: .5s
        }

        .process-card:nth-of-type(3) .process-dot {
            animation-delay: 1s
        }

        .process-card:nth-of-type(4) .process-dot {
            animation-delay: 1.5s
        }

        @keyframes processNodePulse {

            0%,
            100% {
                box-shadow: 0 0 0 7px rgba(244, 196, 0, .05), 0 0 18px rgba(244, 196, 0, .24)
            }

            50% {
                box-shadow: 0 0 0 11px rgba(244, 196, 0, .08), 0 0 30px rgba(244, 196, 0, .46)
            }
        }

        .process-step-no {
            position: absolute;
            top: 0;
            color: rgba(255, 255, 255, .16);
            font: 800 15px "Montserrat";
            letter-spacing: .08em;
        }

        .process-card-inner {
            min-height: 390px;
            display: flex;
            flex-direction: column;
            padding: 28px;
            border: 1px solid rgba(255, 255, 255, .09);
            border-radius: 19px;
            background:
                linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .018));
            backdrop-filter: blur(8px);
            transition: .3s ease;
            box-shadow: 0 18px 46px rgba(0, 0, 0, .12);
        }

        .process-card-inner:hover {
            transform: translateY(-6px);
            border-color: rgba(255, 210, 72, .26);
            background:
                radial-gradient(circle at 80% 10%, rgba(255, 196, 0, .07), transparent 24%),
                linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
            box-shadow: 0 28px 58px rgba(0, 0, 0, .22);
        }

        .process-icon {
            width: 52px;
            height: 52px;
            display: grid;
            place-items: center;
            border-radius: 14px;
            color: #f4c400;
            background: rgba(244, 196, 0, .07);
            border: 1px solid rgba(244, 196, 0, .14);
            margin-bottom: 22px;
        }

        .process-icon svg {
            width: 28px;
            height: 28px;
        }

        .process-label {
            margin-bottom: 10px;
            color: #d7b900;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: .12em;
            font-weight: 800;
        }

        .process-card h3 {
            min-height: 52px;
            color: #fff;
            font-size: 19px;
            line-height: 1.35;
        }

        .process-card p {
            margin-top: 14px;
            color: #9c9c9c;
            font-size: 13px;
            line-height: 1.7;
        }

        .process-meta {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: auto;
            padding-top: 24px;
        }

        .process-meta span {
            padding: 7px 9px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, .08);
            color: #8f8f8f;
            background: rgba(255, 255, 255, .025);
            font-size: 9px;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        .process-footer-note {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: 48px 1fr;
            gap: 16px;
            align-items: center;
            margin-top: 24px;
            padding: 20px 22px;
            border-radius: 16px;
            border: 1px solid rgba(255, 216, 77, .12);
            background:
                linear-gradient(90deg, rgba(244, 196, 0, .065), rgba(255, 255, 255, .022));
        }

        .process-footer-icon {
            width: 48px;
            height: 48px;
            display: grid;
            place-items: center;
            border-radius: 13px;
            background: linear-gradient(135deg, #ffe36b, #f4c400 58%, #ff9d00);
            color: #111;
            font-weight: 900;
            box-shadow: 0 10px 28px rgba(255, 174, 0, .14);
        }

        .process-footer-note strong {
            display: block;
            color: #fff;
            font: 800 14px "Montserrat";
        }

        .process-footer-note span {
            display: block;
            margin-top: 4px;
            color: #939393;
            font-size: 12px;
            line-height: 1.55;
        }

        @media(max-width:1100px) {
            .process-system {
                grid-template-columns: repeat(2, 1fr);
            }

            .process-line {
                display: none;
            }
        }

        @media(max-width:980px) {
            .process-premium-head {
                grid-template-columns: 1fr;
                gap: 28px;
            }

            .process-premium-head>p {
                justify-self: start;
            }
        }

        @media(max-width:640px) {
            .process-premium-head {
                margin-bottom: 42px;
            }

            .process-premium-head h2 br {
                display: none;
            }

            .process-system {
                grid-template-columns: 1fr;
                gap: 14px;
            }

            .process-node {
                height: 48px;
                justify-content: flex-start;
                padding-left: 8px;
                margin-bottom: 8px;
            }

            .process-step-no {
                left: 38px;
                top: 11px;
            }

            .process-dot {
                left: 0;
                top: 15px;
                width: 16px;
                height: 16px;
            }

            .process-card-inner {
                min-height: auto;
                padding: 24px;
            }

            .process-card h3 {
                min-height: auto;
            }

            .process-footer-note {
                grid-template-columns: 42px 1fr;
            }

            .process-footer-icon {
                width: 42px;
                height: 42px;
            }
        }

        /* ===== CAPACITY PREMIUM V2 ===== */
        .capacity-premium {
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(circle at 88% 16%, rgba(244, 196, 0, .09), transparent 24%),
                radial-gradient(circle at 10% 90%, rgba(255, 170, 0, .05), transparent 26%),
                linear-gradient(180deg, #ffffff 0%, #faf8f1 100%);
        }

        .capacity-premium::before {
            content: "";
            position: absolute;
            right: -150px;
            top: 60px;
            width: 420px;
            height: 420px;
            border-radius: 50%;
            border: 1px solid rgba(244, 196, 0, .08);
            box-shadow:
                0 0 0 70px rgba(244, 196, 0, .022),
                0 0 0 140px rgba(244, 196, 0, .012);
            pointer-events: none;
        }

        .capacity-premium-head {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 70px;
            align-items: end;
            margin-bottom: 52px;
        }

        .capacity-premium-head h2 {
            max-width: 760px;
        }

        .capacity-premium-head>p {
            max-width: 560px;
            justify-self: end;
            color: #707070;
            font-size: 16px;
            line-height: 1.8;
        }

        .capacity-premium-grid {
            display: grid;
            grid-template-columns: 1.02fr .98fr;
            gap: 22px;
            align-items: stretch;
        }

        .capacity-showcase {
            position: relative;
            min-height: 640px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 34px;
            border-radius: 24px;
            overflow: hidden;
            color: #fff;
            background:
                radial-gradient(circle at 76% 20%, rgba(255, 196, 0, .14), transparent 24%),
                linear-gradient(145deg, #101010 0%, #171717 58%, #0c0c0c 100%);
            box-shadow: 0 28px 75px rgba(0, 0, 0, .16);
        }

        .capacity-showcase::before {
            content: "";
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
            background-size: 40px 40px;
            mask-image: linear-gradient(180deg, #000 0%, transparent 92%);
        }

        .capacity-showcase>* {
            position: relative;
            z-index: 2;
        }

        .capacity-showcase-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .capacity-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 11px;
            border-radius: 999px;
            border: 1px solid rgba(255, 216, 77, .18);
            background: rgba(255, 196, 0, .06);
            color: #ffe899;
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .12em;
        }

        .capacity-tag.light {
            background: #fff9dc;
            color: #8a6c00;
            border-color: #efe1aa;
        }

        .capacity-code {
            color: rgba(255, 255, 255, .32);
            font: 800 13px "Montserrat";
        }

        .capacity-symbol {
            width: 82px;
            height: 82px;
            display: grid;
            place-items: center;
            border-radius: 22px;
            margin-bottom: 24px;
            color: #111;
            background: linear-gradient(135deg, #FFE36B, #F4C400 58%, #FF9B00);
            box-shadow:
                0 0 0 8px rgba(255, 196, 0, .045),
                0 18px 42px rgba(255, 174, 0, .18);
        }

        .capacity-symbol svg {
            width: 48px;
            height: 48px;
        }

        .capacity-showcase h3 {
            max-width: 560px;
            color: #fff;
            font-size: clamp(30px, 3.1vw, 40px);
            line-height: 1.16;
        }

        .capacity-showcase p {
            max-width: 520px;
            margin-top: 18px;
            color: #b9b9b9;
            font-size: 14px;
            line-height: 1.75;
        }

        .capacity-capabilities {
            display: grid;
            gap: 0;
            margin-top: 32px;
            border-top: 1px solid rgba(255, 255, 255, .08);
        }

        .capacity-item {
            display: grid;
            grid-template-columns: 54px 1fr;
            gap: 16px;
            align-items: start;
            padding: 18px 0;
            border-bottom: 1px solid rgba(255, 255, 255, .08);
        }

        .capacity-item>span {
            width: 40px;
            height: 40px;
            display: grid;
            place-items: center;
            border-radius: 12px;
            background: rgba(255, 255, 255, .06);
            color: #f4c400;
            font: 800 11px "Montserrat";
        }

        .capacity-item b {
            display: block;
            color: #fff;
            font: 800 14px "Montserrat";
        }

        .capacity-item small {
            display: block;
            margin-top: 4px;
            color: #9e9e9e;
            font-size: 12px;
            line-height: 1.6;
        }

        .capacity-metrics {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1px;
            margin-top: 28px;
            border-top: 1px solid rgba(255, 255, 255, .08);
            padding-top: 20px;
        }

        .capacity-metrics div {
            padding-right: 14px;
        }

        .capacity-metrics div+div {
            border-left: 1px solid rgba(255, 255, 255, .08);
            padding-left: 18px;
        }

        .capacity-metrics strong {
            display: block;
            color: #ffe36b;
            font: 800 26px "Montserrat";
        }

        .capacity-metrics span {
            display: block;
            margin-top: 4px;
            color: #8f8f8f;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: .04em;
        }

        .capacity-commitments {
            min-height: 640px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 34px;
            border: 1px solid #e8e4d8;
            border-radius: 24px;
            background: rgba(255, 255, 255, .84);
            box-shadow: 0 18px 46px rgba(0, 0, 0, .04);
        }

        .capacity-commitments-head h3 {
            max-width: 520px;
            margin-top: 16px;
            font-size: clamp(28px, 2.8vw, 40px);
            line-height: 1.18;
        }

        .capacity-commitments-head p {
            max-width: 520px;
            margin-top: 14px;
            color: #777;
            font-size: 14px;
            line-height: 1.75;
        }

        .commitment-cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-top: 28px;
        }

        .commitment-card {
            min-height: 176px;
            display: grid;
            grid-template-columns: 42px 1fr;
            gap: 14px;
            align-items: start;
            padding: 22px;
            border: 1px solid #ece7d8;
            border-radius: 18px;
            background: linear-gradient(180deg, #fff 0%, #fbfaf6 100%);
            box-shadow: 0 10px 28px rgba(0, 0, 0, .03);
            transition: .28s ease;
        }

        .commitment-card:hover {
            transform: translateY(-5px);
            border-color: #dcc55f;
            box-shadow: 0 18px 38px rgba(0, 0, 0, .06);
        }

        .commitment-icon {
            width: 42px;
            height: 42px;
            display: grid;
            place-items: center;
            border-radius: 12px;
            background: #111;
            color: #f4c400;
            font-weight: 900;
        }

        .commitment-card h4 {
            font-size: 16px;
            line-height: 1.35;
        }

        .commitment-card p {
            margin-top: 8px;
            color: #7a7a7a;
            font-size: 13px;
            line-height: 1.65;
        }

        .capacity-trust-strip {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 24px;
            padding-top: 24px;
            border-top: 1px solid #ece6d6;
        }

        .trust-pill {
            padding: 10px 12px;
            border-radius: 999px;
            background: #fff9dc;
            border: 1px solid #efe1aa;
            color: #826600;
            font-size: 10px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .07em;
        }

        @media(max-width:980px) {

            .capacity-premium-head,
            .capacity-premium-grid {
                grid-template-columns: 1fr;
                gap: 34px;
            }

            .capacity-premium-head>p {
                justify-self: start;
            }

            .capacity-showcase,
            .capacity-commitments {
                min-height: auto;
            }
        }

        @media(max-width:640px) {
            .capacity-premium-head {
                margin-bottom: 36px;
            }

            .capacity-premium-head h2 br {
                display: none;
            }

            .capacity-showcase,
            .capacity-commitments {
                padding: 24px;
                border-radius: 19px;
            }

            .capacity-showcase h3,
            .capacity-commitments-head h3 {
                font-size: 30px;
            }

            .capacity-metrics,
            .commitment-cards {
                grid-template-columns: 1fr;
            }

            .capacity-metrics div+div {
                border-left: 0;
                padding-left: 0;
                border-top: 1px solid rgba(255, 255, 255, .08);
                padding-top: 14px;
                margin-top: 4px;
            }

            .commitment-card {
                min-height: auto;
            }
        }