:root {
      --navy: #0E2A47;
      --navy-dark: #071B2F;
      --amber: #F5A623;
      --green: #1E8E5A;
      --sky: #2E6FB0;

      --white: #FFFFFF;
      --light: #F4F6F8;
      --border: #E3E8EE;
      --muted: #A8B5C2;

      --font-heading: "Montserrat", sans-serif;
      --font-body: "Inter", sans-serif;
      --font-mono: "IBM Plex Mono", monospace;

      --radius: 16px;
      --container: 1440px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: var(--font-body);
      color: var(--white);
      background: var(--navy-dark);
      -webkit-font-smoothing: antialiased;
    }

    button,
    input,
    select {
      font: inherit;
    }

    button,
    a {
      -webkit-tap-highlight-color: transparent;
    }

    img {
      display: block;
      max-width: 100%;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    :focus-visible {
      outline: 3px solid rgba(245, 166, 35, .9);
      outline-offset: 4px;
    }

    /* =========================
       HEADER
    ========================== */

    .site-header {
      position: fixed;
      z-index: 100;
      top: 16px;
      left: 0;
      width: 100%;
      padding: 0 20px;
    }

    .header-inner {
      width: min(100%, var(--container));
      min-height: 72px;
      margin: 0 auto;
      padding: 10px 12px 10px 22px;

      display: flex;
      align-items: center;
      gap: 28px;

      border: 1px solid rgba(255,255,255,.15);
      border-radius: 16px;

      background: rgba(14, 42, 71, .62);
      box-shadow:
        0 20px 50px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.08);

      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    .logo-icon {
      width: 42px;
      height: 42px;
      position: relative;

      display: grid;
      place-items: center;

      border-radius: 12px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
    }

    .logo-icon svg {
      width: 26px;
      height: 26px;
    }

    .logo-text {
      font-family: var(--font-heading);
      font-size: 16px;
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -.02em;
    }

    .logo-text span {
      display: block;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: .16em;
      color: rgba(255,255,255,.62);
      margin-top: 4px;
    }

    .main-nav {
      display: flex;
      align-items: center;
      gap: 26px;
      margin-left: auto;
    }

    .main-nav a {
      position: relative;
      font-size: 14px;
      font-weight: 500;
      color: rgba(255,255,255,.82);
      transition: color .25s ease;
    }

    .main-nav a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -7px;
      width: 100%;
      height: 2px;

      background: var(--amber);

      transform: scaleX(0);
      transform-origin: left;
      transition: transform .25s ease;
    }

    .main-nav a:hover {
      color: var(--white);
    }

    .main-nav a:hover::after {
      transform: scaleX(1);
    }

    .header-phone {
      margin-left: 6px;
      white-space: nowrap;
    }

    .header-phone strong {
      display: block;
      font-size: 15px;
      font-weight: 600;
    }

    .header-phone span {
      display: block;
      margin-top: 2px;
      font-size: 10px;
      color: rgba(255,255,255,.55);
    }

    .language-switch {
      display: flex;
      padding: 3px;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 10px;
    }

    .lang-btn {
      border: 0;
      padding: 8px 10px;
      border-radius: 8px;
      background: transparent;
      color: rgba(255,255,255,.65);
      cursor: pointer;
      transition: .2s ease;
    }

    .lang-btn.is-active {
      color: var(--amber);
      background: rgba(255,255,255,.08);
    }

    /* =========================
       BUTTONS
    ========================== */

    .btn {
      border: 0;
      cursor: pointer;

      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;

      min-height: 52px;
      padding: 0 22px;

      border-radius: 12px;

      font-family: var(--font-body);
      font-weight: 700;
      font-size: 15px;

      transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
    }

    .btn-primary {
      background: var(--amber);
      color: var(--navy);
      box-shadow: 0 10px 28px rgba(245,166,35,.18);
    }

    .btn-primary:hover {
      transform: translateY(-3px);
      box-shadow:
        0 16px 34px rgba(245,166,35,.28),
        0 0 0 1px rgba(245,166,35,.08);
    }

    .header-cta {
      flex-shrink: 0;
    }

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

    .hero {
      position: relative;
      isolation: isolate;
      min-height: max(90vh, 760px);
      overflow: hidden;

      padding:
        clamp(130px, 12vw, 170px)
        20px
        64px;

      display: flex;
      align-items: center;

      background:
        radial-gradient(
          circle at 76% 25%,
          rgba(46,111,176,.30),
          transparent 35%
        ),
        linear-gradient(
          122deg,
          #071B2F 0%,
          #0E2A47 48%,
          #123B64 100%
        );
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -3;

      background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);

      background-size: 50px 50px;

      -webkit-mask-image:
        linear-gradient(to right, black, transparent 75%);
      mask-image:
        linear-gradient(to right, black, transparent 75%);
    }

    .hero-glow {
      position: absolute;
      z-index: -2;
      top: 16%;
      left: 37%;

      width: 420px;
      height: 420px;
      border-radius: 50%;

      background: rgba(46,111,176,.18);
      filter: blur(100px);
    }

    .hero-inner {
      width: min(100%, var(--container));
      margin: 0 auto;

      display: grid;
      grid-template-columns:
        minmax(0, 1.02fr)
        minmax(420px, .98fr);

      gap: clamp(36px, 6vw, 90px);
      align-items: center;
    }

    .hero-content {
      position: relative;
      z-index: 4;
      max-width: 790px;
    }

    .hero-badge {
      width: fit-content;

      display: inline-flex;
      align-items: center;
      gap: 10px;

      padding: 9px 14px;

      border: 1px solid rgba(255,255,255,.28);
      border-radius: 999px;

      background: rgba(255,255,255,.06);
      backdrop-filter: blur(12px);

      font-size: 13px;
      font-weight: 600;
      color: rgba(255,255,255,.88);
    }

    .hero-badge::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--amber);
      box-shadow: 0 0 0 5px rgba(245,166,35,.10);
    }

    .hero h1 {
      margin: 26px 0 22px;

      max-width: 820px;

      font-family: var(--font-heading);
      font-size: clamp(38px, 4.15vw, 72px);
      font-weight: 800;
      line-height: 1.04;
      letter-spacing: -.04em;

      text-wrap: balance;
    }

    .hero h1 .accent {
      color: var(--amber);
    }

    .hero-subtitle {
      max-width: 680px;
      margin: 0;

      color: rgba(255,255,255,.72);
      font-size: clamp(16px, 1.3vw, 19px);
      line-height: 1.65;
    }

    /* =========================
       FORM
    ========================== */

    .hero-form {
      margin-top: 34px;
      padding: 14px;

      display: grid;
      grid-template-columns:
        minmax(180px, 1.2fr)
        minmax(150px, .8fr)
        auto;

      gap: 10px;

      border: 1px solid rgba(255,255,255,.18);
      border-radius: 16px;

      background: rgba(255,255,255,.10);

      box-shadow:
        0 24px 60px rgba(0,0,0,.17),
        inset 0 1px 0 rgba(255,255,255,.06);

      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    .form-field {
      position: relative;
    }

    .form-field label {
      position: absolute;
      z-index: 2;
      left: 16px;
      top: 10px;

      font-size: 10px;
      font-weight: 500;
      color: rgba(255,255,255,.50);

      pointer-events: none;
    }

    .form-field input,
    .form-field select {
      width: 100%;
      height: 62px;
      padding: 23px 16px 8px;

      border: 1px solid rgba(255,255,255,.13);
      border-radius: 11px;

      outline: none;

      background: rgba(14,42,71,.52);
      color: var(--white);

      transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
    }

    .form-field input::placeholder {
      color: rgba(255,255,255,.55);
    }

    .form-field input:focus,
    .form-field select:focus {
      border-color: var(--amber);
      background: rgba(14,42,71,.72);
      box-shadow: 0 0 0 3px rgba(245,166,35,.12);
    }

    .form-field select {
      appearance: none;

      background-image:
        linear-gradient(45deg, transparent 50%, white 50%),
        linear-gradient(135deg, white 50%, transparent 50%);

      background-position:
        calc(100% - 19px) 30px,
        calc(100% - 14px) 30px;

      background-size: 5px 5px;
      background-repeat: no-repeat;
    }

    .form-field select option {
      color: var(--navy);
      background: white;
    }

    .hero-form .btn {
      min-height: 62px;
      padding-inline: 26px;
      white-space: nowrap;
    }

    .form-note {
      margin-top: 10px;

      display: flex;
      align-items: center;
      gap: 7px;

      font-size: 11px;
      color: rgba(255,255,255,.48);
    }

    .form-note svg {
      width: 13px;
      height: 13px;
      color: var(--amber);
    }

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

    .trust-row {
      display: flex;
      align-items: stretch;
      flex-wrap: wrap;

      margin-top: 36px;
    }

    .trust-item {
      min-height: 72px;
      padding: 0 28px;

      display: flex;
      flex-direction: column;
      justify-content: center;

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

    .trust-item:first-child {
      padding-left: 0;
    }

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

    .trust-title {
      margin-bottom: 8px;

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

      color: rgba(255,255,255,.60);
    }

    .rating-stars {
      color: var(--amber);
      letter-spacing: 2px;
      font-size: 17px;
    }

    .rating-meta {
      margin-top: 4px;
      font-size: 11px;
      color: rgba(255,255,255,.52);
    }

    .object-count {
      font-family: var(--font-mono);
      font-size: 27px;
      font-weight: 500;
      color: white;
    }

    .object-count span {
      color: var(--amber);
    }

    .brand-list {
      display: flex;
      align-items: center;
      gap: 18px;

      font-family: var(--font-heading);
      font-weight: 700;
      color: rgba(255,255,255,.86);
    }

    .brand {
      opacity: .86;
      transition:
        opacity .2s ease,
        transform .2s ease;
    }

    .brand:hover {
      opacity: 1;
      transform: translateY(-2px);
    }

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

    .hero-media {
      position: absolute;
      z-index: -1;
      top: 0;
      right: 0;

      width: 52%;
      height: 100%;

      overflow: hidden;
    }

    .hero-photo {
      position: absolute;
      inset: -4%;

      background:
        linear-gradient(
          rgba(20,40,60,.06),
          rgba(20,40,60,.08)
        ),
        url("../img/1d.png") center / cover no-repeat;

      transform: scale(1.04);
      will-change: transform;
    }

    /*
      Если реального изображения пока нет,
      можно временно добавить класс .placeholder
      к .hero-photo
    */
    .hero-photo.placeholder {
      display: grid;
      place-items: center;

      background:
        linear-gradient(
          145deg,
          #315C7D,
          #183B59
        );
    }

    .hero-photo.placeholder::after {
      content: "РЕАЛЬНЕ ФОТО ОБ’ЄКТА · СОНЯЧНІ ПАНЕЛІ НА ДАХУ";
      max-width: 260px;

      padding: 14px 18px;

      border: 1px dashed rgba(255,255,255,.45);
      border-radius: 12px;

      background: rgba(14,42,71,.34);

      font-family: var(--font-mono);
      font-size: 11px;
      line-height: 1.5;
      text-align: center;

      color: rgba(255,255,255,.72);
    }

    .hero-media::after {
      content: "";
      position: absolute;
      inset: 0;

      background:
        linear-gradient(
          90deg,
          #0E2A47 0%,
          rgba(14,42,71,.94) 8%,
          rgba(14,42,71,.60) 25%,
          rgba(14,42,71,.10) 60%,
          rgba(14,42,71,.02) 100%
        ),
        linear-gradient(
          0deg,
          rgba(7,27,47,.55),
          transparent 40%
        );

      pointer-events: none;
    }

    /* =========================
       FLOATING MESSENGERS
    ========================== */

    .messengers {
      position: fixed;
      z-index: 110;
      right: 20px;
      bottom: 28px;

      display: flex;
      flex-direction: column;
      gap: 9px;
    }

    .messenger {
      width: 48px;
      height: 48px;

      display: grid;
      place-items: center;

      border: 1px solid rgba(255,255,255,.15);
      border-radius: 14px;

      background: rgba(14,42,71,.82);
      backdrop-filter: blur(14px);

      box-shadow: 0 12px 30px rgba(0,0,0,.18);

      transition:
        transform .2s ease,
        background .2s ease;
    }

    .messenger:hover {
      transform: translateY(-3px);
      background: var(--sky);
    }

    .messenger svg {
      width: 21px;
      height: 21px;
    }

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

    .mobile-bottom-cta {
      display: none;
    }

    /* =========================
       REVEAL ANIMATION
    ========================== */

    .reveal {
      opacity: 0;
      transform: translateY(22px);

      animation:
        fadeUp .7s cubic-bezier(.22,.7,.25,1) forwards;
    }

    .delay-1 {
      animation-delay: .08s;
    }

    .delay-2 {
      animation-delay: .16s;
    }

    .delay-3 {
      animation-delay: .26s;
    }

    .delay-4 {
      animation-delay: .38s;
    }

    .delay-5 {
      animation-delay: .50s;
    }

    @keyframes fadeUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

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

    @media (max-width: 1180px) {
      .main-nav {
        display: none;
      }

      .header-phone {
        margin-left: auto;
      }

      .hero {
        min-height: 900px;
      }

      .hero-inner {
        grid-template-columns: 1fr;
      }

      .hero-content {
        max-width: 720px;
      }

      .hero-media {
        width: 58%;
        opacity: .58;
      }

      .hero-form {
        grid-template-columns: 1fr 1fr;
      }

      .hero-form .btn {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 768px) {
      .site-header {
        top: 10px;
        padding: 0 12px;
      }

      .header-inner {
        min-height: 60px;
        padding: 8px 10px 8px 14px;
        gap: 12px;
      }

      .logo-icon {
        width: 36px;
        height: 36px;
      }

      .logo-text {
        font-size: 13px;
      }

      .logo-text span {
        display: none;
      }

      .header-phone {
        display: none;
      }

      .header-cta {
        display: none;
      }

      .language-switch {
        margin-left: auto;
      }

      .hero {
        min-height: auto;
        padding:
          115px
          16px
          160px;
      }

      .hero-inner {
        display: block;
      }

      .hero-content {
        max-width: none;
      }

      .hero-media {
        width: 100%;
        opacity: .30;
      }

      .hero-media::after {
        background:
          linear-gradient(
            90deg,
            rgba(7,27,47,.95),
            rgba(7,27,47,.74)
          ),
          linear-gradient(
            0deg,
            #071B2F 0%,
            transparent 60%
          );
      }

      .hero-badge {
        font-size: 11px;
        line-height: 1.35;
      }

      .hero h1 {
        margin-top: 22px;
        font-size: clamp(36px, 10vw, 52px);
      }

      .hero-subtitle {
        font-size: 15px;
      }

      .hero-form {
        margin-top: 28px;
        grid-template-columns: 1fr;
      }

      .hero-form .btn {
        grid-column: auto;
        white-space: normal;
      }

      .trust-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 22px 0;
      }

      .trust-item {
        padding: 0 16px;
      }

      .trust-item:first-child {
        padding-left: 0;
      }

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

      .trust-item:last-child {
        grid-column: 1 / -1;
        padding-left: 0;
      }

      .messengers {
        right: 14px;
        bottom: 86px;
      }

      .messenger {
        width: 44px;
        height: 44px;
      }

      .mobile-bottom-cta {
        position: fixed;
        z-index: 120;
        left: 0;
        bottom: 0;

        width: 100%;
        padding:
          10px
          14px
          calc(10px + env(safe-area-inset-bottom));

        display: block;

        border-top: 1px solid rgba(255,255,255,.14);

        background: rgba(7,27,47,.90);
        backdrop-filter: blur(16px);
      }

      .mobile-bottom-cta .btn {
        width: 100%;
      }
    }

    @media (max-width: 480px) {
      .hero {
        padding-inline: 14px;
      }

      .hero h1 {
        font-size: 38px;
      }

      .hero-form {
        padding: 10px;
      }

      .trust-row {
        grid-template-columns: 1fr;
      }

      .trust-item,
      .trust-item:first-child,
      .trust-item:last-child {
        grid-column: auto;
        padding: 14px 0;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.12);
      }

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

      .brand-list {
        gap: 14px;
        flex-wrap: wrap;
      }
    }

    /* ACCESSIBILITY */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
      }

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

      .hero-photo {
        transform: none !important;
      }
    }
	
	/* =========================================================
   TRUST STRIP
========================================================= */

.trust-strip {
  position: relative;
  z-index: 5;

  padding:
    clamp(52px, 5vw, 76px)
    20px
    clamp(50px, 5vw, 72px);

  overflow: hidden;

  color: var(--navy);
  background: #F4F6F8;

  border-bottom: 1px solid #E3E8EE;
}

/* едва заметная инженерная сетка */
.trust-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(14,42,71,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(14,42,71,.025) 1px,
      transparent 1px
    );

  background-size: 48px 48px;

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.5),
      transparent 90%
    );

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.5),
      transparent 90%
    );
}

.trust-strip__inner {
  position: relative;
  z-index: 2;

  width: min(100%, 1360px);
  margin: 0 auto;
}


/* =========================================================
   EYEBROW
========================================================= */

.trust-strip__eyebrow {
  margin-bottom: 34px;

  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;

  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;

  color: #758493;
}


/* =========================================================
   BRAND LOGOS
========================================================= */

.trust-brands {
  display: grid;
  grid-template-columns: repeat(8, minmax(100px, 1fr));
  align-items: center;

  gap: clamp(18px, 2.4vw, 42px);
}

.trust-brand {
  --brand-color: #0E2A47;

  min-width: 0;
  min-height: 50px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  cursor: default;

  color: #87929D;

  filter: grayscale(1);
  opacity: .68;

  transition:
    color .3s ease,
    opacity .3s ease,
    filter .3s ease,
    transform .3s cubic-bezier(.2,.7,.2,1);
}

.trust-brand span {
  font-family: var(--font-heading);
  font-size: clamp(15px, 1.3vw, 21px);
  font-weight: 800;
  line-height: 1;

  white-space: nowrap;
  letter-spacing: -.035em;
}

.trust-brand:hover {
  color: var(--brand-color);
  filter: grayscale(0);
  opacity: 1;
  transform: translateY(-3px);
}

/* placeholder brand identities */
.trust-brand--longi {
  --brand-color: #1167B1;
}

.trust-brand--ja {
  --brand-color: #D4202F;
}

.trust-brand--huawei {
  --brand-color: #D91E2B;
}

.trust-brand--deye {
  --brand-color: #1476B9;
}

.trust-brand--victron {
  --brand-color: #0072BC;
}

.trust-brand--abb {
  --brand-color: #E32219;
}

.trust-brand--canadian {
  --brand-color: #1975BA;
}

.trust-brand--ja span,
.trust-brand--canadian span {
  font-size: clamp(12px, 1vw, 16px);
  letter-spacing: -.02em;
}

.trust-brand--victron span {
  font-weight: 700;
}

.trust-brand--abb span {
  font-size: clamp(20px, 1.65vw, 28px);
}

.trust-brand__huawei-mark {
  font-size: 18px !important;
}


/* =========================================================
   DIVIDER
========================================================= */

.trust-strip__divider {
  width: 100%;
  height: 1px;

  margin:
    clamp(34px, 4vw, 54px)
    0
    clamp(32px, 4vw, 48px);

  background:
    linear-gradient(
      90deg,
      transparent,
      #DDE3E9 10%,
      #DDE3E9 90%,
      transparent
    );
}


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

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

.trust-stat {
  position: relative;

  min-width: 0;

  padding: 6px clamp(16px, 2.5vw, 38px);

  text-align: center;
}

.trust-stat:not(:last-child)::after {
  content: "";

  position: absolute;
  right: 0;
  top: 6px;
  bottom: 6px;

  width: 1px;

  background: #DCE2E8;
}

.trust-stat__number {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;

  font-family: var(--font-mono);
  font-size: clamp(30px, 2.7vw, 46px);
  font-weight: 500;
  line-height: 1;

  letter-spacing: -.06em;

  color: var(--navy);
}

.trust-stat__number--energy {
  font-size: clamp(25px, 2.3vw, 40px);
}

.trust-stat__prefix {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;

  color: #738291;
}

.trust-stat__label {
  margin-top: 12px;

  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;

  color: #687888;
}


/* =========================================================
   TRUST BADGES
========================================================= */

.trust-badges {
  margin-top: clamp(36px, 4.4vw, 54px);

  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  gap: 12px;
}

.trust-badge {
  min-height: 48px;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 8px 15px 8px 9px;

  border: 1px solid rgba(14,42,71,.09);
  border-radius: 999px;

  background: rgba(255,255,255,.62);

  box-shadow:
    0 6px 18px rgba(14,42,71,.025);

  color: #566777;

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

  transition:
    border-color .25s ease,
    background .25s ease,
    transform .25s ease;
}

.trust-badge:hover {
  transform: translateY(-2px);

  border-color: rgba(30,142,90,.22);
  background: rgba(255,255,255,.95);
}

.trust-badge__icon {
  width: 31px;
  height: 31px;

  flex: 0 0 31px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: var(--green);
  background: rgba(30,142,90,.08);
}

.trust-badge__icon svg {
  width: 17px;
  height: 17px;
}


/* =========================================================
   REVEAL
========================================================= */

.trust-reveal {
  opacity: 0;
  transform: translateY(18px);

  transition:
    opacity .7s cubic-bezier(.22,.7,.25,1),
    transform .7s cubic-bezier(.22,.7,.25,1);
}

.trust-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* последовательное появление цифр */
.trust-stat:nth-child(2) {
  transition-delay: .06s;
}

.trust-stat:nth-child(3) {
  transition-delay: .12s;
}

.trust-stat:nth-child(4) {
  transition-delay: .18s;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

  .trust-brands {
    grid-template-columns: repeat(4, 1fr);
    gap: 22px 30px;
  }

  .trust-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 34px 0;
  }

  .trust-stat:nth-child(2)::after {
    display: none;
  }

  .trust-stat:nth-child(3)::before,
  .trust-stat:nth-child(4)::before {
    content: "";

    position: absolute;
    left: 20px;
    right: 20px;
    top: -17px;

    height: 1px;

    background: #E0E5EA;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .trust-strip {
    padding:
      42px
      16px
      46px;
  }

  .trust-strip__eyebrow {
    max-width: 300px;
    margin:
      0 auto
      28px;

    font-size: 10px;
  }

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

    gap: 12px;
  }

  .trust-brand {
    min-height: 58px;

    padding: 8px;

    border: 1px solid rgba(14,42,71,.06);
    border-radius: 12px;

    background: rgba(255,255,255,.40);
  }

  .trust-brand:last-child {
    grid-column: 1 / -1;
  }

  .trust-strip__divider {
    margin: 32px 0;
  }

  .trust-stats {
    gap: 30px 0;
  }

  .trust-stat {
    padding-inline: 10px;
  }

  .trust-stat__number {
    font-size: clamp(27px, 7.5vw, 36px);
  }

  .trust-stat__number--energy {
    font-size: clamp(21px, 6vw, 30px);
  }

  .trust-stat__label {
    font-size: 11px;
  }

  .trust-badges {
    margin-top: 40px;

    display: grid;
    grid-template-columns: 1fr;
  }

  .trust-badge {
    justify-content: flex-start;

    width: 100%;

    border-radius: 12px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .trust-stats {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .trust-stat {
    padding: 24px 0;
  }

  .trust-stat:not(:last-child)::after {
    top: auto;
    left: 12%;
    right: 12%;
    bottom: 0;

    width: auto;
    height: 1px;
  }

  .trust-stat:nth-child(3)::before,
  .trust-stat:nth-child(4)::before {
    display: none;
  }

  .trust-stat__number {
    font-size: 36px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .trust-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .trust-brand,
  .trust-badge {
    transition: none;
  }

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

.benefits {
  position: relative;
  padding:
    clamp(68px, 7vw, 108px)
    20px
    clamp(72px, 7vw, 112px);

  background:
    radial-gradient(
      circle at 85% 10%,
      rgba(46,111,176,.08),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #F8FAFC 100%
    );

  overflow: hidden;
}

.benefits::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image:
    linear-gradient(rgba(14,42,71,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,42,71,.022) 1px, transparent 1px);

  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.34), transparent 85%);
}

.benefits__inner {
  position: relative;
  z-index: 2;
  width: min(100%, 1360px);
  margin: 0 auto;
}

.benefits__eyebrow {
  margin-bottom: 14px;

  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;

  color: var(--sky);
}

.benefits__title {
  margin: 0 0 clamp(30px, 4vw, 44px);
  max-width: 780px;

  font-family: var(--font-heading);
  font-size: clamp(30px, 3.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -.02em;
  text-wrap: balance;

  color: var(--navy);
}

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

/* =========================================================
   BENEFIT CARD
========================================================= */

.benefit-card {
  position: relative;

  min-height: 268px;
  padding: 26px 24px 24px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  border: 1px solid rgba(14,42,71,.07);
  border-radius: 16px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.92),
      rgba(255,255,255,.86)
    );

  box-shadow:
    0 10px 30px rgba(14,42,71,.06),
    0 1px 0 rgba(255,255,255,.75) inset;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition:
    transform .28s cubic-bezier(.2,.7,.2,1),
    box-shadow .28s ease,
    border-color .28s ease;
}

