@font-face {
  font-family:"Moon Geist";
  src:url("assets/moon9/Geist-Variable.woff2") format("woff2");
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}

.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  padding:0;
  margin:-1px;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.project-panel.moon-panel {
  min-height:0;
  padding:0;
  place-items:normal;
}

.project-panel.moon-panel:not([hidden]) {
  display:block;
}

.moon-demo {
  position:relative;
  width:100%;
  height:590px;
  overflow:hidden;
  isolation:isolate;
  container-type:inline-size;
  font-family:"Moon Geist","Helvetica Neue",sans-serif;
  background:#050710;
  color:#edf1fc;
}

.moon-stage {
  position:absolute;
  z-index:1;
  inset:0 0 54px;
  overflow:hidden;
  perspective:1400px;
}

.moon-ambient {
  position:absolute;
  z-index:0;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,#142044 0%,#0a1022 40%,#050710 78%);
}

.moon-ambient::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgb(3 5 12 / 55%),transparent 38%,transparent 65%,rgb(3 5 12 / 30%));
}

.moon-tech-grid {
  position:absolute;
  inset:-80px;
  background-image:linear-gradient(rgb(130 155 255 / 5%) 1px,transparent 1px),linear-gradient(90deg,rgb(130 155 255 / 5%) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse at center,#000,transparent 78%);
  animation:moon-grid-drift 65s linear infinite;
}

.moon-starfield {
  position:absolute;
  inset:-30px;
  background-image:radial-gradient(circle at 13% 18%,#b5c8f2 0 1px,transparent 1.5px),radial-gradient(circle at 42% 8%,#7b9bdf 0 1px,transparent 1.5px),radial-gradient(circle at 71% 26%,#d9e3ff 0 1px,transparent 1.5px),radial-gradient(circle at 88% 70%,#9db6ed 0 1px,transparent 1.5px),radial-gradient(circle at 6% 79%,#8eaddb 0 .6px,transparent 1.2px),radial-gradient(circle at 36% 66%,#c5d6f9 0 .7px,transparent 1.4px),radial-gradient(circle at 56% 89%,#a5c1f9 0 .6px,transparent 1.3px),radial-gradient(circle at 92% 12%,#b7c9ef 0 .8px,transparent 1.4px);
  background-size:680px 470px;
  opacity:.6;
  animation:moon-star-drift 55s ease-in-out infinite alternate;
}

.moon-orbital-field {
  position:absolute;
  top:45%;
  left:74%;
  width:620px;
  height:620px;
  translate:-50% -50%;
  mix-blend-mode:screen;
  transition:left 1.5s cubic-bezier(.65,0,.25,1);
}

.moon-demo:not([data-phase="intro"]) .moon-orbital-field {
  left:50%;
}

.moon-lunar-halo {
  position:absolute;
  inset:-12%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgb(57 89 233 / 19%),rgb(39 73 245 / 6%) 42%,transparent 67%);
  animation:moon-glow-drift 18s ease-in-out infinite alternate;
}

.moon-lunar-disc {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  mix-blend-mode:screen;
  opacity:.4;
  filter:contrast(1.12) brightness(.85);
  animation:moon-lunar-float 24s ease-in-out infinite alternate;
}

.moon-orbit {
  position:absolute;
  inset:5%;
  border:1px solid rgb(135 160 255 / 17%);
  border-radius:50%;
  animation:moon-orbit-spin 42s linear infinite;
}

.moon-orbit::before {
  content:"";
  position:absolute;
  top:50%;
  left:-3px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#9ab1ff;
  box-shadow:0 0 13px #567dff;
}

.moon-orbit-one { border-top-color:rgb(128 154 255 / 50%); border-right-color:transparent; }
.moon-orbit-two { inset:0; rotate:28deg; scale:1 .46; animation-duration:58s; animation-direction:reverse; }
.moon-orbit-three { inset:15%; border-style:dashed; opacity:.55; animation-duration:90s; }
.moon-orbit-three::before { width:3px; height:3px; }

.moon-tech-lines { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:rgb(132 160 255 / 18%); stroke-width:1; }

@keyframes moon-grid-drift {
  from { transform:translate3d(0,0,0); }
  to { transform:translate3d(80px,80px,0); }
}

@keyframes moon-glow-drift {
  from { transform:translate3d(-18px,12px,0) scale(.95); }
  to { transform:translate3d(18px,-12px,0) scale(1.08); }
}

@keyframes moon-star-drift {
  from { transform:translate3d(-6px,0,0); }
  to { transform:translate3d(12px,-15px,0); }
}

@keyframes moon-lunar-float {
  from { transform:translate3d(0,8px,0) rotate(-5deg); }
  to { transform:translate3d(0,-8px,0) rotate(4deg); }
}

@keyframes moon-orbit-spin {
  to { transform:rotate(360deg); }
}

.moon-demo[data-playing="false"] .moon-ambient *,
.moon-demo[data-playing="false"] .moon-ambient *::before {
  animation-play-state:paused;
}

.moon-copy {
  position:absolute;
  top:50%;
  left:68%;
  width:27%;
  translate:0 -50%;
  transform:translateY(40px);
  opacity:0;
  pointer-events:none;
  transition:opacity .6s ease,transform .8s cubic-bezier(.22,.68,0,1);
}

.moon-copy.is-active {
  opacity:1;
  transform:translateY(0);
}

.moon-copy.is-past {
  opacity:0;
  transform:translateY(-40px);
}

.moon-copy h3 {
  margin:0 0 20px;
  color:#f3f6ff;
  font-size:clamp(28px,3.3cqw,40px);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.055em;
  text-align:left;
}

.moon-copy p {
  max-width:360px;
  margin:0;
  color:#b0bbd2;
  font-size:17px;
  line-height:1.65;
  letter-spacing:-.25px;
}

.moon-copy[data-moon-copy="intro"] {
  left:9%;
  width:41%;
}

.moon-copy[data-moon-copy="intro"] h3 {
  margin-bottom:16px;
  font-size:clamp(62px,8.8cqw,100px);
  font-weight:550;
  letter-spacing:-.075em;
}

.moon-copy[data-moon-copy="intro"] p {
  max-width:340px;
  color:#b8c4dc;
  font-size:26px;
  line-height:1.4;
  letter-spacing:-.6px;
}

.moon-overview {
  position:absolute;
  top:50%;
  left:5%;
  width:27%;
  translate:0 -50%;
  transform:translateY(20px);
  opacity:0;
  visibility:hidden;
  transition:opacity .6s ease,transform .8s ease,visibility 0s .8s;
}

.moon-demo:not([data-phase="intro"]) .moon-overview {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition-delay:0s;
}

.moon-overview h3 {
  margin:0 0 20px;
  color:#f3f6ff;
  font-size:clamp(34px,4cqw,48px);
  line-height:1.1;
  font-weight:550;
  letter-spacing:-.065em;
  text-align:left;
}

.moon-overview p {
  margin:0;
  color:#aab7d0;
  font-size:15px;
  line-height:1.7;
  letter-spacing:-.15px;
}

.moon-overview p+p {
  margin-top:16px;
}

.moon-copy-label {
  display:block;
  margin-bottom:20px;
  color:#929292;
  font-size:9px;
  letter-spacing:1.5px;
  line-height:1.5;
}

.moon-phone-shadow {
  position:absolute;
  top:91%;
  left:74%;
  width:225px;
  height:24px;
  border-radius:50%;
  background:rgb(0 0 0 / 12%);
  filter:blur(14px);
  transform:translate(-50%,-50%);
  transition:left 1.5s cubic-bezier(.65,0,.25,1);
}

.moon-phone {
  --phone-scale:1;
  position:absolute;
  top:50%;
  left:74%;
  width:230px;
  height:474px;
  padding:5px;
  border:1px solid #777;
  border-radius:42px;
  background:linear-gradient(115deg,#e4e4e4,#777 16%,#f1f1f1 32%,#6c6c6c 65%,#b6b6b6);
  box-shadow:inset 0 0 0 1px #dadada,0 18px 42px rgb(0 0 0 / 55%),0 0 55px rgb(71 109 255 / 12%);
  opacity:0;
  transform-style:preserve-3d;
  transform:translate(-50%,-50%) rotateY(-24deg) scale(var(--phone-scale));
  transition:left 1.5s cubic-bezier(.65,0,.25,1),transform 1.5s cubic-bezier(.65,0,.25,1),opacity 1s ease;
}

.moon-demo[data-entered="true"] .moon-phone {
  opacity:1;
}

.moon-phone::before {
  content:"";
  position:absolute;
  inset:0;
  border:1px solid #777;
  border-radius:42px;
  background:linear-gradient(90deg,#555,#a5a5a5);
  transform:translateZ(-8px) translateX(5px);
}

.moon-demo:not([data-phase="intro"]) .moon-phone {
  left:50%;
  transform:translate(-50%,-50%) rotateY(20deg) scale(var(--phone-scale));
}

.moon-demo:not([data-phase="intro"]) .moon-phone-shadow {
  left:50%;
}

.moon-phone-button {
  position:absolute;
  left:-3px;
  width:3px;
  border:1px solid #777;
  border-radius:2px;
  background:#bababa;
}

.moon-phone-button-one { top:82px; height:20px; }
.moon-phone-button-two { top:119px; height:35px; }
.moon-phone-button-three { top:108px; left:auto; right:-3px; height:49px; }

.moon-phone-screen {
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border:5px solid #111;
  border-radius:36px;
  background:#000;
  color:#fff;
}

.moon-phone-island {
  position:absolute;
  z-index:6;
  top:9px;
  left:50%;
  width:63px;
  height:17px;
  border:1px solid #171717;
  border-radius:20px;
  background:#070707;
  transform:translateX(-50%);
}

.moon-status-bar {
  position:absolute;
  z-index:5;
  top:12px;
  right:13px;
  left:15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10px;
  font-weight:600;
  line-height:12px;
}

.moon-status-bar svg { width:43px; height:13px; }

.moon-app {
  position:absolute;
  inset:43px 0 15px;
  display:flex;
  flex-direction:column;
  transition:opacity .5s ease;
}

.moon-app svg,.moon-booking-sheet svg,.moon-whatsapp-icon svg,.moon-control svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.moon-app-header {
  position:relative;
  display:flex;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
  height:32px;
}

.moon-app-header strong { font-size:10px; font-weight:600; }
.moon-view-icon { position:absolute; left:10px; display:flex; align-items:center; gap:2px; font-size:12px; }
.moon-view-icon svg { width:16px; height:16px; }
.moon-add { position:absolute; top:3px; right:8px; display:grid; place-items:center; width:26px; height:26px; }
.moon-add svg { width:18px; height:18px; }

.moon-calendar-tabs {
  display:flex;
  flex-shrink:0;
  justify-content:center;
  gap:14px;
  height:28px;
  color:#8d8d8d;
  font-size:10px;
}

.moon-calendar-tabs span { padding:5px 0; }
.moon-calendar-tabs .is-selected { border-bottom:1.5px solid #fff; color:#fff; }
.moon-calendar-period { display:flex; flex-shrink:0; align-items:center; justify-content:space-between; height:32px; padding:0 14px; }
.moon-calendar-period strong { font-size:10px; font-weight:500; }
.moon-calendar-period>span { font-size:22px; font-weight:300; }
.moon-weekdays { display:grid; flex-shrink:0; grid-template-columns:repeat(7,minmax(0,1fr)); height:22px; padding-top:5px; text-align:center; color:#a5a5a5; font-size:8px; }

.moon-calendar-grid {
  display:grid;
  flex:1;
  min-height:0;
  grid-template-columns:repeat(7,minmax(0,1fr));
  grid-template-rows:repeat(5,minmax(0,1fr));
  border-top:1px solid #262626;
}

.moon-calendar-day { min-width:0; overflow:hidden; padding:4px 1px; border-right:1px solid #262626; border-bottom:1px solid #262626; }
.moon-calendar-day:nth-child(7n) { border-right:0; }
.moon-calendar-day.is-muted { color:#5a5a5a; }
.moon-date { display:grid; place-items:center; width:14px; height:14px; margin:0 0 3px 2px; font-size:8px; line-height:1; }
.moon-calendar-day.is-today .moon-date { border-radius:50%; background:#fff; color:#000; font-weight:700; }
.moon-mini-event { display:block; overflow:hidden; margin-top:3px; padding:2px; border-radius:3px; background:var(--event-color,#dd6b20); color:#151515; font-size:5.5px; font-weight:550; line-height:1.35; white-space:nowrap; text-overflow:ellipsis; }
.moon-new-event { opacity:0; transform:scale(.85); transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.3,1.4); }
.moon-demo:is([data-phase="booked"],[data-phase="reminder"]) .moon-new-event { opacity:1; transform:scale(1); }

.moon-app-nav { display:grid; flex-shrink:0; grid-template-columns:repeat(5,minmax(0,1fr)); height:48px; border-top:1px solid #333; }
.moon-app-nav>span { display:flex; align-items:center; flex-direction:column; justify-content:center; gap:4px; color:#7a7a7a; font-size:5.5px; }
.moon-app-nav .is-selected { color:#fff; }
.moon-app-nav svg { width:17px; height:17px; }

.moon-scene-screen {
  position:absolute;
  z-index:2;
  inset:43px 0 63px;
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:hidden;
  padding:10px 12px;
  background:#000;
  opacity:0;
  visibility:hidden;
  transform:translateY(16px);
  transition:opacity .5s ease,transform .65s ease,visibility 0s .65s;
}

.moon-scene-screen.is-active {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition-delay:0s;
}

.moon-screen-heading { display:flex; flex-shrink:0; align-items:center; justify-content:space-between; min-height:23px; }
.moon-screen-heading>strong { font-size:14px; font-weight:550; letter-spacing:-.3px; }
.moon-screen-heading>span { font-size:22px; font-weight:300; }
.moon-screen-heading>svg { width:14px; height:14px; }
.moon-scene-screen svg { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.moon-screen-period { display:flex; flex-shrink:0; align-items:center; justify-content:space-between; color:#a2a2a2; font-size:8px; }

.moon-client-stats { display:grid; flex-shrink:0; grid-template-columns:repeat(3,minmax(0,1fr)); padding:7px 0 10px; border-bottom:1px solid #292929; }
.moon-client-stats>div { display:flex; flex-direction:column; gap:5px; }
.moon-client-stats span { color:#8d8d8d; font-size:7px; }
.moon-client-stats strong { font-size:20px; line-height:1; font-weight:500; }
.moon-client-search { display:flex; flex-shrink:0; align-items:center; gap:6px; height:26px; padding:0 8px; border:1px solid #303030; border-radius:8px; color:#828282; font-size:7px; }
.moon-client-search svg { width:11px; height:11px; }
.moon-client-directory { flex:1; min-height:0; transition:opacity .5s ease; }
.moon-directory-letter { display:block; margin:5px 0 1px; color:#8d8d8d; font-size:7px; }
.moon-directory-row { position:relative; display:flex; align-items:center; gap:8px; min-height:42px; border-bottom:1px solid #202020; border-radius:6px; transition:background .4s ease; }
.moon-person-avatar { display:grid; flex-shrink:0; place-items:center; width:25px; height:25px; border-radius:50%; background:linear-gradient(140deg,#d3e5d2,#8db195); color:#173020; font-size:8px; font-weight:600; font-style:normal; }
.moon-avatar-lilac { background:linear-gradient(140deg,#e2dcf5,#b4a2d0); color:#3f2e5b; }
.moon-avatar-peach { background:linear-gradient(140deg,#f5dac7,#d5a688); color:#51311e; }
.moon-avatar-blue { background:linear-gradient(140deg,#d2dfee,#90b3d3); color:#203b56; }
.moon-directory-row>div { display:flex; flex:1; flex-direction:column; gap:4px; }
.moon-directory-row strong { font-size:9px; font-weight:500; }
.moon-directory-row>div>span { color:#888; font-size:7px; }
.moon-directory-row>span:not(.moon-touch) { color:#888; font-size:15px; }
.moon-demo[data-phase="client-detail"] .moon-client-focus { background:#171717; }
.moon-demo[data-phase="client-detail"] .moon-client-directory { opacity:.35; }

.moon-client-profile,.moon-team-agenda {
  position:absolute;
  z-index:1;
  right:0;
  bottom:-1px;
  left:0;
  padding:10px 12px 14px;
  border:1px solid #333;
  border-bottom:0;
  border-radius:18px 18px 0 0;
  background:#080808;
  box-shadow:0 -15px 25px rgb(0 0 0 / 50%);
  transform:translateY(115%);
  transition:transform .8s cubic-bezier(.22,.8,.22,1);
}

.moon-client-profile .moon-sheet-handle,.moon-team-agenda .moon-sheet-handle { display:block; margin-bottom:13px; }
.moon-demo[data-phase="client-detail"] .moon-client-profile { transform:translateY(0); }
.moon-profile-heading { display:flex; align-items:center; gap:9px; margin-bottom:13px; }
.moon-profile-heading .moon-person-avatar { width:31px; height:31px; font-size:10px; }
.moon-profile-heading>div { display:flex; flex-direction:column; gap:5px; }
.moon-profile-heading strong { font-size:11px; font-weight:500; }
.moon-profile-heading>div>span { color:#999; font-size:7px; }
.moon-profile-actions { display:flex; gap:6px; margin-bottom:15px; }
.moon-profile-actions>span { flex:1; padding:7px 4px; border:1px solid #363636; border-radius:8px; color:#d0d0d0; text-align:center; font-size:7px; }
.moon-profile-section-title { display:block; margin-bottom:10px; font-size:9px; font-weight:500; }
.moon-favorite { position:relative; display:flex; justify-content:space-between; margin-bottom:10px; padding-bottom:9px; font-size:8px; }
.moon-favorite>span:nth-child(2) { color:#aaa; font-size:7px; }
.moon-favorite::after,.moon-favorite>i { content:""; position:absolute; bottom:0; left:0; width:100%; height:3px; border-radius:3px; background:#262626; }
.moon-favorite>i { z-index:1; width:var(--favorite-width); background:#b9d9bf; transform:scaleX(0); transform-origin:left; transition:transform .8s ease .6s; }
.moon-demo[data-phase="client-detail"] .moon-favorite>i { transform:scaleX(1); }
.moon-client-profile>p { margin:13px 0 0; color:#999; font-size:7px; line-height:1.5; }
.moon-demo[data-phase="client-detail"] .moon-client-focus>.moon-touch,.moon-demo[data-phase="team-detail"] .moon-staff-focus>.moon-touch { animation:moon-tap .8s ease both; }

.moon-finance-main { flex-shrink:0; padding:3px 0; }
.moon-finance-main>span { display:block; margin-bottom:4px; color:#999; font-size:8px; }
.moon-finance-main>strong { display:block; font-size:29px; font-weight:500; letter-spacing:-1px; line-height:1.15; }
.moon-finance-main>strong>span { color:#8d8d8d; font-size:16px; letter-spacing:-.5px; }
.moon-finance-metrics { display:grid; flex-shrink:0; grid-template-columns:1fr 1fr; gap:8px; }
.moon-finance-metrics>div { display:flex; flex-direction:column; gap:6px; padding:8px; border:1px solid #2b2b2b; border-radius:9px; }
.moon-finance-metrics>div>span { display:flex; align-items:center; gap:4px; color:#999; font-size:7px; }
.moon-finance-metrics i { width:4px; height:4px; border-radius:50%; background:#b9d9bf; }
.moon-finance-metrics>div:nth-child(2) i { background:#888; }
.moon-finance-metrics strong { font-size:11px; font-weight:500; }
.moon-finance-chart { display:grid; flex:1; min-height:65px; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; margin-top:4px; }
.moon-chart-column { display:flex; min-height:0; flex-direction:column; }
.moon-chart-column>div { position:relative; flex:1; min-height:0; border-bottom:1px solid #2a2a2a; }
.moon-chart-column>span { margin-top:5px; color:#888; text-align:center; font-size:7px; }
.moon-chart-column i { position:absolute; bottom:0; left:calc(50% - 7px); width:6px; height:var(--bar-height); border-radius:3px 3px 0 0; background:#b9d9bf; transform:scaleY(0); transform-origin:bottom; transition:transform .9s cubic-bezier(.22,.8,.22,1); transition-delay:calc(var(--bar-index) * .08s); }
.moon-chart-column i:nth-child(2) { left:calc(50% + 1px); background:#626262; }
.moon-demo[data-phase="finance"] .moon-chart-column i { transform:scaleY(1); }
.moon-finance-movement { display:grid; flex-shrink:0; gap:7px; padding-top:5px; }
.moon-finance-movement>span { margin-bottom:1px; color:#999; font-size:7px; }
.moon-finance-movement>div { display:flex; justify-content:space-between; font-size:7px; }
.moon-finance-movement>div>strong { color:#b9d9bf; font-weight:400; }
.moon-finance-movement>div:last-child>strong { color:#b1b1b1; }

.moon-team-summary { display:flex; flex-shrink:0; justify-content:space-between; padding:8px 0; border-bottom:1px solid #292929; color:#aaa; font-size:8px; }
.moon-staff-list { display:grid; gap:7px; }
.moon-staff-card { position:relative; display:flex; align-items:center; gap:8px; min-height:49px; padding:7px; border:1px solid #262626; border-radius:10px; transition:background .4s ease,border-color .4s ease; }
.moon-staff-card>div { display:flex; flex:1; flex-direction:column; gap:5px; }
.moon-staff-card>div>strong { font-size:8px; font-weight:500; }
.moon-staff-card>div>span { color:#999; font-size:7px; }
.moon-staff-card>strong { color:#cce5d1; font-size:10px; font-weight:500; }
.moon-team-total { display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:auto; padding:10px 0 2px; border-top:1px solid #292929; }
.moon-team-total>span { color:#999; font-size:7px; }
.moon-team-total>strong { font-size:12px; font-weight:500; }
.moon-demo[data-phase="team-detail"] .moon-staff-focus { border-color:#8db195; background:#111b13; }
.moon-demo[data-phase="team-detail"] .moon-team-agenda { transform:translateY(0); }
.moon-team-agenda { padding-bottom:10px; }
.moon-team-agenda .moon-profile-heading { margin-bottom:7px; }
.moon-staff-appointment { display:flex; align-items:center; gap:10px; min-height:35px; border-top:1px solid #252525; }
.moon-staff-appointment>span { color:#aaa; font-size:8px; }
.moon-staff-appointment>div { display:flex; flex:1; flex-direction:column; gap:4px; }
.moon-staff-appointment strong { font-size:8px; font-weight:500; }
.moon-staff-appointment>div>span { color:#999; font-size:7px; }
.moon-staff-appointment>i { width:5px; height:5px; border-radius:50%; background:#c4b5fd; }
.moon-staff-appointment:nth-last-child(2)>i { background:#b9d9bf; }

.moon-splash {
  position:absolute;
  z-index:4;
  inset:35px 0 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  background:#000;
  opacity:1;
  transition:opacity .7s ease;
}

.moon-splash img { width:128px; height:128px; }
.moon-splash>span { color:#8c8c8c; font-size:13px; letter-spacing:-.4px; }
.moon-demo:not([data-phase="intro"]) .moon-splash { opacity:0; pointer-events:none; }
.moon-home-indicator { position:absolute; z-index:7; bottom:5px; left:50%; width:76px; height:3px; border-radius:5px; background:#fff; transform:translateX(-50%); }

.moon-booking-sheet {
  position:absolute;
  z-index:3;
  inset:83px 0 13px;
  display:flex;
  flex-direction:column;
  padding:8px 13px 12px;
  border:1px solid #292929;
  border-bottom:0;
  border-radius:22px 22px 0 0;
  background:#000;
  box-shadow:0 -30px 40px rgb(0 0 0 / 60%);
  transform:translateY(115%);
  transition:transform .75s cubic-bezier(.22,.8,.22,1);
}

.moon-demo:is([data-phase="booking"],[data-phase="submit"]) .moon-booking-sheet { transform:translateY(0); }
.moon-sheet-handle { flex-shrink:0; width:27px; height:3px; margin:0 auto 12px; border-radius:3px; background:#555; }
.moon-sheet-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.moon-sheet-heading strong { font-size:14px; font-weight:500; }
.moon-sheet-heading>span { color:#aaa; font-size:20px; line-height:1; }
.moon-demo-field { display:flex; flex-direction:column; gap:5px; margin-bottom:9px; }
.moon-demo-field>span,.moon-demo-datetime>div>span { color:#999; font-size:7px; }
.moon-field-value { display:flex; align-items:center; justify-content:space-between; min-height:28px; padding:6px 9px; border:1px solid #343434; border-radius:8px; font-size:8px; font-weight:400; opacity:.25; transform:translateY(3px); transition:opacity .4s ease,transform .4s ease; }
.moon-demo:is([data-phase="booking"],[data-phase="submit"]) .moon-field-value { opacity:1; transform:translateY(0); transition-delay:.5s; }
.moon-demo:is([data-phase="booking"],[data-phase="submit"]) .moon-demo-field:nth-of-type(3) .moon-field-value { transition-delay:.9s; }
.moon-demo:is([data-phase="booking"],[data-phase="submit"]) .moon-demo-field:nth-of-type(4) .moon-field-value { transition-delay:1.3s; }
.moon-demo:is([data-phase="booking"],[data-phase="submit"]) .moon-demo-field:nth-of-type(5) .moon-field-value { transition-delay:1.7s; }
.moon-client-avatar { display:grid; place-items:center; width:15px; height:15px; border-radius:50%; background:#e2e2e2; color:#111; font-size:6px; font-style:normal; }
.moon-client-avatar+span { margin-right:auto; }
.moon-field-check { color:#b7edc4; }
.moon-field-value svg { width:12px; height:12px; }
.moon-demo-datetime { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.moon-demo-datetime>div { display:flex; flex-direction:column; gap:6px; padding:7px 8px; border:1px solid #343434; border-radius:8px; }
.moon-demo-datetime strong { font-size:8px; font-weight:400; }
.moon-demo-submit { position:relative; display:grid; flex-shrink:0; place-items:center; min-height:30px; margin-top:auto; border-radius:9px; background:#fff; color:#000; font-size:9px; font-weight:600; }

.moon-touch { position:absolute; top:50%; left:50%; width:30px; height:30px; border:2px solid #fff; border-radius:50%; background:rgb(255 255 255 / 20%); opacity:0; transform:translate(-50%,-50%) scale(1.6); }
.moon-demo[data-phase="tap"] .moon-add .moon-touch,.moon-demo[data-phase="submit"] .moon-demo-submit .moon-touch { animation:moon-tap .8s ease both; }
.moon-demo-submit .moon-touch { border-color:#a2a2a2; background:rgb(0 0 0 / 10%); }
@keyframes moon-tap { 0% { opacity:0; transform:translate(-50%,-50%) scale(1.7); } 35% { opacity:1; transform:translate(-50%,-50%) scale(.7); } 65% { opacity:1; transform:translate(-50%,-50%) scale(.7); } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.3); } }

.moon-booked-toast { position:absolute; z-index:3; top:48px; right:12px; left:12px; display:flex; align-items:center; justify-content:center; gap:7px; padding:11px 8px; border:1px solid #424242; border-radius:12px; background:#191919; font-size:9px; opacity:0; transform:translateY(-70px); transition:opacity .4s ease,transform .6s cubic-bezier(.2,.8,.2,1); }
.moon-booked-toast>span { color:#b7edc4; }
.moon-demo[data-phase="booked"] .moon-booked-toast { opacity:1; transform:translateY(0); }

.moon-notification {
  position:absolute;
  z-index:5;
  top:47px;
  right:7px;
  left:7px;
  padding:11px;
  border:1px solid #fff;
  border-radius:15px;
  background:#f0f0f0;
  color:#191919;
  box-shadow:0 14px 30px rgb(0 0 0 / 40%);
  opacity:0;
  transform:translateY(-150px);
  transition:opacity .5s ease,transform .85s cubic-bezier(.2,.8,.18,1.12);
}

.moon-notification-top { display:flex; align-items:center; gap:5px; margin-bottom:8px; color:#555; font-size:6px; letter-spacing:.5px; }
.moon-notification-top>span:last-child { margin-left:auto; font-size:7px; letter-spacing:0; }
.moon-whatsapp-icon { display:grid; place-items:center; width:17px; height:17px; border-radius:5px; background:#25b85a; color:#fff; }
.moon-whatsapp-icon svg { width:14px; height:14px; }
.moon-notification>strong { display:block; margin:0 0 5px; font-size:9px; font-weight:600; }
.moon-notification>p { margin:0; font-size:9px; line-height:1.5; }
.moon-demo[data-phase="reminder"] .moon-notification { opacity:1; transform:translateY(0); }
.moon-demo[data-phase="reminder"] .moon-app { opacity:.65; }

.moon-demo-controls { position:absolute; z-index:2; right:28px; bottom:9px; left:28px; display:flex; align-items:center; justify-content:space-between; }
.moon-demo-steps,.moon-playback-controls { display:flex; align-items:center; gap:3px; }
.moon-step { display:grid; place-items:center; width:40px; height:36px; padding:8px; border-radius:10px; background:transparent; }
.moon-step>span { width:24px; height:3px; border-radius:4px; background:rgb(171 190 234 / 25%); transition:background .3s ease; }
.moon-step[aria-pressed="true"]>span { background:#7896ff; }
.moon-control { display:flex; align-items:center; justify-content:center; gap:4px; min-width:36px; height:36px; padding:8px; border-radius:50px; background:transparent; color:#a9b9d8; font-size:10px; }
.moon-control:hover { background:rgb(255 255 255 / 7%); color:#fff; }
.moon-demo button:focus-visible { outline-color:#9aafff; }
.moon-control svg { width:16px; height:16px; }
.moon-control svg[hidden] { display:none; }
.moon-toggle { min-width:77px; }
.moon-demo[data-playing="false"] .moon-touch { animation-play-state:paused; }

@media(max-width:900px) and (min-width:651px) {
  .moon-phone { --phone-scale:.9; }
  .moon-copy { left:68%; width:27%; }
  .moon-copy[data-moon-copy="intro"] { left:6%; width:42%; }
  .moon-copy h3 { font-size:clamp(20px,3.5cqw,30px); }
  .moon-copy p { font-size:14px; }
  .moon-copy[data-moon-copy="intro"] p { font-size:23px; }
  .moon-overview h3 { margin-bottom:16px; font-size:32px; }
  .moon-overview p { font-size:13px; line-height:1.6; }
  .moon-overview p+p { margin-top:12px; }
  .moon-copy-label { font-size:8px; letter-spacing:1px; }
}

@media(max-width:650px) {
  .moon-demo { height:770px; }
  .moon-stage { bottom:82px; }
  .moon-copy,.moon-copy[data-moon-copy="intro"] { top:32px; left:24px; width:calc(100% - 48px); translate:none; }
  .moon-copy h3 { margin-bottom:13px; font-size:clamp(32px,10cqw,36px); }
  .moon-copy p { max-width:340px; font-size:16px; line-height:1.65; }
  .moon-copy[data-moon-copy="intro"] h3 { font-size:70px; }
  .moon-copy[data-moon-copy="intro"] p { max-width:280px; font-size:23px; }
  .moon-copy-label { margin-bottom:12px; font-size:7px; letter-spacing:1px; }
  .moon-phone { --phone-scale:.86; top:65%; left:53%; }
  .moon-demo:not([data-phase="intro"]) { height:1120px; }
  .moon-demo:not([data-phase="intro"]) .moon-phone { top:52%; left:50%; }
  .moon-demo:not([data-phase="intro"]) .moon-copy { top:auto; bottom:32px; }
  .moon-overview { top:32px; left:24px; width:calc(100% - 48px); translate:none; }
  .moon-overview h3 { margin-bottom:14px; font-size:36px; }
  .moon-overview p { font-size:14px; line-height:1.6; }
  .moon-overview p+p { margin-top:12px; }
  .moon-phone-shadow { top:96%; left:53%; width:175px; height:16px; }
  .moon-demo:not([data-phase="intro"]) .moon-phone-shadow { top:73%; left:50%; }
  .moon-demo-controls { right:12px; bottom:4px; left:12px; flex-direction:column; }
  .moon-step { width:34px; height:30px; }
  .moon-step>span { width:20px; }
  .moon-tech-grid { background-size:56px 56px; opacity:.6; }
  .moon-orbital-field { top:56%; width:460px; height:460px; }
  .moon-demo:not([data-phase="intro"]) .moon-orbital-field { top:48%; }
  .moon-starfield { opacity:.45; }
  .moon-tech-lines { opacity:.5; }
}

@media(prefers-reduced-motion:reduce) {
  .moon-demo *,.moon-demo *::before,.moon-demo *::after { animation:none !important; transition:none !important; }
}

@media(max-width:360px) {
  .moon-phone { --phone-scale:.78; top:66%; }
}