.spr-container {
      width: min(1180px, 92%);
      margin: 0 auto;
    }

    /* ================================
       HERO
    ================================= */

    .spr-hero-area {
      position: relative;
      overflow: hidden;
      padding: 90px 0;
      background:
        radial-gradient(circle at 90% 20%, rgba(22,163,74,.12), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #f3fbf5 100%);
    }

    .spr-hero-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      align-items: center;
      gap: 65px;
    }

    .spr-hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 15px;
      border-radius: 50px;
      background: var(--spr-light-green);
      color: var(--spr-dark-green);
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 20px;
    }

    .spr-hero-title {
      font-size: clamp(40px, 5vw, 68px);
      line-height: 1.08;
      letter-spacing: -2px;
      margin-bottom: 22px;
      color: var(--spr-dark);
    }

    .spr-hero-title span {
      color: var(--spr-green);
    }

    .spr-hero-description {
      font-size: 18px;
      max-width: 650px;
      color: var(--spr-text);
      margin-bottom: 30px;
    }

    .spr-hero-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

    .spr-btn-main,
    .spr-btn-outline {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 14px 25px;
      border-radius: 10px;
      font-weight: 700;
      transition: .3s ease;
    }

    .spr-btn-main {
      color: #fff;
      background: var(--spr-green);
      box-shadow: 0 10px 25px rgba(22,163,74,.22);
    }

    .spr-btn-main:hover {
      background: var(--spr-deep-green);
      transform: translateY(-3px);
    }

    .spr-btn-outline {
      color: var(--spr-dark-green);
      border: 1.5px solid var(--spr-green);
      background: #fff;
    }

    .spr-btn-outline:hover {
      background: var(--spr-light-green);
      transform: translateY(-3px);
    }

    /* Hero Visual */

    .spr-hero-visual {
      position: relative;
    }

    .spr-solar-card {
      position: relative;
      padding: 25px;
      border-radius: 28px;
      background: #fff;
      box-shadow: var(--spr-shadow);
      border: 1px solid var(--spr-border);
    }

    .spr-panel-illustration {
      min-height: 330px;
      border-radius: 20px;
      padding: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      background:
        linear-gradient(145deg, #eaf8ef, #ffffff);
      overflow: hidden;
    }

    .spr-panel-grid {
      width: 82%;
      max-width: 430px;
      aspect-ratio: 1.55;
      padding: 15px;
      border: 5px solid #123f2a;
      border-radius: 10px;
      transform: perspective(600px) rotateX(8deg) rotateY(-8deg);
      background:
        repeating-linear-gradient(
          90deg,
          #28794a 0,
          #28794a 2px,
          #a9dfba 2px,
          #a9dfba 50px
        ),
        repeating-linear-gradient(
          0deg,
          transparent 0,
          transparent 45px,
          #a9dfba 45px,
          #a9dfba 48px
        );
      box-shadow: 15px 20px 35px rgba(7, 70, 30, .20);
    }

    .spr-panel-center {
      height: 100%;
      border: 2px solid rgba(255,255,255,.45);
    }

    .spr-floating-info {
      position: absolute;
      bottom: -20px;
      left: -25px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 15px 20px;
      background: #fff;
      border-radius: 14px;
      box-shadow: var(--spr-shadow);
      border: 1px solid var(--spr-border);
    }

    .spr-check-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--spr-light-green);
      color: var(--spr-green);
      font-weight: 900;
      font-size: 20px;
    }

    .spr-floating-info strong {
      display: block;
      color: var(--spr-dark);
    }

    .spr-floating-info small {
      color: var(--spr-text);
    }

    /* ================================
       TRUST STRIP
    ================================= */

    .spr-trust-strip {
      background: var(--spr-green);
      color: #fff;
      padding: 18px 0;
    }

    .spr-trust-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      text-align: center;
    }

    .spr-trust-item {
      font-size: 15px;
      font-weight: 700;
    }

    .spr-trust-item span {
      display: block;
      font-size: 24px;
      margin-bottom: 2px;
    }

    /* ================================
       COMMON SECTION
    ================================= */

    .spr-section {
      padding: 90px 0;
    }

    .spr-section-soft {
      background: var(--spr-pale-green);
    }

    .spr-section-heading {
      max-width: 760px;
      margin: 0 auto 50px;
      text-align: center;
    }

    .spr-section-label {
      display: inline-block;
      color: var(--spr-green);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      font-size: 13px;
      margin-bottom: 10px;
    }

    .spr-section-title {
      font-size: clamp(32px, 4vw, 48px);
      line-height: 1.15;
      margin-bottom: 15px;
    }

    .spr-section-text {
      color: var(--spr-text);
      font-size: 17px;
    }

    /* ================================
       INTRO
    ================================= */

    .spr-intro-grid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 60px;
      align-items: center;
    }

    .spr-intro-box {
      padding: 35px;
      background: var(--spr-light-green);
      border-left: 5px solid var(--spr-green);
      border-radius: 0 18px 18px 0;
    }

    .spr-intro-box h3 {
      font-size: 27px;
      margin-bottom: 12px;
    }

    .spr-intro-box p {
      color: var(--spr-text);
    }

    .spr-intro-content h2 {
      font-size: 42px;
      line-height: 1.2;
      margin-bottom: 20px;
    }

    .spr-intro-content p {
      color: var(--spr-text);
      margin-bottom: 15px;
    }

    .spr-list {
      list-style: none;
      margin-top: 20px;
    }

    .spr-list li {
      position: relative;
      padding-left: 30px;
      margin-bottom: 12px;
      color: var(--spr-dark);
      font-weight: 600;
    }

    .spr-list li::before {
      content: "✓";
      position: absolute;
      left: 0;
      top: 0;
      color: var(--spr-green);
      font-weight: 900;
    }

    /* ================================
       SERVICE CARDS
    ================================= */

    .spr-card-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .spr-service-card {
      padding: 30px;
      background: #fff;
      border: 1px solid var(--spr-border);
      border-radius: 18px;
      transition: .3s ease;
    }

    .spr-service-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--spr-shadow);
      border-color: rgba(22,163,74,.35);
    }

    .spr-service-icon {
      width: 56px;
      height: 56px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      background: var(--spr-light-green);
      color: var(--spr-green);
      font-size: 25px;
      margin-bottom: 20px;
    }

    .spr-service-card h3 {
      font-size: 21px;
      margin-bottom: 10px;
    }

    .spr-service-card p {
      color: var(--spr-text);
      font-size: 15px;
    }

    /* ================================
       REPLACEMENT SIGNS
    ================================= */

    .spr-sign-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      max-width: 950px;
      margin: auto;
    }

    .spr-sign-item {
      display: flex;
      gap: 18px;
      padding: 22px;
      background: #fff;
      border: 1px solid var(--spr-border);
      border-radius: 15px;
    }

    .spr-sign-number {
      min-width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--spr-green);
      color: #fff;
      font-weight: 800;
    }

    .spr-sign-item h4 {
      margin-bottom: 5px;
      font-size: 18px;
    }

    .spr-sign-item p {
      color: var(--spr-text);
      font-size: 14px;
    }

    /* ================================
       PROCESS
    ================================= */

    .spr-process-wrapper {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 25px;
    }

    .spr-process-card {
      position: relative;
      padding: 28px 22px;
      text-align: center;
      background: #fff;
      border-radius: 18px;
      border: 1px solid var(--spr-border);
    }

    .spr-process-number {
      width: 50px;
      height: 50px;
      margin: 0 auto 18px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--spr-green);
      color: #fff;
      font-size: 18px;
      font-weight: 800;
    }

    .spr-process-card h3 {
      margin-bottom: 8px;
    }

    .spr-process-card p {
      color: var(--spr-text);
      font-size: 14px;
    }

    /* ================================
       BENEFITS
    ================================= */

    .spr-benefit-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 55px;
      align-items: center;
    }

    .spr-benefit-content h2 {
      font-size: 42px;
      line-height: 1.2;
      margin-bottom: 18px;
    }

    .spr-benefit-content > p {
      color: var(--spr-text);
      margin-bottom: 25px;
    }

    .spr-benefit-list {
      display: grid;
      gap: 14px;
    }

    .spr-benefit-row {
      display: flex;
      gap: 15px;
      align-items: flex-start;
      padding: 18px;
      background: #fff;
      border: 1px solid var(--spr-border);
      border-radius: 14px;
    }

    .spr-benefit-row strong {
      display: block;
      margin-bottom: 3px;
    }

    .spr-benefit-row p {
      color: var(--spr-text);
      font-size: 14px;
    }

    /* ================================
       CTA
    ================================= */

    .spr-final-cta {
      padding: 70px 0;
      background: var(--spr-deep-green);
      color: #fff;
    }

    .spr-cta-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
    }

    .spr-cta-box h2 {
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.15;
    margin-bottom: 10px;
    color: #fff;
}

    .spr-cta-box p {
      color: #d5f1df;
      max-width: 650px;
    }

    .spr-cta-button {
      flex-shrink: 0;
      padding: 15px 28px;
      background: #fff;
      color: var(--spr-deep-green);
      border-radius: 10px;
      font-weight: 800;
      transition: .3s;
    }

    .spr-cta-button:hover {
      background: var(--spr-light-green);
      transform: translateY(-3px);
    }

    /* ================================
       FAQ
    ================================= */

    .spr-faq-list {
      max-width: 900px;
      margin: auto;
      display: grid;
      gap: 15px;
    }

    .spr-faq-item {
      border: 1px solid var(--spr-border);
      border-radius: 14px;
      padding: 22px 25px;
      background: #fff;
    }

    .spr-faq-item h3 {
      font-size: 18px;
      margin-bottom: 8px;
    }

    .spr-faq-item p {
      color: var(--spr-text);
      font-size: 15px;
    }

    /* ================================
       RESPONSIVE
    ================================= */

    @media (max-width: 992px) {

      .spr-hero-grid,
      .spr-intro-grid,
      .spr-benefit-layout {
        grid-template-columns: 1fr;
      }

      .spr-hero-content {
        text-align: center;
      }

      .spr-hero-description {
        margin-left: auto;
        margin-right: auto;
      }

      .spr-hero-buttons {
        justify-content: center;
      }

      .spr-card-grid {
        grid-template-columns: repeat(2, 1fr);
      }

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

      .spr-trust-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .spr-cta-box {
        flex-direction: column;
        text-align: center;
      }
    }

    @media (max-width: 650px) {

      .spr-hero-area {
        padding: 65px 0;
      }

      .spr-section {
        padding: 65px 0;
      }

      .spr-hero-title {
        letter-spacing: -1px;
      }

      .spr-hero-description {
        font-size: 16px;
      }

      .spr-hero-buttons {
        flex-direction: column;
      }

      .spr-btn-main,
      .spr-btn-outline {
        width: 100%;
      }

      .spr-card-grid,
      .spr-sign-grid,
      .spr-process-wrapper,
      .spr-trust-grid {
        grid-template-columns: 1fr;
      }

      .spr-solar-card {
        padding: 15px;
      }

      .spr-panel-illustration {
        min-height: 240px;
      }

      .spr-floating-info {
        position: static;
        margin-top: 15px;
      }

      .spr-intro-content h2,
      .spr-benefit-content h2 {
        font-size: 32px;
      }
    }
	
	  :root {
      --spr-green: #16a34a;
      --spr-dark-green: #087a35;
      --spr-deep-green: #065f2b;
      --spr-light-green: #eaf8ef;
      --spr-pale-green: #f4fcf6;
      --spr-white: #ffffff;
      --spr-dark: #123524;
      --spr-text: #50665a;
      --spr-border: #dceee2;
      --spr-shadow: 0 18px 45px rgba(20, 90, 45, 0.10);
    }
	.solar {
    padding-top: 185px;
}
.gn {
    padding-top: 14px !important;
}

