*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  min-height:100vh;
  background:#061a30;
  font-family:Arial, Helvetica, sans-serif;
  overflow-x:hidden;
}

/* Full design face */
.dashboard-page{
  width:100%;
  min-height:1450px;
  background:
    linear-gradient(180deg,#f5f3ee 0%,#eef1f4 60%,#061a30 100%);
}

.design-face{
  position:relative;
  width:100%;
  max-width:1536px;
  margin:0 auto;
  background:#f4f1eb;
  box-shadow:0 30px 90px rgba(0,0,0,.28);
}

/* This keeps the original screenshot ratio and allows page scroll */
.design-face img{
  display:block;
  width:100%;
  height:auto;
  user-select:none;
  pointer-events:none;
}

/* Invisible clickable test areas */
.hotspot{
  position:absolute;
  display:block;
  background:rgba(255,255,255,0);
  border-radius:14px;
  text-decoration:none;
}

.hotspot:hover{
  outline:2px solid rgba(217,164,65,.55);
  background:rgba(217,164,65,.08);
}

/* Hotspot positions based on 1536x1024 reference */
.nav-mission{left:23.5%;top:2.3%;width:8.5%;height:4.8%;}
.nav-applications{left:33.2%;top:2.3%;width:7.7%;height:4.8%;}
.nav-clients{left:41.4%;top:2.3%;width:5.5%;height:4.8%;}
.nav-countries{left:47.1%;top:2.3%;width:6.4%;height:4.8%;}
.nav-finance{left:54.2%;top:2.3%;width:5.3%;height:4.8%;}
.nav-reports{left:60.0%;top:2.3%;width:5.4%;height:4.8%;}

.search-box{left:68.3%;top:1.8%;width:15.1%;height:5.0%;}
.view-analytics{left:85.7%;top:45.8%;width:11.7%;height:5.2%;}

.new-client{left:70.5%;top:67.3%;width:12.2%;height:4.5%;}
.new-application{left:70.5%;top:71.2%;width:12.2%;height:4.5%;}
.book-appointment{left:70.5%;top:75.2%;width:12.2%;height:4.5%;}
.invoice{left:70.5%;top:79.2%;width:12.2%;height:4.5%;}
.ai-box{left:81.8%;top:53.2%;width:17.2%;height:36.8%;}

/* Extra lower scroll section */
.scroll-area{
  max-width:1536px;
  margin:0 auto;
  min-height:420px;
  padding:70px 40px;
  background:#061a30;
  color:white;
}

.glass-note{
  max-width:820px;
  margin:auto;
  padding:35px;
  border-radius:26px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 25px 70px rgba(0,0,0,.35);
}

.glass-note h2{
  font-size:34px;
  margin-bottom:14px;
  color:#f1c36a;
}

.glass-note p{
  line-height:1.8;
  color:#d7e0ed;
  font-size:17px;
}

/* Mobile: keep same design, just scale down naturally */
@media(max-width:768px){
  .dashboard-page{
    min-height:1050px;
  }

  .design-face{
    width:1536px;
    max-width:none;
    transform:scale(.42);
    transform-origin:top left;
    margin-bottom:-595px;
  }

  .scroll-area{
    padding:45px 18px;
    min-height:360px;
  }

  .glass-note{
    padding:24px;
  }

  .glass-note h2{
    font-size:26px;
  }

  .glass-note p{
    font-size:15px;
  }
}

@media(max-width:480px){
  .design-face{
    transform:scale(.28);
    margin-bottom:-735px;
  }
}