/* LOGOS V40 — Executive Demo Experience */

.logos-demo-v40 {
  width: min(94vw, 78rem);
  max-width: 78rem;
  height: min(92svh, 54rem);
  max-height: 54rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 118, 82, 0.16);
  border-radius: clamp(1.4rem, 2.2vw, 2.1rem);
  color: var(--logos-ink);
  background: rgba(248, 253, 251, 0.985);
  box-shadow:
    0 2.5rem 8rem rgba(0, 43, 31, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.78) inset;
  opacity: 0;
  transform: translate3d(0, 1.2rem, 0) scale(.985);
  transition:
    opacity 260ms var(--logos-ease),
    transform 420ms var(--logos-ease);
}

.logos-demo-v40[open] {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.logos-demo-v40::backdrop {
  background:
    radial-gradient(circle at 30% 35%, rgba(0, 201, 133, .12), transparent 34%),
    rgba(2, 25, 18, .46);
  backdrop-filter: blur(14px) saturate(.86);
}

.logos-demo-v40__shell {
  display: grid;
  grid-template-columns: minmax(18rem, .82fr) minmax(0, 1.18fr);
  width: 100%;
  height: 100%;
  min-height: 0;
}

.logos-demo-v40__experience {
  position: relative;
  isolation: isolate;
  display: flex;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  padding: clamp(1.35rem, 2.4vw, 2rem);
  color: #eafff7;
  background:
    radial-gradient(circle at 50% 33%, rgba(34, 255, 178, .17), transparent 31%),
    linear-gradient(145deg, #031f17 0%, #063d2d 57%, #006348 100%);
}

.logos-demo-v40__experience::before,
.logos-demo-v40__experience::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.logos-demo-v40__experience::before {
  inset: 1rem;
  border: 1px solid rgba(135, 255, 211, .12);
  border-radius: 1.45rem;
}

.logos-demo-v40__experience::after {
  right: -5rem;
  bottom: -5rem;
  width: 14rem;
  height: 14rem;
  border: 1px solid rgba(115, 255, 204, .12);
  border-radius: 50%;
  box-shadow:
    0 0 0 2.5rem rgba(115, 255, 204, .025),
    0 0 0 5rem rgba(115, 255, 204, .018);
}

.logos-demo-v40__experience-grid {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .16;
  background-image:
    linear-gradient(rgba(146, 255, 216, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(146, 255, 216, .13) 1px, transparent 1px);
  background-size: 2.8rem 2.8rem;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}

.logos-demo-v40__experience-glow {
  position: absolute;
  z-index: -1;
  top: 23%;
  left: 50%;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  background: rgba(0, 224, 146, .18);
  filter: blur(4.5rem);
  transform: translateX(-50%);
}

.logos-demo-v40__brandline {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.logos-demo-v40__brandmark {
  display: grid;
  width: 2.45rem;
  height: 2.45rem;
  place-items: center;
  border: 1px solid rgba(161, 255, 222, .25);
  border-radius: .8rem;
  color: #a8ffda;
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 0 1.6rem rgba(0, 220, 144, .08);
  font-family: var(--logos-font-en);
  font-size: 1.45rem;
}

.logos-demo-v40__brandline > span:last-child {
  display: grid;
  gap: .12rem;
}

.logos-demo-v40__brandline strong,
.logos-demo-v40__brandline small {
  font-family: var(--logos-font-en);
  letter-spacing: .13em;
}

.logos-demo-v40__brandline strong {
  font-size: .68rem;
  font-weight: 900;
}

.logos-demo-v40__brandline small {
  color: rgba(198, 255, 233, .55);
  font-size: .42rem;
  font-weight: 800;
}

.logos-demo-v40__visual {
  position: relative;
  display: grid;
  width: min(92%, 25rem);
  aspect-ratio: 1;
  margin: clamp(.6rem, 1.6vh, 1.1rem) auto 0;
  place-items: center;
}

.logos-demo-v40__visual img {
  position: relative;
  z-index: 4;
  display: block;
  width: 68%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 1.4rem 2.4rem rgba(0, 238, 157, .2));
}

.logos-demo-v40__orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(150, 255, 217, .18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.logos-demo-v40__orbit--one { width: 95%; aspect-ratio: 1.75; }
.logos-demo-v40__orbit--two { width: 73%; aspect-ratio: 1.65; border-style: dashed; }
.logos-demo-v40__orbit--three { width: 48%; aspect-ratio: 1.55; }

.logos-demo-v40__node {
  position: absolute;
  z-index: 3;
  width: .48rem;
  height: .48rem;
  border: 2px solid #84ffd1;
  border-radius: 50%;
  background: #0b7556;
  box-shadow: 0 0 1rem rgba(73, 255, 190, .5);
}

.logos-demo-v40__node--one { top: 32%; left: 9%; }
.logos-demo-v40__node--two { right: 14%; bottom: 31%; }
.logos-demo-v40__node--three { right: 26%; top: 19%; }

.logos-demo-v40__module-card {
  display: grid;
  width: min(100%, 24rem);
  margin: -.25rem auto 0;
  padding: .95rem 1rem;
  gap: .18rem;
  border: 1px solid rgba(155, 255, 219, .16);
  border-radius: 1rem;
  background: rgba(255, 255, 255, .055);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  text-align: right;
  backdrop-filter: blur(10px);
}

.logos-demo-v40__module-kicker,
.logos-demo-v40__module-card > span:last-child {
  font-family: var(--logos-font-en);
  letter-spacing: .13em;
}

.logos-demo-v40__module-kicker {
  color: #67eab8;
  font-size: .48rem;
  font-weight: 900;
}

.logos-demo-v40__module-card strong {
  margin-top: .16rem;
  color: #fff;
  font-size: 1.08rem;
  font-weight: 900;
}

.logos-demo-v40__module-card > span:last-child {
  color: rgba(211, 255, 238, .47);
  font-size: .46rem;
  font-weight: 800;
}

.logos-demo-v40__journey {
  display: grid;
  margin: auto 0 0;
  padding: 0;
  gap: .5rem;
  list-style: none;
}

.logos-demo-v40__journey li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: center;
  gap: .65rem;
  padding: .52rem .6rem;
  border-radius: .85rem;
  background: rgba(255, 255, 255, .035);
}

.logos-demo-v40__journey li > span {
  display: grid;
  width: 1.85rem;
  height: 1.85rem;
  place-items: center;
  border: 1px solid rgba(145, 255, 215, .18);
  border-radius: .6rem;
  color: #72efbd;
  font-family: var(--logos-font-en);
  font-size: .48rem;
  font-weight: 900;
}

.logos-demo-v40__journey div {
  display: grid;
  gap: .08rem;
}

.logos-demo-v40__journey strong { font-size: .67rem; font-weight: 850; }
.logos-demo-v40__journey small { color: rgba(220, 255, 242, .5); font-size: .56rem; }

.logos-demo-v40__privacy {
  margin: .75rem 0 0;
  color: rgba(213, 255, 239, .44);
  font-size: .53rem;
  line-height: 1.7;
}

.logos-demo-v40__content {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  flex-direction: column;
  padding: clamp(1.3rem, 2.8vw, 2.35rem);
  background:
    radial-gradient(circle at 100% 0, rgba(0, 201, 133, .075), transparent 31%),
    rgba(249, 253, 251, .98);
}

.logos-demo-v40__close {
  position: absolute;
  z-index: 8;
  top: 1rem;
  left: 1rem;
  display: grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  border: 1px solid rgba(0, 95, 67, .12);
  border-radius: 50%;
  color: var(--logos-ink-3);
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 .6rem 1.7rem rgba(0, 58, 41, .07);
  transition: color 180ms ease, transform 180ms ease, background 180ms ease;
}

.logos-demo-v40__close:hover {
  color: var(--logos-deep);
  background: #fff;
  transform: rotate(6deg);
}

.logos-demo-v40__close svg { width: 1.15rem; height: 1.15rem; }

.logos-demo-v40__header {
  padding-left: 3rem;
}

.logos-demo-v40__header-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logos-demo-v40__eyebrow,
.logos-demo-v40__step-label {
  font-family: var(--logos-font-en);
  font-size: .51rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.logos-demo-v40__eyebrow { color: var(--logos-mint); }
.logos-demo-v40__step-label { color: var(--logos-ink-muted); letter-spacing: 0; }

.logos-demo-v40__header h2 {
  max-width: 38rem;
  margin: .55rem 0 0;
  color: var(--logos-ink);
  font-size: clamp(1.55rem, 2.35vw, 2.45rem);
  font-weight: 950;
  letter-spacing: -.045em;
  line-height: 1.35;
}

.logos-demo-v40__header p {
  max-width: 37rem;
  margin: .55rem 0 0;
  color: var(--logos-ink-3);
  font-size: .76rem;
  line-height: 1.9;
}

.logos-demo-v40__progress {
  position: relative;
  width: 100%;
  height: .22rem;
  margin-top: 1rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 95, 67, .08);
}

.logos-demo-v40__progress > span {
  display: block;
  width: 50%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #007e5d, #00d28d);
  box-shadow: 0 0 1rem rgba(0, 201, 133, .3);
  transition: width 360ms var(--logos-ease);
}

.logos-demo-v40__form {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  margin-top: 1.15rem;
}

.logos-demo-v40__step {
  min-height: 0;
  opacity: 0;
  transform: translate3d(1rem, 0, 0);
  transition: opacity 240ms ease, transform 360ms var(--logos-ease);
}

.logos-demo-v40__step.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.logos-demo-v40__step-heading {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: .9rem;
}

.logos-demo-v40__step-heading > span {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(0, 201, 133, .18);
  border-radius: .7rem;
  color: var(--logos-success);
  background: var(--logos-success-soft);
  font-family: var(--logos-font-en);
  font-size: .56rem;
  font-weight: 900;
}

.logos-demo-v40__step-heading div { display: grid; gap: .08rem; }
.logos-demo-v40__step-heading h3 { margin: 0; color: var(--logos-ink-2); font-size: .87rem; font-weight: 900; }
.logos-demo-v40__step-heading p { margin: 0; color: var(--logos-ink-muted); font-size: .63rem; }

.logos-demo-v40 .logos-demo-form__grid {
  gap: .78rem;
}

.logos-demo-v40 .logos-form-field {
  gap: .32rem;
}

.logos-demo-v40 .logos-form-field label {
  padding-inline: .1rem;
  color: var(--logos-ink-2);
  font-size: .66rem;
  font-weight: 800;
}

.logos-demo-v40 .logos-form-field :is(input, select, textarea) {
  min-height: 3.15rem;
  border-color: rgba(0, 95, 67, .12);
  border-radius: .9rem;
  background: rgba(255, 255, 255, .82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 .45rem 1.2rem rgba(0, 65, 46, .035);
  font-family: var(--logos-font-fa);
  font-size: .75rem;
}

.logos-demo-v40 .logos-form-field textarea {
  min-height: 5.7rem;
  resize: vertical;
}

.logos-demo-v40 .logos-form-field :is(input, select, textarea):focus {
  border-color: rgba(0, 201, 133, .65);
  box-shadow: 0 0 0 .23rem rgba(0, 201, 133, .1), 0 .75rem 1.7rem rgba(0, 86, 60, .055);
}

.logos-demo-v40 .logos-form-field__error {
  min-height: .72rem;
  font-size: .55rem;
}

.logos-demo-v40 .logos-form-field.has-error :is(input, select, textarea),
.logos-demo-v40 .logos-form-field :is(input, select, textarea).is-invalid {
  border-color: rgba(214, 60, 85, .56);
  background: rgba(255, 246, 247, .92);
}

.logos-demo-v40 .logos-demo-form__consent {
  margin-top: .55rem;
  padding: .65rem .75rem;
  border: 1px solid rgba(0, 95, 67, .08);
  border-radius: .85rem;
  background: rgba(239, 250, 245, .72);
}

.logos-demo-v40__actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .65rem;
  margin-top: auto;
  padding-top: .85rem;
}

.logos-demo-v40__next,
.logos-demo-v40__submit,
.logos-demo-v40__success-close {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .72rem 1.15rem;
  border: 0;
  border-radius: .95rem;
  color: #fff;
  background: linear-gradient(105deg, #005b43, #00c883);
  box-shadow: 0 .8rem 2rem rgba(0, 143, 95, .2), inset 0 1px 0 rgba(255, 255, 255, .18);
  font-family: var(--logos-font-fa);
  font-size: .72rem;
  font-weight: 850;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.logos-demo-v40__next:hover,
.logos-demo-v40__submit:hover,
.logos-demo-v40__success-close:hover {
  transform: translateY(-2px);
  box-shadow: 0 1rem 2.4rem rgba(0, 143, 95, .26), inset 0 1px 0 rgba(255, 255, 255, .2);
  filter: saturate(1.06);
}

.logos-demo-v40__next svg,
.logos-demo-v40__submit svg,
.logos-demo-v40__back svg {
  width: 1.05rem;
  height: 1.05rem;
}

.logos-demo-v40__back {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  gap: .45rem;
  padding: .7rem 1rem;
  border: 1px solid rgba(0, 95, 67, .13);
  border-radius: .95rem;
  color: var(--logos-ink-3);
  background: rgba(255, 255, 255, .68);
  font-family: var(--logos-font-fa);
  font-size: .68rem;
  font-weight: 800;
}

.logos-demo-v40__submit[hidden],
.logos-demo-v40__next[hidden],
.logos-demo-v40__back[hidden] {
  display: none !important;
}

.logos-demo-v40__submit:disabled {
  cursor: wait;
  filter: grayscale(.25);
  opacity: .72;
}

.logos-demo-v40 .logos-button__loader {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

.logos-demo-v40 .logos-demo-form__global-error {
  margin: 0 0 .75rem;
}

.logos-demo-v40__success {
  min-height: 0;
  flex: 1;
  padding: 2rem;
}

.logos-demo-v40__success-orbit {
  position: relative;
  display: grid;
  width: 6.5rem;
  height: 6.5rem;
  place-items: center;
  border: 1px solid rgba(0, 201, 133, .17);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 201, 133, .12), transparent 67%);
}

.logos-demo-v40__success-orbit::before,
.logos-demo-v40__success-orbit span {
  position: absolute;
  content: "";
  border: 1px solid rgba(0, 201, 133, .18);
  border-radius: 50%;
}

.logos-demo-v40__success-orbit::before { width: 4.8rem; height: 2.8rem; transform: rotate(30deg); }
.logos-demo-v40__success-orbit span { width: 4.8rem; height: 2.8rem; transform: rotate(-30deg); }
.logos-demo-v40__success-orbit svg { position: relative; z-index: 2; width: 2.3rem; height: 2.3rem; color: var(--logos-success); }

.logos-demo-v40__success h2 { font-size: clamp(1.7rem, 2.5vw, 2.35rem); }
.logos-demo-v40__success-close { margin-top: 1.25rem; }

@media (max-width: 980px) {
  .logos-demo-v40 {
    width: min(95vw, 46rem);
    height: min(94svh, 56rem);
  }

  .logos-demo-v40__shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .logos-demo-v40__experience {
    min-height: 12rem;
    padding: 1rem 1.2rem;
  }

  .logos-demo-v40__experience::before { inset: .65rem; }
  .logos-demo-v40__visual { position: absolute; top: .4rem; left: 50%; width: 12rem; margin: 0; transform: translateX(-50%); }
  .logos-demo-v40__visual img { width: 60%; }
  .logos-demo-v40__module-card { position: relative; z-index: 5; width: min(55%, 18rem); margin: auto 0 0 auto; }
  .logos-demo-v40__journey { display: none; }
  .logos-demo-v40__privacy { display: none; }
  .logos-demo-v40__brandline { position: relative; z-index: 5; }

  .logos-demo-v40__content {
    overflow-y: auto;
    padding: 1.25rem;
  }
}

@media (max-width: 640px) {
  .logos-demo-v40 {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .logos-demo-v40__experience {
    min-height: 10.2rem;
  }

  .logos-demo-v40__visual { width: 10.5rem; }
  .logos-demo-v40__module-card { width: 58%; padding: .7rem .8rem; }
  .logos-demo-v40__module-card strong { font-size: .88rem; }

  .logos-demo-v40__content { padding: 1.05rem; }
  .logos-demo-v40__close { top: .75rem; left: .75rem; }
  .logos-demo-v40__header { padding-left: 2.7rem; }
  .logos-demo-v40__header-meta { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .logos-demo-v40__header h2 { font-size: 1.48rem; }
  .logos-demo-v40__header p { font-size: .7rem; }

  .logos-demo-v40 .logos-demo-form__grid { grid-template-columns: 1fr; }
  .logos-demo-v40__actions { position: sticky; z-index: 4; bottom: -.05rem; margin-right: -.2rem; margin-left: -.2rem; padding: .8rem .2rem .2rem; background: linear-gradient(to top, #f9fdfb 72%, transparent); }
  .logos-demo-v40__next,
  .logos-demo-v40__submit { flex: 1; }
}

html[data-logos-performance="low"] .logos-demo-v40::backdrop,
html[data-logos-performance="low"] .logos-demo-v40__module-card {
  backdrop-filter: none;
}

html[data-logos-performance="low"] .logos-demo-v40__experience-glow {
  filter: blur(3rem);
  opacity: .62;
}

@media (prefers-reduced-motion: reduce) {
  .logos-demo-v40,
  .logos-demo-v40__step,
  .logos-demo-v40__progress > span,
  .logos-demo-v40__next,
  .logos-demo-v40__submit,
  .logos-demo-v40__success-close {
    transition-duration: 1ms !important;
  }
}