.benefit-card:hover {
  transform: translateY(-7px);
  border-color: rgba(46,111,176,.16);

  box-shadow:
    0 18px 42px rgba(14,42,71,.10),
    0 1px 0 rgba(255,255,255,.88) inset;
}

.benefit-card__icon {
  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  margin-bottom: 22px;
  border-radius: 50%;
}

.benefit-card__icon svg {
  width: 24px;
  height: 24px;
}

.benefit-card__icon--amber {
  color: var(--navy);
  background: rgba(245,166,35,.18);
  box-shadow: inset 0 0 0 1px rgba(245,166,35,.18);
}

.benefit-card__icon--green {
  color: var(--green);
  background: rgba(30,142,90,.12);
  box-shadow: inset 0 0 0 1px rgba(30,142,90,.14);
}

.benefit-card__metric {
  margin-bottom: 12px;

  font-family: var(--font-mono);
  font-size: clamp(24px, 2vw, 31px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.04em;

  color: var(--navy);
}

.benefit-card__title {
  margin: 0 0 10px;

  font-family: var(--font-heading);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.02em;

  color: var(--navy);
}

.benefit-card__text {
  margin: 0;
  max-width: 32ch;

  font-size: 15px;
  line-height: 1.6;

  color: #5A6B7B;
}

/* =========================================================
   REVEAL / STAGGER
========================================================= */

.benefit-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .72s cubic-bezier(.22,.7,.25,1),
    transform .72s cubic-bezier(.22,.7,.25,1);
}

.benefit-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* каскад карточек */
.benefits__grid .benefit-card:nth-child(1) { transition-delay: .00s; }
.benefits__grid .benefit-card:nth-child(2) { transition-delay: .06s; }
.benefits__grid .benefit-card:nth-child(3) { transition-delay: .12s; }
.benefits__grid .benefit-card:nth-child(4) { transition-delay: .18s; }
.benefits__grid .benefit-card:nth-child(5) { transition-delay: .24s; }
.benefits__grid .benefit-card:nth-child(6) { transition-delay: .30s; }

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {
  .benefits__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {
  .benefits {
    padding:
      54px
      16px
      64px;
  }

  .benefits__eyebrow {
    font-size: 11px;
    margin-bottom: 12px;
  }

  .benefits__title {
    margin-bottom: 26px;
    font-size: clamp(28px, 8vw, 40px);
  }

  .benefits__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .benefit-card {
    min-height: auto;
    padding: 22px 20px 20px;
  }

  .benefit-card__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
  }

  .benefit-card__metric {
    font-size: 24px;
  }

  .benefit-card__title {
    font-size: 19px;
  }

  .benefit-card__text {
    font-size: 14px;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .benefit-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .benefit-card {
    transition: none;
  }
}
/* =========================================================
   STATIONS
========================================================= */

.stations {
  position: relative;
  overflow: hidden;

  padding:
    clamp(76px, 7vw, 112px)
    20px
    clamp(78px, 8vw, 120px);

  background: #F4F6F8;
  color: var(--navy);
}

.stations::before {
  content: "";
  position: absolute;
  top: -280px;
  right: -180px;

  width: 620px;
  height: 620px;

  border-radius: 50%;

  background: rgba(46,111,176,.08);
  filter: blur(100px);

  pointer-events: none;
}

.stations__inner {
  position: relative;
  z-index: 2;

  width: min(100%, 1360px);
  margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.stations__heading {
  max-width: 760px;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.stations__eyebrow {
  margin-bottom: 13px;

  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;

  color: var(--sky);
}

.stations__title {
  margin: 0;

  font-family: var(--font-heading);
  font-size: clamp(34px, 3.6vw, 54px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.035em;

  text-wrap: balance;
}

.stations__subtitle {
  margin: 17px 0 0;

  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;

  color: #687989;
}


/* =========================================================
   CARDS GRID
========================================================= */

.stations__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 16px;
}


/* =========================================================
   STATION CARD
========================================================= */

.station-card {
  position: relative;

  min-width: 0;
  min-height: 490px;

  padding: 25px 24px 23px;

  display: flex;
  flex-direction: column;

  border: 1px solid rgba(14,42,71,.09);
  border-radius: 16px;

  background: rgba(255,255,255,.88);

  box-shadow:
    0 10px 32px rgba(14,42,71,.055),
    inset 0 1px rgba(255,255,255,.8);

  cursor: pointer;

  outline: none;

  transition:
    transform .32s cubic-bezier(.2,.7,.2,1),
    box-shadow .32s ease,
    border-color .32s ease,
    background .35s ease,
    color .35s ease;
}

.station-card:hover {
  transform: translateY(-6px);

  border-color: rgba(46,111,176,.20);

  box-shadow:
    0 20px 44px rgba(14,42,71,.10);
}

.station-card:focus-visible {
  outline: 3px solid rgba(245,166,35,.5);
  outline-offset: 4px;
}


/* active */

.station-card.is-active {
  color: white;

  border-color: rgba(245,166,35,.92);

  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(46,111,176,.44),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #0E2A47 0%,
      #123A60 100%
    );

  box-shadow:
    0 24px 60px rgba(14,42,71,.20),
    0 0 0 1px rgba(245,166,35,.25);
}


/* =========================================================
   POPULAR BADGE
========================================================= */

.station-card__popular {
  position: absolute;
  top: -11px;
  right: 18px;

  padding: 7px 11px;

  border-radius: 999px;

  background: var(--amber);
  color: var(--navy);

  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;

  letter-spacing: .05em;
  text-transform: uppercase;

  box-shadow:
    0 8px 18px rgba(245,166,35,.25);
}


/* =========================================================
   TOP / ICON
========================================================= */

.station-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 25px;
}

.station-card__icon {
  width: 62px;
  height: 62px;

  display: grid;
  place-items: center;

  border-radius: 15px;

  color: var(--sky);
  background: rgba(46,111,176,.08);

  transition:
    color .3s ease,
    background .3s ease;
}

.station-card__icon svg {
  width: 42px;
  height: 42px;
}

.station-card.is-active .station-card__icon {
  color: var(--amber);
  background: rgba(255,255,255,.08);
}

.station-card__type {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;

  letter-spacing: .09em;

  color: #8795A2;
}

.station-card.is-active .station-card__type {
  color: rgba(255,255,255,.50);
}


/* =========================================================
   CONTENT
========================================================= */

.station-card__title {
  margin: 0 0 10px;

  font-family: var(--font-heading);
  font-size: 25px;
  font-weight: 700;

  line-height: 1.15;
  letter-spacing: -.025em;

  color: var(--navy);

  transition: color .3s ease;
}

.station-card.is-active .station-card__title {
  color: white;
}

.station-card__lead {
  min-height: 52px;

  margin: 0 0 25px;

  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;

  color: #617282;

  transition: color .3s ease;
}

.station-card.is-active .station-card__lead {
  color: rgba(255,255,255,.72);
}


.station-card__info {
  display: grid;
  gap: 19px;

  padding-top: 21px;

  border-top: 1px solid rgba(14,42,71,.08);
}

.station-card.is-active .station-card__info {
  border-color: rgba(255,255,255,.12);
}

.station-card__label {
  display: block;

  margin-bottom: 5px;

  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;

  letter-spacing: .08em;
  text-transform: uppercase;

  color: #91A0AD;
}

.station-card.is-active .station-card__label {
  color: var(--amber);
}

.station-card__info p {
  margin: 0;

  font-size: 12px;
  line-height: 1.55;

  color: #657685;

  transition: color .3s ease;
}

.station-card.is-active .station-card__info p {
  color: rgba(255,255,255,.66);
}


/* =========================================================
   CARD LINK
========================================================= */

.station-card__link {
  position: relative;
  z-index: 4;

  width: fit-content;

  margin-top: auto;
  padding-top: 26px;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: var(--sky);

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

.station-card__link svg {
  width: 17px;
  height: 17px;

  transition: transform .2s ease;
}

.station-card__link:hover svg {
  transform: translateX(4px);
}

.station-card.is-active .station-card__link {
  color: var(--amber);
}


/* =========================================================
   TURNKEY
========================================================= */

.turnkey {
  margin-top: clamp(42px, 5vw, 66px);

  padding: clamp(28px, 3vw, 40px);

  border: 1px solid rgba(14,42,71,.09);
  border-radius: 16px;

  background: rgba(255,255,255,.75);

  box-shadow:
    0 12px 36px rgba(14,42,71,.05);
}

.turnkey__header {
  display: grid;
  grid-template-columns: .75fr 1.25fr;

  align-items: end;
  gap: 50px;

  margin-bottom: 36px;
}

.turnkey__eyebrow {
  margin-bottom: 8px;

  font-family: var(--font-mono);
  font-size: 10px;

  letter-spacing: .11em;
  text-transform: uppercase;

  color: var(--green);
}

.turnkey__header h3 {
  margin: 0;

  font-family: var(--font-heading);
  font-size: clamp(26px, 2.6vw, 38px);
  letter-spacing: -.03em;

  color: var(--navy);
}

.turnkey__header p {
  max-width: 610px;
  margin: 0;

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

  color: #637483;
}


/* =========================================================
   TIMELINE
========================================================= */

.turnkey__scroll {
  overflow: hidden;
}

.turnkey__timeline {
  position: relative;

  min-width: 850px;

  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.turnkey__timeline::before {
  content: "";

  position: absolute;
  z-index: 0;

  top: 29px;
  left: 8%;
  right: 8%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(46,111,176,.14),
      rgba(46,111,176,.38),
      rgba(30,142,90,.34)
    );
}

.turnkey-step {
  position: relative;
  z-index: 1;

  min-width: 130px;

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}

.turnkey-step__number {
  position: absolute;
  top: -8px;
  left: calc(50% + 20px);

  font-family: var(--font-mono);
  font-size: 8px;

  color: #96A4B0;
}

.turnkey-step__icon {
  width: 58px;
  height: 58px;

  display: grid;
  place-items: center;

  border: 1px solid #DEE5EA;
  border-radius: 50%;

  background: #FFFFFF;

  color: var(--sky);

  box-shadow:
    0 8px 20px rgba(14,42,71,.06);

  transition:
    background .25s ease,
    color .25s ease,
    transform .25s ease,
    border-color .25s ease;
}

.turnkey-step:hover .turnkey-step__icon {
  transform: translateY(-3px);

  border-color: rgba(30,142,90,.25);

  background: rgba(30,142,90,.07);
  color: var(--green);
}

.turnkey-step__icon svg {
  width: 24px;
  height: 24px;
}

.turnkey-step > span {
  margin-top: 13px;

  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 700;

  color: var(--navy);
}


/* =========================================================
   REVEAL
========================================================= */

.station-reveal {
  opacity: 0;
  transform: translateY(24px);

  transition:
    opacity .72s cubic-bezier(.22,.7,.25,1),
    transform .72s cubic-bezier(.22,.7,.25,1);
}

.station-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.stations__grid {
  transition-delay: .08s;
}

.turnkey {
  transition-delay: .15s;
}


/* =========================================================
   <= 1200
========================================================= */

@media (max-width: 1200px) {

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

  .station-card {
    min-height: 440px;
  }

}


/* =========================================================
   <= 768
========================================================= */

@media (max-width: 768px) {

  .stations {
    padding:
      58px
      16px
      68px;
  }

  .stations__heading {
    margin-bottom: 30px;
  }

  .stations__title {
    font-size: clamp(30px, 9vw, 42px);
  }

  .stations__subtitle {
    font-size: 15px;
  }

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

  .station-card {
    min-height: auto;
    padding: 22px 20px;
  }

  .station-card__lead {
    min-height: auto;
  }

  .station-card__info {
    grid-template-columns: 1fr 1fr;
  }

  .station-card__link {
    margin-top: 22px;
  }


  /* turnkey */

  .turnkey {
    margin-top: 42px;
    padding: 24px 18px;
  }

  .turnkey__header {
    grid-template-columns: 1fr;
    gap: 12px;

    margin-bottom: 28px;
  }

  .turnkey__header p {
    font-size: 13px;
  }

  .turnkey__scroll {
    overflow-x: auto;

    padding-bottom: 14px;

    scrollbar-width: thin;
    scrollbar-color:
      rgba(14,42,71,.25)
      transparent;

    scroll-snap-type: x proximity;

    -webkit-overflow-scrolling: touch;
  }

  .turnkey__timeline {
    min-width: 820px;
  }

  .turnkey-step {
    scroll-snap-align: start;
  }

}


/* =========================================================
   <= 480
========================================================= */

@media (max-width: 480px) {

  .station-card__info {
    grid-template-columns: 1fr;
  }

  .station-card__icon {
    width: 56px;
    height: 56px;
  }

  .station-card__icon svg {
    width: 38px;
    height: 38px;
  }

  .station-card__title {
    font-size: 23px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .station-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .station-card,
  .station-card__icon,
  .turnkey-step__icon {
    transition: none;
  }

}

/* =========================================================
   CALCULATOR
========================================================= */

.scalc {
  --scalc-navy: #0E2A47;
  --scalc-navy-dark: #071B2F;
  --scalc-amber: #F5A623;
  --scalc-green: #1E8E5A;
  --scalc-sky: #2E6FB0;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding:
    clamp(78px, 8vw, 124px)
    20px
    clamp(84px, 8vw, 128px);

  color: #fff;

  background:
    radial-gradient(
      circle at 84% 15%,
      rgba(46,111,176,.34),
      transparent 33%
    ),
    linear-gradient(
      135deg,
      #071B2F 0%,
      #0E2A47 48%,
      #153F68 100%
    );
}


.scalc::before {
  content: "";

  position: absolute;
  inset: 0;
  z-index: -3;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size: 54px 54px;

  pointer-events: none;
}


.scalc__container {
  width: min(100%, 1360px);
  margin: 0 auto;
}


/* =========================================================
   GLOWS
========================================================= */

.scalc__glow {
  position: absolute;
  z-index: -2;

  border-radius: 50%;

  filter: blur(110px);

  pointer-events: none;
}


.scalc__glow--one {
  width: 480px;
  height: 480px;

  top: 10%;
  right: -150px;

  background:
    rgba(46,111,176,.25);
}


.scalc__glow--two {
  width: 330px;
  height: 330px;

  left: 18%;
  bottom: -180px;

  background:
    rgba(245,166,35,.07);
}


/* =========================================================
   HEADER
========================================================= */

.scalc__heading {
  max-width: 850px;

  margin-bottom:
    clamp(36px, 5vw, 54px);
}


.scalc__eyebrow {
  margin-bottom: 13px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 11px;

  letter-spacing: .12em;

  color: var(--scalc-amber);
}


.scalc__heading h2 {
  margin: 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(34px, 4vw, 58px);

  font-weight: 800;

  line-height: 1.05;

  letter-spacing: -.04em;

  text-wrap: balance;
}


.scalc__heading p {
  max-width: 650px;

  margin: 18px 0 0;

  font-family:
    "Inter",
    sans-serif;

  font-size:
    clamp(16px, 1.3vw, 19px);

  line-height: 1.6;

  color:
    rgba(255,255,255,.64);
}


/* =========================================================
   MAIN CARD
========================================================= */

.scalc-card {
  display: grid;

  grid-template-columns:
    minmax(0, .93fr)
    minmax(0, 1.07fr);

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.15);

  border-radius: 20px;

  background:
    rgba(255,255,255,.07);

  box-shadow:
    0 35px 90px
    rgba(0,0,0,.22);

  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}


/* =========================================================
   LEFT
========================================================= */

.scalc-controls {
  padding:
    clamp(28px, 3vw, 42px);

  background:
    rgba(7,27,47,.40);

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


.scalc-controls__header {
  display: flex;
  gap: 15px;

  margin-bottom: 36px;
}


.scalc-step {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(245,166,35,.30);

  border-radius: 10px;

  background:
    rgba(245,166,35,.07);

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 10px;

  color:
    var(--scalc-amber);
}


.scalc-controls__header h3 {
  margin: 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(21px, 2vw, 27px);

  letter-spacing: -.025em;
}


.scalc-controls__header p {
  margin: 7px 0 0;

  font-size: 11px;
  line-height: 1.5;

  color:
    rgba(255,255,255,.42);
}


/* =========================================================
   FIELD
========================================================= */

.scalc-field {
  padding: 25px 0;

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


.scalc-field__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 16px;

  margin-bottom: 17px;
}


.scalc-field__head label {
  font-family:
    "Inter",
    sans-serif;

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

  color:
    rgba(255,255,255,.82);
}


.scalc-field__head label small {
  display: block;

  margin-top: 4px;

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

  color:
    rgba(255,255,255,.36);
}


.scalc-field__value {
  white-space: nowrap;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 16px;

  color:
    var(--scalc-amber);
}


/* =========================================================
   OBJECT BUTTONS
========================================================= */

.scalc-object {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 9px;
}


.scalc-object__button {
  min-height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  border:
    1px solid
    rgba(255,255,255,.13);

  border-radius: 12px;

  background:
    rgba(255,255,255,.035);

  color:
    rgba(255,255,255,.55);

  cursor: pointer;

  font-family:
    "Inter",
    sans-serif;

  font-weight: 600;

  transition:
    color .25s ease,
    background .25s ease,
    border-color .25s ease,
    transform .25s ease;
}


.scalc-object__button svg {
  width: 20px;
  height: 20px;
}


.scalc-object__button:hover {
  transform: translateY(-2px);

  color: #fff;
}


.scalc-object__button.is-active {
  border-color:
    rgba(245,166,35,.60);

  background:
    rgba(245,166,35,.10);

  color:
    var(--scalc-amber);
}


/* =========================================================
   RANGE
========================================================= */

.scalc-range {
  --progress: 30%;

  width: 100%;
  height: 5px;

  appearance: none;
  -webkit-appearance: none;

  border: 0;

  border-radius: 999px;

  outline: 0;

  background:
    linear-gradient(
      to right,
      var(--scalc-amber) 0%,
      var(--scalc-amber) var(--progress),
      rgba(255,255,255,.12) var(--progress),
      rgba(255,255,255,.12) 100%
    );

  cursor: pointer;
}


.scalc-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;

  width: 20px;
  height: 20px;

  border:
    4px solid
    var(--scalc-amber);

  border-radius: 50%;

  background: #fff;

  box-shadow:
    0 4px 18px
    rgba(245,166,35,.45);

  cursor: grab;
}


.scalc-range::-moz-range-thumb {
  width: 13px;
  height: 13px;

  border:
    4px solid
    var(--scalc-amber);

  border-radius: 50%;

  background: #fff;

  box-shadow:
    0 4px 18px
    rgba(245,166,35,.45);
}


.scalc-range__labels {
  margin-top: 11px;

  display: flex;
  justify-content: space-between;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 8px;

  color:
    rgba(255,255,255,.27);
}


/* =========================================================
   SELECT
========================================================= */

.scalc-select {
  position: relative;
}


.scalc-select select {
  width: 100%;
  height: 56px;

  appearance: none;

  padding:
    0 48px
    0 16px;

  border:
    1px solid
    rgba(255,255,255,.13);

  border-radius: 12px;

  outline: none;

  background:
    rgba(255,255,255,.045);

  color: #fff;

  cursor: pointer;
}


.scalc-select select option {
  background: #fff;
  color: #0E2A47;
}


.scalc-select svg {
  position: absolute;

  top: 19px;
  right: 17px;

  width: 18px;
  height: 18px;

  pointer-events: none;

  color:
    rgba(255,255,255,.50);
}


/* =========================================================
   METHOD
========================================================= */

.scalc-method {
  margin-top: 12px;
}


.scalc-method summary {
  padding-top: 16px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  list-style: none;

  cursor: pointer;

  font-size: 11px;

  color:
    rgba(255,255,255,.45);
}


.scalc-method summary::-webkit-details-marker {
  display: none;
}


.scalc-method summary svg {
  width: 16px;
  height: 16px;

  transition:
    transform .25s ease;
}


.scalc-method[open]
summary svg {
  transform:
    rotate(180deg);
}


.scalc-method__text {
  padding-top: 12px;

  font-size: 10px;
  line-height: 1.7;

  color:
    rgba(255,255,255,.36);
}


/* =========================================================
   RIGHT
========================================================= */

.scalc-result {
  padding:
    clamp(28px, 3vw, 44px);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.035)
    );
}


.scalc-result__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 20px;

  margin-bottom: 30px;
}


.scalc-result__eyebrow {
  margin-bottom: 7px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 8px;

  letter-spacing: .10em;

  color:
    rgba(255,255,255,.38);
}


.scalc-result__header h3 {
  margin: 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(23px, 2.3vw, 31px);

  letter-spacing: -.025em;
}


.scalc-status {
  min-height: 30px;

  padding: 0 11px;

  display: flex;
  align-items: center;

  gap: 7px;

  border:
    1px solid
    rgba(30,142,90,.20);

  border-radius: 999px;

  background:
    rgba(30,142,90,.09);

  font-size: 8px;

  color: #83DBB1;
}


.scalc-status i {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #4DD293;

  box-shadow:
    0 0 0 5px
    rgba(77,210,147,.08);
}


/* =========================================================
   OVERVIEW
========================================================= */

.scalc-overview {
  display: grid;

  grid-template-columns:
    auto 1fr;

  align-items: center;

  gap:
    clamp(25px, 3vw, 40px);

  padding-bottom: 30px;

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


/* DONUT */

.scalc-donut {
  --coverage: 173deg;

  width:
    clamp(130px, 11vw, 160px);

  height:
    clamp(130px, 11vw, 160px);

  padding: 9px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    conic-gradient(
      var(--scalc-amber) 0deg,
      var(--scalc-amber) var(--coverage),
      rgba(255,255,255,.12) var(--coverage),
      rgba(255,255,255,.12) 360deg
    );

  transition:
    background .45s ease;

  filter:
    drop-shadow(
      0 12px 25px
      rgba(0,0,0,.12)
    );
}


.scalc-donut__inside {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #153B60,
      #092640
    );
}


.scalc-donut__inside strong {
  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    clamp(27px, 2.5vw, 38px);

  font-weight: 500;

  letter-spacing: -.06em;
}


.scalc-donut__inside span {
  margin-top: 2px;

  font-size: 8px;

  color:
    rgba(255,255,255,.36);
}


/* POWER */

.scalc-power > span {
  font-size: 10px;

  color:
    rgba(255,255,255,.40);
}


.scalc-power > div {
  margin-top: 8px;

  display: flex;
  align-items: baseline;

  gap: 9px;
}


.scalc-power strong {
  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    clamp(48px, 5vw, 72px);

  line-height: 1;

  font-weight: 500;

  letter-spacing: -.08em;
}


.scalc-power small {
  font-family:
    "IBM Plex Mono",
    monospace;

  color:
    var(--scalc-amber);
}


.scalc-power p {
  margin: 10px 0 0;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 9px;

  color:
    rgba(255,255,255,.35);
}


/* =========================================================
   GRAPH
========================================================= */

