.okod-energy-timeline {
  --oet-title: #fed000;
  --oet-text: #7a7a7a;
  --oet-line: #dedede;
  --oet-line-active: #fed000;
  --oet-circle: #fff;
  --oet-circle-border: #fed000;
  --oet-dot: #fed000;
  --oet-check: #fed000;
  --oet-bg: #fff;
  --oet-speed: 600ms;
  padding: clamp(70px, 8vw, 120px) 20px;
  overflow: hidden;
  color: var(--oet-text);
  background: var(--oet-bg);
  font-family: Roboto, Arial, sans-serif;
}
.okod-energy-timeline *, .okod-energy-timeline *::before, .okod-energy-timeline *::after { box-sizing: border-box; }
.okod-energy-timeline__inner { position: relative; width: 100%; max-width: 1140px; margin: 0 auto; }
.okod-energy-timeline__timeline { position: absolute; top: 24px; bottom: 24px; left: 23px; width: 2px; pointer-events: none; }
.okod-energy-timeline__line, .okod-energy-timeline__progress { position: absolute; inset: 0; display: block; width: 2px; border-radius: 999px; }
.okod-energy-timeline__line { background: var(--oet-line); opacity: .7; }
.okod-energy-timeline__progress { height: 0; background: var(--oet-line-active); box-shadow: 0 0 16px color-mix(in srgb, var(--oet-line-active) 35%, transparent); transition: height 700ms cubic-bezier(.22,1,.36,1); }
.okod-energy-timeline__items { display: flex; flex-direction: column; gap: 90px; }
.okod-energy-timeline__block { position: relative; display: grid; grid-template-columns: 48px minmax(0,1fr); min-width: 0; gap: clamp(22px, 3vw, 44px); opacity: .34; transition: opacity var(--oet-speed) ease; }
.okod-energy-timeline__marker { position: relative; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; background: var(--oet-circle); border: 2px solid color-mix(in srgb, var(--oet-circle-border) 34%, transparent); border-radius: 50%; box-shadow: none; transition: border-color var(--oet-speed) ease, box-shadow var(--oet-speed) ease, transform var(--oet-speed) cubic-bezier(.22,1,.36,1); }
.okod-energy-timeline__marker span { width: 10px; height: 10px; background: var(--oet-dot); border-radius: 50%; opacity: .45; transform: scale(.65); transition: opacity var(--oet-speed) ease, transform var(--oet-speed) cubic-bezier(.22,1,.36,1); }
.okod-energy-timeline__body { min-width: 0; max-width: 950px; padding-top: 3px; font-size: 16px; font-weight: 400; line-height: 1.5; opacity: .55; transform: translate3d(0,12px,0); transition: opacity var(--oet-speed) ease, transform var(--oet-speed) cubic-bezier(.22,1,.36,1); }
.okod-energy-timeline__title { max-width: 100%; margin: 0 0 20px; color: var(--oet-title); font-family: Roboto, Arial, sans-serif; font-size: 32px; font-weight: 600; line-height: 1; overflow-wrap: anywhere; word-break: break-word; }
.okod-energy-timeline__text p { margin: 0 0 18px; }
.okod-energy-timeline__text p:last-child { margin-bottom: 0; }
.okod-energy-timeline__text strong { color: var(--oet-title); font-weight: 700; }
.okod-energy-timeline__list { display: grid; gap: 11px; margin: 22px 0; padding: 0; list-style: none; }
.okod-energy-timeline__list li { display: grid; grid-template-columns: 25px minmax(0,1fr); align-items: start; gap: 10px; margin: 0; opacity: .15; transform: translate3d(-22px,8px,0); transition: opacity 480ms ease, transform 480ms cubic-bezier(.22,1,.36,1); transition-delay: 0ms; }
.okod-energy-timeline__check { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; color: var(--oet-check); }
.okod-energy-timeline__check svg { width: 19px; height: 19px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.okod-energy-timeline__check path { stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset 430ms cubic-bezier(.22,1,.36,1); }
.okod-energy-timeline__block.is-active { opacity: 1; }
.okod-energy-timeline__block.is-active .okod-energy-timeline__marker { border-color: var(--oet-circle-border); box-shadow: 0 5px 24px color-mix(in srgb, var(--oet-circle-border) 32%, transparent); transform: scale(1.06); }
.okod-energy-timeline__block.is-active .okod-energy-timeline__marker span { opacity: 1; transform: scale(1); }
.okod-energy-timeline__block.is-active .okod-energy-timeline__body { opacity: 1; transform: none; }
.okod-energy-timeline__block.is-active .okod-energy-timeline__list li { opacity: 1; transform: none; transition-delay: calc(180ms + var(--item-index) * 115ms); }
.okod-energy-timeline__block.is-active .okod-energy-timeline__check path { stroke-dashoffset: 0; transition-delay: calc(260ms + var(--item-index) * 115ms); }
@media (max-width: 767px) {
  .okod-energy-timeline { padding: 60px 14px; }
  .okod-energy-timeline__timeline { left: 18px; top: 19px; bottom: 19px; }
  .okod-energy-timeline__block { grid-template-columns: 38px minmax(0,1fr); gap: 17px; }
  .okod-energy-timeline__marker { width: 38px; height: 38px; }
  .okod-energy-timeline__marker span { width: 9px; height: 9px; }
  .okod-energy-timeline__title { margin-bottom: 16px; font-size: clamp(24px,7vw,32px); line-height: 1.08; }
  .okod-energy-timeline__body { padding-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .okod-energy-timeline *, .okod-energy-timeline *::before, .okod-energy-timeline *::after { scroll-behavior: auto!important; transition-duration: .01ms!important; transition-delay: 0ms!important; }
  .okod-energy-timeline__list li { opacity: 1; transform: none; }
  .okod-energy-timeline__check path { stroke-dashoffset: 0; }
}