/* Start:/gibridnye-elektrostantsii/styles.css?179060846720891*/
  :root {
      --bg: #f2f5f8;
      --card: #ffffff;
      --ink: #182a44;
      --ink2: #243850;
      --muted: #637184;
      --line: #dce5ee;
      --line2: #e8eef4;
      --blue: #1d4f86;
      --blue2: #0e3765;
      --green: #4f8b5c;
      --gold: #c99a32;
      --gold2: #e3b64b;
      --soft: #f7fafc;
      --shadow: 0 18px 50px rgba(18, 42, 68, .11);
      --shadow2: 0 10px 28px rgba(18, 42, 68, .07);
      --r: 28px;
      --max: 1180px;
  }

  .container {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 24px;
  }

  .section {
      padding: 64px 0;
  }

  .section.tight {
      padding: 46px 0;
  }

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

  h1 {
      font-size: 48px;
      line-height: 1.06;
      letter-spacing: -1px;
      margin-bottom: 22px;
      color: #15243b;
      max-width: 710px;
  }

  h2 {
      font-size: 34px;
      line-height: 1.15;
      letter-spacing: -.45px;
      color: #15243b;
      margin-bottom: 12px;
  }

  h3 {
      font-size: 20px;
      line-height: 1.25;
      color: #172a44;
      margin-bottom: 8px;
  }

  .lead {
      font-size: 18px;
      line-height: 1.62;
      color: var(--muted);
      max-width: 780px;
      margin-bottom: 0;
  }

  .section-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 28px;
      margin-bottom: 30px;
  }

  .section-head .lead {
      max-width: 760px;
  }

  .badge {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 8px 13px;
      border-radius: 999px;
      background: #fff7e6;
      color: #8b5f16;
      border: 1px solid #e8cf97;
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 18px;
  }

  .badge:before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--gold);
      box-shadow: 0 0 0 4px rgba(201, 154, 50, .17);
  }

  .pill {
      display: inline-flex;
      padding: 8px 13px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: #fff;
      color: #516076;
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
  }

  .btns {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px;
  }

  .hy-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 50px;
      padding: 14px 23px;
      border-radius: 12px;
      font-weight: 900;
      border: 1px solid transparent;
      cursor: pointer;
      transition: .18s ease;
      white-space: nowrap;
  }

  .hy-btn.primary {
      color: #fff;
      background: linear-gradient(180deg, var(--gold2), var(--gold));
      box-shadow: 0 14px 28px rgba(201, 154, 50, .24);
  }

  .hy-btn.secondary {
      background: #fff;
      color: #8b5f16;
      border-color: #ddba62;
  }

  .hy-btn.dark {
      color: #fff;
      background: #183354;
  }

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

  .hero {
      padding: 34px 0 58px;
  }

  .hero-wrap {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 465px;
      gap: 34px;
      align-items: stretch;
      background:
          linear-gradient(135deg, #fff 0%, #fff 56%, #f0f5f8 100%);
      border: 1px solid var(--line);
      border-radius: 34px;
      box-shadow: var(--shadow);
      overflow: hidden;
      padding: 46px;
  }

  .hero-copy {
      position: relative;
      z-index: 2;
  }

  .hero-copy .lead {
      max-width: 650px;
  }

  .hero-meta {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 34px;
      max-width: 680px;
  }

  .meta-card {
      background: #f8fbfd;
      border: 1px solid var(--line2);
      border-radius: 18px;
      padding: 15px;
      min-height: 118px;
  }

  .meta-card b {
      display: block;
      color: #142846;
      font-size: 15px;
      margin-bottom: 6px;
  }

  .meta-card span {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.42;
  }

  .hero-photo {
      position: relative;
      overflow: hidden;
      border-radius: 26px;
      background: #102a48;
      min-height: 470px;
      box-shadow: 0 22px 42px rgba(16, 42, 72, .22);
      border: 1px solid rgba(255, 255, 255, .5);
  }

  .hero-photo img {
      width: 100%;
      height: 100%;
      min-height: 470px;
      object-fit: cover;
      object-position: center;
      filter: saturate(.98) contrast(1.03);
  }

  .hero-photo:after {
      content: "";
      position: absolute;
      inset: 0;
      background:
          linear-gradient(180deg, rgba(14, 33, 55, 0) 42%, rgba(14, 33, 55, .86) 100%),
          linear-gradient(90deg, rgba(14, 33, 55, .12), rgba(14, 33, 55, 0));
  }

  .hero-photo-caption {
      position: absolute;
      z-index: 2;
      left: 22px;
      right: 22px;
      bottom: 22px;
      color: #fff;
  }

  .hero-photo-caption b {
      display: block;
      font-size: 20px;
      margin-bottom: 7px;
  }

  .hero-photo-caption span {
      display: block;
      color: rgba(255, 255, 255, .82);
      font-size: 14px;
      line-height: 1.45;
  }

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

  .task {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 24px;
      padding: 26px 24px;
      min-height: 232px;
      box-shadow: var(--shadow2);
      position: relative;
      overflow: hidden;
  }

  .task:before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--blue), var(--green));
      opacity: .75;
  }

  .task-tag {
      display: inline-flex;
      margin-bottom: 18px;
      padding: 7px 10px;
      border-radius: 999px;
      color: #2f5f3b;
      background: #eef7f0;
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .3px;
  }

  .task:nth-child(2) .task-tag,
  .task:nth-child(4) .task-tag {
      color: #244f82;
      background: #eef5ff;
  }

  .task p {
      color: var(--muted);
      font-size: 15px;
      margin: 0;
  }

  .architecture-shell {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 32px;
      box-shadow: var(--shadow);
      padding: 34px;
  }

  .architecture {
      position: relative;
      min-height: 610px;
      border-radius: 26px;
      overflow: hidden;
      background:
          linear-gradient(90deg, rgba(29, 79, 134, .055) 1px, transparent 1px),
          linear-gradient(180deg, rgba(29, 79, 134, .055) 1px, transparent 1px),
          radial-gradient(circle at 50% 46%, rgba(79, 139, 92, .12), transparent 34%),
          #f7fafc;
      background-size: 38px 38px, 38px 38px, auto, auto;
      border: 1px solid #dce5ee;
  }

  .arch-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
  }

  .arch-node {
      position: absolute;
      z-index: 2;
      width: 180px;
      min-height: 112px;
      border-radius: 18px;
      background: #fff;
      border: 1px solid #d6e1eb;
      box-shadow: 0 16px 30px rgba(18, 42, 68, .08);
      padding: 18px 16px;
      text-align: left;
  }

  .arch-node b {
      display: block;
      font-size: 16px;
      color: #142846;
      margin-bottom: 5px;
  }

  .arch-node span {
      display: block;
      color: #67758a;
      font-size: 12px;
      line-height: 1.35;
  }

  .arch-node.source {
      border-left: 5px solid var(--green);
  }

  .arch-node.control {
      border-left: 5px solid var(--blue);
  }

  .arch-node.reserve {
      border-left: 5px solid #3b4e90;
  }

  .n-solar {
      left: 6%;
      top: 12%;
  }

  .n-wind {
      left: 6%;
      top: 38%;
  }

  .n-dga {
      left: 6%;
      top: 65%;
  }

  .n-bess {
      left: 42%;
      top: 17%;
  }

  .n-ems {
      left: 42%;
      top: 58%;
  }

  .n-grid {
      right: 6%;
      top: 18%;
  }

  .n-load {
      right: 6%;
      top: 60%;
  }

  .arch-core {
      position: absolute;
      z-index: 1;
      left: 37%;
      top: 8%;
      width: 300px;
      height: 510px;
      border-radius: 26px;
      border: 1px dashed rgba(79, 139, 92, .38);
      background: rgba(255, 255, 255, .36);
  }

  .flow-label {
      position: absolute;
      z-index: 4;
      padding: 6px 10px;
      border-radius: 999px;
      background: #fff;
      border: 1px solid #d9e7dc;
      color: #43794c;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
      box-shadow: 0 6px 16px rgba(18, 42, 68, .06);
  }

  .flow-label.blue {
      color: #385ba0;
      border-color: #d9e2f4;
  }

  .fl-gen {
      left: 28%;
      top: 18%;
  }

  .fl-res {
      left: 27%;
      top: 71%;
  }

  .fl-acc {
      left: 45%;
      top: 46%;
  }

  .fl-pr {
      right: 24%;
      top: 45%;
  }

  .fl-grid {
      right: 20%;
      top: 42%;
  }

  .module-layout {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 26px;
      align-items: stretch;
  }

  .module-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
  }

  .module {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 22px;
      box-shadow: var(--shadow2);
      min-height: 164px;
  }

  .module b {
      display: block;
      color: #142846;
      margin-bottom: 8px;
      font-size: 17px;
  }

  .module p {
      color: var(--muted);
      margin: 0;
      font-size: 14px;
  }

  .module-accent {
      background: linear-gradient(135deg, #173457, #265f91);
      color: #fff;
      border-radius: 26px;
      padding: 30px;
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
  }

  .module-accent:after {
      content: "";
      position: absolute;
      right: -120px;
      bottom: -120px;
      width: 280px;
      height: 280px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .12);
  }

  .module-accent h2 {
      color: #fff;
  }

  .module-accent p {
      color: rgba(255, 255, 255, .82);
  }

  .module-accent .mini-specs {
      display: grid;
      gap: 10px;
      margin-top: 24px;
      position: relative;
      z-index: 2;
  }

  .mini-spec {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, .18);
      padding-bottom: 10px;
      color: rgba(255, 255, 255, .82);
  }

  .mini-spec b {
      color: #fff;
  }

  .split {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 28px;
      align-items: stretch;
  }

  .image-card {
      border-radius: 28px;
      overflow: hidden;
      border: 1px solid var(--line);
      background: #fff;
      box-shadow: var(--shadow);
      min-height: 480px;
      position: relative;
  }

  .image-card img {
      width: 100%;
      height: 100%;
      min-height: 480px;
      object-fit: cover;
      object-position: center;
  }

  .image-card:after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 45%;
      background: linear-gradient(0deg, rgba(14, 33, 55, .83), rgba(14, 33, 55, 0));
  }

  .image-text {
      position: absolute;
      z-index: 2;
      left: 24px;
      right: 24px;
      bottom: 22px;
      color: #fff;
  }

  .image-text b {
      display: block;
      font-size: 22px;
      margin-bottom: 6px;
  }

  .image-text span {
      display: block;
      color: rgba(255, 255, 255, .82);
  }

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

  .feature {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 20px 22px;
      box-shadow: 0 8px 24px rgba(18, 42, 68, .055);
  }

  .feature b {
      display: block;
      color: #142846;
      margin-bottom: 5px;
  }

  .feature p {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
  }

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

  .param {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 18px;
      min-height: 118px;
      box-shadow: 0 8px 22px rgba(18, 42, 68, .05);
  }

  .param b {
      display: block;
      color: #142846;
      margin-bottom: 6px;
  }

  .param span {
      display: block;
      color: var(--muted);
      font-size: 14px;
  }

  .steps {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 12px;
      margin-top: 28px;
  }

  .step {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 20px;
      box-shadow: var(--shadow2);
      padding: 22px 18px;
      min-height: 210px;
      position: relative;
  }

  .step:before {
      content: "";
      display: block;
      width: 42px;
      height: 4px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--gold), var(--green));
      margin-bottom: 18px;
  }

  .step p {
      color: var(--muted);
      font-size: 14px;
      margin: 0;
  }

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

  .data-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 18px;
      box-shadow: 0 8px 20px rgba(18, 42, 68, .045);
  }

  .data-card b {
      display: block;
      margin-bottom: 4px;
      color: #142846;
  }

  .data-card span {
      color: var(--muted);
      font-size: 14px;
  }

  .final {
      display: grid;
      grid-template-columns: .78fr 1fr;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 32px;
      box-shadow: var(--shadow);
      overflow: hidden;
  }

  .final-left {
      padding: 42px;
      border-right: 1px solid var(--line);
      background:
          radial-gradient(circle at 28% 20%, rgba(201, 154, 50, .13), transparent 30%),
          linear-gradient(135deg, #fffdf8, #f3f7fa);
  }

  .final-left h2 {
      margin-bottom: 14px;
  }

  .final-note {
      margin-top: 24px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 20px;
      color: var(--muted);
  }

  .final-form {
      padding: 42px;
  }

  .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px;
      margin-top: 22px;
  }

  .field.full {
      grid-column: 1/-1;
  }

  .field label {
      display: block;
      font-size: 12px;
      font-weight: 900;
      color: #69768b;
      text-transform: uppercase;
      letter-spacing: .45px;
      margin-bottom: 7px;
  }

  .field input,
  .field textarea {
      width: 100%;
      border: 1px solid #d7e2ee;
      border-radius: 13px;
      padding: 14px 15px;
      outline: none;
      color: var(--ink);
      background: #fff;
  }

  .field textarea {
      min-height: 96px;
      resize: vertical;
  }

  .form-note {
      margin-top: 12px;
      color: var(--muted);
      font-size: 13px;
  }

  .form-button {
      width: 100%;
      margin-top: 16px;
  }


  .architecture-tiles {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 26px;
  }

  .arch-tile {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: 24px;
      min-height: 210px;
      box-shadow: var(--shadow2);
      position: relative;
      overflow: hidden;
  }

  .arch-tile:before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--blue), var(--green));
      opacity: .82;
  }

  .arch-tile.accent:before {
      background: linear-gradient(90deg, var(--gold), var(--green));
  }

  .arch-tile .tile-label {
      display: inline-flex;
      align-items: center;
      margin-bottom: 18px;
      padding: 7px 10px;
      border-radius: 999px;
      background: #f1f6fb;
      color: #315b87;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .3px;
      text-transform: uppercase;
  }

  .arch-tile.accent .tile-label {
      background: #fff7e8;
      color: #8b5f16;
  }

  .arch-tile h3 {
      margin-bottom: 10px;
      font-size: 21px;
  }

  .arch-tile p {
      margin: 0;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.55;
  }

  .arch-summary {
      margin-top: 18px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
  }

  .arch-summary-card {
      background: linear-gradient(135deg, #173457, #265f91);
      color: #fff;
      border-radius: 22px;
      padding: 24px;
      box-shadow: var(--shadow2);
  }

  .arch-summary-card.light {
      background: #fff;
      color: var(--ink);
      border: 1px solid var(--line);
  }

  .arch-summary-card h3 {
      color: inherit;
  }

  .arch-summary-card p {
      color: rgba(255, 255, 255, .82);
      margin: 0;
  }

  .arch-summary-card.light p {
      color: var(--muted);
  }

  .operation-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      align-items: start;
  }

  .operation-panel {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 28px;
      box-shadow: var(--shadow);
      padding: 30px;
      min-height: 100%;
  }

  .operation-panel.blue {
      background: linear-gradient(135deg, #173457, #265f91);
      color: #fff;
      border: 0;
  }

  .operation-panel.blue h2,
  .operation-panel.blue h3 {
      color: #fff;
  }

  .operation-panel.blue p,
  .operation-panel.blue .op-list li {
      color: rgba(255, 255, 255, .82);
  }

  .op-list {
      list-style: none;
      padding: 0;
      margin: 22px 0 0;
      display: grid;
      gap: 14px;
  }

  .op-list li {
      position: relative;
      padding-left: 22px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.5;
  }

  .op-list li:before {
      content: "";
      position: absolute;
      left: 0;
      top: .55em;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--gold);
  }

  .op-card-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 22px;
  }

  .op-card {
      background: #f8fbfd;
      border: 1px solid var(--line2);
      border-radius: 18px;
      padding: 18px;
      min-height: 142px;
  }

  .op-card b {
      display: block;
      color: #142846;
      margin-bottom: 6px;
  }

  .op-card span {
      display: block;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.45;
  }