.scalc-chart {
  padding:
    22px 0
    24px;

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


.scalc-chart__header {
  margin-bottom: 16px;

  display: flex;
  justify-content: space-between;

  font-size: 9px;

  color:
    rgba(255,255,255,.37);
}


.scalc-chart__header span:last-child {
  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 7px;

  letter-spacing: .09em;
}


.scalc-chart__bars {
  height: 92px;

  display: grid;

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

  align-items: stretch;

  gap:
    clamp(4px, .65vw, 9px);
}


.scalc-bar {
  position: relative;

  height: 100%;

  display: flex;
  align-items: flex-end;

  overflow: hidden;

  border-radius:
    5px 5px 2px 2px;

  background:
    rgba(255,255,255,.035);
}


.scalc-bar > span {
  width: 100%;
  height: 100%;

  border-radius:
    5px 5px 2px 2px;

  background:
    linear-gradient(
      180deg,
      #F5A623 0%,
      rgba(245,166,35,.86) 42%,
      rgba(245,166,35,.34) 100%
    );

  transform:
    scaleY(.25);

  transform-origin:
    center bottom;

  will-change:
    transform;

  transition:
    transform .46s
    cubic-bezier(.22,.7,.25,1),
    filter .22s ease,
    opacity .22s ease;

  box-shadow:
    0 -6px 16px
    rgba(245,166,35,.10);
}


/* небольшая волна */

.scalc-bar:nth-child(1) > span {
  transition-delay: 0ms;
}

.scalc-bar:nth-child(2) > span {
  transition-delay: 8ms;
}

.scalc-bar:nth-child(3) > span {
  transition-delay: 16ms;
}

.scalc-bar:nth-child(4) > span {
  transition-delay: 24ms;
}

.scalc-bar:nth-child(5) > span {
  transition-delay: 32ms;
}

.scalc-bar:nth-child(6) > span {
  transition-delay: 40ms;
}

.scalc-bar:nth-child(7) > span {
  transition-delay: 45ms;
}

.scalc-bar:nth-child(8) > span {
  transition-delay: 40ms;
}

.scalc-bar:nth-child(9) > span {
  transition-delay: 32ms;
}

.scalc-bar:nth-child(10) > span {
  transition-delay: 24ms;
}

.scalc-bar:nth-child(11) > span {
  transition-delay: 16ms;
}

.scalc-bar:nth-child(12) > span {
  transition-delay: 8ms;
}


/* glow while dragging */

.scalc-chart.is-updating
.scalc-bar > span {
  filter:
    brightness(1.10)
    drop-shadow(
      0 0 5px
      rgba(245,166,35,.30)
    );
}


.scalc-chart__months {
  margin-top: 8px;

  display: flex;
  justify-content: space-between;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 7px;

  color:
    rgba(255,255,255,.23);
}


/* =========================================================
   VALUES
========================================================= */

.scalc-values {
  padding: 25px 0;

  display: grid;

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

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


.scalc-value {
  min-width: 0;

  padding:
    0
    clamp(12px, 1.7vw, 25px);

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


.scalc-value:first-child {
  padding-left: 0;
}


.scalc-value:last-child {
  border-right: 0;
}


.scalc-value > span {
  display: block;

  margin-bottom: 9px;

  font-size: 8px;

  color:
    rgba(255,255,255,.35);
}


.scalc-value > div {
  display: flex;

  align-items: baseline;

  gap: 5px;

  flex-wrap: wrap;
}


.scalc-value strong {
  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    clamp(21px, 2vw, 29px);

  font-weight: 500;

  letter-spacing: -.045em;
}


.scalc-value small {
  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 8px;

  color:
    rgba(255,255,255,.42);
}


/* blurred */

.scalc-sensitive {
  filter: blur(7px);

  user-select: none;

  transition:
    filter .45s ease;
}


.scalc-result.is-unlocked
.scalc-sensitive {
  filter: blur(0);

  user-select: text;
}


/* =========================================================
   UNLOCK
========================================================= */

.scalc-unlock {
  padding-top: 25px;
}


.scalc-unlock__head {
  margin-bottom: 17px;

  display: flex;
  align-items: center;

  gap: 12px;
}


.scalc-lock {
  width: 39px;
  height: 39px;

  flex: 0 0 39px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(245,166,35,.22);

  border-radius: 11px;

  background:
    rgba(245,166,35,.07);

  color:
    var(--scalc-amber);
}


.scalc-lock svg {
  width: 19px;
}


.scalc-unlock__head strong {
  display: block;

  font-size: 12px;
}


.scalc-unlock__head span {
  display: block;

  margin-top: 3px;

  font-size: 8px;

  color:
    rgba(255,255,255,.36);
}


.scalc-form {
  display: grid;

  grid-template-columns:
    minmax(190px, 1fr)
    auto;

  gap: 9px;
}


.scalc-phone {
  min-height: 58px;

  display: flex;
  align-items: center;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius: 12px;

  background:
    rgba(7,27,47,.30);
}


.scalc-phone:focus-within {
  border-color:
    var(--scalc-amber);

  box-shadow:
    0 0 0 3px
    rgba(245,166,35,.08);
}


.scalc-phone > span {
  padding-left: 16px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 12px;

  color:
    rgba(255,255,255,.42);
}


.scalc-phone input {
  width: 100%;
  min-width: 0;

  padding:
    0 14px
    0 7px;

  border: 0;
  outline: 0;

  background: transparent;

  color: #fff;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 12px;
}


.scalc-phone input::placeholder {
  color:
    rgba(255,255,255,.26);
}


.scalc-submit {
  min-height: 58px;

  padding: 0 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  border: 0;

  border-radius: 12px;

  background:
    var(--scalc-amber);

  color:
    var(--scalc-navy);

  font-family:
    "Inter",
    sans-serif;

  font-size: 13px;
  font-weight: 700;

  cursor: pointer;

  box-shadow:
    0 12px 28px
    rgba(245,166,35,.19);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.scalc-submit:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 18px 36px
    rgba(245,166,35,.29);
}


.scalc-submit svg {
  width: 17px;
  height: 17px;
}


.scalc-submit:disabled {
  opacity: .75;
  cursor: default;

  transform: none;
}


.scalc-error {
  min-height: 16px;

  padding-top: 6px;

  font-size: 9px;

  color: #FFB7AA;
}


.scalc-note {
  margin-top: 8px;

  display: flex;
  align-items: flex-start;

  gap: 7px;

  font-size: 8px;
  line-height: 1.5;

  color:
    rgba(255,255,255,.28);
}


.scalc-note svg {
  width: 13px;
  height: 13px;

  flex: 0 0 13px;
}


/* =========================================================
   REVEAL
========================================================= */

.scalc-reveal {
  opacity: 0;

  transform:
    translateY(25px);

  transition:
    opacity .7s ease,
    transform .7s
    cubic-bezier(.22,.7,.25,1);
}


.scalc-reveal.is-visible {
  opacity: 1;

  transform:
    translateY(0);
}


.scalc-card {
  transition-delay: .08s;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

  .scalc-card {
    grid-template-columns: 1fr;
  }


  .scalc-controls {
    border-right: 0;

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

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .scalc {
    padding:
      60px 16px
      72px;
  }


  .scalc__heading h2 {
    font-size:
      clamp(31px, 9vw, 43px);
  }


  .scalc-card {
    border-radius: 16px;
  }


  .scalc-controls,
  .scalc-result {
    padding: 22px 18px;
  }


  .scalc-overview {
    grid-template-columns:
      120px 1fr;

    gap: 18px;
  }


  .scalc-donut {
    width: 120px;
    height: 120px;
  }


  .scalc-values {
    grid-template-columns:
      1fr 1fr;

    gap: 24px 0;
  }


  .scalc-value:nth-child(2) {
    border-right: 0;
  }


  .scalc-value:nth-child(3) {
    grid-column:
      1 / -1;

    padding:
      22px 0 0;

    margin-top: 2px;

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


  .scalc-form {
    grid-template-columns: 1fr;
  }


  .scalc-submit {
    width: 100%;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .scalc-object {
    grid-template-columns: 1fr;
  }


  .scalc-overview {
    grid-template-columns: 1fr;

    text-align: center;
  }


  .scalc-donut {
    margin: 0 auto;
  }


  .scalc-power > div {
    justify-content: center;
  }


  .scalc-values {
    grid-template-columns: 1fr;
  }


  .scalc-value,
  .scalc-value:first-child,
  .scalc-value:last-child,
  .scalc-value:nth-child(3) {
    grid-column: auto;

    padding: 18px 0;

    margin: 0;

    border-right: 0;

    border-top: 0;

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


  .scalc-value:last-child {
    border-bottom: 0;
  }


  .scalc-result__header {
    flex-direction: column;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .scalc-reveal {
    opacity: 1;

    transform: none;

    transition: none;
  }


  .scalc-bar > span,
  .scalc-sensitive,
  .scalc-object__button,
  .scalc-submit {
    transition: none;
  }

}

/* =========================================================
   WORKFLOW CAROUSEL
========================================================= */

.wflow {
  --wf-navy: #0E2A47;
  --wf-amber: #F5A623;
  --wf-green: #1E8E5A;
  --wf-sky: #2E6FB0;

  position: relative;
  overflow: hidden;

  padding:
    clamp(76px, 7vw, 112px)
    0
    clamp(82px, 8vw, 120px);

  color: var(--wf-navy);

  background:
    radial-gradient(
      circle at 88% 10%,
      rgba(46,111,176,.07),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #F6F8FA 100%
    );
}


.wflow::before {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(14,42,71,.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(14,42,71,.018) 1px,
      transparent 1px
    );

  background-size: 56px 56px;

  pointer-events: none;
}


.wflow__container {
  position: relative;
  z-index: 2;

  width: min(
    calc(100% - 40px),
    1360px
  );

  margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.wflow__header {
  margin-bottom:
    clamp(38px, 5vw, 58px);
}


.wflow__eyebrow {
  margin-bottom: 13px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 11px;
  font-weight: 500;

  letter-spacing: .13em;

  color: var(--wf-sky);
}


.wflow__heading-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(280px, .55fr);

  align-items: end;

  gap:
    clamp(40px, 7vw, 110px);
}


.wflow__heading-grid h2 {
  max-width: 790px;

  margin: 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(34px, 4vw, 58px);

  font-weight: 800;

  line-height: 1.04;

  letter-spacing: -.04em;

  text-wrap: balance;
}


.wflow__heading-grid p {
  max-width: 490px;

  margin: 0 0 5px;

  font-family:
    "Inter",
    sans-serif;

  font-size: 14px;

  line-height: 1.7;

  color: #647586;
}


/* =========================================================
   NAV / PROGRESS
========================================================= */

.wflow__nav {
  display: grid;

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

  align-items: center;

  gap: 30px;

  margin-bottom: 24px;
}


.wflow__progress-area {
  min-width: 0;
}


.wflow__progress-track {
  position: relative;

  height: 2px;

  overflow: hidden;

  border-radius: 999px;

  background: #DDE4EA;
}


.wflow__progress-fill {
  position: absolute;

  inset:
    0 auto
    0 0;

  width: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      #F5A623 0%,
      #FFB63C 100%
    );

  transform:
    scaleX(0);

  transform-origin:
    left center;

  will-change:
    transform;

  box-shadow:
    0 0 12px
    rgba(245,166,35,.20);

  transition:
    transform .12s linear;
}


.wflow__progress-labels {
  margin-top: 8px;

  display: flex;
  justify-content: space-between;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 8px;

  color: #95A2AE;
}


.wflow__nav-right {
  min-width: 165px;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 8px;
}


.wflow__hint {
  font-family:
    "Inter",
    sans-serif;

  font-size: 11px;
  font-weight: 500;

  color: #788895;
}


.wflow__hint-arrow {
  width: 17px;
  height: 17px;

  color: var(--wf-amber);

  animation:
    wflowArrow 1.8s
    ease-in-out infinite;
}


@keyframes wflowArrow {

  0%,
  100% {
    transform:
      translateX(0);
  }

  50% {
    transform:
      translateX(4px);
  }

}


.wflow__counter {
  margin-left: 10px;

  min-width: 63px;

  display: flex;
  align-items: baseline;
  gap: 4px;

  font-family:
    "IBM Plex Mono",
    monospace;

  color: #A1ADB7;
}


.wflow__counter strong {
  font-size: 16px;

  font-weight: 500;

  color: var(--wf-navy);
}


.wflow__counter span {
  font-size: 9px;
}


/* =========================================================
   VIEWPORT
========================================================= */

.wflow__viewport {
  position: relative;

  margin-right:
    calc(
      (
        100vw -
        min(
          calc(100vw - 40px),
          1360px
        )
      ) / -2
    );

  overflow: hidden;
}


/* лёгкий fade справа */

.wflow__viewport::after {
  content: "";

  position: absolute;

  z-index: 4;

  top: 0;
  right: 0;
  bottom: 8px;

  width: 55px;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(246,248,250,.82)
    );

  opacity: 1;

  transition:
    opacity .25s ease;
}


.wflow__viewport.is-at-end::after {
  opacity: 0;
}


/* =========================================================
   TRACK
========================================================= */

.wflow__track {
  --wf-gap: 18px;

  display: grid;

  grid-auto-flow: column;

  grid-auto-columns:
    calc(
      (
        100% -
        (
          var(--wf-gap) * 2
        )
      ) / 3.12
    );

  gap: var(--wf-gap);

  padding:
    10px
    max(
      40px,
      calc(
        (
          100vw - 1360px
        ) / 2
      )
    )
    28px
    0;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type:
    x mandatory;

  scroll-padding-left: 0;

  overscroll-behavior-x:
    contain;

  scrollbar-width: none;

  -webkit-overflow-scrolling:
    touch;

  cursor: grab;

  outline: none;
}


.wflow__track::-webkit-scrollbar {
  display: none;
}


.wflow__track.is-dragging {
  cursor: grabbing;

  scroll-snap-type: none;

  user-select: none;
}


.wflow__track:focus-visible {
  outline:
    3px solid
    rgba(245,166,35,.34);

  outline-offset: 5px;
}


/* =========================================================
   CARD
========================================================= */

.wflow-card {
  position: relative;

  min-width: 0;

  min-height: 440px;

  padding:
    25px
    24px
    23px;

  display: flex;
  flex-direction: column;

  scroll-snap-align: start;

  border:
    1px solid
    rgba(14,42,71,.075);

  border-radius: 18px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.98),
      rgba(255,255,255,.91)
    );

  box-shadow:
    0 14px 38px
    rgba(14,42,71,.06),
    inset 0 1px 0
    rgba(255,255,255,.9);

  transform:
    translateY(0);

  transition:
    transform .3s
    cubic-bezier(.2,.7,.2,1),
    border-color .3s ease,
    box-shadow .3s ease,
    opacity .3s ease;
}


.wflow-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 24px;

  width: 46px;
  height: 3px;

  border-radius:
    0 0 999px 999px;

  background:
    rgba(245,166,35,.65);

  transition:
    width .35s ease,
    background .35s ease;
}


.wflow-card:hover {
  transform:
    translateY(-6px);

  border-color:
    rgba(46,111,176,.17);

  box-shadow:
    0 22px 48px
    rgba(14,42,71,.10);
}


/* ACTIVE */

.wflow-card.is-active {
  border-color:
    rgba(245,166,35,.22);

  box-shadow:
    0 20px 48px
    rgba(14,42,71,.09),
    inset 0 1px 0
    rgba(255,255,255,.92);
}


.wflow-card.is-active::before {
  width: 88px;

  background:
    var(--wf-amber);
}


/* =========================================================
   TOP
========================================================= */

.wflow-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  margin-bottom: 25px;
}


.wflow-card__number {
  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 14px;
  font-weight: 500;

  letter-spacing: -.03em;

  color: var(--wf-amber);
}


.wflow-card__time {
  min-height: 28px;

  display: inline-flex;
  align-items: center;

  padding: 6px 10px;

  border-radius: 999px;

  background:
    rgba(245,166,35,.10);

  font-family:
    "IBM Plex Mono",
    monospace;

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

  white-space: nowrap;

  color: #D98705;
}


.wflow-card__time--green {
  background:
    rgba(30,142,90,.09);

  color: var(--wf-green);
}


/* =========================================================
   SPECIAL BADGE
========================================================= */

.wflow-card__special {
  min-height: 42px;

  margin:
    -8px 0
    19px;

  padding:
    9px 11px;

  display: flex;
  align-items: flex-start;

  gap: 7px;

  border:
    1px solid
    rgba(30,142,90,.16);

  border-radius: 11px;

  background:
    linear-gradient(
      90deg,
      rgba(30,142,90,.08),
      rgba(30,142,90,.035)
    );

  font-family:
    "Inter",
    sans-serif;

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

  line-height: 1.45;

  color: var(--wf-green);
}


.wflow-card__special svg {
  width: 15px;
  height: 15px;

  flex: 0 0 15px;

  margin-top: 1px;
}


/* =========================================================
   ICON
========================================================= */

.wflow-card__icon {
  width: 52px;
  height: 52px;

  display: grid;
  place-items: center;

  margin-bottom: 23px;

  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      rgba(46,111,176,.10),
      rgba(46,111,176,.055)
    );

  color: var(--wf-sky);

  transition:
    transform .3s ease,
    color .3s ease,
    background .3s ease;
}


.wflow-card:hover
.wflow-card__icon {
  transform:
    translateY(-2px);

  color: var(--wf-navy);
}


.wflow-card__icon svg {
  width: 24px;
  height: 24px;
}


/* =========================================================
   CONTENT
========================================================= */

.wflow-card h3 {
  margin:
    0 0
    12px;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(21px, 1.7vw, 26px);

  font-weight: 700;

  line-height: 1.16;

  letter-spacing: -.025em;

  color: var(--wf-navy);

  text-wrap: balance;
}


.wflow-card > p {
  max-width: 34ch;

  margin: 0;

  font-family:
    "Inter",
    sans-serif;

  font-size: 14px;

  line-height: 1.68;

  color: #637483;
}


/* =========================================================
   RESULT
========================================================= */

.wflow-card__result {
  margin-top: auto;

  padding-top: 23px;

  border-top:
    1px solid
    #E9EDF1;
}


.wflow-card__result-label {
  display: block;

  margin-bottom: 9px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 8px;

  letter-spacing: .08em;

  text-transform: uppercase;

  color: #9AA7B2;
}


.wflow-card__result > div {
  display: flex;
  align-items: flex-start;

  gap: 8px;

  font-family:
    "Inter",
    sans-serif;

  font-size: 12px;

  font-weight: 600;

  line-height: 1.45;

  color: var(--wf-navy);
}


.wflow-card__result svg {
  width: 17px;
  height: 17px;

  flex: 0 0 17px;

  color: var(--wf-green);
}


/* =========================================================
   REVEAL
========================================================= */

.wflow-reveal {
  opacity: 0;

  transform:
    translateY(24px);

  transition:
    opacity .72s ease,
    transform .72s
    cubic-bezier(.22,.7,.25,1);
}


.wflow-reveal.is-visible {
  opacity: 1;

  transform:
    translateY(0);
}


.wflow__nav {
  transition-delay: .06s;
}


.wflow__viewport {
  transition-delay: .12s;
}


/* =========================================================
   1024
========================================================= */

@media (max-width: 1100px) {

  .wflow__heading-grid {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(260px, .55fr);
  }


  .wflow__track {
    grid-auto-columns:
      calc(
        (
          100% -
          var(--wf-gap)
        ) / 2.18
      );
  }


  .wflow-card {
    min-height: 420px;
  }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {

  .wflow {
    padding:
      58px
      0
      70px;
  }


  .wflow__container {
    width:
      calc(100% - 32px);
  }


  .wflow__heading-grid {
    grid-template-columns: 1fr;

    gap: 17px;
  }


  .wflow__heading-grid h2 {
    font-size:
      clamp(
        30px,
        8.5vw,
        43px
      );
  }


  .wflow__heading-grid p {
    max-width: 600px;

    font-size: 14px;
  }


  .wflow__nav {
    grid-template-columns:
      minmax(0, 1fr)
      auto;

    gap: 18px;
  }


  .wflow__hint {
    display: none;
  }


  .wflow__hint-arrow {
    display: none;
  }


  .wflow__viewport {
    margin-right: -16px;
  }


  .wflow__viewport::after {
    width: 28px;
  }


  .wflow__track {
    --wf-gap: 14px;

    grid-auto-columns: 73%;

    padding-right: 16px;
  }


  .wflow-card {
    min-height: 410px;

    padding:
      22px
      20px;
  }


  .wflow-card h3 {
    font-size: 22px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 480px) {

  .wflow__header {
    margin-bottom: 32px;
  }


  .wflow__nav {
    margin-bottom: 16px;
  }


  /*
    92% = пользователь всегда видит
    кусочек следующей карточки.
  */

  .wflow__track {
    grid-auto-columns: 91%;
  }


  .wflow-card {
    min-height: 430px;
  }


  .wflow-card__time {
    font-size: 8px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .wflow-reveal {
    opacity: 1;

    transform: none;

    transition: none;
  }


  .wflow__hint-arrow {
    animation: none;
  }


  .wflow__progress-fill,
  .wflow-card,
  .wflow-card__icon {
    transition: none;
  }

}

/* =========================================================
   SOLAR WORKS
========================================================= */

.solar-works {
  --sw-navy: #0E2A47;
  --sw-amber: #F5A623;
  --sw-green: #1E8E5A;
  --sw-sky: #2E6FB0;
  --sw-text: #5A6B7B;
  --sw-border: #E3E8EE;

  position: relative;
  overflow: hidden;

  padding:
    clamp(78px, 7vw, 112px)
    20px
    clamp(84px, 8vw, 122px);

  color: var(--sw-navy);

  background:
    radial-gradient(
      circle at 90% 4%,
      rgba(46,111,176,.07),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #FFFFFF,
      #F5F7F9
    );
}


.solar-works::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(14,42,71,.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(14,42,71,.018) 1px,
      transparent 1px
    );

  background-size:
    56px 56px;
}


.solar-works__container {
  position: relative;
  z-index: 2;

  width:
    min(100%, 1360px);

  margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.solar-works__header {
  margin-bottom:
    clamp(34px, 5vw, 52px);

  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  gap: 40px;
}


.solar-works__heading {
  max-width: 790px;
}


.solar-works__eyebrow {
  margin-bottom: 12px;

  font-family:
    "IBM Plex Mono",
    monospace;

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

  letter-spacing: .13em;

  color: var(--sw-sky);
}


.solar-works__heading h2 {
  margin: 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(34px, 3.8vw, 56px);

  font-weight: 800;

  line-height: 1.06;

  letter-spacing: -.04em;

  text-wrap: balance;
}


.solar-works__heading p {
  max-width: 630px;

  margin:
    17px 0 0;

  font-family:
    "Inter",
    sans-serif;

  font-size: 15px;

  line-height: 1.65;

  color: var(--sw-text);
}


/* =========================================================
   FILTER
========================================================= */

.sw-filter {
  flex-shrink: 0;

  display: flex;
  align-items: center;

  gap: 4px;

  padding: 4px;

  border:
    1px solid
    var(--sw-border);

  border-radius: 13px;

  background:
    rgba(255,255,255,.84);

  box-shadow:
    0 8px 25px
    rgba(14,42,71,.04);

  backdrop-filter:
    blur(12px);
}


.sw-filter__button {
  min-height: 42px;

  padding:
    0 15px;

  border: 0;

  border-radius: 9px;

  background:
    transparent;

  font-family:
    "Inter",
    sans-serif;

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

  color: #748491;

  cursor: pointer;

  transition:
    color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}


.sw-filter__button:hover {
  color: var(--sw-navy);
}


.sw-filter__button.is-active {
  color: #fff;

  background:
    var(--sw-navy);

  box-shadow:
    0 8px 20px
    rgba(14,42,71,.15);
}


/* =========================================================
   GRID
========================================================= */

.sw-grid {
  display: grid;

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

  gap: 23px;
}


/* =========================================================
   WORK CARD
========================================================= */

.sw-card {
  min-width: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(14,42,71,.07);

  border-radius: 18px;

  background: #fff;

  box-shadow:
    0 12px 34px
    rgba(14,42,71,.055);

  transition:
    transform .34s
    cubic-bezier(.2,.7,.2,1),
    box-shadow .34s ease,
    opacity .25s ease;
}


.sw-card:hover {
  transform:
    translateY(-6px);

  box-shadow:
    0 22px 50px
    rgba(14,42,71,.11);
}


.sw-card[hidden] {
  display: none;
}


/* =========================================================
   MEDIA
========================================================= */

.sw-card__media {
  position: relative;

  aspect-ratio:
    16 / 10;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #DDE6EC,
      #BDCCD7
    );
}


.sw-card__media img {
  position: relative;

  z-index: 2;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform .6s
    cubic-bezier(.2,.7,.2,1);
}


.sw-card:hover
.sw-card__media img {
  transform:
    scale(1.045);
}


/* PLACEHOLDER */

.sw-card__placeholder {
  position: absolute;

  inset: 18px;

  z-index: 1;

  display: grid;
  place-items: center;

  padding: 20px;

  border:
    1px dashed
    rgba(14,42,71,.20);

  border-radius: 12px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 9px;

  line-height: 1.6;

  text-align: center;

  color:
    rgba(14,42,71,.46);
}


/* =========================================================
   POWER
========================================================= */

.sw-card__power {
  position: absolute;

  z-index: 6;

  top: 15px;
  left: 15px;

  min-height: 43px;

  padding:
    0 13px;

  display: flex;
  align-items: baseline;

  gap: 5px;

  border:
    1px solid
    rgba(255,255,255,.20);

  border-radius: 11px;

  background:
    rgba(7,27,47,.76);

  backdrop-filter:
    blur(12px);

  color: #fff;
}


.sw-card__power strong {
  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 19px;

  font-weight: 500;
}


.sw-card__power span {
  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 9px;

  color:
    var(--sw-amber);
}


/* =========================================================
   OVERLAY
========================================================= */

.sw-card__overlay {
  position: absolute;

  z-index: 5;

  inset: 0;

  padding: 19px;

  display: flex;
  flex-direction: column;

  justify-content: space-between;

  background:
    linear-gradient(
      180deg,
      rgba(7,27,47,.08),
      rgba(7,27,47,.72) 62%,
      rgba(7,27,47,.96)
    );

  color: #fff;

  opacity: 0;

  transform:
    translateY(7px);

  transition:
    opacity .34s ease,
    transform .34s ease;
}


.sw-card:hover
.sw-card__overlay {
  opacity: 1;

  transform:
    translateY(0);
}


.sw-card__overlay-tags {
  margin-top: 52px;

  display: flex;

  flex-wrap: wrap;

  gap: 6px;
}


.sw-card__overlay-tags span {
  padding:
    6px 9px;

  border:
    1px solid
    rgba(255,255,255,.14);

  border-radius: 999px;

  background:
    rgba(255,255,255,.08);

  backdrop-filter:
    blur(10px);

  font-family:
    "Inter",
    sans-serif;

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

  color:
    rgba(255,255,255,.84);
}


.sw-card__overlay-data {
  display: grid;

  gap: 12px;
}


.sw-card__overlay-data > div {
  padding-top: 10px;

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


.sw-card__overlay-data small {
  display: block;

  margin-bottom: 4px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 8px;

  color:
    rgba(255,255,255,.42);
}


.sw-card__overlay-data strong {
  font-family:
    "Inter",
    sans-serif;

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


.sw-card__green {
  color: #82DCAE;
}


/* =========================================================
   CARD BODY
========================================================= */

.sw-card__body {
  padding: 21px;
}


.sw-card__location {
  margin-bottom: 10px;

  display: flex;

  align-items: center;

  gap: 6px;

  font-family:
    "IBM Plex Mono",
    monospace;

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

  color: var(--sw-sky);
}


.sw-card__location svg {
  width: 15px;
  height: 15px;
}


.sw-card__body h3 {
  margin:
    0 0 15px;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(19px, 1.5vw, 23px);

  font-weight: 700;

  line-height: 1.22;

  letter-spacing: -.025em;

  text-wrap: balance;
}


.sw-card__meta {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 8px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 9px;

  color: #7C8C99;
}


.sw-card__meta span:first-child {
  color: var(--sw-navy);
}


.sw-card__meta i {
  width: 3px;
  height: 3px;

  border-radius: 50%;

  background: #CBD3DA;
}


/* =========================================================
   MAP BLOCK
========================================================= */

.sw-map {
  margin-top:
    clamp(46px, 6vw, 70px);

  min-height: 430px;

  display: grid;

  grid-template-columns:
    minmax(330px, .72fr)
    minmax(0, 1.28fr);

  overflow: hidden;

  border-radius: 20px;

  background:
    radial-gradient(
      circle at 84% 28%,
      rgba(46,111,176,.24),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #09243E,
      #10395F
    );

  color: #fff;

  box-shadow:
    0 28px 70px
    rgba(14,42,71,.16);
}


/* LEFT */

.sw-map__content {
  padding:
    clamp(34px, 4vw, 55px);

  display: flex;
  flex-direction: column;
  justify-content: center;
}


.sw-map__eyebrow {
  margin-bottom: 11px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 9px;

  letter-spacing: .12em;

  color:
    var(--sw-amber);
}


.sw-map__content h3 {
  max-width: 450px;

  margin: 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(29px, 2.8vw, 41px);

  line-height: 1.08;

  letter-spacing: -.035em;

  text-wrap: balance;
}


.sw-map__content p {
  max-width: 420px;

  margin:
    17px 0 0;

  font-family:
    "Inter",
    sans-serif;

  font-size: 13px;

  line-height: 1.7;

  color:
    rgba(255,255,255,.56);
}


/* STATS */

.sw-map__stats {
  margin-top: 28px;

  display: flex;

  gap: 34px;
}


.sw-map__stats > div {
  display: flex;

  align-items: baseline;

  gap: 7px;
}


.sw-map__stats strong {
  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 25px;

  font-weight: 500;
}


.sw-map__stats span {
  font-family:
    "Inter",
    sans-serif;

  font-size: 9px;

  color:
    rgba(255,255,255,.38);
}


/* LINK */

.sw-map__link {
  width: fit-content;

  margin-top: 28px;

  display: inline-flex;

  align-items: center;

  gap: 9px;

  font-family:
    "Inter",
    sans-serif;

  font-size: 13px;
  font-weight: 700;

  color: var(--sw-amber);
}


.sw-map__link svg {
  width: 18px;
  height: 18px;

  transition:
    transform .22s ease;
}


.sw-map__link:hover svg {
  transform:
    translateX(4px);
}


/* =========================================================
   MAP VISUAL
========================================================= */

.sw-map__visual {
  min-height: 430px;

  padding: 20px;
}


.odesa-map {
  position: relative;

  width: 100%;
  height: 100%;

  min-height: 390px;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius: 17px;

  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(66,125,183,.17),
      transparent 58%
    ),
    linear-gradient(
      rgba(255,255,255,.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.018) 1px,
      transparent 1px
    );

  background-size:
    auto,
    30px 30px,
    30px 30px;

  perspective: 1300px;
}


/* HUD */

.odesa-map__hud {
  position: absolute;

  z-index: 30;

  top: 15px;
  left: 17px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 7px;

  letter-spacing: .11em;

  color:
    rgba(255,255,255,.26);
}


/* GLOW */

.odesa-map__glow {
  position: absolute;

  width: 390px;
  height: 280px;

  left: 54%;
  top: 54%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    rgba(52,113,174,.18);

  filter:
    blur(60px);

  pointer-events: none;
}


/* SCENE */

.odesa-map__scene {
  position: absolute;

  inset:
    32px 10px
    8px;

  display: flex;

  align-items: center;
  justify-content: center;

  transform-style: preserve-3d;

  transform:
    perspective(1300px)
    rotateX(var(--map-rx, 0deg))
    rotateY(var(--map-ry, 0deg));

  transition:
    transform .16s ease-out;
}


/*
  Сохраняем вертикальную географию области
*/

.odesa-map__stage {
  position: relative;

  height: 94%;
  max-height: 350px;

  aspect-ratio:
    392 / 584;

  transform-style:
    preserve-3d;
}


/* SVG */

.odesa-map__svg {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;

  filter:
    drop-shadow(
      0 26px 25px
      rgba(0,0,0,.30)
    );
}


.odesa-map__deep {
  fill: #061A2C;
}


.odesa-map__side {
  fill:
    url(#odesaSide);
}


.odesa-map__surface {
  fill:
    url(#odesaSurface);

  stroke:
    rgba(203,228,248,.36);

  stroke-width: 2;

  stroke-linejoin:
    round;
}


.odesa-map__line {
  fill: none;

  stroke:
    rgba(255,255,255,.09);

  stroke-width: 1.2;

  stroke-linecap: round;
}


/* =========================================================
   MAP POINTS
========================================================= */

/* Zero-size anchor: its point (left/top) is exactly the pin TIP,
   so the label can never shift the marker off its city. */
.odesa-point {
  position: absolute;
  z-index: 20;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #fff;
}

/* pulsing ground ring on the map, at the tip */
.odesa-point::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 6px;
  border-radius: 50%;
  background: rgba(245,166,35,.4);
  filter: blur(.5px);
  transform: translate(-50%, -50%) scale(.6);
  animation: mapPinPulse 2.6s ease-out infinite;
  z-index: -1;
}

/* teardrop marker: tip sits on the anchor, grows from the tip */
.odesa-point i {
  position: absolute;
  left: -13px;
  bottom: 0;
  width: 26px;
  height: 34px;
  clip-path: path('M13 34 C 4 22.5, 0 16.5, 0 11.5 A 13 11.5 0 1 1 26 11.5 C 26 16.5 22 22.5 13 34 Z');
  background:
    radial-gradient(circle at 40% 32%, #FFDD93, #F5A623 55%, #C8790C);
  box-shadow: 0 9px 15px rgba(0,0,0,.5);
  transform-origin: 50% 100%;
}

/* inner dot */
.odesa-point i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 11.5px;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #0E2A47;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.92);
}

/* label chip (right of the head by default) */
.odesa-point > span {
  position: absolute;
  left: 16px;
  bottom: 14px;
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(7,27,47,.74);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: "Inter", sans-serif;
  font-size: 8.5px;
  font-weight: 600;
  white-space: nowrap;
  color: rgba(255,255,255,.9);
  transition: background .2s ease, color .2s ease;
}

/* eastern (coast) cities: label to the LEFT so it stays on the map */
.point--pivdenne > span,
.point--odesa > span,
.point--chornomorsk > span,
.point--bilhorod > span {
  left: auto;
  right: 16px;
}

.odesa-point:hover > span,
.odesa-point.is-active > span {
  background: rgba(245,166,35,.22);
  color: #fff;
}

.odesa-point:hover i,
.odesa-point.is-active i {
  filter: brightness(1.08);
}

@keyframes mapPinPulse {
  0%   { transform: translate(-50%, -50%) scale(.5);  opacity: .55; }
  70%  { opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(2.1); opacity: 0; }
}


/* =========================================================
   POINT POSITIONS
========================================================= */

/* left/top = pin TIP, in % of the stage (stage aspect-ratio == SVG viewBox).
   --pin-delay staggers the grow-in animation (top → bottom). */
.point--podilsk {
  left: 45.4%;
  top: 16.4%;
  --pin-delay: .5s;
}

.point--pivdenne {
  left: 88.8%;
  top: 37.7%;
  --pin-delay: .8s;
}

.point--odesa {
  left: 86.2%;
  top: 42.8%;
  --pin-delay: 1.1s;
}

.point--chornomorsk {
  left: 82.1%;
  top: 50%;
  --pin-delay: 1.4s;
}

.point--bilhorod {
  left: 74%;
  top: 59.6%;
  --pin-delay: 1.7s;
}

.point--izmail {
  left: 27.6%;
  top: 85.3%;
  --pin-delay: 2s;
}


/* =========================================================
   MAP ENTRANCE ANIMATION
   (initial hidden states apply ONLY when JS adds .odesa-map--anim,
    so the map stays fully visible if JS is disabled/fails)
========================================================= */

.odesa-map--anim .odesa-map__side,
.odesa-map--anim .odesa-map__deep {
  opacity: 0;
  transition: opacity .85s ease .15s;
}

.odesa-map--anim .odesa-map__surface {
  fill-opacity: 0;
  transition: fill-opacity .9s ease .3s;
}

/* markers start hidden: pin collapsed to its tip, label & ring faded out */
.odesa-map--anim .odesa-point i {
  opacity: 0;
  transform: scale(0);
  transition:
    opacity .35s ease var(--pin-delay, 0s),
    transform .8s cubic-bezier(.34, 1.45, .5, 1) var(--pin-delay, 0s);
}

.odesa-map--anim .odesa-point::after {
  opacity: 0;
  animation: none;
}

.odesa-map--anim .odesa-point > span {
  opacity: 0;
  transform: translateY(5px);
  transition:
    opacity .4s ease calc(var(--pin-delay, 0s) + .35s),
    transform .4s ease calc(var(--pin-delay, 0s) + .35s);
}

/* revealed state */
.odesa-map--in .odesa-map__side,
.odesa-map--in .odesa-map__deep {
  opacity: 1;
}

.odesa-map--in .odesa-map__surface {
  fill-opacity: 1;
}

.odesa-map--in .odesa-point i {
  opacity: 1;
  transform: scale(1);
}

.odesa-map--in .odesa-point::after {
  opacity: 1;
  animation: mapPinPulse 2.6s ease-out infinite;
  animation-delay: calc(var(--pin-delay, 0s) + .4s);
}

.odesa-map--in .odesa-point > span {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .odesa-map--anim .odesa-map__side,
  .odesa-map--anim .odesa-map__deep,
  .odesa-map--anim .odesa-map__surface,
  .odesa-map--anim .odesa-point i,
  .odesa-map--anim .odesa-point > span {
    transition: none;
  }
  .odesa-map--anim .odesa-point::after { animation: none; }
}


/* =========================================================
   TOOLTIP
========================================================= */

.odesa-tooltip {
  position: absolute;

  z-index: 50;

  min-width: 190px;
  max-width: 245px;

  padding:
    12px 13px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius: 12px;

  background:
    rgba(5,24,41,.95);

  backdrop-filter:
    blur(15px);

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.28);

  pointer-events: none;

  opacity: 0;

  transform:
    translate(
      -50%,
      calc(-100% - 18px)
    )
    scale(.96);

  transition:
    opacity .2s ease,
    transform .2s ease;
}


.odesa-tooltip.is-visible {
  opacity: 1;

  transform:
    translate(
      -50%,
      calc(-100% - 22px)
    )
    scale(1);
}


.odesa-tooltip strong {
  display: block;

  margin-bottom: 4px;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 13px;

  color: #fff;
}


.odesa-tooltip span {
  font-family:
    "Inter",
    sans-serif;

  font-size: 10px;

  line-height: 1.5;

  color:
    rgba(255,255,255,.56);
}


/* =========================================================
   FILTER ANIMATION
========================================================= */

.sw-card.is-removing {
  opacity: 0;

  transform:
    translateY(8px)
    scale(.97);
}


.sw-card.is-appearing {
  animation:
    swCardAppear
    .42s
    cubic-bezier(.2,.7,.2,1)
    both;
}


@keyframes swCardAppear {

  from {
    opacity: 0;

    transform:
      translateY(12px)
      scale(.98);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}


/* =========================================================
   MAP PULSE
========================================================= */

@keyframes swMapPulse {

  0% {
    transform:
      scale(.7);

    opacity: .75;
  }

  100% {
    transform:
      scale(1.85);

    opacity: 0;
  }

}


/* =========================================================
   REVEAL
========================================================= */

.sw-reveal {
  opacity: 0;

  transform:
    translateY(24px);

  transition:
    opacity .72s ease,
    transform .72s
    cubic-bezier(.22,.7,.25,1);
}


.sw-reveal.is-visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

  .solar-works__header {
    align-items:
      flex-start;

    flex-direction:
      column;
  }


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


  .sw-map {
    grid-template-columns:
      .82fr
      1.18fr;
  }


  .odesa-point > span {
    display: none;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .solar-works {
    padding:
      58px
      16px
      72px;
  }


  .solar-works__heading h2 {
    font-size:
      clamp(
        30px,
        8.5vw,
        42px
      );
  }


  .sw-filter {
    width: 100%;

    overflow-x: auto;

    scrollbar-width: none;
  }


  .sw-filter::-webkit-scrollbar {
    display: none;
  }


  .sw-filter__button {
    flex:
      0 0 auto;
  }


  .sw-grid {
    grid-template-columns:
      1fr;

    gap: 18px;
  }


  /*
    На touch показываем overlay постоянно снизу.
  */

  .sw-card__overlay {
    top: auto;

    min-height: 55%;

    opacity: 1;

    transform: none;

    background:
      linear-gradient(
        transparent,
        rgba(7,27,47,.95)
      );
  }


  .sw-card__overlay-tags {
    display: none;
  }


  /* MAP */

  .sw-map {
    grid-template-columns:
      1fr;
  }


  .sw-map__visual {
    min-height: 440px;

    padding:
      0 12px 12px;
  }


  .odesa-map {
    min-height: 420px;
  }


  .odesa-map__stage {
    max-height: 350px;
  }


  .odesa-point > span {
    display: inline-flex;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .sw-map__content {
    padding:
      28px 22px;
  }


  .sw-map__stats {
    gap: 20px;
  }


  .sw-map__visual {
    min-height: 390px;
  }


  .odesa-map {
    min-height: 370px;
  }


  .odesa-point > span {
    display: none;
  }


  .odesa-tooltip {
    min-width: 170px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .sw-reveal {
    opacity: 1;

    transform: none;

    transition: none;
  }


  .sw-card,
  .sw-card__overlay,
  .odesa-map__scene,
  .odesa-tooltip {
    transition: none;
  }


  .odesa-point i::after {
    animation: none;
  }

}

.clients-reviews {
  --cr-navy: #0E2A47;
  --cr-amber: #F5A623;
  --cr-green: #1E8E5A;
  --cr-sky: #2E6FB0;
  --cr-text: #5A6B7B;
  --cr-border: #E3E8EE;
  --cr-bg: #F4F6F8;

  position: relative;
  overflow: hidden;
  scroll-margin-top: 90px;
  padding: clamp(78px, 7vw, 110px) 20px;
  background:
    radial-gradient(circle at 92% 5%, rgba(46,111,176,.07), transparent 28%),
    linear-gradient(180deg, #FFFFFF, #F5F7F9);
  color: var(--cr-navy);
}

.clients-reviews::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(14,42,71,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,42,71,.018) 1px, transparent 1px);
  background-size: 56px 56px;
}

.clients-reviews__container {
  position: relative;
  z-index: 2;
  width: min(100%, 1360px);
  margin: 0 auto;
}

/* HEADER */

.clients-reviews__header {
  margin-bottom: 36px;
}

.clients-reviews__eyebrow {
  margin-bottom: 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: .13em;
  color: var(--cr-sky);
}

.clients-reviews__heading h2 {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(34px, 3.8vw, 56px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.clients-reviews__summary {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.clients-reviews__rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--cr-border);
  border-radius: 12px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 28px rgba(14,42,71,.04);
  backdrop-filter: blur(12px);
}

.clients-reviews__stars {
  color: var(--cr-amber);
  letter-spacing: 2px;
  font-size: 14px;
}

.clients-reviews__rating strong {
  font-family: "IBM Plex Mono", monospace;
  font-size: 22px;
  font-weight: 500;
  color: var(--cr-navy);
}

.clients-reviews__summary p {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  color: var(--cr-text);
}

/* SLIDER */

.cr-slider-wrap {
  margin-top: 26px;
}

.cr-slider {
  --gap: 18px;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--gap) * 2) / 3.08);
  gap: var(--gap);

  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 0 18px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.cr-slider::-webkit-scrollbar {
  display: none;
}

.cr-slider.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.cr-card {
  position: relative;
  min-height: 360px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;

  border: 1px solid rgba(14,42,71,.07);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.95), rgba(255,255,255,.82));
  box-shadow: 0 14px 38px rgba(14,42,71,.055);
  backdrop-filter: blur(14px);

  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

.cr-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(14,42,71,.09);
  border-color: rgba(46,111,176,.16);
}

.cr-card__quote {
  position: absolute;
  top: 10px;
  right: 18px;
  font-family: Georgia, serif;
  font-size: 76px;
  line-height: 1;
  color: rgba(245,166,35,.17);
}

.cr-card__top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 16px;
}

.cr-avatar {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #DCE6ED, #BDCEDA);
  border: 3px solid #fff;
  box-shadow: 0 5px 15px rgba(14,42,71,.10);
}

.cr-avatar span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  color: #647D91;
}

.cr-card__person strong {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.cr-card__person span {
  display: block;
  margin-top: 4px;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  color: #7C8C99;
}

.cr-card__person b {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  color: var(--cr-sky);
}

.cr-card__stars {
  margin-top: 22px;
  color: var(--cr-amber);
  letter-spacing: 2px;
  font-size: 15px;
}

.cr-card p {
  margin: 16px 0 24px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.72;
  color: #536777;
}

.cr-card__footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #E7EBEF;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.cr-card__badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(245,166,35,.12);
  color: var(--cr-navy);
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
}

.cr-card__meta {
  font-family: "Inter", sans-serif;
  font-size: 11px;
  color: #7D8C98;
}

/* DOTS */

.cr-dots {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.cr-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #CCD5DC;
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}

.cr-dots button.is-active {
  width: 26px;
  background: var(--cr-amber);
}

/* SECTION HEAD */

.cr-section-head {
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: 1fr minmax(260px, .6fr);
  align-items: end;
  gap: 40px;
}

.cr-section-head > div > span {
  display: block;
  margin-bottom: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--cr-sky);
}

