/* ===================================================================
   index.css - style uzywane wylacznie na stronie glownej (index.html)
   Wspolne style (nawigacja, przyciski, karty, typografia) w styles.css.
   =================================================================== */

@media (max-width:1100px) {
  #wr-ph-l,#wr-ph-r {
      display: none!important;
  }
  #wr-ph-c {
      width: 100%!important;
      max-width: 290px!important;
  }
}
@keyframes waspPulse {
  0%,100% {
      opacity: .45;
      transform: scale(1);
  }
  50% {
      opacity: 1;
      transform: scale(1.25);
  }
}
.btn-outline {
  padding: 16px 24px;
  border: 1px solid rgb(var(--ink) / .18);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-ink);
}
.btn-outline:hover {
  border-color: var(--color-ink);
  color: var(--color-ink);
}
.btn--block {
  display: block;
  width: 100%;
  padding: 22px 24px;
  border-radius: 16px;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  /* .btn-invert ma domyslnie white-space:nowrap (pasuje do przyciskow w
     rzedach flex) - tutaj etykieta jest dluga i siedzi w gridzie .stack-12,
     wiec bez zawijania rozpychala caly kolumnowy tor grida na waskich
     ekranach (patrz komentarz przy .wr-idx-177). */
  white-space: normal;
}
.btn--lg-shadow {
  padding: 16px 28px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0 8px 24px -8px rgb(var(--accent) / .55);
}
.h3--md {
  margin-bottom: 8px;
  font-size: 20px;
}
.body-muted--tight {
  line-height: 1.5;
}
.card--p22 {
  padding: 22px 24px;
}
.badge--72 {
  background: rgb(var(--panel) / .72);
}
.phone-icon-btn--sm {
  padding: 7px 9px;
  border-radius: 8px;
}
.phone-icon-btn--lg {
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgb(var(--white) / .05);
}
.stat-num--xl {
  font-size: 38px;
  letter-spacing: -.03em;
  min-height: 46px;
}
.bar-80 {
  height: 80%;
}
.bar-90-accent {
  height: 90%;
}
.bar-full-accent {
  height: 100%;
}
.battery-icon {
  width: 12px;
  height: 6px;
  border: 1px solid rgb(var(--white) / .5);
  border-radius: 2px;
  display: inline-block;
}
.chip {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgb(var(--white) / .05);
  color: rgb(var(--white) / .75);
  font-family: 'JetBrains Mono',monospace;
  font-size: 10px;
  white-space: nowrap;
}
.chip--accent {
  background: rgb(var(--accent) / .18);
  color: var(--color-accent-light-hover);
}
.bar-v {
  flex: 1;
  border-radius: 2px;
}
.bar-v--muted {
  background: rgb(var(--white) / .22);
}
.text-16-bold {
  font-weight: 600;
  font-size: 16px;
}
.mono-note {
  font-family: 'JetBrains Mono',monospace;
  font-size: 12px;
  color: rgb(var(--ink) / .5);
  margin-top: 6px;
  line-height: 1.5;
}
.btn-outline--onDark {
  border-color: rgb(var(--white) / .3);
  color: var(--color-white);
}
.btn-outline--onDark:hover {
  border-color: var(--color-white);
  color: var(--color-white);
}
.phone-badge-label {
  font-family: 'JetBrains Mono',monospace;
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgb(var(--white) / .42);
}
.phone-caption {
  font-family: 'JetBrains Mono',monospace;
  font-size: 10px;
  color: rgb(var(--white) / .45);
}
.phone-panel {
  padding: 12px 13px;
  border-radius: 12px;
  background: rgb(var(--white) / .05);
  border: 1px solid rgb(var(--white) / .05);
}
.phone-stat-label {
  font-family: 'JetBrains Mono',monospace;
  font-size: 8px;
  color: rgb(var(--white) / .42);
  margin: 2px 0 6px;
}
.phone-stat-label-lg {
  font-family: 'JetBrains Mono',monospace;
  font-size: 10px;
  color: rgb(var(--white) / .42);
  margin: 3px 0 9px;
}
.phone-stat-value-sm {
  font-size: 12px;
  font-weight: 600;
  margin-top: 3px;
}
.phone-statusbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 16px 5px;
  font-family: 'JetBrains Mono',monospace;
  font-size: 10px;
  color: rgb(var(--white) / .6);
  flex: none;
}
.progress-track {
  height: 3px;
  border-radius: 2px;
  background: rgb(var(--white) / .12);
}
.progress-track-lg {
  height: 4px;
  border-radius: 3px;
  background: rgb(var(--white) / .12);
}
.row-gap-4 {
  display: flex;
  gap: 4px;
  align-items: center;
}
.bg-tint {
  background: var(--color-bg);
}
.section-inner-lg {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(56px,8vw,96px) clamp(20px,4vw,32px);
}
.text-accent {
  color: var(--color-accent);
}
.text-md-bold {
  font-size: 14px;
  font-weight: 600;
}
.pin--6 {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
}
.pin--10 {
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
}
.pin--12 {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
}
.pin--accent-light-9 {
  border: 1px solid rgb(var(--accent-light) / .9);
}
.pin--accent-light-95 {
  border: 1px solid rgb(var(--accent-light) / .95);
}
.pin--shadow-35 {
  box-shadow: 0 0 0 2px rgb(var(--black) / .35);
}
.wr-idx-01 {
  background: var(--color-white);
  border-bottom: 1px solid rgb(var(--ink) / .1);
}
.wr-idx-02 {
  max-width: 1180px;
  margin: 0 auto;
  padding: 21px clamp(20px,4vw,32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
}
.wr-idx-03 {
  height: 51px;
  width: auto;
  max-width: 100%;
  /* feng-logo-strip.png (945x85) jest szerszym, wielo-logotypowym paskiem —
     na waskich ekranach sama wysokosc 51px robi go szerszym niz viewport
     (a body ma overflow-x:hidden, wiec bez object-fit po prostu ucinałby sie
     po prawej zamiast proporcjonalnie sie zmniejszyć). innostart-hub-polska.png
     (1080x502) nigdy w to nie wpada, wiec dla niego ta reguła jest no-opem. */
  object-fit: contain;
  display: block;
}
.wr-idx-04 {
  width: 1px;
  height: 42px;
  background: rgb(var(--ink) / .18);
}
.wr-idx-05 {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(48px,7vw,88px) clamp(20px,4vw,32px) 72px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap: clamp(36px,5vw,64px);
  align-items: center;
}
.wr-idx-06 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 13px;
  border: 1px solid rgb(var(--accent-light) / .25);
  border-radius: 999px;
  font-family: 'JetBrains Mono',monospace;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-accent-light);
  margin-bottom: 26px;
}
.wr-idx-07 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent-light);
  animation: waspPulse 2.4s ease-in-out infinite;
}
.wr-idx-08 {
  margin: 0 0 22px;
  font-size: clamp(40px,5.2vw,68px);
  line-height: 1.02;
  letter-spacing: -.035em;
}
.wr-idx-09 {
  color: var(--color-accent);
}
.wr-idx-10 {
  margin: 0 0 34px;
  max-width: 34em;
}
.wr-idx-11 {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 30px;
}
.wr-idx-12 {
  margin: 0;
  font-family: 'JetBrains Mono',monospace;
  font-size: 12px;
  line-height: 1.7;
  color: rgb(var(--white) / .45);
}
.wr-idx-13 {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: flex-end;
}
.wr-idx-14 {
  color: var(--color-white);
  position: relative;
  width: 44%;
  max-width: 230px;
  aspect-ratio: 9/19;
  border-radius: 26px;
  background: var(--color-panel);
  border: 1px solid rgb(var(--white) / .18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 40px -24px rgb(var(--ink) / .45);
}
.wr-idx-15 {
  padding: 0 16px 10px;
  flex: none;
}
.wr-idx-16 {
  font-family: 'JetBrains Mono',monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent-light);
}
.wr-idx-17 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.wr-idx-18 {
  position: relative;
  flex: 1;
  background: url('../img/target.jpg') center 42%/150% no-repeat;
}
.wr-idx-19 {
  position: absolute;
  inset: 9%;
  border: 1px solid rgb(var(--white) / .5);
  border-radius: 6px;
}
.wr-idx-28 {
  left: 8px;
  top: 8px;
}
.wr-idx-29 {
  flex: none;
  padding: 12px 16px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-panel);
}
.wr-idx-30 {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-accent);
  flex: none;
  box-shadow: 0 0 0 3px rgb(var(--accent) / .25);
}
.wr-idx-31 {
  font-family: 'JetBrains Mono',monospace;
  font-size: 10px;
  line-height: 1.5;
  color: rgb(var(--white) / .55);
}
.wr-idx-32 {
  color: var(--color-white);
  position: relative;
  width: 52%;
  max-width: 270px;
  aspect-ratio: 9/19;
  border-radius: 30px;
  background: var(--color-panel);
  border: 1px solid rgb(var(--white) / .18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px -30px rgb(var(--ink) / .55);
}
.wr-idx-33 {
  padding: 2px 16px 0;
  flex: none;
}
.wr-idx-34 {
  font-family: 'JetBrains Mono',monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(var(--white) / .45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wr-idx-35 {
  padding: 10px 16px 14px;
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.wr-idx-36 {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .9;
}
.wr-idx-37 {
  font-family: 'JetBrains Mono',monospace;
  font-size: 10px;
  color: rgb(var(--white) / .45);
  padding-bottom: 5px;
  white-space: nowrap;
}
.wr-idx-38 {
  margin-left: auto;
  align-self: center;
}
.wr-idx-39 {
  margin: 0 16px;
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  background: url('../img/target.jpg') center/cover;
  flex: none;
}
.wr-idx-48 {
  padding: 12px 16px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: none;
}
.wr-idx-49 {
  padding: 12px 16px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.wr-idx-50 {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 34px;
}
.wr-idx-51 {
  height: 70%;
}
.wr-idx-52 {
  height: 60%;
}
.wr-idx-53 {
  font-family: 'JetBrains Mono',monospace;
  font-size: 8px;
  color: rgb(var(--white) / .35);
  margin-top: 6px;
}
.wr-idx-54 {
  color: var(--color-white);
  position: relative;
  width: 40%;
  max-width: 210px;
  aspect-ratio: 9/19;
  border-radius: 24px;
  background: var(--color-panel);
  border: 1px solid rgb(var(--white) / .18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 40px -24px rgb(var(--ink) / .4);
}
.wr-idx-55 {
  padding: 2px 14px 10px;
  flex: none;
}
.wr-idx-56 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.wr-idx-57 {
  font-family: 'JetBrains Mono',monospace;
  font-size: 10px;
  color: rgb(var(--white) / .42);
  margin-top: 3px;
}
.wr-idx-58 {
  padding: 0 14px;
  display: grid;
  gap: 8px;
  flex: 1;
  align-content: start;
}
.wr-idx-60 {
  width: 48%;
}
.wr-idx-62 {
  width: 31%;
}
.wr-idx-63 {
  padding: 10px 14px 14px;
  flex: none;
  font-family: 'JetBrains Mono',monospace;
  font-size: 8px;
  color: rgb(var(--white) / .35);
  line-height: 1.5;
}
.wr-idx-65 {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px clamp(20px,4vw,32px);
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(190px,1fr));
  gap: 28px;
}
.wr-idx-66 {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--color-accent);
  min-height: 46px;
}
.wr-idx-67 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: clamp(36px,5vw,64px);
  align-items: start;
}
.wr-idx-68 {
  margin: 0 0 20px;
  font-size: clamp(30px,3.6vw,44px);
  line-height: 1.1;
  letter-spacing: -.03em;
}
.wr-idx-69 {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgb(var(--white) / .6);
  text-wrap: pretty;
}
.wr-idx-70 {
  margin: 0 0 14px;
}
.wr-idx-71 {
  margin: 0 0 52px;
  max-width: 44em;
}
/* Kroki: 2 + 1 (KROK 03 / AI na cala szerokosc) + 2 */
.wr-idx-72 {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 24px;
}
.wr-idx-step-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 32px;
  align-items: center;
}
.wr-idx-step-wide .wr-idx-84 {
  margin-bottom: 0;
}
.wr-idx-step-wide-text .label-accent {
  margin-bottom: 12px;
}
/* Wizualizacje w kartach 50/50 - nizsze niz 4:3, zeby nie bylo pustych pol;
   mini-card powiekszony tylko w tej sekcji (ten sam komponent jest tez na
   /funkcje/ w mniejszej wersji). */
#jak-dziala .wr-idx-72 > .card:not(.wr-idx-step-wide) :is(.wr-idx-73,.wr-idx-krok0-visual,.wr-idx-102) {
  aspect-ratio: 16/10;
}
#jak-dziala .wr-idx-krok0-visual {
  background:
    radial-gradient(rgb(var(--accent) / .16) 1px, transparent 1.5px) 0 0/18px 18px,
    rgb(var(--accent) / .07);
}
#jak-dziala .mini-card {
  max-width: 300px;
  gap: 14px;
  padding: 22px;
  border-radius: 16px;
  box-shadow: 0 18px 36px rgb(var(--ink) / .14);
}
#jak-dziala .mini-card-head {
  font-size: 16px;
  gap: 10px;
}
#jak-dziala .mini-card-head .card-icon {
  width: 22px;
  height: 22px;
}
#jak-dziala .mini-row {
  gap: 8px;
}
#jak-dziala .mini-chip {
  padding: 6px 13px;
  font-size: 13px;
}
#jak-dziala .mini-confirm {
  font-size: 14px;
  gap: 8px;
}
#jak-dziala .mini-check {
  width: 20px;
  height: 20px;
  font-size: 12px;
}
/* KROK 04 - panel dziennika */
#jak-dziala .wr-idx-102 {
  padding: 18px;
  gap: 14px;
}
#jak-dziala .wr-idx-104 {
  width: 52px;
  height: 52px;
}
#jak-dziala .wr-idx-111 {
  font-size: 15px;
}
#jak-dziala .wr-idx-112 {
  font-size: 11px;
}
.wr-idx-log {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgb(var(--white) / .04);
}
.wr-idx-log-head {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono',monospace;
  font-size: 11px;
  color: rgb(var(--white) / .45);
}
.wr-idx-log-bars {
  flex: 1;
  min-height: 24px;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.wr-idx-log-bars span {
  flex: 1;
  height: calc(var(--h) * 100%);
  border-radius: 4px 4px 2px 2px;
  background: rgb(var(--white) / .14);
}
.wr-idx-log-bars .is-current {
  background: var(--color-accent);
}
#jak-dziala .wr-idx-113 {
  margin-top: 0;
}
@media (max-width:720px) {
  .wr-idx-72,
  .wr-idx-step-wide {
      grid-template-columns: 1fr;
  }
  .wr-idx-step-wide {
      gap: 20px;
  }
  #jak-dziala .wr-idx-72 > .card:not(.wr-idx-step-wide) .wr-idx-73 {
      aspect-ratio: 4/3;
  }
  /* mockupy (krok 1, 4, 5) - wysokosc z tresci, zeby nic nie wystawalo */
  #jak-dziala .wr-idx-72 > .card:not(.wr-idx-step-wide) :is(.wr-idx-krok0-visual,.wr-idx-102) {
      aspect-ratio: auto;
  }
  #jak-dziala .wr-idx-krok0-visual {
      padding: 28px 16px;
  }
  #jak-dziala .mini-card {
      padding: 18px;
      gap: 12px;
  }
  #jak-dziala .mini-card-head {
      font-size: 15px;
  }
  #jak-dziala .mini-chip {
      padding: 5px 11px;
      font-size: 12px;
  }
  .wr-idx-log-bars {
      flex: none;
      height: 72px;
  }
}
.wr-idx-73 {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  background: url('../img/range.jpg') center/cover;
}
.wr-idx-krok0-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4/3;
  border-radius: 12px;
  margin-bottom: 20px;
  padding: 20px;
  background: rgb(var(--accent) / .07);
}
/* .mini-card i towarzyszace klasy - patrz assets/css/styles.css (wspolne,
   bo uzywane tez poza SG, np. na stronie Funkcje). */
