.logo-opening {
  --assembly-progress: 1;
  --opening-height: max(680px, calc(100svh - 92px));
  background: #0b1915;
  color: #f0fff4;
  position: relative;
}
  .logo-opening.is-scroll-driven {
    height: calc(var(--assembly-pin-height, var(--opening-height)) + 82svh);
  }
.logo-opening-pin { position: relative; }
.is-scroll-driven .logo-opening-pin { position: sticky; top: 0; }
.logo-opening-inner {
  min-height: var(--opening-height);
  padding-block: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}
.logo-opening-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 32px;
  flex: 1;
}
.logo-opening-copy { position: relative; z-index: 1; }
.logo-opening-copy h1 { font-size: clamp(4rem, 7.4vw, 7.2rem); line-height: .98; letter-spacing: -.065em; }
.logo-opening-copy h1 em { color: var(--lime); }
.logo-opening-tagline { color: #f0fff4; font-size: clamp(1.25rem, 2vw, 1.7rem); margin-top: 24px; letter-spacing: -.025em; }
.logo-opening-description { color: #b2c6ba; font-size: 1.05rem; max-width: 430px; margin-top: 20px; }
.logo-opening-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 26px; margin-top: 30px; }
.logo-opening-actions .btn { font-size: .875rem; gap: 20px; }
.logo-opening-actions .text-link { color: #d3e0d7; font-size: .875rem; border: 0; gap: 12px; }
.logo-assembly-visual { position: relative; min-width: 0; display: grid; place-items: center; isolation: isolate; }
.logo-assembly-grid {
  position: absolute; inset: -8% -5%; z-index: -2;
  background-image: linear-gradient(#b8fdb110 1px, transparent 1px), linear-gradient(90deg, #b8fdb110 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse, #000 10%, transparent 70%);
}
.logo-assembly-aura {
  position: absolute; inset: 3% -10%; z-index: -1;
  background: radial-gradient(ellipse, #a9ff4f26, #55b9680b 45%, transparent 70%);
  opacity: calc(.15 + var(--assembly-progress) * .85);
  transform: scale(calc(.7 + var(--assembly-progress) * .3));
}
.logo-assembly-orbit { position: absolute; inset: 3% -2% 14%; pointer-events: none; }
.logo-assembly-orbit::before {
  content: ""; position: absolute; inset: 8% 9%; border: 1px solid #a9ff4f22; border-radius: 50%;
  opacity: calc(.15 + var(--assembly-progress) * .55);
  transform: scale(calc(.86 + var(--assembly-progress) * .14));
}
.logo-signal {
  position: absolute; display: flex; align-items: center; gap: 7px;
  padding: 6px 9px; border: 1px solid #a9ff4f35; border-radius: 999px;
  background: #0b1915d9; color: #d9e9de; font-size: .625rem; font-weight: 700;
  line-height: 1; letter-spacing: .1em; text-transform: uppercase;
  opacity: calc(.35 + var(--assembly-progress) * .65);
  box-shadow: 0 0 24px #a9ff4f0d;
}
.logo-signal i { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 9px var(--lime); }
.logo-signal-sales { top: 5%; left: 1%; transform: translate(calc((1 - var(--assembly-progress)) * 14px), calc((1 - var(--assembly-progress)) * -12px)); }
.logo-signal-stock { top: 3%; right: 0; transform: translate(calc((1 - var(--assembly-progress)) * -14px), calc((1 - var(--assembly-progress)) * -14px)); }
.logo-signal-payments { bottom: 0; left: -2%; transform: translate(calc((1 - var(--assembly-progress)) * 14px), calc((1 - var(--assembly-progress)) * 14px)); }
.logo-signal-people { right: -1%; bottom: 2%; transform: translate(calc((1 - var(--assembly-progress)) * -14px), calc((1 - var(--assembly-progress)) * 14px)); }
.logo-assembly-symbol { display: block; width: 100%; overflow: visible; color: var(--lime); }
.logo-assembly-part { transform-box: fill-box; transform-origin: center; }
.is-scroll-driven .logo-assembly-part { will-change: transform; }
.logo-assembly-t { transform: translate(calc((1 - var(--assembly-progress)) * 25px), calc((1 - var(--assembly-progress)) * -26px)) rotate(calc((1 - var(--assembly-progress)) * 18deg)); }
.logo-assembly-b { transform: translate(calc((1 - var(--assembly-progress)) * -27px), calc((1 - var(--assembly-progress)) * 23px)) rotate(calc((1 - var(--assembly-progress)) * -14deg)); }
.logo-assembly-ghost { opacity: calc((1 - var(--assembly-progress)) * .2); }
.logo-data-particles,
.logo-flow-streams,
.logo-data-terminals {
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.logo-data-particles { filter: drop-shadow(0 0 1.5px #f0fff4) drop-shadow(0 0 4px #a9ff4f); }
.logo-flow-streams { filter: drop-shadow(0 0 2px #f0fff4) drop-shadow(0 0 6px #a9ff4f); }
.logo-data-particles circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: logo-particle-flow 1.8s ease-in-out infinite paused;
}
.logo-data-particles circle:nth-child(4n + 1) { animation-delay: -.35s; animation-duration: 1.55s; }
.logo-data-particles circle:nth-child(4n + 2) { animation-delay: -.9s; animation-duration: 2.15s; }
.logo-data-particles circle:nth-child(4n + 3) { animation-delay: -1.35s; animation-duration: 2.55s; }
.logo-data-particles circle:nth-child(5n) { animation-delay: -.65s; animation-duration: 1.35s; }
.logo-data-terminals circle {
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 4px #f0fff4) drop-shadow(0 0 10px #a9ff4f);
  animation: logo-data-arrival 1.25s ease-out infinite paused;
}
.logo-data-terminals circle:last-child { animation-delay: .45s; }
.is-assembled .logo-data-particles,
.is-assembled .logo-flow-streams,
.is-assembled .logo-data-terminals { opacity: 1; }
.is-assembled .logo-data-particles circle,
.is-assembled .logo-data-terminals circle { animation-play-state: running; }
.is-assembled .logo-signal i { animation: logo-signal-pulse 1.6s ease-in-out infinite; }
@keyframes logo-particle-flow {
  0% { opacity: .14; transform: translate(-2px, 1px) scale(.55); }
  32% { opacity: .95; transform: translate(0, 0) scale(1); }
  72% { opacity: .62; }
  100% { opacity: .08; transform: translate(3px, -1.5px) scale(.72); }
}
@keyframes logo-data-arrival {
  0%, 35% { opacity: .35; transform: scale(.65); }
  60% { opacity: 1; transform: scale(1.8); }
  100% { opacity: .35; transform: scale(.65); }
}
@keyframes logo-signal-pulse {
  0%, 100% { opacity: .55; transform: scale(.75); }
  45% { opacity: 1; transform: scale(1.45); }
}
.logo-assembly-wordmark { font-size: clamp(2rem, 3.6vw, 3.4rem); font-weight: 800; letter-spacing: -.075em; line-height: 1; margin-top: -10%; opacity: calc(.35 + var(--assembly-progress) * .65); }
.logo-opening-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; color: #9db6a6; font-size: .75rem; letter-spacing: .08em; }
.logo-assembly-scroll { display: none; align-items: center; gap: 20px; letter-spacing: 0; font-size: .8125rem; }
.is-scroll-driven .logo-assembly-scroll { display: flex; }
.logo-assembly-track { width: 84px; height: 2px; background: #f0fff425; overflow: hidden; }
.logo-assembly-track i { display: block; width: 100%; height: 100%; background: var(--lime); transform: scaleX(var(--assembly-progress)); transform-origin: left; }
@media (max-width: 1000px) {
  .logo-opening-copy h1 { font-size: clamp(3.7rem, 7.5vw, 6rem); }
  .logo-opening-grid { gap: 12px; }
}
@media (max-width: 800px) {
  .logo-opening { --opening-height: max(790px, calc(100svh - 78px)); overflow: clip; }
  .logo-opening-inner { padding-block: 16px 24px; gap: 16px; }
  .logo-opening-grid { grid-template-columns: 1fr; gap: 20px; }
  .logo-assembly-visual { grid-row: 1; width: min(390px, calc(100vw - 16px)); margin-inline: auto; }
  .logo-assembly-symbol { max-height: 270px; }
  .logo-assembly-wordmark { font-size: 1.85rem; margin-top: -12%; }
  .logo-assembly-grid { inset: -9% -12%; background-size: 32px 32px; }
  .logo-assembly-aura { inset: -3% -14%; }
  .logo-assembly-orbit { inset: 1% 1% 13%; }
  .logo-signal { font-size: .5625rem; padding: 6px 8px; }
  .logo-opening-copy h1 { font-size: clamp(2.8rem, 9vw, 4rem); }
  .logo-opening-tagline { font-size: 1.15rem; margin-top: 12px; }
  .logo-opening-description { font-size: 1rem; margin-top: 14px; max-width: 540px; }
  .logo-opening-actions { margin-top: 22px; gap: 16px; }
  .logo-opening-actions .btn { min-height: 48px; padding: 12px 16px; font-size: .8125rem; }
  .logo-opening-bottom > span { display: none; }
  .logo-opening-bottom { justify-content: space-between; min-height: 20px; }
  .logo-assembly-scroll { justify-content: space-between; width: 100%; }
}
@media (max-width: 430px) and (max-height: 780px) {
  .logo-opening { --opening-height: 760px; }
  .logo-assembly-visual { width: min(350px, calc(100vw - 16px)); }
  .logo-assembly-symbol { max-height: 238px; }
  .logo-opening-description { font-size: .9375rem; }
}
@media (max-height: 650px) and (min-width: 801px) {
  .logo-opening { --opening-height: 630px; }
  .logo-opening-copy h1 { font-size: 4.5rem; }
  .logo-assembly-visual { max-width: 480px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce), print {
  .logo-opening.is-scroll-driven { height: auto; }
  .logo-opening-pin { position: relative !important; }
  .logo-assembly-part { transform: none; will-change: auto; }
  .logo-assembly-ghost, .logo-assembly-scroll { display: none !important; }
  .logo-assembly-wordmark, .logo-assembly-aura, .logo-signal { opacity: 1; }
  .logo-signal { transform: none; }
  .logo-data-particles, .logo-data-terminals { opacity: .65; }
  .logo-flow-streams { display: none; }
  .logo-data-particles circle, .logo-data-terminals circle, .logo-signal i { animation: none !important; }
}