.cr-section-head h3 {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(25px, 2.5vw, 36px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
}

.cr-section-head p {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.65;
  color: #697987;
}

/* VIDEO */

.cr-video-section {
  margin-top: clamp(54px, 6vw, 76px);
}

.cr-video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.cr-video-card {
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(14,42,71,.07);
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 34px rgba(14,42,71,.055);
  text-align: left;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
}

.cr-video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(14,42,71,.10);
}

.cr-video-card__preview {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(145deg, #8096A6, #435F75);
}

.cr-video-card__placeholder {
  position: absolute;
  inset: 20px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(255,255,255,.28);
  border-radius: 12px;
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  color: rgba(255,255,255,.56);
}

.cr-video-card__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cr-amber);
  color: var(--cr-navy);
  box-shadow: 0 15px 34px rgba(245,166,35,.28);
  transition: transform .3s ease;
}

.cr-video-card:hover .cr-video-card__play {
  transform: translate(-50%, -50%) scale(1.08);
}

.cr-video-card__play svg {
  width: 28px;
  height: 28px;
  margin-left: 3px;
}

.cr-video-card__time {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 5px 8px;
  border-radius: 8px;
  background: rgba(7,27,47,.7);
  backdrop-filter: blur(8px);
  font-family: "IBM Plex Mono", monospace;
  font-size: 8px;
  color: #fff;
}

.cr-video-card__body {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.cr-video-card__body strong {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--cr-navy);
}

.cr-video-card__body div:first-child span {
  display: block;
  margin-top: 4px;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  color: #83919D;
}

.cr-video-card__meta {
  text-align: right;
}

.cr-video-card__meta b {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 15px;
  font-weight: 500;
  color: var(--cr-navy);
}

.cr-video-card__meta span {
  display: block;
  margin-top: 4px;
  font-family: "Inter", sans-serif;
  font-size: 9px;
  color: var(--cr-green);
}

/* GOOGLE REVIEWS */

.cr-google {
  margin-top: clamp(48px, 5vw, 68px);
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--cr-border);
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 12px 35px rgba(14,42,71,.045);
  backdrop-filter: blur(12px);
}

.cr-google__head {
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.cr-google__badge {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cr-google__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(14,42,71,.08);
  font-family: Arial, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #4285F4;
}

.cr-google__badge strong {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.cr-google__badge span {
  display: block;
  margin-top: 2px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  color: var(--cr-amber);
}

.cr-google__head p {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  color: #82909B;
}

.cr-google__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.cr-google-shot {
  min-height: 190px;
  padding: 16px;
  border: 1px solid #E5E9ED;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(14,42,71,.04);
}

.cr-google-shot__placeholder {
  width: 100%;
  height: 100%;
  min-height: 158px;
  display: grid;
  place-items: center;
  border: 1px dashed #D7DFE5;
  border-radius: 10px;
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  color: #9BA8B2;
}

/* REVEAL */

.cr-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .72s ease,
    transform .72s cubic-bezier(.22,.7,.25,1);
}

.cr-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* RESPONSIVE */

@media (max-width: 1024px) {
  .cr-slider {
    grid-auto-columns: calc((100% - var(--gap)) / 2.1);
  }

  .cr-section-head {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 768px) {
  .clients-reviews {
    padding: 58px 16px 72px;
  }

  .clients-reviews__heading h2 {
    font-size: clamp(30px, 8.5vw, 42px);
  }

  .cr-slider {
    grid-auto-columns: 88%;
    padding-right: 16px;
  }

  .cr-card {
    min-height: 390px;
  }

  .cr-video-grid {
    grid-template-columns: 1fr;
  }

  .cr-google__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .cr-card {
    min-height: 420px;
    padding: 21px 19px;
  }

  .cr-card__footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cr-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .cr-card,
  .cr-video-card,
  .cr-video-card__play,
  .cr-dots button {
    transition: none;
  }
}

.warranty-service {
  --ws-navy: #0E2A47;
  --ws-amber: #F5A623;
  --ws-green: #1E8E5A;
  --ws-sky: #2E6FB0;
  --ws-text: #5A6B7B;
  --ws-border: #E3E8EE;
  --ws-bg: #F4F6F8;

  position: relative;
  overflow: hidden;
  padding: clamp(78px, 7vw, 112px) 20px;
  color: var(--ws-navy);
  background:
    radial-gradient(circle at 92% 8%, rgba(46,111,176,.08), transparent 28%),
    linear-gradient(180deg, #FFFFFF, #F5F7F9);
}

.warranty-service::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(14,42,71,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,42,71,.018) 1px, transparent 1px);
  background-size: 56px 56px;
}

.warranty-service__container {
  position: relative;
  z-index: 2;
  width: min(100%, 1360px);
  margin: 0 auto;
}

/* HEADER */

.warranty-service__header {
  margin-bottom: 34px;
  max-width: 860px;
}

.warranty-service__eyebrow {
  margin-bottom: 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
  color: var(--ws-sky);
}

.warranty-service__header h2 {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(34px, 3.9vw, 56px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.04em;
  text-wrap: balance;
}

/* LAYOUT */

.warranty-service__layout {
  display: grid;
  grid-template-columns: 1.15fr .95fr;
  gap: 24px;
  align-items: start;
}

/* GUARANTEES */

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

.ws-card {
  position: relative;
  min-height: 255px;
  padding: 24px;
  border: 1px solid rgba(14,42,71,.07);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.84));
  box-shadow: 0 14px 36px rgba(14,42,71,.055);
  backdrop-filter: blur(14px);
  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

.ws-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 46px rgba(14,42,71,.09);
}

.ws-card--amber:hover {
  border-color: rgba(245,166,35,.28);
}

.ws-card--green:hover {
  border-color: rgba(30,142,90,.24);
}

.ws-card--blue:hover {
  border-color: rgba(46,111,176,.22);
}

.ws-card__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  margin-bottom: 18px;
}

.ws-card--amber .ws-card__icon {
  background: rgba(245,166,35,.12);
  color: var(--ws-amber);
}

.ws-card--green .ws-card__icon {
  background: rgba(30,142,90,.12);
  color: var(--ws-green);
}

.ws-card--blue .ws-card__icon {
  background: rgba(46,111,176,.12);
  color: var(--ws-sky);
}

.ws-card__icon svg {
  width: 24px;
  height: 24px;
}

.ws-card__value {
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(30px, 2.6vw, 46px);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.05em;
  color: var(--ws-navy);
}

.ws-card__unit {
  margin-top: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--ws-text);
}

.ws-card h3 {
  margin: 16px 0 10px;
  font-family: "Montserrat", sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.ws-card p {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ws-text);
}

/* TRUST */

.ws-trust {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 20px;
  padding: 24px;
  border: 1px solid rgba(14,42,71,.07);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,255,255,.82));
  box-shadow: 0 16px 40px rgba(14,42,71,.055);
  backdrop-filter: blur(14px);
}

.ws-trust__eyebrow {
  margin-bottom: 10px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--ws-green);
}

