/* =========================================================
   SOLAR — KIVITELEZÉS
   ========================================================= */

.ct-solar-build {
  position: relative;

  padding: 140px 0;

  background: var(--ct-bg);
}

.ct-solar-build__visual {
  position: relative;

  min-height: 520px;

  overflow: hidden;

  background: var(--ct-surface);

  clip-path: polygon(0 0, 93% 0, 100% 14%, 100% 100%, 7% 100%, 0 86%);
}

.ct-solar-build__image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter: saturate(0.62) contrast(1.08) brightness(0.62);

  transform: scale(1.02);
}

.ct-solar-build__overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(180deg, rgba(7, 10, 15, 0.08), rgba(7, 10, 15, 0.7)),
    linear-gradient(90deg, rgba(47, 48, 130, 0.22), transparent 50%);
}

/* BADGE */

.ct-solar-build__badge {
  position: absolute;

  left: 34px;
  bottom: 34px;

  z-index: 4;

  display: flex;
  align-items: center;

  gap: 14px;

  padding: 13px 16px;

  background: rgba(7, 10, 15, 0.78);

  border-left: 2px solid #00aeef;

  backdrop-filter: blur(8px);
}

.ct-solar-build__badge span {
  color: #00aeef;

  font-family: monospace;
  font-size: 10px;
}

.ct-solar-build__badge strong {
  color: #ffffff;

  font-size: 10px;
  font-weight: 600;

  letter-spacing: 0.16em;
}

/* TECH LABELS */

.ct-solar-build__tech {
  position: absolute;

  right: 34px;
  top: 34px;

  z-index: 4;

  display: flex;

  gap: 10px;
}