.select {
    border: 1px solid #d7e2ee;
    border-radius: 13px;
    padding: 14px 15px;
    background: #fff;
    color: var(--ink);
    width: 100%
}

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

      .hero-photo,
      .hero-photo img {
          min-height: 420px;
      }

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

      .module-layout,
      .split,
      .final {
          grid-template-columns: 1fr;
      }

      .final-left {
          border-right: 0;
          border-bottom: 1px solid var(--line);
      }

      .steps {
          grid-template-columns: repeat(3, 1fr);
      }

      .data-grid,
      .params,
      .architecture-tiles {
          grid-template-columns: repeat(2, 1fr);
      }

      .arch-summary,
      .operation-grid {
          grid-template-columns: 1fr;
      }
  }

  @media(max-width:860px) {
      .container {
          padding: 0 18px;
      }

      .section {
          padding: 48px 0;
      }

      h1 {
          font-size: 36px;
      }

      h2 {
          font-size: 28px;
      }

      .hero-wrap {
          padding: 24px;
          border-radius: 24px;
      }

      .hero-meta,
      .task-grid,
      .module-list,
      .steps,
      .data-grid,
      .params,
      .form-grid,
      .architecture-tiles,
      .op-card-grid {
          grid-template-columns: 1fr;
      }

      .btns .hy-btn {
          width: 100%;
      }

      .architecture-shell {
          padding: 18px;
          border-radius: 24px;
      }

      .architecture {
          min-height: auto;
          display: grid;
          gap: 12px;
          padding: 16px;
      }

      .arch-svg,
      .flow-label,
      .arch-core {
          display: none;
      }

      .arch-node {
          position: static;
          width: 100%;
          min-height: auto;
          border-left-width: 5px;
      }

      .hero-photo,
      .hero-photo img,
      .image-card,
      .image-card img {
          min-height: 300px;
      }

      .final-form,
      .final-left {
          padding: 26px;
      }
  }
/* End */
/* /gibridnye-elektrostantsii/styles.css?179060846720891 */