.ws-trust h3 {
  margin: 0 0 18px;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(24px, 2vw, 32px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.03em;
  text-wrap: balance;
}

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

.ws-trust__list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
}

.ws-trust__check {
  position: relative;
  width: 24px;
  height: 24px;
  margin-top: 3px;
  border-radius: 50%;
  background: rgba(30,142,90,.12);
}

.ws-trust__check::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--ws-green);
  border-bottom: 2px solid var(--ws-green);
  transform: rotate(-45deg);
}

.ws-trust__list strong {
  display: block;
  margin-bottom: 4px;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ws-navy);
}

.ws-trust__list p {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ws-text);
}

/* PHONE */

.ws-phone {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ws-phone__frame {
  width: 250px;
  padding: 10px;
  border-radius: 28px;
  background: linear-gradient(180deg, #102E4C, #0A2137);
  box-shadow:
    0 22px 50px rgba(14,42,71,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.ws-phone__topbar {
  width: 86px;
  height: 7px;
  margin: 2px auto 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
}

.ws-phone__screen {
  padding: 16px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 80% 12%, rgba(245,166,35,.13), transparent 26%),
    linear-gradient(180deg, #11365A, #0E2A47);
  color: #fff;
  min-height: 430px;
}

.ws-phone__screen-head {
  margin-bottom: 18px;
}

.ws-phone__label {
  display: block;
  margin-bottom: 7px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 8px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.55);
}

.ws-phone__screen-head strong {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.ws-phone__kpi {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 22px;
}

.ws-phone__kpi span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -.05em;
}

.ws-phone__kpi small {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: rgba(255,255,255,.65);
}

.ws-phone__chart {
  padding: 16px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.ws-phone__bars {
  height: 180px;
  display: flex;
  align-items: end;
  gap: 8px;
}

.ws-phone__bars span {
  flex: 1 1 auto;
  display: block;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #F5A623, #D78C15);
  box-shadow: 0 6px 20px rgba(245,166,35,.18);
}

.ws-phone__stats {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.ws-phone__stats div {
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.07);
}

.ws-phone__stats small {
  display: block;
  margin-bottom: 6px;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,.58);
}

.ws-phone__stats strong {
  font-family: "IBM Plex Mono", monospace;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
}

/* CERTIFICATES */

.ws-certificates {
  margin-top: 42px;
  scroll-margin-top: 110px;
  border-radius: 18px;
}

/* коротка підсвітка після переходу до блоку */
.ws-certificates.is-highlighted {
  animation: sertifHighlight 1.9s ease-out;
}

@keyframes sertifHighlight {
  0%   { box-shadow: 0 0 0 0 rgba(245,166,35,0); }
  12%  { box-shadow: 0 0 0 4px rgba(245,166,35,.6), 0 0 46px rgba(245,166,35,.4); }
  100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); }
}

@media (prefers-reduced-motion: reduce) {
  .ws-certificates.is-highlighted {
    animation: none;
    box-shadow: 0 0 0 4px rgba(245,166,35,.5);
  }
}

.ws-certificates__head {
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: 1fr minmax(280px, .55fr);
  align-items: end;
  gap: 30px;
}

.ws-certificates__head span {
  display: block;
  margin-bottom: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--ws-sky);
}

.ws-certificates__head h3 {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.03em;
}

.ws-certificates__head p {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ws-text);
}

.ws-certificates__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.ws-cert {
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.ws-cert__thumb {
  overflow: hidden;
  border: 1px solid rgba(14,42,71,.08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(14,42,71,.045);
  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.ws-cert:hover .ws-cert__thumb {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(14,42,71,.09);
}

.ws-cert__placeholder {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px dashed #D7DFE5;
  border-radius: 12px;
  margin: 14px;
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  color: #9BA8B2;
  transition: transform .35s ease;
}

.ws-cert:hover .ws-cert__placeholder {
  transform: scale(1.03);
}

.ws-cert > span {
  display: block;
  margin-top: 10px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ws-navy);
}

/* MODAL */

.ws-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}

.ws-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ws-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7,27,47,.62);
  backdrop-filter: blur(8px);
}

.ws-modal__dialog {
  position: relative;
  z-index: 2;
  width: min(100%, 760px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 30px 70px rgba(14,42,71,.22);
}

.ws-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 12px;
  background: rgba(14,42,71,.06);
  color: var(--ws-navy);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.ws-modal__preview {
  min-height: 380px;
  padding: 22px;
  background: linear-gradient(145deg, #F7F9FB, #EEF3F7);
}

.ws-modal__placeholder {
  width: 100%;
  min-height: 336px;
  display: grid;
  place-items: center;
  border: 1px dashed #CBD6DF;
  border-radius: 16px;
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: #97A6B1;
}

.ws-modal__body {
  padding: 22px 24px 24px;
}

.ws-modal__body h4 {
  margin: 0 0 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--ws-navy);
}

.ws-modal__body p {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ws-text);
}

/* REVEAL */

.ws-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .72s ease,
    transform .72s cubic-bezier(.22,.7,.25,1);
}

.ws-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* RESPONSIVE */

@media (max-width: 1180px) {
  .warranty-service__layout {
    grid-template-columns: 1fr;
  }

  .ws-trust {
    grid-template-columns: 1fr 280px;
  }

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

@media (max-width: 1024px) {
  .ws-guarantees {
    grid-template-columns: repeat(2, 1fr);
  }

  .ws-certificates__head {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 768px) {
  .warranty-service {
    padding: 58px 16px 72px;
  }

  .warranty-service__header h2 {
    font-size: clamp(30px, 8.5vw, 42px);
  }

  .ws-trust {
    grid-template-columns: 1fr;
  }

  .ws-phone {
    justify-content: flex-start;
  }

  .ws-phone__frame {
    width: 100%;
    max-width: 320px;
  }

  .ws-guarantees {
    grid-template-columns: 1fr;
  }

  .ws-certificates__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .ws-card {
    min-height: auto;
  }

  .ws-phone__screen {
    min-height: 390px;
  }

  .ws-modal__preview {
    min-height: 250px;
  }

  .ws-modal__placeholder {
    min-height: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-reveal,
  .ws-card,
  .ws-cert__thumb,
  .ws-cert__placeholder,
  .ws-modal {
    transition: none;
  }

  .ws-reveal {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   SOLAR PANELS (EQUIPMENT)
========================================================= */

.panels {
  --pn-navy: #0E2A47;
  --pn-amber: #F5A623;
  --pn-sky: #2E6FB0;
  --pn-text: #5A6B7B;
  --pn-border: #E3E8EE;

  position: relative;
  overflow: hidden;
  padding: clamp(78px, 7vw, 112px) 20px;
  color: var(--pn-navy);
  background:
    radial-gradient(circle at 8% 10%, rgba(46,111,176,.08), transparent 30%),
    linear-gradient(180deg, #F5F7F9, #FFFFFF);
}

.panels::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(14,42,71,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,42,71,.018) 1px, transparent 1px);
  background-size: 56px 56px;
}

.panels__container {
  position: relative;
  z-index: 2;
  width: min(100%, 1360px);
  margin: 0 auto;
}

.panels__header {
  max-width: 820px;
  margin-bottom: 38px;
}

.panels__eyebrow {
  margin-bottom: 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
  color: var(--pn-sky);
}

.panels__header h2 {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(34px, 3.9vw, 56px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.panels__header p {
  margin: 14px 0 0;
  max-width: 640px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--pn-text);
}

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

.panel-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pn-border);
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 14px 34px rgba(14,42,71,.06);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.panel-card:hover {
  transform: translateY(-6px);
  border-color: rgba(245,166,35,.5);
  box-shadow: 0 26px 50px rgba(14,42,71,.12);
}

/* MEDIA */
.panel-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 14px 14px 0;
  border-radius: 14px;
  border: 5px solid #C9D2DC;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 40px),
    linear-gradient(155deg, #17406a 0%, #0d2742 60%, #0a2038 100%);
}

.panel-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

.panel-card__power {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--pn-amber);
  color: #3a2600;
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  font-size: 17px;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(245,166,35,.35);
}

.panel-card__power small {
  font-size: 10px;
  font-weight: 700;
}

/* BODY */
.panel-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 20px 20px;
}

.panel-card__title {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.panel-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.panel-card__tags span {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(46,111,176,.09);
  color: var(--pn-sky);
  font-size: 11px;
  font-weight: 600;
}

.panel-card__eff {
  margin-top: 14px;
  font-size: 13px;
  color: var(--pn-text);
}

.panel-card__eff strong {
  color: var(--pn-navy);
  font-family: "Montserrat", sans-serif;
  font-size: 17px;
  font-weight: 800;
}

.panel-card__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 16px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--pn-border);
  border: 1px solid var(--pn-border);
}

.panel-card__specs > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  background: #FBFCFD;
}

.panel-card__specs span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--pn-text);
}

.panel-card__specs b {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--pn-navy);
  white-space: nowrap;
}

.panel-card__meta {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--pn-text);
}

.panel-card__foot {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel-card__price {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.panel-card__price span {
  font-size: 11px;
  color: var(--pn-text);
}

.panel-card__price strong {
  font-family: "Montserrat", sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--pn-navy);
}

.panel-card__btn {
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .panels__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .panels__grid {
    grid-template-columns: 1fr;
  }
}


.solar-pricing {
  --sp-navy: #0E2A47;
  --sp-amber: #F5A623;
  --sp-green: #1E8E5A;
  --sp-sky: #2E6FB0;
  --sp-text: #5A6B7B;
  --sp-border: #E3E8EE;

  position: relative;
  overflow: hidden;
  padding: clamp(78px, 7vw, 112px) 20px;
  color: var(--sp-navy);
  background:
    radial-gradient(circle at 92% 8%, rgba(46,111,176,.08), transparent 28%),
    linear-gradient(180deg, #FFFFFF, #F5F7F9);
}

.solar-pricing::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(14,42,71,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,42,71,.018) 1px, transparent 1px);
  background-size: 56px 56px;
}

.solar-pricing__container {
  position: relative;
  z-index: 2;
  width: min(100%, 1360px);
  margin: 0 auto;
}

/* HEADER */

.solar-pricing__header {
  max-width: 820px;
  margin-bottom: 34px;
}

.solar-pricing__eyebrow {
  margin-bottom: 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
  color: var(--sp-sky);
}

.solar-pricing__header h2 {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(34px, 3.9vw, 56px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.solar-pricing__header p {
  margin: 16px 0 0;
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.68;
  color: var(--sp-text);
}

/* GRID */

.solar-pricing__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* CARD */

.sp-card {
  position: relative;
  min-height: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;

  border: 1px solid rgba(14,42,71,.07);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.84));
  box-shadow: 0 14px 36px rgba(14,42,71,.055);
  backdrop-filter: blur(14px);

  transition:
    transform .32s ease,
    box-shadow .32s ease,
    border-color .32s ease;
}

.sp-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(14,42,71,.1);
  border-color: rgba(245,166,35,.2);
}

.sp-card__top {
  margin-bottom: 22px;
}

.sp-card__power {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(30px, 2.3vw, 40px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--sp-navy);
}

.sp-card__subtitle {
  margin-top: 9px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--sp-text);
}

.sp-card__price-block {
  margin-bottom: 20px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(14,42,71,.06);
  border-radius: 16px;
  background: rgba(14,42,71,.025);
}

.sp-card__price-label {
  display: block;
  margin-bottom: 8px;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  color: #7F8F9D;
}

.sp-card__price {
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(23px, 1.85vw, 30px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.05em;
  color: var(--sp-navy);
}

.sp-card__features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.sp-card__features li {
  position: relative;
  padding-left: 28px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--sp-text);
}

.sp-card__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(30,142,90,.12);
}

.sp-card__features li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  width: 6px;
  height: 3px;
  border-left: 2px solid var(--sp-green);
  border-bottom: 2px solid var(--sp-green);
  transform: rotate(-45deg);
}

.sp-card__button {
  margin-top: auto;
  min-height: 52px;
  width: 100%;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: var(--sp-amber);
  color: var(--sp-navy);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(245,166,35,.24);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    filter .25s ease;
}

.sp-card__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(245,166,35,.32);
  filter: brightness(1.02);
}

/* FEATURED */

.sp-card--featured {
  transform: translateY(-10px);
  border: 2px solid rgba(245,166,35,.78);
  background:
    radial-gradient(circle at 88% 10%, rgba(245,166,35,.12), transparent 24%),
    linear-gradient(180deg, #103251, #0C2741);
  box-shadow:
    0 22px 54px rgba(14,42,71,.18),
    0 0 0 1px rgba(245,166,35,.12) inset;
}

.sp-card--featured:hover {
  transform: translateY(-16px);
  border-color: rgba(245,166,35,.95);
}

.sp-card--featured .sp-card__power,
.sp-card--featured .sp-card__price {
  color: #fff;
}

.sp-card--featured .sp-card__subtitle,
.sp-card--featured .sp-card__features li,
.sp-card--featured .sp-card__price-label {
  color: rgba(255,255,255,.72);
}

.sp-card--featured .sp-card__price-block {
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}

.sp-card--featured .sp-card__features li::before {
  background: rgba(30,142,90,.18);
}

.sp-card__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  min-height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--sp-amber);
  color: var(--sp-navy);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  box-shadow: 0 10px 24px rgba(245,166,35,.28);
}

/* PAYMENT STRIP */

.sp-payment {
  margin-top: 26px;
}

.sp-payment__inner {
  min-height: 62px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;

  border: 1px solid var(--sp-border);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 28px rgba(14,42,71,.04);
  backdrop-filter: blur(12px);
}

.sp-payment__label {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--sp-navy);
}

.sp-payment__items {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.sp-payment__items span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--sp-sky);
}

.sp-payment__items i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #C9D3DC;
}

/* REVEAL */

.sp-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .72s ease,
    transform .72s cubic-bezier(.22,.7,.25,1);
}

.sp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* RESPONSIVE */

@media (max-width: 1180px) {
  .solar-pricing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .solar-pricing {
    padding: 58px 16px 72px;
  }

  .solar-pricing__header h2 {
    font-size: clamp(30px, 8.5vw, 42px);
  }

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

  .sp-card--featured {
    order: -1;
    transform: none;
  }

  .sp-card--featured:hover {
    transform: translateY(-6px);
  }

  .sp-payment__inner {
    align-items: flex-start;
    flex-direction: column;
    text-align: center;
  }

  .sp-payment__items {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .sp-card {
    padding: 20px;
  }

  .sp-card__price {
    font-size: 24px;
  }

  .sp-payment__items {
    gap: 10px;
  }

  .sp-payment__items i {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-reveal,
  .sp-card,
  .sp-card__button {
    transition: none;
  }

  .sp-reveal {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   ABOUT COMPANY
========================================================= */

.about-company {
  --ac-navy: #0E2A47;
  --ac-amber: #F5A623;
  --ac-green: #1E8E5A;
  --ac-sky: #2E6FB0;
  --ac-text: #5A6B7B;
  --ac-border: #E3E8EE;

  position: relative;
  overflow: hidden;

  padding:
    clamp(78px, 7vw, 112px)
    20px
    clamp(84px, 8vw, 120px);

  color: var(--ac-navy);

  background:
    radial-gradient(
      circle at 90% 8%,
      rgba(46,111,176,.08),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #FFFFFF,
      #F5F7F9
    );
}


.about-company::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(14,42,71,.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(14,42,71,.018) 1px,
      transparent 1px
    );

  background-size:
    56px 56px;
}


.about-company__container {
  position: relative;
  z-index: 2;

  width: min(100%, 1360px);

  margin: 0 auto;
}


/* =========================================================
   MAIN GRID
========================================================= */

.about-company__main {
  display: grid;

  grid-template-columns:
    minmax(0, .92fr)
    minmax(0, 1.08fr);

  gap:
    clamp(36px, 6vw, 82px);

  align-items: center;
}


/* =========================================================
   CONTENT
========================================================= */

.about-company__content {
  max-width: 650px;
}


.about-company__eyebrow {
  margin-bottom: 12px;

  font-family:
    "IBM Plex Mono",
    monospace;

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

  letter-spacing: .13em;

  color: var(--ac-sky);
}


.about-company__content h2 {
  margin: 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(38px, 4.4vw, 64px);

  font-weight: 800;

  line-height: 1;

  letter-spacing: -.045em;
}


.about-company__lead {
  max-width: 620px;

  margin:
    22px 0 0;

  font-family:
    "Inter",
    sans-serif;

  font-size:
    clamp(17px, 1.4vw, 20px);

  font-weight: 500;

  line-height: 1.6;

  color: var(--ac-navy);
}


.about-company__text {
  max-width: 620px;

  margin:
    18px 0 0;

  font-family:
    "Inter",
    sans-serif;

  font-size: 14px;

  line-height: 1.72;

  color: var(--ac-text);
}


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

.about-stats {
  margin-top:
    clamp(30px, 4vw, 44px);

  display: grid;

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

  gap: 1px;

  overflow: hidden;

  border:
    1px solid
    var(--ac-border);

  border-radius: 18px;

  background:
    var(--ac-border);

  box-shadow:
    0 14px 34px
    rgba(14,42,71,.04);
}


.about-stat {
  min-height: 125px;

  padding:
    21px 22px;

  display: flex;
  flex-direction: column;

  justify-content: center;

  background:
    rgba(255,255,255,.94);

  transition:
    background .25s ease;
}


.about-stat:hover {
  background:
    #FFFFFF;
}


.about-stat__value {
  display: flex;

  align-items: baseline;

  gap: 7px;

  font-family:
    "IBM Plex Mono",
    monospace;

  color: var(--ac-navy);
}


.about-counter {
  font-size:
    clamp(29px, 2.7vw, 42px);

  font-weight: 500;

  line-height: 1;

  letter-spacing: -.055em;
}


.about-stat__value small {
  font-size: 12px;

  color:
    var(--ac-sky);
}


.about-stat__label {
  margin-top: 8px;

  font-family:
    "Inter",
    sans-serif;

  font-size: 11px;

  line-height: 1.45;

  color:
    var(--ac-text);
}


/* WAREHOUSE */

.about-stat--warehouse {
  flex-direction: row;

  align-items: center;

  justify-content: flex-start;

  gap: 13px;
}


.about-stat__icon {
  width: 42px;
  height: 42px;

  flex:
    0 0 42px;

  display: grid;

  place-items: center;

  border-radius: 13px;

  background:
    rgba(245,166,35,.11);

  color:
    var(--ac-amber);
}


.about-stat__icon svg {
  width: 21px;
  height: 21px;
}


.about-stat--warehouse strong {
  display: block;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 15px;
  font-weight: 700;

  line-height: 1.2;
}


.about-stat--warehouse span {
  display: block;

  margin-top: 5px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 10px;

  color: var(--ac-text);
}


/* =========================================================
   MAIN PHOTO
========================================================= */

.about-company__visual {
  min-width: 0;
}


.about-photo {
  --about-parallax: 0px;

  position: relative;

  min-height:
    clamp(500px, 47vw, 650px);

  overflow: hidden;

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      #D6E1E8,
      #AABDCB
    );

  box-shadow:
    0 24px 60px
    rgba(14,42,71,.13);

  transform:
    translateY(
      var(--about-parallax)
    );

  transition:
    transform .12s linear;
}


.about-photo::after {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(14,42,71,.02),
      rgba(14,42,71,.06) 56%,
      rgba(7,27,47,.68)
    );
}


.about-photo > img {
  position: absolute;

  inset: -4% 0;

  z-index: 1;

  width: 100%;
  height: 108%;

  object-fit: cover;

  transition:
    transform .8s
    cubic-bezier(.2,.7,.2,1);
}


.about-photo:hover > img {
  transform:
    scale(1.025);
}


/* PLACEHOLDER */

.about-photo__placeholder {
  position: absolute;

  z-index: 1;

  inset: 24px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  padding: 30px;

  border:
    1px dashed
    rgba(14,42,71,.18);

  border-radius: 17px;

  text-align: center;

  color:
    rgba(14,42,71,.48);
}


.about-photo__placeholder-icon {
  width: 68px;
  height: 68px;

  margin-bottom: 17px;

  display: grid;

  place-items: center;

  border-radius: 20px;

  background:
    rgba(255,255,255,.38);

  backdrop-filter:
    blur(8px);
}


.about-photo__placeholder-icon svg {
  width: 31px;
  height: 31px;
}


.about-photo__placeholder strong {
  font-family:
    "Montserrat",
    sans-serif;

  font-size: 17px;
  font-weight: 700;
}


.about-photo__placeholder > span {
  max-width: 310px;

  margin-top: 8px;

  font-family:
    "Inter",
    sans-serif;

  font-size: 12px;

  line-height: 1.55;
}


/* TEAM BADGE */

.about-photo__badge {
  position: absolute;

  z-index: 4;

  top: 20px;
  right: 20px;

  max-width: 255px;

  padding:
    12px 14px;

  display: flex;

  align-items: center;

  gap: 10px;

  border:
    1px solid
    rgba(255,255,255,.18);

  border-radius: 14px;

  background:
    rgba(14,42,71,.65);

  backdrop-filter:
    blur(14px);

  box-shadow:
    0 12px 30px
    rgba(0,0,0,.12);

  color: #fff;
}


.about-photo__badge-dot {
  position: relative;

  width: 9px;
  height: 9px;

  flex:
    0 0 9px;

  border-radius: 50%;

  background:
    #54D695;

  box-shadow:
    0 0 0 5px
    rgba(84,214,149,.10);
}


.about-photo__badge strong {
  display: block;

  font-family:
    "Inter",
    sans-serif;

  font-size: 11px;
  font-weight: 700;
}


.about-photo__badge div span {
  display: block;

  margin-top: 3px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 7px;

  color:
    rgba(255,255,255,.56);
}


/* CAPTION */

.about-photo__caption {
  position: absolute;

  z-index: 4;

  left: 22px;
  right: 22px;
  bottom: 20px;

  display: flex;

  align-items: center;

  gap: 14px;

  color: #fff;
}


.about-photo__caption > span {
  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 10px;

  color:
    var(--ac-amber);
}


.about-photo__caption p {
  margin: 0;

  font-family:
    "Inter",
    sans-serif;

  font-size: 11px;

  color:
    rgba(255,255,255,.7);
}


/* =========================================================
   PHYSICAL PROOF
========================================================= */

.about-proof {
  margin-top:
    clamp(34px, 5vw, 54px);

  display: grid;

  grid-template-columns:
    1fr
    1.15fr
    .9fr
    .9fr;

  gap: 16px;
}


.about-proof__item {
  min-width: 0;

  min-height: 205px;

  padding: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(14,42,71,.07);

  border-radius: 17px;

  background:
    rgba(255,255,255,.89);

  box-shadow:
    0 12px 32px
    rgba(14,42,71,.045);
}


/* DOCUMENT */

.about-proof__item--document {
  display: grid;

  grid-template-columns:
    .9fr 1.1fr;

  cursor: pointer;

  text-align: left;

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}


.about-proof__item--document:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 18px 40px
    rgba(14,42,71,.09);
}


.about-proof__preview {
  padding: 17px;

  background:
    #EEF3F6;
}


.about-proof__doc {
  position: relative;

  height: 100%;

  min-height: 168px;

  padding: 19px;

  border-radius: 10px;

  background: #fff;

  box-shadow:
    0 8px 22px
    rgba(14,42,71,.08);

  transition:
    transform .32s ease;
}


.about-proof__item--document:hover
.about-proof__doc {
  transform:
    scale(1.025)
    rotate(-1deg);
}


.about-proof__doc-logo {
  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 10px;

  color:
    var(--ac-sky);
}


.about-proof__doc > div {
  margin-top: 22px;

  display: grid;

  gap: 7px;
}


.about-proof__doc i {
  display: block;

  height: 3px;

  border-radius: 999px;

  background: #DCE3E8;
}


.about-proof__doc i:nth-child(2) {
  width: 83%;
}


.about-proof__doc i:nth-child(3) {
  width: 92%;
}


.about-proof__doc i:nth-child(4) {
  width: 62%;
}


.about-proof__seal {
  position: absolute;

  width: 42px;
  height: 42px;

  right: 15px;
  bottom: 16px;

  border:
    2px solid
    rgba(46,111,176,.22);

  border-radius: 50%;
}


.about-proof__body {
  padding:
    20px 18px;

  display: flex;

  flex-direction: column;

  justify-content: center;
}


.about-proof__type {
  display: block;

  margin-bottom: 7px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 8px;

  letter-spacing: .09em;

  color:
    var(--ac-sky);
}


.about-proof__body strong {
  font-family:
    "Montserrat",
    sans-serif;

  font-size: 16px;

  line-height: 1.25;

  color:
    var(--ac-navy);
}


.about-proof__open {
  margin-top: 16px;

  display: flex;

  align-items: center;

  gap: 6px;

  font-family:
    "Inter",
    sans-serif;

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

  color:
    var(--ac-amber);
}


.about-proof__open svg {
  width: 15px;
  height: 15px;
}


/* ADDRESS */

.about-proof__item--address {
  padding:
    24px;

  display: grid;

  grid-template-columns:
    46px 1fr;

  gap: 15px;

  align-items: start;
}


.about-proof__address-icon {
  width: 46px;
  height: 46px;

  display: grid;

  place-items: center;

  border-radius: 14px;

  background:
    rgba(30,142,90,.10);

  color:
    var(--ac-green);
}