/***********Wi-fi-solar*****************/
.wsm-container {
      width: min(1180px, 92%);
      margin: 0 auto;
    }

    /* =========================================================
       HERO SECTION
    ========================================================= */

    .wsm-hero {
      position: relative;
      overflow: hidden;
      padding: 85px 0 100px;
      background:
        radial-gradient(
          circle at 80% 15%,
          rgba(22, 163, 74, 0.14),
          transparent 27%
        ),
        linear-gradient(135deg, #ffffff 0%, #f2fbf5 100%);
    }

    .wsm-hero-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: 65px;
    }

    .wsm-label-pill {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 8px 16px;
      background: var(--wsm-green-soft);
      color: var(--wsm-green-dark);
      border-radius: 50px;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    .wsm-hero-title {
      font-size: clamp(40px, 5vw, 67px);
      line-height: 1.07;
      letter-spacing: -2px;
      margin-bottom: 22px;
    }

    .wsm-hero-title span {
      color: var(--wsm-green);
    }

    .wsm-hero-text {
      max-width: 650px;
      color: var(--wsm-text);
      font-size: 18px;
      margin-bottom: 30px;
    }

    .wsm-button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
    }

    .wsm-main-button,
    .wsm-outline-button {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      padding: 14px 25px;
      border-radius: 10px;
      font-weight: 800;
      transition: .3s ease;
    }

    .wsm-main-button {
      background: var(--wsm-green);
      color: #fff;
      box-shadow: 0 12px 28px rgba(22, 163, 74, .22);
    }

    .wsm-main-button:hover {
      background: var(--wsm-green-deep);
      transform: translateY(-3px);
    }

    .wsm-outline-button {
      background: #fff;
      border: 1px solid var(--wsm-green);
      color: var(--wsm-green-dark);
    }

    .wsm-outline-button:hover {
      background: var(--wsm-green-soft);
      transform: translateY(-3px);
    }

    /* =========================================================
       MONITORING DASHBOARD
    ========================================================= */

    .wsm-dashboard-wrapper {
      position: relative;
    }

    .wsm-dashboard {
      padding: 18px;
      background: #fff;
      border: 1px solid var(--wsm-border);
      border-radius: 25px;
      box-shadow: var(--wsm-shadow);
    }

    .wsm-dashboard-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 5px 18px;
    }

    .wsm-dashboard-heading {
      font-size: 17px;
      font-weight: 800;
    }

    .wsm-online-status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 30px;
      background: var(--wsm-green-soft);
      color: var(--wsm-green-dark);
      font-size: 12px;
      font-weight: 800;
    }

    .wsm-status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--wsm-green);
    }

    .wsm-energy-card {
      background: var(--wsm-green);
      color: #fff;
      border-radius: 17px;
      padding: 22px;
      margin-bottom: 14px;
    }

    .wsm-energy-card small {
      opacity: .85;
    }

    .wsm-energy-value {
      display: flex;
      align-items: baseline;
      gap: 7px;
      margin: 5px 0;
    }

    .wsm-energy-value strong {
      font-size: 38px;
      line-height: 1;
    }

    .wsm-energy-value span {
      font-size: 14px;
    }

    .wsm-energy-progress {
      height: 7px;
      background: rgba(255,255,255,.25);
      border-radius: 20px;
      overflow: hidden;
      margin-top: 14px;
    }

    .wsm-energy-progress span {
      display: block;
      width: 78%;
      height: 100%;
      background: #fff;
      border-radius: inherit;
    }

    .wsm-data-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .wsm-data-card {
      padding: 17px;
      border: 1px solid var(--wsm-border);
      border-radius: 14px;
      background: var(--wsm-green-pale);
    }

    .wsm-data-card small {
      color: var(--wsm-text);
      display: block;
      margin-bottom: 3px;
    }

    .wsm-data-card strong {
      font-size: 21px;
    }

    .wsm-chart {
      height: 120px;
      margin-top: 14px;
      padding: 15px;
      border-radius: 14px;
      background: #f8fcf9;
      border: 1px solid var(--wsm-border);
      position: relative;
      overflow: hidden;
    }

    .wsm-chart-lines {
      position: absolute;
      inset: 15px;
      background:
        repeating-linear-gradient(
          0deg,
          transparent 0,
          transparent 28px,
          #dcefe2 28px,
          #dcefe2 29px
        );
    }

    .wsm-chart-svg {
      position: absolute;
      left: 15px;
      right: 15px;
      top: 20px;
      width: calc(100% - 30px);
      height: 90px;
    }

    .wsm-floating-notification {
      position: absolute;
      right: -25px;
      bottom: -25px;
      padding: 15px 18px;
      background: #fff;
      border: 1px solid var(--wsm-border);
      border-radius: 15px;
      box-shadow: var(--wsm-shadow);
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .wsm-notification-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--wsm-green-soft);
      color: var(--wsm-green);
      font-weight: 900;
    }

    .wsm-floating-notification strong {
      display: block;
      font-size: 14px;
    }

    .wsm-floating-notification small {
      color: var(--wsm-text);
    }

    /* =========================================================
       TRUST BAR
    ========================================================= */

    .wsm-trust-bar {
      padding: 20px 0;
      background: var(--wsm-green);
      color: #fff;
    }

    .wsm-trust-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      text-align: center;
    }

    .wsm-trust-item {
      font-size: 14px;
      font-weight: 700;
    }

    .wsm-trust-item b {
      display: block;
      font-size: 23px;
      margin-bottom: 2px;
    }

    /* =========================================================
       GENERAL SECTION
    ========================================================= */

    .wsm-section {
      padding: 90px 0;
    }

    .wsm-section-light {
      background: var(--wsm-green-pale);
    }

    .wsm-section-heading {
      max-width: 780px;
      margin: 0 auto 50px;
      text-align: center;
    }

    .wsm-section-label {
      display: inline-block;
      color: var(--wsm-green);
      font-size: 13px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: 10px;
    }

    .wsm-section-title {
      font-size: clamp(32px, 4vw, 48px);
      line-height: 1.15;
      margin-bottom: 15px;
    }

    .wsm-section-description {
      color: var(--wsm-text);
      font-size: 17px;
    }

    /* =========================================================
       INTRO SECTION
    ========================================================= */

    .wsm-intro-grid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      align-items: center;
      gap: 60px;
    }

    .wsm-intro-panel {
      background: var(--wsm-green);
      color: #fff;
      border-radius: 25px;
      padding: 40px;
      position: relative;
      overflow: hidden;
    }

    .wsm-intro-panel::after {
      content: "☀";
      position: absolute;
      right: -15px;
      bottom: -35px;
      font-size: 150px;
      opacity: .10;
    }

   .wsm-intro-panel h3 {
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 15px;
    color: #fff;
}

    .wsm-intro-panel p {
      color: #e0f4e6;
    }

    .wsm-intro-content h2 {
      font-size: 42px;
      line-height: 1.2;
      margin-bottom: 20px;
    }

    .wsm-intro-content p {
      color: var(--wsm-text);
      margin-bottom: 15px;
    }

    .wsm-check-list {
      list-style: none;
      margin-top: 22px;
    }

    .wsm-check-list li {
      position: relative;
      padding-left: 30px;
      margin-bottom: 12px;
      font-weight: 700;
    }

    .wsm-check-list li::before {
      content: "✓";
      position: absolute;
      left: 0;
      color: var(--wsm-green);
      font-weight: 900;
    }

    /* =========================================================
       FEATURES
    ========================================================= */

    .wsm-feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .wsm-feature-card {
      background: #fff;
      border: 1px solid var(--wsm-border);
      border-radius: 18px;
      padding: 30px;
      transition: .3s ease;
    }

    .wsm-feature-card:hover {
      transform: translateY(-8px);
      box-shadow: var(--wsm-shadow);
      border-color: rgba(22, 163, 74, .35);
    }

    .wsm-feature-icon {
      width: 57px;
      height: 57px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      background: var(--wsm-green-soft);
      color: var(--wsm-green);
      font-size: 24px;
      margin-bottom: 20px;
    }

    .wsm-feature-card h3 {
      font-size: 21px;
      margin-bottom: 9px;
    }

    .wsm-feature-card p {
      color: var(--wsm-text);
      font-size: 15px;
    }

    /* =========================================================
       MONITORING FEATURES
    ========================================================= */

    .wsm-monitor-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 55px;
      align-items: center;
    }

    .wsm-monitor-copy h2 {
      font-size: 42px;
      line-height: 1.2;
      margin-bottom: 18px;
    }

    .wsm-monitor-copy > p {
      color: var(--wsm-text);
      margin-bottom: 25px;
    }

    .wsm-monitor-list {
      display: grid;
      gap: 14px;
    }

    .wsm-monitor-item {
      display: flex;
      gap: 14px;
      padding: 17px;
      background: #fff;
      border: 1px solid var(--wsm-border);
      border-radius: 14px;
    }

    .wsm-monitor-check {
      min-width: 40px;
      height: 40px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: var(--wsm-green-soft);
      color: var(--wsm-green);
      font-weight: 900;
    }

    .wsm-monitor-item strong {
      display: block;
      margin-bottom: 3px;
    }

    .wsm-monitor-item p {
      color: var(--wsm-text);
      font-size: 14px;
    }

    /* =========================================================
       MOBILE / APP VISUAL
    ========================================================= */

    .wsm-phone-area {
      display: flex;
      justify-content: center;
    }

    .wsm-phone {
      width: 280px;
      padding: 12px;
      border: 8px solid #183b29;
      border-radius: 32px;
      background: #fff;
      box-shadow: var(--wsm-shadow);
    }

    .wsm-phone-top {
      text-align: center;
      padding: 7px;
      font-size: 13px;
      font-weight: 800;
    }

    .wsm-phone-screen {
      background: var(--wsm-green-pale);
      border-radius: 20px;
      padding: 16px;
    }

    .wsm-phone-energy {
      background: var(--wsm-green);
      color: #fff;
      padding: 20px;
      border-radius: 15px;
      margin-bottom: 12px;
    }

    .wsm-phone-energy small {
      opacity: .8;
    }

    .wsm-phone-energy strong {
      display: block;
      font-size: 34px;
      line-height: 1.1;
      margin-top: 4px;
    }

    .wsm-phone-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px;
    }

    .wsm-phone-stat {
      background: #fff;
      padding: 13px 10px;
      border-radius: 11px;
      border: 1px solid var(--wsm-border);
    }

    .wsm-phone-stat small {
      display: block;
      color: var(--wsm-text);
      font-size: 10px;
    }

    .wsm-phone-stat strong {
      font-size: 16px;
    }

    /* =========================================================
       PROCESS
    ========================================================= */

    .wsm-process-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 23px;
    }

    .wsm-process-card {
      text-align: center;
      padding: 30px 20px;
      background: #fff;
      border: 1px solid var(--wsm-border);
      border-radius: 18px;
    }

    .wsm-process-number {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      margin: 0 auto 18px;
      border-radius: 50%;
      background: var(--wsm-green);
      color: #fff;
      font-weight: 900;
    }

    .wsm-process-card h3 {
      margin-bottom: 8px;
    }

    .wsm-process-card p {
      color: var(--wsm-text);
      font-size: 14px;
    }

    /* =========================================================
       BENEFITS
    ========================================================= */

    .wsm-benefits {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
      max-width: 950px;
      margin: auto;
    }

    .wsm-benefit {
      display: flex;
      align-items: flex-start;
      gap: 15px;
      padding: 22px;
      background: #fff;
      border: 1px solid var(--wsm-border);
      border-radius: 15px;
    }

    .wsm-benefit-icon {
      min-width: 43px;
      height: 43px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: var(--wsm-green);
      color: #fff;
      font-weight: 900;
    }

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

    .wsm-benefit p {
      color: var(--wsm-text);
      font-size: 14px;
    }

    /* =========================================================
       CTA
    ========================================================= */

    .wsm-cta {
      background: var(--wsm-green-deep);
      padding: 70px 0;
      color: #fff;
    }

    .wsm-cta-layout {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 35px;
    }

    .wsm-cta-layout h2 {
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.15;
    margin-bottom: 12px;
    color: #fff;
}

    .wsm-cta-layout p {
      color: #d8f0df;
      max-width: 700px;
    }

    .wsm-cta-button {
      flex-shrink: 0;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      padding: 15px 28px;
      border-radius: 10px;
      background: #fff;
      color: var(--wsm-green-deep);
      font-weight: 900;
      transition: .3s ease;
    }

    .wsm-cta-button:hover {
      background: var(--wsm-green-soft);
      transform: translateY(-3px);
    }

    /* =========================================================
       FAQ
    ========================================================= */

    .wsm-faq-wrapper {
      max-width: 900px;
      margin: auto;
    }

    .wsm-faq {
      background: #fff;
      border: 1px solid var(--wsm-border);
      border-radius: 14px;
      padding: 22px 25px;
      margin-bottom: 15px;
    }

    .wsm-faq h3 {
      font-size: 18px;
      margin-bottom: 7px;
    }

    .wsm-faq p {
      color: var(--wsm-text);
      font-size: 15px;
    }

    /* =========================================================
       RESPONSIVE
    ========================================================= */

    @media (max-width: 1000px) {

      .wsm-hero-layout,
      .wsm-intro-grid,
      .wsm-monitor-layout {
        grid-template-columns: 1fr;
      }

      .wsm-hero-content {
        text-align: center;
      }

      .wsm-hero-text {
        margin-left: auto;
        margin-right: auto;
      }

      .wsm-button-row {
        justify-content: center;
      }

      .wsm-feature-grid {
        grid-template-columns: repeat(2, 1fr);
      }

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

      .wsm-trust-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .wsm-cta-layout {
        flex-direction: column;
        text-align: center;
      }
    }

    @media (max-width: 650px) {

      .wsm-hero {
        padding: 65px 0 80px;
      }

      .wsm-section {
        padding: 65px 0;
      }

      .wsm-hero-title {
        letter-spacing: -1px;
      }

      .wsm-hero-text {
        font-size: 16px;
      }

      .wsm-button-row {
        flex-direction: column;
      }

      .wsm-main-button,
      .wsm-outline-button {
        width: 100%;
      }

      .wsm-feature-grid,
      .wsm-process-grid,
      .wsm-benefits,
      .wsm-trust-grid {
        grid-template-columns: 1fr;
      }

      .wsm-dashboard {
        padding: 13px;
      }

      .wsm-floating-notification {
        position: static;
        margin-top: 15px;
      }

      .wsm-intro-content h2,
      .wsm-monitor-copy h2 {
        font-size: 32px;
      }

      .wsm-intro-panel {
        padding: 30px;
      }
    }
	
	   :root {
      --wsm-green: #16a34a;
      --wsm-green-dark: #087a35;
      --wsm-green-deep: #065f2b;
      --wsm-green-soft: #eaf8ef;
      --wsm-green-pale: #f5fcf7;
      --wsm-white: #ffffff;
      --wsm-dark: #123524;
      --wsm-text: #53665a;
      --wsm-border: #d9ede0;
      --wsm-shadow: 0 18px 45px rgba(6, 95, 43, 0.10);
    }
	
	/****************Solor-energy-monitoring*******************/
	
	.semx-container {
      width: min(1180px, 92%);
      margin: auto;
    }

    /* =========================================================
       HERO
    ========================================================= */

    .semx-hero {
      position: relative;
      overflow: hidden;
      background: #fff;
      padding: 85px 0 100px;
    }

    .semx-hero::before {
      content: "";
      position: absolute;
      width: 480px;
      height: 480px;
      right: -180px;
      top: -180px;
      border-radius: 50%;
      background: var(--semx-light-green);
      opacity: .8;
    }

    .semx-hero-grid {
      position: relative;
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      align-items: center;
      gap: 70px;
    }

    .semx-kicker {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 8px 15px;
      background: var(--semx-light-green);
      color: var(--semx-dark-green);
      border-radius: 30px;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 20px;
    }

    .semx-kicker-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--semx-green);
    }

    .semx-hero-title {
      font-size: clamp(42px, 5vw, 68px);
      line-height: 1.06;
      letter-spacing: -2.5px;
      margin-bottom: 23px;
    }

    .semx-hero-title span {
      color: var(--semx-green);
    }

    .semx-hero-description {
      max-width: 650px;
      color: var(--semx-text);
      font-size: 18px;
      margin-bottom: 30px;
    }

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

    .semx-primary-btn,
    .semx-secondary-btn {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      padding: 14px 25px;
      border-radius: 10px;
      font-weight: 800;
      transition: .3s ease;
    }

    .semx-primary-btn {
      background: var(--semx-green);
      color: #fff;
      box-shadow: 0 12px 30px rgba(22, 163, 74, .22);
    }

    .semx-primary-btn:hover {
      background: var(--semx-deep-green);
      transform: translateY(-3px);
    }

    .semx-secondary-btn {
      color: var(--semx-dark-green);
      border: 1px solid var(--semx-green);
      background: #fff;
    }

    .semx-secondary-btn:hover {
      background: var(--semx-light-green);
      transform: translateY(-3px);
    }

    /* =========================================================
       HERO VISUAL
    ========================================================= */

    .semx-visual {
      position: relative;
      min-height: 470px;
    }

    .semx-monitor-board {
      position: absolute;
      width: 100%;
      max-width: 490px;
      right: 0;
      top: 20px;
      padding: 20px;
      background: #fff;
      border: 1px solid var(--semx-border);
      border-radius: 25px;
      box-shadow: var(--semx-shadow);
    }

    .semx-board-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 17px;
    }

    .semx-board-title {
      font-weight: 900;
      font-size: 17px;
    }

    .semx-live {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 10px;
      background: var(--semx-light-green);
      color: var(--semx-dark-green);
      border-radius: 20px;
      font-size: 11px;
      font-weight: 800;
    }

    .semx-live i {
      width: 7px;
      height: 7px;
      display: block;
      border-radius: 50%;
      background: var(--semx-green);
    }

    .semx-production-box {
      padding: 23px;
      color: #fff;
      border-radius: 18px;
      background: linear-gradient(
        135deg,
        var(--semx-green),
        var(--semx-dark-green)
      );
      margin-bottom: 15px;
    }

    .semx-production-box small {
      opacity: .85;
    }

    .semx-production-number {
      display: flex;
      align-items: baseline;
      gap: 7px;
      margin: 5px 0 2px;
    }

    .semx-production-number strong {
      font-size: 43px;
      line-height: 1;
    }

    .semx-production-number span {
      font-size: 14px;
    }

    .semx-production-change {
      font-size: 12px;
      color: #d9f9e3;
    }

    .semx-stat-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .semx-stat {
      padding: 17px;
      border: 1px solid var(--semx-border);
      background: var(--semx-pale-green);
      border-radius: 14px;
    }

    .semx-stat small {
      display: block;
      color: var(--semx-text);
      margin-bottom: 3px;
      font-size: 12px;
    }

    .semx-stat strong {
      font-size: 21px;
    }

    /* GRAPH */

    .semx-graph {
      height: 135px;
      margin-top: 14px;
      padding: 12px;
      position: relative;
      overflow: hidden;
      border-radius: 15px;
      background: #fbfefc;
      border: 1px solid var(--semx-border);
    }

    .semx-grid-lines {
      position: absolute;
      inset: 12px;
      background:
        repeating-linear-gradient(
          0deg,
          transparent 0,
          transparent 25px,
          #e2f0e6 25px,
          #e2f0e6 26px
        );
    }

    .semx-graph svg {
      position: absolute;
      left: 12px;
      top: 17px;
      width: calc(100% - 24px);
      height: 105px;
    }

    .semx-sun {
      position: absolute;
      right: 12px;
      top: -18px;
      width: 105px;
      height: 105px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--semx-light-green);
      color: var(--semx-green);
      font-size: 45px;
      opacity: .9;
    }

    .semx-system-badge {
      position: absolute;
      left: -25px;
      bottom: 25px;
      padding: 15px 18px;
      background: #fff;
      border: 1px solid var(--semx-border);
      border-radius: 15px;
      box-shadow: var(--semx-shadow);
    }

    .semx-system-badge strong {
      display: block;
      color: var(--semx-dark-green);
      font-size: 14px;
    }

    .semx-system-badge span {
      color: var(--semx-text);
      font-size: 12px;
    }

    /* =========================================================
       STATS STRIP
    ========================================================= */

    .semx-stats-strip {
      background: var(--semx-green);
      color: #fff;
      padding: 25px 0;
    }

    .semx-strip-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      text-align: center;
    }

    .semx-strip-item strong {
      display: block;
      font-size: 25px;
    }

    .semx-strip-item span {
      font-size: 13px;
      opacity: .9;
    }

    /* =========================================================
       COMMON SECTION
    ========================================================= */

    .semx-section {
      padding: 90px 0;
    }

    .semx-soft-section {
      background: var(--semx-pale-green);
    }

    .semx-heading {
      max-width: 800px;
      text-align: center;
      margin: 0 auto 52px;
    }

    .semx-section-label {
      display: block;
      color: var(--semx-green);
      text-transform: uppercase;
      letter-spacing: 1.5px;
      font-size: 13px;
      font-weight: 900;
      margin-bottom: 10px;
    }

    .semx-section-title {
      font-size: clamp(32px, 4vw, 48px);
      line-height: 1.15;
      margin-bottom: 15px;
    }

    .semx-section-text {
      color: var(--semx-text);
      font-size: 17px;
    }

    /* =========================================================
       ABOUT MONITORING
    ========================================================= */

    .semx-about-grid {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      align-items: center;
      gap: 65px;
    }

    .semx-energy-card {
      position: relative;
      min-height: 390px;
      padding: 35px;
      border-radius: 28px;
      background: var(--semx-green);
      color: #fff;
      overflow: hidden;
    }

    .semx-energy-card::before {
      content: "";
      position: absolute;
      width: 270px;
      height: 270px;
      right: -80px;
      bottom: -90px;
      border: 45px solid rgba(255,255,255,.09);
      border-radius: 50%;
    }

    .semx-energy-card::after {
      content: "";
      position: absolute;
      width: 140px;
      height: 140px;
      right: 55px;
      top: 45px;
      border: 2px solid rgba(255,255,255,.15);
      border-radius: 50%;
    }

    .semx-energy-icon {
      width: 65px;
      height: 65px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      background: rgba(255,255,255,.14);
      font-size: 30px;
      margin-bottom: 35px;
    }

  .semx-energy-card h3 {
    position: relative;
    z-index: 2;
    font-size: 30px;
    line-height: 1.2;
    max-width: 300px;
    margin-bottom: 15px;
    color: #fff;
}

    .semx-energy-card p {
      position: relative;
      z-index: 2;
      max-width: 340px;
      color: #dff6e6;
    }

    .semx-about-copy h2 {
      font-size: 42px;
      line-height: 1.18;
      margin-bottom: 18px;
    }

    .semx-about-copy > p {
      color: var(--semx-text);
      margin-bottom: 17px;
    }

    .semx-checks {
      list-style: none;
      margin-top: 23px;
    }

    .semx-checks li {
      position: relative;
      padding-left: 32px;
      margin-bottom: 12px;
      font-weight: 700;
    }

    .semx-checks li::before {
      content: "✓";
      position: absolute;
      left: 0;
      top: 0;
      color: var(--semx-green);
      font-weight: 900;
    }

    /* =========================================================
       SERVICE CARDS
    ========================================================= */

    .semx-service-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 23px;
    }

    .semx-service-card {
      padding: 30px;
      background: #fff;
      border: 1px solid var(--semx-border);
      border-radius: 18px;
      transition: .3s ease;
    }

    .semx-service-card:hover {
      transform: translateY(-7px);
      box-shadow: var(--semx-shadow);
      border-color: rgba(22,163,74,.4);
    }

    .semx-service-icon {
      width: 57px;
      height: 57px;
      display: grid;
      place-items: center;
      margin-bottom: 20px;
      border-radius: 15px;
      background: var(--semx-light-green);
      color: var(--semx-green);
      font-size: 25px;
    }

    .semx-service-card h3 {
      font-size: 20px;
      margin-bottom: 8px;
    }

    .semx-service-card p {
      color: var(--semx-text);
      font-size: 15px;
    }

    /* =========================================================
       MONITORING CAPABILITIES
    ========================================================= */

    .semx-capability-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
    }

    .semx-capability-copy h2 {
      font-size: 42px;
      line-height: 1.18;
      margin-bottom: 17px;
    }

    .semx-capability-copy > p {
      color: var(--semx-text);
      margin-bottom: 25px;
    }

    .semx-capability-list {
      display: grid;
      gap: 13px;
    }

    .semx-capability {
      display: flex;
      gap: 14px;
      padding: 17px;
      border: 1px solid var(--semx-border);
      border-radius: 14px;
      background: #fff;
    }

    .semx-capability-number {
      min-width: 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      background: var(--semx-green);
      font-size: 12px;
      font-weight: 900;
    }

    .semx-capability strong {
      display: block;
      margin-bottom: 3px;
    }

    .semx-capability p {
      color: var(--semx-text);
      font-size: 14px;
    }

    /* =========================================================
       ANALYTICS VISUAL
    ========================================================= */

    .semx-analytics {
      padding: 25px;
      background: #fff;
      border: 1px solid var(--semx-border);
      border-radius: 25px;
      box-shadow: var(--semx-shadow);
    }

    .semx-analytics-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 22px;
    }

    .semx-analytics-top strong {
      font-size: 18px;
    }

    .semx-period {
      padding: 6px 10px;
      background: var(--semx-light-green);
      color: var(--semx-dark-green);
      border-radius: 7px;
      font-size: 11px;
      font-weight: 800;
    }

    .semx-big-number {
      margin-bottom: 20px;
    }

    .semx-big-number small {
      display: block;
      color: var(--semx-text);
    }

    .semx-big-number strong {
      font-size: 40px;
      color: var(--semx-dark-green);
    }

    .semx-bars {
      height: 200px;
      display: flex;
      align-items: end;
      justify-content: space-around;
      gap: 10px;
      padding: 15px 5px 0;
      border-bottom: 1px solid var(--semx-border);
    }

    .semx-bar {
      width: 10%;
      min-height: 25px;
      border-radius: 8px 8px 0 0;
      background: var(--semx-green);
      opacity: .9;
    }

    .semx-bar:nth-child(1) { height: 34%; }
    .semx-bar:nth-child(2) { height: 47%; }
    .semx-bar:nth-child(3) { height: 41%; }
    .semx-bar:nth-child(4) { height: 67%; }
    .semx-bar:nth-child(5) { height: 76%; }
    .semx-bar:nth-child(6) { height: 91%; }
    .semx-bar:nth-child(7) { height: 83%; }

    .semx-days {
      display: flex;
      justify-content: space-around;
      padding-top: 8px;
      color: var(--semx-text);
      font-size: 10px;
    }

    /* =========================================================
       PROCESS
    ========================================================= */

    .semx-process-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .semx-process {
      position: relative;
      padding: 30px 22px;
      background: #fff;
      border: 1px solid var(--semx-border);
      border-radius: 18px;
      text-align: center;
    }

    .semx-process::after {
      content: "→";
      position: absolute;
      right: -17px;
      top: 47px;
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      color: var(--semx-green);
      background: var(--semx-light-green);
      border-radius: 50%;
      font-weight: 900;
      z-index: 2;
    }

    .semx-process:last-child::after {
      display: none;
    }

    .semx-process-icon {
      width: 55px;
      height: 55px;
      margin: 0 auto 17px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      background: var(--semx-green);
      font-weight: 900;
    }

    .semx-process h3 {
      font-size: 18px;
      margin-bottom: 7px;
    }

    .semx-process p {
      color: var(--semx-text);
      font-size: 14px;
    }

    /* =========================================================
       BENEFITS
    ========================================================= */

    .semx-benefit-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .semx-benefit {
      padding: 25px;
      border-left: 4px solid var(--semx-green);
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 8px 25px rgba(6,78,42,.06);
    }

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

    .semx-benefit p {
      color: var(--semx-text);
      font-size: 14px;
    }

    /* =========================================================
       CTA
    ========================================================= */

    .semx-cta {
      padding: 75px 0;
      color: #fff;
      background: var(--semx-deep-green);
    }

    .semx-cta-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 35px;
    }

   .semx-cta-content h2 {
    font-size: clamp(31px, 4vw, 47px);
    line-height: 1.15;
    margin-bottom: 13px;
    color: #fff;
}

    .semx-cta-content p {
      max-width: 700px;
      color: #d8f0df;
    }

    .semx-cta-btn {
      flex-shrink: 0;
      padding: 15px 28px;
      border-radius: 10px;
      background: #fff;
      color: var(--semx-deep-green);
      font-weight: 900;
      transition: .3s ease;
    }

    .semx-cta-btn:hover {
      background: var(--semx-light-green);
      transform: translateY(-3px);
    }

    /* =========================================================
       FAQ
    ========================================================= */

    .semx-faq-wrap {
      max-width: 900px;
      margin: auto;
    }

    .semx-faq {
      padding: 22px 25px;
      margin-bottom: 14px;
      background: #fff;
      border: 1px solid var(--semx-border);
      border-radius: 14px;
    }

    .semx-faq h3 {
      font-size: 18px;
      margin-bottom: 7px;
    }

    .semx-faq p {
      color: var(--semx-text);
      font-size: 15px;
    }

    /* =========================================================
       RESPONSIVE
    ========================================================= */

    @media (max-width: 1050px) {

      .semx-hero-grid,
      .semx-about-grid,
      .semx-capability-layout {
        grid-template-columns: 1fr;
      }

      .semx-hero-content {
        text-align: center;
      }

      .semx-hero-description {
        margin-left: auto;
        margin-right: auto;
      }

      .semx-actions {
        justify-content: center;
      }

      .semx-visual {
        max-width: 650px;
        width: 100%;
        margin: auto;
      }

      .semx-service-grid,
      .semx-benefit-grid {
        grid-template-columns: repeat(2, 1fr);
      }

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

      .semx-process::after {
        display: none;
      }

      .semx-strip-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .semx-cta-box {
        flex-direction: column;
        text-align: center;
      }
    }

    @media (max-width: 650px) {

      .semx-hero {
        padding: 60px 0 70px;
      }

      .semx-section {
        padding: 65px 0;
      }

      .semx-hero-title {
        font-size: 42px;
        letter-spacing: -1.5px;
      }

      .semx-hero-description {
        font-size: 16px;
      }

      .semx-actions {
        flex-direction: column;
      }

      .semx-primary-btn,
      .semx-secondary-btn {
        width: 100%;
      }

      .semx-visual {
        min-height: 440px;
      }

      .semx-monitor-board {
        position: relative;
        top: 0;
      }

      .semx-system-badge {
        position: relative;
        left: 0;
        bottom: auto;
        margin-top: 15px;
        display: inline-block;
      }

      .semx-sun {
        width: 70px;
        height: 70px;
        font-size: 30px;
      }

      .semx-stat-grid {
        gap: 8px;
      }

      .semx-stat {
        padding: 13px;
      }

      .semx-stat strong {
        font-size: 17px;
      }

      .semx-strip-grid,
      .semx-service-grid,
      .semx-process-grid,
      .semx-benefit-grid {
        grid-template-columns: 1fr;
      }

      .semx-about-copy h2,
      .semx-capability-copy h2 {
        font-size: 32px;
      }

      .semx-energy-card {
        min-height: 330px;
        padding: 28px;
      }

      .semx-production-number strong {
        font-size: 36px;
      }

      .semx-cta {
        padding: 60px 0;
      }

      .semx-cta-btn {
        width: 100%;
        text-align: center;
      }
    }
	:root {
      --semx-green: #16a34a;
      --semx-dark-green: #087a35;
      --semx-deep-green: #064e2a;
      --semx-light-green: #eaf8ef;
      --semx-pale-green: #f6fcf8;
      --semx-white: #ffffff;
      --semx-dark: #102f20;
      --semx-text: #5b6d62;
      --semx-border: #d9eadf;
      --semx-shadow: 0 18px 50px rgba(6, 78, 42, 0.11);
    }
	
	
	 .lsbx-container {
      width: min(1180px, 92%);
      margin: 0 auto;
    }

    /* =========================================================
       HERO
    ========================================================= */

    .lsbx-hero {
      position: relative;
      overflow: hidden;
      padding: 90px 0 100px;
      background:
        radial-gradient(
          circle at 85% 15%,
          #e4f8ea 0,
          #e4f8ea 13%,
          transparent 14%
        ),
        #ffffff;
    }

    .lsbx-hero::after {
      content: "";
      position: absolute;
      right: -160px;
      bottom: -220px;
      width: 470px;
      height: 470px;
      border-radius: 50%;
      border: 70px solid var(--lsbx-green-soft);
      opacity: .7;
    }

    .lsbx-hero-grid {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 75px;
      align-items: center;
    }

    .lsbx-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 15px;
      margin-bottom: 20px;
      border-radius: 50px;
      background: var(--lsbx-green-soft);
      color: var(--lsbx-green-dark);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1.2px;
    }

    .lsbx-label-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--lsbx-green);
    }

    .lsbx-hero-title {
      max-width: 700px;
      margin-bottom: 22px;
      font-size: clamp(42px, 5vw, 68px);
      line-height: 1.04;
      letter-spacing: -2.5px;
    }

    .lsbx-hero-title span {
      color: var(--lsbx-green);
    }

    .lsbx-hero-text {
      max-width: 630px;
      margin-bottom: 30px;
      color: var(--lsbx-text);
      font-size: 18px;
    }

    .lsbx-button-row {
      display: flex;
      flex-wrap: wrap;
      gap: 13px;
    }

    .lsbx-main-button,
    .lsbx-outline-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      padding: 13px 24px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 800;
      transition: .3s ease;
    }

    .lsbx-main-button {
      color: #fff;
      background: var(--lsbx-green);
      box-shadow: 0 12px 30px rgba(22, 163, 74, .2);
    }

    .lsbx-main-button:hover {
      color: #fff;
      background: var(--lsbx-green-deep);
      transform: translateY(-3px);
    }

    .lsbx-outline-button {
      color: var(--lsbx-green-dark);
      background: #fff;
      border: 1px solid var(--lsbx-green);
    }

    .lsbx-outline-button:hover {
      color: var(--lsbx-green-dark);
      background: var(--lsbx-green-soft);
      transform: translateY(-3px);
    }

    /* =========================================================
       BATTERY VISUAL
    ========================================================= */

    .lsbx-visual-area {
      position: relative;
      min-height: 510px;
    }

    .lsbx-battery-frame {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 360px;
      height: 450px;
      padding: 30px;
      border-radius: 30px;
      background: linear-gradient(
        160deg,
        #ffffff,
        #f0faF3
      );
      border: 1px solid var(--lsbx-border);
      box-shadow: var(--lsbx-shadow);
    }

    .lsbx-battery-top {
      width: 65px;
      height: 18px;
      margin: 0 auto -1px;
      border-radius: 7px 7px 0 0;
      background: var(--lsbx-green-dark);
    }

    .lsbx-battery-body {
      height: 365px;
      padding: 25px;
      border: 3px solid var(--lsbx-green-dark);
      border-radius: 20px;
      background: #fff;
    }

    .lsbx-battery-brand {
      margin-bottom: 28px;
      color: var(--lsbx-green-dark);
      font-size: 14px;
      font-weight: 900;
      letter-spacing: 1px;
      text-align: center;
    }

    .lsbx-battery-icon {
      width: 125px;
      height: 125px;
      margin: 0 auto 25px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--lsbx-green-soft);
      color: var(--lsbx-green);
      font-size: 60px;
    }

    .lsbx-battery-capacity {
      margin-bottom: 18px;
      text-align: center;
    }

    .lsbx-battery-capacity strong {
      display: block;
      color: var(--lsbx-black);
      font-size: 39px;
      line-height: 1;
    }

    .lsbx-battery-capacity span {
      color: var(--lsbx-text);
      font-size: 12px;
    }

    .lsbx-charge-track {
      height: 12px;
      overflow: hidden;
      border-radius: 20px;
      background: #e7eee9;
    }

    .lsbx-charge-fill {
      width: 82%;
      height: 100%;
      border-radius: inherit;
      background: var(--lsbx-green);
    }

    .lsbx-charge-info {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
      color: var(--lsbx-text);
      font-size: 11px;
    }

    .lsbx-floating-card {
      position: absolute;
      left: 0;
      bottom: 35px;
      width: 225px;
      padding: 19px;
      background: #fff;
      border: 1px solid var(--lsbx-border);
      border-radius: 17px;
      box-shadow: var(--lsbx-shadow);
    }

    .lsbx-floating-icon {
      width: 43px;
      height: 43px;
      margin-bottom: 10px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: var(--lsbx-green);
      background: var(--lsbx-green-soft);
      font-size: 20px;
    }

    .lsbx-floating-card strong {
      display: block;
      margin-bottom: 2px;
      font-size: 14px;
    }

    .lsbx-floating-card span {
      color: var(--lsbx-text);
      font-size: 12px;
    }

    .lsbx-energy-chip {
      position: absolute;
      right: 0;
      top: 70px;
      padding: 14px 18px;
      color: #fff;
      background: var(--lsbx-green);
      border-radius: 14px;
      box-shadow: 0 12px 30px rgba(22, 163, 74, .2);
    }

    .lsbx-energy-chip strong {
      display: block;
      font-size: 21px;
      line-height: 1.1;
    }

    .lsbx-energy-chip span {
      font-size: 10px;
      opacity: .9;
    }

    /* =========================================================
       QUICK FEATURES
    ========================================================= */

    .lsbx-feature-strip {
      padding: 25px 0;
      background: var(--lsbx-green);
      color: #fff;
    }

    .lsbx-feature-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .lsbx-feature-item {
      padding: 8px 15px;
      text-align: center;
      border-right: 1px solid rgba(255,255,255,.2);
    }

    .lsbx-feature-item:last-child {
      border-right: 0;
    }

    .lsbx-feature-item strong {
      display: block;
      font-size: 18px;
    }

    .lsbx-feature-item span {
      display: block;
      font-size: 12px;
      opacity: .9;
    }

    /* =========================================================
       COMMON SECTIONS
    ========================================================= */

    .lsbx-section {
      padding: 90px 0;
    }

    .lsbx-light-section {
      background: var(--lsbx-green-pale);
    }

    .lsbx-heading {
      max-width: 760px;
      margin: 0 auto 50px;
      text-align: center;
    }

    .lsbx-section-label {
      display: block;
      margin-bottom: 9px;
      color: var(--lsbx-green);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 1.4px;
    }

    .lsbx-section-title {
      margin-bottom: 15px;
      font-size: clamp(32px, 4vw, 47px);
      line-height: 1.15;
      letter-spacing: -1px;
    }

    .lsbx-section-description {
      color: var(--lsbx-text);
      font-size: 16px;
    }

    /* =========================================================
       INTRO
    ========================================================= */

    .lsbx-intro-grid {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 65px;
      align-items: center;
    }

    .lsbx-intro-card {
      position: relative;
      min-height: 400px;
      overflow: hidden;
      padding: 35px;
      border-radius: 28px;
      color: #fff;
      background: var(--lsbx-green-deep);
    }

    .lsbx-intro-card::before {
      content: "";
      position: absolute;
      width: 260px;
      height: 260px;
      right: -100px;
      top: -80px;
      border: 40px solid rgba(255,255,255,.08);
      border-radius: 50%;
    }

    .lsbx-intro-card::after {
      content: "";
      position: absolute;
      width: 180px;
      height: 180px;
      left: -80px;
      bottom: -100px;
      border: 30px solid rgba(255,255,255,.07);
      border-radius: 50%;
    }

    .lsbx-intro-symbol {
      position: relative;
      z-index: 2;
      width: 65px;
      height: 65px;
      margin-bottom: 35px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      background: rgba(255,255,255,.13);
      font-size: 31px;
    }

    .lsbx-intro-card h3 {
    position: relative;
    z-index: 2;
    max-width: 330px;
    margin-bottom: 15px;
    font-size: 29px;
    line-height: 1.2;
    color: #fff;
}

    .lsbx-intro-card p {
      position: relative;
      z-index: 2;
      max-width: 350px;
      color: #dcefe2;
    }

    .lsbx-intro-content h2 {
      margin-bottom: 17px;
      font-size: 41px;
      line-height: 1.18;
    }

    .lsbx-intro-content > p {
      margin-bottom: 17px;
      color: var(--lsbx-text);
    }

    .lsbx-check-list {
      list-style: none;
      margin-top: 24px;
    }

    .lsbx-check-list li {
      position: relative;
      margin-bottom: 12px;
      padding-left: 30px;
      font-weight: 700;
    }

    .lsbx-check-list li::before {
      content: "✓";
      position: absolute;
      left: 0;
      top: 0;
      color: var(--lsbx-green);
      font-weight: 900;
    }

    /* =========================================================
       ADVANTAGES
    ========================================================= */

    .lsbx-card-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .lsbx-info-card {
      padding: 30px;
      background: #fff;
      border: 1px solid var(--lsbx-border);
      border-radius: 19px;
      transition: .3s ease;
    }

    .lsbx-info-card:hover {
      transform: translateY(-7px);
      border-color: rgba(22,163,74,.45);
      box-shadow: var(--lsbx-shadow);
    }

    .lsbx-info-icon {
      width: 57px;
      height: 57px;
      margin-bottom: 20px;
      display: grid;
      place-items: center;
      border-radius: 15px;
      color: var(--lsbx-green);
      background: var(--lsbx-green-soft);
      font-size: 25px;
    }

    .lsbx-info-card h3 {
      margin-bottom: 8px;
      font-size: 20px;
    }

    .lsbx-info-card p {
      color: var(--lsbx-text);
      font-size: 14px;
    }

    /* =========================================================
       BATTERY TYPES
    ========================================================= */

    .lsbx-type-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 55px;
      align-items: center;
    }

    .lsbx-type-content h2 {
      margin-bottom: 18px;
      font-size: 40px;
      line-height: 1.15;
    }

    .lsbx-type-content > p {
      margin-bottom: 25px;
      color: var(--lsbx-text);
    }

    .lsbx-type-list {
      display: grid;
      gap: 12px;
    }

    .lsbx-type-row {
      display: flex;
      gap: 14px;
      padding: 17px;
      background: #fff;
      border: 1px solid var(--lsbx-border);
      border-radius: 14px;
    }

    .lsbx-type-number {
      flex: 0 0 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--lsbx-green);
      color: #fff;
      font-size: 12px;
      font-weight: 900;
    }

    .lsbx-type-row strong {
      display: block;
      margin-bottom: 2px;
    }

    .lsbx-type-row span {
      color: var(--lsbx-text);
      font-size: 13px;
    }

    /* =========================================================
       SPECIFICATION PANEL
    ========================================================= */

    .lsbx-spec-panel {
      padding: 30px;
      background: #fff;
      border: 1px solid var(--lsbx-border);
      border-radius: 25px;
      box-shadow: var(--lsbx-shadow);
    }

    .lsbx-spec-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
    }

    .lsbx-spec-header strong {
      font-size: 19px;
    }

    .lsbx-status {
      padding: 6px 11px;
      border-radius: 20px;
      background: var(--lsbx-green-soft);
      color: var(--lsbx-green-dark);
      font-size: 10px;
      font-weight: 900;
    }

    .lsbx-spec-highlight {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 13px;
    }

    .lsbx-spec-box {
      padding: 20px;
      border-radius: 14px;
      background: var(--lsbx-green-pale);
      border: 1px solid var(--lsbx-border);
    }

    .lsbx-spec-box small {
      display: block;
      margin-bottom: 5px;
      color: var(--lsbx-text);
      font-size: 11px;
    }

    .lsbx-spec-box strong {
      color: var(--lsbx-green-dark);
      font-size: 24px;
    }

    .lsbx-spec-lines {
      display: grid;
      gap: 1px;
      overflow: hidden;
      border: 1px solid var(--lsbx-border);
      border-radius: 13px;
    }

    .lsbx-spec-line {
      display: flex;
      justify-content: space-between;
      gap: 15px;
      padding: 14px 16px;
      background: #fff;
      font-size: 13px;
    }

    .lsbx-spec-line:nth-child(even) {
      background: var(--lsbx-green-pale);
    }

    .lsbx-spec-line span {
      color: var(--lsbx-text);
    }

    .lsbx-spec-line strong {
      text-align: right;
    }

    /* =========================================================
       APPLICATIONS
    ========================================================= */

    .lsbx-application-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 17px;
    }

    .lsbx-application {
      min-height: 210px;
      padding: 25px 20px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      border-radius: 18px;
      background: #fff;
      border: 1px solid var(--lsbx-border);
      transition: .3s ease;
    }

    .lsbx-application:hover {
      transform: translateY(-5px);
      box-shadow: var(--lsbx-shadow);
    }

    .lsbx-application-icon {
      width: 53px;
      height: 53px;
      margin-bottom: auto;
      display: grid;
      place-items: center;
      border-radius: 14px;
      color: var(--lsbx-green);
      background: var(--lsbx-green-soft);
      font-size: 23px;
    }

    .lsbx-application h3 {
      margin-top: 25px;
      margin-bottom: 5px;
      font-size: 18px;
    }

    .lsbx-application p {
      color: var(--lsbx-text);
      font-size: 13px;
    }

    /* =========================================================
       PROCESS
    ========================================================= */

    .lsbx-process-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }

    .lsbx-process-card {
      position: relative;
      padding: 30px 22px;
      text-align: center;
      background: #fff;
      border: 1px solid var(--lsbx-border);
      border-radius: 18px;
    }

    .lsbx-process-card:not(:last-child)::after {
      content: "→";
      position: absolute;
      top: 48px;
      right: -17px;
      z-index: 3;
      width: 33px;
      height: 33px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: var(--lsbx-green);
      background: var(--lsbx-green-soft);
      font-weight: 900;
    }

    .lsbx-process-number {
      width: 56px;
      height: 56px;
      margin: 0 auto 17px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      background: var(--lsbx-green);
      font-size: 13px;
      font-weight: 900;
    }

    .lsbx-process-card h3 {
      margin-bottom: 7px;
      font-size: 18px;
    }

    .lsbx-process-card p {
      color: var(--lsbx-text);
      font-size: 13px;
    }

    /* =========================================================
       WHY US
    ========================================================= */

    .lsbx-why-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      max-width: 900px;
      margin: auto;
    }

    .lsbx-why-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 20px;
      border: 1px solid var(--lsbx-border);
      border-radius: 15px;
      background: #fff;
    }

    .lsbx-why-check {
      flex: 0 0 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      background: var(--lsbx-green);
      font-weight: 900;
    }

    .lsbx-why-item strong {
      display: block;
      margin-bottom: 3px;
    }

    .lsbx-why-item p {
      color: var(--lsbx-text);
      font-size: 13px;
    }

    /* =========================================================
       CTA
    ========================================================= */

    .lsbx-cta {
      padding: 80px 0;
      color: #fff;
      background: var(--lsbx-green-deep);
    }

    .lsbx-cta-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
    }

   .lsbx-cta-content h2 {
    max-width: 700px;
    margin-bottom: 13px;
    font-size: clamp(31px, 4vw, 47px);
    line-height: 1.13;
    color: #fff;
}

    .lsbx-cta-content p {
      max-width: 700px;
      color: #d9eee0;
    }

    .lsbx-cta-button {
      flex-shrink: 0;
      padding: 15px 27px;
      border-radius: 10px;
      color: var(--lsbx-green-deep);
      background: #fff;
      font-weight: 900;
      transition: .3s ease;
    }

    .lsbx-cta-button:hover {
      color: var(--lsbx-green-deep);
      background: var(--lsbx-green-soft);
      transform: translateY(-3px);
    }

    /* =========================================================
       FAQ
    ========================================================= */

    .lsbx-faq-container {
      max-width: 900px;
      margin: auto;
    }

    .lsbx-faq {
      margin-bottom: 13px;
      padding: 22px 25px;
      border: 1px solid var(--lsbx-border);
      border-radius: 14px;
      background: #fff;
    }

    .lsbx-faq h3 {
      margin-bottom: 7px;
      font-size: 18px;
    }

    .lsbx-faq p {
      color: var(--lsbx-text);
      font-size: 14px;
    }

    /* =========================================================
       RESPONSIVE
    ========================================================= */

    @media (max-width: 1050px) {

      .lsbx-hero-grid,
      .lsbx-intro-grid,
      .lsbx-type-layout {
        grid-template-columns: 1fr;
      }

      .lsbx-hero-content {
        text-align: center;
      }

      .lsbx-hero-text {
        margin-left: auto;
        margin-right: auto;
      }

      .lsbx-button-row {
        justify-content: center;
      }

      .lsbx-visual-area {
        width: 100%;
        max-width: 600px;
        margin: auto;
      }

      .lsbx-card-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .lsbx-application-grid {
        grid-template-columns: repeat(2, 1fr);
      }

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

      .lsbx-process-card:not(:last-child)::after {
        display: none;
      }

      .lsbx-feature-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .lsbx-feature-item:nth-child(2) {
        border-right: 0;
      }

      .lsbx-cta-box {
        flex-direction: column;
        text-align: center;
      }
    }

    @media (max-width: 650px) {

      .lsbx-hero {
        padding: 60px 0 70px;
      }

      .lsbx-section {
        padding: 65px 0;
      }

      .lsbx-hero-title {
        font-size: 42px;
        letter-spacing: -1.4px;
      }

      .lsbx-hero-text {
        font-size: 16px;
      }

      .lsbx-button-row {
        flex-direction: column;
      }

      .lsbx-main-button,
      .lsbx-outline-button {
        width: 100%;
      }

      .lsbx-visual-area {
        min-height: 480px;
      }

      .lsbx-battery-frame {
        right: 0;
        left: 35px;
        width: calc(100% - 35px);
        height: 430px;
        padding: 20px;
      }

      .lsbx-battery-body {
        height: 345px;
      }

      .lsbx-energy-chip {
        right: -5px;
        top: 30px;
      }

      .lsbx-floating-card {
        left: 0;
        bottom: 5px;
      }

      .lsbx-feature-grid,
      .lsbx-card-grid,
      .lsbx-application-grid,
      .lsbx-process-grid,
      .lsbx-why-grid {
        grid-template-columns: 1fr;
      }

      .lsbx-feature-item {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.2);
      }

      .lsbx-feature-item:last-child {
        border-bottom: 0;
      }

      .lsbx-intro-content h2,
      .lsbx-type-content h2 {
        font-size: 32px;
      }

      .lsbx-spec-highlight {
        grid-template-columns: 1fr;
      }

      .lsbx-spec-panel {
        padding: 20px;
      }

      .lsbx-cta {
        padding: 60px 0;
      }

      .lsbx-cta-button {
        width: 100%;
        text-align: center;
      }
    }
	  :root {
      --lsbx-green: #16a34a;
      --lsbx-green-dark: #087a35;
      --lsbx-green-deep: #064e2a;
      --lsbx-green-soft: #eaf8ef;
      --lsbx-green-pale: #f5fcf7;
      --lsbx-white: #ffffff;
      --lsbx-black: #10251a;
      --lsbx-text: #5c6d63;
      --lsbx-border: #d9e9de;
      --lsbx-shadow: 0 20px 55px rgba(6, 78, 42, 0.11);
    }
	
	/************Smart-solar**************/
	
	.ssi-container {
      width: min(1180px, 92%);
      margin: auto;
    }

    /* =========================================================
       HERO
    ========================================================= */

    .ssi-hero {
      position: relative;
      overflow: hidden;
      padding: 90px 0 100px;
      background: var(--ssi-white);
    }

    .ssi-hero::before {
      content: "";
      position: absolute;
      width: 500px;
      height: 500px;
      right: -220px;
      top: -220px;
      border-radius: 50%;
      border: 90px solid var(--ssi-light-green);
      opacity: .8;
    }

    .ssi-hero::after {
      content: "";
      position: absolute;
      width: 250px;
      height: 250px;
      left: -150px;
      bottom: -140px;
      border-radius: 50%;
      background: var(--ssi-soft-green);
    }

    .ssi-hero-layout {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 70px;
      align-items: center;
    }

    .ssi-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 20px;
      padding: 8px 15px;
      border-radius: 50px;
      background: var(--ssi-light-green);
      color: var(--ssi-dark-green);
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .ssi-kicker-mark {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--ssi-green);
    }

    .ssi-hero-title {
      max-width: 720px;
      margin-bottom: 23px;
      font-size: clamp(43px, 5vw, 68px);
      line-height: 1.03;
      letter-spacing: -2.8px;
    }

    .ssi-hero-title span {
      color: var(--ssi-green);
    }

    .ssi-hero-description {
      max-width: 650px;
      margin-bottom: 30px;
      color: var(--ssi-text);
      font-size: 18px;
    }

    .ssi-hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 13px;
    }

    .ssi-primary-btn,
    .ssi-secondary-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      padding: 13px 24px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 800;
      transition: .3s ease;
    }

    .ssi-primary-btn {
      color: #fff;
      background: var(--ssi-green);
      box-shadow: 0 12px 28px rgba(22, 163, 74, .20);
    }

    .ssi-primary-btn:hover {
      color: #fff;
      background: var(--ssi-deep-green);
      transform: translateY(-3px);
    }

    .ssi-secondary-btn {
      color: var(--ssi-dark-green);
      background: #fff;
      border: 1px solid var(--ssi-green);
    }

    .ssi-secondary-btn:hover {
      color: var(--ssi-dark-green);
      background: var(--ssi-light-green);
      transform: translateY(-3px);
    }

    /* =========================================================
       INVERTER VISUAL
    ========================================================= */

    .ssi-device-stage {
      position: relative;
      min-height: 500px;
    }

    .ssi-inverter-card {
      position: absolute;
      top: 25px;
      left: 50%;
      width: 330px;
      height: 425px;
      padding: 28px;
      transform: translateX(-50%);
      border: 1px solid var(--ssi-border);
      border-radius: 28px;
      background: linear-gradient(145deg, #ffffff, #f0faf3);
      box-shadow: var(--ssi-shadow);
    }

    .ssi-device-top {
      width: 90px;
      height: 12px;
      margin: 0 auto 20px;
      border-radius: 20px;
      background: var(--ssi-green);
    }

    .ssi-device-screen {
      position: relative;
      height: 170px;
      padding: 22px;
      overflow: hidden;
      border-radius: 18px;
      background: var(--ssi-deep-green);
      color: #fff;
    }

    .ssi-screen-label {
      display: block;
      margin-bottom: 10px;
      color: #bfe8cc;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .ssi-screen-power {
      margin-bottom: 18px;
      font-size: 42px;
      font-weight: 900;
      line-height: 1;
    }

    .ssi-screen-power small {
      font-size: 14px;
      font-weight: 500;
    }

    .ssi-screen-bars {
      display: flex;
      align-items: end;
      gap: 7px;
      height: 55px;
    }

    .ssi-screen-bar {
      width: 18px;
      border-radius: 4px 4px 0 0;
      background: #70d68f;
    }

    .ssi-screen-bar:nth-child(1) { height: 22px; }
    .ssi-screen-bar:nth-child(2) { height: 31px; }
    .ssi-screen-bar:nth-child(3) { height: 38px; }
    .ssi-screen-bar:nth-child(4) { height: 47px; }
    .ssi-screen-bar:nth-child(5) { height: 53px; }
    .ssi-screen-bar:nth-child(6) { height: 42px; }

    .ssi-device-name {
      margin: 24px 0 20px;
      text-align: center;
      color: var(--ssi-dark-green);
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 1px;
    }

    .ssi-device-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px;
      border-radius: 12px;
      background: var(--ssi-light-green);
    }

    .ssi-device-status span {
      color: var(--ssi-text);
      font-size: 11px;
    }

    .ssi-device-status strong {
      color: var(--ssi-green);
      font-size: 12px;
    }

    .ssi-live-card {
      position: absolute;
      top: 90px;
      right: 0;
      width: 190px;
      padding: 17px;
      border-radius: 16px;
      background: #fff;
      border: 1px solid var(--ssi-border);
      box-shadow: var(--ssi-shadow);
    }

    .ssi-live-icon {
      width: 42px;
      height: 42px;
      margin-bottom: 9px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background: var(--ssi-light-green);
      color: var(--ssi-green);
      font-size: 20px;
    }

    .ssi-live-card strong {
      display: block;
      margin-bottom: 2px;
      font-size: 14px;
    }

    .ssi-live-card span {
      color: var(--ssi-text);
      font-size: 11px;
    }

    .ssi-grid-card {
      position: absolute;
      left: 0;
      bottom: 30px;
      width: 210px;
      padding: 18px;
      border-radius: 16px;
      color: #fff;
      background: var(--ssi-green);
      box-shadow: 0 15px 35px rgba(22, 163, 74, .22);
    }

    .ssi-grid-card strong {
      display: block;
      margin-bottom: 3px;
      font-size: 16px;
    }

    .ssi-grid-card span {
      font-size: 11px;
      opacity: .9;
    }

    /* =========================================================
       GREEN STAT BAR
    ========================================================= */

    .ssi-stats {
      padding: 25px 0;
      background: var(--ssi-green);
      color: #fff;
    }

    .ssi-stat-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }

    .ssi-stat {
      padding: 8px 20px;
      text-align: center;
      border-right: 1px solid rgba(255,255,255,.2);
    }

    .ssi-stat:last-child {
      border-right: 0;
    }

    .ssi-stat strong {
      display: block;
      font-size: 18px;
    }

    .ssi-stat span {
      font-size: 11px;
      opacity: .9;
    }

    /* =========================================================
       COMMON
    ========================================================= */

    .ssi-section {
      padding: 90px 0;
    }

    .ssi-section-soft {
      background: var(--ssi-soft-green);
    }

    .ssi-heading {
      max-width: 760px;
      margin: 0 auto 50px;
      text-align: center;
    }

    .ssi-section-tag {
      display: block;
      margin-bottom: 9px;
      color: var(--ssi-green);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 1.4px;
    }

    .ssi-section-title {
      margin-bottom: 15px;
      font-size: clamp(32px, 4vw, 46px);
      line-height: 1.15;
      letter-spacing: -1px;
    }

    .ssi-section-text {
      color: var(--ssi-text);
      font-size: 16px;
    }

    /* =========================================================
       SMART INTRO
    ========================================================= */

    .ssi-smart-layout {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 65px;
      align-items: center;
    }

    .ssi-smart-visual {
      min-height: 400px;
      position: relative;
      overflow: hidden;
      padding: 35px;
      border-radius: 28px;
      color: #fff;
      background: var(--ssi-deep-green);
    }

    .ssi-smart-visual::before {
      content: "";
      position: absolute;
      right: -100px;
      top: -100px;
      width: 300px;
      height: 300px;
      border: 50px solid rgba(255,255,255,.08);
      border-radius: 50%;
    }

    .ssi-smart-icon {
      position: relative;
      z-index: 2;
      width: 70px;
      height: 70px;
      margin-bottom: 35px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      background: rgba(255,255,255,.12);
      font-size: 32px;
    }

   .ssi-smart-visual h3 {
    position: relative;
    z-index: 2;
    max-width: 380px;
    margin-bottom: 15px;
    font-size: 29px;
    line-height: 1.2;
    color: #fff;
}

    .ssi-smart-visual p {
      position: relative;
      z-index: 2;
      max-width: 390px;
      color: #d6eedf;
    }

    .ssi-smart-content h2 {
      margin-bottom: 17px;
      font-size: 40px;
      line-height: 1.16;
    }

    .ssi-smart-content p {
      margin-bottom: 16px;
      color: var(--ssi-text);
    }

    .ssi-checks {
      list-style: none;
      margin-top: 25px;
    }

    .ssi-checks li {
      position: relative;
      margin-bottom: 11px;
      padding-left: 29px;
      font-weight: 700;
    }

    .ssi-checks li::before {
      content: "✓";
      position: absolute;
      left: 0;
      top: 0;
      color: var(--ssi-green);
      font-weight: 900;
    }

    /* =========================================================
       BENEFITS
    ========================================================= */

    .ssi-benefit-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .ssi-benefit {
      padding: 30px;
      border: 1px solid var(--ssi-border);
      border-radius: 19px;
      background: #fff;
      transition: .3s ease;
    }

    .ssi-benefit:hover {
      transform: translateY(-7px);
      border-color: rgba(22,163,74,.45);
      box-shadow: var(--ssi-shadow);
    }

    .ssi-benefit-icon {
      width: 57px;
      height: 57px;
      margin-bottom: 20px;
      display: grid;
      place-items: center;
      border-radius: 15px;
      color: var(--ssi-green);
      background: var(--ssi-light-green);
      font-size: 25px;
    }

    .ssi-benefit h3 {
      margin-bottom: 8px;
      font-size: 20px;
    }

    .ssi-benefit p {
      color: var(--ssi-text);
      font-size: 14px;
    }

    /* =========================================================
       FEATURES
    ========================================================= */

    .ssi-feature-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 55px;
      align-items: center;
    }

    .ssi-feature-content h2 {
      margin-bottom: 17px;
      font-size: 40px;
      line-height: 1.15;
    }

    .ssi-feature-content > p {
      margin-bottom: 25px;
      color: var(--ssi-text);
    }

    .ssi-feature-list {
      display: grid;
      gap: 12px;
    }

    .ssi-feature-row {
      display: flex;
      gap: 14px;
      padding: 17px;
      border: 1px solid var(--ssi-border);
      border-radius: 14px;
      background: #fff;
    }

    .ssi-feature-number {
      flex: 0 0 40px;
      height: 40px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      background: var(--ssi-green);
      font-size: 11px;
      font-weight: 900;
    }

    .ssi-feature-row strong {
      display: block;
      margin-bottom: 2px;
    }

    .ssi-feature-row span {
      color: var(--ssi-text);
      font-size: 13px;
    }

    /* =========================================================
       ENERGY FLOW
    ========================================================= */

    .ssi-flow-box {
      padding: 35px;
      border-radius: 25px;
      background: #fff;
      border: 1px solid var(--ssi-border);
      box-shadow: var(--ssi-shadow);
    }

    .ssi-flow-title {
      margin-bottom: 25px;
      text-align: center;
      font-size: 20px;
    }

    .ssi-flow {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      align-items: center;
    }

    .ssi-flow-item {
      padding: 18px 10px;
      text-align: center;
      border-radius: 14px;
      background: var(--ssi-light-green);
    }

    .ssi-flow-icon {
      width: 47px;
      height: 47px;
      margin: 0 auto 9px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: var(--ssi-green);
      color: #fff;
      font-size: 20px;
    }

    .ssi-flow-item strong {
      display: block;
      font-size: 12px;
    }

    .ssi-flow-item span {
      color: var(--ssi-text);
      font-size: 10px;
    }

    .ssi-flow-arrow {
      text-align: center;
      color: var(--ssi-green);
      font-size: 25px;
      font-weight: 900;
    }

    /* =========================================================
       APPLICATIONS
    ========================================================= */

    .ssi-application-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 17px;
    }

    .ssi-application {
      min-height: 205px;
      padding: 25px 20px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      border: 1px solid var(--ssi-border);
      border-radius: 18px;
      background: #fff;
      transition: .3s ease;
    }

    .ssi-application:hover {
      transform: translateY(-5px);
      box-shadow: var(--ssi-shadow);
    }

    .ssi-application-icon {
      width: 53px;
      height: 53px;
      margin-bottom: auto;
      display: grid;
      place-items: center;
      border-radius: 14px;
      color: var(--ssi-green);
      background: var(--ssi-light-green);
      font-size: 23px;
    }

    .ssi-application h3 {
      margin-top: 23px;
      margin-bottom: 5px;
      font-size: 18px;
    }

    .ssi-application p {
      color: var(--ssi-text);
      font-size: 13px;
    }

    /* =========================================================
       INSTALLATION
    ========================================================= */

    .ssi-process-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }

    .ssi-process {
      position: relative;
      padding: 30px 22px;
      text-align: center;
      border: 1px solid var(--ssi-border);
      border-radius: 18px;
      background: #fff;
    }

    .ssi-process:not(:last-child)::after {
      content: "→";
      position: absolute;
      top: 47px;
      right: -17px;
      z-index: 2;
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: var(--ssi-green);
      background: var(--ssi-light-green);
      font-weight: 900;
    }

    .ssi-process-number {
      width: 57px;
      height: 57px;
      margin: 0 auto 17px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      background: var(--ssi-green);
      font-size: 12px;
      font-weight: 900;
    }

    .ssi-process h3 {
      margin-bottom: 7px;
      font-size: 18px;
    }

    .ssi-process p {
      color: var(--ssi-text);
      font-size: 13px;
    }

    /* =========================================================
       WHY CHOOSE
    ========================================================= */

    .ssi-reasons {
      max-width: 900px;
      margin: auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
    }

    .ssi-reason {
      display: flex;
      gap: 13px;
      padding: 20px;
      border: 1px solid var(--ssi-border);
      border-radius: 15px;
      background: #fff;
    }

    .ssi-reason-icon {
      flex: 0 0 35px;
      height: 35px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      background: var(--ssi-green);
      font-weight: 900;
    }

    .ssi-reason strong {
      display: block;
      margin-bottom: 3px;
    }

    .ssi-reason p {
      color: var(--ssi-text);
      font-size: 13px;
    }

    /* =========================================================
       CTA
    ========================================================= */

    .ssi-cta {
      padding: 80px 0;
      background: var(--ssi-deep-green);
      color: #fff;
    }

    .ssi-cta-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
    }

   .ssi-cta-content h2 {
    max-width: 700px;
    margin-bottom: 13px;
    font-size: clamp(31px, 4vw, 46px);
    line-height: 1.12;
    color: #fff;
}

    .ssi-cta-content p {
      max-width: 700px;
      color: #d6ecdd;
    }

    .ssi-cta-btn {
      flex-shrink: 0;
      padding: 15px 27px;
      border-radius: 10px;
      color: var(--ssi-deep-green);
      background: #fff;
      font-weight: 900;
      transition: .3s ease;
    }

    .ssi-cta-btn:hover {
      color: var(--ssi-deep-green);
      background: var(--ssi-light-green);
      transform: translateY(-3px);
    }

    /* =========================================================
       FAQ
    ========================================================= */

    .ssi-faq-list {
      max-width: 900px;
      margin: auto;
    }

    .ssi-faq {
      margin-bottom: 13px;
      padding: 22px 25px;
      border: 1px solid var(--ssi-border);
      border-radius: 14px;
      background: #fff;
    }

    .ssi-faq h3 {
      margin-bottom: 7px;
      font-size: 18px;
    }

    .ssi-faq p {
      color: var(--ssi-text);
      font-size: 14px;
    }

    /* =========================================================
       RESPONSIVE
    ========================================================= */

    @media (max-width: 1050px) {

      .ssi-hero-layout,
      .ssi-smart-layout,
      .ssi-feature-layout {
        grid-template-columns: 1fr;
      }

      .ssi-hero-content {
        text-align: center;
      }

      .ssi-hero-description {
        margin-left: auto;
        margin-right: auto;
      }

      .ssi-hero-actions {
        justify-content: center;
      }

      .ssi-device-stage {
        max-width: 620px;
        width: 100%;
        margin: auto;
      }

      .ssi-benefit-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .ssi-application-grid {
        grid-template-columns: repeat(2, 1fr);
      }

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

      .ssi-process:not(:last-child)::after {
        display: none;
      }

      .ssi-stat-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .ssi-stat {
        border-bottom: 1px solid rgba(255,255,255,.2);
      }

      .ssi-stat:nth-child(2) {
        border-right: 0;
      }

      .ssi-flow {
        grid-template-columns: 1fr 1fr;
      }

      .ssi-flow-arrow {
        display: none;
      }

      .ssi-cta-inner {
        flex-direction: column;
        text-align: center;
      }
    }

    @media (max-width: 650px) {

      .ssi-hero {
        padding: 60px 0 70px;
      }

      .ssi-section {
        padding: 65px 0;
      }

      .ssi-hero-title {
        font-size: 42px;
        letter-spacing: -1.5px;
      }

      .ssi-hero-description {
        font-size: 16px;
      }

      .ssi-hero-actions {
        flex-direction: column;
      }

      .ssi-primary-btn,
      .ssi-secondary-btn {
        width: 100%;
      }

      .ssi-device-stage {
        min-height: 470px;
      }

      .ssi-inverter-card {
        width: 285px;
        height: 400px;
      }

      .ssi-device-screen {
        height: 155px;
      }

      .ssi-live-card {
        right: -5px;
        top: 70px;
        width: 160px;
      }

      .ssi-grid-card {
        left: 0;
        bottom: 10px;
        width: 180px;
      }

      .ssi-benefit-grid,
      .ssi-application-grid,
      .ssi-process-grid,
      .ssi-reasons {
        grid-template-columns: 1fr;
      }

      .ssi-stat-grid {
        grid-template-columns: 1fr;
      }

      .ssi-stat {
        border-right: 0;
      }

      .ssi-flow {
        grid-template-columns: 1fr;
      }

      .ssi-flow-arrow {
        display: block;
        transform: rotate(90deg);
      }

      .ssi-smart-content h2,
      .ssi-feature-content h2 {
        font-size: 32px;
      }

      .ssi-smart-visual {
        min-height: 360px;
      }

      .ssi-flow-box {
        padding: 22px;
      }

      .ssi-cta {
        padding: 60px 0;
      }

      .ssi-cta-btn {
        width: 100%;
        text-align: center;
      }
    }
	 :root {
      --ssi-green: #16a34a;
      --ssi-dark-green: #087a35;
      --ssi-deep-green: #064e2a;
      --ssi-light-green: #eaf8ef;
      --ssi-soft-green: #f5fcf7;
      --ssi-white: #ffffff;
      --ssi-dark: #10251a;
      --ssi-text: #5b6d62;
      --ssi-border: #dcebe1;
      --ssi-shadow: 0 20px 50px rgba(6, 78, 42, 0.10);
    }
    
    /**************Laptop Repair**************/
    
     /* ================================
           LAPTOP REPAIR PAGE
           Unique CSS Names
        ================================= */

        .lrx-page {
            --lrx-green: #16a34a;
            --lrx-dark-green: #087f3d;
            --lrx-light-green: #ecfdf3;
            --lrx-pale-green: #f5fff8;
            --lrx-text: #17251c;
            --lrx-muted: #637067;
            --lrx-border: #dcebe1;
            --lrx-white: #ffffff;
            --lrx-shadow: 0 15px 45px rgba(20, 80, 40, 0.10);

            font-family: Arial, Helvetica, sans-serif;
            color: var(--lrX-text, #17251c);
            background: #fff;
            overflow: hidden;
        }

        .lrx-page *,
        .lrx-page *::before,
        .lrx-page *::after {
            box-sizing: border-box;
        }

        .lrx-wrap {
            width: min(1180px, 92%);
            margin: 0 auto;
        }

        /* HERO */

        .lrx-hero {
            position: relative;
            padding: 90px 0;
            background:
                radial-gradient(circle at 90% 20%, rgba(22,163,74,.12), transparent 30%),
                linear-gradient(135deg, #ffffff 0%, #f3fff7 100%);
        }

        .lrx-hero-grid {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            align-items: left;
            gap: 60px;
        }

        .lrx-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 15px;
            margin-bottom: 20px;
            color: var(--lrx-dark-green);
            background: var(--lrx-light-green);
            border: 1px solid #c9efd6;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 700;
        }

        .lrx-eyebrow::before {
            content: "";
            width: 8px;
            height: 8px;
            background: var(--lrx-green);
            border-radius: 50%;
        }

        .lrx-hero h1 {
            margin: 0 0 20px;
            color: var(--lrx-text);
            font-size: clamp(38px, 5vw, 68px);
            line-height: 1.05;
            letter-spacing: -2px;
        }

        .lrx-hero h1 span {
            color: var(--lrx-green);
        }

        .lrx-hero-description {
            max-width: 650px;
            margin-bottom: 30px;
            color: var(--lrx-muted);
            font-size: 18px;
            line-height: 1.8;
        }

        .lrx-button-row {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
        }

        .lrx-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 52px;
            padding: 0 25px;
            border-radius: 10px;
            text-decoration: none;
            font-size: 15px;
            font-weight: 700;
            transition: .3s ease;
        }

        .lrx-btn-primary {
            color: #fff;
            background: var(--lrx-green);
            box-shadow: 0 10px 25px rgba(22,163,74,.22);
        }

        .lrx-btn-primary:hover {
            color: #fff;
            background: var(--lrx-dark-green);
            transform: translateY(-2px);
        }

        .lrx-btn-outline {
            color: var(--lrx-dark-green);
            background: #fff;
            border: 1px solid #b9dcc5;
        }

        .lrx-btn-outline:hover {
            color: #fff;
            background: var(--lrx-green);
            border-color: var(--lrx-green);
        }

        /* LAPTOP VISUAL */

        .lrx-device-area {
            position: relative;
            min-height: 420px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .lrx-device-glow {
            position: absolute;
            width: 330px;
            height: 330px;
            background: rgba(22,163,74,.12);
            border-radius: 50%;
            filter: blur(5px);
        }

        .lrx-laptop {
            position: relative;
            width: min(460px, 90%);
            z-index: 2;
        }

        .lrx-screen {
            position: relative;
            height: 275px;
            padding: 13px;
            background: #18251d;
            border: 5px solid #344239;
            border-radius: 18px 18px 8px 8px;
            box-shadow: 0 25px 45px rgba(20,50,30,.20);
        }

        .lrx-screen-inner {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background:
                linear-gradient(145deg, #eafff1, #a8efbe);
            border-radius: 7px;
            overflow: hidden;
        }

        .lrx-screen-content {
            text-align: center;
        }

        .lrx-screen-icon {
            width: 65px;
            height: 65px;
            margin: 0 auto 12px;
            display: grid;
            place-items: center;
            color: #fff;
            background: var(--lrx-green);
            border-radius: 18px;
            font-size: 28px;
            font-weight: bold;
        }

        .lrx-screen-content strong {
            display: block;
            color: #12351e;
            font-size: 19px;
        }

        .lrx-screen-content small {
            color: #477054;
        }

        .lrx-base {
            height: 28px;
            margin: 0 -30px;
            background: linear-gradient(#bdc9c0, #829188);
            border-radius: 0 0 22px 22px;
            box-shadow: 0 15px 20px rgba(0,0,0,.14);
        }

        .lrx-keyboard {
            width: 80%;
            height: 7px;
            margin: 8px auto 0;
            background: #66736b;
            border-radius: 20px;
        }

        /* STATS */

        .lrx-stats {
            margin-top: -35px;
            position: relative;
            z-index: 5;
        }

        .lrx-stat-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            background: #fff;
            border: 1px solid var(--lrx-border);
            border-radius: 18px;
            box-shadow: var(--lrx-shadow);
            overflow: hidden;
        }

        .lrx-stat-item {
            padding: 25px;
            text-align: center;
            border-right: 1px solid var(--lrx-border);
        }

        .lrx-stat-item:last-child {
            border-right: 0;
        }

        .lrx-stat-number {
            display: block;
            margin-bottom: 5px;
            color: var(--lrx-green);
            font-size: 28px;
            font-weight: 800;
        }

        .lrx-stat-label {
            color: var(--lrx-muted);
            font-size: 14px;
        }

        /* SECTION */

        .lrx-section {
            padding: 90px 0;
        }

        .lrx-section-soft {
            background: var(--lrx-pale-green);
        }

        .lrx-heading {
            max-width: 760px;
            margin: 0 auto 45px;
            text-align: center;
        }

        .lrx-heading-tag {
            display: block;
            margin-bottom: 10px;
            color: var(--lrx-green);
            font-size: 14px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }

        .lrx-heading h2 {
            margin: 0 0 15px;
            color: var(--lrx-text);
            font-size: clamp(30px, 4vw, 44px);
            line-height: 1.15;
        }

        .lrx-heading p {
            margin: 0;
            color: var(--lrx-muted);
            font-size: 17px;
            line-height: 1.7;
        }

        /* SERVICES */

        .lrx-service-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .lrx-service-card {
            padding: 30px;
            background: #fff;
            border: 1px solid var(--lrx-border);
            border-radius: 16px;
            transition: .3s ease;
        }

        .lrx-service-card:hover {
            transform: translateY(-7px);
            border-color: #9ed9af;
            box-shadow: var(--lrx-shadow);
        }

        .lrx-service-icon {
            width: 54px;
            height: 54px;
            display: grid;
            place-items: center;
            margin-bottom: 20px;
            color: var(--lrx-green);
            background: var(--lrx-light-green);
            border-radius: 14px;
            font-size: 23px;
            font-weight: 800;
        }

        .lrx-service-card h3 {
            margin: 0 0 10px;
            color: var(--lrx-text);
            font-size: 20px;
        }

        .lrx-service-card p {
            margin: 0;
            color: var(--lrx-muted);
            line-height: 1.7;
            font-size: 15px;
        }

        /* WHY US */

        .lrx-benefit-layout {
            display: grid;
            grid-template-columns: .85fr 1.15fr;
            align-items: center;
            gap: 70px;
        }

        .lrx-benefit-box {
            padding: 35px;
            background: var(--lrx-green);
            border-radius: 25px;
            color: #fff;
            box-shadow: 0 25px 55px rgba(22,163,74,.22);
        }

     .lrx-benefit-box h3 {
    margin: 0 0 15px;
    font-size: 30px;
    color: #FFF;
}

        .lrx-benefit-box p {
            margin: 0 0 25px;
            color: #e8fff0;
            line-height: 1.7;
        }

        .lrx-check-list {
            display: grid;
            gap: 16px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .lrx-check-list li {
            position: relative;
            padding-left: 34px;
            color: #31513a;
            line-height: 1.5;
        }

        .lrx-check-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 0;
            width: 23px;
            height: 23px;
            display: grid;
            place-items: center;
            color: var(--lrx-green);
            background: var(--lrx-light-green);
            border-radius: 50%;
            font-weight: bold;
        }

        /* PROCESS */

        .lrx-process-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .lrx-process-card {
            position: relative;
            padding: 30px 25px;
            background: #fff;
            border: 1px solid var(--lrx-border);
            border-radius: 16px;
        }

        .lrx-process-number {
            margin-bottom: 18px;
            color: var(--lrx-green);
            font-size: 36px;
            font-weight: 900;
            opacity: .25;
        }

        .lrx-process-card h3 {
            margin: 0 0 10px;
            font-size: 19px;
        }

        .lrx-process-card p {
            margin: 0;
            color: var(--lrx-muted);
            font-size: 14px;
            line-height: 1.7;
        }

        /* BRANDS */

        .lrx-brand-strip {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px;
            margin-top: 35px;
        }

        .lrx-brand {
            padding: 13px 20px;
            color: #31513a;
            background: #fff;
            border: 1px solid var(--lrx-border);
            border-radius: 9px;
            font-weight: 700;
            font-size: 14px;
        }

        /* FAQ */

        .lrx-faq-list {
            max-width: 850px;
            margin: auto;
            display: grid;
            gap: 14px;
        }

        .lrx-faq-item {
            padding: 22px 25px;
            background: #fff;
            border: 1px solid var(--lrx-border);
            border-radius: 12px;
        }

        .lrx-faq-item h3 {
            margin: 0 0 9px;
            color: var(--lrx-text);
            font-size: 17px;
        }

        .lrx-faq-item p {
            margin: 0;
            color: var(--lrx-muted);
            line-height: 1.7;
            font-size: 15px;
        }

        /* CTA */

        .lrx-final-cta {
            padding: 75px 0;
            background: var(--lrx-green);
            text-align: center;
        }

        .lrx-final-cta h2 {
            max-width: 800px;
            margin: 0 auto 15px;
            color: #fff;
            font-size: clamp(30px, 4vw, 46px);
        }

        .lrx-final-cta p {
            max-width: 680px;
            margin: 0 auto 28px;
            color: #eafff0;
            line-height: 1.7;
        }

        .lrx-white-btn {
            color: var(--lrx-dark-green);
            background: #fff;
        }

        .lrx-white-btn:hover {
            color: #fff;
            background: #123d22;
        }

        /* RESPONSIVE */

        @media (max-width: 991px) {

            .lrx-hero {
                padding: 70px 0;
            }

            .lrx-hero-grid,
            .lrx-benefit-layout {
                grid-template-columns: 1fr;
                gap: 45px;
            }

            .lrx-device-area {
                min-height: 350px;
            }

            .lrx-service-grid {
                grid-template-columns: repeat(2, 1fr);
            }

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

            .lrx-stat-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .lrx-stat-item:nth-child(2) {
                border-right: 0;
            }

            .lrx-stat-item:nth-child(-n+2) {
                border-bottom: 1px solid var(--lrx-border);
            }
        }

        @media (max-width: 767px) {

            .lrx-section {
                padding: 65px 0;
            }

            .lrx-hero {
                padding: 55px 0 70px;
            }

            .lrx-hero h1 {
                letter-spacing: -1px;
            }

            .lrx-hero-description {
                font-size: 16px;
            }

            .lrx-device-area {
                min-height: 270px;
            }

            .lrx-screen {
                height: 190px;
            }

            .lrx-base {
                margin: 0 -18px;
            }

            .lrx-service-grid,
            .lrx-process-grid {
                grid-template-columns: 1fr;
            }

            .lrx-stat-grid {
                grid-template-columns: 1fr 1fr;
            }

            .lrx-stat-item {
                padding: 20px 10px;
            }

            .lrx-stat-number {
                font-size: 23px;
            }

            .lrx-stat-label {
                font-size: 12px;
            }

            .lrx-button-row {
                flex-direction: column;
            }

            .lrx-btn {
                width: 100%;
            }
        }

        @media (max-width: 480px) {

            .lrx-wrap {
                width: 90%;
            }

            .lrx-stat-grid {
                grid-template-columns: 1fr;
            }

            .lrx-stat-item {
                border-right: 0;
                border-bottom: 1px solid var(--lrx-border);
            }

            .lrx-stat-item:last-child {
                border-bottom: 0;
            }

            .lrx-screen {
                height: 165px;
            }

            .lrx-benefit-box {
                padding: 25px;
            }
        }
        
        .page {
    text-align: left !important;
}