.ct-solar-build__tech span {
  padding: 8px 10px;

  color: rgba(255, 255, 255, 0.72);

  font-family: monospace;
  font-size: 9px;

  letter-spacing: 0.12em;

  background: rgba(7, 10, 15, 0.62);

  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* CONTENT */

.ct-solar-build__content {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(320px, 0.9fr);

  gap: clamp(60px, 8vw, 140px);

  margin-top: 70px;

  align-items: start;
}

.ct-solar-build__title {
  margin: 0;

  font-family: "Space Grotesk", sans-serif;

  font-size: clamp(52px, 5vw, 88px);
  font-weight: 600;

  line-height: 0.94;
  letter-spacing: -0.05em;
}

.ct-solar-build__title span {
  display: block;

  color: #8d98a6;
}

.ct-solar-build__description {
  padding-top: 36px;
}

.ct-solar-build__description p {
  margin: 0;

  color: #a8b1bc;

  font-size: 16px;
  line-height: 1.75;
}

.ct-solar-build__description p + p {
  margin-top: 20px;
}

/* STEPS */

.ct-solar-build__steps {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  margin-top: 70px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.ct-solar-build__step {
  position: relative;

  min-height: 210px;

  padding: 30px 28px 20px;

  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.ct-solar-build__step:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.ct-solar-build__step > span {
  display: block;

  margin-bottom: 42px;

  color: #00aeef;

  font-family: monospace;
  font-size: 10px;

  letter-spacing: 0.1em;
}

.ct-solar-build__step h3 {
  margin: 0;

  font-family: "Space Grotesk", sans-serif;

  font-size: 22px;
  font-weight: 600;

  letter-spacing: -0.03em;
}

.ct-solar-build__step p {
  margin: 12px 0 0;

  color: #7f8a96;

  font-size: 14px;
  line-height: 1.65;
}

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

@media (max-width: 1000px) {
  .ct-solar-build__content {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  .ct-solar-build__description {
    padding-top: 0;

    max-width: 720px;
  }

  .ct-solar-build__steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .ct-solar-build {
    padding: 90px 0;
  }

  .ct-solar-build__visual {
    min-height: 390px;

    clip-path: polygon(0 0, 88% 0, 100% 12%, 100% 100%, 12% 100%, 0 88%);
  }

  .ct-solar-build__tech {
    display: none;
  }

  .ct-solar-build__badge {
    left: 20px;
    bottom: 20px;
  }

  .ct-solar-build__content {
    margin-top: 50px;
  }

  .ct-solar-build__title {
    font-size: clamp(46px, 13vw, 64px);
  }

  .ct-solar-build__steps {
    grid-template-columns: 1fr;

    margin-top: 50px;
  }

  .ct-solar-build__step,
  .ct-solar-build__step:first-child {
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* =========================================================
   SOLAR — KARBANTARTÁS
   ========================================================= */

.ct-solar-maintenance {
  position: relative;

  padding: 150px 0;

  background:
    radial-gradient(
      circle at 15% 50%,
      rgba(0, 174, 239, 0.06),
      transparent 30%
    ),
    #0d1219;
}

.ct-solar-maintenance__grid {
  display: grid;

  grid-template-columns:
    minmax(300px, 0.72fr)
    minmax(0, 1.28fr);

  gap: clamp(70px, 9vw, 150px);

  align-items: center;
}

/* VISUAL */

.ct-solar-maintenance__visual {
  position: relative;
}

.ct-solar-maintenance__image-wrap {
  position: relative;

  min-height: 700px;

  overflow: hidden;

  background: var(--ct-surface);

  clip-path: polygon(13% 0, 100% 0, 100% 88%, 87% 100%, 0 100%, 0 12%);
}

.ct-solar-maintenance__image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter: saturate(0.52) contrast(1.1) brightness(0.58);

  transform: scale(1.02);
}

.ct-solar-maintenance__overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(180deg, rgba(7, 10, 15, 0.05), rgba(7, 10, 15, 0.68)),
    linear-gradient(135deg, rgba(0, 174, 239, 0.12), transparent 55%);
}

.ct-solar-maintenance__index {
  position: absolute;

  left: 28px;
  bottom: 28px;

  z-index: 4;

  display: flex;
  align-items: center;

  gap: 14px;

  padding: 12px 15px;

  background: rgba(7, 10, 15, 0.78);

  border-left: 2px solid #00aeef;

  backdrop-filter: blur(8px);
}

.ct-solar-maintenance__index span {
  color: #00aeef;

  font-family: monospace;
  font-size: 10px;
}

.ct-solar-maintenance__index strong {
  color: #ffffff;

  font-size: 9px;
  font-weight: 600;

  letter-spacing: 0.15em;
}

.ct-solar-maintenance__side-label {
  position: absolute;

  right: 18px;
  top: 50%;

  z-index: 4;

  color: rgba(255, 255, 255, 0.36);

  font-family: monospace;
  font-size: 9px;

  letter-spacing: 0.18em;

  writing-mode: vertical-rl;

  transform: translateY(-50%);
}

/* CONTENT */

.ct-solar-maintenance__content {
  position: relative;
}

.ct-solar-maintenance__title {
  margin: 0;

  font-family: "Space Grotesk", sans-serif;

  font-size: clamp(52px, 4.8vw, 84px);
  font-weight: 600;

  line-height: 0.95;
  letter-spacing: -0.05em;
}

.ct-solar-maintenance__title span {
  display: block;

  color: #8d98a6;
}

.ct-solar-maintenance__lead {
  max-width: 720px;

  margin: 32px 0 0;

  color: #a8b1bc;

  font-size: 16px;
  line-height: 1.75;
}

/* CHECKS */

.ct-solar-maintenance__checks {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 14px;

  margin-top: 52px;
}

.ct-solar-maintenance__check {
  min-height: 230px;

  padding: 24px;

  background: rgba(255, 255, 255, 0.025);

  border: 1px solid rgba(255, 255, 255, 0.08);

  clip-path: polygon(0 0, 92% 0, 100% 12%, 100% 100%, 0 100%);
}

.ct-solar-maintenance__check-head {
  display: flex;
  align-items: center;

  gap: 13px;

  padding-bottom: 20px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ct-solar-maintenance__check-head span {
  color: #00aeef;

  font-family: monospace;
  font-size: 10px;
}

.ct-solar-maintenance__check-head strong {
  color: #ffffff;

  font-family: "Space Grotesk", sans-serif;

  font-size: 18px;
  font-weight: 600;
}

.ct-solar-maintenance__check p {
  margin: 22px 0 0;

  color: #7f8a96;

  font-size: 14px;
  line-height: 1.7;
}

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

@media (max-width: 1000px) {
  .ct-solar-maintenance__grid {
    grid-template-columns: 1fr;

    gap: 60px;
  }

  .ct-solar-maintenance__image-wrap {
    min-height: 560px;
  }
}

@media (max-width: 760px) {
  .ct-solar-maintenance__checks {
    grid-template-columns: 1fr;
  }

  .ct-solar-maintenance__check {
    min-height: auto;
  }
}

@media (max-width: 620px) {
  .ct-solar-maintenance {
    padding: 90px 0;
  }

  .ct-solar-maintenance__image-wrap {
    min-height: 460px;
  }

  .ct-solar-maintenance__title {
    font-size: clamp(46px, 13vw, 64px);
  }

  .ct-solar-maintenance__side-label {
    display: none;
  }
}

/* =========================================================
   SOLAR — ÜZEMELTETÉS
   ========================================================= */

.ct-solar-operation {
  position: relative;

  padding: 150px 0;

  background: #090d13;
}

.ct-solar-operation__header {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(320px, 0.9fr);

  gap: clamp(60px, 8vw, 140px);

  align-items: end;

  margin-bottom: 70px;
}

.ct-solar-operation__title {
  margin: 0;

  font-family: "Space Grotesk", sans-serif;

  font-size: clamp(52px, 5vw, 88px);
  font-weight: 600;

  line-height: 0.94;
  letter-spacing: -0.05em;
}

.ct-solar-operation__title span {
  display: block;

  color: #8d98a6;
}

.ct-solar-operation__lead {
  margin: 0;

  color: #a8b1bc;

  font-size: 16px;
  line-height: 1.75;
}

/* MAIN PANEL */

.ct-solar-operation__panel {
  display: grid;

  grid-template-columns:
    minmax(300px, 0.8fr)
    minmax(0, 1.2fr);

  min-height: 620px;

  background:
    linear-gradient(135deg, rgba(0, 174, 239, 0.04), transparent 45%), #0d1219;

  border: 1px solid rgba(255, 255, 255, 0.07);

  clip-path: polygon(0 0, 96% 0, 100% 7%, 100% 100%, 4% 100%, 0 93%);
}

/* VISUAL */

.ct-solar-operation__visual {
  position: relative;

  min-height: 620px;

  overflow: hidden;
}

.ct-solar-operation__image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter: saturate(0.45) contrast(1.12) brightness(0.52);

  transform: scale(1.02);
}

.ct-solar-operation__overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(90deg, rgba(7, 10, 15, 0.08), rgba(7, 10, 15, 0.72)),
    linear-gradient(180deg, transparent, rgba(7, 10, 15, 0.52));
}

.ct-solar-operation__visual-label {
  position: absolute;

  left: 28px;
  bottom: 28px;

  z-index: 4;

  display: flex;
  align-items: center;

  gap: 14px;

  padding: 12px 15px;

  background: rgba(7, 10, 15, 0.8);

  border-left: 2px solid #00aeef;
}

.ct-solar-operation__visual-label span {
  color: #00aeef;

  font-family: monospace;
  font-size: 10px;
}

.ct-solar-operation__visual-label strong {
  color: #ffffff;

  font-size: 9px;
  font-weight: 600;

  letter-spacing: 0.15em;
}

/* STATUS GRID */

.ct-solar-operation__status {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  padding: 34px;
}

.ct-solar-operation__card {
  position: relative;

  padding: 34px;

  border-left: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.ct-solar-operation__card:nth-child(2n) {
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.ct-solar-operation__card:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.ct-solar-operation__card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 55px;

  color: #63707d;

  font-family: monospace;
  font-size: 9px;

  letter-spacing: 0.14em;
}

.ct-solar-operation__card-top i {
  width: 7px;
  height: 7px;

  background: #00aeef;

  box-shadow: 0 0 0 5px rgba(0, 174, 239, 0.07);
}

.ct-solar-operation__card h3 {
  margin: 0;

  font-family: "Space Grotesk", sans-serif;

  font-size: 24px;
  font-weight: 600;

  letter-spacing: -0.03em;
}

.ct-solar-operation__card p {
  margin: 14px 0 0;

  color: #7f8a96;

  font-size: 14px;
  line-height: 1.7;
}

/* RESPONSIVE */

@media (max-width: 1000px) {
  .ct-solar-operation__header {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  .ct-solar-operation__lead {
    max-width: 720px;
  }

  .ct-solar-operation__panel {
    grid-template-columns: 1fr;
  }

  .ct-solar-operation__visual {
    min-height: 500px;
  }
}

@media (max-width: 700px) {
  .ct-solar-operation__status {
    grid-template-columns: 1fr;

    padding: 20px;
  }

  .ct-solar-operation__card,
  .ct-solar-operation__card:nth-child(2n),
  .ct-solar-operation__card:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .ct-solar-operation__card:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 620px) {
  .ct-solar-operation {
    padding: 90px 0;
  }

  .ct-solar-operation__title {
    font-size: clamp(46px, 13vw, 64px);
  }

  .ct-solar-operation__visual {
    min-height: 420px;
  }

  .ct-solar-operation__card {
    padding: 28px 20px;
  }

  .ct-solar-operation__card-top {
    margin-bottom: 35px;
  }
}

/* =========================================================
   SOLAR — MONITOROZÁS
   ========================================================= */

.ct-solar-monitoring {
  position: relative;

  padding: 150px 0;

  background:
    radial-gradient(
      circle at 75% 25%,
      rgba(0, 174, 239, 0.06),
      transparent 30%
    ),
    var(--ct-bg);
}

/* VISUAL */

.ct-solar-monitoring__visual {
  position: relative;

  min-height: 500px;

  overflow: hidden;

  background: #0d1219;

  clip-path: polygon(0 0, 95% 0, 100% 10%, 100% 100%, 5% 100%, 0 90%);
}

.ct-solar-monitoring__image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter: saturate(0.5) contrast(1.12) brightness(0.48);

  transform: scale(1.02);
}

.ct-solar-monitoring__overlay {
  position: absolute;

  inset: 0;

  background:
    linear-gradient(180deg, rgba(7, 10, 15, 0.12), rgba(7, 10, 15, 0.72)),
    linear-gradient(90deg, rgba(0, 174, 239, 0.1), transparent 45%);
}

/* HUD */

.ct-solar-monitoring__hud {
  position: absolute;

  inset: 0;

  z-index: 4;

  padding: 32px;
}

.ct-solar-monitoring__hud-top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  color: rgba(255, 255, 255, 0.5);

  font-family: monospace;
  font-size: 9px;

  letter-spacing: 0.15em;
}

.ct-solar-monitoring__status {
  display: flex;
  align-items: center;

  gap: 8px;
}

.ct-solar-monitoring__status i {
  width: 7px;
  height: 7px;

  background: #00aeef;

  box-shadow: 0 0 0 5px rgba(0, 174, 239, 0.08);
}

/* DATA STRIP */

.ct-solar-monitoring__data {
  position: absolute;

  left: 32px;
  right: 32px;
  bottom: 32px;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  background: rgba(7, 10, 15, 0.72);

  border: 1px solid rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(10px);
}

.ct-solar-monitoring__data-item {
  padding: 22px;

  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.ct-solar-monitoring__data-item:last-child {
  border-right: 0;
}

.ct-solar-monitoring__data-item span {
  display: block;

  margin-bottom: 12px;

  color: #00aeef;

  font-family: monospace;
  font-size: 9px;
}

.ct-solar-monitoring__data-item strong {
  display: block;

  color: #ffffff;

  font-size: 16px;
  font-weight: 600;

  letter-spacing: 0.08em;
}

.ct-solar-monitoring__data-item small {
  display: block;

  margin-top: 7px;

  color: #67727d;

  font-family: monospace;
  font-size: 8px;

  letter-spacing: 0.12em;
}

/* CONTENT */

.ct-solar-monitoring__content {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(320px, 0.9fr);

  gap: clamp(60px, 8vw, 140px);

  align-items: end;

  margin-top: 70px;
}

.ct-solar-monitoring__title {
  margin: 0;

  font-family: "Space Grotesk", sans-serif;

  font-size: clamp(52px, 5vw, 88px);
  font-weight: 600;

  line-height: 0.94;
  letter-spacing: -0.05em;
}

.ct-solar-monitoring__title span {
  display: block;

  color: #8d98a6;
}

.ct-solar-monitoring__lead {
  margin: 0;

  color: #a8b1bc;

  font-size: 16px;
  line-height: 1.75;
}

/* FEATURES */

.ct-solar-monitoring__features {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1px;

  margin-top: 70px;

  background: rgba(255, 255, 255, 0.08);
}

.ct-solar-monitoring__feature {
  min-height: 230px;

  padding: 30px;

  background: #0b1017;
}

.ct-solar-monitoring__feature > span {
  display: block;

  margin-bottom: 45px;

  color: #00aeef;

  font-family: monospace;
  font-size: 10px;
}

.ct-solar-monitoring__feature h3 {
  margin: 0;

  font-family: "Space Grotesk", sans-serif;

  font-size: 22px;
  font-weight: 600;

  letter-spacing: -0.03em;
}

.ct-solar-monitoring__feature p {
  margin: 12px 0 0;

  color: #7f8a96;

  font-size: 14px;
  line-height: 1.7;
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .ct-solar-monitoring__content {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  .ct-solar-monitoring__lead {
    max-width: 720px;
  }

  .ct-solar-monitoring__features {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .ct-solar-monitoring {
    padding: 90px 0;
  }

  .ct-solar-monitoring__visual {
    min-height: 430px;
  }

  .ct-solar-monitoring__data {
    left: 20px;
    right: 20px;
    bottom: 20px;

    grid-template-columns: 1fr;
  }

  .ct-solar-monitoring__data-item {
    padding: 14px 16px;

    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .ct-solar-monitoring__data-item:last-child {
    border-bottom: 0;
  }

  .ct-solar-monitoring__data-item small {
    display: none;
  }

  .ct-solar-monitoring__content {
    margin-top: 50px;
  }

  .ct-solar-monitoring__title {
    font-size: clamp(46px, 13vw, 64px);
  }

  .ct-solar-monitoring__features {
    margin-top: 50px;
  }
}