.about-proof__address-icon svg {
  width: 22px;
  height: 22px;
}


.about-proof__item--address strong {
  display: block;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 17px;
  font-weight: 700;

  color:
    var(--ac-navy);
}


.about-proof__item--address p {
  margin:
    9px 0 0;

  font-family:
    "Inter",
    sans-serif;

  font-size: 12px;

  line-height: 1.55;

  color:
    var(--ac-text);
}


.about-proof__item--address a {
  width: fit-content;

  margin-top: 17px;

  display: flex;

  align-items: center;

  gap: 6px;

  font-family:
    "Inter",
    sans-serif;

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

  color:
    var(--ac-sky);
}


.about-proof__item--address a svg {
  width: 15px;
  height: 15px;
}


/* OFFICE / WAREHOUSE */

.about-proof__item--photo {
  position: relative;

  cursor: pointer;

  text-align: left;

  background:
    linear-gradient(
      145deg,
      #D7E2E9,
      #B3C5D1
    );

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}


.about-proof__item--photo:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 18px 40px
    rgba(14,42,71,.10);
}


.about-proof__photo-placeholder {
  position: absolute;

  inset: 14px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 8px;

  border:
    1px dashed
    rgba(14,42,71,.16);

  border-radius: 12px;

  color:
    rgba(14,42,71,.44);

  transition:
    transform .4s ease;
}


.about-proof__item--photo:hover
.about-proof__photo-placeholder {
  transform:
    scale(1.03);
}


.about-proof__photo-placeholder svg {
  width: 28px;
  height: 28px;
}


.about-proof__photo-placeholder span {
  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 9px;
}


.about-proof__photo-label {
  position: absolute;

  z-index: 3;

  left: 16px;
  right: 16px;
  bottom: 14px;

  padding-top: 30px;

  display: flex;

  align-items: center;

  gap: 8px;

  background:
    linear-gradient(
      transparent,
      rgba(14,42,71,.58)
    );

  color: #fff;
}


.about-proof__photo-label > span {
  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 8px;

  color:
    var(--ac-amber);
}


.about-proof__photo-label strong {
  font-family:
    "Inter",
    sans-serif;

  font-size: 11px;
}


/* =========================================================
   MODAL
========================================================= */

.about-modal {
  position: fixed;

  z-index: 1000;

  inset: 0;

  padding: 20px;

  display: grid;

  place-items: center;

  visibility: hidden;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity .25s ease,
    visibility .25s ease;
}


.about-modal.is-open {
  visibility: visible;

  opacity: 1;

  pointer-events: auto;
}


.about-modal__backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(7,27,47,.65);

  backdrop-filter:
    blur(8px);
}


.about-modal__dialog {
  position: relative;

  z-index: 2;

  width:
    min(100%, 760px);

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius: 20px;

  background: #fff;

  box-shadow:
    0 32px 80px
    rgba(14,42,71,.26);
}


.about-modal__close {
  position: absolute;

  z-index: 3;

  top: 12px;
  right: 12px;

  width: 42px;
  height: 42px;

  border: 0;

  border-radius: 12px;

  background:
    rgba(14,42,71,.07);

  font-size: 27px;

  color:
    var(--ac-navy);

  cursor: pointer;
}


.about-modal__preview {
  min-height: 400px;

  padding: 22px;

  background:
    #EEF3F6;
}


.about-modal__placeholder {
  min-height: 356px;

  display: grid;

  place-items: center;

  border:
    1px dashed
    #C8D3DC;

  border-radius: 15px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 9px;

  letter-spacing: .08em;

  color: #94A4B0;
}


.about-modal__body {
  padding:
    22px 24px 25px;
}


.about-modal__body h3 {
  margin:
    0 0 7px;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 22px;
}


.about-modal__body p {
  margin: 0;

  font-family:
    "Inter",
    sans-serif;

  font-size: 13px;

  line-height: 1.65;

  color:
    var(--ac-text);
}


/* =========================================================
   REVEAL
========================================================= */

.about-reveal {
  opacity: 0;

  transform:
    translateY(25px);

  transition:
    opacity .75s ease,
    transform .75s
    cubic-bezier(.22,.7,.25,1);
}


.about-reveal.is-visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

  .about-company__main {
    gap: 34px;
  }


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

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .about-company {
    padding:
      58px
      16px
      72px;
  }


  .about-company__main {
    display: flex;

    flex-direction: column;
  }


  /*
    Photo first on mobile
  */

  .about-company__visual {
    order: -1;

    width: 100%;
  }


  .about-photo {
    min-height:
      min(105vw, 520px);
  }


  .about-company__content {
    max-width: none;

    width: 100%;
  }


  .about-company__content h2 {
    font-size:
      clamp(
        34px,
        10vw,
        46px
      );
  }


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


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


  .about-proof__item {
    min-height: 190px;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .about-photo {
    min-height: 440px;
  }


  .about-photo__badge {
    top: 14px;
    right: 14px;

    max-width:
      calc(100% - 28px);
  }


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


  .about-stat {
    min-height: 105px;
  }


  .about-proof__item--document {
    grid-template-columns:
      .9fr 1.1fr;
  }


  .about-proof__item--address {
    padding: 20px;
  }


  .about-modal__preview {
    min-height: 260px;
  }


  .about-modal__placeholder {
    min-height: 215px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .about-reveal {
    opacity: 1;

    transform: none;

    transition: none;
  }


  .about-photo,
  .about-proof__item,
  .about-modal {
    transition: none;
  }

}

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

.solar-faq {
  --faq-navy: #0E2A47;
  --faq-dark: #071B2F;
  --faq-amber: #F5A623;
  --faq-green: #1E8E5A;
  --faq-sky: #2E6FB0;
  --faq-text: #5A6B7B;
  --faq-border: #E3E8EE;

  position: relative;
  overflow: hidden;
  scroll-margin-top: 90px;

  padding:
    clamp(78px, 7vw, 112px)
    20px
    clamp(84px, 8vw, 120px);

  color: var(--faq-navy);

  background:
    radial-gradient(
      circle at 85% 8%,
      rgba(46,111,176,.07),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #FFFFFF,
      #F5F7F9
    );
}


.solar-faq::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(14,42,71,.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(14,42,71,.018) 1px,
      transparent 1px
    );

  background-size:
    56px 56px;
}


.solar-faq__container {
  position: relative;
  z-index: 2;

  width:
    min(100%, 900px);

  margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.solar-faq__header {
  max-width: 760px;

  margin:
    0 auto
    clamp(34px, 5vw, 48px);

  text-align: center;
}


.solar-faq__eyebrow {
  margin-bottom: 12px;

  font-family:
    "IBM Plex Mono",
    monospace;

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

  letter-spacing: .14em;

  color:
    var(--faq-sky);
}


.solar-faq__header h2 {
  margin: 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(36px, 4vw, 56px);

  font-weight: 800;

  line-height: 1.04;

  letter-spacing: -.04em;
}


.solar-faq__header p {
  max-width: 620px;

  margin:
    17px auto 0;

  font-family:
    "Inter",
    sans-serif;

  font-size: 14px;

  line-height: 1.7;

  color:
    var(--faq-text);
}


/* =========================================================
   ACCORDION
========================================================= */

.solar-faq__list {
  display: grid;

  gap: 11px;
}


.faq-item {
  position: relative;

  overflow: hidden;

  border:
    1px solid
    rgba(14,42,71,.075);

  border-radius: 16px;

  background:
    rgba(255,255,255,.88);

  box-shadow:
    0 10px 30px
    rgba(14,42,71,.04);

  backdrop-filter:
    blur(12px);

  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}


.faq-item:hover {
  transform:
    translateY(-2px);

  box-shadow:
    0 14px 34px
    rgba(14,42,71,.065);
}


.faq-item.is-open {
  border-color:
    rgba(245,166,35,.34);

  background:
    rgba(255,255,255,.98);

  box-shadow:
    0 16px 40px
    rgba(14,42,71,.07);
}


/* AMBER ACTIVE LINE */

.faq-item::before {
  content: "";

  position: absolute;

  z-index: 5;

  top: 14px;
  bottom: 14px;
  left: 0;

  width: 3px;

  border-radius:
    0 5px 5px 0;

  background:
    var(--faq-amber);

  transform:
    scaleY(0);

  transform-origin:
    center;

  transition:
    transform .28s ease;
}


.faq-item.is-open::before {
  transform:
    scaleY(1);
}


/* =========================================================
   QUESTION BUTTON
========================================================= */

.faq-item__button {
  width: 100%;

  min-height: 78px;

  padding:
    18px 20px;

  display: grid;

  grid-template-columns:
    36px
    minmax(0, 1fr)
    38px;

  align-items: center;

  gap: 13px;

  border: 0;

  background:
    transparent;

  text-align: left;

  cursor: pointer;
}


.faq-item__button:focus-visible {
  outline:
    2px solid
    var(--faq-amber);

  outline-offset:
    -3px;

  border-radius:
    14px;
}


/* NUMBER */

.faq-item__number {
  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 9px;

  color:
    #A0ADB7;

  transition:
    color .25s ease;
}


.faq-item.is-open
.faq-item__number {
  color:
    var(--faq-amber);
}


/* QUESTION */

.faq-item__question {
  max-width: 690px;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(15px, 1.5vw, 18px);

  font-weight: 700;

  line-height: 1.35;

  letter-spacing: -.017em;

  color:
    var(--faq-navy);
}


/* =========================================================
   +/- ICON
========================================================= */

.faq-item__icon {
  position: relative;

  width: 36px;
  height: 36px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background:
    rgba(14,42,71,.045);

  transition:
    background .25s ease,
    transform .3s ease;
}


.faq-item__icon i {
  position: absolute;

  width: 13px;
  height: 1.5px;

  border-radius:
    10px;

  background:
    var(--faq-navy);

  transition:
    transform .28s ease,
    background .28s ease;
}


.faq-item__icon i:nth-child(2) {
  transform:
    rotate(90deg);
}


.faq-item.is-open
.faq-item__icon {
  background:
    rgba(245,166,35,.12);
}


.faq-item.is-open
.faq-item__icon i {
  background:
    var(--faq-amber);
}


.faq-item.is-open
.faq-item__icon i:nth-child(2) {
  transform:
    rotate(0deg);
}


/* =========================================================
   ANSWER
========================================================= */

.faq-item__answer {
  height: 0;

  overflow: hidden;

  transition:
    height .38s
    cubic-bezier(.22,.7,.25,1);
}


.faq-item__answer-inner {
  padding:
    0 72px
    23px
    69px;
}


.faq-item__answer p {
  max-width: 690px;

  margin: 0;

  font-family:
    "Inter",
    sans-serif;

  font-size: 14px;

  line-height: 1.72;

  color:
    var(--faq-text);
}


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

.faq-contact {
  margin-top:
    clamp(28px, 5vw, 44px);

  padding:
    clamp(24px, 3vw, 32px);

  display: grid;

  grid-template-columns:
    58px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 20px;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 18px;

  color: #fff;

  background:
    radial-gradient(
      circle at 88% 20%,
      rgba(46,111,176,.26),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #09243E,
      #10395F
    );

  box-shadow:
    0 20px 50px
    rgba(14,42,71,.13);
}


/* ICON */

.faq-contact__icon {
  width: 58px;
  height: 58px;

  display: grid;

  place-items: center;

  border:
    1px solid
    rgba(245,166,35,.18);

  border-radius: 16px;

  background:
    rgba(245,166,35,.10);

  color:
    var(--faq-amber);
}


.faq-contact__icon svg {
  width: 27px;
  height: 27px;
}


/* TEXT */

.faq-contact__eyebrow {
  display: block;

  margin-bottom: 6px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 8px;

  letter-spacing: .12em;

  color:
    var(--faq-amber);
}


.faq-contact h3 {
  margin: 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(20px, 2vw, 27px);

  font-weight: 700;

  line-height: 1.14;

  letter-spacing: -.025em;
}


.faq-contact p {
  max-width: 480px;

  margin:
    7px 0 0;

  font-family:
    "Inter",
    sans-serif;

  font-size: 11px;

  line-height: 1.55;

  color:
    rgba(255,255,255,.55);
}





/* =========================================================
   SCROLL REVEAL
========================================================= */

.faq-reveal {
  opacity: 0;

  transform:
    translateY(24px);

  transition:
    opacity .72s ease,
    transform .72s
    cubic-bezier(.22,.7,.25,1);
}


.faq-reveal.is-visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 820px) {

  .faq-contact {
    grid-template-columns:
      52px
      1fr;
  }


  .faq-contact__messengers {
    grid-column:
      1 / -1;

    justify-content:
      flex-start;

    padding-left: 72px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

  .solar-faq {
    padding:
      58px
      16px
      72px;
  }


  .solar-faq__header {
    text-align: left;
  }


  .solar-faq__header p {
    margin-left: 0;
  }


  .solar-faq__header h2 {
    font-size:
      clamp(
        32px,
        9vw,
        43px
      );
  }


  .faq-item__button {
    min-height: 72px;

    padding:
      17px 15px;

    grid-template-columns:
      26px
      minmax(0, 1fr)
      34px;

    gap: 9px;
  }


  .faq-item__number {
    font-size: 8px;
  }


  .faq-item__question {
    font-size: 15px;
  }


  .faq-item__icon {
    width: 32px;
    height: 32px;
  }


  .faq-item__answer-inner {
    padding:
      0 49px
      20px
      50px;
  }


  .faq-item__answer p {
    font-size: 13px;
  }


  /* CTA */

  .faq-contact {
    grid-template-columns: 1fr;

    gap: 14px;
  }


  .faq-contact__icon {
    width: 48px;
    height: 48px;
  }


  .faq-contact__messengers {
    grid-column: auto;

    padding-left: 0;

    width: 100%;
  }


  .faq-messenger {
    flex: 1 1 auto;

    justify-content: center;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .faq-item__button {
    grid-template-columns:
      minmax(0, 1fr)
      32px;
  }


  .faq-item__number {
    display: none;
  }


  .faq-item__answer-inner {
    padding:
      0 47px
      19px
      15px;
  }


  .faq-contact__messengers {
    display: grid;

    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .faq-reveal {
    opacity: 1;

    transform: none;

    transition: none;
  }


  .faq-item,
  .faq-item__answer,
  .faq-item__icon,
  .faq-item__icon i,
  .faq-messenger {
    transition: none;
  }

}

.final-cta {
  --fcta-navy: #0E2A47;
  --fcta-navy-dark: #071B2F;
  --fcta-amber: #F5A623;
  --fcta-green: #1E8E5A;
  --fcta-sky: #2E6FB0;
  --fcta-text: #5A6B7B;
  --fcta-border: #E3E8EE;
  --fcta-white: #FFFFFF;

  position: relative;
  overflow: hidden;
  padding: clamp(80px, 8vw, 118px) 20px;
  scroll-margin-top: 90px;
  color: #fff;

  background:
    radial-gradient(circle at 15% 20%, rgba(245,166,35,.12), transparent 22%),
    radial-gradient(circle at 88% 18%, rgba(46,111,176,.20), transparent 28%),
    linear-gradient(135deg, #081F36 0%, #0E2A47 48%, #13395E 100%);
}

.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .35;
}

.final-cta::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -80px;
  top: -80px;
  border-radius: 50%;
  background: rgba(245,166,35,.10);
  filter: blur(80px);
  pointer-events: none;
}

.final-cta__container {
  position: relative;
  z-index: 2;
  width: min(100%, 1360px);
  margin: 0 auto;
}

/* LAYOUT */

.final-cta__layout {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(420px, .78fr);
  gap: clamp(28px, 5vw, 54px);
  align-items: center;
}

/* CONTENT */

.final-cta__content {
  max-width: 640px;
}

.final-cta__eyebrow {
  margin-bottom: 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
  color: var(--fcta-amber);
}

.final-cta__content h2 {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(38px, 4.2vw, 62px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.045em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.final-cta__lead {
  max-width: 620px;
  margin: 18px 0 0;
  font-family: "Inter", sans-serif;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.65;
  color: rgba(255,255,255,.78);
}

.final-cta__badges {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.final-cta__badge {
  min-height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(245,166,35,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* ALTERNATIVES */

.final-cta__alt {
  margin-top: 32px;
}

.final-cta__alt-title {
  display: block;
  margin-bottom: 12px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,.60);
}

.final-cta__messengers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.fcta-messenger {
  min-height: 46px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.86);
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(10px);
  transition:
    transform .24s ease,
    border-color .24s ease,
    background .24s ease,
    color .24s ease;
}

.fcta-messenger:hover {
  transform: translateY(-2px);
  border-color: rgba(245,166,35,.28);
  background: rgba(245,166,35,.10);
  color: #fff;
}

.fcta-messenger--call {
  border-color: rgba(245,166,35,.26);
}

.fcta-messenger__icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  color: var(--fcta-amber);
}

.fcta-messenger__icon svg {
  width: 15px;
  height: 15px;
}

/* FORM CARD */

.final-cta__form-card {
  padding: clamp(22px, 2.8vw, 30px);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
  backdrop-filter: blur(18px);
}

.final-cta__form-head {
  margin-bottom: 22px;
}

.final-cta__form-kicker {
  display: block;
  margin-bottom: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--fcta-amber);
}

.final-cta__form-head h3 {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(24px, 2.1vw, 32px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: #fff;
}

/* FORM */

.fcta-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.fcta-field {
  min-width: 0;
}

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

.fcta-field label {
  display: block;
  margin-bottom: 8px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.90);
}

.fcta-field label span {
  font-weight: 400;
  color: rgba(255,255,255,.50);
}

.fcta-field input,
.fcta-field select {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  outline: none;
  transition:
    border-color .24s ease,
    box-shadow .24s ease,
    background .24s ease;
}

.fcta-field input::placeholder {
  color: rgba(255,255,255,.42);
}

.fcta-field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.52) 50%),
    linear-gradient(135deg, rgba(255,255,255,.52) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.fcta-field select option {
  color: #111;
}

.fcta-field input:focus-visible,
.fcta-field select:focus-visible {
  border-color: rgba(245,166,35,.72);
  box-shadow: 0 0 0 4px rgba(245,166,35,.12);
  background: rgba(255,255,255,.11);
}

/* CONSENT */

.fcta-consent {
  margin-top: 18px;
}

.fcta-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.fcta-checkbox input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.fcta-checkbox__box {
  position: relative;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  margin-top: 1px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  transition:
    border-color .24s ease,
    background .24s ease,
    box-shadow .24s ease;
}

.fcta-checkbox__text {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,.82);
}

.fcta-checkbox input:checked + .fcta-checkbox__box {
  background: var(--fcta-amber);
  border-color: var(--fcta-amber);
  box-shadow: 0 8px 20px rgba(245,166,35,.22);
}

.fcta-checkbox input:checked + .fcta-checkbox__box::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 4px;
  width: 6px;
  height: 9px;
  border-right: 2px solid var(--fcta-navy);
  border-bottom: 2px solid var(--fcta-navy);
  transform: rotate(40deg);
}

/* ERRORS */

.fcta-field__error {
  display: block;
  min-height: 18px;
  margin-top: 6px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  line-height: 1.35;
  color: #FFD4D4;
}

.fcta-field.is-error input,
.fcta-field.is-error select,
.fcta-consent.is-error .fcta-checkbox__box {
  border-color: #FFB0B0 !important;
  box-shadow: 0 0 0 4px rgba(255,120,120,.12);
}

.fcta-form__actions {
  margin-top: 18px;
}

.fcta-submit {
  width: 100%;
  min-height: 58px;
  padding: 0 22px;
  border: 0;
  border-radius: 14px;
  background: var(--fcta-amber);
  color: var(--fcta-navy);
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow:
    0 16px 36px rgba(245,166,35,.26),
    0 0 0 0 rgba(245,166,35,.0);
  transition:
    transform .24s ease,
    box-shadow .24s ease,
    filter .24s ease;
}

.fcta-submit:hover {
  transform: translateY(-2px);
  box-shadow:
    0 20px 42px rgba(245,166,35,.34),
    0 0 24px rgba(245,166,35,.18);
  filter: brightness(1.02);
}

.fcta-submit:active {
  transform: translateY(0);
}

.fcta-submit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.fcta-submit.is-loading {
  pointer-events: none;
  opacity: .88;
}

.fcta-form__note {
  margin: 11px 0 0;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,.50);
}

/* STATUS */

.fcta-status {
  min-height: 22px;
  margin-top: 14px;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.45;
}

.fcta-status.is-success {
  color: #A7F0C6;
}

.fcta-status.is-error {
  color: #FFD1D1;
}

/* REVEAL */

.fcta-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .72s ease,
    transform .72s cubic-bezier(.22,.7,.25,1);
}

.fcta-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* RESPONSIVE */

@media (max-width: 1100px) {
  .final-cta__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .final-cta__content,
  .final-cta__form-wrap {
    min-width: 0;
    max-width: none;
  }
}

@media (max-width: 768px) {
  .final-cta {
    padding: 58px 16px 72px;
  }

  .final-cta__content h2 {
    font-size: clamp(28px, 7.6vw, 44px);
  }

  .fcta-form__grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 520px) {
  .final-cta__badges {
    flex-direction: column;
    align-items: flex-start;
  }

  .final-cta__messengers {
    grid-template-columns: 1fr;
  }

  .fcta-messenger {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fcta-reveal,
  .fcta-messenger,
  .fcta-submit,
  .fcta-field input,
  .fcta-field select,
  .fcta-checkbox__box {
    transition: none;
  }

  .fcta-reveal {
    opacity: 1;
    transform: none;
  }
}

.solar-footer {
  --sf-navy: #0E2A47;
  --sf-navy-dark: #081F36;
  --sf-amber: #F5A623;
  --sf-green: #1E8E5A;
  --sf-sky: #2E6FB0;
  --sf-white: #FFFFFF;
  --sf-text: rgba(255,255,255,.72);
  --sf-muted: rgba(255,255,255,.46);
  --sf-border: rgba(255,255,255,.10);

  position: relative;
  overflow: hidden;
  padding: 0 20px 96px;
  color: var(--sf-white);
  background:
    radial-gradient(circle at 85% 14%, rgba(46,111,176,.12), transparent 28%),
    linear-gradient(180deg, #0E2A47, #091D32 100%);
}

.solar-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 56px 56px;
}

.solar-footer__container {
  position: relative;
  z-index: 2;
  width: min(100%, 1360px);
  margin: 0 auto;
}

.solar-footer__top-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  margin-bottom: 34px;
}

.solar-footer__grid {
  display: grid;
  grid-template-columns: 1.15fr 1.2fr .8fr .85fr;
  gap: 22px;
}

.solar-footer__col {
  min-width: 0;
  padding-top: 8px;
}

.solar-footer__head {
  display: none;
}

/* LOGO */

.solar-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
}

.solar-footer__logo-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--sf-amber), #ffc14f);
  color: var(--sf-navy);
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(245,166,35,.22);
}

.solar-footer__logo-text strong {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.solar-footer__logo-text small {
  display: block;
  margin-top: 2px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.52);
}

.solar-footer__tagline {
  max-width: 280px;
  margin: 18px 0 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--sf-text);
}

/* SOCIALS */

.solar-footer__socials {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.solar-footer__icon-link {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sf-border);
  border-radius: 12px;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.04);
  transition:
    transform .22s ease,
    border-color .22s ease,
    color .22s ease,
    background .22s ease;
}

.solar-footer__icon-link:hover {
  transform: translateY(-2px);
  border-color: rgba(245,166,35,.28);
  color: var(--sf-amber);
  background: rgba(245,166,35,.08);
}

.solar-footer__icon-link svg {
  width: 18px;
  height: 18px;
}

/* PILL LINKS */

.solar-footer__messengers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.solar-footer__pill {
  min-height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--sf-border);
  border-radius: 12px;
  color: rgba(255,255,255,.86);
  text-decoration: none;
  background: rgba(255,255,255,.04);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  transition:
    transform .22s ease,
    border-color .22s ease,
    color .22s ease,
    background .22s ease;
}

.solar-footer__pill:hover {
  transform: translateY(-2px);
  border-color: rgba(46,111,176,.34);
  color: #fff;
  background: rgba(46,111,176,.10);
}

.solar-footer__pill-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: var(--sf-amber);
}

.solar-footer__pill-icon svg {
  width: 13px;
  height: 13px;
}

/* BLOCKS */

.solar-footer__block + .solar-footer__block {
  margin-top: 18px;
}

.solar-footer__label {
  display: block;
  margin-bottom: 7px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--sf-amber);
}

.solar-footer__text,
.solar-footer__link {
  display: block;
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--sf-text);
  text-decoration: none;
  transition: color .2s ease;
}

.solar-footer__link:hover {
  color: #fff;
}

.solar-footer__mono {
  font-family: "IBM Plex Mono", monospace;
  color: #fff;
}

/* MAP & ROUTE */

.solar-footer__route-btn {
  margin-top: 18px;
  min-height: 42px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--sf-amber);
  color: var(--sf-navy);
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 12px 24px rgba(245,166,35,.20);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    filter .22s ease;
}

.solar-footer__route-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(245,166,35,.28);
  filter: brightness(1.03);
}