.wr-idx-74 {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 60px rgb(var(--black) / .6);
}
.wr-idx-75 {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--color-white);
  border-left: 2px solid var(--color-white);
  opacity: .85;
}
.wr-idx-76 {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 18px;
  height: 18px;
  border-top: 2px solid var(--color-white);
  border-right: 2px solid var(--color-white);
  opacity: .85;
}
.wr-idx-77 {
  position: absolute;
  bottom: 14px;
  left: 14px;
  width: 18px;
  height: 18px;
  border-bottom: 2px solid var(--color-white);
  border-left: 2px solid var(--color-white);
  opacity: .85;
}
.wr-idx-78 {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 18px;
  height: 18px;
  border-bottom: 2px solid var(--color-white);
  border-right: 2px solid var(--color-white);
  opacity: .85;
}
.wr-idx-79 {
  position: absolute;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border: 1px solid rgb(var(--accent-light) / .9);
  border-radius: 4px;
}
.wr-idx-80 {
  position: absolute;
  width: 14px;
  height: 1px;
  margin: 0 0 0 -7px;
  background: rgb(var(--accent-light) / .9);
}
.wr-idx-81 {
  position: absolute;
  width: 1px;
  height: 14px;
  margin: -7px 0 0 0;
  background: rgb(var(--accent-light) / .9);
}
.wr-idx-82 {
  left: 14px;
  top: 38px;
}
.wr-idx-83 {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid rgb(var(--white) / .85);
}
.wr-idx-84 {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  background: url('../img/target.jpg') center 44%/125% no-repeat;
}
.wr-idx-102 {
  aspect-ratio: 4/3;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--color-panel);
  border: 1px solid rgb(var(--white) / .05);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wr-idx-103 {
  display: flex;
  gap: 12px;
  align-items: center;
}
.wr-idx-104 {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: url('../img/target.jpg') center/cover;
  flex: none;
  position: relative;
}
.wr-idx-110 {
  min-width: 0;
}
.wr-idx-112 {
  font-family: 'JetBrains Mono',monospace;
  font-size: 10px;
  color: rgb(var(--white) / .45);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* .wr-idx-111 (bez wlasnego koloru) jest reuzywane tez w page-funkcje.php
   ("Wirtualna szafa" na bialej karcie, gdzie ciemny domyslny kolor jest
   ok) - tutaj siedzi na ciemnym panelu mockupu telefonu (.wr-idx-102) i
   bez override byloby prawie niewidoczne (ciemny tekst na ciemnym tle). */
.wr-idx-102 .wr-idx-111 {
  color: var(--color-white);
}
.wr-idx-113 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: auto;
}
.wr-idx-115 {
  margin: 0 0 14px;
  max-width: 22em;
}
.wr-idx-116 {
  margin: 0 0 48px;
  max-width: 44em;
}
.wr-idx-117 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.wr-idx-118 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap: 24px;
}
.wr-idx-119 {
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--color-bg);
  border: 1px solid rgb(var(--ink) / .1);
  padding: 0;
}
.wr-idx-120 {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--color-ink);
}
.wr-idx-121 {
  position: absolute;
  inset: 0;
  background: url('../img/target.jpg') center 46%/auto 240% no-repeat;
  opacity: .9;
}
.wr-idx-122 {
  position: absolute;
  left: 49.5%;
  top: 49%;
  width: 15%;
  aspect-ratio: 1;
  transform: translate(-50%,-50%) rotate(-18deg);
  border: 1px solid rgb(var(--green) / .85);
  border-radius: 50%;
}
.wr-idx-123 {
  left: 47%;
  top: 44%;
}
.wr-idx-124 {
  left: 52%;
  top: 47%;
}
.wr-idx-125 {
  left: 45%;
  top: 49%;
}
.wr-idx-126 {
  left: 50%;
  top: 52%;
}
.wr-idx-127 {
  left: 55%;
  top: 43%;
}
.wr-idx-128 {
  left: 43%;
  top: 47%;
}
.wr-idx-129 {
  left: 57%;
  top: 55%;
}
.wr-idx-130 {
  left: 46%;
  top: 57%;
}
.wr-idx-131 {
  left: 51%;
  top: 45%;
}
.wr-idx-132 {
  left: 48%;
  top: 50%;
}
.wr-idx-133 {
  left: 54%;
  top: 49%;
}
.wr-idx-134 {
  left: 44%;
  top: 53%;
}
.wr-idx-136 {
  right: 12px;
  bottom: 12px;
}
.wr-idx-138 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  margin-bottom: 20px;
}
.wr-idx-139 {
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--color-panel);
  border: 1px solid rgb(var(--accent) / .35);
  padding: 14px;
  display: flex;
  gap: 12px;
  color: var(--color-white);
}
.wr-idx-140 {
  width: 34%;
  border-radius: 8px;
  background: url('../img/target.jpg') center 46%/auto 200% no-repeat;
  border: 2px solid rgb(var(--white) / .85);
  position: relative;
  flex: none;
}
.wr-idx-141 {
  left: 46%;
  top: 44%;
}
.wr-idx-142 {
  left: 43%;
  top: 52%;
}
.wr-idx-143 {
  left: 48%;
  top: 56%;
}
.wr-idx-144 {
  left: 41%;
  top: 48%;
}
.wr-idx-145 {
  left: 45%;
  top: 60%;
}
.wr-idx-146 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.wr-idx-147 {
  font-family: 'JetBrains Mono',monospace;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent-light);
}
.wr-idx-148 {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
}
.wr-idx-149 {
  margin-top: auto;
  display: grid;
  gap: 4px;
  font-family: 'JetBrains Mono',monospace;
  font-size: 10px;
  color: rgb(var(--white) / .5);
}
.wr-idx-150 {
  margin-top: 14px;
}
.wr-idx-152 {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(56px,8vw,96px) clamp(20px,4vw,32px);
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: clamp(36px,5vw,64px);
  align-items: center;
}
.wr-idx-153 {
  margin: 0 0 20px;
}
.wr-idx-154 {
  margin: 0 0 26px;
  max-width: 34em;
}
.wr-idx-155 {
  display: grid;
  gap: 10px;
  max-width: 30em;
}
.wr-idx-156 {
  font-family: 'JetBrains Mono',monospace;
  font-size: 12px;
  color: rgb(var(--ink) / .3);
}
.wr-idx-157 {
  font-size: 16px;
  color: rgb(var(--ink) / .5);
}
.wr-idx-159 {
  position: relative;
  aspect-ratio: 9/16;
  max-width: 300px;
  justify-self: center;
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
  background: var(--color-panel);
  border: 1px solid rgb(var(--ink) / .18);
  box-shadow: 0 30px 70px -34px rgb(var(--ink) / .55);
  display: flex;
  flex-direction: column;
  color: var(--color-white);
}
.wr-idx-160 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px 6px;
  font-family: 'JetBrains Mono',monospace;
  font-size: 10px;
  color: rgb(var(--white) / .6);
  flex: none;
}
.wr-idx-161 {
  padding: 4px 18px 14px;
  flex: none;
}
.wr-idx-162 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.wr-idx-164 {
  padding: 0 18px;
  display: grid;
  gap: 10px;
  flex: 1;
  align-content: start;
}
.wr-idx-165 {
  width: 72%;
}
.wr-idx-166 {
  width: 48%;
}
.wr-idx-167 {
  width: 86%;
}
.wr-idx-168 {
  font-family: 'JetBrains Mono',monospace;
  font-size: 10px;
  color: var(--color-accent-light-hover);
}
.wr-idx-169 {
  width: 14%;
}
.wr-idx-170 {
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px dashed rgb(var(--white) / .22);
  font-family: 'JetBrains Mono',monospace;
  font-size: 10px;
  color: rgb(var(--white) / .45);
  text-align: center;
}
.wr-idx-171 {
  padding: 14px 18px 18px;
  flex: none;
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--color-panel);
}
.wr-idx-172 {
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--color-accent);
  font-size: 12px;
  font-weight: 600;
}
.wr-idx-173 {
  font-family: 'JetBrains Mono',monospace;
  font-size: 10px;
  color: rgb(var(--white) / .42);
  line-height: 1.4;
}
.wr-idx-174 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  gap: 18px;
}
.wr-idx-175 {
  margin: 0 0 52px;
}
.wr-idx-176 {
  margin: 28px 0 0;
  max-width: 44em;
}
.wr-idx-177 {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(56px,8vw,96px) clamp(20px,4vw,32px);
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: clamp(36px,5vw,64px);
  align-items: start;
}
.wr-idx-178 {
  margin: 0 0 20px;
}
.wr-idx-179 {
  margin: 0;
}
.wr-idx-180 {
  margin: 0 0 48px;
}
.wr-idx-181 {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  gap: 18px;
}
.wr-idx-182 {
  margin-top: 26px;
}
.wr-idx-184 {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(60px,8vw,104px) clamp(20px,4vw,32px);
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap: clamp(36px,5vw,64px);
  align-items: center;
}
.wr-idx-185 {
  font-family: 'JetBrains Mono',monospace;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgb(var(--white) / .7);
  margin-bottom: 20px;
}
.wr-idx-186 {
  margin: 0 0 20px;
  font-size: clamp(32px,4vw,52px);
  line-height: 1.05;
  letter-spacing: -.03em;
}
.wr-idx-187 {
  margin: 0;
  max-width: 34em;
}
.wr-idx-188 {
  background: var(--color-white);
  color: var(--color-ink);
  border-radius: 22px;
  padding: 32px;
  box-shadow: 0 30px 70px -30px rgb(var(--black) / .5);
}