/* Rezkita homepage — support styles.
 *
 * Deliberately small. Everything the design can express as an Elementor panel
 * setting lives in the page data, not here: colour, type, spacing, borders,
 * hover states and responsive columns all stay editable in the editor.
 *
 * What is left is the handful of things Elementor Free has no control for. */

/* --- Sticky header ------------------------------------------------------- */
/* Elementor's sticky option is a Pro feature. */
.rz-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
}

/* --- Fibre-strand motif -------------------------------------------------- */
/* The three strands and connector rings from the logo, at low opacity on dark
   panels. It is literally what the company installs, so it reads as identity
   rather than decoration. */
.rz-strands { position: relative; }

.rz-strands::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../img/strands.svg");
  background-size: cover;
  background-position: center bottom;
  opacity: .5;
}

.rz-strands > * { position: relative; z-index: 1; }

/* --- Capability marquee -------------------------------------------------- */
/* The track holds two identical halves, so a -50% translate loops seamlessly.
   The extra -16px accounts for half the flex gap at the seam. */
.rz-marquee {
  overflow: hidden;
  border-top: 1px solid rgba(7, 30, 90, .12);
  border-bottom: 1px solid rgba(7, 30, 90, .12);
}

.rz-marquee-track {
  width: max-content !important;
  flex-wrap: nowrap !important;
  animation: rz-marquee 42s linear infinite;
}

.rz-marquee:hover .rz-marquee-track { animation-play-state: paused; }

.rz-marquee-item .elementor-heading-title {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.rz-marquee-item .elementor-heading-title::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #2864F6;
  margin-left: 32px;
}

@keyframes rz-marquee {
  to { transform: translateX(calc(-50% - 16px)); }
}

/* --- Lifecycle accordion ------------------------------------------------- */
/* Sticky photo alongside the phases. */
@media (min-width: 961px) {
  .rz-sticky {
    position: sticky;
    top: 100px;
    align-self: start;
  }
}

/* Hairlines only — the accordion should read as a rule between rows, not a box. */
.elementor-accordion .elementor-tab-title { border: none !important; }

.elementor-accordion .elementor-accordion-item {
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
}

.elementor-accordion .elementor-accordion-item:first-child {
  border-top: 1px solid #E4E9F2 !important;
}

.elementor-accordion .elementor-tab-content { border: none !important; }

.elementor-accordion .elementor-accordion-icon i { font-size: 14px; font-weight: 400; }
.elementor-accordion .elementor-accordion-icon svg { width: 14px; height: 14px; }

/* The mono phase number inside each accordion title. */
.rz-acc-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .1em;
  color: #53B6E9;
  margin-right: 16px;
}

/* --- Navigation ---------------------------------------------------------- */
/* Elementor Free has no hamburger widget, so the nav wraps under the logo on
   small screens. Centre it there rather than leaving a ragged second row. */
@media (max-width: 960px) {
  .rz-nav .elementor-inline-items { justify-content: center; }
}

/* --- Placeholders -------------------------------------------------------- */
/* Visible on purpose until the client supplies artwork and real figures. */
.rz-placeholder { text-align: center; }

/* --- Motion preferences -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rz-marquee-track { animation: none; }
  .rz-marquee { overflow-x: auto; }
}