.solar-footer__map {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--sf-border);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
}

.solar-footer__map-placeholder {
  min-height: 140px;
  display: grid;
  place-items: center;
  margin: 12px;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  color: rgba(255,255,255,.42);
}

/* NAV */

.solar-footer__nav {
  display: grid;
  gap: 10px;
}

.solar-footer__nav a,
.solar-footer__legal a {
  width: fit-content;
  color: var(--sf-text);
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  transition:
    color .2s ease,
    transform .2s ease;
}

.solar-footer__nav a:hover,
.solar-footer__legal a:hover {
  color: var(--sf-sky);
  transform: translateX(2px);
}

/* BOTTOM */

.solar-footer__bottom {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--sf-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.solar-footer__copyright {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  color: var(--sf-muted);
}

.solar-footer__bottom-messengers {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.solar-footer__bottom-messengers a {
  color: var(--sf-text);
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  transition: color .2s ease;
}

.solar-footer__bottom-messengers a:hover {
  color: var(--sf-amber);
}

/* FLOATING CONTACT */

.floating-contact {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 200;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 10px;
}

.floating-contact__toggle {
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: var(--sf-amber);
  color: var(--sf-navy);
  box-shadow: 0 18px 34px rgba(245,166,35,.30);
  cursor: pointer;
  transition:
    transform .24s ease,
    box-shadow .24s ease;
}

.floating-contact__toggle:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 22px 42px rgba(245,166,35,.38);
}

.floating-contact__toggle svg {
  width: 24px;
  height: 24px;
}

.floating-contact__menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity .22s ease,
    visibility .22s ease,
    transform .22s ease;
}

.floating-contact.is-open .floating-contact__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.floating-contact__item {
  min-height: 44px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  background: rgba(14,42,71,.94);
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 24px rgba(7,27,47,.16);
  backdrop-filter: blur(10px);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
}

.floating-contact__item svg {
  width: 16px;
  height: 16px;
  color: var(--sf-amber);
}

/* MOBILE STICKY CTA */

.mobile-sticky-cta {
  display: none;
}

/* TABLET */

@media (max-width: 1100px) {
  .solar-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* MOBILE */

@media (max-width: 768px) {
  .solar-footer {
    padding: 0 16px 106px;
  }

  .solar-footer__grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .solar-footer__col {
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    background: rgba(255,255,255,.03);
    overflow: hidden;
    padding-top: 0;
  }

  .solar-footer__head {
    width: 100%;
    min-height: 58px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    background: transparent;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }

  .solar-footer__head i {
    position: relative;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
  }

  .solar-footer__head i::before,
  .solar-footer__head i::after {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 16px;
    height: 1.5px;
    border-radius: 999px;
    background: rgba(255,255,255,.82);
    transition: transform .22s ease;
  }

  .solar-footer__head i::after {
    transform: rotate(90deg);
  }

  .sf-accordion.is-open .solar-footer__head i::after {
    transform: rotate(0deg);
  }

  .solar-footer__body {
    height: 0;
    overflow: hidden;
    transition: height .32s cubic-bezier(.22,.7,.25,1);
    padding: 0 16px;
  }

  .sf-accordion.is-open .solar-footer__body {
    padding-bottom: 16px;
  }

  .solar-footer__bottom {
    margin-top: 22px;
    padding-top: 16px;
    flex-direction: column;
    align-items: flex-start;
  }

  .floating-contact {
    right: 14px;
    bottom: 78px;
  }

  .mobile-sticky-cta {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 190;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--sf-amber);
    color: var(--sf-navy);
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 18px 34px rgba(245,166,35,.28);
  }
}

@media (max-width: 420px) {
  .solar-footer__messengers {
    display: grid;
    grid-template-columns: 1fr;
  }

  .floating-contact__item span {
    display: none;
  }

  .floating-contact__item {
    width: 44px;
    justify-content: center;
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .solar-footer__icon-link,
  .solar-footer__pill,
  .solar-footer__route-btn,
  .solar-footer__nav a,
  .solar-footer__legal a,
  .floating-contact__toggle,
  .floating-contact__menu,
  .solar-footer__body,
  .solar-footer__head i::before,
  .solar-footer__head i::after {
    transition: none;
  }
}

/* =========================================================
   QUICK CONTACT / FLOATING PHONE
========================================================= */

.quick-contact {
  --qc-navy: #0E2A47;
  --qc-dark: #071B2F;
  --qc-amber: #F5A623;
  --qc-sky: #2E6FB0;
  --qc-green: #1E8E5A;

  position: fixed;

  z-index: 950;

  right: 22px;
  bottom: 24px;

  font-family:
    "Inter",
    sans-serif;
}


/* =========================================================
   RIGHT BUTTON COLUMN
========================================================= */

.quick-contact__buttons {
  position: relative;

  z-index: 3;

  display: flex;
  flex-direction: column;

  align-items: center;

  gap: 11px;
}


/* =========================================================
   MAIN PHONE BUTTON
========================================================= */

.quick-contact__toggle {
  position: relative;

  width: 62px;
  height: 62px;

  padding: 0;

  display: grid;

  place-items: center;

  border:
    5px solid
    rgba(46,111,176,.17);

  border-radius: 50%;

  background:
    var(--qc-navy);

  color: #fff;

  cursor: pointer;

  box-shadow:
    0 14px 30px
    rgba(7,27,47,.28),
    0 0 0 1px
    rgba(255,255,255,.06)
    inset;

  transition:
    transform .25s
    cubic-bezier(.2,.7,.2,1),
    background .25s ease,
    box-shadow .25s ease;
}


.quick-contact__toggle::before {
  content: "";

  position: absolute;

  inset: -7px;

  z-index: -1;

  border-radius: 50%;

  border:
    1px solid
    rgba(46,111,176,.16);

  opacity: 0;

  transform:
    scale(.9);

  transition:
    opacity .25s ease,
    transform .25s ease;
}


.quick-contact__toggle:hover {
  transform:
    translateY(-3px)
    scale(1.025);

  background:
    #123B63;

  box-shadow:
    0 18px 38px
    rgba(7,27,47,.34),
    0 0 0 1px
    rgba(255,255,255,.08)
    inset;
}


.quick-contact__toggle:hover::before {
  opacity: 1;

  transform:
    scale(1);
}


.quick-contact__toggle svg {
  position: absolute;

  width: 25px;
  height: 25px;

  transition:
    opacity .22s ease,
    transform .28s
    cubic-bezier(.2,.7,.2,1);
}


.quick-contact__phone-icon {
  opacity: 1;

  transform:
    rotate(0deg)
    scale(1);
}


.quick-contact__close-icon {
  opacity: 0;

  transform:
    rotate(-90deg)
    scale(.65);
}


/* OPEN */

.quick-contact.is-open
.quick-contact__toggle {
  background:
    var(--qc-amber);

  color:
    var(--qc-navy);
}


.quick-contact.is-open
.quick-contact__phone-icon {
  opacity: 0;

  transform:
    rotate(90deg)
    scale(.65);
}


.quick-contact.is-open
.quick-contact__close-icon {
  opacity: 1;

  transform:
    rotate(0deg)
    scale(1);
}


/* =========================================================
   BACK TO TOP
========================================================= */

.quick-contact__top {
  width: 42px;
  height: 42px;

  padding: 0;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(14,42,71,.16);

  border-radius: 50%;

  background:
    rgba(255,255,255,.92);

  color:
    var(--qc-navy);

  cursor: pointer;

  box-shadow:
    0 8px 22px
    rgba(7,27,47,.12);

  backdrop-filter:
    blur(10px);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform:
    translateY(12px)
    scale(.82);

  transition:
    opacity .25s ease,
    visibility .25s ease,
    transform .3s
    cubic-bezier(.2,.7,.2,1),
    border-color .2s ease,
    color .2s ease;
}


.quick-contact__top.is-visible {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform:
    translateY(0)
    scale(1);
}


.quick-contact__top:hover {
  border-color:
    rgba(245,166,35,.55);

  color:
    var(--qc-amber);

  transform:
    translateY(-2px);
}


.quick-contact__top svg {
  width: 21px;
  height: 21px;
}


/* =========================================================
   CONTACT PANEL
========================================================= */

.quick-contact__panel {
  position: absolute;

  z-index: 2;

  right: 76px;
  bottom: 0;

  width: 285px;

  padding: 12px;

  border:
    1px solid
    rgba(14,42,71,.08);

  border-radius: 17px;

  background:
    rgba(255,255,255,.97);

  box-shadow:
    0 22px 55px
    rgba(7,27,47,.20);

  backdrop-filter:
    blur(18px);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform:
    translateX(15px)
    scale(.96);

  transform-origin:
    right bottom;

  transition:
    opacity .24s ease,
    visibility .24s ease,
    transform .3s
    cubic-bezier(.2,.7,.2,1);
}


.quick-contact.is-open
.quick-contact__panel {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform:
    translateX(0)
    scale(1);
}


/* =========================================================
   PANEL HEADER
========================================================= */

.quick-contact__panel-head {
  padding:
    7px 9px 12px;

  border-bottom:
    1px solid
    #E9EDF1;
}


.quick-contact__panel-head > span {
  display: block;

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 14px;
  font-weight: 700;

  color:
    var(--qc-navy);
}


.quick-contact__panel-head small {
  display: block;

  margin-top: 4px;

  font-size: 10px;

  color:
    #84929D;
}


/* =========================================================
   CONTACT ITEM
========================================================= */

.quick-contact__item {
  position: relative;

  min-height: 54px;

  padding:
    7px 8px;

  display: grid;

  grid-template-columns:
    38px
    minmax(0, 1fr)
    18px;

  align-items: center;

  gap: 11px;

  border-radius: 11px;

  color:
    #263847;

  text-decoration: none;

  font-size: 13px;
  font-weight: 500;

  transition:
    background .22s ease,
    transform .22s ease,
    color .22s ease;
}


.quick-contact__item:hover {
  background:
    #F4F7F9;

  color:
    var(--qc-navy);

  transform:
    translateX(2px);
}


/* =========================================================
   ICON
========================================================= */

.quick-contact__item-icon {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #fff;
}


.quick-contact__item-icon svg {
  width: 19px;
  height: 19px;
}


.quick-contact__item--telegram
.quick-contact__item-icon {
  background:
    #2EA8DF;
}


.quick-contact__item--viber
.quick-contact__item-icon {
  background:
    #7C55A6;
}


.quick-contact__item--whatsapp
.quick-contact__item-icon {
  background:
    #25B965;
}


.quick-contact__item--phone
.quick-contact__item-icon {
  background:
    #3EBA91;
}


.quick-contact__arrow {
  width: 17px;
  height: 17px;

  color:
    #A0ACB5;

  transition:
    transform .2s ease,
    color .2s ease;
}


.quick-contact__item:hover
.quick-contact__arrow {
  color:
    var(--qc-amber);

  transform:
    translateX(2px);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .quick-contact {
    right: 14px;

    /*
      Выше липкой кнопки
      "Розрахувати"
    */
    bottom:
      calc(
        82px +
        env(safe-area-inset-bottom)
      );
  }


  .quick-contact__toggle {
    width: 56px;
    height: 56px;

    border-width: 4px;
  }


  .quick-contact__top {
    width: 38px;
    height: 38px;
  }


  .quick-contact__panel {
    right: 66px;

    width:
      min(
        270px,
        calc(100vw - 96px)
      );
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .quick-contact {
    right: 12px;
  }


  .quick-contact__panel {
    right: 64px;

    width:
      calc(100vw - 88px);

    padding: 9px;
  }


  .quick-contact__item {
    min-height: 50px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .quick-contact__toggle,
  .quick-contact__toggle svg,
  .quick-contact__top,
  .quick-contact__panel,
  .quick-contact__item,
  .quick-contact__arrow {
    transition: none;
  }

}

/* =========================================================
   UNIVERSAL MEDIA MODAL
========================================================= */

.media-modal {
  --mm-navy: #0E2A47;
  --mm-dark: #071B2F;
  --mm-amber: #F5A623;

  position: fixed;
  inset: 0;

  z-index: 99999;

  padding: 24px;

  display: grid;
  place-items: center;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .28s ease,
    visibility .28s ease;
}


.media-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


/* BACKDROP */

.media-modal__backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(4, 18, 31, .78);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}


/* DIALOG */

.media-modal__dialog {
  position: relative;
  z-index: 2;

  width: min(1100px, 100%);

  max-height:
    calc(100vh - 48px);

  display: grid;

  grid-template-rows:
    minmax(0, 1fr)
    auto;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius: 22px;

  background: #fff;

  box-shadow:
    0 40px 110px
    rgba(0,0,0,.36);

  transform:
    translateY(18px)
    scale(.975);

  transition:
    transform .32s
    cubic-bezier(.22,.7,.25,1);
}


.media-modal.is-open
.media-modal__dialog {
  transform:
    translateY(0)
    scale(1);
}


/* =========================================================
   CLOSE
========================================================= */

.media-modal__close {
  position: absolute;

  z-index: 20;

  top: 15px;
  right: 15px;

  width: 46px;
  height: 46px;

  padding: 0;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(255,255,255,.16);

  border-radius: 50%;

  background:
    rgba(7,27,47,.76);

  color: #fff;

  backdrop-filter:
    blur(12px);

  cursor: pointer;

  box-shadow:
    0 10px 28px
    rgba(0,0,0,.16);

  transition:
    background .22s ease,
    color .22s ease,
    transform .22s ease;
}


.media-modal__close:hover {
  transform:
    rotate(90deg);

  background:
    var(--mm-amber);

  color:
    var(--mm-navy);
}


.media-modal__close svg {
  width: 21px;
  height: 21px;
}


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

.media-modal__visual {
  position: relative;

  min-height: 300px;

  display: grid;
  place-items: center;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 25%,
      #1A456D,
      transparent 52%
    ),
    linear-gradient(
      145deg,
      #071B2F,
      #0E2A47
    );
}


.media-modal__visual::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size:
    42px 42px;
}


.media-modal__image-wrap {
  position: relative;

  width: 100%;
  height: 100%;

  min-height: 300px;

  display: flex;

  align-items: center;
  justify-content: center;

  padding:
    26px 74px;
}


.media-modal__image {
  position: relative;
  z-index: 2;

  display: block;

  width: auto;
  height: auto;

  max-width: 100%;
  max-height: 70vh;

  object-fit: contain;

  border-radius: 6px;

  box-shadow:
    0 25px 60px
    rgba(0,0,0,.24);

  opacity: 1;

  transition:
    opacity .18s ease,
    transform .25s ease;
}


.media-modal__image.is-changing {
  opacity: 0;

  transform:
    scale(.985);
}


/* =========================================================
   EMPTY
========================================================= */

.media-modal__empty {
  position: relative;
  z-index: 2;

  min-height: 380px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 15px;

  color:
    rgba(255,255,255,.50);
}


.media-modal__empty[hidden] {
  display: none;
}


.media-modal__empty svg {
  width: 45px;
  height: 45px;
}


.media-modal__empty span {
  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 10px;

  letter-spacing: .05em;
}


/* =========================================================
   NAVIGATION
========================================================= */

.media-modal__nav {
  position: absolute;

  z-index: 10;

  top: 50%;

  width: 46px;
  height: 46px;

  padding: 0;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(255,255,255,.14);

  border-radius: 50%;

  background:
    rgba(7,27,47,.62);

  color: #fff;

  backdrop-filter:
    blur(10px);

  cursor: pointer;

  transform:
    translateY(-50%);

  transition:
    background .2s ease,
    transform .2s ease,
    color .2s ease;
}


.media-modal__nav:hover {
  background:
    var(--mm-amber);

  color:
    var(--mm-navy);
}


.media-modal__nav--prev {
  left: 17px;
}


.media-modal__nav--next {
  right: 17px;
}


.media-modal__nav svg {
  width: 21px;
  height: 21px;
}


.media-modal__nav[hidden] {
  display: none;
}


/* COUNTER */

.media-modal__counter {
  position: absolute;

  z-index: 10;

  left: 18px;
  bottom: 16px;

  min-height: 30px;

  padding:
    0 11px;

  display: flex;
  align-items: center;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius: 999px;

  background:
    rgba(7,27,47,.58);

  backdrop-filter:
    blur(10px);

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 9px;

  color:
    rgba(255,255,255,.76);
}


.media-modal__counter[hidden] {
  display: none;
}


/* =========================================================
   CONTENT
========================================================= */

.media-modal__content {
  padding:
    22px 26px 25px;

  background: #fff;

  border-top:
    1px solid
    #E8EDF1;
}


.media-modal__eyebrow {
  display: block;

  margin-bottom: 7px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size: 8px;

  letter-spacing: .11em;

  color:
    #2E6FB0;
}


.media-modal__content h3 {
  margin: 0;

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(20px, 2vw, 27px);

  font-weight: 700;

  line-height: 1.15;

  letter-spacing: -.025em;

  color:
    #0E2A47;
}


.media-modal__content p {
  max-width: 750px;

  margin:
    8px 0 0;

  font-family:
    "Inter",
    sans-serif;

  font-size: 13px;

  line-height: 1.65;

  color:
    #5A6B7B;
}


/* =========================================================
   CERTIFICATE THUMBS
========================================================= */

.ws-cert__placeholder {
  position: relative;

  overflow: hidden;
}


.ws-cert__placeholder img {
  width: 100%;
  height: 100%;

  aspect-ratio:
    4 / 5;

  object-fit: cover;

  border-radius: 10px;

  transition:
    transform .4s
    cubic-bezier(.2,.7,.2,1);
}


.ws-cert:hover
.ws-cert__placeholder img {
  transform:
    scale(1.035);
}


/* =========================================================
   ZOOM ICON
========================================================= */

.media-zoom-icon,
.media-photo-overlay {
  position: absolute;

  z-index: 5;

  right: 12px;
  bottom: 12px;

  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(255,255,255,.20);

  border-radius: 50%;

  background:
    rgba(7,27,47,.72);

  backdrop-filter:
    blur(10px);

  color: #fff;

  opacity: 0;

  transform:
    translateY(6px);

  transition:
    opacity .25s ease,
    transform .25s ease,
    background .25s ease;
}


.media-zoom-icon svg,
.media-photo-overlay svg {
  width: 17px;
  height: 17px;
}


.ws-cert:hover
.media-zoom-icon,
.about-proof__item--photo:hover
.media-photo-overlay {
  opacity: 1;

  transform:
    translateY(0);
}


/* =========================================================
   OFFICE / WAREHOUSE PREVIEW
========================================================= */

.about-proof__photo-placeholder {
  overflow: hidden;
}


.about-proof__photo-placeholder img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  border-radius: inherit;

  transition:
    transform .45s
    cubic-bezier(.2,.7,.2,1);
}


.about-proof__item--photo:hover
.about-proof__photo-placeholder img {
  transform:
    scale(1.045);
}


.about-proof__photo-placeholder::after {
  content: "";

  position: absolute;

  z-index: 2;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(7,27,47,.48)
    );
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

  .media-modal {
    padding: 12px;
  }


  .media-modal__dialog {
    max-height:
      calc(100vh - 24px);

    border-radius: 17px;
  }


  .media-modal__image-wrap {
    padding:
      58px 16px 48px;

    min-height: 250px;
  }


  .media-modal__image {
    max-height:
      65vh;
  }


  .media-modal__close {
    width: 42px;
    height: 42px;

    top: 10px;
    right: 10px;
  }


  .media-modal__nav {
    top: auto;
    bottom: 11px;

    width: 40px;
    height: 40px;

    transform: none;
  }


  .media-modal__nav--prev {
    left:
      calc(50% - 47px);
  }


  .media-modal__nav--next {
    right:
      calc(50% - 47px);
  }


  .media-modal__counter {
    left: 12px;
    bottom: 11px;
  }


  .media-modal__content {
    padding:
      18px;
  }


  .media-zoom-icon,
  .media-photo-overlay {
    opacity: 1;

    transform: none;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .media-modal,
  .media-modal__dialog,
  .media-modal__image,
  .media-modal__close,
  .media-modal__nav,
  .media-zoom-icon,
  .media-photo-overlay {
    transition: none;
  }

}

    /* =========================
       BURGER + MOBILE MENU
    ========================== */

    .nav-burger {
      display: none;
      flex-shrink: 0;
      width: 46px;
      height: 46px;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 12px;
      background: rgba(255, 255, 255, .06);
      cursor: pointer;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 5px;
      transition: background .2s ease, border-color .2s ease;
    }

    .nav-burger:hover {
      background: rgba(255, 255, 255, .12);
    }

    .nav-burger span {
      display: block;
      width: 20px;
      height: 2px;
      border-radius: 2px;
      background: var(--white);
      transition: transform .28s ease, opacity .2s ease;
    }

    body.menu-open .nav-burger span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    body.menu-open .nav-burger span:nth-child(2) {
      opacity: 0;
    }

    body.menu-open .nav-burger span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    .mobile-menu {
      position: fixed;
      inset: 0;
      z-index: 2223;
      visibility: hidden;
      pointer-events: none;
    }

    .mobile-menu.is-open {
      visibility: visible;
      pointer-events: auto;
    }

    .mobile-menu__overlay {
      position: absolute;
      inset: 0;
      background: rgba(7, 27, 47, .55);
      opacity: 0;
      transition: opacity .3s ease;
      -webkit-backdrop-filter: blur(2px);
      backdrop-filter: blur(2px);
    }

    .mobile-menu.is-open .mobile-menu__overlay {
      opacity: 1;
    }

    .mobile-menu__panel {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: min(86vw, 360px);
      padding: 22px 22px calc(22px + env(safe-area-inset-bottom));
      display: flex;
      flex-direction: column;
      gap: 22px;
      background: var(--navy);
      border-left: 1px solid rgba(255, 255, 255, .1);
      box-shadow: -24px 0 60px rgba(0, 0, 0, .4);
      transform: translateX(100%);
      transition: transform .34s cubic-bezier(.22, .7, .25, 1);
      overflow-y: auto;
    }

    .mobile-menu.is-open .mobile-menu__panel {
      transform: translateX(0);
    }

    .mobile-menu__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .mobile-menu__title {
      font-family: var(--font-heading);
      font-weight: 700;
      font-size: 18px;
      letter-spacing: .5px;
    }

    .mobile-menu__close {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 10px;
      background: rgba(255, 255, 255, .06);
      color: var(--white);
      cursor: pointer;
    }

    .mobile-menu__close svg {
      width: 22px;
      height: 22px;
    }

    .mobile-menu__links {
      display: flex;
      flex-direction: column;
    }

    .mobile-menu__links a {
      padding: 15px 6px;
      font-size: 17px;
      font-weight: 600;
      color: var(--white);
      border-bottom: 1px solid rgba(255, 255, 255, .08);
      transition: color .2s ease, padding-left .2s ease;
    }

    .mobile-menu__links a:hover {
      color: var(--amber);
      padding-left: 12px;
    }

    .mobile-menu__footer {
      margin-top: auto;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .mobile-menu__lang {
      display: inline-flex;
      align-self: flex-start;
      gap: 4px;
      padding: 4px;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 12px;
    }

    .mobile-menu__lang .lang-btn {
      min-width: 46px;
      padding: 8px 12px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--white);
      font-weight: 600;
      cursor: pointer;
    }

    .mobile-menu__lang .lang-btn.is-active {
      background: var(--amber);
      color: var(--navy-dark);
    }

    .mobile-menu__phone {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .mobile-menu__phone strong {
      font-size: 20px;
      font-family: var(--font-mono);
    }

    .mobile-menu__phone span {
      font-size: 13px;
      color: var(--muted);
    }

    .mobile-menu__cta {
      justify-content: center;
      text-align: center;
    }

    @media (max-width: 1180px) {
      .nav-burger {
        display: inline-flex;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .mobile-menu__overlay,
      .mobile-menu__panel,
      .nav-burger span {
        transition: none;
      }
    }

    /* =========================
       TURNSTILE + FORM STATUS
    ========================== */

    .ses-turnstile {
      min-height: 65px;
    }

    .form-field--turnstile {
      grid-column: 1 / -1;
    }

    .scalc-form .ses-turnstile {
      margin: 4px 0 2px;
    }

    .fcta-form .ses-turnstile {
      margin-top: 4px;
    }

    .form-status {
      margin-top: 14px;
      font-size: 14px;
      line-height: 1.45;
      min-height: 1.2em;
    }

    .form-status.is-success {
      color: #78D7AA;
    }

    .form-status.is-error {
      color: #FF8B7A;
    }

    /* =========================
       NEW PROJECT CARDS (4 projects) — light theme, matches .solar-works
    ========================== */

    .projects-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 28px;
      width: min(100%, var(--container));
      margin: 0 auto;
      padding: 0 20px;
    }

    .project-card {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid rgba(14, 42, 71, 0.07);
      border-radius: 18px;
      background: #fff;
      box-shadow: 0 12px 34px rgba(14, 42, 71, 0.055);
      transition: transform 0.34s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.34s ease;
      min-width: 0;
    }

    .project-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 22px 50px rgba(14, 42, 71, 0.11);
    }

    .project-card__featured-image {
      position: relative;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      background: linear-gradient(145deg, #DDE6EC, #BDCCD7);
    }

    .project-card__featured-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
    }

    .project-card:hover .project-card__featured-image img {
      transform: scale(1.05);
    }

    .project-card__head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      padding: 24px 24px 0;
      min-width: 0;
    }

    .project-card__head h3 {
      margin: 0;
      font-family: var(--font-heading);
      font-size: 19px;
      font-weight: 700;
      line-height: 1.3;
      color: #0E2A47;
      flex: 1;
      min-width: 0;
    }

    .project-card__power {
      display: flex;
      align-items: baseline;
      gap: 5px;
      flex-shrink: 0;
      padding: 6px 12px;
      border-radius: 10px;
      background: rgba(245, 166, 35, 0.12);
    }

    .project-card__power strong {
      font-size: 24px;
      font-weight: 800;
      line-height: 1;
      color: #E08600;
    }

    .project-card__power span {
      font-size: 13px;
      font-weight: 600;
      color: #E08600;
    }

    .project-card__specs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px 20px;
      margin: 22px 24px;
      padding: 22px 0;
      border-top: 1px solid #E3E8EE;
      border-bottom: 1px solid #E3E8EE;
    }

    .project-card__spec {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .project-card__spec strong {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: #93A2B2;
    }

    .project-card__spec span {
      font-size: 14.5px;
      font-weight: 500;
      color: #223A54;
      line-height: 1.35;
    }

    .project-card__cost {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 0 24px;
    }

    .project-card__cost > span:first-child {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: #93A2B2;
    }

    .project-card__cost strong {
      font-size: 24px;
      font-weight: 800;
      color: #1E8E5A;
      line-height: 1.1;
    }

    .project-card__note {
      font-size: 13px;
      color: #6E7F90;
    }

    .project-card__media {
      display: flex;
      gap: 12px;
      margin-top: auto;
      padding: 22px 24px 24px;
    }

    .project-card__media[hidden] {
      display: none !important;
    }

    .project-card__gallery-btn[hidden] {
      display: none !important;
    }

    .project-card__gallery-btn {
      flex: 1 1 0;
      padding: 12px 14px;
      border: 1.5px solid #E3E8EE;
      border-radius: 12px;
      background: #F7F9FB;
      color: #0E2A47;
      font-family: var(--font-body);
      font-size: 13.5px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .project-card__gallery-btn:hover {
      border-color: var(--amber);
      background: var(--amber);
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(245, 166, 35, 0.28);
    }

    /* =========================
       GALLERY MODAL (photo / video)
    ========================== */

    .gallery-modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .gallery-modal[hidden] {
      display: none !important;
    }

    .gallery-modal__overlay {
      position: absolute;
      inset: 0;
      background: rgba(7, 27, 47, 0.92);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .gallery-modal__content {
      position: relative;
      z-index: 1;
      width: min(100%, 920px);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    .gallery-modal__close {
      position: absolute;
      top: -6px;
      right: -6px;
      width: 46px;
      height: 46px;
      border: none;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.14);
      color: #fff;
      font-size: 26px;
      line-height: 1;
      cursor: pointer;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .gallery-modal__close:hover {
      background: var(--amber);
      transform: rotate(90deg);
    }

    .gallery-modal__image-container,
    .gallery-modal__video-container {
      width: 100%;
      border-radius: 16px;
      overflow: hidden;
      background: #0A1B2E;
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    }

    .gallery-modal__image,
    .gallery-modal__video {
      display: block;
      width: 100%;
      height: auto;
      max-height: 68vh;
      object-fit: contain;
      background: #0A1B2E;
    }

    .gallery-modal__counter {
      font-size: 15px;
      font-weight: 600;
      color: #fff;
      font-family: var(--font-mono);
      letter-spacing: 1px;
    }

    .gallery-modal__counter .gallery-modal__current {
      color: var(--amber);
    }

    .gallery-modal__controls {
      display: flex;
      gap: 16px;
    }

    .gallery-modal__prev,
    .gallery-modal__next {
      width: 54px;
      height: 54px;
      border: 1.5px solid rgba(245, 166, 35, 0.6);
      border-radius: 50%;
      background: rgba(245, 166, 35, 0.08);
      color: var(--amber);
      font-size: 22px;
      cursor: pointer;
      transition: all 0.25s ease;
    }

    .gallery-modal__prev:hover,
    .gallery-modal__next:hover {
      background: var(--amber);
      color: #0E2A47;
      transform: scale(1.08);
    }

    @media (max-width: 768px) {
      .projects-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 480px) {
      .project-card__head {
        flex-direction: row;
        padding: 18px 18px 0;
      }

      .project-card__head h3 {
        font-size: 17px;
      }

      .project-card__specs {
        grid-template-columns: 1fr 1fr;
        margin: 18px;
        padding: 18px 0;
      }

      .project-card__cost {
        padding: 0 18px;
      }

      .project-card__cost strong {
        font-size: 21px;
      }

      .project-card__media {
        padding: 18px;
        flex-direction: column;
      }

      .gallery-modal {
        padding: 16px;
      }

      .gallery-modal__close {
        top: -50px;
        right: 50%;
        transform: translateX(50%);
      }

      .gallery-modal__prev,
      .gallery-modal__next {
        width: 48px;
        height: 48px;
      }
    }

/* =====================================================================
   PROMIN ENERGY — блок ДБЖ (UPS-конфігуратор). Dark theme.
   ===================================================================== */
.pe-section{padding:clamp(48px,7vw,96px) 20px;background:#071B2F}
.pe-section .pe-ups{width:min(100%,1240px);margin:0 auto}

.pe-ups *{box-sizing:border-box}
.pe-ups{
  --navy:#0B2340;
  --navy-2:#0E2A47;
  --panel:#102D50;
  --card:#143257;
  --card-2:#183A63;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --ink:#EAF1FB;
  --muted:#9FB4D2;
  --muted-2:#7C93B5;
  --accent:#F7B500;
  --accent-2:#FFD34E;
  --energy:#3FD3FF;
  --good:#33D69F;
  --warn:#F7B500;
  --crit:#FF6B6B;
  --r:18px;
  --r-sm:12px;
  --shadow:0 24px 60px -24px rgba(0,0,0,.65);
  --font:'Manrope',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Unbounded','Manrope',sans-serif;

  position:relative;
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(120% 90% at 12% 0%, #16386340 0%, transparent 55%),
    radial-gradient(120% 100% at 100% 10%, #0e6a8a2e 0%, transparent 50%),
    linear-gradient(180deg,#0B2340 0%,#0A1F3B 100%);
  border-radius:26px;
  padding:clamp(20px,4vw,48px);
  overflow:hidden;
  line-height:1.5;
  isolation:isolate;
  -webkit-font-smoothing:antialiased;
}
.pe-ups::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 0%,transparent 78%);
          mask-image:radial-gradient(120% 80% at 50% 0%,#000 0%,transparent 78%);
}
.pe-flow{position:absolute;inset:0;z-index:1;pointer-events:none}
.pe-ups > .pe-inner{position:relative;z-index:2}

.pe-bridge{display:flex;align-items:center;gap:16px;margin:0 0 28px}
.pe-bridge::before,.pe-bridge::after{content:"";height:1px;flex:1;
  background:linear-gradient(90deg,transparent,rgba(247,181,0,.45),transparent)}
.pe-bridge-txt{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  font-family:var(--display);font-weight:700;letter-spacing:.005em;
  font-size:clamp(14px,2.1vw,20px);color:var(--accent-2);text-align:center}
.pe-bridge-txt svg{width:1.05em;height:1.05em;fill:var(--accent);flex:none;
  filter:drop-shadow(0 0 6px rgba(247,181,0,.55))}
@media (max-width:560px){
  .pe-bridge{gap:10px}
  .pe-bridge-txt{white-space:normal}
}

.pe-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-2);
  padding:7px 14px;border:1px solid var(--line-2);border-radius:999px;
  background:rgba(247,181,0,.06);
}
.pe-eyebrow .pe-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px rgba(247,181,0,.18);animation:pePulse 2.4s ease-in-out infinite}
.pe-h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(24px,3.6vw,40px);line-height:1.08;letter-spacing:-.01em;
  text-wrap:balance;margin:16px 0 10px;
}
.pe-h2 em{font-style:normal;color:var(--accent)}
.pe-lead{max-width:60ch;color:var(--muted);font-size:clamp(14px,1.6vw,16px);margin:0}

.pe-configs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:28px 0 22px;
}
.pe-config{
  position:relative;text-align:left;cursor:pointer;
  background:linear-gradient(180deg,var(--card) 0%,var(--navy-2) 100%);
  border:1px solid var(--line);border-radius:var(--r);
  padding:18px 18px 16px;color:inherit;font-family:inherit;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s,background .25s;
}
.pe-config:hover{transform:translateY(-4px);border-color:var(--line-2)}
.pe-config:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}
.pe-config[aria-pressed="true"]{
  border-color:rgba(247,181,0,.65);
  background:linear-gradient(180deg,#1a3a63 0%,#12294a 100%);
  box-shadow:0 0 0 1px rgba(247,181,0,.35),0 22px 50px -26px rgba(247,181,0,.55);
}
.pe-config[aria-pressed="true"]::after{
  content:"";position:absolute;left:18px;right:18px;bottom:0;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  box-shadow:0 0 18px rgba(247,181,0,.7);
}
.pe-config .pe-tag{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted-2);
}
.pe-config[aria-pressed="true"] .pe-tag{color:var(--accent-2)}
.pe-config .pe-name{font-family:var(--display);font-weight:700;font-size:20px;margin:6px 0 2px}
.pe-config .pe-spec{display:flex;gap:14px;margin:12px 0 10px;flex-wrap:wrap}
.pe-config .pe-spec b{
  font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;color:var(--ink)}
.pe-config .pe-spec span{display:block;font-size:11px;color:var(--muted-2);margin-top:1px}
.pe-config .pe-cdesc{font-size:12.5px;color:var(--muted);min-height:34px}
.pe-config .pe-price{
  margin-top:10px;font-family:var(--display);font-weight:700;font-size:18px;color:var(--accent)}
.pe-config.pe-locked{opacity:.45;filter:grayscale(.55);cursor:not-allowed}
.pe-config.pe-locked:hover{transform:none;border-color:var(--line);box-shadow:none}
.pe-config.pe-locked::after{display:none}
.pe-locknote{
  display:none;margin-top:10px;font-size:11.5px;font-weight:700;color:#ff9a9a;
  align-items:center;gap:6px}
.pe-config.pe-locked .pe-locknote{display:flex}
.pe-locknote::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--crit);flex:none}

.pe-univ{
  cursor:default;
  border:1.5px dashed rgba(63,211,255,.45);
  background:
    radial-gradient(120% 120% at 100% 0%,rgba(63,211,255,.12),transparent 60%),
    linear-gradient(180deg,rgba(16,45,80,.7),rgba(11,31,59,.7));
}
.pe-univ:hover{transform:none;border-color:rgba(63,211,255,.6)}
.pe-univ .pe-tag{color:var(--energy)}
.pe-uv{display:flex;gap:16px;margin:12px 0 12px;flex-wrap:wrap}
.pe-uv > div{display:flex;flex-direction:column}
.pe-uv b{font-family:var(--display);font-weight:800;font-size:26px;line-height:1;
  color:#bff0ff;font-variant-numeric:tabular-nums}
.pe-uv span{font-size:11px;color:var(--muted-2);margin-top:3px}
.pe-hours{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.pe-hours > span{font-size:11.5px;color:var(--muted);margin-right:2px}
.pe-hbtn{cursor:pointer;font-family:inherit;font-size:12px;font-weight:700;color:var(--muted);
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;
  padding:5px 9px;transition:.18s}
.pe-hbtn:hover{color:var(--ink);border-color:var(--line-2)}
.pe-hbtn:focus-visible{outline:2px solid var(--energy);outline-offset:2px}
.pe-hbtn[aria-pressed="true"]{background:rgba(63,211,255,.16);color:#cdf3ff;
  border-color:rgba(63,211,255,.5)}
.pe-rec{font-size:12.5px;color:var(--muted);border-top:1px dashed var(--line);padding-top:11px}
.pe-rec b{color:var(--accent-2);font-weight:700}
.pe-rec.pe-rec-ind b{color:var(--energy)}

.pe-stage{
  display:grid;grid-template-columns:1.05fr .95fr 1fr;gap:16px;align-items:stretch;
  margin-bottom:26px;
}
.pe-tile{
  background:linear-gradient(180deg,rgba(20,50,87,.9),rgba(12,34,64,.9));
  border:1px solid var(--line);border-radius:var(--r);padding:20px;
  display:flex;flex-direction:column;
}
.pe-tile h3{
  margin:0 0 14px;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2)}

.pe-battery-wrap{display:flex;flex-direction:column;gap:14px;flex:1;justify-content:center}
.pe-battery{
  position:relative;height:74px;border:2px solid var(--line-2);border-radius:12px;
  padding:7px;display:flex;gap:6px;background:rgba(0,0,0,.25);overflow:hidden;
}
.pe-battery::after{content:"";position:absolute;right:-9px;top:50%;transform:translateY(-50%);
  width:7px;height:26px;border-radius:0 4px 4px 0;background:var(--line-2)}
.pe-cell{flex:1;border-radius:5px;background:linear-gradient(180deg,var(--accent-2),var(--accent));
  box-shadow:0 0 14px rgba(247,181,0,.55);animation:peCharge 2.6s ease-in-out infinite}
.pe-battery.energized .pe-cell{background:linear-gradient(180deg,#7ee6ff,var(--energy));
  box-shadow:0 0 16px rgba(63,211,255,.6)}
.pe-cap{display:flex;align-items:baseline;gap:8px}
.pe-cap b{font-family:var(--display);font-weight:800;font-size:34px;line-height:1;
  font-variant-numeric:tabular-nums}
.pe-cap span{color:var(--muted);font-size:14px}
.pe-inv{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);
  border-top:1px dashed var(--line);padding-top:10px}
.pe-inv b{color:var(--ink);font-variant-numeric:tabular-nums}

.pe-gauge-tile{align-items:center}
.pe-gauge{position:relative;width:min(220px,52vw);aspect-ratio:1;margin:auto}
.pe-gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.pe-gauge .pe-track{fill:none;stroke:rgba(255,255,255,.08);stroke-width:14}
.pe-gauge .pe-arc{fill:none;stroke:url(#peGrad);stroke-width:14;stroke-linecap:round;
  transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1),stroke .5s;
  filter:drop-shadow(0 0 8px rgba(247,181,0,.5))}
.pe-gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center}
.pe-gauge-center .pe-num{font-family:var(--display);font-weight:800;
  font-size:clamp(30px,7vw,44px);line-height:.95;font-variant-numeric:tabular-nums}
.pe-gauge-center .pe-unit{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:6px}

.pe-readout{gap:0}
.pe-metric{display:flex;justify-content:space-between;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line)}
.pe-metric:last-of-type{border-bottom:0}
.pe-metric .pe-k{font-size:13px;color:var(--muted)}
.pe-metric .pe-v{font-family:var(--display);font-weight:700;font-size:22px;
  font-variant-numeric:tabular-nums}
.pe-metric .pe-v small{font-size:13px;color:var(--muted);font-weight:600;font-family:var(--font)}
.pe-status{
  margin-top:14px;display:flex;align-items:center;gap:9px;
  padding:11px 14px;border-radius:var(--r-sm);font-weight:600;font-size:13.5px;
  background:rgba(51,214,159,.12);color:#8ff0cf;border:1px solid rgba(51,214,159,.25)}
.pe-status .pe-si{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}
.pe-status[data-lvl="warn"]{background:rgba(247,181,0,.12);color:var(--accent-2);
  border-color:rgba(247,181,0,.3)}
.pe-status[data-lvl="crit"]{background:rgba(255,107,107,.12);color:#ff9a9a;
  border-color:rgba(255,107,107,.3)}
.pe-status[data-lvl="idle"]{background:rgba(255,255,255,.05);color:var(--muted);
  border-color:var(--line)}

.pe-apps-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:14px}
.pe-apps-head h3{margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(18px,2.4vw,24px)}
.pe-apps-head p{margin:4px 0 0;font-size:13px;color:var(--muted)}
.pe-quick{display:flex;gap:8px;flex-wrap:wrap}
.pe-chip{cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;
  padding:7px 13px;transition:.2s}
.pe-chip:hover{color:var(--ink);border-color:var(--line-2)}
.pe-chip:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}

.pe-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px}
.pe-app{
  position:relative;cursor:pointer;font-family:inherit;color:inherit;text-align:center;
  background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:16px 10px 12px;transition:transform .22s cubic-bezier(.2,.8,.2,1),
    border-color .22s,background .22s,box-shadow .22s,opacity .22s;
}
.pe-app:hover{transform:translateY(-3px);border-color:var(--line-2);background:rgba(255,255,255,.05)}
.pe-app:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}
.pe-app .pe-ic{width:34px;height:34px;margin:0 auto 9px;color:var(--muted);
  display:grid;place-items:center;transition:color .22s}
.pe-app .pe-ic svg{width:100%;height:100%;stroke:currentColor;stroke-width:1.6;
  fill:none;stroke-linecap:round;stroke-linejoin:round}
.pe-app .pe-an{display:block;font-size:13px;font-weight:600;line-height:1.2}
.pe-app .pe-aw{display:block;font-size:11px;color:var(--muted-2);margin-top:3px;font-variant-numeric:tabular-nums}
.pe-app .pe-atime{
  margin-top:9px;font-size:11px;font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.05);border-radius:7px;padding:3px 6px;display:inline-block}
.pe-app[aria-pressed="true"]{
  border-color:rgba(63,211,255,.6);background:rgba(63,211,255,.09);
  box-shadow:0 0 0 1px rgba(63,211,255,.3),0 16px 34px -20px rgba(63,211,255,.7)}
.pe-app[aria-pressed="true"] .pe-ic{color:var(--energy)}
.pe-app[aria-pressed="true"] .pe-atime{background:rgba(63,211,255,.16);color:#bff0ff}
.pe-app[aria-pressed="true"]::before{
  content:"";position:absolute;top:8px;right:8px;width:16px;height:16px;border-radius:50%;
  background:var(--energy);box-shadow:0 0 12px rgba(63,211,255,.9);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B2340' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size:11px;background-position:center;background-repeat:no-repeat}
.pe-app[data-avail="no"]{opacity:.4;cursor:not-allowed;filter:grayscale(.4)}
.pe-app[data-avail="no"]:hover{transform:none;background:rgba(255,255,255,.03)}
.pe-app[data-avail="no"] .pe-atime{color:var(--crit);background:rgba(255,107,107,.1)}
.pe-app[data-overinv="yes"] .pe-aw{color:var(--accent-2)}

.pe-bottom{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-top:26px}
.pe-cost h3{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2)}
.pe-cost .pe-total{font-family:var(--display);font-weight:800;
  font-size:clamp(28px,4.5vw,40px);color:var(--accent);line-height:1;margin:2px 0 14px}
.pe-break{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.pe-break li{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;
  color:var(--muted);border-bottom:1px dashed var(--line);padding-bottom:9px}
.pe-break li b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.pe-break li.pe-solar{color:var(--energy)}
.pe-break li.pe-solar b{color:#bff0ff}
.pe-solartoggle{display:none;align-items:center;gap:11px;margin-top:14px;
  padding:12px 14px;border:1px solid rgba(63,211,255,.3);border-radius:var(--r-sm);
  background:rgba(63,211,255,.06);cursor:pointer;font-family:inherit;width:100%;text-align:left;color:inherit}
.pe-solartoggle.pe-show{display:flex}
.pe-solartoggle:focus-visible{outline:2px solid var(--energy);outline-offset:2px}
.pe-switch{width:42px;height:24px;border-radius:999px;background:rgba(255,255,255,.14);
  position:relative;flex:none;transition:background .25s}
.pe-switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:#fff;transition:transform .25s}
.pe-solartoggle[aria-pressed="true"] .pe-switch{background:var(--energy)}
.pe-solartoggle[aria-pressed="true"] .pe-switch::after{transform:translateX(18px)}
.pe-solartoggle .pe-st-t{font-weight:700;font-size:13.5px}
.pe-solartoggle .pe-st-s{font-size:12px;color:var(--muted)}

.pe-cta{
  background:
    radial-gradient(120% 120% at 100% 0%,rgba(247,181,0,.18),transparent 60%),
    linear-gradient(180deg,var(--card-2),var(--navy-2));
  border:1px solid var(--line-2);border-radius:var(--r);padding:22px;
  display:flex;flex-direction:column;justify-content:center;gap:14px}
.pe-cta .pe-cta-t{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.15;text-wrap:balance}
.pe-cta .pe-cta-s{font-size:13px;color:var(--muted);margin-top:-4px}
.pe-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));color:#0B2340;
  font-family:inherit;font-weight:800;font-size:15.5px;text-decoration:none;
  padding:15px 22px;border-radius:12px;border:0;cursor:pointer;
  box-shadow:0 14px 30px -12px rgba(247,181,0,.7);transition:transform .2s,box-shadow .2s}
.pe-btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(247,181,0,.85)}
.pe-btn:disabled{opacity:.7;cursor:default;transform:none}
.pe-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.pe-phone{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;
  font-weight:700;font-size:16px;font-variant-numeric:tabular-nums}
.pe-phone svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.8}
.pe-phone span{color:var(--muted);font-weight:500;font-size:12.5px}

/* Форма заявки всередині CTA (капча + телефон) */
.pe-form{display:flex;flex-direction:column;gap:12px}
.pe-field{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.28);
  border:1px solid var(--line-2);border-radius:12px;padding:0 14px}
.pe-field > span{color:var(--muted);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums}
.pe-field input{flex:1;min-width:0;background:transparent;border:0;outline:none;
  color:var(--ink);font-family:inherit;font-size:16px;padding:14px 0}
.pe-field input::placeholder{color:var(--muted-2)}
.pe-field:focus-within{border-color:var(--accent-2)}
.pe-form .cf-turnstile{min-height:65px}
.pe-form .pe-btn{width:100%}
.pe-formmsg{font-size:13px;line-height:1.4;min-height:1.2em;color:var(--muted)}
.pe-formmsg.is-error{color:#ff9a9a}
.pe-formmsg.is-success{color:#8ff0cf}

.pe-foot{margin-top:18px;font-size:12px;color:var(--muted-2);max-width:70ch}

@media (max-width:1040px){
  .pe-configs{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .pe-stage{grid-template-columns:1fr 1fr}
  .pe-gauge-tile{grid-column:1 / -1;order:-1}
  .pe-bottom{grid-template-columns:1fr}
}
@media (max-width:620px){
  .pe-configs{grid-template-columns:1fr}
  .pe-stage{grid-template-columns:1fr}
  .pe-config .pe-cdesc{min-height:0}
  .pe-apps{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
}
@media (max-width:400px){
  .pe-apps{grid-template-columns:1fr 1fr}
}

@keyframes pePulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes peCharge{0%,100%{opacity:.92}50%{opacity:.66}}
@media (prefers-reduced-motion:reduce){
  .pe-ups *{animation:none!important;transition:none!important}
}

/* --- ДБЖ: фікс мобільного оверфлоу (Turnstile 300px + вкладені паддінги) --- */
@media (max-width:620px){
  .pe-section{padding-left:10px;padding-right:10px}
  .pe-ups{padding:16px}
  .pe-cta{padding:16px}
  .pe-bottom{grid-template-columns:minmax(0,1fr)}
  .pe-cost,.pe-cta,.pe-form{min-width:0}
  .pe-form .cf-turnstile{max-width:100%;transform-origin:left top}
}
@media (max-width:400px){
  .pe-section{padding-left:6px;padding-right:6px}
  .pe-ups{padding:13px}
  .pe-cta{padding:14px}
}
@media (max-width:365px){
  .pe-form .cf-turnstile{transform:scale(.9);margin-bottom:-6px}
}
@media (max-width:335px){
  .pe-form .cf-turnstile{transform:scale(.8);margin-bottom:-13px}
}

.promin-quiz-open{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:0; border-radius:12px; padding:14px 22px;
  font:700 15px/1 Manrope,system-ui,sans-serif; color:#081a2e;
  background:linear-gradient(135deg,#ffb703,#fb8500);
  box-shadow:0 10px 26px rgba(251,133,0,.35); transition:.15s;
}
.promin-quiz-open:hover{transform:translateY(-1px); box-shadow:0 14px 32px rgba(251,133,0,.45)}

#promin-quiz-modal{
  position:fixed; inset:0; z-index:99999; display:none;
  background:rgba(8,26,46,.72); backdrop-filter:blur(4px);
  padding:0; opacity:0; transition:opacity .2s ease;
}
#promin-quiz-modal.open{display:block; opacity:1}
#promin-quiz-modal .frame-wrap{
  position:absolute; inset:0; margin:auto;
  width:min(1040px,100%); height:min(720px,100%);
  background:#f4f7fb; border-radius:0; overflow:hidden;
  box-shadow:0 24px 70px rgba(8,26,46,.5);
}
@media (min-width:1080px){ #promin-quiz-modal .frame-wrap{border-radius:20px; inset:auto; top:50%; left:50%; transform:translate(-50%,-50%)} }
#promin-quiz-modal iframe{width:100%; height:100%; border:0; display:block}